element 前台系统

 

 

 从官网下载好例子。如下。但是它还需要更新一些依赖。让它更新，更新后了如下

看到成功了，说明代码没有问题。但是，点击

却报错。而且打不开模拟器。

这是你没有实名认证。你要去华为去实名认证。自己玩的话，申请个人就好了。准备好，姓名，身份证号，银行卡号，手机号。然后点击这个

可以模拟的设备就出来了

用哪个Actions 那个。一次只能用1个小时，时间到了，在申请。

我用的是 一个手表的例子，做了一丁点修改。要不会报错的

import ohos.aafwk.ability.Ability;
import ohos.aafwk.content.Intent;

public class PageAbility extends Ability {
    @Override
    public void onStart(Intent intent) {
        super.onStart(intent);
        super.setMainRoute(SleepPageSlice.class.getName());
        setSwipeToDismiss(true);
    }
}

import ohos.aafwk.ability.AbilitySlice;
import ohos.aafwk.content.Intent;
import ohos.agp.components.*;
import ohos.hiviewdfx.HiLog;
import ohos.hiviewdfx.HiLogLabel;

import java.util.ArrayList;
import java.util.List;
import java.util.Optional;

public class SleepPageSlice extends AbilitySlice {
    private static final String TAG = "SleepPageSlice";

    private static final HiLogLabel LABEL = new HiLogLabel(HiLog.LOG_APP, 0, TAG);

    private List<ComponentOwner> list = new ArrayList<>();

    private PageSliderProvider provider = new PageSliderProvider() {
        @Override
        public int getCount() {
            return list.size();
        }

        @Override
        public Object createPageInContainer(ComponentContainer componentContainer, int index) {
            if (index >= list.size() || componentContainer == null) {
                HiLog.error(LABEL, "instantiateItem index error");
                return Optional.empty();
            }
            ComponentOwner container = list.get(index);
            componentContainer.addComponent(container.getComponent());
            container.instantiateComponent();
            return container.getComponent();
        }

        @Override
        public void destroyPageFromContainer(ComponentContainer componentContainer, int index, Object object) {
            HiLog.info(LABEL, "destroyItem index:" + index);
            if (index >= list.size() || componentContainer == null) {
                return;
            }
            Component content = list.get(index).getComponent();
            componentContainer.removeComponent(content);
            return;
        }

        @Override
        public boolean isPageMatchToObject(Component component, Object object) {
            return component == object;
        }

        @Override
        public void startUpdate(ComponentContainer container) {
            super.startUpdate(container);
            HiLog.info(LABEL, "startUpdate");
        }
    };

    @Override
    public void onStart(Intent intent) {
        super.onStart(intent);
        HiLog.info(LABEL, "onStart");

        // 添加子页面
        list.add(new SleepComponentOwner(this));
        list.add(new DetailComponentOwner(this));

        // 设置主界面
        DirectionalLayout layout = new DirectionalLayout(this);
        ComponentContainer.LayoutConfig config = new ComponentContainer.LayoutConfig(
                ComponentContainer.LayoutConfig.MATCH_PARENT,
                ComponentContainer.LayoutConfig.MATCH_PARENT);
        layout.setLayoutConfig(config);

        // 使用PageSlider做滑动效果
        PageSlider slider = new PageSlider(this);
        ComponentContainer.LayoutConfig sliderConfig = new ComponentContainer.LayoutConfig(
                ComponentContainer.LayoutConfig.MATCH_PARENT,
                ComponentContainer.LayoutConfig.MATCH_PARENT);
        slider.setLayoutConfig(sliderConfig);

        slider.setProvider(provider);

        layout.addComponent(slider);

        setUIContent(layout);
    }
}

import com.huawei.mywearable.ResourceTable;
import ohos.agp.components.Component;
import ohos.agp.components.LayoutScatter;
import ohos.agp.components.element.VectorElement;
import ohos.app.AbilityContext;
import ohos.hiviewdfx.HiLog;
import ohos.hiviewdfx.HiLogLabel;

public class SleepComponentOwner implements ComponentOwner {
    private static final String TAG = "SleepComponentOwner";

    private static final HiLogLabel LABEL = new HiLogLabel(HiLog.LOG_APP, 0, TAG);

    // 目标睡眠时长默认值,单位：分钟
    private static final int DEFAULT_SLEEP_TARGET_TIME = 480;

    // 睡眠时长默认值,单位：分钟
    private static final int DEFAULT_SLEEP_TIME = 0;

    private CircleProgressDrawTask drawTask;

    private AbilityContext myContext;

    private Component root;

    public SleepComponentOwner(AbilityContext context) {
        init(context);
    }

    private void init(AbilityContext context) {
        myContext = context;
        LayoutScatter scatter = LayoutScatter.getInstance(context);
        root = scatter.parse(ResourceTable.Layout_layout_sleep, null, false);
        drawTask = new CircleProgressDrawTask(root);
        drawTask.setMaxValue(DEFAULT_SLEEP_TARGET_TIME);

        Component imageComponent = root.findComponentById(ResourceTable.Id_sleep_moon_img);
        imageComponent.setBackground(new VectorElement(context, ResourceTable.Id_sleep_moon_img));
    }

    @Override
    public Component getComponent() {
        return root;
    }

    @Override
    public void instantiateComponent() {
        return;
    }
}

 

import ohos.agp.components.Component;
import ohos.agp.render.Canvas;
import ohos.agp.utils.Color;

public class CircleProgressDrawTask implements Component.DrawTask {
    // 用于配置圆环的粗细，具体参数可以在xml文件中配置
    private static final String STROKE_WIDTH_KEY = "stroke_width";

    // 用于配置圆环的最大值，具体参数可以在xml文件中配置
    private static final String MAX_PROGRESS_KEY = "max_progress";

    // 用于配置圆环的当前值，具体参数可以在xml文件中配置
    private static final String CURRENT_PROGRESS_KEY = "current_progress";

    // 用于配置起始位置的颜色，具体参数可以在xml文件中配置
    private static final String START_COLOR_KEY = "start_color";

    // 用于配置结束位置的颜色，具体参数可以在xml文件中配置
    private static final String END_COLOR_KEY = "end_color";

    // 用于配置背景色，具体参数可以在xml文件中配置
    private static final String BACKGROUND_COLOR_KEY = "background_color";

    // 用于配置起始位置的角度，具体参数可以在xml文件中配置
    private static final String START_ANGLE = "start_angle";

    private static final float MAX_ARC = 360f;

    private static final int DEFAULT_STROKE_WIDTH = 10;

    private static final int DEFAULT_MAX_VALUE = 100;

    private static final int DEFAULT_START_COLOR = 0xFFB566FF;

    private static final int DEFAULT_END_COLOR = 0xFF8A2BE2;

    private static final int DEFAULT_BACKGROUND_COLOR = 0xA8FFFFFF;

    private static final int DEFAULT_START_ANGLE = -90;

    private static final float DEFAULT_LINER_MAX = 100f;

    private static final int HALF = 2;

    // 圆环的宽度, 默认10个像素
    private int myStrokeWidth = DEFAULT_STROKE_WIDTH;

    // 最大的进度值, 默认是100
    private int myMaxValue = DEFAULT_MAX_VALUE;

    // 当前的进度值, 默认是0
    private int myCurrentValue = 0;

    // 起始位置的颜色, 默认浅紫色
    private Color myStartColor = new Color(DEFAULT_START_COLOR);

    // 结束位置的颜色, 默认深紫色
    private Color myEndColor = new Color(DEFAULT_END_COLOR);

    // 背景颜色, 默认浅灰色
    private Color myBackgroundColor = new Color(DEFAULT_BACKGROUND_COLOR);

    // 当前的进度值, 默认从-90度进行绘制
    private int myStartAngle = DEFAULT_START_ANGLE;

    private Component myComponent;

    // 传入要进行修改的component
    public CircleProgressDrawTask(Component component) {
        myComponent = component;
        myComponent.addDrawTask(this);
    }

    // 设置当前进度并且刷新component，value值为当前进度
    public void setValue(int value) {
        myCurrentValue = value;
        myComponent.invalidate();
    }

    public void setMaxValue(int maxValue) {
        myMaxValue = maxValue;
        myComponent.invalidate();
    }

    @Override
    public void onDraw(Component component, Canvas canvas) {
        // 通过canvas实现绘制圆环的功能

    }
}

 

import ohos.agp.components.Component;

public interface ComponentOwner {
    // 获取存放的component
    Component getComponent();

    // 当包含的component被添加到容器时回调
    void instantiateComponent();
}

import ohos.agp.components.Component;
import ohos.agp.components.ComponentContainer;
import ohos.agp.components.DirectionalLayout;
import ohos.app.AbilityContext;
import ohos.hiviewdfx.HiLog;
import ohos.hiviewdfx.HiLogLabel;

public class DetailComponentOwner implements ComponentOwner {
    private static final String TAG = "DetailComponentOwner";

    private static final HiLogLabel LABEL = new HiLogLabel(HiLog.LOG_APP, 0, TAG);

    private AbilityContext myContext;

    private ComponentContainer root;

    public DetailComponentOwner(AbilityContext context) {
        init(context);
    }

    private void init(AbilityContext context) {
        root = new DirectionalLayout(context);
        ComponentContainer.LayoutConfig config = new ComponentContainer.LayoutConfig(
                ComponentContainer.LayoutConfig.MATCH_PARENT,
                ComponentContainer.LayoutConfig.MATCH_PARENT);
        root.setLayoutConfig(config);
        myContext = context;
    }

    @Override
    public Component getComponent() {
        return root;
    }

    @Override
    public void instantiateComponent() {
        return;
    }
}

 

还有 两个布局

<?xml version="1.0" encoding="utf-8"?>
<DirectionalLayout xmlns:ohos="http://schemas.huawei.com/res/ohos"
                   ohos:width="match_parent"
                   ohos:height="match_parent"
                   ohos:orientation="vertical"
                   ohos:background_element="#FF000000">
    <Text
        ohos:id="$+id:detail_nodata_date"
        ohos:width="match_content"
        ohos:height="23vp"
        ohos:top_margin="20vp"
        ohos:layout_alignment="horizontal_center"
        ohos:text_alignment="bottom"
        ohos:text_color="$color:sleep_text_lvse"
        ohos:text_weight="600"
        ohos:text_size="19vp"/>

    <Image
        ohos:id="$+id:detail_nodata_img"
        ohos:width="46vp"
        ohos:height="46vp"
        ohos:top_margin="25vp"
        ohos:layout_alignment="horizontal_center"
        ohos:scale_mode="zoom_center"/>

    <Text
        ohos:width="match_content"
        ohos:height="match_content"
        ohos:alpha="0.66"
        ohos:top_margin="12vp"
        ohos:layout_alignment="horizontal_center"
        ohos:text_alignment="center"
        ohos:text="$string:no_data"
        ohos:text_color="$color:sleep_text_lvse"
        ohos:text_size="16vp"/>
    <Text
        ohos:width="match_content"
        ohos:height="match_content"
        ohos:alpha="0.66"
        ohos:layout_alignment="horizontal_center"
        ohos:text_alignment="center"
        ohos:text="$string:wearing_watch_tips"
        ohos:text_color="$color:sleep_text_lvse"
        ohos:text_size="16vp"/>
</DirectionalLayout>

 

<?xml version="1.0" encoding="utf-8"?>
<DirectionalLayout xmlns:ohos="http://schemas.huawei.com/res/ohos"
                   ohos:width="match_parent"
                   ohos:height="match_parent"
                   ohos:background_element="#FF000000"
                   ohos:orientation="vertical">

    <Image
        ohos:id="$+id:sleep_moon_img"
        ohos:width="46vp"
        ohos:height="46vp"
        ohos:top_margin="11vp"
        ohos:layout_alignment="horizontal_center"/>

    <Text
        ohos:width="match_parent"
        ohos:height="19.5vp"
        ohos:alpha="0.66"
        ohos:layout_alignment="horizontal_center"
        ohos:text_alignment="center"
        ohos:text="$string:sleep"
        ohos:text_color="$color:sleep_text_lvse"
        ohos:text_size="16vp"/>

    <DirectionalLayout xmlns:ohos="http://schemas.huawei.com/res/ohos"
                       ohos:width="match_content"
                       ohos:height="65vp"
                       ohos:top_margin="8vp"
                       ohos:layout_alignment="horizontal_center"
                       ohos:orientation="horizontal">
        <Text
            ohos:id="$+id:sleep_hour_text"
            ohos:width="match_content"
            ohos:height="match_content"
            ohos:layout_alignment="center"
            ohos:text_alignment="center"
            ohos:text="$string:dash"
            ohos:text_color="$color:sleep_text_lvse"
            ohos:text_size="58vp"
            />
        <Text
            ohos:width="match_content"
            ohos:height="match_content"
            ohos:left_margin="2vp"
            ohos:alpha="0.66"
            ohos:layout_alignment="bottom"
            ohos:bottom_padding="9.5vp"
            ohos:text="$string:hour"
            ohos:text_color="$color:sleep_text_lvse"
            ohos:text_size="16vp"
            />
        <Text
            ohos:id="$+id:sleep_min_text"
            ohos:width="match_content"
            ohos:height="match_content"
            ohos:left_margin="2vp"
            ohos:layout_alignment="center"
            ohos:text_alignment="center"
            ohos:text="$string:double_dash"
            ohos:text_color="$color:sleep_text_lvse"
            ohos:text_size="58vp"
            />
        <Text
            ohos:width="match_content"
            ohos:height="match_content"
            ohos:left_margin="2vp"
            ohos:alpha="0.66"
            ohos:layout_alignment="bottom"
            ohos:bottom_padding="9.5vp"
            ohos:text="$string:minute"
            ohos:text_color="$color:sleep_text_lvse"
            ohos:text_size="16vp"
            />
    </DirectionalLayout>
    <DirectionalLayout xmlns:ohos="http://schemas.huawei.com/res/ohos"
                       ohos:width="match_content"
                       ohos:height="25vp"
                       ohos:top_margin="20.5vp"
                       ohos:layout_alignment="horizontal_center"
                       ohos:orientation="horizontal">
        <Text
            ohos:width="match_content"
            ohos:height="19.5vp"
            ohos:text="$string:goal"
            ohos:alpha="0.66"
            ohos:text_alignment="bottom"
            ohos:bottom_margin="1vp"
            ohos:text_color="$color:sleep_text_lvse"
            ohos:text_size="16vp"
            />
        <Text
            ohos:id="$+id:sleep_goal_text"
            ohos:width="match_content"
            ohos:height="match_parent"
            ohos:left_margin="2vp"
            ohos:text="$string:target_sleep_time"
            ohos:text_weight="600"
            ohos:text_color="$color:sleep_text_lvse"
            ohos:bottom_padding="2vp"
            ohos:text_size="21vp"
            />
        <Text
            ohos:width="match_content"
            ohos:height="19.5vp"
            ohos:left_margin="2vp"
            ohos:alpha="0.66"
            ohos:text="$string:hour"
            ohos:text_color="$color:sleep_text_lvse"
            ohos:text_size="16vp"
            />
    </DirectionalLayout>
</DirectionalLayout>

 

枚举

{
	"string":[
		{
			"name":"app_name",
			"value":"MyWearable"
		},
		{
			"name":"mainability_description",
			"value":"Java_Wearable_Empty Feature Ability"
		},
		{
			"name":"HelloWorld",
			"value":"Hello World"
		},
		{
			"name":"sleep",
			"value":"sleep liunn"
		},
		{
			"name":"dash",
			"value":"dash liunn"
		},
		{
			"name":"hour",
			"value":"hour liunn"
		},
		{
			"name":"double_dash",
			"value":"double_dash liunn"
		},
		{
			"name":"minute",
			"value":"minute liunn"
		},
		{
			"name":"goal",
			"value":"goal liunn"
		},
		{
			"name":"target_sleep_time",
			"value":"target_sleep_time liunn"
		},
		{
			"name":"no_data",
			"value":"no_data liunn"
		},
		{
			"name":"wearing_watch_tips",
			"value":"wearing_watch_tips liunn"
		}
	]
}

{
  "color":[
    {
      "name":"sleep_text_lvse",
      "value":"#FF00FFD9"
    },
    {
      "name":"mainability_description",
      "value":"Java_Wearable_Empty Feature Ability"
    },
    {
      "name":"HelloWorld",
      "value":"Hello World"
    },
    {
      "name":"sleep",
      "value":"sleep liunn"
    }
  ]
}

整个 目录结构是这个样子的，

注册一个 

"abilities": [

      {
        "name": "com.huawei.mywearable.slice.liuTest.PageAbility",
        "icon": "$media:icon",
        "description": "$string:mainability_description",
        "label": "$string:app_name",
        "launchType": "standard",
        "orientation": "portrait",
        "visible": true,
        "permissions": [],
        "skills": [
          {
            "actions": [
              "action.system.home"
            ],
            "entities": [
              "entity.system.home"
            ]
          }
        ],
        "type": "page",
        "formEnabled": false
      }
    ]

模拟器运行一下。 

 

好了，没有报错。