|
|
HarmonyOS应用开发-基本控件, 
本帖最后由 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应用开发，需要完成以下准备工作：
环境准备。
环境搭建。
创建项目
申请调试证书
应用开发
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：
大屏设置->“网络与连接“->“网络“->“有线网络“
hdc tconn 192.168.3.9:5555运行hap
7.png （80.49 KB, 下载次数: 0）
下载附件 保存到相册
1 小时前 上传 提示：需要通过注册成开发者才能完成集成准备中的操作。
干得好
你已经成功完成了HarmonyOS应用开发E2E体验，学到了：
如何创建一个HarmonyOS Demo Project
如何构建一个Hap并且将其部署到真机上
在HarmonyOS上如何使用HarmonyOS的轻量级偏好数据库 |
|
电子产业一站式赋能平台
窥视卡
置顶卡
变色卡
