CN110020307A - A kind of method for drafting and device of client's end-view - Google Patents

A kind of method for drafting and device of client's end-view Download PDF

Info

Publication number
CN110020307A
CN110020307A CN201711244446.9A CN201711244446A CN110020307A CN 110020307 A CN110020307 A CN 110020307A CN 201711244446 A CN201711244446 A CN 201711244446A CN 110020307 A CN110020307 A CN 110020307A
Authority
CN
China
Prior art keywords
component
data
template
service component
target
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
Application number
CN201711244446.9A
Other languages
Chinese (zh)
Other versions
CN110020307B (en
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.)
Alibaba Group Holding Ltd
Original Assignee
Alibaba Group Holding 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 Alibaba Group Holding Ltd filed Critical Alibaba Group Holding Ltd
Priority to CN201711244446.9A priority Critical patent/CN110020307B/en
Publication of CN110020307A publication Critical patent/CN110020307A/en
Application granted granted Critical
Publication of CN110020307B publication Critical patent/CN110020307B/en
Active legal-status Critical Current
Anticipated expiration legal-status Critical

Links

Classifications

    • GPHYSICS
    • G06COMPUTING; CALCULATING OR COUNTING
    • G06FELECTRIC DIGITAL DATA PROCESSING
    • G06F16/00Information retrieval; Database structures therefor; File system structures therefor
    • G06F16/90Details of database functions independent of the retrieved data types
    • G06F16/95Retrieval from the web
    • G06F16/955Retrieval from the web using information identifiers, e.g. uniform resource locators [URL]
    • GPHYSICS
    • G06COMPUTING; CALCULATING OR COUNTING
    • G06FELECTRIC DIGITAL DATA PROCESSING
    • G06F16/00Information retrieval; Database structures therefor; File system structures therefor
    • G06F16/90Details of database functions independent of the retrieved data types
    • G06F16/95Retrieval from the web
    • G06F16/957Browsing optimisation, e.g. caching or content distillation
    • G06F16/9577Optimising the visualization of content, e.g. distillation of HTML documents

Abstract

The embodiment of the present application provides the method for drafting and device of a kind of client's end-view, which comprises obtains Service Component template, the Service Component template includes primary template data;It is target data by the primary template data compilation;The target data is parsed, to obtain corresponding target template data;According to the target template data, Service Component is created;Obtain the business datum for matching the Service Component;The business datum is tied in the Service Component.The rendering process that the present embodiment is defined and arranged by standardized model, each infrastructure component can be developed individually, and can be freely combined after exploitation finishes, and complicated view is built as playing with building blocks, has extremely strong versatility.

Description

A kind of method for drafting and device of client's end-view
Technical field
This application involves field of computer technology, method for drafting and a kind of client more particularly to a kind of client's end-view The drawing apparatus of end-view.
Background technique
The development of e-commerce technology changes people's lives and consumption habit, and more and more users have been accustomed to leading to Network is crossed to be consumed, done shopping.User can buy goods in electric business website, pay off payment for goods by e-payment means, so The commodity chosen can be waited to be sent in family afterwards.
Currently, user carries out shopping online can be realized by the electric business class APP on PC or mobile terminal.With electric business class For APP, the developer of electric business website is frequently necessary to adjust the interface view of APP according to some provisional demands It is whole.But traditional interface development technology can only could update interface view when issuing APP new version, for The application of publication can not carry out dynamic change at all.In view of the above-mentioned problems, developer starts to be considered as the progress of Html5 standard The exploitation of the page.However, Html5 too heavyweight for some scenes.For example, sometimes may only need to the page Some regional area be updated, and full page is not to be developed completely using HTML5.Even if being opened using Html5 Full page is sent out, from the point of view of current effect, performance and user experience remain on poor.
In order to solve various deficiencies of the Htnl5 on mobile terminals in the development process of APP, part electric business class APP-example Such as, day cat (Tmall) client-provides the technological frame of Tangram a kind of in its development plan to carry homepage, product The exploitation of the pages such as board page.It can accomplish the mobilism adjustment and change of page structure by Tangram.But for the page In component exploitation, Tangram technology still uses primary development scheme.Since primary component is all specific according to platform For agreement come what is realized, each primary component contains the information of a large amount of general realization.For generalization conceptual design, such as Text component needs to consider font, multilingual, Emoji, from left to right arrangement or the text from the right several scenes such as arrangement of turning left Word shows that each component instance will also occupy many spaces in memory.In addition, being contained built in each primary component a large amount of Logic will necessarily bring a large amount of expenses in the process of running, but wherein most logic, for product scene, being need not It wants.
Summary of the invention
In view of the above problems, it proposes the embodiment of the present application and overcomes the above problem or at least partly in order to provide one kind A kind of method for drafting of the client's end-view to solve the above problems and a kind of corresponding drawing apparatus of client's end-view.
To solve the above-mentioned problems, this application discloses a kind of method for drafting of client's end-view, comprising:
Service Component template is obtained, the Service Component template includes primary template data;
It is target data by the primary template data compilation;
The target data is parsed, to obtain corresponding target template data;
According to the target template data, Service Component is created;
Obtain the business datum for matching the Service Component;
The business datum is tied in the Service Component.
To solve the above-mentioned problems, this application discloses a kind of method for drafting of client's end-view, comprising:
When receiving the instruction for drawing client's end-view, the size of each Service Component is determined;
According to the size of each Service Component, arrange to each Service Component;
Each Service Component after arrangement is drawn.
To solve the above-mentioned problems, this application discloses a kind of drawing apparatus of client's end-view, comprising:
Service Component template obtains module, and for obtaining Service Component template, the Service Component template includes original mould Plate data;
Primary template data compilation module, for being target data by the primary template data compilation;
Target data parsing module, for being parsed to the target data, to obtain corresponding target template data;
Service Component creation module, for creating Service Component according to the target template data;
Business datum obtains module, for obtaining the business datum for matching the Service Component;
Business datum binding module, for the business datum to be tied in the Service Component.
To solve the above-mentioned problems, this application discloses a kind of drawing apparatus of client's end-view, comprising:
Size determining module, for determining each Service Component when receiving the instruction for drawing client's end-view Size;
Service Component arrangement module, for the size according to each Service Component, to each service groups Part is arranged;
Service Component drafting module, for being drawn to each Service Component after arrangement.
Compared with the background art, the embodiment of the present application includes the following advantages:
The embodiment of the present application, the rendering process for defining and arranging by standardized model, each infrastructure component can It individually to develop, and can be freely combined after exploitation finishes, complicated view is built as playing with building blocks, has pole Strong versatility.Business side, which does not have to use again when in use, writes primary customized View or the drawing view on Canvas Mode create Service Component.Even if when encountering built-in infrastructure component and being unsatisfactory for corresponding business scenario, also only Need the infrastructure component new according to protocol development, and the infrastructure component developed also is capable of providing and makes to other business sides With solving the problems, such as in the prior art by directly not having versatility using Canvas drawing view.
Second, scheme provided by the embodiments of the present application can not only be realized in Android platform, also can on iOS platform It is enough to realize, and can guarantee consistent with both ends on iOS platform in Android platform, it is opened for subsequent richer component architecture Hair lays the foundation.Moreover, this programme also needs not rely on any special facility, it can be direct in any application program Use, solve the creation set up in the prior art using Open Framework Litho can only be realized in Android platform and The problem of a large amount of peripheral facilities of corresponding manufacturer's system must be relied on.
Third is based on scheme provided by the embodiments of the present application, can develop a whole set of complete component architecture.At built-in group The use of part, when building of Service Component, without going to realize by way of writing code, but can be directly in XML template In use they, then using specific tool by template compiling, finally use when parse component instance in turn simultaneously Final rendering comes out.In the whole process, it can be detached from the limitation of code when the use of business side, can be opened without writing code also A new Service Component is issued, solves and no matter requires to write when creating Service Component using which kind of scheme in the prior art The problem of code, improves the efficiency of Service Component exploitation.
4th, in the embodiment of the present application, template can be write using familiar XML, client exploitation is come Say no threshold, it is only necessary to be familiar with the use of installed with built-in component.In exploitation, study Lua language is not needed, does not need to learn yet Practise JS.Although JS gets up to be easy to, solution development Service Component provided by the embodiments of the present application is used, even JS can not Be familiar with.
5th, scheme provided by the embodiments of the present application is all to develop Service Component according to lightweight, small and fast principle, is not had There are frame, the resolver etc. for introducing heavyweight, it can be closest to primary code development, relative to schemes such as Weex or Html5 With better assembly property.
Detailed description of the invention
Fig. 1 is a kind of structural block diagram of component architecture of the application;
Fig. 2 is a kind of overall architecture schematic diagram of component architecture of the application;
Fig. 3 is a kind of step flow chart of the method for drafting embodiment one of client's end-view of the application;
Fig. 4 is a kind of operation timing diagram of the method for drafting embodiment one of client's end-view of the application;
Fig. 5 is a kind of flow chart of compiling primary template data of the application;
Fig. 6 is the schematic diagram of the component template file format after a kind of serializing of the application;
Fig. 7 is a kind of flow chart of parsing target data of the application;
Fig. 8 is a kind of flow chart of creation Service Component of the application;
Fig. 9 is a kind of flow chart of binding business datum of the application;
Figure 10 is a kind of step flow chart of the method for drafting embodiment two of client's end-view of the application;
Figure 11 is a kind of level schematic diagram of Service Component of the application;
Figure 12 is the operation timing diagram of Service Component shown in a kind of drafting Figure 11 of the application;
Figure 13 is a kind of structural block diagram of the drawing apparatus embodiment one of client's end-view of the application;
Figure 14 is a kind of structural block diagram of the drawing apparatus embodiment two of client's end-view of the application.
Specific embodiment
In order to make the above objects, features, and advantages of the present application more apparent, with reference to the accompanying drawing and it is specific real Applying mode, the present application will be further described in detail.
To make those skilled in the art more fully understand the application, first to this application involves technical term make one and say It is bright:
Infrastructure component: also referred to as base view component, is the visual elements on client application interface.For example, literary Sheet, picture, lines etc..
Container assemblies: being responsible for the container that is laid out to base view component on client application interface, it can be with Comprising container assemblies or base view component, and daughter element can be allowed according to certain way alignment placement.
Primary component: in each view framework platform, above-mentioned base view component and container assemblies are both provided.It Be to have respective realization class under each platform, have and specific realize agreement and specification.In Android iOS platform On, usual Components Development is by writing Java code or Objective-c code development.They issue it in client It can not generally modify on line afterwards, released version, the component developed in this way can only be called primary component again.
Dynamic assembly: relative to primary component, developing by other means, and also can be carried out after client publication The component of modification.For example, using Html5, Weex or the component of solution development provided by the present application, referred to as dynamic assembly.
Virtualisation component: in addition to using primary component creation view, general platform all provides a kind of utilization Canvas drafting The function at interface.In scheme provided by the present application, introduce it is a kind of calculate size agreement, define size calculate, layout, The specification of three processes is drawn, and then draws interface on Canvas.The base view component that creates in this way or Container assemblies are known as virtualisation component.Virtualisation component need to only rely on a primary container assemblies as host's container, and can The displaying of other virtualisation components of load-bearing.
Electric hybrid module: they are used in mixed way, by following common agreement so that former by primary component and virtualisation component Include virtualisation component in raw component, includes primary component in virtualisation component, be known as using the component that such mode creates Electric hybrid module.
LuaView: a kind of cross-platform moving boundary developing instrument of open source writes interface as script preview by Lua And logic, final rendering go out the interface Native, can support the operating systems such as iOS and Android.
Weex: a kind of cross-platform Mobile Development tool of open source can take into account performance and dynamic, make mobile Development person logical It crosses simple and direct front end grammer and writes out the performance experience of Native rank, and the multiterminal portion such as support iOS, Android, YunOS and Web Administration.
ReactNative: a kind of cross-platform Mobile Development frame of open source, it is similar with Weex, it is write using front end grammer Interface simultaneously renders the interface Native, can support the operating systems such as iOS and Android.
Html: hypertext markup language, a kind of document format for creating webpage.
Tangram: a kind of scheme at the mobilism creation interface used in cell phone client describes the page by data Structure and comprising component type, then dynamic creation page-out structure, example dissolve the object of component, thus generate one Open the complete page.
Serializing: in this application, refer to the data of text type through certain protocol conversion into binary data Process.
In electric business class product, provisional demand adjustment is often encountered, to be carried out for these adjustment very much Change is all the change in interface view.But traditional interface development technology can only go to update when issuing new version Interface view can not carry out dynamic change for issued application.In order to solve the problems, such as that mobilism, performance, industry are opened The exploitation begun using the development scheme progress interface view based on virtualisation component.
For example, directly using Canvas drawing view for virtualisation component.It must be according to specific field but directly draw The service logic of scape customization realizes do not have versatility so that each scene require to write code development size calculate, layout The logics such as position calculating.Moreover, in this way, the exploitation for electric hybrid module also can only directly will be empty according to business scenario Quasi-ization component and primary component are put into a primary container view, are stacked to together.Which not only adds layout hierarchies, together When also do not have versatility.
For another example, there is foreign vendor to increase income a set of frame Litho (https: //fblitho.com/), define Mount And Layout.Wherein, Mount can be used to the creation of specification component, can exist including conventional primary component and directly The Drawable object drawn on Canvas;Layout can be used to be laid out.But there is following deficiency in Litho: first is that should Scheme can only be realized in Android platform, can not use on iOS platform;Second is that a large amount of peripheral facilities that the program relies on Dependent on the structure system that the manufacturer has by oneself, it is required to rely on the infrastructure of the manufacturer, nothing from operation links are compiled into Method directly uses in other products;Third is that the program needs to write code when creating Service Component, can not dynamically update.
On the other hand, the interface view exploitation carried out based on the existing moving boundary developing instrument of industry, although can be real Now certain dynamic modification, but it still has certain limitation.
For example, Luaview.Luaview is the sets of plan that Android, iOS mobilism are realized using Lua scripting language, It includes the main modulars such as Lua virtual machine, script management module, safety control module, UI core library, non-UI core library.Wherein, Virtual machine module, which is used to explain, executes Lua script;Script management module is used to decompress, encrypt, verifying the functions such as script;Safety Control module is used to verify the integrality of script and safety;UI core library is used to construct the basic UI control on each platform Part, such as Button, Label, Image etc.;Non- UI core library is used to that the infrastructure on each platform, such as Http is called to ask It asks, the parsing of Json data, access audio A udio etc..Lua script is write on these infrastructure by business side, is transported by sdk It travels far and wide and generates interface originally.Script can dynamically update, and the interface of exploitation can also dynamically update.Luaview can be done entirely Interface can also only make a component.But Luaview is to have built new explanation on existing platform framework basis Execution level necessarily has additional performance loss;Moreover, Lua language carries out interface view with respect to unexpected winner, using Luaview When exploitation, developer needs additional studies Lua language ability to get started.
For another example, Weex.Weex is other than it can be deployed in and run on Android and iOS, moreover it is possible to run on a web browser. Weex mainly contains conversion module, JS running environment, the big component part of rendering module three.Developer can be as writing Web The page equally writes the page of an App, is then compiled into one section of JavaScript code by conversion module, forms Weex A JS bundle.Beyond the clouds, developer can dispose the JS bundle of generation get on, then by network request or The mode issued in advance is transmitted to the mobile application client of user.In mobile application client, what a WeexSDK can prepare JavaScript engine, and corresponding JS bundle is executed when user opens a Weex page, and in the process of implementation Generate interface rendering or data storage, network communication, calling functions of the equipments, user that various orders are sent to the progress of the end Native The scene of the mobile applications such as interaction response is practiced.Meanwhile if user is fitted without mobile application, he still can be in browser In open an identical Web page, this page is using identical page source code, by browser What JavaScript engine behaved.But Weex is not intended to solve the problems, such as the experience of pure Native exploitation, nor The a whole set of mobile application developed centered on itself.Therefore, it in many important pages, can not also be replaced with Weex Native exploitation.If the Native page some local use Weex technology carrys out developer component, also can not maximumlly play The advantage of Weex.Because each component can need a Weex example to run, have very to page sliding and loading velocity It is big to influence.
For another example, ReactNative.ReactNative can be also deployed on Android, iOS and browser.It also includes One JS running environment, JS-Native communication module, Dom management module and a series of infrastructure such as picture load mould Block, network request modules, tool model etc..When in use, developer is also to develop page assembly by writing JS code, ReactNative frame goes out Native component by executing the dynamic creation of JS code, and is realized by JS-Native communication module JS layers of the two and Native layers of method call, message transmission.But as Weex, ReactNative can not also be replaced Native develops the page.Performance and body if, come developer component, also will affect overall page using ReactNative It tests.
Therefore, based on above-mentioned analysis, propose one of the core concepts of the embodiments of the present application is that, pass through virtualization group Part, the application have redefined a kind of virtual text component perhaps lines or virtualization container assemblies, largely need not simplify The logic wanted.Developer can customize function according to respective demand, and can reduce a large amount of unnecessary expenses.Meanwhile this Virtualisation component is all plotted on the Canvas of host's container by application, so that only one is primary for the interface view finally generated Component, the level of nesting also only have one layer of structure, thus can be more when will set up and submit to the drafting of system display module Rapidly and efficiently.In addition, being based on virtual component system, the application can also build the module of mobilism adjustment interface view, make Overall performance when obtaining interface development is better than using Weex or the assembly property in html5 standard development.
The embodiment of the present application provides a kind of component architecture.In order to make it easy to understand, first to the component of the embodiment of the present application System is described.
Referring to Fig.1, a kind of structural block diagram of component architecture of the application is shown, wherein IView defines protocol interface, Including three processes:
ComMeasure/onComMeasure: size calculates;
ComLayout/onComLayout: size layout;And
ComDraw/onComDraw: component view is drawn.
When drafting of the client in progress Service Component, above-mentioned several processes can be called respectively.
In Fig. 1, the primary attribute of ViewBase definitions component;Virtual component is all inherited from VirtualViewBase, empty Quasi- container assemblies are all inherited from VirtualLayoutBase, and primary component then can be according to agreement provided by the embodiments of the present application It is packaged, this encapsulation needs to be inherited from NativeViewBase.
In this way, virtual component and primary component have common external interface.When client is drawn, no matter virtualization group Part or primary component can be called by the way of general, built Service Component for hybrid mode and provided possibility Property.
In Fig. 1, each leaf node can be some built-in infrastructure components defined, such as VirtualViewBase group Part, VirtualText component, VirtualImage component, VirtualLine component etc..Certainly, it is only necessary to according to this programme Protocol extension, it can derive other kinds of component.
In the embodiment of the present application, built-in infrastructure component may include following one or more:
It is virtual text component, primary text component, virtual picture component, primary picture component, dummy line bar assembly, primary Lines component, virtual progress bar assembly, virtual pattern component, primary page turning layout container component, primary rolling layout container group Part, virtual frames layout container component, virtual proportional arrangement's container assemblies, virtual grid layout container component, primary grid layout Container assemblies, virtual linear layout container component, primary linear placement's container assemblies.
Further, referring to Fig. 2, a kind of overall architecture schematic diagram of component architecture of the application is shown.In integrated stand It include mainly three levels, bottom is the library UI and simple expression formula engine based on virtual component technology in structure.Component architecture By the agency of mistake, resource loader be exactly in the template data after compiling according to agreement load data and restore construct it is above-mentioned Component instance.
Expression formula engine is mainly responsible for the acquisition and simple logical operation of data, can make there are two types of the expression formula of type With another then be simple logical expression one is simple data binding expression.
Wherein, the scene of data binding expression is such that when developing Service Component, and the basis of UI element belongs to Property or pattern tend not to directly to write in template dead, but need to obtain in data, be tied up so introducing user data Fixed expression formula, access (accessing the expression formula of data attribute) and ternary operator including object properties.
The expression formula for accessing data attribute is standardized based on standard Java bean, and the attribute of object, language are accessed by expression formula Terminated in method with $ { beginning, with }.For POJO and Map, can be accessed by operator (dot operator), for Array or List can then be accessed by [] operator.
It should be noted that the application is to refer to the specification of Java Bean access in design specification, in common Java This set specification is realized in code, the type for distinguishing access object is exactly to judge by type.In the embodiment of the present application, due to visiting What is asked is json data, and json data also have json object, point of json array, as long as also judging the type of object i.e. in fact It can.Therefore, when writing expression formula, user is the structural information for the data object for knowing that he is handled first, so according to This structural information can get data to write expression formula.
As follows, be the application a kind of access data attribute expression formula example:
class Person{String name;Public Person () { name=" jack ";}}List<Object> List=new ArrayList<Object>();list.add("person",new Person());list.add(" url2");Map<String, Object>data=new HashMap<String, Object>();data.put("list", list);data.put("logo","https://gw.alicdn.com/tps/TB1wwiKKV.png");
${logo}:https://gw.alicdn.com/tps/TB1wwiKKV.png
${list[0].name}:jack
{"ID":null,"name":"Doe","first-name":"John","age":25,"hobbies":[" reading","cinema",{"sports":["volley-ball","badminton"]}],"address":{}}
${first-name}:John
${hobbies[0]}:reading
${hobbies[2].sports[0]:volley-ball
And ternary operator is then for needing according to certain field in data to those come the attribute of setting value.For example, When there are titleColor field, the color that text can be set is the specified value of titleColor, otherwise using silent The black recognized.Grammatically, ternary operator is terminated with@{ beginning, with }, and middle section is the particular content of expression formula.
Conditional expression? result expression [1]: result expression [2]
When conditional expression is set up, using result expression [1], otherwise result expression [2] are used.
Wherein, conditional expression can support Boolean type, character string type, JSONObject, JSONArray etc..
As a kind of example of the application, following scene is false:
Boolean Class offset is false;
Character string is null or " " or " null ";
Character string " false " or " FALSE ";
JSONObject is empty or JSONObject.NULL;
JSONArray length is 0;
Field is not present.
As follows, be the application a kind of ternary operator expression formula example:
@{ $ { logoUrl }? visible:invisible }
@{ $ { titleColor }? $ { titleColor }: black }
Different from date expression, logical expression has more powerful ability.It is able to carry out arithmetical operation, logic fortune Calculation, conditional statement, function call etc..The attribute of the accessible infrastructure component of logical expression and update, realize some linkages Effect.
Grammatically, logical expression is generally write in the event triggering attribute of infrastructure component with $ { beginning, with } ending. For example, clicking event onClick, page turning event onPageFlip etc., one section of logic is executed when event triggering.
In the embodiment of the present application, the keyword including following several access infrastructure component elements:
This: the infrastructure component object that current triggering logical expression executes;
Parent: the father node for the infrastructure component object that current triggering logical expression executes;
Ancestor: all superior nodes for the infrastructure component object that current triggering logical expression executes, including father's section Point;
Siblings: the brotgher of node for the infrastructure component object that current triggering logical expression executes;
Data: data object bound in the infrastructure component that current triggering logical expression executes.
As a kind of example of the application, onPageFlip=" $ is write in the event that page turning component rolls { this.parent.title.textColor=data.color [this.curPos] } ", indicate page turning each time when It waits, finds a component of entitled title under father node, its text color is updated, color value is derived from data Color array, index are the index positions that current page turning stops.
It is and common it should be noted that the expression formula resource write in template, can be come out by $ { } keyword recognition Character string do different processing.In the concrete realization, it can be saved by them by the parsing segmentation such as .=[] keywords To in independent expression formula resource-area.It, can be from table when application program, which parses, encounters expression formula in entire component process Information is obtained in up to formula resource pool, gradually accesses corresponding resource according to expression formula description, gradually finds entire expression formula expectation Afterbody node be directed toward resource.If centre, which has mistake or discovery, can not find, that can think the resource not In the presence of.
Based on above-mentioned underlying virtual component technology and expression formula ability, management and ability to component can be built and expanded Exhibition, in which:
Template loader is responsible for the template data after load compiling.For example, being loaded from file load, from binary array. Binary templates data are mainly loaded into memory by it, extract resource therein.Such as string resource, expression formula money The construction of component is not done in source.
Container Management is responsible for constructing host's container of virtual component and the management of utilization and recycle.When original component After skidding off screen, it can be recovered in unified resource pond, so as to subsequent reuse.If pond be it is empty, in needs When construct new container.
Assembly management is responsible for carrying out component building and utilization and recycle management.After original component skids off screen, in addition to Host's container can also be recovered in unified resource pond with utilization and recycle, internal virtual component object.If component Pond be it is empty, then construct new component when needed.
Incident management, virtual component technology are mainly responsible for the mobilism creation at interface, but main to the processing of service logic Or it is realized by primary code.Therefore, in the embodiment of the present application, some common alternative events of processing component are needed.Example Such as, the click, long-pressing, touch of component, exposure event etc..Event manager module is responsible for the event handling of external each type Module registers are come in, and when specific event occurs for component, find the processing module of corresponding types to call processing.
Native object management module is similar with the function of service management module, is provided to register external function module To in the component framework of the present embodiment.Difference is that Native object module is that functional module is registered to some individual group In part, the corresponding function can be configured in component template.
For example, for the following content in template:
<XImage
Flag=" flag_clickable "
Class=" XImageBean "
Src=" $ { bgImgUrl } "
LayoutWidth=" match_parent "
LayoutHeight=" match_parent "
Visibility="@$ { bgImgUrl }? visible:gone } "/>
Class attribute specifies a Native object class to extend the ability of current XImage infrastructure component, in component It can read the value in class attribute when creation, and be finally created that example is come.XImageBean needs to realize one Interface:
// initialization
void init(Context context,ViewBase view);
// destroy release resource
void uninit();
// processing message
void doEvent(int type,int param,Object objParam);
User calls doEvent method on the specific opportunity of customized XImage component.If XImageBean's Realization is to increase by one layer of color to the frame of XImage father's container, then when having invoked the side doEvent in XImage operational process After method, it is achieved that the variation of its father's container border color.
And the overall situation uses during being then framework instance operation by the external function module that service management module is registered, no It is configured in template, code rank is needed to call.User just needs to register a circumferential work when initializing frame In energy module object to service management module.User will use external function module, it is necessary to write a customized base set Part actively goes to call acquisition functional module, can release the coupling of component framework in external function module and the present embodiment in this way.
There is the virtual component technology on basis, and its ability is extended, so that it may be used to development interface view.But it is Mobilism updates interface, it is also necessary to the ability that further encapsulation dynamic updates.So on above-mentioned two level, it is also necessary to Construct management, the updating ability of component template.
Template management module be responsible for template existing for local is stored, is updated, completeness check, version verification etc..
Template renewal module is then responsible for the version issued on the local template version of comparison and remote template management platform, so The template data of update is downloaded afterwards, and updates local data.
Data loading module is then responsible for data required for load showing interface, passes to group after component creates Part shows true business demand.
Except the environment of operation virtual component, the embodiment of the present application also provides a developing instrument, can write group The XML template of part, and template compilation tool is contained, XML is compiled into binary data.The present embodiment additionally provides a mould Board management backstage, the template data new for Online release.
Based on said modules system, the embodiment of the present application, which is introduced, develops Service Component using infrastructure component in XML, Then XML file is compiled by binary data by compilation tool, parses binary data on the client then to render Component, and support for business datum to be tied on component.During binding data, the embodiment of the present application supports simple table Binding data is dynamically obtained up to formula logic, updates view.Entire frame also supports user to register external function mould simultaneously Block promotes whole ability to inside.
Referring to Fig. 3, a kind of step flow chart of the method for drafting embodiment one of client's end-view of the application is shown, is had Body may include steps of:
Step 301, Service Component template is obtained, the Service Component template includes primary template data;
In the embodiment of the present application, it can be opened in expandable mark language XML by way of infrastructure component Sending service component.Therefore, Service Component template, which can be, passes through the XML template that tool is write in advance by Components Development personnel.
As shown in figure 4, being a kind of operation timing diagram of the method for drafting embodiment one of client's end-view of the application.In group After part developer writes XML template, the available above-mentioned XML template write in advance.
In the embodiment of the present application, Service Component template includes primary template data.It as follows, is the one of the application The example of the primary template data of kind XML template:
Certainly, according to actual needs, those skilled in the art can also write Service Component mould using extended formatting language Plate, the present embodiment are not construed as limiting this.
It step 302, is target data by the primary template data compilation;
It in the embodiment of the present application, is target data as by primary template Data Serialization by primary template data compilation For target data, target data can be binary data.
By Service Component template be XML template for, compilation process be shown in Fig. 4 by XML serialization be two into Data processed.
As shown in figure 5, being a kind of flow chart of compiling primary template data of the application.It is possible, firstly, to create file pair As.When compilation tool starts to compile Service Component template, the object of an output file can be created, is directed toward particular path. The subsequent data in compilation process can be written in this file.
It should be noted that the file object of creation may include multiple regions.For example, component area, character string area, expression Formula area, and, data field.
It is then possible to file format mark information, version number data are written in above-mentioned file object, and, Ge Gequ The footprint information in domain.
In the concrete realization, according to file format, file format mark information can be fixed as starting 5 bytes.Example Such as, ALIVV.Certainly, above-mentioned ALIVV is only a kind of example, and those skilled in the art can select other words according to actual needs As file format mark information, the present embodiment is not construed as limiting this for symbol or character string.
After file format mark information is written, back to back 6 bytes can be written into three version numbers.Wherein, key plate This number can be fixed as 1, and secondary version number can be fixed as 0, and revision number then can be in each compiling by Components Development people Member is incoming by parameter, since 1.
In the embodiment of the present application, according to file format, next 32 bytes can be respectively component area, character string Area, expression formula area, and, the initial position of data field and length.Therefore, can first occupy-place, be initialized as 0.
It is, of course, also possible to which the information such as current file page coding and its dependence are written.These information be also possible to by Components Development personnel are incoming in compiling.The page of default is encoded to 1, if there is no the page of dependence, then a part letter Breath does not take up space.
In general, a Service Component corresponds to a template.Therefore, in compiling, the industry got can be read first The primary template data being engaged in component template, and create Service Component template parser.
In the concrete realization, if Service Component template is XML template, the Service Component template parser created can be XML parser.
In the embodiment of the present application, after reading primary template data, each of primary template data can be traversed first Node.
In the concrete realization, each node of above-mentioned XML template can be traversed according to XML format by XML parser, is obtained The corresponding title of each node and multiple attributes.
In the embodiment of the present application, corresponding infrastructure component compiler can be created according to the title of each node.
In the concrete realization, a nodename can be obtained, and record node beginning label, so when beginning stepping through Afterwards according to nodename character string, corresponding infrastructure component compiler object is created.In compilation tool, each infrastructure component All have registered corresponding compiler type.The customized infrastructure component of User Exploitation, it is also desirable to customized compiler be provided and be registered to In compilation tool.Infrastructure component and corresponding compiler class can be associated by component type.
It is then possible to obtain whole attributes of each node, and using the infrastructure component compiler of above-mentioned creation to acquisition Whole attributes handled, obtain multiple attribute values.
As soon as example, the compiler processes attribute can be called often to get an attribute.Compiler knows that each attribute is answered How this is handled, because this is just determined when being defined attribute, exploitation compiler class.Each attribute can be all serialized At following 4 seed type: int integer attribute value, float floating type attribute value, string character string type attribute value, and/or, expression Formula Type Attribute value.Wherein the above two can write directly as the value after serializing return the result in, it is both rear first to turn It is changed in corresponding Hash code value hashCode writes and return the result as the value after serializing.
After having traversed whole attributes of present node, the file object being pre-created can be written into multiple attribute values In.
In the concrete realization, after present node is disposed, can be written into a node terminates to mark, and checks whether time All nodes are gone through.If handled there is also other nodes untreated node.If whole nodes have been handled Finish, then can according to integer attribute value, floating type attribute value, character string type attribute value, and/or, type expression attribute value pair Multiple attribute values are classified, and generate key-value byte arrays, format can be+4 byte value of 4 byte key index Index.Then, by the component area of above-mentioned key-value byte arrays write-in file object.
And for character string type attribute value and type expression attribute, it can be first respectively by character string type attribute value and table Corresponding Hash code value hashCode is converted to up to formula Type Attribute value, it then will be by character string type attribute value and type expression The corresponding Hash code value of attribute value is respectively written into the character string area and expression formula area of file object.
In this way, the initial position in the component area for the file object being pre-created, character string area and expression formula area is both known about, Each region of prior occupy-place can be updated.
It should be noted that if then data field can be written in growth data there are growth data.
After all writing, all data can be output to file, file suffixes can be .out.
It should be noted that a Service Component corresponds to a XML template, a template is individually compiled into binary number According to it can include all string resources that it is relied on all in addition to built-in string resource, expression formula resource.
The resource being related to when compiling, in all templates include color value, it is various enumerate, the type of infrastructure component It can be serialized Deng all and be mapped to integer, and the resource such as character string of integer cannot be serialized into, just allocate it a rope Draw id and be directed toward it, and will be in they individually storage to one piece of region.The rule of serializing can be such that
Color: 4 byte integer color values, format AARRGGBB are converted into;
It enumerates: being converted according to predefined integer, such as the type of gravity, the type etc. of orientation;
The type of infrastructure component: converting according to predefined integer, and the type of built-in infrastructure component can divide since 1 Match, Custom component can be distributed since 1000, and subsequent possible semantic chemical conversion character string type definition hides user above-mentioned Details;
Character string: integer after using hashCode value as its serializing, and string resource area establish with HashCode is the list of index, therefrom obtains original string value when parsing;
Logical expression: similar with the processing of character string.
Since primary template data are the files of one section of XML format, when it saves into file, exactly with plain text Form exists, and can include many redundancies.For example, space, line feed, the character string also repeated etc., file size It is bigger.When going parsing with XML parser, it also may require that a large amount of string operations, efficiency and performance cannot be optimal. And after compiling it into binary format, then it can be avoided these problems.For example, the character string that file repeats only retains Portion goes to quote it by community string index community, and all component types also can all be converted into a Numerical Index, in client It is interior to find corresponding class instantiation in turn by Numerical Index.In this way, file format can be very compact, volume is smaller.
As shown in fig. 6, be the application a kind of serializing after component template file format schematic diagram.Its specific lattice Formula is described as follows (effect for illustrating each section respectively according to the sequence in Fig. 6 from left to right, from top to bottom):
Start 5 bytes and is fixed as ALIVV (file format mark information);It is equivalent to a label of file format;
Version number point three, respectively major version number, secondary version number and revision number, are 2 bytes;Without great When reconstruct updates, front two is generally constant, and business-level of the third position for component changes upgrading;
The initial position in component area and length are 4 bytes;Indicate in this part of file component area data from which word Section starts, and file pointer directly can be navigated to certain bits when parsing this part of data in this way by its how many byte in total It sets to read data;
The initial position in character string area and length are 4 bytes;Indicate that string data is a from which in this part of file Byte starts, its how many byte in total;
The initial position in expression formula area and length are 4 bytes;Indicate that string data is a from which in this part of file Byte starts, its how many byte in total;
The initial position of data field and length are 4 bytes;Indicate in this part of file additional data from which byte How many start, its byte in total;
The coding of page belonging to current file, 2 bytes, one page of unique identification;
Current file rely on page number be 2 bytes, behind for rely on page id, rely on page number be greater than 0 indicate should Page has used the resource or code of other pages, is necessary to ensure that relying on page must load before this page load;
Component area starts, and Service Component number in preceding 4 byte representation files, the previous XML template of mesh is compiled into one Binary file, therefore its value is fixed as 1.The length of 2 byte representation Service Component title character strings before each Service Component, after Face is the character string byte data of designated length;Followed by component binaries stream length after the compiling of 2 bytes, behind be two Carry system code;
Character string area starts, preceding 4 byte representations character string number, can built-in some systems in the frame of the application The other string resource of irrespective of size, for example, attribute-name.These character strings do not have in serializing to binary file, and template file In the nonsystematic character string that occurs just can be as resource sequenceization to binary file.4 byte words before each string resource Accord with string indexing id i.e. its hashCode, behind 2 bytes be character string length, followed by for corresponding character string;
Logical expression code table, preceding 4 byte representations logical expression resource number, 4 before each expression formula resource The index of byte representation expression formula, it is the hashCode of expression formula original character string, behind 2 byte representation expression formulas length Degree, behind be corresponding expression formula content, it is the character string structure after expression formula is cut according to keyword;
Growth data section is to be left third party to extend use.
In the embodiment of the present application, by primary template data compilation be target data after, can also be by above-mentioned target data It is loaded onto client.
In the concrete realization, the target data after compiling being loaded onto client can be realized by two ways.Reference Fig. 4, a kind of mode, which can be, is directly bundled to target data in client, writes code load.
For example, target packet can be generated, and by pre-set code, by above-mentioned target packet according to target data It is loaded onto client.
Target data can be published to Template Manager backstage by another way, by client online updating.
For example, compiled target data can be sent to preset Template Manager platform, then passed through by client upper State Template Manager platform online updating target data.
Step 303, the target data is parsed, to obtain corresponding target template data;
Which kind of mode no matter is used to load target data, the next work of client is parsing target data.For example, Verify version number, legitimacy, read head information etc..
Timing diagram as shown in Figure 4 can be seen that the compilation phase be independently of client operation when a process, client Render component is held, is that analytically compiled binary data starts.Parsing is exactly the inverse process of compilation process in fact, but is solved Analysis process is only responsible for initial data to extract, and organizes format, there is no direct constructions to go out component object.
As shown in fig. 7, being a kind of flow chart of parsing target data of the application.It is by binary data of target data Example.It is possible, firstly, to obtain a compiled binary file object, and the binary file object is read into a byte In array.Then, whether the data verified in this document object are invalid data.
In verification, it is pre- whether the byte length and version number data that can verify the data in file object first meet If it is required that.If the byte length and version number data of the data in file object meet preset requirement, this document can be determined Data in object are not invalid data.
In the concrete realization, whether the byte length that can verify binary file first is greater than 27 bytes, then verifies out Whether 5 characters of head are ALIVV.There may be upgrading to file format due to subsequent, if major version number is different with time version, It is incompatible to may cause data.Therefore, it can reexamine whether two major version numbers and secondary version number next match.If discontented Sufficient above-mentioned condition, it is believed that be invalid data, can abandon handling;Otherwise it can start to operate in next step, determine this article respectively The initial position of data in each region of part object and byte length.
In the concrete realization, the initial position and byte length for determining the data in each region of file object can wrap It includes: determining the byte length of initial position of the data in component area in file object and the data in the component area;With/ Or,
Determine the byte of initial position of the data in character string area in file object and the data in the character string area Length;And/or
Determine the byte of initial position of the data in expression formula area in file object and the data in the expression formula area Length;And/or
Determine the byte long of initial position of the data in expansion area in file object and the data in the expansion area Degree.
For example, can be with initial position of the reading assembly area data in file, and how many a bytes are package counts in total According to;Initial position of the character string area data in file is read, and how many a bytes are string datas in total;Read expression Initial position of the formula area data in file, and how many a bytes are expression formula data in total;Expansion area data are read in text Initial position in part, and how many a bytes are growth datas in total.
After obtaining above- mentioned information, it can be obtained in each region respectively according to above-mentioned initial position and byte length Data.
In the embodiment of the present application, can be according to initial position of the data in component area in this document object, and be somebody's turn to do The byte length of data in component area, securing component name character string;And determine in the data in component area, remove component name character String is outer, the initial position of other module datas;It is then possible to read out corresponding component name according to component name character string;Into And establish the mapping relations between component name and the initial position of module data.
File pointer first can be navigated into component area in the concrete realization, according to file format, first parse component name Character string records the position that authentic component data start after having read component name;It establishes with the entitled key of component, arrives package count According to the mapping of initial position.When as long as subsequent user is passed to component name when constructing Service Component, so that it may directly find Corresponding module data further constructs component.
For the data in character string area, can according to initial position of the data in character string area in file object, and The byte length of data in the character string area obtains character string number;And according to character string number, circulation reads each character String resource, obtains community string index community;It is then possible to generate character string according to string resource;And then character string rope is established respectively Draw the mapping relations between character string.
It in the embodiment of the present application, can also will be upper after establishing the mapping relations between community string index community and character string The mapping relations between community string index community and character string are stated to store into preset string resource pond.
In the concrete realization, when starting dissection process string data, file pointer can be moved on to character string area and opened 4 bytes are first read according to file format in the position of beginning, obtain character string number;Then, according to character string number, circulation is read Each string resource.4 byte index are first read every time, regenerate character string;A character string has been read every time, can have been built Lithol guides to the mapping of character string, and remains in string resource pond.
It similarly, can be according to starting of the data in expression formula area in file object for the data in expression formula area The byte length of position and the data in the expression formula area obtains expression formula number;And according to expression formula number, circulation is read Each expression formula resource obtains expression formula index;It is then possible to generate expression formula object according to expression formula resource;And then respectively Establish the mapping relations between expression formula index and expression formula object.
It in the embodiment of the present application, can be with after the mapping relations established between expression formula index and expression formula object Above-mentioned expression formula is indexed the mapping relations between expression formula object to store into preset expression formula resource pool.
In the concrete realization, when starting to process expression formula data, file pointer can be moved on to what expression formula area started 4 bytes are first read according to file format in position, obtain expression formula number;Then, according to expression formula number, circulation reads each Expression formula resource.4 byte index are first read every time, then expression formula content is packaged into type expression structure;It has read every time One expression formula resource, can establish the mapping for indexing expression formula, and remain in expression formula resource pool.
After having handled a binary file, the process of parsing just finishes.Then step 304 can be executed, is created Service Component.
Step 304, according to the target template data, Service Component is created;
In the embodiment of the present application, it is really created that a component, needs to complete in visioning procedure.When user is passed to one A component Name, lower portion will go in the data parsed before to find the template number with this name-matches according to the title According to then constructing component.The process enlightenment of entire creation component is exactly the inverse process of compilation process.
As shown in figure 8, being a kind of flow chart of creation Service Component of the application.It is possible, firstly, to obtain industry to be created The component name of business component.The component name of Service Component to be created is the title parsed in resolution phase, otherwise be can not find Corresponding module data can not create component.The component name can be passed to by user.Therefore, client can receive user's biography The component name of the Service Component to be created entered obtains corresponding target then according to the component name of Service Component to be created Template data, and target template data are used, construct Service Component.
It in the embodiment of the present application, can be according to the component name and component name and module data of Service Component to be created Initial position between mapping relations, search corresponding module data.
In the concrete realization, original component data are found, and the module data initial position recorded before is directly fixed The place that position starts to binary file module data, preparation start to create component.
When creating Service Component, each byte that can be successively read in module data first is current when what is read When the mark information of byte is node beginning label, the node type of current byte is obtained;And according to the node class of current byte Type creates infrastructure component example;Then, the multiple attribute values being successively read in module data;For example, being successively read module data In integer attribute value, floating type attribute value, character string type attribute value, and/or, type expression attribute value;And then it can root According to key-value byte arrays, the corresponding information of multiple attribute values is sent to corresponding attribute in infrastructure component example.
In the embodiment of the present application, the corresponding information of multiple attribute values is being sent to corresponding category in infrastructure component example When property, the quantity of current property value can be determined first.If current property value is that integer attribute value or floating type attribute value recycle, Above-mentioned integer attribute value or the corresponding information of floating type attribute value can be then read from key-value byte arrays;And it will be whole Type attribute value or the corresponding information of floating type attribute value are sent to corresponding attribute in infrastructure component example.
If current property value is character string type attribute value or type expression attribute value, can according to community string index community or Expression formula index, obtains corresponding information from string resource pond or expression formula resource pool, and be sent to infrastructure component example In corresponding attribute.
In the concrete realization, enter circulation when, can first read a byte, judge the byte be node beginning label also It is that node terminates to mark.
If node beginning label, the information for just starting to process a new infrastructure component is indicated.At this point it is possible to read this The node type of byte.
It is then possible to create infrastructure component example according to node type.The mapping relations of this type and component type It is that registration in advance is good or user's registration is crossed for frame.Byte Type value and compiler class, infrastructure component after serializing Realize that class is all one-to-one.If existing infrastructure component node created, illustrates there is father's container to current new node, It pop down can be done to keep in.
After creating infrastructure component example, layout parameter object can be set for the infrastructure component example, it is related to layout Parameter information finally can be transmitted to this layout parameter object.
It is then possible to according to int integer, float floating type, string character string, type expression these four attributes Sequence starts to read four attribute.It is every to read a type of attribute, a partial circulating can be entered.That is: such is first read The quantity of the value of type attribute;The value of key, value therein are read in recycling, and according to file format, the value of key, value are all Nybble;Then according to the key value of attribute, corresponding value value is transmitted to corresponding attribute in infrastructure component example.If touched Attribute to character string type perhaps type expression then can remove the character string pond or the table that construct in resolving by indexing Specific object, which is read out, in up to formula pond is transmitted to infrastructure component example.
After having handled all properties, can continue to read next byte, judge the byte be node beginning label or Node terminates to mark.
It in the embodiment of the present application, can be first when the mark information of the current byte read is that node terminates label First it is confirmed whether the infrastructure component node created there are last time.
When the infrastructure component node created there are last time, can continue determine last time creation infrastructure component node whether For Container Type;If so, present node can be added in the infrastructure component node of last time creation;If it is not, then terminating to work as The creation of preceding Service Component;
When there is no the infrastructure component node of last time creation, the creation of current Service Component can also be terminated.
In the concrete realization, when the mark information of the current byte read is that node terminates label, illustrate to work as prosthomere Point is the sub-stage of last time creation node, needs to check whether the last time node of creation is Container Type.
Due to non-vessel base component nodes cannot other nested infrastructure component nodes, when the node of last time creation When not being Container Type, entire component creation failure.
When the node of last time creation is Container Type, present node can be added in father's container node, last time is temporary The father's container node deposited is popped.
So far, the creation of Service Component is just completed.
Step 305, the business datum for matching the Service Component is obtained;
In the embodiment of the present application, business datum can be the data of json format, which can be by Components Development What personnel were passed to.
It is write extremely in general, the attribute of infrastructure component tends not to static state, needs dynamically to be arranged according to data.Therefore template In support write a kind of simple data binding expression, etc. data reach when, it is accessible by the definition in expression formula True value is in data to be arranged to the attribute of component.
It, will be by the key of the attribute, expression when parsing attribute encounters expression formula during creating component The relationships such as formula value, affiliated infrastructure component store, and true data are tied to base again after waiting true data to reach On the attribute of plinth component.
The attribute value obtained by expression parsing, access, can be cached.When initial data is quoted it is constant when It waits, access can all get cache size every time.If data referencing is constant, but content becomes, it is desirable to updated data are bound, That can increase field _ flag_invalidate_:true in data, and expression needs to update cache contents.
Step 306, the business datum is tied in the Service Component.
In the embodiment of the present application, it when carrying out the binding of business datum, can determine in Service Component wait bind first The infrastructure component of data, then determine to the current attribute in the infrastructure component of binding data to binding data, and then judge from Whether the target value of current attribute can be got in caching, and above-mentioned caching can be obtained by the parsing to the current attribute. If so, above-mentioned target value can be assigned to the corresponding attribute of infrastructure component example according to the type of current attribute;If it is not, The target value and caching for then needing to obtain current attribute from business datum, then could be assigned to base set for above-mentioned target value The corresponding attribute of part example.
It should be noted that can also determine in current attribute whether include to clear determining after the attribute bound Cache tag is managed, if so, the data value caching in current attribute can be cleared up;If it is not, can then return to execution judgement postpones The step of whether target value of current attribute can be got in depositing.
As shown in figure 9, being a kind of flow chart of binding business datum of the application.In the concrete realization, for an industry Be engaged in component, can get first it institute treasured row infrastructure component list.When starting the cycle over, each infrastructure component is examined successively Whether binding data is needed.If not needing the infrastructure component of binding data, terminate current process;Otherwise start business number According to binding process.
When there is the infrastructure component for needing binding data, the attribute of binding data is needed in the available infrastructure component List, the list can be created and be saved therewith during creating Service Component.
When starting the cycle over each attribute of processing, the mark for whether having cleaning to cache in initial data can be first checked for Note.If so, may be cached by the data value that expression formula obtained before can cleaning up;It otherwise, can be from caching In obtain before may obtain true content by expression parsing.
After obtaining cache size, category corresponding to infrastructure component example can be arranged in true value according to attribute type Property, then handle next attribute.
It, can be according to the logic of the syntactic definition of expression formula and access data, from original if failing to obtain cache size True content is obtained in data, and caches the value got, so as to secondary use.
After the binding of finishing service data, the drafting of component view is also just completed.Referring to timing diagram shown in Fig. 2, After the binding of finishing service data, above-mentioned Service Component can be showed in the client.
In the embodiment of the present application, the rendering process for defining and arranging by standardized model, each infrastructure component It can individually develop, and can be freely combined after exploitation finishes, complicated view, tool are built as playing with building blocks Standby extremely strong versatility.Business side, which does not have to use again when in use, to be write primary customized View or draws on Canvas The mode of view creates Service Component.Even if when encountering built-in infrastructure component and being unsatisfactory for corresponding business scenario, Also the infrastructure component new according to protocol development is only needed, and the infrastructure component developed also is capable of providing and gives other business Side uses.
Second, scheme provided by the embodiments of the present application can not only be realized in Android platform, also can on iOS platform It is enough to realize, and can guarantee consistent with both ends on iOS platform in Android platform, it is opened for subsequent richer component architecture Hair lays the foundation.Moreover, this programme also needs not rely on any special facility, it can be direct in any application program It uses.
Third is based on scheme provided by the embodiments of the present application, can develop a whole set of complete component architecture.At built-in group The use of part, when building of Service Component, without going to realize by way of writing code, but can be directly in XML template In use they, then using specific tool by template compiling, finally use when parse component instance in turn simultaneously Final rendering comes out.In the whole process, it can be detached from the limitation of code when the use of business side, can be opened without writing code also A new Service Component is issued, the efficiency of Service Component exploitation is improved.
4th, in the embodiment of the present application, template can be write using familiar XML, client exploitation is come Say no threshold, it is only necessary to be familiar with the use of installed with built-in component.In exploitation, study Lua language is not needed, does not need to learn yet Practise JS.Although JS gets up to be easy to, solution development Service Component provided by the embodiments of the present application is used, even JS can not Be familiar with.
5th, scheme provided by the embodiments of the present application is all to develop Service Component according to lightweight, small and fast principle, is not had There are frame, the resolver etc. for introducing heavyweight, there can be excellent assembly property closest to primary code development.
Referring to Fig.1 0, a kind of step flow chart of the method for drafting embodiment two of client's end-view of the application is shown, It can specifically include following steps:
Step 1001, when receiving the instruction for drawing client's end-view, the size of each Service Component is determined;
In the embodiment of the present application, the size of each Service Component can be obtained by the attribute of each Service Component ?.
In the component architecture of the embodiment of the present application, ViewBase is the definition of entire component model.It defines one Essential attribute of component, including id, wide height, inset spacing, outer back gauge etc..
As shown in Table 1, be the embodiment of the present application a kind of Service Component attribute example.
Table one: the attribute of Service Component
Wide, the high size that these attributes are mainly used to control assembly calculates, and typesetting positions when layout, and there are also one A little simple patterns.For example, layoutWidth and layoutHeight respectively define the width of component, height, it be can be specifically Numerical value, such as 100, be also possible to a quantitative description.Match_parent and wrap_content is from android system Primary layout system in introduce, the width of the former current component will fully support the given width of father's container, and the latter indicates to work as The width of front assembly will determine that this behavior is consistent with the performance of android system according to the size of own content.
In the embodiment of the present application, when receiving the instruction for drawing client's end-view, host's container can be determined respectively Component, virtual container component, and/or, the size constraint of infrastructure component, then according to host's container assemblies and virtual container The size constraint of component determines the size of host's container assemblies and virtual container component, and according to virtual container group The size of part and the size constraint of infrastructure component, determine the size of each infrastructure component.
When drawing client end interface view, the stage for thering is a size to calculate, from root node place when size calculates Primary tank starts, and level-one level-one transmits calculating down, and calculated result back transfer is returned, and final host container knows whole width It is high.
By taking width calculates as an example, during the transmitting of this level-one level-one, father's container can provide one it is current usable Maximum width value, and a constraint condition is provided (e.g., clearly using the width value, maximum no more than width value, any width Degree), the maximum width value and constraint condition that sub-component is given according to father's container, in conjunction in oneself layoutWidth value and from Body content calculates final width.AutoDimX, autoDimY, autoDimDirection are the width that the present embodiment introduces For height than computation attribute, its priority is higher, can cover the calculated result of layoutWidth and layoutHeight, specifically contain Justice can refer to above-mentioned table one.Remaining attribute, relevant to padding is the inset spacing of component, and margin relevant is group The outer back gauge of part, it is high that they can all influence position and width of the component in screen.
Step 1002, it according to the size of each Service Component, arranges to each Service Component;
It in the embodiment of the present application, can be according to determining size, to virtual container group in host's container assemblies Part and infrastructure component are arranged.
In the concrete realization, layout stage is mainly that upon goes to arrange according to layout specification.For example, linear placement, Exactly sub-component is arranged from top to bottom or from left to right;Grid layout, be exactly by sub-component in the way of ranks equal part Arrangement.So layout depends on the size calculated result of step 1001, the size of sub-component, sub-component have only been calculated The inset spacing of outer back gauge, itself container just can know that the position that each component is put.
Step 1003, each Service Component after arrangement is drawn.
It in the embodiment of the present application, can be according to size calculation stages and cloth if it is virtualisation component in the stage of drafting It is that office's stage obtains as a result, drawing content in specified place.Under normal circumstances, the View for needing an entity is drawn.It is right For virtual component, the View of its entity is exactly host's container, virtualisation component be finally all plotted to host's container this On layer.So only this view of host's container finally seen.If it is primary component, that needs to call primary component pair The method for drafting answered completes rendering logic by primary component internal.
In the embodiment of the present application, each Service Component after arrangement draw and can specifically include following sub-step It is rapid:
S1, obtains Service Component template, and the Service Component template includes primary template data;
The primary template data compilation is target data by S2;
S3 parses the target data, to obtain corresponding target template data;
S4 creates Service Component according to the target template data;
S5 obtains the business datum for matching the Service Component;
The business datum is tied in the Service Component by S6.
It, can be mutually refering to the present embodiment since sub-step S1-S6 is similar with a kind of step 301- step 306 of embodiment This is repeated no more.
Below with a specific example, the illustratively drawing process of the application.
As shown in figure 11, be the application a kind of Service Component level schematic diagram.By in host's container, carry One virtual container component, a virtual text component, two primary picture components, can be combined into a complicated business field Component under scape.
As shown in figure 12, be the application a kind of drafting Figure 11 shown in Service Component operation timing diagram.Starting to draw After system, the size of triggering host's container first is calculated, and is provided wide high constraint, is passed to virtual container component.Virtual container component It is high can to calculate final width in conjunction with oneself property content according to the maximum width value and constraint condition that host's container is given.Needle To the high constraint of the width of virtual container component, the width that can calculate separately virtual text component and primary picture component is high.Then, it counts Calculation result, which can be reversed, to be passed back, and final host container knows that whole width is high.
After triggering layout, it can exist first according to information such as the sizes for the various components that size calculation stages calculate Arrangement virtual text component and primary picture component, then virtual container component of arranging.It is corresponding when being all placed in various components Behind position, triggering is drawn.When it is finally drawn out, host's container and two primary picture components are only seen, and And it is seen that direct carry picture component under host's container.
If, for this layout structure of Figure 12, can see host's container, one layer of cloth using conventional method exploitation Office, a text, two pictures, and a total of 3-tier architecture.The embodiment of the present application can pass through view structure flattening, void The mode combined in fact builds view.
It should be noted that for simple description, therefore, it is stated as a series of action groups for embodiment of the method It closes, but those skilled in the art should understand that, the embodiment of the present application is not limited by the described action sequence, because according to According to the embodiment of the present application, some steps may be performed in other sequences or simultaneously.Secondly, those skilled in the art also should Know, the embodiments described in the specification are all preferred embodiments, and related movement not necessarily the application is implemented Necessary to example.
Referring to Fig.1 3, a kind of structural block diagram of the drawing apparatus embodiment one of client's end-view of the application is shown, is had Body may include following module:
Service Component template obtains module 1301, and for obtaining Service Component template, the Service Component template includes original Beginning template data;
Primary template data compilation module 1302, for being target data by the primary template data compilation;
Target data parsing module 1303, for being parsed to the target data, to obtain corresponding target template Data;
Service Component creation module 1304, for creating Service Component according to the target template data;
Business datum obtains module 1305, for obtaining the business datum for matching the Service Component;
Business datum binding module 1306, for the business datum to be tied in the Service Component.
In the embodiment of the present application, the Service Component template, which obtains module 1301, can specifically include following submodule:
XML template acquisition submodule, for obtaining the expandable mark language XML template write in advance.
In the embodiment of the present application, the primary template data compilation module 1302 can specifically include following submodule:
Node traverses submodule, for traversing each node of the primary template data, each node has respectively There are corresponding title and multiple attributes;
Infrastructure component compiler-creating submodule creates corresponding base set for the title according to each node Part compiler;
Attribute acquisition submodule, for obtaining whole attributes of each node;
Attribute handles submodule, for being handled using the infrastructure component compiler whole attributes, obtains Multiple attribute values;
Submodule is written in attribute value, in the file object for the write-in of the multiple attribute value to be pre-created.
In the embodiment of the present application, the multiple attribute value include int integer attribute value, float floating type attribute value, String character string type attribute value, and/or, type expression attribute value, the file object being pre-created include component area, Character string area and expression formula area;The attribute value write-in submodule can specifically include such as lower unit:
Attribute value taxon is used for according to the integer attribute value, floating type attribute value, character string type attribute value, and/ Or, type expression attribute value classifies to the multiple attribute value, key-value byte arrays are generated;
Attribute value converting unit, for being respectively converted to the character string type attribute value and type expression attribute value pair The Hash code value hashCode answered;
Key-value byte arrays writing unit, for the component area to be written in the key-value byte arrays;
Hash code value writing unit is used for the character string type attribute value and the corresponding Hash of type expression attribute value Code value is respectively written into the character string area and the expression formula area.
In the embodiment of the present application, the file object being pre-created further includes data field, the primary template data Collector 1302 can also include following submodule:
Submodule is written in growth data, and for growth data if it exists, the data field is written in the growth data.
In the embodiment of the present application, the primary template data compilation module 1302 can also include following submodule:
File object creates submodule, for creating file object;
Submodule is written, for the write-in file format mark information, version number data in the file object, and, The footprint information of each region, described each region include component area, character string area, expression formula area, and, data field;
Service Component template parser creates submodule, for creating Service Component template parser.
In the embodiment of the present application, the Service Component template is XML template, and the Service Component template parser is XML parser, the node traverses submodule can specifically include such as lower unit:
Node traverses unit, for traversing each section of the XML template according to XML format using the XML parser Point.
In the embodiment of the present application, described device can also include following module:
Target data loading module, for the target data to be loaded onto client.
In the embodiment of the present application, the target data loading module can specifically include following submodule:
Target packet generates submodule, for generating target packet according to the target data;
Target packet loads submodule, for by pre-set code, the target packet to be loaded onto client.
In the embodiment of the present application, the target data loading module can specifically include following submodule:
Target data sending submodule, for sending the target data to preset Template Manager platform;
Updating target data submodule passes through number of targets described in the Template Manager platform online updating for client According to.
In the embodiment of the present application, the target data parsing module 1303 can specifically include following submodule:
File data verifies submodule, for verifying whether the data in the file object are invalid data;
Area data determines submodule, for being determined respectively when the data in the file object are not invalid data The initial position of data in each region of the file object and byte length;
Region query submodule, for obtaining each area respectively according to the initial position and byte length Data in domain.
In the embodiment of the present application, the file data verification submodule can specifically include such as lower unit:
File data verification unit, byte length and version number data for verifying the data in the file object are It is no to meet preset requirement;If the byte length and version number data of the data in the file object meet preset requirement, really Data in the fixed file object are not invalid data.
In the embodiment of the present application, the area data determines that submodule can specifically include such as lower unit:
Component area data determination unit, for determining start bit of the data in the component area in the file object It sets and the byte length of the data in the component area;And/or
Character string area data determination unit, for determining the rising in the file object of the data in the character string area The byte length of beginning position and the data in the character string area;And/or
Expression formula area data determination unit, for determining the rising in the file object of the data in the expression formula area The byte length of beginning position and the data in the expression formula area;And/or
Expansion area data determination unit, for determining start bit of the data in the expansion area in the file object It sets and the byte length of the data in the expansion area.
In the embodiment of the present application, the region query submodule can specifically include such as lower unit:
Component name character string acquiring unit, for the starting according to the data in the component area in the file object The byte length of position and the data in the component area, securing component name character string;
Module data initial position determination unit removes the component name for determining in the data in the component area Symbol string is outer, the initial position of other module datas;
Component name reading unit, for reading out corresponding component name according to the component name character string;
First mapping relations establish unit, and the mapping for establishing between component name and the initial position of module data is closed System.
In the embodiment of the present application, the region query submodule can specifically include such as lower unit:
Character string number acquiring unit, for the starting according to the data in the character string area in the file object The byte length of position and the data in the character string area obtains character string number;
String resource reading unit, for according to the character string number, circulation to read each string resource, acquisition Community string index community;
Text string generation unit, for generating character string according to the string resource;
Second mapping relations establish unit, for establishing the mapping relations between community string index community and character string respectively.
In the embodiment of the present application, the region query submodule can also include such as lower unit:
Second mapping relations storage unit, for by the mapping relations between the community string index community and character string store to In preset string resource pond.
In the embodiment of the present application, the region query submodule can specifically include such as lower unit:
Expression formula number acquiring unit, for the starting according to the data in the expression formula area in the file object The byte length of position and the data in the expression formula area obtains expression formula number;
Expression formula resource reading unit, for according to the expression formula number, circulation to read each expression formula resource, acquisition Expression formula index;
Expression formula object generation unit, for generating expression formula object according to the expression formula resource;
Third mapping relations establish unit, and the mapping for being established between expression formula index and expression formula object respectively is closed System.
In the embodiment of the present application, the region query submodule can also include such as lower unit:
Third mapping relations storage unit is deposited for the expression formula to be indexed the mapping relations between expression formula object Storage is into preset expression formula resource pool.
In the embodiment of the present application, the Service Component creation module 1304 can specifically include following submodule:
Component name acquisition submodule, for obtaining the component name of Service Component to be created;
Target template data acquisition submodule obtains corresponding for the component name according to the Service Component to be created Target template data;
Service Component constructs submodule, for using the target template data, constructs Service Component.
In the embodiment of the present application, the component name acquisition submodule can specifically include such as lower unit:
Component name receiving unit, for receiving the component name for the Service Component to be created that user is passed to.
In the embodiment of the present application, the target template data acquisition submodule can specifically include such as lower unit:
Module data searching unit, for according to the component name of the Service Component to be created and the component name with Mapping relations between the initial position of module data search corresponding module data.
In the embodiment of the present application, the Service Component construction submodule can specifically include such as lower unit:
Byte reading unit, each byte for being successively read in the module data;
Node type acquiring unit, for obtaining when the mark information of the current byte read is node beginning label Take the node type of the current byte;
Infrastructure component example creating unit creates infrastructure component example for the node type according to the current byte;
Attribute value reading unit, multiple attribute values for being successively read in the module data;
Attribute value information transmission unit is used for according to key-value byte arrays, by the corresponding letter of the multiple attribute value Breath is sent to corresponding attribute in the infrastructure component example.
In the embodiment of the present application, the attribute value reading unit can specifically include following subelement:
Attribute value reading subunit, integer attribute value, floating type attribute value for being successively read in the module data, Character string type attribute value, and/or, type expression attribute value.
In the embodiment of the present application, the attribute value information transmission unit can specifically include following subelement:
Attribute value quantity determines subelement, for determining the quantity of current property value;
First property value reading subunit, if being that integer attribute value or floating type attribute value follow for the current property value Ring then reads the integer attribute value or the corresponding information of floating type attribute value from the key-value byte arrays;
First property value transmission sub-unit, for sending the integer attribute value or the corresponding information of floating type attribute value The corresponding attribute into infrastructure component example.
In the embodiment of the present application, the attribute value information transmission unit can also include following subelement:
Second attribute value obtains transmission sub-unit, if being character string type attribute value or expression formula for the current property value Type Attribute value is then indexed according to the community string index community or expression formula, is obtained from string resource pond or expression formula resource pool Corresponding information is taken, and is sent to corresponding attribute in the infrastructure component example.
In the embodiment of the present application, the Service Component construction submodule can also include such as lower unit:
Infrastructure component node determination unit is that node terminates to mark for the mark information when the current byte read When, it is confirmed whether the infrastructure component node created there are last time;
Container Type determination unit, for when the infrastructure component node created there are last time, determining the last time creation Infrastructure component node whether be Container Type;If so, present node to be added to the infrastructure component node of the last time creation In;If it is not, terminating the creation of the Service Component;
Component creates end unit, for terminating the service groups when there is no the infrastructure component node of last time creation The creation of part.
In the embodiment of the present application, the Service Component construction submodule can also include such as lower unit:
Layout parameter object setting unit, for layout parameter object to be arranged for the infrastructure component example.
In the embodiment of the present application, the business datum binding module 1306 can specifically include following submodule:
Infrastructure component determines submodule, for determining the infrastructure component in the Service Component to binding data;
Current attribute determines submodule, for determine it is described in the infrastructure component of binding data to the current of binding data Attribute;
Current attribute target value judges submodule, the target for judging the current attribute whether can be got from caching Value, the caching are obtained by the parsing to the current attribute;
Target value assignment submodule, for if so, being assigned to the target value according to the type of the current attribute The corresponding attribute of infrastructure component example;
Target value acquisition submodule, for if it is not, then obtaining the target value of the current attribute from business datum and delaying It deposits, the target value is assigned to the corresponding attribute of infrastructure component example.
In the embodiment of the present application, the business datum binding module 1306 can also include following submodule:
Whether cache tag for clearance determines submodule, for determining in the current attribute including caching for clearance mark Note;
Data value cache cleaner submodule, for if so, clearing up the data value caching in the current attribute;
Submodule is called, for if it is not, the current attribute target value is called to judge submodule.
In the embodiment of the present application, described device can also include following module:
Service Component display module, for showing the Service Component in the client.
Referring to Fig.1 4, a kind of structural block diagram of the drawing apparatus embodiment two of client's end-view of the application is shown, is had Body may include following module:
Size determining module 1401, for determining each business when receiving the instruction for drawing client's end-view The size of component;
Service Component arrangement module 1402, for the size according to each Service Component, to each industry Business component is arranged;
Service Component drafting module 1403, for being drawn to each Service Component after arrangement.
In the embodiment of the present application, the Service Component drafting module 1403 can specifically include following submodule:
Service Component template acquisition submodule, for obtaining Service Component template, the Service Component template includes original Template data;
Primary template data compilation submodule, for being target data by the primary template data compilation;
Target data analyzing sub-module, for being parsed to the target data, to obtain corresponding target template number According to;
Service Component creates submodule, for creating Service Component according to the target template data;
Business datum acquisition submodule, for obtaining the business datum for matching the Service Component;
Business datum binds submodule, for the business datum to be tied in the Service Component.
In the embodiment of the present application, the Service Component includes host's container assemblies, virtual container component, and/or, basis Component;The size determining module 1401 can specifically include following submodule:
Size constraint determines submodule, for determining place respectively when receiving the instruction for drawing client's end-view Primary tank component, virtual container component, and/or, the size constraint of infrastructure component;
Container assemblies size determines submodule, for the ruler according to host's container assemblies and virtual container component Very little constraint condition determines the size of host's container assemblies and virtual container component;
Infrastructure component size determines submodule, for the size and base set according to the virtual container component The size constraint of part determines the size of each infrastructure component.
In the embodiment of the present application, the Service Component arrangement module 1402 can specifically include following submodule:
Service Component is arranged submodule, for according to determining size, to described in host's container assemblies Virtual container component and infrastructure component are arranged.
In the embodiment of the present application, the infrastructure component may include following one or more:
It is virtual text component, primary text component, virtual picture component, primary picture component, dummy line bar assembly, primary Lines component, virtual progress bar assembly, virtual pattern component, primary page turning layout container component, primary rolling layout container group Part, virtual frames layout container component, virtual proportional arrangement's container assemblies, virtual grid layout container component, primary grid layout Container assemblies, virtual linear layout container component, primary linear placement's container assemblies.
For device embodiment, since it is basically similar to the method embodiment, related so being described relatively simple Place illustrates referring to the part of embodiment of the method.
All the embodiments in this specification are described in a progressive manner, the highlights of each of the examples are with The difference of other embodiments, 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 non-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 Realize that information is stored by any method or technique.Information can be computer readable instructions, data structure, the module of program or Other data.The example of the storage medium of computer includes, but are not limited to phase change memory (PRAM), static random access memory (SRAM), dynamic random access memory (DRAM), other kinds of random access memory (RAM), read-only memory (ROM), electrically erasable programmable read-only memory (EEPROM), flash memory or other memory techniques, CD-ROM are read-only Memory (CD-ROM), digital versatile disc (DVD) or other optical storage, magnetic cassettes, tape magnetic disk storage or Other magnetic storage devices or any other non-transmission medium, can be used for storage 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 referring 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 process and/or box combination.It can provide these Computer program instructions are set to general purpose computer, special purpose computer, Embedded Processor or other programmable data processing terminals Standby processor is to generate a machine, so that being held by the processor of computer or other programmable data processing terminal devices Capable instruction generates for realizing in one or more flows of the flowchart and/or one or more blocks of the block diagram The device of specified function.
These computer program instructions, which may also be stored in, is able to guide computer or other programmable data processing terminal devices 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 side of one or more flows of the flowchart and/or block diagram The function of being specified in frame or multiple boxes.
These computer program instructions can also be loaded into computer or other programmable data processing terminal devices, 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 or more flows of the flowchart And/or in one or more blocks of the block diagram 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 including other elements that are not explicitly listed, or further includes 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 for including the element.
The drafting dress of method for drafting to a kind of client's end-view provided herein and a kind of client's end-view above It sets, is described in detail, specific examples are used herein to illustrate the principle and implementation manner of the present application, above The explanation of embodiment is merely used to help understand the present processes and its core concept;Meanwhile for the general skill of this field Art personnel, according to the thought of the application, there will be changes in the specific implementation manner and application range, in conclusion this Description should not be construed as the limitation to the application.

Claims (37)

1. a kind of method for drafting of client's end-view characterized by comprising
Service Component template is obtained, the Service Component template includes primary template data;
It is target data by the primary template data compilation;
The target data is parsed, to obtain corresponding target template data;
According to the target template data, Service Component is created;
Obtain the business datum for matching the Service Component;
The business datum is tied in the Service Component.
2. the method according to claim 1, wherein the acquisition Service Component template, comprising:
Obtain the expandable mark language XML template write in advance.
3. being wrapped the method according to claim 1, wherein described be compiled as target data for the template data It includes:
Each node of the primary template data is traversed, each node is respectively provided with corresponding title and multiple attributes;
According to the title of each node, corresponding infrastructure component compiler is created;
Obtain whole attributes of each node;
Whole attributes are handled using the infrastructure component compiler, obtain multiple attribute values;
In the file object that the write-in of the multiple attribute value is pre-created.
4. according to the method described in claim 3, it is characterized in that, the multiple attribute value include int integer attribute value, Float floating type attribute value, string character string type attribute value, and/or, type expression attribute value is described to be pre-created File object includes component area, character string area and expression formula area;It is described that the multiple attribute value is written to the file being pre-created In object, comprising:
According to the integer attribute value, floating type attribute value, character string type attribute value, and/or, type expression attribute value is to institute It states multiple attribute values to classify, generates key-value byte arrays;
The character string type attribute value and type expression attribute value are converted into corresponding Hash code value hashCode respectively;
The component area is written into the key-value byte arrays;
The character string type attribute value and the corresponding Hash code value of type expression attribute value are respectively written into the character string area With the expression formula area.
5. according to the method described in claim 4, it is characterized in that, the file object being pre-created further includes data field, The method also includes:
The data field is written in the growth data by growth data if it exists.
6. according to method as claimed in claim 3 to 5, which is characterized in that in each of the traversal primary template data Before a node, further includes:
Create file object;
File format mark information, version number data are written in the file object, and, the footprint letter of each region Breath, described each region include component area, character string area, expression formula area, and, data field;
Create Service Component template parser.
7. according to the method described in claim 6, it is characterized in that, the Service Component template is XML template, the service groups Part template parser is XML parser, each node of the traversal primary template data, comprising:
The XML parser traverses each node of the XML template according to XML format.
8. the method according to claim 1, wherein it is described by the primary template data compilation be number of targets According to later, further includes:
The target data is loaded onto client.
9. according to the method described in claim 8, it is characterized in that, described be loaded onto client for the target data, comprising:
According to the target data, target packet is generated;
By pre-set code, the target packet is loaded onto client.
10. according to the method described in claim 8, it is characterized in that, described be loaded onto client for the target data, packet It includes:
The target data is sent to preset Template Manager platform;
Client passes through target data described in the Template Manager platform online updating.
11. according to the method described in claim 6, it is characterized in that, described parse the target data, to obtain phase The target template data answered, comprising:
Verify whether the data in the file object are invalid data;
When the data in the file object are not invalid data, the number in each region of the file object is determined respectively According to initial position and byte length;
According to the initial position and byte length, the data in described each region are obtained respectively.
12. according to the method for claim 11, which is characterized in that data in the verification file object whether be Invalid data, comprising:
Whether the byte length and version number data for verifying the data in the file object meet preset requirement;
If the byte length and version number data of the data in the file object meet preset requirement, it is determined that the file pair Data as in are not invalid data.
13. according to the method for claim 11, which is characterized in that described each region for determining the file object respectively In data initial position and byte length, comprising:
Determine the word of data of the data in the initial position and the component area in the file object in the component area Save length;And/or
Determine data of the data in the initial position and the character string area in the file object in the character string area Byte length;And/or
Determine data of the data in the initial position and the expression formula area in the file object in the expression formula area Byte length;And/or
Determine the word of data of the data in the initial position and the expansion area in the file object in the expansion area Save length.
14. according to the method for claim 13, which is characterized in that it is described according to the initial position and byte length, divide The data in described each region are not obtained, comprising:
Word according to data of the data in the component area in the initial position and the component area in the file object Save length, securing component name character string;
It determines in the data in the component area, in addition to the component name character string, the initial position of other module datas;
According to the component name character string, corresponding component name is read out;
Establish the mapping relations between component name and the initial position of module data.
15. according to the method for claim 13, which is characterized in that it is described according to the initial position and byte length, divide The data in described each region are not obtained, comprising:
According to data of the data in the character string area in the initial position and the character string area in the file object Byte length, obtain character string number;
According to the character string number, circulation reads each string resource, obtains community string index community;
According to the string resource, character string is generated;
The mapping relations between community string index community and character string are established respectively.
16. according to the method for claim 15, which is characterized in that it is described establish respectively community string index community and character string it Between mapping relations after, further includes:
Mapping relations between the community string index community and character string are stored into preset string resource pond.
17. according to the method for claim 13, which is characterized in that it is described according to the initial position and byte length, divide The data in described each region are not obtained, comprising:
According to data of the data in the expression formula area in the initial position and the expression formula area in the file object Byte length, obtain expression formula number;
According to the expression formula number, circulation reads each expression formula resource, obtains expression formula index;
According to the expression formula resource, expression formula object is generated;
The mapping relations between expression formula index and expression formula object are established respectively.
18. according to the method for claim 17, which is characterized in that establish expression formula index and expression formula pair respectively described After mapping relations as between, further includes:
The expression formula is indexed the mapping relations between expression formula object to store into preset expression formula resource pool.
19. according to the method for claim 14, which is characterized in that it is described according to the target template data, create business Component, comprising:
Obtain the component name of Service Component to be created;
According to the component name of the Service Component to be created, corresponding target template data are obtained;
Using the target template data, Service Component is constructed.
20. according to the method for claim 19, which is characterized in that the component name for obtaining Service Component to be created, Include:
Receive the component name for the Service Component to be created that user is passed to.
21. according to the method for claim 19, which is characterized in that the component according to the Service Component to be created Name, obtains corresponding target template data, comprising:
According to reflecting between the component name of the Service Component to be created and the component name and the initial position of module data Relationship is penetrated, corresponding module data is searched.
22. according to the method for claim 19, which is characterized in that it is described to use the target template data, construct business Component, comprising:
The each byte being successively read in the module data;
When the mark information of the current byte read is node beginning label, the node type of the current byte is obtained;
According to the node type of the current byte, infrastructure component example is created;
The multiple attribute values being successively read in the module data;
According to key-value byte arrays, the corresponding information of the multiple attribute value is sent in the infrastructure component example Corresponding attribute.
23. according to the method for claim 22, which is characterized in that the multiple categories being successively read in the module data Property value, comprising:
Integer attribute value, floating type attribute value, the character string type attribute value being successively read in the module data, and/or, expression Formula Type Attribute value.
24. according to the method for claim 22, which is characterized in that it is described according to key-value byte arrays, it will be described more The corresponding information of a attribute value is sent to corresponding attribute in the infrastructure component example, comprising:
Determine the quantity of current property value;
If the current property value is that integer attribute value or floating type attribute value recycle, from the key-value byte arrays It is middle to read the integer attribute value or the corresponding information of floating type attribute value;
The integer attribute value or the corresponding information of floating type attribute value are sent to corresponding attribute in infrastructure component example.
25. according to the method for claim 24, which is characterized in that it is described according to key-value byte arrays, it will be described more The corresponding information of a attribute value is sent to corresponding attribute in the infrastructure component example, further includes:
If the current property value is character string type attribute value or type expression attribute value, according to the community string index community or Expression formula index, obtains corresponding information from string resource pond or expression formula resource pool, and be sent to the infrastructure component Corresponding attribute in example.
26. according to the method for claim 22, which is characterized in that it is described be successively read it is each in the module data After byte, further includes:
When the mark information of the current byte read is that node terminates label, it is confirmed whether the base set created there are last time Part node;
When the infrastructure component node created there are last time, determine whether the infrastructure component node of the last time creation is container class Type;If so, present node is added in the infrastructure component node of the last time creation;If it is not, terminating the Service Component Creation;
When there is no the infrastructure component node of last time creation, terminate the creation of the Service Component.
27. according to any method of claim 22-26, which is characterized in that in the section according to the current byte Vertex type, create infrastructure component example after, further includes:
For the infrastructure component example, layout parameter object is set.
28. according to the method for claim 27, which is characterized in that described that the business datum is tied to the service groups In part, comprising:
Determine the infrastructure component in the Service Component to binding data;
It determines described to the current attribute in the infrastructure component of binding data to binding data;
Judge the target value that the current attribute whether can be got from caching, the caching is by the current attribute Parsing obtains;
If so, the target value is assigned to the corresponding attribute of infrastructure component example according to the type of the current attribute;
If it is not, then obtaining the target value and caching of the current attribute from business datum, the target value is assigned to basis The corresponding attribute of component instance.
29. according to the method for claim 28, which is characterized in that the infrastructure component described in the determination to binding data In to the current attribute of binding data after, further includes:
Determine in the current attribute whether include cache tag for clearance;
If so, clearing up the data value caching in the current attribute;
The step of whether judgement can get the target value of the current attribute from caching executed if it is not, returning.
30. the method according to claim 1, wherein the business datum is tied to the business described After in component, further includes:
Show the Service Component in the client.
31. a kind of method for drafting of client's end-view characterized by comprising
When receiving the instruction for drawing client's end-view, the size of each Service Component is determined;
According to the size of each Service Component, arrange to each Service Component;
Each Service Component after arrangement is drawn.
32. according to the method for claim 31, which is characterized in that each Service Component after described pair of arrangement is drawn System, comprising:
Service Component template is obtained, the Service Component template includes primary template data;
It is target data by the primary template data compilation;
The target data is parsed, to obtain corresponding target template data;
According to the target template data, Service Component is created;
Obtain the business datum for matching the Service Component;
The business datum is tied in the Service Component.
33. according to the method for claim 31, which is characterized in that the Service Component includes host's container assemblies, virtual Container assemblies, and/or, infrastructure component;It is described when receive draw client's end-view instruction when, determine each Service Component Size, comprising:
When receiving the instruction for drawing client's end-view, host's container assemblies, virtual container component are determined respectively, and/or, base The size constraint of plinth component;
According to the size constraint of host's container assemblies and virtual container component, host's container assemblies and virtual appearance are determined The size of device assembly;
According to the size constraint of the size of the virtual container component and infrastructure component, each infrastructure component is determined Size.
34. according to the method for claim 33, which is characterized in that the size according to each Service Component is big It is small, it arranges to each Service Component, comprising:
According to determining size, the virtual container component and infrastructure component are arranged in host's container assemblies Cloth.
35. the method according to claim 33 or 34, which is characterized in that the infrastructure component includes following one kind or more Kind:
Virtual text component, primary text component, virtual picture component, primary picture component, dummy line bar assembly, primary lineation Component, virtual progress bar assembly, virtual pattern component, primary page turning layout container component, primary rolling layout container component, void Quasi- frame layout container component, virtual proportional arrangement's container assemblies, virtual grid layout container component, primary Grid layout container group Part, virtual linear layout container component, primary linear placement's container assemblies.
36. a kind of drawing apparatus of client's end-view characterized by comprising
Service Component template obtains module, and for obtaining Service Component template, the Service Component template includes primary template number According to;
Primary template data compilation module, for being target data by the primary template data compilation;
Target data parsing module, for being parsed to the target data, to obtain corresponding target template data;
Service Component creation module, for creating Service Component according to the target template data;
Business datum obtains module, for obtaining the business datum for matching the Service Component;
Business datum binding module, for the business datum to be tied in the Service Component.
37. a kind of drawing apparatus of client's end-view characterized by comprising
Size determining module, for determining the ruler of each Service Component when receiving the instruction for drawing client's end-view Very little size;
Service Component is arranged module, for the size according to each Service Component, to each Service Component into Row arrangement;
Service Component drafting module, for being drawn to each Service Component after arrangement.
CN201711244446.9A 2017-11-30 2017-11-30 Drawing method and device for client end view Active CN110020307B (en)

Priority Applications (1)

Application Number Priority Date Filing Date Title
CN201711244446.9A CN110020307B (en) 2017-11-30 2017-11-30 Drawing method and device for client end view

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
CN201711244446.9A CN110020307B (en) 2017-11-30 2017-11-30 Drawing method and device for client end view

Publications (2)

Publication Number Publication Date
CN110020307A true CN110020307A (en) 2019-07-16
CN110020307B CN110020307B (en) 2023-06-13

Family

ID=67185918

Family Applications (1)

Application Number Title Priority Date Filing Date
CN201711244446.9A Active CN110020307B (en) 2017-11-30 2017-11-30 Drawing method and device for client end view

Country Status (1)

Country Link
CN (1) CN110020307B (en)

Cited By (14)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN110888635A (en) * 2019-11-28 2020-03-17 百度在线网络技术(北京)有限公司 Same-layer rendering method and device, electronic equipment and storage medium
CN111104179A (en) * 2019-12-05 2020-05-05 紫光云(南京)数字技术有限公司 Method for supporting developer mode to self-define component
CN111538556A (en) * 2020-06-24 2020-08-14 成都西加云杉科技有限公司 Information display method, device, equipment and computer readable storage medium
CN111736939A (en) * 2020-06-23 2020-10-02 平安医疗健康管理股份有限公司 Page self-adaptive adjusting method and device, storage medium and computer equipment
CN111831718A (en) * 2020-07-16 2020-10-27 北京思特奇信息技术股份有限公司 Data extraction method, device and medium
CN112214218A (en) * 2020-10-12 2021-01-12 上海赛可出行科技服务有限公司 High-performance and high-efficiency Sketch component library generation and management scheme and system
CN113282328A (en) * 2021-07-22 2021-08-20 杭州涂鸦信息技术有限公司 Application program updating method, computer device and computer storage medium
CN113504898A (en) * 2021-06-10 2021-10-15 深圳市云网万店科技有限公司 Front-end component rapid processing method, system and computer storage medium for realizing business arrangement
CN113641425A (en) * 2021-10-18 2021-11-12 广州市玄武无线科技股份有限公司 Plug-in operation management visualization method and system
CN113760438A (en) * 2021-09-22 2021-12-07 京东科技信息技术有限公司 Page display method and device for webpage application
CN114489624A (en) * 2022-04-01 2022-05-13 北京优锘科技有限公司 Method, device, medium and equipment for automatically generating regional planning view
CN115168673A (en) * 2022-09-08 2022-10-11 北京嘉和美康信息技术有限公司 Data graphical processing method, device, equipment and storage medium
CN116991506A (en) * 2023-09-28 2023-11-03 腾讯科技(深圳)有限公司 Webpage rendering method and device, terminal and storage medium
CN116991506B (en) * 2023-09-28 2024-04-30 腾讯科技(深圳)有限公司 Webpage rendering method and device, terminal and storage medium

Citations (17)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
US6083276A (en) * 1998-06-11 2000-07-04 Corel, Inc. Creating and configuring component-based applications using a text-based descriptive attribute grammar
US20030200539A1 (en) * 2002-04-12 2003-10-23 Chen Fu Function unit based finite state automata data structure, transitions and methods for making the same
CN1757015A (en) * 2002-12-26 2006-04-05 捷讯研究有限公司 System and method for building and execution of platform-neutral generic services client applications
CN1860439A (en) * 2002-10-15 2006-11-08 国际商业机器公司 Annotated automation encoding of XML schema for high performance schema validation
CN1906609A (en) * 2003-10-22 2007-01-31 英特尔公司 System for data format conversion for use in data centers
US20090183117A1 (en) * 2003-12-12 2009-07-16 Peter Hon-You Chang Dynamic generation of target files from template files and tracking of the processing of target files
WO2011049799A1 (en) * 2009-10-20 2011-04-28 Qwiki, Inc. Method and system for assembling animated media based on keyword and string input
CN102142004A (en) * 2010-08-20 2011-08-03 华为技术有限公司 Service processing method and service engine
US20140129924A1 (en) * 2012-11-06 2014-05-08 Open Text S.A. System and method for creation of templates
US20140297627A1 (en) * 2011-11-18 2014-10-02 Tencent Technology (Shenzhen) Company Limited Java application server and method for processing web business
CN104281447A (en) * 2014-09-01 2015-01-14 国家电网公司 Report form fast generating and issuing system and method
CN104699742A (en) * 2013-12-03 2015-06-10 商业对象软件有限公司 Extreme visualization enabling extension for large data sets
CN105574049A (en) * 2014-10-30 2016-05-11 阿里巴巴集团控股有限公司 Page processing method, device and system of mobile applications
CN106776994A (en) * 2016-12-06 2017-05-31 北京神舟航天软件技术有限公司 Application process and system of a kind of technote in engineering form and webpage
CN106873965A (en) * 2016-12-25 2017-06-20 北京通途永久科技有限公司 A kind of method suitable for the monitoring service class application dynamic construction page
CN106936871A (en) * 2015-12-30 2017-07-07 阿里巴巴集团控股有限公司 The method and device of showing interface data
CN107391169A (en) * 2017-06-09 2017-11-24 口碑控股有限公司 The dynamic updating method and device of the Android page

Patent Citations (17)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
US6083276A (en) * 1998-06-11 2000-07-04 Corel, Inc. Creating and configuring component-based applications using a text-based descriptive attribute grammar
US20030200539A1 (en) * 2002-04-12 2003-10-23 Chen Fu Function unit based finite state automata data structure, transitions and methods for making the same
CN1860439A (en) * 2002-10-15 2006-11-08 国际商业机器公司 Annotated automation encoding of XML schema for high performance schema validation
CN1757015A (en) * 2002-12-26 2006-04-05 捷讯研究有限公司 System and method for building and execution of platform-neutral generic services client applications
CN1906609A (en) * 2003-10-22 2007-01-31 英特尔公司 System for data format conversion for use in data centers
US20090183117A1 (en) * 2003-12-12 2009-07-16 Peter Hon-You Chang Dynamic generation of target files from template files and tracking of the processing of target files
WO2011049799A1 (en) * 2009-10-20 2011-04-28 Qwiki, Inc. Method and system for assembling animated media based on keyword and string input
CN102142004A (en) * 2010-08-20 2011-08-03 华为技术有限公司 Service processing method and service engine
US20140297627A1 (en) * 2011-11-18 2014-10-02 Tencent Technology (Shenzhen) Company Limited Java application server and method for processing web business
US20140129924A1 (en) * 2012-11-06 2014-05-08 Open Text S.A. System and method for creation of templates
CN104699742A (en) * 2013-12-03 2015-06-10 商业对象软件有限公司 Extreme visualization enabling extension for large data sets
CN104281447A (en) * 2014-09-01 2015-01-14 国家电网公司 Report form fast generating and issuing system and method
CN105574049A (en) * 2014-10-30 2016-05-11 阿里巴巴集团控股有限公司 Page processing method, device and system of mobile applications
CN106936871A (en) * 2015-12-30 2017-07-07 阿里巴巴集团控股有限公司 The method and device of showing interface data
CN106776994A (en) * 2016-12-06 2017-05-31 北京神舟航天软件技术有限公司 Application process and system of a kind of technote in engineering form and webpage
CN106873965A (en) * 2016-12-25 2017-06-20 北京通途永久科技有限公司 A kind of method suitable for the monitoring service class application dynamic construction page
CN107391169A (en) * 2017-06-09 2017-11-24 口碑控股有限公司 The dynamic updating method and device of the Android page

Cited By (15)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN110888635A (en) * 2019-11-28 2020-03-17 百度在线网络技术(北京)有限公司 Same-layer rendering method and device, electronic equipment and storage medium
CN111104179A (en) * 2019-12-05 2020-05-05 紫光云(南京)数字技术有限公司 Method for supporting developer mode to self-define component
CN111736939A (en) * 2020-06-23 2020-10-02 平安医疗健康管理股份有限公司 Page self-adaptive adjusting method and device, storage medium and computer equipment
CN111538556A (en) * 2020-06-24 2020-08-14 成都西加云杉科技有限公司 Information display method, device, equipment and computer readable storage medium
CN111831718A (en) * 2020-07-16 2020-10-27 北京思特奇信息技术股份有限公司 Data extraction method, device and medium
CN112214218A (en) * 2020-10-12 2021-01-12 上海赛可出行科技服务有限公司 High-performance and high-efficiency Sketch component library generation and management scheme and system
CN113504898A (en) * 2021-06-10 2021-10-15 深圳市云网万店科技有限公司 Front-end component rapid processing method, system and computer storage medium for realizing business arrangement
CN113282328A (en) * 2021-07-22 2021-08-20 杭州涂鸦信息技术有限公司 Application program updating method, computer device and computer storage medium
CN113760438A (en) * 2021-09-22 2021-12-07 京东科技信息技术有限公司 Page display method and device for webpage application
CN113641425A (en) * 2021-10-18 2021-11-12 广州市玄武无线科技股份有限公司 Plug-in operation management visualization method and system
CN114489624A (en) * 2022-04-01 2022-05-13 北京优锘科技有限公司 Method, device, medium and equipment for automatically generating regional planning view
CN115168673A (en) * 2022-09-08 2022-10-11 北京嘉和美康信息技术有限公司 Data graphical processing method, device, equipment and storage medium
CN115168673B (en) * 2022-09-08 2022-12-09 北京嘉和美康信息技术有限公司 Data graphical processing method, device, equipment and storage medium
CN116991506A (en) * 2023-09-28 2023-11-03 腾讯科技(深圳)有限公司 Webpage rendering method and device, terminal and storage medium
CN116991506B (en) * 2023-09-28 2024-04-30 腾讯科技(深圳)有限公司 Webpage rendering method and device, terminal and storage medium

Also Published As

Publication number Publication date
CN110020307B (en) 2023-06-13

Similar Documents

Publication Publication Date Title
CN110020307A (en) A kind of method for drafting and device of client&#39;s end-view
CN110825362B (en) Low-code application software development system and method
US8527943B1 (en) System and method of application development
Boduch React and react native
US7836119B2 (en) Distributed execution model for cross-organizational declarative web applications
US7827527B1 (en) System and method of application development
CN101334728B (en) Interface creating method and platform based on XML document description
US7873668B2 (en) Application data binding
US20040133854A1 (en) Persistent document object model
US20110023022A1 (en) Method for application authoring employing an application template stored in a database
CN101114299A (en) Method for programmatically hiding and displaying wiki page layout sections
US20090235230A1 (en) System and method for presentation of cross organizational applications
CN104375808B (en) interface display method and device
CN105630522A (en) Web application updating method, apparatus and system
US20100269093A1 (en) Content Management System and Method for Generating Dynamic Applications
CN102053987A (en) Uniform interface for displaying and modifying data array
Ranjan et al. JavaScript for modern web development: building a web application using HTML, CSS, and JavaScript
Kotaru „Angular for Material Design “
Loudon Developing Large Web Applications: Producing Code That Can Grow and Thrive
Bochicchio et al. WARP: Web application rapid prototyping
Sengupta et al. Getting Started with React
CN114968220A (en) Dynamic portal design method and device
Freeman Pro Vue. js 2
CN113190509A (en) Animation processing method and device, electronic equipment and computer readable storage medium
Binsztok et al. Opa: Up and Running: Rapid and Secure Web Development

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