HarmonyOS應用開發-基本控件

時間 2020-10-22

標籤數據庫 json 服務器網絡分佈式 ide 工具佈局 post 性能欄目 SQL 简体版

原文原文鏈接

一、介紹數據庫

本篇CodeLab將實現的內容
HarmonyOS是面向全場景多終端的分佈式操做系統，使得應用程序的開發打破了智能終端互通的性能和數據壁壘，業務邏輯原子化開發，適配多端。經過一個簡單應用開發，體驗HarmonyOS的基本控件使用。json

您將創建什麼
在這個CodeLab中，你將建立Demo Project，並將Demo編譯成HAP，部署到智慧屏上，以實現HarmonyOS基本控件使用。服務器

您將會學到什麼
如何建立一個HarmonyOS Demo Project
如何構建一個HAP而且將其部署到智慧屏上
經過此示例應用體驗在HarmonyOS上如何使用基本控件，包括文本輸入框，日期選擇控件，單選按鈕，下拉菜單和按鈕網絡

2. 您須要什麼分佈式

硬件要求
操做系統：Windows10 64位
內存：8G及以上
硬盤：100G及以上
分辨率：1280*800及以上ide

軟件要求
安裝DevEco Studio和Node.js，詳情請參考下載和安裝軟件
設置DevEco Studio開發環境，DevEco Studio開發環境須要依賴於網絡環境，須要鏈接上網絡才能確保工具的正常使用，能夠根據以下兩種狀況來配置開發環境
1. 若是能夠直接訪問Internet，只需進行下載HarmonyOS SDK操做
2. 若是網絡不能直接訪問Internet，須要經過代理服務器才能夠訪問，請參考配置開發環境工具

須要的知識點
JavaScript基礎開發能力。佈局

3. 能力接入準備
實現HarmonyOS應用開發，須要完成如下準備工做：post

環境準備。
環境搭建。
建立項目
申請調試證書
應用開發性能

具體操做，請按照《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：