CN108415702A - A kind of mobile terminal application interface dynamic rendering intent and device - Google Patents
A kind of mobile terminal application interface dynamic rendering intent and device Download PDFInfo
- Publication number
- CN108415702A CN108415702A CN201810059539.2A CN201810059539A CN108415702A CN 108415702 A CN108415702 A CN 108415702A CN 201810059539 A CN201810059539 A CN 201810059539A CN 108415702 A CN108415702 A CN 108415702A
- Authority
- CN
- China
- Prior art keywords
- dom
- node
- library
- flex
- general properties
- 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.)
- Granted
Links
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
Abstract
The embodiment of the present application provides a kind of mobile terminal application interface dynamic rendering intent and device, is related to internet arena.The method includes：According to mobile terminal application visual interface, obtains server end and correspond to the update XML file of the visual interface and predefined Script Basics library；The update XML file, which is parsed, according to predefined Script Basics library generates DOM Document Object Model dom tree；Each DOM node on the DOM Document Object Model dom tree is traversed successively；According to the flex typesetting attributes of the DOM node, flex typesetting nodes are created by native modes, and corresponding default view is tied to each flex typesettings node；The General Properties of the DOM node are parsed by the predefined Script Basics library；According to the flex typesettings node and the analysis result of the General Properties of the DOM node, renders and generate newer visual interface.Solve in the prior art update mobile terminal application interface need to send out version again, the higher problem of development cost.
Description
Technical field
This application involves Internet technical field, more particularly to a kind of mobile terminal application interface dynamic rendering intent and
A kind of mobile terminal application interface dynamic rendering device.
Background technology
Universal and mobile Internet terminal with network technology is popularized, and the demand of information mobile is growing day by day,
And information mobile needs to carry out the processes such as exploitation, publication, installation and the update of mobile terminal application of different platform.Traditional
Development mode (i.e. primary native development modes) because learning cost is high, and due to it is cross-platform the problems such as, lead to mobile
Cost is excessively high, and if newly-increased or modification function, is also faced with split originator and sends out version again, and mobile terminal application carries out again
The problem of installation.
Based on the above issues, the prior art utilizes big front end solutions, that is, combines the side such as HTML5, react native
Method, can promote flexibility and the convenience of exploitation to a certain extent, but relative to native development modes, often reduce
The fluency of user when using the application.
Invention content
In view of the above problems, it is proposed that the embodiment of the present application overcoming the above problem or at least partly in order to provide one kind
A kind of mobile terminal application interface dynamic rendering intent and a kind of corresponding mobile terminal application interface to solve the above problems is dynamic
State rendering device.
To solve the above-mentioned problems, this application discloses a kind of mobile terminal application interface dynamic rendering intents, including：Root
According to mobile terminal application visual interface, obtains server end and correspond to the update XML file of the visual interface and predefined script
Base library；The update XML file is parsed according to predefined Script Basics library, generates DOM Document Object Model dom tree；It traverses successively
Each DOM node on the DOM Document Object Model dom tree；According to the flex typesetting attributes of the DOM node, pass through native
Mode creates flex typesetting nodes, and corresponding default view is tied to each flex typesettings node；By described predetermined
Adopted Script Basics library parses the General Properties of the DOM node；According to the flex typesettings node and the DOM node
The analysis result of General Properties renders and generates newer visual interface.
Optionally, the General Properties of the DOM node include：Event call-back identifies one in touch, pingback attribute
Item is multinomial.
Optionally, in described the step of parsing the General Properties of the DOM node by the predefined Script Basics library
Later, further include：If the General Properties for being resolved to the DOM node are item Style Attributes, by the item Style Attributes
Data are converted to the attribute data of the corresponding mobile terminal system platform；Wherein, the item Style Attributes include：Pixel,
Percentage, the ratio of width to height are therein one or more.
Optionally, in described the step of parsing the General Properties of the DOM node by the predefined Script Basics library
Later, further include：If the General Properties for being resolved to the DOM node are touch attributes, obtained according to Script Basics library is predefined
The callback events of the corresponding touch attributes are taken, and the callback events are tied to the DOM node.
Optionally, in described the step of parsing the General Properties of the DOM node by the predefined Script Basics library
Later, further include：If the General Properties for being resolved to the DOM node are pingback attributes, according to predefined Script Basics
Library obtains corresponding pingback events, and by the pingback event bindings to the DOM node.
This application discloses a kind of mobile terminal application interface dynamic rendering devices, including：File acquisition module is used for root
According to mobile terminal application visual interface, obtains server end and correspond to the update XML file of the visual interface and predefined script
Base library；Parsing module, for according to the Script Basics library parsing update XML file is predefined, generating DOM Document Object Model
Dom tree；Attribute parsing module, for traversing each DOM node on the DOM Document Object Model dom tree successively；Type-setting module,
For the flex typesetting attributes according to the DOM node, flex typesetting nodes are created by native modes, and will be corresponding pre-
If view is tied to each flex typesettings node；General Properties parsing module, for passing through the predefined Script Basics library
Parse the General Properties of the DOM node；Update module, for according to the flex typesettings node and the DOM node
The analysis result of General Properties renders and generates newer visual interface.
Optionally, the General Properties of the DOM node include：Event call-back identifies one in touch, pingback attribute
Item is multinomial.
Optionally, further include：Item Style Attributes parsing modules, if the General Properties for being resolved to the DOM node
For item Style Attributes, then the item Style Attributes data are converted to the attribute number of the corresponding mobile terminal system platform
According to；Wherein, the item Style Attributes include：Pixel, percentage, the ratio of width to height are therein one or more.
Optionally, further include：Touch attribute parsing modules, if the General Properties for being resolved to the DOM node are
Touch attributes, then according to the callback events for predefining Script Basics library and obtaining the corresponding touch attributes, and by the readjustment
Event binding is to the DOM node.
Optionally, further include：Pingback attribute parsing modules, if the General Properties for being resolved to the DOM node
For pingback attributes, then corresponding pingback events are obtained according to predefining Script Basics library, and by the pingback
Event binding is to the DOM node.
The embodiment of the present application includes the following advantages：
The embodiment of the present application, the update XML file by the corresponding mobile terminal application visual interface of detection and predefined foot
This base library parses dynamic update XML file according to predefined Script Basics library, generates dom tree, parse the DOM node of dom tree
Attribute flex typesetting nodes are created, and according to predefined script by native modes according to the analysis result of nodal community
Base library parses the General Properties of the DOM node, finally according to the normal of the flex typesettings node and the DOM node
The analysis result of attribute is advised, renders and generates newer visual interface, solves update mobile terminal application interface in the prior art
The problem of needing to send out again edition, while having reached reduction development cost, renewal speed is improved, and realize interface update dynamic
The advantageous effect of change.
Description of the drawings
The step of Fig. 1 is a kind of mobile terminal application interface dynamic rendering intent embodiment provided by the embodiments of the present application is flowed
Cheng Tu；
The step of Fig. 2 is a kind of mobile terminal application interface dynamic rendering intent embodiment provided by the embodiments of the present application is flowed
Cheng Tu；
Fig. 2A is a kind of application fabric schematic diagram of the embodiment of the present application；
Fig. 2 B are application interface dynamic rendering system structural schematic diagrams provided by the embodiments of the present application；
Fig. 3 is a kind of structure of mobile terminal application interface dynamic rendering device embodiment provided by the embodiments of the present application
Block diagram；
Fig. 4 is a kind of structure of mobile terminal application interface dynamic rendering device embodiment provided by the embodiments of the present application
Block diagram.
Specific implementation mode
In order to make the above objects, features, and advantages of the present application more apparent, below in conjunction with the accompanying drawings and it is specific real
Applying mode, the present application will be further described in detail.
Embodiment one
Referring to Fig.1, a kind of the step of mobile terminal application interface dynamic rendering intent embodiment for showing the application, flows
Cheng Tu can specifically include following steps：
Step 101, according to mobile terminal application visual interface, obtain the update that server end corresponds to the visual interface
XML file and predefined Script Basics library.
It is all right there are one in server end for each visual interface of mobile terminal application in the embodiment of the present invention
The addresses url of the XML file at the current visible interface answered can obtain corresponding XML file according to the address from server end
With predefined script.
Specifically, related technical personnel can be directed to the corresponding XML file of deployment of the visual interface of application in server end,
First, the XML file of deployment includes the XML skins rule of definition, supports cascading style css attributes, supports based on flex rules
Typesetting etc., and predefined Script Basics library is the libraries luakit.
It wherein, can be by sending update prompt to client after related technical personnel are in server end upload update
The mode of message notifies to apply on mobile terminal and asks to download update in server end.
Step 102 parses the update XML file according to predefined Script Basics library, generates DOM Document Object Model DOM
Tree.
In the embodiment of the present invention, is applied when mobile terminal and download corresponding update XML file and in advance in server end request
After defining Script Basics library, XML skin file is parsed by the libraries luakit script, and generate dom tree.
Wherein, XML document is considered as a kind of tree construction by DOM.DOM tree structure is referred to as node tree, can be visited by this tree
Ask all nodes.Their content can be changed or be deleted, new element can also be created, DOM node tree illustrates node
Set and the contact between them.Then dom tree grows branch in the lowest hierarchical level of tree since root node to text node
Item.
Step 103 traverses each DOM node on the DOM Document Object Model dom tree successively.
In the embodiment of the present invention, after generating dom tree according to newer XML file, using preset resolver to DOM
Tree is parsed, and is to traverse each DOM node on dom tree successively first when being locally loaded into resolver parsing.For example, utilizing
Function loadXMLDoc () loads XML file, and is associated with according to the superior and the subordinate of DOM node list and each node in file
Relationship is traversed successively.
Step 104, the flex typesetting attributes according to the DOM node, flex typesetting nodes are created by native modes,
And corresponding default view is tied to each flex typesettings node.
In the embodiment of the present invention, when traversing DOM node, nodal community can be determined according to nodeName and nodeType
Title and type, XML file is loaded into XMLDoc by using loadXMLDoc (), then obtains the child node of root element,
It checks the node type of each child node, is node element if node type is " 1 ", if it is node element, then exports
The title of node.
Wherein it is possible to by the above method, when traversing DOM node, if the entitled flex of node returned, DOM node
It for flex nodes, and determines that traverse node includes flex typesetting attributes, flex typesettings can be created by native modes.
Specifically, flex is the abbreviation of flexible Box, elastic box layout, and the juche idea of Flexbox layouts is
Element can change size to adapt to free space, and when free space becomes larger, Flex elements will stretch size can use sky to fill
Between, it reducing automatically when Flex elements exceed free space, Expansion container attribute is defined in the way of native includes,
Display, flex-direction, flex-wrap, flex-flow, justify-content, align-items, it is fixed respectively
The telescopic direction of adopted block grade Expansion container, and the processing mode etc. when deficiency when extension.
Step 105, the General Properties that the DOM node is parsed by the predefined Script Basics library.
In the embodiment of the present invention, if nodeName and nodeType that traversal DOM node returns further parse DOM sections
The General Properties of point, and according to the General Properties parsed, find corresponding event, binding event to the DOM node.
Step 106, according to the flex typesettings node and the analysis result of the General Properties of the DOM node, render
Generate newer visual interface.
In the embodiment of the present invention, after traversal completes dom tree, according to typesetting node, distribution form, the view of binding and thing
Part draws the skins such as page color, background, generates control, ultimately produces updated application interface.
In embodiments of the present invention, according to mobile terminal application visual interface, obtaining can visual field described in server end correspondence
The update XML file in face and predefined Script Basics library；The update XML file is parsed according to predefined Script Basics library, it is raw
At DOM Document Object Model dom tree；Each DOM node on the DOM Document Object Model dom tree is traversed successively；According to the DOM
The flex typesetting attributes of node create flex typesetting nodes by native modes, and corresponding default view are tied to respectively
The flex typesettings node；The General Properties of the DOM node are parsed by the predefined Script Basics library；According to described
The analysis result of the General Properties of flex typesettings node and the DOM node renders and generates newer visual interface.It realizes
According to the more newly downloaded corresponding XML file in interface, Mobile state of going forward side by side parsing and update, having reduces development cost, improves exploitation
The advantageous effect of flexibility.
Embodiment two
A kind of the step of reference Fig. 2, the mobile terminal application interface dynamic rendering intent embodiment for showing the application, flows
Cheng Tu can specifically include following steps：
Step 201, according to mobile terminal application visual interface, obtain the update that server end corresponds to the visual interface
XML file and predefined Script Basics library.
This step is identical as step 101, and this will not be detailed here.
Step 202 parses the update XML file according to predefined Script Basics library, generates DOM Document Object Model DOM
Tree.
This step is identical as step 102, and this will not be detailed here.
Step 203 traverses each DOM node on the DOM Document Object Model dom tree successively.
This step is identical as step 103, and this will not be detailed here.
Step 204, the flex typesetting attributes according to the DOM node, flex typesetting nodes are created by native modes,
And corresponding default view is tied to each flex typesettings node.
This step is identical as step 104, and this will not be detailed here.
Preferably, the General Properties of the DOM node include：Event call-back identifies one in touch, pingback attribute
Item is multinomial.
Step 205, the General Properties that the DOM node is parsed by the predefined Script Basics library.
This step is identical as step 105, and this will not be detailed here.
If step 206, the General Properties for being resolved to the DOM node are item Style Attributes, by the item patterns
Attribute data is converted to the attribute data of the corresponding mobile terminal system platform；Wherein, the item Style Attributes include：Picture
Element, percentage, the ratio of width to height are therein one or more.
Preferably, in an alternative embodiment of the invention, after step 205, further include：
If the General Properties for step A11, being resolved to the DOM node are touch attributes, according to predefined Script Basics
Library obtains the callback events of the corresponding touch attributes, and the callback events are tied to the DOM node.
Preferably, in an alternative embodiment of the invention, after step 205, further include：
If the General Properties for step B11, being resolved to the DOM node are pingback attributes, according to predefined script
Base library obtains corresponding pingback events, and by the pingback event bindings to the DOM node.
In the embodiment of the present invention, description through the above steps, as shown in Figure 2 A, XML skins rule pre-defined first
Then (skin Designer) supports css attributes, supports the typesetting based on flex rules.Secondly, when download defines Script Basics
Library luakit Script, and skin is parsed according to luakit scripts, it is raw using the skin resolver skin parser of operation layer
At the tree structure of similar DOM, parsing XML skins are DOM structure and store, then in engine engine layers pass through the libraries luakit
The ends Bridge to objective c, the corresponding native controls of generation group build-up layers, including UI components, acoustic assembly, network
Component, timer control, animation component, pingback components etc., and it is spliced into corresponding tree structure.For example, parsing first
XML skins are DOM structure and store.Then each DOM node is traversed successively, parses the General Properties of each node successively, and
Corresponding method is triggered by the Bridge mechanism of luakit and oc.
Secondly, control protocol is issued to specific platform in a text form, and client does local according to the characteristics of platform
Change is handled, and changes into the control meaning of one's words that platform can identify.For example, css attribute unit conversions, by the pixel (px) in css, percentage
It is the relevant unit of platform, such as dp, sp than the unit conversions such as (%), the ratio of width to height (vw), wherein css property screens are adapted to, greatly
Under partial picture, the mobile phone of different screen resolutions and screen size uses same set of css standards, and client is according to current screen
Density is multiplied by specific screens coefficient to transformed unit, to be adapted to different screen.
Wherein, during parsing DOM node, it is divided into two kinds of situations：One is the DOM nodes of parsing to save for flex
Point, then search flex nodes, bind flex nodes, asynchronous driving flex typesetting processes, for example, if the node of traversal out
It is a flex node, then traverses its child nodes, the mode of native is used in combination that flexChildren, the ends native wound are set
Flex typesetting nodes are built, and are tied to actual default view, step triggering flex node typesettings, after the completion of waiting for typesetting, the row of acquisition
The position of version node, and the default view that reverse sync is bound to it.Another situation is, when the DOM node of parsing is not
Flex nodes bind corresponding event then according to the attribute of DOM node.For example, if it find that touch during parsing node
Attribute searches corresponding callback events in luakit scripts, and binds the event.Parse node during if it find that
Pingback attributes search corresponding pingback events in luakit scripts, and bind the event.
Wherein, when parsing DOM node, the title of node is obtained by function nodeName, passes through function nodeValue
It obtains the value of node and obtains the type of node by function nodeType, the title of the above read-only operation acquisition DOM node,
Attribute and corresponding value, according to node different attribute, corresponding value are stored respectively, so as to the rendering of next step.
Certainly, in practical applications, the attribute of DOM node further includes id, frame, bg, waits attributes, the specified controls of wherein id
Part identifies, and frame specifies presumptive area, bg specific context colors to be parsed by becheduleding for corresponding content in script bank, finally
It is rendered into newer application interface and content, user is showed in system layer.
As shown in Figure 2 B, related technical personnel configure dynamic more new template by configuration tool, and are uploaded to server
Generate updated data package simultaneously preserve, mobile terminal from server end ask download updated data package after, according to download skin packet and
Predefined luakit script banks carry out, and then parse skin file and nodal community in DOM files, can be with according to analysis result
Corresponding generation flex typesetting nodes, and view is bound, semantic localization is carried out by css Style Attributes, is directed to touch sections
Point and pingback nodes, bind corresponding event, finally complete the update of application interface.
Step 207, according to the flex typesettings node and the analysis result of the General Properties of the DOM node, render
Generate newer visual interface.
This step is identical as step 106, and this will not be detailed here.
In embodiments of the present invention, according to mobile terminal application visual interface, obtaining can visual field described in server end correspondence
The update XML file in face and predefined Script Basics library；The update XML file is parsed according to predefined Script Basics library, it is raw
At DOM Document Object Model dom tree；Each DOM node on the DOM Document Object Model dom tree is traversed successively；According to the DOM
The flex typesetting attributes of node create flex typesetting nodes by native modes, and corresponding default view are tied to respectively
The flex typesettings node；If it is flex nodes to traverse the DOM node not, if being resolved to the General Properties of the DOM node
For item Style Attributes, then the item Style Attributes data are converted to the attribute number of the corresponding mobile terminal system platform
According to；If the General Properties for being resolved to the DOM node are touch attributes, corresponding institute is obtained according to Script Basics library is predefined
The callback events of touch attributes are stated, and the callback events are tied to the DOM node；If being resolved to the DOM node
General Properties are pingback attributes, then obtain corresponding pingback events according to predefined Script Basics library, and will be described
Pingback event bindings are to the DOM node；Finally according to the routine of the flex typesettings node and the DOM node
The analysis result of attribute renders and generates newer visual interface.It realizes according to the more newly downloaded corresponding XML file in interface, goes forward side by side
Mobile state parses and update, detaches pattern data and behavioral data, pattern and behavioral data are all controlled by high in the clouds, support dynamic more
Newly, the XML skins and lua scripts of access criteria, avoids self-defined DSL, and having reduces interface development threshold, and raising carries
The flexibility of high mobile client interface alternation, can more preferably support product, operation demand advantageous effect.
Embodiment three
With reference to Fig. 3, a kind of structural frames of mobile terminal application interface dynamic rendering device embodiment of the application are shown
Figure, can specifically include following module：
The mobile terminal application interface dynamic rendering device 300, including：
File acquisition module 301, for according to mobile terminal application visual interface, acquisition server end to correspond to described visual
The update XML file at interface and predefined Script Basics library；
Parsing module 302, for according to the Script Basics library parsing update XML file is predefined, generating document object
Model dom tree；
Attribute parsing module 303, for traversing each DOM node on the DOM Document Object Model dom tree successively；
Type-setting module 304 creates flex for the flex typesetting attributes according to the DOM node by native modes
Typesetting node, and corresponding default view is tied to each flex typesettings node；
General Properties parsing module 305, the routine for parsing the DOM node by the predefined Script Basics library
Attribute；
Update module 306, for the parsing according to the flex typesettings node and the General Properties of the DOM node
Newer visual interface is generated as a result, rendering.
Example IV
With reference to Fig. 4, a kind of structural frames of mobile terminal application interface dynamic rendering device embodiment of the application are shown
Figure, can specifically include following module：
The mobile terminal application interface dynamic rendering device 400, including：
File acquisition module 401, for according to mobile terminal application visual interface, acquisition server end to correspond to described visual
The update XML file at interface and predefined Script Basics library；
Parsing module 402, for according to the Script Basics library parsing update XML file is predefined, generating document object
Model dom tree；
Attribute parsing module 403, for traversing each DOM node on the DOM Document Object Model dom tree successively；
Type-setting module 404 creates flex for the flex typesetting attributes according to the DOM node by native modes
Typesetting node, and corresponding default view is tied to each flex typesettings node；
Preferably, the General Properties of the DOM node include：Event call-back identifies one in touch, pingback attribute
Item is multinomial.
General Properties parsing module 405, the routine for parsing the DOM node by the predefined Script Basics library
Attribute；
Preferably, further include：
Item Style Attributes parsing module 406, if the General Properties for being resolved to the DOM node are item pattern categories
Property, then the item Style Attributes data are converted to the attribute data of the corresponding mobile terminal system platform；Wherein, described
Item Style Attributes include：Pixel, percentage, the ratio of width to height are therein one or more.
Preferably, in an alternative embodiment of the invention, further include：
Touch attribute parsing modules, if the General Properties for being resolved to the DOM node are touch attributes, basis
Predefined Script Basics library obtains the callback events of the corresponding touch attributes, and the callback events are tied to the DOM
Node.
Preferably, in an alternative embodiment of the invention, further include：
Pingback attribute parsing modules, if the General Properties for being resolved to the DOM node are pingback attributes,
Corresponding pingback events then are obtained according to predefining Script Basics library, and by the pingback event bindings to described
DOM node.
Update module 407, for the parsing according to the flex typesettings node and the General Properties of the DOM node
Newer visual interface is generated as a result, rendering.
In embodiments of the present invention, server is obtained according to mobile terminal application visual interface using file acquisition module
The update XML file of the corresponding visual interface in end and predefined Script Basics library；By parsing module, according to predefined foot
This base library parses the update XML file, generates DOM Document Object Model dom tree；Then attribute parsing module and typesetting are utilized
Module traverses each DOM node on the DOM Document Object Model dom tree, and is arranged according to the flex of the DOM node successively
Version attribute, creates flex typesetting nodes, and corresponding default view is tied to each flex typesettings by native modes
Node；And by General Properties parsing module, the conventional of the DOM node is parsed by the predefined Script Basics library and is belonged to
Property；And according to the type of parsing General Properties, by corresponding event binding to corresponding DOM node；Finally, according to the last root of parsing
According to the flex typesettings node and the analysis result of the General Properties of the DOM node, rendering generation is newer can visual field
Face.It realizes according to the more newly downloaded corresponding XML file in interface, Mobile state of going forward side by side parsing and update detach pattern data and behavior
Data, pattern and behavioral data are all controlled by high in the clouds, and dynamic is supported to update, the XML skins and lua scripts of access criteria,
Self-defined DSL is avoided, having reduces interface development threshold, improves the flexibility of mobile client interface alternation, can be more
Well support product, operation demand advantageous effect.
For device embodiments, since it is basically similar to the method embodiment, so fairly simple, the correlation of description
Place illustrates referring to the part of embodiment of the method.
Each embodiment in this specification is described in a progressive manner, what each embodiment stressed be all with
The difference of other embodiment, the same or similar parts between the embodiments can be referred to each other.
It should be understood by those skilled in the art that, the embodiments of the present application may be provided as method, apparatus or calculating
Machine program product.Therefore, the embodiment of the present application can be used complete hardware embodiment, complete software embodiment or combine software and
The form of the embodiment of hardware aspect.Moreover, the embodiment of the present application can be used one or more wherein include computer can
With in the computer-usable storage medium (including but not limited to magnetic disk storage, CD-ROM, optical memory etc.) of program code
The form of the computer program product of implementation.
In a typical configuration, the computer equipment includes one or more processors (CPU), input/output
Interface, network interface and memory.Memory may include the volatile memory in computer-readable medium, random access memory
The forms such as device (RAM) and/or Nonvolatile memory, such as read-only memory (ROM) or flash memory (flash RAM).Memory is to calculate
The example of machine readable medium.Computer-readable medium includes that permanent and non-permanent, removable and non-removable media can be with
Information storage is realized by any method or technique.Information can be computer-readable instruction, data structure, the module of program or
Other data.The example of the storage medium of computer includes, but are not limited to phase transition internal memory (PRAM), static RAM
(SRAM), dynamic random access memory (DRAM), other kinds of random access memory (RAM), read-only memory
(ROM), electrically erasable programmable read-only memory (EEPROM), fast flash memory bank or other memory techniques, CD-ROM are read-only
Memory (CD-ROM), digital versatile disc (DVD) or other optical storages, magnetic tape cassette, tape magnetic disk storage or
Other magnetic storage apparatus or any other non-transmission medium can be used for storage and can be accessed by a computing device information.According to
Herein defines, and computer-readable medium does not include non-persistent computer readable media (transitory media), such as
The data-signal and carrier wave of modulation.
The embodiment of the present application is with reference to according to the method for the embodiment of the present application, terminal device (system) and computer program
The flowchart and/or the block diagram of product describes.It should be understood that flowchart and/or the block diagram can be realized by computer program instructions
In each flow and/or block and flowchart and/or the block diagram in flow and/or box combination.These can be provided
Computer program instructions are set to all-purpose computer, special purpose computer, Embedded Processor or other programmable data processing terminals
Standby processor is to generate a machine so that is held by the processor of computer or other programmable data processing terminal equipments
Capable instruction generates for realizing in one flow of flow chart or multiple flows and/or one box of block diagram or multiple boxes
The device of specified function.
These computer program instructions, which may also be stored in, can guide computer or other programmable data processing terminal equipments
In computer-readable memory operate in a specific manner so that instruction stored in the computer readable memory generates packet
The manufacture of command device is included, which realizes in one flow of flow chart or multiple flows and/or one side of block diagram
The function of being specified in frame or multiple boxes.
These computer program instructions can be also loaded into computer or other programmable data processing terminal equipments so that
Series of operation steps are executed on computer or other programmable terminal equipments to generate computer implemented processing, thus
The instruction executed on computer or other programmable terminal equipments is provided for realizing in one flow of flow chart or multiple flows
And/or in one box of block diagram or multiple boxes specify function the step of.
Although preferred embodiments of the embodiments of the present application have been described, once a person skilled in the art knows bases
This creative concept, then additional changes and modifications can be made to these embodiments.So the following claims are intended to be interpreted as
Including preferred embodiment and all change and modification within the scope of the embodiments of the present application.
Finally, it is to be noted that, herein, relational terms such as first and second and the like be used merely to by
One entity or operation are distinguished with another entity or operation, without necessarily requiring or implying these entities or operation
Between there are any actual relationship or orders.Moreover, the terms "include", "comprise" or its any other variant meaning
Covering non-exclusive inclusion, so that process, method, article or terminal device including a series of elements not only wrap
Those elements are included, but also include other elements that are not explicitly listed, or further include for this process, method, article
Or the element that terminal device is intrinsic.In the absence of more restrictions, being wanted by what sentence "including a ..." limited
Element, it is not excluded that there is also other identical elements in process, method, article or the terminal device including the element.
A kind of mobile terminal application interface dynamic rendering intent provided herein and a kind of mobile terminal are answered above
It with interface dynamic rendering device, is described in detail, used herein principle and embodiment party of the specific case to the application
Formula is expounded, the description of the example is only used to help understand the method for the present application and its core ideas；Meanwhile it is right
In those of ordinary skill in the art, according to the thought of the application, change is had in specific embodiments and applications
Place, in conclusion the contents of this specification should not be construed as limiting the present application.
Claims (10)
1. a kind of mobile terminal application interface dynamic rendering intent, which is characterized in that including：
According to mobile terminal application visual interface, obtains server end and correspond to the update XML file of the visual interface and make a reservation for
Adopted Script Basics library；
The update XML file is parsed according to predefined Script Basics library, generates DOM Document Object Model dom tree；
Each DOM node on the DOM Document Object Model dom tree is traversed successively；
According to the flex typesetting attributes of the DOM node, flex typesetting nodes are created by native modes, and will be corresponding pre-
If view is tied to each flex typesettings node；
The General Properties of the DOM node are parsed by the predefined Script Basics library；
According to the flex typesettings node and the analysis result of the General Properties of the DOM node, rendering generation is newer can
Visual interface.
2. according to the method described in claim 1, it is characterized in that, the General Properties of the DOM node include：Event call-back mark
Know one or more in touch, pingback attribute.
3. according to the method described in claim 2, it is characterized in that, parsing institute by the predefined Script Basics library described
After the step of stating the General Properties of DOM node, further include：
If the General Properties for being resolved to the DOM node are item Style Attributes, by the item Style Attributes data conversion
For the attribute data of the correspondence mobile terminal system platform；Wherein, wherein the item Style Attributes include：Pixel, percentage
It is therein more one or more than, the ratio of width to height.
4. according to the method described in claim 2, it is characterized in that, parsing institute by the predefined Script Basics library described
After the step of stating the General Properties of DOM node, further include：
If the General Properties for being resolved to the DOM node are touch attributes, corresponding institute is obtained according to Script Basics library is predefined
The callback events of touch attributes are stated, and the callback events are tied to the DOM node.
5. according to the method described in claim 2, it is characterized in that, parsing institute by the predefined Script Basics library described
After the step of stating the General Properties of DOM node, further include：
If the General Properties for being resolved to the DOM node are pingback attributes, according to predefined Script Basics library acquisition pair
The pingback events answered, and by the pingback event bindings to the DOM node.
6. a kind of mobile terminal application interface dynamic rendering device, which is characterized in that described device includes：
File acquisition module, for according to mobile terminal application visual interface, obtaining server end and corresponding to the visual interface
Update XML file and predefined Script Basics library；
Parsing module, for according to the Script Basics library parsing update XML file is predefined, generating DOM Document Object Model DOM
Tree；
Attribute parsing module, for traversing each DOM node on the DOM Document Object Model dom tree successively；
Type-setting module creates flex typesetting sections for the flex typesetting attributes according to the DOM node by native modes
Point, and corresponding default view is tied to each flex typesettings node；
General Properties parsing module, the General Properties for parsing the DOM node by the predefined Script Basics library；
Update module, for the analysis result according to the flex typesettings node and the General Properties of the DOM node, wash with watercolours
Dye generates newer visual interface.
7. device according to claim 6, which is characterized in that the General Properties of the DOM node include：Event call-back mark
Know one or more in touch, pingback attribute.
8. device according to claim 7, which is characterized in that further include：
Item Style Attributes parsing modules will if the General Properties for being resolved to the DOM node are item Style Attributes
The item Style Attributes data are converted to the attribute data of the corresponding mobile terminal system platform；Wherein, the item samples
Formula attribute includes：Pixel, percentage, the ratio of width to height are therein one or more.
9. device according to claim 7, which is characterized in that further include：
Touch attribute parsing modules, if the General Properties for being resolved to the DOM node are touch attributes, according to predetermined
Adopted Script Basics library obtains the callback events of the corresponding touch attributes, and the callback events are tied to the DOM and are saved
Point.
10. device according to claim 7, which is characterized in that further include：
Pingback attribute parsing modules, if the General Properties for being resolved to the DOM node are pingback attributes, root
Corresponding pingback events are obtained according to predefined Script Basics library, and the pingback event bindings to the DOM are saved
Point.
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201810059539.2A CN108415702B (en) | 2018-01-22 | 2018-01-22 | Dynamic rendering method and device for application interface of mobile terminal |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201810059539.2A CN108415702B (en) | 2018-01-22 | 2018-01-22 | Dynamic rendering method and device for application interface of mobile terminal |
Publications (2)
| Publication Number | Publication Date |
|---|---|
| CN108415702A true CN108415702A (en) | 2018-08-17 |
| CN108415702B CN108415702B (en) | 2021-05-25 |
Family
ID=63126020
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN201810059539.2A Active CN108415702B (en) | 2018-01-22 | 2018-01-22 | Dynamic rendering method and device for application interface of mobile terminal |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN108415702B (en) |
Cited By (12)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN109117230A (en) * | 2018-08-14 | 2019-01-01 | 福建网龙计算机网络信息技术有限公司 | The 1 pixel frame display methods based on retina screen, storage medium |
| CN109634598A (en) * | 2018-12-14 | 2019-04-16 | 北京字节跳动网络技术有限公司 | A kind of page display method, device, equipment and storage medium |
| CN110083426A (en) * | 2019-04-28 | 2019-08-02 | 无线生活（杭州）信息科技有限公司 | A kind of application interface rendering method and device |
| CN110825373A (en) * | 2019-10-10 | 2020-02-21 | 上海上湖信息技术有限公司 | Dynamic method and device for mobile terminal |
| CN110928772A (en) * | 2019-11-05 | 2020-03-27 | 深圳前海微众银行股份有限公司 | Test method and device |
| CN111124379A (en) * | 2019-11-25 | 2020-05-08 | 贝壳技术有限公司 | Page generation method and device, electronic equipment and storage medium |
| CN111381813A (en) * | 2018-12-28 | 2020-07-07 | 北京字节跳动网络技术有限公司 | Front-end page debugging method and device, computer equipment and storage medium |
| CN112882772A (en) * | 2021-03-24 | 2021-06-01 | 腾讯科技（深圳）有限公司 | Configuration method of application interface of mobile terminal, mobile terminal and storage medium |
| CN113642295A (en) * | 2021-08-24 | 2021-11-12 | 北京百度网讯科技有限公司 | Page layout method, page layout device and computer program product |
| CN113705176A (en) * | 2020-06-22 | 2021-11-26 | 稿定（厦门）科技有限公司 | Plane typesetting method and system |
| CN114924815A (en) * | 2022-03-31 | 2022-08-19 | 北京达佳互联信息技术有限公司 | Page rendering method and device, electronic equipment and storage medium |
| CN117369820A (en) * | 2023-09-22 | 2024-01-09 | 北京渲光科技有限公司 | Rendering flow chart generation method, device and equipment |
Citations (5)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN101334728A (en) * | 2008-07-28 | 2008-12-31 | 北京航空航天大学 | Interface creating method and platform based on XML document description |
| CN101695032A (en) * | 2009-11-02 | 2010-04-14 | 中国电信股份有限公司 | Unified web client, service configuration method and system thereof |
| US20130205282A1 (en) * | 2012-02-07 | 2013-08-08 | Microsoft Corporation | Transferring program execution from compiled code to interpreted code |
| CN105354013A (en) * | 2014-08-18 | 2016-02-24 | 阿里巴巴集团控股有限公司 | Application interface rendering method and apparatus |
| CN106371844A (en) * | 2016-08-31 | 2017-02-01 | 北京奇艺世纪科技有限公司 | Method and system for presenting webpage by native user interface assembly |
-
2018
- 2018-01-22 CN CN201810059539.2A patent/CN108415702B/en active Active
Patent Citations (5)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN101334728A (en) * | 2008-07-28 | 2008-12-31 | 北京航空航天大学 | Interface creating method and platform based on XML document description |
| CN101695032A (en) * | 2009-11-02 | 2010-04-14 | 中国电信股份有限公司 | Unified web client, service configuration method and system thereof |
| US20130205282A1 (en) * | 2012-02-07 | 2013-08-08 | Microsoft Corporation | Transferring program execution from compiled code to interpreted code |
| CN105354013A (en) * | 2014-08-18 | 2016-02-24 | 阿里巴巴集团控股有限公司 | Application interface rendering method and apparatus |
| CN106371844A (en) * | 2016-08-31 | 2017-02-01 | 北京奇艺世纪科技有限公司 | Method and system for presenting webpage by native user interface assembly |
Cited By (18)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN109117230A (en) * | 2018-08-14 | 2019-01-01 | 福建网龙计算机网络信息技术有限公司 | The 1 pixel frame display methods based on retina screen, storage medium |
| CN109634598B (en) * | 2018-12-14 | 2020-09-18 | 北京字节跳动网络技术有限公司 | Page display method, device, equipment and storage medium |
| CN109634598A (en) * | 2018-12-14 | 2019-04-16 | 北京字节跳动网络技术有限公司 | A kind of page display method, device, equipment and storage medium |
| WO2020119485A1 (en) * | 2018-12-14 | 2020-06-18 | 北京字节跳动网络技术有限公司 | Page display method and device, apparatus, and storage medium |
| CN111381813A (en) * | 2018-12-28 | 2020-07-07 | 北京字节跳动网络技术有限公司 | Front-end page debugging method and device, computer equipment and storage medium |
| CN110083426A (en) * | 2019-04-28 | 2019-08-02 | 无线生活（杭州）信息科技有限公司 | A kind of application interface rendering method and device |
| CN110825373A (en) * | 2019-10-10 | 2020-02-21 | 上海上湖信息技术有限公司 | Dynamic method and device for mobile terminal |
| CN110825373B (en) * | 2019-10-10 | 2023-04-25 | 上海上湖信息技术有限公司 | Mobile terminal dynamic method and device |
| CN110928772A (en) * | 2019-11-05 | 2020-03-27 | 深圳前海微众银行股份有限公司 | Test method and device |
| CN110928772B (en) * | 2019-11-05 | 2022-03-08 | 深圳前海微众银行股份有限公司 | Test method and device |
| CN111124379A (en) * | 2019-11-25 | 2020-05-08 | 贝壳技术有限公司 | Page generation method and device, electronic equipment and storage medium |
| CN113705176A (en) * | 2020-06-22 | 2021-11-26 | 稿定（厦门）科技有限公司 | Plane typesetting method and system |
| CN112882772A (en) * | 2021-03-24 | 2021-06-01 | 腾讯科技（深圳）有限公司 | Configuration method of application interface of mobile terminal, mobile terminal and storage medium |
| CN113642295A (en) * | 2021-08-24 | 2021-11-12 | 北京百度网讯科技有限公司 | Page layout method, page layout device and computer program product |
| CN113642295B (en) * | 2021-08-24 | 2023-10-20 | 北京百度网讯科技有限公司 | Page typesetting method, device and computer program product |
| CN114924815A (en) * | 2022-03-31 | 2022-08-19 | 北京达佳互联信息技术有限公司 | Page rendering method and device, electronic equipment and storage medium |
| CN117369820A (en) * | 2023-09-22 | 2024-01-09 | 北京渲光科技有限公司 | Rendering flow chart generation method, device and equipment |
| CN117369820B (en) * | 2023-09-22 | 2024-04-02 | 北京渲光科技有限公司 | Rendering flow chart generation method, device and equipment |
Also Published As
| Publication number | Publication date |
|---|---|
| CN108415702B (en) | 2021-05-25 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CN108415702A (en) | A kind of mobile terminal application interface dynamic rendering intent and device | |
| CN108279932B (en) | Method and device for dynamically configuring user interface of mobile terminal | |
| EP3172680B1 (en) | Fast rendering of websites containing dynamic content and stale content | |
| CN105069118B (en) | A kind of application scenarios management method and system based on GIS configurations | |
| US9158745B2 (en) | Optimization of media content using generated intermediate media content | |
| US8756489B2 (en) | Method and system for dynamic assembly of form fragments | |
| CN108572819A (en) | Method for updating pages, device, terminal and computer readable storage medium | |
| CN108390773A (en) | A kind of method and apparatus of dynamic routing for scaffold | |
| CN104714982A (en) | Method and system for loading webpage | |
| CN110109659A (en) | A kind of system that realizing front end applications scaffold and server | |
| CN104850602A (en) | Method and apparatus for rendering and refreshing based on Internet webpage | |
| CN105700925A (en) | APP interface implementation method and apparatus | |
| US10372812B2 (en) | Combining aspects of a template into multiple web pages | |
| Linaje et al. | A method for model based design of rich internet application interactive user interfaces | |
| CN113032708A (en) | Code-free Web development system | |
| CN110941428B (en) | Website creation method and device | |
| CN109683978A (en) | A kind of method, apparatus and electronic equipment of the rendering of streaming layout interface | |
| CN102622376A (en) | Method and equipment used for merging cascading style sheet files | |
| CN105989126B (en) | A kind of Webpage display process and device | |
| CN112818277A (en) | Webpage generation method and device, storage medium and electronic equipment | |
| CN105574114A (en) | On-line plotting method based on telecom resource management standard control library | |
| CN111309424B (en) | Page restoration method and related equipment | |
| CN110807162A (en) | Method and device for loading occupation bitmap | |
| CN101799752B (en) | Method and system for positioning HTML page control variations | |
| CN104598554A (en) | Webpage page loading method and device |
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 |