HarmonyOS 基本控件的实现

DevEco Studio：需手动下载安装，详细步骤请参考《DevEco Studio使用指南》2.1.2
JDK：DevEco Studio自动安装。
Node.js：请手动下载安装，详细步骤请参考《DevEco Studio使用指南》2.1.3 下载和安装Node.js。
HarmonyOS SDK：待DevEco Studio安装完成后，利用DevEco Studio来加载HarmonyOS SDK。详细步骤请参考《DevEco Studio使用指南》2.1.6 加载HarmonyOS SDK。
Maven库依赖包：如需手动拷贝和配置，详细步骤请参考《DevEco Studio使用指南》2.3 离线方式配置Maven库。

需要的知识点

Java基础开发能力。

3. 能力接入准备

实现HarmonyOS应用开发，需要完成以下准备工作：

环境准备。
环境搭建。
创建项目
申请调试证书
应用开发

具体操作，请按照《DevEco Studio使用指南》中详细说明来完成。

4. 代码片段

1. 布局：

布局代码：

LayoutConfig config = new LayoutConfig(LayoutConfig.MATCH_PARENT, LayoutConfig.MATCH_PARENT);
myLayout.setLayoutConfig(config);
myLayout.setOrientation(Component.VERTICAL);
ShapeElement element = new ShapeElement();
element.setRgbColor(new RgbColor(255, 255, 255));
myLayout.setBackground(element);
log = createText("日志信息");
myLayout.addComponent(log);
writeBtn = createBtn("写入preferences数据", new RgbColor(0, 0, 255), 1002);
readBtn = createBtn("读取preferences数据", new RgbColor(0, 0, 255), 1003);
addObserver = createBtn("注册观察者", new RgbColor(255, 0, 0), 1004);

private Text createText(String title) {
Text text = new Text(this);
DirectionalLayout.LayoutConfig config = new DirectionalLayout.LayoutConfig(DirectionalLayout.LayoutConfig.MATCH_CONTENT, DirectionalLayout.LayoutConfig.MATCH_CONTENT);
text.setLayoutConfig(config);
text.setText(title);
text.setTextSize(48);
text.setTextColor(new Color(0xFF0000FF));
return text;
}

private Button createBtn(String title, RgbColor color, int id) {
Button btn = new Button(this);
LayoutConfig configBtn = new LayoutConfig(500, 100);
configBtn.topMargin = 30;
btn.setLayoutConfig(configBtn);
btn.setText(title);
btn.setId(id);
btn.setTextSize(48);
btn.setTextColor(new Color(0xFFFFFFFF));
ShapeElement elementBtn = new ShapeElement();
elementBtn.setRgbColor(color);
elementBtn.setCornerRadius(12);
btn.setBackground(elementBtn);
myLayout.addComponent(btn);
return btn;
}

2. Preferences使用：

Preferences初始化

private void initPreferences() {
DatabaseHelper databaseHelper = new DatabaseHelper(this);
String fileName = "user_info";
preferences = databaseHelper.getPreferences(fileName);
}

写文件：

preferences.putInt("age", Integer.parseInt(age.getText()));
preferences.putString("name", name.getText());
preferences.flushSync();

读文件：

int age = preferences.getInt("age", 0);
String name = preferences.getString("name", "");
ToastDialog toastDialog = new ToastDialog(PreferencesAbilitySlice.this);
toastDialog.setText("read user data frome preferences name:" + name + ", age:" + age);
toastDialog.show();

观察者：

counter = new PreferencesChangeCounter();
preferences.registerObserver(counter);

private class PreferencesChangeCounter implements Preferences.PreferencesObserver {
  @Override
  public void onChange(Preferences preferences, String key) {
    if ("name".equals(key)) {
      String name = preferences.getString("name", "");
      log.setText("user data name is edit:" + name);
    }
    if ("age".equals(key)) {
      int age = preferences.getInt("age", 0);
      log.setText("user data age is edit:" + age);
    }
  }
}

删除：

preferences.unregisterObserver(counter);

3. 响应遥控器点击

在zh-CN.json文件中写入：

private void addFocusChangedListener(Component view) {
  view.setFocusChangedListener(new Component.FocusChangedListener() {
    @Override
    public void onFocusChange(Component component, boolean b) {
      ShapeElement shapeElement = (ShapeElement) view.getBackgroundElement();
      if (b) {
        shapeElement.setStroke(10, new RgbColor(0, 0, 0));
        focusView = view;
      } else {
        shapeElement.setStroke(0, new RgbColor(0, 0, 0));
      }
    }
  });
}

@Override
public boolean onKeyUp(int keyCode, KeyEvent keyEvent) {
  switch (keyCode) {
    case KeyEvent.KEY_DPAD_CENTER:
    case KeyEvent.KEY_ENTER:
      if(focusView == writeBtn) {

        preferences.putInt("age", index++);
        preferences.putString("name", "张三");
        preferences.flushSync();
      }
      if(focusView == readBtn) {
        int age = preferences.getInt("age", 0);
        String name = preferences.getString("name", "");
        log.setText("read user data frome preferences name:" + name + ", age:" + age);
      }
      if(focusView == addObserver) {
        if (addObserver.getText().equals("注册观察者")) {
          addObserver.setText("删除观察者");
          // 向preferences实例注册观察者
          counter = new PreferencesChangeCounter();
          preferences.registerObserver(counter);

        } else {
          addObserver.setText("注册观察者");
          // 向preferences实例注销观察者
          preferences.unregisterObserver(counter);
        }
      }
      return true;
    case KeyEvent.KEY_DPAD_UP:
      int position = views.indexOf(focusView.getId());
      if (position > 0) {
        switch (position) {
          case 1:
            writeBtn.requestFocus();
            break;
          case 2:
            readBtn.requestFocus();
            break;
          default:
            break;
        }
      }
      return true;
    case KeyEvent.KEY_DPAD_DOWN:
      position = views.indexOf(focusView.getId());
      if (position < 3) {
        switch (position) {
          case 0:
            readBtn.requestFocus();
            break;
          case 1:
            addObserver.requestFocus();
            break;
          default:
            break;
        }
      }
      return true;
  }
  return false;
}

4.编译运行该应用

通过hdc连接大屏设备

先查看智慧屏IP：大屏设置->"网络与连接"->"网络"->"有线网络"

在cmd或者IDE的Terminal输入命令：

hdc tconn 192.168.3.9:5555

运行hap

提示：需要通过注册成开发者才能完成集成准备中的操作。

干得好

你已经成功完成了HarmonyOS应用开发E2E体验，学到了：
如何创建一个HarmonyOS Demo Project
如何构建一个Hap并且将其部署到真机上
在HarmonyOS上如何使用HarmonyOS的轻量级偏好数据库

到此这篇关于HarmonyOS应基本控件的实现的文章就介绍到这了,更多相关HarmonyOS应基本控件内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

HarmonyOS实现HelloWorld应用开发E2E体验

感谢关注HarmonyOS,为了便于大家学习特将鸿蒙2.0基础教学内容整理如下: 1.HarmonyOS应用开发-视频播放 https://developer.huawei.com/consumer/cn/codelab/HarmonyOS-hap1/index.html 2.HarmonyOS应用开发-基本控件 https://developer.huawei.com/consumer/cn/codelab/HarmonyOS-hap2/index.html 3.HarmonyOS应用开发-U
HarmonyOS 基本控件的实现

感谢关注HarmonyOS,为了便于大家学习特将鸿蒙2.0基础教学内容整理如下: 1.HarmonyOS应用开发-视频播放 https://developer.huawei.com/consumer/cn/codelab/HarmonyOS-hap1/index.html#0 2.HarmonyOS应用开发-基本控件 https://developer.huawei.com/consumer/cn/codelab/HarmonyOS-hap2/index.html#0 3.HarmonyOS应用
HarmonyOS鸿蒙基本控件的实现

感谢关注HarmonyOS,为了便于大家学习特将鸿蒙2.0基础教学内容整理如下: 1.HarmonyOS应用开发-视频播放 https://developer.huawei.com/consumer/cn/codelab/HarmonyOS-hap1/index.html#0 2.HarmonyOS应用开发-基本控件 https://developer.huawei.com/consumer/cn/codelab/HarmonyOS-hap2/index.html#0 3.HarmonyOS应用
Bootstrap 树控件使用经验分享(图文解说)

jquery 树形控件 jquery 树形控件是一款基于jquery+bootstrap.完全通过js和样式手写出来的非常轻量级的控件,它功能简单.用户体验不错.对于一些简单的层级关系展示比较实用. 前言:很多时候我们在项目中需要用到树,有些树仅仅是展示层级关系,有些树是为了展示和编辑层级关系,还有些树是为了选中项然后其他地方调用选中项.不管怎么样,树控件都是很多项目里面不可或缺的组件之一.今天,博主打算结合自己的使用经历和网上找到的一些不错的树控件在这里做一个分享,希望能帮大家找到最合适的控件
使用Lable控件输出九九乘法表

利用Lable控件输出九九乘法表,具体内容如下首先建立一个空网站,之后选择添加新项,添加一个Web窗体. 进入.aspx文件之后,在设计界面中添加9个Lable控件.Lable控件在标准组中.得到的源代码是这样的. <%@ Page Language="C#" AutoEventWireup="true" CodeFile="WebForm4.aspx.cs" Inherits="WebForm4" %> <
用htc实现CHECKBOX控件

复制代码代码如下: /* 描述: CHECKBOX控件版本: 1.1 备注: CHECKBOX控件背后跟随的文字是获取CHECKBOX对象的htc_myLabel来显示的更新添加indeter属性,用来增加不确定的选择 */ <public:component> <public:attach event="oncontentready" onevent="fnI
Ext JS框架中日期函数的用法及日期选择控件的实现

Ext.Date是一个单例,封装了一系列日期操作函数,扩展JavaScript Date的功能,下面列出一些常用的功能. 基本函数: Ext.Date.add(date, interval, value) 给date增加或减少时间,这个函数不改变原有Date对象的值,而是返回一个新的Date对象. Ext.Date.between(date, start, end) 判断date是否在start和end之间. Ext.Date.clearTime(date, clone) 把date的时间设置成
详解支持Angular 2的表格控件

前端框架一直这最近几年特别火的一个话题,尤其是Angular 2拥有众多的粉丝.在2016年9月份Angular 2正式发布之后,大量的粉丝的开始投入到了Angular 2的怀抱.当然这其中也包括我.如果你想了解Angular 2,推荐官方网站:英文版.中文版.通过快速起步,可以快速体验Angular 2. 公司的一个项目想基于Angular 2的2.4 版本进行开发,目前还在进行前期的调研阶段.我担当的任务就是研究基于Angular 2的UI控件,在官方网站的资源中列出了很多支持Angular
Angularjs中使用layDate日期控件示例

layDate 控件地址:http://laydate.layui.com/ 前情:原来系统中使用的日期控件是UI bootstrap(地址:https://angular-ui.github.io/bootstrap/)里的.后来因为各种原因,要换掉UI bootstrap中的日期控件,改用layDate日期控件. 解决思路:将layDate的初始化及相关代码定义在指令里. 问题关键点:layDate操作的是Html元素的,怎么实现双向绑定,同步Angularjs模板值和Html的元素值. 指
AngularJS 文件上传控件 ng-file-upload详解

网上可以找到的 AngularJS 的文件上传控件有两个: angular-file-upload:https://github.com/nervgh/angular-file-upload ng-file-upload:https://github.com/danialfarid/ng-file-upload 这两个非常类似,连js文件的结构都是一样的.核心的js是.min.js,还都有一个-shim.min.js,用来支持上传进度条和上传暂停等高级功能. 按道理讲shim.js应该是可加可不
学习使用AngularJS文件上传控件

前段时间做项目遇到一个需求是上传文件,大概需要实现的样式是这样子的,见下图: 需要同时上传两个文件.并且规定文件格式和文件大小.因为前端框架使用angular,且不想因为一个上传功能又引入一个jquery,所以在网上查找基于angular的上传控件,因为angular还算比较新,貌似都没有太成熟的插件,网上的教程也大多是复制粘贴,总之没起倒多大的作用...但是皇天不负有心人,最后还是让我遇到了这个功能强大的插件,让我有种相见恨晚的感觉呀,依靠官方文档和师兄的帮助,终于搞清楚了基本的使用方法.好东

HarmonyOS 基本控件的实现

相关推荐

随机推荐