CN110908656B - 一种Android用户界面生成方法及系统 - Google Patents

一种Android用户界面生成方法及系统 Download PDF

Info

Publication number
CN110908656B
CN110908656B CN201911088324.4A CN201911088324A CN110908656B CN 110908656 B CN110908656 B CN 110908656B CN 201911088324 A CN201911088324 A CN 201911088324A CN 110908656 B CN110908656 B CN 110908656B
Authority
CN
China
Prior art keywords
android
interface
file
compiling
data structure
Prior art date
Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
Active
Application number
CN201911088324.4A
Other languages
English (en)
Other versions
CN110908656A (zh
Inventor
邱熠龙
Current Assignee (The listed assignees may be inaccurate. Google has not performed a legal analysis and makes no representation or warranty as to the accuracy of the list.)
Fujian Huisibo Digital Technology Co ltd
Original Assignee
Fuzhou Huisibo Information Technology Co ltd
Priority date (The priority date is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the date listed.)
Filing date
Publication date
Application filed by Fuzhou Huisibo Information Technology Co ltd filed Critical Fuzhou Huisibo Information Technology Co ltd
Priority to CN201911088324.4A priority Critical patent/CN110908656B/zh
Publication of CN110908656A publication Critical patent/CN110908656A/zh
Application granted granted Critical
Publication of CN110908656B publication Critical patent/CN110908656B/zh
Active legal-status Critical Current
Anticipated expiration legal-status Critical

Links

Images

Classifications

    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F8/00—Arrangements for software engineering
    • G06F8/30—Creation or generation of source code
    • G06F8/38—Creation or generation of source code for implementing user interfaces
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F8/00—Arrangements for software engineering
    • G06F8/40—Transformation of program code
    • G06F8/41—Compilation
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F8/00—Arrangements for software engineering
    • G06F8/40—Transformation of program code
    • G06F8/41—Compilation
    • G06F8/42—Syntactic analysis
    • G06F8/427—Parsing

Landscapes

  • Engineering & Computer Science (AREA)
  • General Engineering & Computer Science (AREA)
  • Theoretical Computer Science (AREA)
  • Software Systems (AREA)
  • Physics & Mathematics (AREA)
  • General Physics & Mathematics (AREA)
  • Human Computer Interaction (AREA)
  • Stored Programmes (AREA)

Abstract

本发明公开了一种Android用户界面生成方法，在Android应用内置用于解析js文件的so内核；将Web编写的UI界面文件编译为js文件；将js文件发送至Android应用，so内核读取js文件，并进行解析，生成界面描述数据结构；Android界面渲染引擎根据界面描述数据结构生成Android原生界面；本发明还提供一种Android用户界面生成系统，便于用户采用Web前端开发技术生成以及维护Android原生界面。

Description

一种Android用户界面生成方法及系统
技术领域
本发明涉及一种Android用户界面生成方法及系统。
背景技术
传统的安卓界面开发使用的是Android原生的开发技术，通常为两种方式：
1)在Xml文件中使用Android UI组件定义界面，通过编译生成Android的应用界面；
2)使用Java代码调用Android UI布局和组件，构造Android应用界面。
当前，Web应用技术有很大发展，很多掌握Web前端技术的开发者希望能够使用Web前端开发技术快速构建Web应用，这样，同一套Web代码可以同时兼容Web端和Android端，而不是维护两套UI代码。
为了解决以上问题，PhoneGap、Cordova等混合编程技术应运而生，但是，Cordova等混合编程技术是通过调用Android设备的Webview来呈现应用程序界面的，通过这种方式与Android原生界面相比，有以下缺点：
缺点1：
Webview界面的UI响应速度没有Android原生界面的响应速度快，在长列表刷新或动画效果呈现时经常会有卡顿、掉帧的情况出现；
缺点2：
Webview UI较依赖于Android Webkit版本的性能，表现力、画面清晰度方面不如Android原生界面；很多Android原生UI效果Android Webview无法呈现。
发明内容
本发明要解决的技术问题，在于提供一种Android用户界面生成方法及系统，便于用户采用Web前端开发技术生成以及维护Android原生界面。
本发明之一是这样实现的：一种Android用户界面生成方法，包括：
步骤1、在Android应用内置用于解析js文件的so内核；
步骤2、将Web编写的UI界面文件编译为js文件；
步骤3、将js文件发送至Android应用，so内核读取js文件，并进行解析，生成界面描述数据结构；
步骤4、Android界面渲染引擎根据界面描述数据结构生成Android原生界面。
进一步地，所述步骤2进一步具体为：通过一编译工具将Web编写的UI界面文件进行编译，若编译无误，则生成js文件；若编译有误，则显示错误信息并结束。
进一步地，所述步骤3进一步具体为：将js文件发送至Android应用，so内核读取js文件，并进行解析，若解析无误，则生成界面描述数据结构；若解析有误，则显示错误信息并结束。
进一步地，所述步骤4进一步具体为：Android界面渲染引擎根据界面描述数据结构进行渲染，若无误，则生成Android原生界面；若有误，则显示错误信息并结束。
本发明之二是这样实现的：一种Android用户界面生成系统，包括：
内置模块，在Android应用内置用于解析js文件的so内核；
编译模块，将Web编写的UI界面文件编译为js文件；
解析模块，将js文件发送至Android应用，so内核读取js文件，并进行解析，生成界面描述数据结构；
生成模块，Android界面渲染引擎根据界面描述数据结构生成Android原生界面。
进一步地，所述编译模块进一步具体为：通过一编译工具将Web编写的UI界面文件进行编译，若编译无误，则生成js文件；若编译有误，则显示错误信息并结束。
进一步地，所述解析模块进一步具体为：将js文件发送至Android应用，so内核读取js文件，并进行解析，若解析无误，则生成界面描述数据结构；若解析有误，则显示错误信息并结束。
进一步地，所述生成模块进一步具体为：Android界面渲染引擎根据界面描述数据结构进行渲染，若无误，则生成Android原生界面；若有误，则显示错误信息并结束。
本发明具有如下优点：本发明一种Android用户界面生成方法及系统，是的同一套Web代码可以同时兼容Web端和Android端，而不用维护两套UI代码。
附图说明
下面参照附图结合实施例对本发明作进一步的说明。
图1为本发明一种Android用户界面生成方法执行流程图。
图2为本发明具体实施方式中编译流程图。
图3为本发明具体实施方式中解析流程图。
图4为本发明具体实施方式中渲染流程图。
具体实施方式
如图1所示，本发明Android用户界面生成方法，包括：
步骤1、在Android应用内置用于解析js文件的so内核；
步骤2、通过一编译工具将Web编写的UI界面文件进行编译，若编译无误，则生成js文件；若编译有误，则显示错误信息并结束；
步骤3、将js文件发送至Android应用，so内核读取js文件，并进行解析，若解析无误，则生成界面描述数据结构；若解析有误，则显示错误信息并结束；
步骤4、Android界面渲染引擎根据界面描述数据结构进行渲染，若无误，则生成Android原生界面；若有误，则显示错误信息并结束。
本发明Android用户界面生成系统，包括：
内置模块，在Android应用内置用于解析js文件的so内核；
编译模块，通过一编译工具将Web编写的UI界面文件进行编译，若编译无误，则生成js文件；若编译有误，则显示错误信息并结束；
解析模块，将js文件发送至Android应用，so内核读取js文件，并进行解析，若解析无误，则生成界面描述数据结构；若解析有误，则显示错误信息并结束；
生成模块，Android界面渲染引擎根据界面描述数据结构进行渲染，若无误，则生成Android原生界面；若有误，则显示错误信息并结束。
本发明一种具体实施方式：
本发明通过在Android Apk应用内置javascript运行解析.so内核(比如chrome的V8内核)，解析通过Web编写的UI界面，生成Android渲染使用的组件数据结构，发送给Android UI界面渲染引擎，生成Android原生应用界面。
在本发明中，通过Web前端技术编写生成Android用户界面主要包括以下4个流程：
界面编写：
通过Web前端技术，Html、CSS、Javascript等编写Android应用程序界面；
如图2所示，编译流程：
输入：UI文件(HTML+CSS+JS)
输出：生成.js界面描述文件
如图3所示，解析流程：
输入：编译后的.js界面文件
输出：Android原生界面描述数据结构
如图4所示，渲染流程：
输入：Android原生界面描述数据结构
生成：Android原生界面
Android UI渲染引擎读入原生界面描述数据结构，渲染生成Android原生界面。
1)通过编译工具将Web技术开发的Html、CSS、Javascript文件统一编译成.js文件；编译工具可以是Webpack或Gulp等可定制化的前端构建工具。
2)在Android应用内置js解析的so内核；
3)解析内核通过读入编译后的用户界面.js文件，生成界面描述数据结构(比如Json)给Android界面渲染引擎
4)Android界面渲染引擎根据“界面描述数据结构”生成Android原生界面
5)本发明中，设置Android原生界面描述数据结构，并把该数据结构与JS界面描述文件作对应映射是关键。JS界面描述文件与Android原生界面数据结构映射依据以下原理：
a.将Web的Html页面每个UI元素在编译阶段构造成一个自顶向下，由粗到细的UI元素树，每个UI元素即为UI树的节点，节点信息还包括了UI绑定的响应事件，UI树存在JS的界面描述文件中；
b.so内核读取界面描述文件的树节点信息，生成一个Android界面渲染指令队列；
c.Android应用从界面渲染指令队列中取出渲染指令，以addview的方式，循环将队列中的指令add到Android的界面布上，从而绘制成Android界面。在绘制Android界面的过程中，完成事件和Android UI的绑定，从面实现Web所开发的页面与Android界面的映射。
虽然以上描述了本发明的具体实施方式，但是熟悉本技术领域的技术人员应当理解，我们所描述的具体的实施例只是说明性的，而不是用于对本发明的范围的限定，熟悉本领域的技术人员在依照本发明的精神所作的等效的修饰以及变化，都应当涵盖在本发明的权利要求所保护的范围内。

Claims (8)

1.一种Android用户界面生成方法，其特征在于：包括：
步骤1、在Android应用内置用于解析js文件的so内核；
步骤2、将Web编写的UI界面文件编译为js文件；
步骤3、将js文件发送至Android应用，so内核读取js文件，并进行解析，生成界面描述数据结构；
步骤4、Android界面渲染引擎根据界面描述数据结构生成Android原生界面；
其中，
a. 将Web的Html页面每个UI元素在编译阶段构造成一个自顶向下，由粗到细的UI元素树，每个UI元素即为UI树的节点，节点信息还包括了UI绑定的响应事件，UI树存在JS的界面描述文件中；
b. so内核读取界面描述文件的树节点信息，生成一个Android界面渲染指令队列；
c. Android应用从界面渲染指令队列中取出渲染指令，以addview的方式，循环将队列中的指令add到Android的界面布上，从而绘制成 Android界面。
2.根据权利要求1所述的一种Android用户界面生成方法，其特征在于：所述步骤2进一步具体为：通过一编译工具将Web编写的UI界面文件进行编译，若编译无误，则生成js文件；若编译有误，则显示错误信息并结束。
3.根据权利要求1所述的一种Android用户界面生成方法，其特征在于：所述步骤3进一步具体为：将js文件发送至Android应用，so内核读取js文件，并进行解析，若解析无误，则生成界面描述数据结构；若解析有误，则显示错误信息并结束。
4.根据权利要求1所述的一种Android用户界面生成方法，其特征在于：所述步骤4进一步具体为：Android界面渲染引擎根据界面描述数据结构进行渲染，若无误，则生成Android原生界面；若有误，则显示错误信息并结束。
5.一种Android用户界面生成系统，其特征在于：包括：
内置模块，在Android应用内置用于解析js文件的so内核；
编译模块，将Web编写的UI界面文件编译为js文件；
解析模块，将js文件发送至Android应用，so内核读取js文件，并进行解析，生成界面描述数据结构；
生成模块，Android界面渲染引擎根据界面描述数据结构生成Android原生界面；
其中，
a. 将Web的Html页面每个UI元素在编译阶段构造成一个自顶向下，由粗到细的UI元素树，每个UI元素即为UI树的节点，节点信息还包括了UI绑定的响应事件，UI树存在JS的界面描述文件中；
b. so内核读取界面描述文件的树节点信息，生成一个Android界面渲染指令队列；
c. Android应用从界面渲染指令队列中取出渲染指令，以addview的方式，循环将队列中的指令add到Android的界面布上，从而绘制成 Android界面。
6.根据权利要求5所述的一种Android用户界面生成系统，其特征在于：所述编译模块进一步具体为：通过一编译工具将Web编写的UI界面文件进行编译，若编译无误，则生成js文件；若编译有误，则显示错误信息并结束。
7.根据权利要求5所述的一种Android用户界面生成系统，其特征在于：所述解析模块进一步具体为：将js文件发送至Android应用，so内核读取js文件，并进行解析，若解析无误，则生成界面描述数据结构；若解析有误，则显示错误信息并结束。
8.根据权利要求5所述的一种Android用户界面生成系统，其特征在于：所述生成模块进一步具体为：Android界面渲染引擎根据界面描述数据结构进行渲染，若无误，则生成Android原生界面；若有误，则显示错误信息并结束。
CN201911088324.4A 2019-11-08 2019-11-08 一种Android用户界面生成方法及系统 Active CN110908656B (zh)

Priority Applications (1)

Application Number Priority Date Filing Date Title
CN201911088324.4A CN110908656B (zh) 2019-11-08 2019-11-08 一种Android用户界面生成方法及系统

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
CN201911088324.4A CN110908656B (zh) 2019-11-08 2019-11-08 一种Android用户界面生成方法及系统

Publications (2)

Publication Number Publication Date
CN110908656A CN110908656A (zh) 2020-03-24
CN110908656B true CN110908656B (zh) 2022-08-23

Family

ID=69817087

Family Applications (1)

Application Number Title Priority Date Filing Date
CN201911088324.4A Active CN110908656B (zh) 2019-11-08 2019-11-08 一种Android用户界面生成方法及系统

Country Status (1)

Country Link
CN (1) CN110908656B (zh)

Families Citing this family (1)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN112799665B (zh) * 2021-01-27 2022-12-13 视若飞信息科技(上海)有限公司 一种以WebUI的方式构建App功能界面的方法

Citations (3)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN103179166A (zh) * 2011-12-23 2013-06-26 腾讯科技（深圳）有限公司 在客户端中提供服务的方法和客户端
CN107229480A (zh) * 2017-06-19 2017-10-03 郑州云海信息技术有限公司 一种基于web技术的桌面应用构建方法及装置
CN107341027A (zh) * 2017-05-18 2017-11-10 北京金山安全管理系统技术有限公司 用户界面的生成方法和生成装置

Family Cites Families (1)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
US20130346840A1 (en) * 2012-06-26 2013-12-26 Digital Turbine, Inc. Method and system for presenting and accessing content

Patent Citations (3)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN103179166A (zh) * 2011-12-23 2013-06-26 腾讯科技（深圳）有限公司 在客户端中提供服务的方法和客户端
CN107341027A (zh) * 2017-05-18 2017-11-10 北京金山安全管理系统技术有限公司 用户界面的生成方法和生成装置
CN107229480A (zh) * 2017-06-19 2017-10-03 郑州云海信息技术有限公司 一种基于web技术的桌面应用构建方法及装置

Also Published As

Publication number Publication date
CN110908656A (zh) 2020-03-24

Similar Documents

Publication Publication Date Title
JP6629848B2 (ja) モバイルアプリ用ページ処理
Souchon et al. A review of XML-compliant user interface description languages
AU2012203071B2 (en) Computer-implemented method, system and computer program product for displaying a user interface component
US9471282B2 (en) System and method for using annotations to automatically generate a framework for a custom javaserver faces (JSF) component
US10565293B2 (en) Synchronizing DOM element references
US7610545B2 (en) Annotations for tracking provenance
Meier et al. Professional Android
CN110580147A (zh) 一种应用程序的开发方法和装置
CN106020823A (zh) 一种前端Web表现与数据分离以及页面快速响应的方式
JP2015534145A (ja) 宣言テンプレートを使用してコントロールをスタンプアウトするためのユーザインターフェイスコントロールフレームワーク
KR20140038469A (ko) 소스 코드를 실행 요소에 링크시키는 기법
CN103440127A (zh) 软件图形界面绘制方法和系统
CN110727429B (zh) 一种前端页面的生成方法、装置及设备
WO2016005885A2 (en) Asynchronous initialization of document object model (dom) modules
CN114153459A (zh) 接口文档生成方法及装置
US20110072371A1 (en) Application programming interface for user interface creation
CN110908656B (zh) 一种Android用户界面生成方法及系统
NO329240B1 (no) System og fremgangsmate for forklarende definering og bruk av undergrupper innenfor dokumentkoding
CN117348876B (zh) 基于freeRTOS嵌入式系统的应用开发方法、系统及介质
CN101149700B (zh) 通过配置文件实现命令显示的方法
JP6055366B2 (ja) 仮想Ｗｅｂサーバプログラム及び機能代行方法
CN110989998A (zh) 动态sql语句写入代码的方法、程序代码执行方法及平台
Pohja COMPARISON OF COMMON XML-BASED WEB USER INTERFACE LANGUAGESCOMPARISON OF COMMON XML-BASED WEB USER INTERFACE LANGUAGES
CN114003224A (zh) 一种基于taro实现低代码平台的方法
WO2021146895A1 (zh) 车载图像显示的优化方法、装置、计算机设备和存储介质

Legal Events

Date Code Title Description
PB01 Publication
PB01 Publication
SE01 Entry into force of request for substantive examination
SE01 Entry into force of request for substantive examination
GR01 Patent grant
GR01 Patent grant
CP03 Change of name, title or address

Address after: Room 201-9, Zone C, No. 18 Guanri Road, Phase II, Software Park, Torch High tech Zone, Xiamen City, Fujian Province, 361000

Patentee after: Fujian Huisibo Digital Technology Co.,Ltd.

Address before: No. 89 Software Avenue, Tongpan Road, Gulou District, Fuzhou City, Fujian Province, 350001, No. 34 # 5th Floor, Zone C, Fuzhou Software Park, 510

Patentee before: FUZHOU HUISIBO INFORMATION TECHNOLOGY Co.,Ltd.

CP03 Change of name, title or address