[文章]

HarmonyOS应用开发-基本控件

2020-9-14 14:39:53  506 鸿蒙系统 应用开发 基本控件
分享
2
本帖最后由 jf_94980416 于 2020-9-14 15:29 编辑

1、介绍   

本篇CodeLab将实现的内容
HarmonyOS是面向全场景多终端的分布式操作系统,使得应用程序的开发打破了智能终端互通的性能和数据壁垒,业务逻辑原子化开发,适配多端。通过一个简单应用开发,体验HarmonyOS的基本控件使用。

您将建立什么
在这个CodeLab中,你将创建Demo Project,并将Demo编译成HAP,部署到智慧屏上,以实现HarmonyOS基本控件使用。

您将会学到什么
如何创建一个HarmonyOS Demo Project
如何构建一个HAP并且将其部署到智慧屏上
通过此示例应用体验在HarmonyOS上如何使用基本控件,包括文本输入框,日期选择控件,单选按钮,下拉菜单和按钮

2. 您需要什么

硬件要求
操作系统:Windows10 64位
内存:8G及以上
硬盘:100g及以上
分辨率:1280*800及以上

软件要求
安装DevEco Studio和Node.js,详情请参考下载和安装软件
设置DevEco Studio开发环境,DevEco Studio开发环境需要依赖于网络环境,需要连接上网络才能确保工具的正常使用,可以根据如下两种情况来配置开发环境
1. 如果可以直接访问Internet,只需进行下载HarmonyOS SDK操作
2. 如果网络不能直接访问Internet,需要通过代理服务器才可以访问,请参考配置开发环境

需要的知识点
JavaScript基础开发能力。

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));
            }
        }
    }
);}
@Overridepublic 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
7.png
提示:需要通过注册成开发者才能完成集成准备中的操作。

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

duke刘 2020-9-15 10:40:38
干得好
回复

举报

评论

您需要登录后才可以回帖 登录 | 注册

声明:本文内容及配图由入驻作者撰写或者入驻合作网站授权转载。文章观点仅代表作者本人,不代表电子发烧友网立场。文章及其配图仅供工程师学习之用,如有内容图片侵权或者其他问题,请联系本站作侵删。 侵权投诉
发文章