CN112463142A - Android mobile user interface modeling and converting method based on MDA - Google Patents

Android mobile user interface modeling and converting method based on MDA Download PDF

Info

Publication number
CN112463142A
CN112463142A CN202011341812.4A CN202011341812A CN112463142A CN 112463142 A CN112463142 A CN 112463142A CN 202011341812 A CN202011341812 A CN 202011341812A CN 112463142 A CN112463142 A CN 112463142A
Authority
CN
China
Prior art keywords
model
ifml
user interface
meta
mobile user
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.)
Pending
Application number
CN202011341812.4A
Other languages
Chinese (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.)
Kunming University of Science and Technology
Original Assignee
Kunming University of Science and Technology
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 Kunming University of Science and Technology filed Critical Kunming University of Science and Technology
Priority to CN202011341812.4A priority Critical patent/CN112463142A/en
Publication of CN112463142A publication Critical patent/CN112463142A/en
Pending legal-status Critical Current

Links

Images

Classifications

    • GPHYSICS
    • G06COMPUTING; CALCULATING OR COUNTING
    • G06FELECTRIC DIGITAL DATA PROCESSING
    • G06F8/00Arrangements for software engineering
    • G06F8/30Creation or generation of source code
    • G06F8/34Graphical or visual programming
    • GPHYSICS
    • G06COMPUTING; CALCULATING OR COUNTING
    • G06FELECTRIC DIGITAL DATA PROCESSING
    • G06F8/00Arrangements for software engineering
    • G06F8/30Creation or generation of source code
    • G06F8/35Creation or generation of source code model driven
    • GPHYSICS
    • G06COMPUTING; CALCULATING OR COUNTING
    • G06FELECTRIC DIGITAL DATA PROCESSING
    • G06F8/00Arrangements for software engineering
    • G06F8/40Transformation of program code
    • G06F8/41Compilation
    • G06F8/42Syntactic analysis

Landscapes

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

Abstract

The invention discloses an MDA-based Android mobile user interface modeling and conversion method, and belongs to the technical field of software engineering. With the continuous development of the information industry, the requirements of customers on the mobile user interface are higher and higher, and the complexity of the mobile user interface is increased. In order to improve the development efficiency of software and ensure the rendering degree of a UI (user interface), the invention provides a method for converting a source model IFML (interactive flow modeling language) into a target model Flutter based on an interactive flow modeling language by referring to a model-driven thought, designs a mapping relation between the interactive flow modeling language and a specific platform Flutter, and finally generates an App of Android through a rendering engine of a Flutter platform.

Description

Android mobile user interface modeling and converting method based on MDA
Technical Field
The invention relates to an MDA-based Android mobile user interface modeling and conversion method, in particular to a modeling method for abstracting a user interface model based on a model-driven Android mobile user interface, which models an Android end of a Flutter platform through extended IFML (extensible markup language), and belongs to the technical field of software engineering.
Background
With the continued development of the information industry, the size and complexity of software has increased. People have to repeat past work over and over again each time new technology comes. A system requires multiple technologies to build, with frequent communication with the outside world, and frequent changes in demand.
Meanwhile, due to the convenience of the mobile terminal, more and more people are inclined to work, shop, study and the like by using the mobile phone, and the demand of people for the user experience of the mobile UI is also rising, which means that the fluency of the mobile user interface is promoted, the rendering degree of the UI is improved, and the gorgeous UI can attract the eyeballs of the user.
In the aspect of development of mobile application software, due to the characteristics of a traditional compiler, a developer generally needs to compile codes in advance in each development, test and maintenance process to execute the codes, so that the software development period is prolonged. Meanwhile, 2D, animation, gestures, effects, and the like in mobile development are often difficult for developers.
To solve the above problems, an MDA method is proposed by OMG. MDA focuses on software development to a higher level of abstraction, which can be used to create good designs, cope with diversified implementation technologies, and extend the life cycle of software.
In 2013, the Interactive Flow Modeling Language (IFML) is a visual modeling standard formulated by the OMG, supports systems such as desktop computers, notebook computers, tablet computers, mobile devices, and the like, and is used for describing view structures and contents of front-end graphical user interfaces, interactions of events and data, conversion and triggering of events, and binding of parameters.
Flutter was published on the world mobile congress in 2018, an open source UI framework developed by Google in recent years, supporting mobile, Web, desktop, and embedded platforms. Flutter uses the Dart language as a development language to develop applications and allows developers to use platform APIs, third party frameworks, and native code (e.g., Java). The Android system has a set of code base for developing Android, and the running efficiency of the Android system can be comparable to that of a native App. On an Android platform, the Flutter supports hot updating of programs, expands functions of the programs, repairs bugs and the like, continuously renders a UI at a speed of hundreds of frames per second, and also has strong API support for 2D, animation, gestures, characteristics and the like.
The problems in the prior art are that:
1. when the requirements and data sources change during the software development process, the user interface may need to be modified or even rebuilt significantly, which reduces the development efficiency.
The user interface rendering degree in App is still insufficient.
3. 2D, animation, gestures, effects, etc. in mobile development are often difficult for developers.
Disclosure of Invention
The technical problem to be solved by the invention is to provide an Android mobile user interface modeling and conversion method based on MDA, the Android end of the Flutter platform is modeled through the extended IFML, the Android end is visually displayed to developers, the software development efficiency is improved, simultaneously, the gorgeous UI is provided, and the App of the Android is finally generated with good reusability and expandability. The model can be visually displayed to developers, and the App of the Android is finally generated with good maintainability and reusability.
The technical scheme adopted by the invention is as follows: an MDA-based Android mobile user interface modeling and conversion method comprises the following steps:
(1) formally defining a Meta-model, a model and a relation between the models based on a Meta-Object Facility (MOF) driven by the model;
(2) modeling a platform-independent model of the mobile user interface based on an interactive flow modeling language, and representing the model by using abstract syntax;
(3) the method comprises the following steps of expanding the IFML aiming at the Android end of the Flutter platform to serve as a meta-Model (M-IFMLM) of the IFML Model, wherein the expanding process is as follows:
1) the ViewContainer extension to IFML gets a Container, a BrowBar brow bar, a Body, a Bottombar low bar, a Card Block, a Drawer Drawer, a Dialog box;
2) obtaining a visual tree of a view container aiming at the Flutter platform extension by referring to a visual tree method of XAML;
3) expanding the Component of the IFML to obtain a Text, an Image picture, a Button, Time, an Icon, a List, a Layout of the Route;
4) obtaining a visual tree of each component for the Flutter platform extension by referring to a visual tree method of XAML;
(4) analyzing the expression capability of the IFML, and analyzing the corresponding relation between the Flutter component and the meta-model, as shown in a table 2-1;
TABLE 2-1 correspondence between FLUTTER Components and M-IFMLM elements and description thereof
Figure BDA0002798810450000031
(5) The specification of IFML is determined, which consists of 5 main technical components:
1) the IFML meta-model specifies the structure and semantics of the IFML construct using an OMG meta-object Mechanism (MOF);
2) IFML is based on the syntax of UML to represent its own unique model. In particular, IFML is based on the class diagram of UML, which is used to express the problems of hierarchy, dependency, etc. of them;
3) the IFML visualization syntax provides a concrete representation based on the UML graph. This may compress the representation of the user interface. In the past, the parts are respectively represented by UML class diagrams, state diagrams and composite structure diagrams;
4) the syntax of IFML provides a text replacement method, which is the same as the visual syntax, for representing the IFML model;
5) the IFML provides a model exchange format with portability by taking XMI as a tool;
(6) determining 3 rules that the IFML should follow as much as possible;
1) the simplicity is as follows: the model is directly mapped into the target code;
2) and (3) expandability: in the process of model mapping, the names or data types of attributes, methods and parameters in the entity classes need to be replaced;
3) performability: in the process of model mapping, a result selected after user interaction is mapped into a target code;
(7) 2 ways of designing the model mapping rules:
1) direct mapping: the model is directly mapped into the object code, for example, the multimedia element Media in the model can be mapped into Image in the Flutter component;
2) indirect mapping: in the process of model mapping, different types of components are selected for mapping according to the requirements of developers, for example, a List element List in a model can be mapped into a List layout ListView or a grid layout View in a Flutter component;
(8) and generating the App of the Android through a rendering engine of the Flutter platform.
The invention has the beneficial effects that: the invention utilizes the theoretical thought of model driving, improves the abstraction level of modeling, realizes the mapping from the platform-independent IFML model to the platform-dependent Flutter model, and improves the maintainability and reusability of software.
The method comprises the steps of modeling an Android end of a Flatter platform by using extended IFML, providing a method for converting source model IFML to target model Flatter based on an interactive flow modeling language, designing a mapping relation from the interactive flow modeling language to a specific platform Flatter, and finally packaging and generating the App of Android through the Flatter platform. For a front-end mobile user interface, the difference between different versions of the Android system can be shielded, and simultaneously, a gorgeous UI is provided.
Drawings
FIG. 1 is an overall flow chart of an Android mobile user interface modeling and conversion method based on MDA disclosed by the invention;
FIG. 2 is a model, meta-model, modeling language, MOF and system;
FIG. 3 is four modeling levels for OMG;
FIG. 4 is a class diagram showing the models, relationships between the models, in an abstract syntax;
FIG. 5 is an expansion of the view container;
FIG. 6 is a visualization tree of a view container for the Flutter platform extension;
FIG. 7 is an expansion of the assembly;
FIG. 8 is a visualization tree of components for the Flutter platform extension.
Detailed Description
The invention is further described with reference to the following figures and specific examples.
Example 1: as shown in fig. 1 to 8, the method for modeling and converting an MDA-based Android mobile user interface provided by the present invention includes the following steps:
(1) providing a meta-model, a model and a formal definition of the relationship among the models;
a 2.1-way model is defined. A model is used to describe a meta-model. Meta-MetaModel [ < id, name, type, attributes, rule, relationship >, wherein id represents the number of the Meta-Meta model, name represents the name of the Meta-Meta model, type represents the type of the Meta-Meta model, attributes represent the attribute of the Meta-Meta model, rule represents the constraint suffered by the Meta-Meta model, and relationship represents the relationship between the Meta-Meta model and the Meta model;
type has 4 basic data types and 2 object types, which are Integer, Boolean, Double, Char and String, Enum respectively. The Enum enumeration type can be customized according to the requirements of a user;
there are six basic relationships for relationship:
1) inheritance (Inheritance) relationship
2) Association relationship
3) Composition relationship
4) Aggregation relationship
5) Dependency (Dependency) relationships
6) Realisation of relationships
A 2.2 meta model is defined. One model used to describe a model is an instance of a meta-meta model. Defined as a six-membered group:
meta model [ < id, name, type, attributes, rules, relationship >, wherein id represents the number of the meta model, name represents the name of the meta model, type represents the type of the meta model, attributes of the meta model represent, rules represents the constraints to which the meta model is subjected, and relationship represents the relationship between the meta-meta model and the relationship between the meta model and the model;
the model 2.3 is defined. An example of a meta-model. Defined as a six-membered group:
model [ < id, name, type, attributes, rules, relationship >, wherein id represents the number of the Model, name represents the name of the Model, type represents the type of the Model, attributes of the Model are represented by attributes, rules represents the constraint to which the Model is subjected, and relationship represents the relationship between the meta-Model and the Model;
definition 2.4 Meta-Meta (m, mm) means that metamodel m is an implementation of metamodel mm;
define 2.5 Meta (md, m) denotes that model md is an implementation of Meta-model m;
(2) the structure of the abstract syntax is described using a class diagram, as shown in FIG. 4, Component represents a subcomponent of Viewcomponent;
(3) determining a container extension of the IFML for the Flutter platform, as shown in FIG. 5; the basic unit of dialogue with a user in a mobile application developed by Flutter is a page, and the corresponding IFML is a ViewContainer. Referring to the visual tree approach of XAML to obtain a visual tree of a view container for the Flutter platform extension, as shown in fig. 6, the following describes each sub-container of the view container:
1) container for setting various alignment conditions, background color, border color, Container inside and outside margins, sub-elements, and the like of each component within the area;
2) a Center for centering the respective components in the mobile user interface;
3) padding for handling direct spacing of containers from sub-elements;
4) expand, which can force a subcomponent to fill the available space;
5) align, setting the alignment mode of the sub-components and adjusting the size of the sub-control according to the limiting conditions;
6) AppBar (top bar), representing the top navigation component in the mobile user interface;
7) TabBar (top switch) for switching of top navigation of a mobile user interface;
8) BottomNaviganebar (text field) representing a bottom navigation bar in a mobile user interface;
9) card, representing a block of cards in the mobile user interface, having rounded corners and shadows, making the mobile user interface look stereoscopic;
10) drawer, representing a sidebar component in the mobile user interface;
11) a DrawerHeader (top of sidebar) located at the top of the sidebar for displaying basic information;
12) a user AccountsDrawerHeader (top of special side bar), wherein the side bar is used for setting information such as a user head portrait, a user name and Email;
13) DrawerItem (menu item) representing a menu item component in a mobile user interface;
14) modal BottomSheet (bottom panel), pop up a new page from the bottom of the mobile user interface;
15) dialogs (Dialog boxes) representing Dialog box components in a mobile user interface;
16) alert dialog (alert box), a pop-up layer for passing information to the user;
17) SimpleDialog (single-choice dialog) for delivering information to the user and providing a pop-up layer of options;
18) the custom dialog is expanded aiming at the dialog box and defines different styles;
(4) determining that IFML extends for components of the Flutter platform as shown in fig. 7. Referring to the visual tree method of XAML, a visual tree of each component for the Flutter platform extension is obtained, as shown in fig. 8, the following describes each subcomponent of the view component:
1) TextField, representing a text box component in a mobile user interface;
2) toast, progressive transient display message;
3) image (picture) representing a picture component in a mobile user interface;
4) a Swiper, representing a carousel component in a mobile user interface;
5) RaisedButton, which represents a raised button in a mobile user interface;
6) FlatButton (flattened button), which represents a flattened button in a mobile user interface;
7) OutlineButton, which represents a wireframe button in a mobile user interface;
8) IconButton, which represents an icon button in a mobile user interface;
9) button bar, representing a button group in a mobile user interface;
10) radio (Radio button), which represents a Radio button in a mobile user interface;
11) a radio list tile (secondary radio button) for setting a radio button of a secondary title;
12) floatingtactionbutton, representing a float button in a mobile user interface;
13) checkbox, representing a multiple box component in a mobile user interface;
14) a checkbox listtile (secondary check box) for setting a check box of a secondary title;
15) switch, representing a Switch component in a mobile user interface;
16) DatePicker, representing a date selector in a mobile user interface;
17) timer, representing a Timer component in a mobile user interface;
18) icon, representing an Icon component in a mobile user interface;
19) ListView (List), representing a list element in the mobile user interface, that can dynamically cycle data;
20) ListTile, representing a list block in a mobile user interface;
21) GridView (grid List), representing the grid List in the mobile user interface;
22) row (horizontal) for moving a horizontal layout in a user interface;
23) column (vertical) for vertical layout in a mobile user interface;
24) stack for moving a Stack layout in a user interface;
25) positioning, performed within the stacked layout;
26) aspect ratio, adjusting the size of the child object according to a specific aspect ratio;
27) wrap (stream layout) for being expandable toward the cross axis when the space of the main axis is insufficient;
28) flow (personalized Flow layout), setting the arrangement rule of the subassemblies, and controlling the placement position of the subassemblies;
29) route, which causes a user to jump from one page to another page by routing the entry and exit stacks of objects;
30) navigator (Navigator), which manages a stack of routing objects and provides a method of managing the stack;
(5) analyzing the expression capability of the IFML, and analyzing the corresponding relation between the Flutter component and the M-AUIM;
(6) 2 ways of designing the model mapping rules:
1) direct mapping: the model is directly mapped into the object code, for example, the multimedia element Media in the model can be mapped into Image in the Flutter component;
2) indirect mapping: in the process of model mapping, different types of components are selected for mapping according to the requirements of developers, for example, a List element List in a model can be mapped into a List layout ListView or a grid layout View in a Flutter component;
(7) generating an App of Android through a rendering engine of a Flutter platform;
the invention adopts a conversion method from IFML extended modeling to Flutter platform model mapping, firstly abstracts a concept model from user interface requirements to obtain a mobile user interface with a high abstraction level, and then adds corresponding detail information to gradually refine and convert the mobile user interface into a mobile user interface with a low abstraction level. And finally generating the App of the Android through the model mapping rule and the Flutter rendering engine.
While the present invention has been described in detail with reference to the embodiments shown in the drawings, the present invention is not limited to the embodiments, and various changes can be made without departing from the spirit and scope of the present invention.

Claims (1)

1. An MDA-based Android mobile user interface modeling and conversion method is characterized by comprising the following steps: the method comprises the following steps:
(1) formally defining a meta-model, a model and a relation between the models based on a model-driven meta-object mechanism MOF;
(2) modeling a platform-independent model of the mobile user interface based on an Interactive Flow Modeling Language (IFML), and expressing the model by using abstract syntax;
(3) the IFML is expanded aiming at the Android end of the Flutter platform and is used as a meta-model of an abstract user interface model, and the expansion process is as follows:
1) the ViewContainer extension to IFML gets a Container, a BrowBar brow bar, a Body, a Bottombar low bar, a Card Block, a Drawer Drawer, a Dialog box;
2) obtaining a visual tree of a view container aiming at the Flutter platform extension by referring to a visual tree method of XAML;
3) expanding the Component of the IFML to obtain a Text, an Image picture, a Button, Time, an Icon, a List, a Layout of the Route;
4) obtaining a visual tree of each component for the Flutter platform extension by referring to a visual tree method of XAML;
(4) analyzing the expression capability of the IFML, and analyzing the corresponding relation between the Flutter component and the meta-model;
(5) the specification of IFML is determined, which consists of 5 main technical components:
1) the IFML meta-model uses OMG meta-object mechanism MOF to specify the structure and semantics of the IFML structure;
2) the IFML is based on UML grammar and used for representing own unique models, in particular, the IFML is based on UML class diagrams and used for expressing the problems of hierarchical structure, dependency and the like of the IFML;
3) the IFML visualization grammar provides a concrete representation based on the UML diagram, so that the representation of the user interface can be compressed, and the prior art respectively represents the part by the UML class diagram, the state diagram and the compound structure diagram;
4) the syntax of IFML provides a text replacement method, which is the same as the visual syntax, for representing the IFML model;
5) the IFML provides a model exchange format with portability by taking XMI as a tool;
(6) determining 3 rules that the IFML should follow;
1) the simplicity;
2) expandability;
3) performability;
(7) 2 ways of designing the model mapping rules:
1) direct mapping: the model is directly mapped into the target code;
2) indirect mapping: in the process of model mapping, selecting different types of components for mapping according to the requirements of developers;
(8) and generating the App of the Android through a rendering engine of the Flutter platform.
CN202011341812.4A 2020-11-25 2020-11-25 Android mobile user interface modeling and converting method based on MDA Pending CN112463142A (en)

Priority Applications (1)

Application Number Priority Date Filing Date Title
CN202011341812.4A CN112463142A (en) 2020-11-25 2020-11-25 Android mobile user interface modeling and converting method based on MDA

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
CN202011341812.4A CN112463142A (en) 2020-11-25 2020-11-25 Android mobile user interface modeling and converting method based on MDA

Publications (1)

Publication Number Publication Date
CN112463142A true CN112463142A (en) 2021-03-09

Family

ID=74808327

Family Applications (1)

Application Number Title Priority Date Filing Date
CN202011341812.4A Pending CN112463142A (en) 2020-11-25 2020-11-25 Android mobile user interface modeling and converting method based on MDA

Country Status (1)

Country Link
CN (1) CN112463142A (en)

Cited By (1)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN115640010A (en) * 2022-12-23 2023-01-24 北京沃德博创信息科技有限公司 List component for unlimited circular scrolling in Flutter

Citations (4)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
US20160266952A1 (en) * 2015-03-10 2016-09-15 Kai Höfig Automated Qualification of a Safety Critical System
CN106126213A (en) * 2016-06-16 2016-11-16 南京大学 A kind of Android based on IFML develops modeling method
CN106445539A (en) * 2016-09-30 2017-02-22 南京大学 IFML-based Android developing modeling method
CN107133042A (en) * 2017-05-04 2017-09-05 南京大学 A kind of iOS exploitation modeling methods based on IFML

Patent Citations (4)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
US20160266952A1 (en) * 2015-03-10 2016-09-15 Kai Höfig Automated Qualification of a Safety Critical System
CN106126213A (en) * 2016-06-16 2016-11-16 南京大学 A kind of Android based on IFML develops modeling method
CN106445539A (en) * 2016-09-30 2017-02-22 南京大学 IFML-based Android developing modeling method
CN107133042A (en) * 2017-05-04 2017-09-05 南京大学 A kind of iOS exploitation modeling methods based on IFML

Non-Patent Citations (2)

* Cited by examiner, † Cited by third party
Title
刘一田;刘士进;: "可视化Web设计器", 计算机系统应用, no. 10, pages 82 - 86 *
刘晓燕: "基于FM17550的RFID读卡器的设计与实现", 《中国优秀硕士学位论文全文数据库信息科技辑》, pages 138 - 235 *

Cited By (1)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN115640010A (en) * 2022-12-23 2023-01-24 北京沃德博创信息科技有限公司 List component for unlimited circular scrolling in Flutter

Similar Documents

Publication Publication Date Title
Hermes Xamarin mobile application development: Cross-platform c# and xamarin. forms fundamentals
CA2135527C (en) Object oriented notification framework system
CN102221993B (en) The declarative definition of complex user interface Status Change
Vanderdonckt et al. Flexible reverse engineering of web pages with vaquista
Moreno et al. WebML modelling in UML
US20030160822A1 (en) System and method for creating graphical user interfaces
JP2012084165A (en) Program for causing computer to generate user interface
JPH08505720A (en) Command system
JP2005135384A (en) Programming interface for computer platform
JPH08505970A (en) International data processing system
JPH08505968A (en) How to run a dialog box on a computer system
CN101727327B (en) Development method for visual JSP interface based on GEF technology
US20210168192A1 (en) System and Method to Standardize and Improve Implementation Efficiency of User Interface Content
Jia et al. AXIOM: A Model-driven Approach to Cross-platform Application Development.
Ernsting et al. Refining a reference architecture for model-driven business apps
Lewis et al. Native mobile development: a cross-reference for iOS and Android
CN112463142A (en) Android mobile user interface modeling and converting method based on MDA
Bishop Multi-platform user interface construction: a challenge for software engineering-in-the-small
Savidis et al. Inclusive development: Software engineering requirements for universally accessible interactions
Fujima Building a meme media platform with a JavaScript MVC framework and HTML5
CN102508648A (en) Graphics engine implementation method
Beaudoux et al. Specifying and running rich graphical components with loa
Pleuss et al. Integrating heterogeneous tools into model-centric development of interactive applications
Parsons Foundational Java: Key Elements and Practical Programming
Collignon et al. An intelligent editor for multi-presentation user interfaces

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
AD01 Patent right deemed abandoned
AD01 Patent right deemed abandoned

Effective date of abandoning: 20240621