正文 

当前位置： 首页 > java > java教程

#夏日挑战赛#鸿蒙fa开发之jsui与javaui相互跳转实例(代码片段)

开源基础软件社区官方 开源基础软件社区官方     2022-11-28     337

关键词：

本文正在参加星光计划3.0–夏日挑战赛

需求背景说明

鸿蒙官方推荐使用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）。用户可通过组件进行交互操作，并获得响应。

2. JS UI

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

3. eTS UI

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

根据Ability的分类来考虑，JsUI继承自AceAbility，而JavaUI使用xml方式进行渲染，它继承自Ability，所以在同一界面上使用两个语言在页面渲染器就已经决定了，JavaUI和JSUI不能在同一Page中使用。
那么问题2是否可行呢，答案是可以的。因为PageA和PageB可以用2个不同的Ability来渲染实现。
需要实现PageA是应用主页面，使用JSUI实现，PageA上有个按钮跳转到PageB，PageB展示地图导航页面，PageB使用JavaUI实现
如图：

JSUI自带有router功能，可以通过router.push进行跳转，但这仅限于JSUI的不通页面，对于上述场景行不通
那么只能使用ability的startAbility能力来实现不同ability之前的跳转
使用AceInternalAbility来接收页面的跳转请求，然后通过ability的startAbility方法跳转到另一个ability，流程图如下：

代码实现

MainAbility.java
```public class MainAbility extends AceAbility
    @Override
    public void onStart(Intent intent)
               ……
               // 注册AceInternalAbility，接收首页按钮请求
        TransInternalAbility.getInstance().register(this);
        super.onStart(intent);
    

TransInternalAbility.java
```public class TransInternalAbility extends AceInternalAbility 
    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
```public class MapAbility extends Ability
    private static final HiLogLabel LABEL = new HiLogLabel(HiLog.LOG_APP, 0, "MAP_ABILITY");br/>    @Override
    public void onStart(Intent intent)
        super.onStart(intent);
        super.setMainRoute(MapAbilitySlice.class.getName());
    

MapAbilitySlice.java
```public class MapAbilitySlice extends AbilitySlice 
    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文件）
```<?xml version="1.0" encoding="utf-8"?>
<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>


## 更多原创内容请关注[软通动力OpenHarmony学院](https://ost.51cto.com/column/30)

[想了解更多关于开源的内容，请访问：](https://ost.51cto.com/#bkwz)

[51CTO 开源基础软件社区](https://ost.51cto.com#bkwz)

https://ost.51cto.com/#bkwz

木棉花#夏日挑战赛#鸿蒙小游戏项目——数独sudoku

​​「本文正在参加星光计划3.0--夏日挑战赛」​​前言  在上期内容的分享中，笔者介绍了如何搭建基础的页面框架（为之后的开发做准备），以及应用图像和标签的修改、应用的全屏化。而在本期，笔者就在上期的基... 查看详情

鸿蒙应用开发培训笔记04：ui页面设计与开发(代码片段)

文章目录零、本讲学习目标一、JavaUI开发（一）JavaUI概述1、用户界面是如何构建的？2、组件树（1）Component-组件（2）ComponentContainer-布局容器（3）LayoutConfig-布局配置3、使用XML创建布局4、使用Ja... 查看详情

两个案例五分钟轻松入门harmony（鸿蒙）开发(代码片段)

一、任务说明构建一个简单的具有页面跳转功能的应用，以此来熟悉HarmonyOS应用开发流程！HarmonyOS提供了两种FA（FeatureAbility）的UI开发框架：JavaUI框架和JSUI框架。本文会通过Java和JS两种方式的Demo来入门HarmonyOS... 查看详情

八华为鸿蒙harmonyos应用开发之javaui框架常用textfield组件使用(代码片段)

一、TextField组件二、TextField组件实例测试1.新建基于emptyability(Java)手机应用程序的TextField工程。运行出现如下结果2.在resources->zh.element文件夹下string.json文件修改代码如下："string":["name":"entry_MainAbility" 查看详情

七华为鸿蒙harmonyos应用开发之javaui框架常用text组件和button组件使用

一、JavaUI框架概述应用的Ability在屏幕上将显示一个用户界面，该界面用来显示所有可被用户查看和交互的内容。应用中所有的用户界面元素都是由Component和ComponentContainer对象构成。Component是绘制在屏幕上的一个对象，用户能与... 查看详情

九华为鸿蒙harmonyos应用开发之javaui框架常用image组件使用

一、Image二、Image组件实例测试1.新建基于emptyability(Java)手机应用程序的ImageTest工程。运行出现如下结果2.在Project窗口，打开“entry>src>main>resources>base>media”，添加4个图片至media文件夹下，以“pic1.jpg”、“pic2.jpg”、“... 查看详情

木棉花#夏日挑战赛#鸿蒙小游戏项目——数独sudoku

 ​​「本文正在参加星光计划3.0--夏日挑战赛」​​前言 在上期的分享中，笔者详细介绍了如何利用代码布局创建网格区域的UI。而在这期的分享中，笔者将围绕网格区域增加相应的游戏功能。 上期的内容回顾——&g... 查看详情

#夏日挑战赛#harmonyos-实现带日期效果的待办事项(代码片段)

作者：俞才彬本文正在参加星光计划3.0–夏日挑战赛前言初学鸿蒙JS开发技术不久，想要快速结合官方文档上手鸿蒙JS组件开发，本文主要结合HarmonyOS官网上的相关组件及API实现一个根据日期持久化存储待办事项。效果演示实现... 查看详情

#夏日挑战赛#ffh从零开始的鸿蒙机器学习之旅-nlp情感分析(代码片段)

[本文正在参加星光计划3.0-夏日挑战赛]1.2导入StandfordCoreNLP库1.2.1我们可以在官网下载工具包StandfordCoreNLP1.2.2解压，并引入lib中右键文件夹，点击addaslibrary2.情感分析2.1新建JAVA类，NLP_EMOTIONpackagecom.example.nlpdemo.utils;importedu.stanford.nlp... 查看详情

#夏日挑战赛#harmonyos-自定义组件之slider滑块(代码片段)

作者：范乐乐本文正在参加星光计划3.0–夏日挑战赛前言最近在学习HarmonyOS开发相关知识，在项目开发过程中有用到slider滑块组件，本文主要结合HarmonyOS官网上的相关组件以及通用API，实现一个slider滑块组件。效果演示实现原理... 查看详情

#夏日挑战赛#ffhai作诗之httprequest实战(代码片段)

本文正在参加星光计划3.0–夏日挑战赛@TOC前言​最近在一个网课上看到了一个AI作诗的接口，因为之前的fetch接口已经不再维护了，所以我就借这个机会想试试鸿蒙的http接口。接下来会重新复习一下http请求的一些基本知识，并... 查看详情

#夏日挑战赛#ffh实时聊天室之websocket实战(代码片段)

本文正在参加星光计划3.0–夏日挑战赛@TOC前言如果要实现像微信聊天一样的功能，在组网内进行通信显然是不够的，所以软总线并不作用与这种远距离传输。如果我们要完成微信的聊天功能，传统的方法就是利用webSocket借助服... 查看详情

#夏日挑战赛#ohos构建自定义服务实战(代码片段)

本文正在参加星光计划3.0–夏日挑战赛作者：曹昌言​在面向全场景、全连接、全智能时代背景下，OpenHarmony必然会受到越来越多开发者的支持，在不同场景下，会根据实际需求裁剪某些非必要的子系统或组件，也会增加新的子... 查看详情

#夏日挑战赛#ffhharmonyos手机遥控dayu开发板相机(代码片段)

[本文正在参加星光计划3.0-夏日挑战赛]参数类型描述qualitystring图片质量：high，normal，lowsuccessFunction接口调用成功的回调函数failFunction接口调用失败的回调函数completeFunction接口调用结束的回调函数2.案例编写关于手机侧，开发板... 查看详情

#夏日挑战赛#harmonyos-基于arkui（js）实现打地鼠游戏(代码片段)

作者:尹宝荣本文正在参加星光计划3.0–夏日挑战赛前言初学HarmonyOSArkUI(JS)，对于FA的开发还是不太熟悉，单纯看文档，不使用起来的话，始终掌握不了，代码还是要多敲多思考才能进步。所以周末突发奇想利用HarmonyOS写了一个简... 查看详情

华为鸿蒙系统harmonyos真的让谷歌慌了吗？

参考技术A在讨论HarmonyOS是否真的让谷歌慌了之前，我们先来对比一下两个操作系统，从架构出发对比一下两个操作系统的设计理念和目标是否是一样的。HarmonyOS整体遵从分层设计，从下向上依次为：内核层、系统服务层、框架... 查看详情

鸿蒙ide使用

...种资料，看产业前景。现在可以下定决心：启动鸿蒙专题学习 ios架构师学习路上，更加的艰苦了，这就是这个行业。来链接：​​​​​HarmonyOS应用开发-服务开发-开发-UI-JavaUI框架-JavaUI框架概述​​​​​... 查看详情

#夏日挑战赛#openharmony-arkui（ts）开发翻页时钟(代码片段)

作者：梁青松本文正在参加星光计划3.0–夏日挑战赛项目介绍本项目基于OpenHarmony的ArkUI框架：TS扩展的声明式开发范式，关于语法和概念直接看官网官方文档地址：基于TS扩展的声明式开发范式工具版本：DevEcoStudio3.0Beta4SDK版本... 查看详情