社区编辑申请
注册/登录
鸿蒙FA开发之JSUI与JavaUI相互跳转实例
系统 OpenHarmony
鸿蒙官方推荐使用Js或eTS方式来开发APP应用UI,但在开发过程中有可能会遇到JSUI无法实现的功能。

​想了解更多关于开源的内容,请访问:​

​51CTO 开源基础软件社区​

​https://ost.51cto.com​

需求背景说明

鸿蒙官方推荐使用Js或eTS方式来开发APP应用UI,但在开发过程中有可能会遇到JSUI无法实现的功能,例如地图导航、定制化视频播放器,那么这种场景下如何实现功能,这个需求就带来如下问题:

1.一个页面是否能同时使用JavaUI和JSUI,JSUI来实现简单功能,JavaUI来实现定制化功能。

2.一个工程是否支持不同的UI语法,比如PageA使用JSUI,PageB使用JavaUI。

带着问题我们来回顾一下鸿蒙开发支持的UI开发方式。

1、Java UI

使用xml方式描述UI界面布局,应用中所有的用户界面元素都是由Component和ComponentContainer对象构成。Component是绘制在屏幕上的一个对象,用户能与之交互。ComponentContainer是一个用于容纳其他Component和ComponentContainer对象的容器。Java UI框架提供了一部分Component和ComponentContainer的具体子类,即创建用户界面(UI)的各类组件,包括一些常用的组件(比如:文本、按钮、图片、列表等)和常用的布局(比如:DirectionalLayout和DependentLayout)。用户可通过组件进行交互操作,并获得响应。

#夏日挑战赛#鸿蒙FA开发之JSUI与JavaUI相互跳转实例-开源基础软件社区

2、JS UI

基于JS扩展的类Web开发范式的方舟开发框架是一种跨设备的高性能UI开发框架,支持声明式编程和跨设备多态UI。 采用类HTML和CSS Web编程语言作为页面布局和页面样式的开发语言,页面业务逻辑则支持ECMAScript规范的JavaScript语言。方舟开发框架提供的类Web编程范式,可以让开发者避免编写UI状态切换的代码,视图配置信息更加直观。

#夏日挑战赛#鸿蒙FA开发之JSUI与JavaUI相互跳转实例-开源基础软件社区

3、eTS UI

使用基于TS扩展的声明式开发范式的方舟开发框架,采用更接近自然语义的编程方式,让开发者可以直观地描述UI界面,不必关心框架如何实现UI绘制和渲染,实现极简高效开发。从组件、动效和状态管理三个维度来提供UI能力,还提供了系统能力接口,实现系统能力的极简调用。

#夏日挑战赛#鸿蒙FA开发之JSUI与JavaUI相互跳转实例-开源基础软件社区

根据Ability的分类来考虑,JsUI继承自AceAbility,而JavaUI使用xml方式进行渲染,它继承自Ability,所以在同一界面上使用两个语言在页面渲染器就已经决定了,JavaUI和JSUI不能在同一Page中使用。

那么问题2是否可行呢,答案是可以的。因为PageA和PageB可以用2个不同的Ability来渲染实现。

需要实现PageA是应用主页面,使用JSUI实现,PageA上有个按钮跳转到PageB,PageB展示地图导航页面,PageB使用JavaUI实现

如图:

#夏日挑战赛#鸿蒙FA开发之JSUI与JavaUI相互跳转实例-开源基础软件社区

JSUI自带有router功能,可以通过router.push进行跳转,但这仅限于JSUI的不通页面,对于上述场景行不通。

那么只能使用ability的startAbility能力来实现不同ability之前的跳转。

使用AceInternalAbility来接收页面的跳转请求,然后通过ability的startAbility方法跳转到另一个ability,流程图如下:

#夏日挑战赛#鸿蒙FA开发之JSUI与JavaUI相互跳转实例-开源基础软件社区

代码实现

MainAbility.java:

@Override
public void onStart(Intent intent) {
……
// 注册AceInternalAbility,接收首页按钮请求
TransInternalAbility.getInstance().register(this);
super.onStart(intent);
}
}

TransInternalAbility.java:

private static final String BUNDLE_NAME = "cn.pmagroup.ble.pmap30";
private static final String MAP_ABILITY_NAME = "cn.pmagroup.ble.pmap30.ability.MapAbility";
private static final String ABILITY_NAME = "cn.pmagroup.ble.pmap30.ability.TransInternalAbility";
private static final int SUCCESS = 0;
private static final int ERROR = 1;
private static final int PULL_MAP_PAGE = 1001;
// 定义日志标签
private static final HiLogLabel LABEL = new HiLogLabel(HiLog.LOG_APP, 0, "MY_TAG");
private static TransInternalAbility instance;
private Ability ability;
private TransInternalAbility() {
super(BUNDLE_NAME, ABILITY_NAME);
}
public static TransInternalAbility getInstance() {
if (instance == null) {
synchronized (TransInternalAbility.class) {
if (instance == null) {
instance = new TransInternalAbility();
}
}
}
return instance;
}
public static void register(Ability ability) {
HiLog.info(LABEL, "DataHandlerAbility: register");
if (ability == null) {
HiLog.info(LABEL, "register abilityContext is null");
} else {
HiLog.info(LABEL, "register " + ability.getBundleName());
if (instance == null) {
instance = new TransInternalAbility();
}
instance.onRegister(ability);
}
}
/**
* init Internal ability
*/
public void onRegister(Ability ability) {
this.ability = ability;
this.setInternalAbilityHandler(this::onRemoteRequest);
}
private boolean onRemoteRequest(int code, MessageParcel data, MessageParcel reply, MessageOption option) {
HiLog.info(LABEL, "DataHandlerAbility: onRemoteRequest");
String dataString = data.readString();
switch (code) {
case PULL_MAP_PAGE: {
reply.writeString("{ code: 0 }");
// 拉起地图导航JavaUI ability
this.pullMapPage();
break;
}
default: {
reply.writeString("service not defined");
return false;
}
}
return true;
}
// 拉起地图导航JavaUI ability
private void pullMapPage() {
Intent intent = new Intent();
Operation operation = new Intent.OperationBuilder().withBundleName(BUNDLE_NAME)
.withAbilityName(MAP_ABILITY_NAME).build();
intent.setOperation(operation);
this.ability.startAbilityForResult(intent, PULL_MAP_PAGE);
}
}

MapAbility.java:

private static final HiLogLabel LABEL = new HiLogLabel(HiLog.LOG_APP, 0, "MAP_ABILITY");
@Override
public void onStart(Intent intent) {
super.onStart(intent);
super.setMainRoute(MapAbilitySlice.class.getName());
}
}

MapAbilitySlice.java:

private static final int TOAST_DURATION = 3500;
private static final String BUNDLE_NAME = "cn.pmagroup.ble.pmap30";
private static final String CONTROL_ABILITY = "cn.pmagroup.ble.pmap30.ability.MainAbility";
private static final int VP2PX_VALUE = 64;
private static final HiLogLabel LABEL = new HiLogLabel(HiLog.LOG_APP, 0, "MAP_ABILITY_SLICE");
@Override
public void onStart(Intent intent) {
super.onStart(intent);
super.setUIContent(ResourceTable.Layout_map_ability);
this.initComponents();
}
private void initComponents() {
Button btnGoBack = (Button) findComponentById(ResourceTable.Id_btn_goBack);
ShapeElement background = new ShapeElement();
background.setRgbColor(new RgbColor(0, 125, 255));
background.setCornerRadius(25);
btnGoBack.setBackground(background);
// 在组件中增加对点击事件的检测
btnGoBack.setClickedListener(component -> {
// 此处添加按钮被点击需要执行的操作
LogUtil.debug("JavaUI", "btnGoBack click");
this.showToast(this, "返回控制页面");
this.goBack2ControlPage();
});
}
private void goBack2ControlPage() {
Intent intent = new Intent();
Operation operation = new Intent.OperationBuilder().withBundleName(BUNDLE_NAME)
.withAbilityName(CONTROL_ABILITY).build();
intent.setOperation(operation);
startAbility(intent);
}
@Override
public void onActive() {
super.onActive();
}
@Override
public void onForeground(Intent intent) {
super.onForeground(intent);
}
}

map_ability.xml(Layout文件):

<DirectionalLayout
xmlns:ohos="http://schemas.huawei.com/res/ohos"
ohos:height="match_parent"
ohos:width="match_parent"
ohos:alignment="center"
ohos:orientation="vertical">
<Text
ohos:id="$+id:text_helloworld"
ohos:height="match_content"
ohos:width="match_content"
ohos:background_element="$graphic:background_ability_test"
ohos:layout_alignment="horizontal_center"
ohos:text="$string:testability_HelloWorld"
ohos:text_size="40vp"
/>
<Button
ohos:id="$+id:btn_goBack"
ohos:height="40vp"
ohos:width="match_parent"
ohos:text="返回"
ohos:text_size="20vp"
ohos:focus_border_enable="true"
/>
</DirectionalLayout>

​想了解更多关于开源的内容,请访问:​

​51CTO 开源基础软件社区​

​https://ost.51cto.com​​。

责任编辑:jianghua 来源: 鸿蒙社区
相关推荐

2021-03-02 09:29:29

2021-03-25 15:54:14

鸿蒙HarmonyOS应用开发

2021-01-28 10:12:02

2021-11-24 16:02:57

2021-01-20 13:50:36

鸿蒙HarmonyOS应用开发

2021-01-28 14:34:35

2021-03-02 14:34:48

鸿蒙HarmonyOS应用开发

2021-04-23 16:08:08

鸿蒙HarmonyOS应用

2021-01-27 13:26:21

鸿蒙HarmonyOS应用开发

2021-01-05 10:35:04

鸿蒙HarmonyOS应用开发

2020-11-30 14:09:17

HarmonyOS

2021-02-22 14:56:55

鸿蒙HarmonyOS应用开发

2020-11-11 11:56:05

HarmonyOS

2020-09-28 18:38:05

鸿蒙

同话题下的热门内容

OpenHarmony 给你的输入法加点彩—星球崛起基于OpenHarmony Native Api框架实现控制LED灯亮灭OpenHarmony- 基于ArkUI (JS)实现数字排序小游戏DevEco Device Tool:HDF框架一键生成!HarmonyOS3.0尝鲜之关键Js Api--ServiceAbility开发HarmonyOS - 基于ArkUI (JS) 实现图片旋转验证App与Hap、Entry与Feature,BundleName与Packge,务必弄明白HarmonyOS 实现一个滑块验证

编辑推荐

HarmonyOS 2.0鸿蒙第二期开发者Beta公测申请指南HarmonyOS LYEVK-3861开发板播放《蜜雪冰城》鸿蒙HarmonyOS分布式软总线:构建低时延、高带宽的多设备虚拟网络华为HarmonyOS的强势突围: 直面物联网迷宫的蓄力进击鸿蒙HarmonyOS2.0发布会现场回忆录
我收藏的内容
点赞
收藏

51CTO技术栈公众号