CN102841790A - Web application interface dynamic adapting method for heterogeneous terminal - Google Patents
Web application interface dynamic adapting method for heterogeneous terminal Download PDFInfo
- Publication number
- CN102841790A CN102841790A CN2012102280192A CN201210228019A CN102841790A CN 102841790 A CN102841790 A CN 102841790A CN 2012102280192 A CN2012102280192 A CN 2012102280192A CN 201210228019 A CN201210228019 A CN 201210228019A CN 102841790 A CN102841790 A CN 102841790A
- Authority
- CN
- China
- Prior art keywords
- interface
- sub
- dom
- subtree
- web application
- Prior art date
- Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
- Pending
Links
- 238000000034 method Methods 0.000 title claims abstract description 47
- 230000008859 change Effects 0.000 claims description 10
- 238000012217 deletion Methods 0.000 claims description 9
- 230000037430 deletion Effects 0.000 claims description 9
- 238000012544 monitoring process Methods 0.000 claims description 4
- 230000006978 adaptation Effects 0.000 abstract description 17
- 238000009877 rendering Methods 0.000 abstract 1
- 230000003044 adaptive effect Effects 0.000 description 13
- 230000008569 process Effects 0.000 description 6
- 238000010586 diagram Methods 0.000 description 5
- 238000007792 addition Methods 0.000 description 4
- 238000011161 development Methods 0.000 description 4
- 230000000694 effects Effects 0.000 description 4
- 238000013461 design Methods 0.000 description 3
- 238000004458 analytical method Methods 0.000 description 2
- 238000004364 calculation method Methods 0.000 description 2
- 238000012986 modification Methods 0.000 description 2
- 230000004048 modification Effects 0.000 description 2
- 230000000007 visual effect Effects 0.000 description 2
- 230000009471 action Effects 0.000 description 1
- 238000001514 detection method Methods 0.000 description 1
- 238000005516 engineering process Methods 0.000 description 1
- 230000002349 favourable effect Effects 0.000 description 1
- 230000005484 gravity Effects 0.000 description 1
- 230000002650 habitual effect Effects 0.000 description 1
- 230000003068 static effect Effects 0.000 description 1
- 230000009466 transformation Effects 0.000 description 1
Images
Landscapes
- User Interface Of Digital Computer (AREA)
Abstract
本发明提供一种面向异构终端的Web应用界面动态适配方法，其步骤包括：通过浏览器加载Web应用界面并进行渲染；获取渲染后的Web应用界面在运行时刻的DOM树；根据DOM树中所有子树的类型和尺寸信息，将Web应用界面分割生成若干适应当前屏幕的子界面；监测DOM树的变化，将变化的界面重分割成适应当前屏幕的子界面；在当前屏幕中显示分割后的子界面。本发明可以忠实地反映运行时刻的界面结构与表现，使为PC等大尺寸屏幕设备设计的Web界面得以在小尺寸屏幕设备上以适合的方式显示。
The present invention provides a heterogeneous terminal-oriented Web application interface dynamic adaptation method, the steps of which include: loading and rendering the Web application interface through a browser; obtaining the DOM tree of the rendered Web application interface at running time; according to the DOM tree The type and size information of all subtrees in the web application interface is divided into several subinterfaces suitable for the current screen; the changes of the DOM tree are monitored, and the changed interface is re-divided into subinterfaces suitable for the current screen; the division is displayed on the current screen Sub-interface after. The invention can faithfully reflect the interface structure and performance at running time, so that the Web interface designed for PCs and other large-size screen devices can be displayed in a suitable manner on small-size screen devices.
Description
Technical field
The invention belongs to cloud computing and mobile internet technical field; Be specifically related to a kind of Web application interface dynamic adaptation method, make Web interface be able to show with the mode that is fit at small-size screen equipment for the design of large scale screen equipments such as PC towards heterogeneous terminals.
Background technology
In recent years, along with cloud computing becomes the important model of internet, applications, increasing software systems operate on the cloud platform (like the data center), and supply the user to use through the mode of online service.Mobile Internet develop the important channel that then makes terminal devices such as panel computer (Pad), smart mobile phone become user Internet access rapidly, make the user can be at any time and any place, through the various device visit with use the function that software provided.Under this technological megatrend, a large amount of software application clients are deployed on the various mobile terminal devices, and used with the form confession user of Web more and more, as have 4,000 ten thousand daily users' high moral map and 1,000 ten thousand daily users' the Q+ of Tengxun.
The development of heterogeneous terminals such as mobile phone, Pad has caused the isomerism problem of display environment.As shown in table 1, the main flow display resolution of PC is 1280x800 or 1440x900 at present, yet the main flow resolution of mobile phone and Pad is 480x800 and 1024x600.
Table 1. distinct device screen size and resolution
To this problem, current Web application developer can realize different interfaces to the screen design of different size.This scheme is the screen size of adaptive known device well, but still there are two problems in it:
At first, extra cost can be brought in the interface of exploitation different editions, and when the more complicated of Web interface, the interface of specific certain size screen of a cover newly developed needs the expense of a certain amount of time and manpower especially.
Another more serious problem is that every kind of interface can only be directed against a kind of screen size.This means after a kind of equipment that possesses new screen size is popular, just need to this extra interface of equipment development one cover.And in today of cell phone apparatus fast development; The equipment of new size screen can appear carrying really; For example the earliest smart mobile phone generally uses the 3.5 cun screens of resolution as 320x480, is 4 cun giant-screen mobile phones of 480x800 but newly occurred resolution in this year.Thereby Web uses the screen that must consideration how to make same interface adaptation different size, makes at mobile phone, Pad, PC is last that favorable user experience can both be provided.
Summary of the invention
The objective of the invention is to provides a kind of Web application interface dynamic adaptation method towards heterogeneous terminals to the problems referred to above, can be loyal interfacial structure and the performance of reflection time of running, guarantee adaptive correct in interface.
For realizing above-mentioned purpose, the present invention adopts following technical scheme:
A kind of Web application interface dynamic adaptation method towards heterogeneous terminals, its step comprises:
1) loads the Web application interface through browser and play up;
2) obtain said Web application interface after playing up at the dom tree of the time of running;
3) according to the type and the dimension information of all subtrees in the said dom tree, said Web application interface is cut apart the sub-interface that generates some adaptation current screens;
4) variation of the said dom tree of monitoring heavily is divided into the interface that changes the sub-interface that adapts to said current screen;
5) the sub-interface after demonstration is cut apart in said current screen.
Further, said current screen only shows a sub-interface at any one time, hides other sub-interface.
Further, through in a sub-interface, operating, switch to other sub-interface.
Further, detect the variation at other the sub-interface that when the user operates, causes in a sub-interface, and remind the user to switch to vicissitudinous sub-interface, or automatically switch to vicissitudinous sub-interface.
Further, the variation of said dom tree comprises the additions and deletions of element in variation and the DOM subtree of element content in the dom tree; When keeping watch on the dom tree variation, regularly the eigenwert at the sub-interface of current time and the eigenwert at last sub-interface of a moment are compared, whether change to judge the interface.
Further, the type of said subtree comprises: indivisible subtree, can ignore subtree and divisible subtree.
Further, according in the following attribute of DOM subtree and root element thereof one or more said Web application interface is cut apart: length and width, overlay area, subtree full-size, subtree are overlapping.
Further, when collecting the subtree size, begin recursively to calculate the size of its all daughter elements and the side-play amount of relative root node thereof, and then calculate the size of stalk tree actual displayed from root element.
Further, carry out the pattern adjustment according to the control enclosure type antithetical phrase interface of DOM element.
The present invention is supported in the interface of cutting apart dynamic generation the time of running, and after the interface is upgraded, also dynamically heavily cuts apart.Because it cuts apart the time of running document object model tree of behavior based on the Web interface, but not based on traditional static html page, so can loyalty reflect interfacial structure and the performance of the time of running, thus the correct of interface adaptation method guaranteed.The present invention can make the Web interface for the design of large scale screen equipments such as PC be able to show with the mode that is fit at small-size screen equipment.
Description of drawings
Fig. 1 is a dom tree element BOX Model synoptic diagram.
Fig. 2 is a dom tree element locator meams synoptic diagram.
Fig. 3 is the synoptic diagram at a complicated Web interface.
Fig. 4 is the dom tree synoptic diagram corresponding with each sub-interface.
Fig. 5 is the flow chart of steps towards the Web application interface dynamic adaptation method of heterogeneous terminals of the embodiment of the invention.
The synoptic diagram that Fig. 6 overflows for the dom tree neutron element size of the embodiment of the invention.
Fig. 7 is cut apart the displaying exemplary plot for the dom tree of the embodiment of the invention.
Fig. 8 is cut apart exemplary plot for the Ctrip.com interface of the embodiment of the invention.
Embodiment
For ease of understanding and embodiment of the present invention, at first introduce and the closely-related DOM Document Object Model of the present invention below, specify technical scheme of the present invention then, and concrete application example is provided.
DOM Document Object Model (DOM, Document Object Model) is a structured document visit standard of W3C definition, and a kind of standard A PI (Application Programming Interface) of access structure document is provided.The structured document that this specification handles is tree-shaped, that is: 1) each document has unique root element; 2) each element comprises the plurality of sub element in the document; 3) except that root element, each unit have and unique father's element is only arranged; 4) each element content and certain attributes.The DOM regulation and stipulation API of each element in one group of traversal and the operation tree structure, also stipulated to visit the content of each element and the API of attribute simultaneously.
Html document is a kind of structured document of the DOM of meeting standard, can use the DOMAPI visit.Each label (Tag) in the html document is an element in the DOM standard, and its root element is the html label, has a large amount of attributes in each element, and wherein a part of attribute is the attribute of the existing mode of definite list of elements of stipulating in the CSS standard.The pairing tree structure of structured document that to follow the DOM standard traditionally is called dom tree, and the present invention continues to use this habitual saying.
Web uses can comprise a plurality of interfaces, and each interface is the plain set of a html element, and these elements constitute a HTMLDOM subtree.When the Web interface need be current, browser can be played up it.Play up each element of accomplishing in the rear interface and all possess certain width and height.Defined the BOX Model (Box Model) of DOM element in the CSS standard of W3C.The width and the height of element after BOX Model has been stipulated to play up and accomplished.
According to the definition of BOX Model, each DOM element shows as a rectangle, and this rectangle is made up of four parts, shown in Fig. 1, specifies as follows:
1) content (Content): the actual content of element constitutes a rectangle, plays up and can use after the completion DOM API to obtain the width (width) of this rectangle and highly (height);
2) inset spacing (Padding): the content rectangle of element and the spacing of frame, wherein the inset spacing of four direction maybe be different up and down.Background colour that defines on the element or background picture also can appear at the inset spacing part;
3) frame (Border): the frame of element, frame can be provided with a width, and the width of the frame of four direction maybe be different;
4) outer back gauge (Margin): outside the element frame, the spacing of element and other elements.The outer back gauge of four direction also possibly be different.Outer back gauge is transparent, and background colour that defines on the element or background picture can not appear at outer back gauge part.
Therefore a physical size of playing up element in the back dom tree that finishes is:
The element width:
Width
elem=Width
content+Padding
left+Padding
right+Border
left+Border
right+Margin
left+Margin
right (1)
The element height:
Height
elem=Height
content+Padding
top+Padding
bottom+Border
top+Border
bottom+Margin
top+Margin
bottom (2)
Wherein, Width
ElemExpression element width, Height
ElemExpression element width, Width
ContentThe width of expression content, Height
ContentThe height of expression content, Padding
Left, Padding
Right, Padding
Top, Padding
BottomThe inset spacing of representing the left side, the right, bottom and upper segment respectively, Border
Left, Border
Right, Border
Top, Border
BottomThe border width of representing the left side, the right, bottom and upper segment respectively; Margin
Left, Margin
Right, Margin
Top, Margin
BottomThe outer back gauge of the difference left side, the right, bottom and upper segment.
When the group interface is made up of an element, certain and this element of the size at this sub-interface measure-alike.Yet during DOM subtree of group interface correspondence, situation is more complicated.Because there is multiple different locator meams in the relative father's element of CSS regulation and stipulation one child elements, and is as shown in Figure 2.
Can find out when element adopts relatively, during absolute or ralocatable mode location, its BOX Model possibly exceed the border of his father's element BOX Model.Therefore, the size at an interface need be calculated the outer back gauge coordinate of all elements in its corresponding dom tree, calculates the difference between maximal value and the minimum value, and concrete computing formula is following:
The left side in the maximal value of the rightmargin coordinate in interface width=all daughter elements-all daughter elements is expressed as apart from the minimum value of coordinate:
Width
view＝Max(Right
subelem)-Min(Left
subelem) (3)
The minimum value of the bottom margin coordinate in the maximal value of the top margin coordinate in interfacial level=all daughter elements-all daughter elements is expressed as:
Height
view＝Max(Bottom
subelem)-Min(Top
subelem) (4)
According to the interface dimensions that calculates, can provide the definition of the adaptive screen in interface.
The current common more complicated in Web interface, an interface possibly be made up of a plurality of zones, and each zone shows a part of content in the complete interface respectively, and is as shown in Figure 3.Therefore in order to make a bigger less screen of interface fit size; Can the interface be divided into the sub-interface of a plurality of adaptation screens according to zones of different; Only show a sub-interface at synchronization; Provide navigation to make the user be able to switch between the different sub interface according to the result of cutting apart simultaneously, this process is called " based on the interface dynamic adaptation of cutting apart ".When subclass that the element set that constitutes an interface is gathered for another interface element, claim that the former is the latter's sub-interface.The alleged interface based on cutting apart of the present invention is adaptive, is that the interface with an incompatibility screen size is decomposed into a series of sub-interfaces, wherein each adaptive screen in sub-interface.
Yet cutting apart, unsuitable interface possibly make the user can't from a plurality of sub-interfaces, obtain the information identical with original interface.An effective interface is cut apart must satisfy following character:
(a) completeness:
Each element in the original interface appears in the sub-interface at least.This guarantees in the cutting procedure of interface, not have information to be omitted.
(b) exclusiveness:
Element in each sub-interface can not appear in other sub-interfaces.This guarantees that information can not duplicate in the cutting procedure of interface.
(c) cohesion:
The element of expressing relevant information is positioned at same sub-interface.The good interface of cohesion is cut apart make the user when accomplishing a task, and the number of times that switches sub-interface is the least possible.This guarantees ease for use and availability after the interface is cut apart.
As previously mentioned, the HTML normalized definition semanteme of each element in the HTML dom tree, container of div element representation for example, h1 element representation one-level title, p element representation passage.The semantic label that the W3C suggestion uses HTML to provide is described the structured content at Web interface, and the level of nesting relation between a this structured content content and content does not relate to element and how to show.The performance information of element uses the CSS specification description of being responsible for performance.Follow the interface of this suggestion, its content structure and its form of expression are separated from each other, and can revise the interior perhaps performance at interface relatively independently, guarantee the maintainability at interface.Therefore the mode standard when becoming interface development is adopted in this suggestion for industrial community.Preceding 50 website homepage of Alexa.com rank all shows the interface model that separates with the structure of following the W3C suggestion at present.
On the other hand; Through analysis to preceding 50 website homepages of Alexa.com; Find this interface that the structure performance separates of following, the sub-interface and the DOM subtree of gathering in it have good corresponding relationship, i.e. the sub-preferably interface of cohesion; Its whole elements are included in the DOM subtree, the situation that element in the sub-interface adheres to a plurality of DOM subtrees separately can not occur.As shown in Figure 4, constitute in several complete interfaces some and gather sub-interface, the corresponding just some subtrees that constitute dom tree, the upper right corner be the html code of correspondence among Fig. 4, dom tree generates according to this code.
The analysis of comprehensive front, the present invention proposes a kind of Web application interface dynamic adaptation method based on the dom tree time of running.Fig. 5 is the flow chart of steps of the inventive method.At first load the Web application interface and play up through browser.Load and accomplish after the interface plays up when Web uses, obtain the dom tree that the interface should moment correspondence and also analyze.Generate the sub-interface that some screens adapt to if interface incompatibility current screen, the inventive method can be cut apart dom tree automatically, and guarantee only to show at any one time to hide other interfaces in a sub-interface.Afterwards, the inventive method can be monitored dom tree and changed, and comprises the additions and deletions of element in atomic element content change in the dom tree and the DOM subtree.When changing generation, the inventive method can heavily be cut apart changing part, guarantees that the interface of dynamic change can adapt to current screen all the time.
In addition, because the interface is split into a plurality of sub-interfaces, all there is big quantum in arbitrary moment at the interface in hidden state.Therefore the present invention can further be provided at the method for switching between a plurality of interfaces for the user.On the other hand, because the operation of user in a certain sub-interface possibly cause other sub-interfaces to change, so further this variation of detection of the present invention, remind the user to switch to vicissitudinous sub-interface, or automatically switch to vicissitudinous sub-interface.More than two processes constitute navigation feature jointly.
Specify the implementation process of technical scheme of the present invention below.
1. dom tree is analyzed
For cutting apart, at first need analyze dom tree.The subtree that in the HTML at Web interface dom tree, has number of different types, though wherein some subtree comprises a plurality of elements and even many stalks tree, it logically but is an atomic element, this type subtree is indivisible in the procedure of adaptation.
For example: the select element in the corresponding dom tree of the drop-down menu in interface, this element comprises a plurality of option elements and represents the different options in the menu, however logically select should be used as an atomic element and treats and can not be cut apart.Also exist some elements in the interface, to show in this external dom tree, these elements are that the subtree that root node constitutes need not participate in the adaptive process in interface.
The present invention is divided three classes the subtree of interface dom tree, and is as shown in table 2:
Table 2.DOM subtree type
When the Web interface be read and dynamically play up finish after, collect the dimension information of all subtrees in all dom trees.These information will be used to calculate and how dom tree cut apart.But in actual the playing up, because the difference of Elements C SS layout type, the wide high scope of dom tree root node may not cover whole daughter elements.Simple dom tree as shown in Figure 6, element 3 is the daughter element of root element 1, but because element 3 has used the layout method that floats to the right, so it highly can " not strut " height of element 1.This makes the height of element 3 surpass the height of root element 1.
In order to handle the situation that this daughter element size " is overflowed ", when collecting the subtree size, can not simply write down the wide height of subtree root element.And need begin recursively to calculate the size of its all daughter elements and the side-play amount of relative root node thereof from root element, utilize these information calculations to go out the size of stalk tree actual displayed again.This result of calculation will be cached in the root element of each stalk tree, through reducing the performance that double counting improves adaptation method.
The algorithm that the dom tree analytic process provides referring to table 3.For for simplicity, in the algorithm false code that " height " and " width " is unified by " size " expression, need write down the wide, high of subtree respectively in the reality.In addition, algorithm also need write down the type information of root element except that the size of record subtree, with the type of identification subtree.These information also can be accomplished in the recursive procedure of algorithm.
Table 3.DOM tree analytical algorithm
2. the interface is cut apart
After type that calculates each DOM subtree and size, further need which DOM subtree of decision to be cut apart and how to cut apart.In carrying out this process, the inventive method can mainly be considered the following attribute of DOM subtree and root element thereof:
1) length and width: carrying out the interface when adaptive, width be the main factor that is considered highly.Under square one, can pay the utmost attention to the adaptation of width, this is because the user adapts to the browsing mode of vertical scrolling more, and the mobile phone browser of current main-stream also can be supported the browsing mode of vertical scrolling well.When considering that width adapts to; Another problem that should be noted that is that current a lot of mobile phone has disposed gravity sensing equipment; When the direction of holding mobile phone as the user changes (having level to change into vertical or inverse variation), promptly the width of mobile phone with highly understand and possibly exchange.Screen size with a mobile phone can change this meaning in the time of running, so in consideration must be included the direction of screen and possible variation when adaptive in the interface.
2) overlay area: the overlay area is another mode of describing DOM subtree size.Use the overlay area as the foundation of cutting apart, can avoid the use of the problem of the wide mobile phone placement direction that exists when high.But thisly ignore wide height and may not obtain best cutting apart.
3) subtree full-size: in the Web interface, have tabulation miscellaneous.Tabulation comprises a plurality of list items, therefore has bigger size.Yet these tabulations are indivisible subtrees in logic.One is avoided the method that unnecessary dom tree is cut apart is to include the full-size of all subtrees of dom tree in consideration.When a very big dom tree of size comprises small-sized in a large number subtree, can infer that this dom tree is certain tabulation, and need not cut apart it.This scheme also can avoid being partitioned into a large amount of sub-interfaces too in small, broken bits, causes " adaptation " but disabled interface splitting scheme.
4) subtree is overlapping: possibly there is overlapped zone in the corresponding sub-interface of subtree that is subordinate to same dom tree.For the unusual complex Web member in some interfaces, Google Map for example, the subtree in the dom tree exists overlapping in a large number.Cut apart overlapped DOM subtree and can't make the adaptive screen in interface, possibly cause the entanglement at interface on the contrary.For fear of this problem, must calculate overlapped zone between the subtree.
Through analyzing above attribute, interface of the present invention adaptation method can be divided into the plurality of sub interface with the interface.
Table 4 has provided the false code that adaptive algorithm is cut apart at the interface.Wherein setAsPartitionUnit (S) function representative is that the dom tree of root is set to a character boundary face after cutting apart with node in the S set.Whether the dom tree set that shouldBePartitioned (S) function then returns in the S set should be by further division, and this function has been considered above four kinds of attributes.
Adaptive algorithm is cut apart at table 4. interface
After cutting apart completion, the display properties " display " of CSS normalized definition in the corresponding DOM subtree root element of sub-interface is set, with a sub-interface display or thoroughly hiding.The inventive method guarantees in a sub-interface display, hides other sub-interfaces.In addition, after dom tree was split into some subtrees, public father's element of a plurality of subtrees was not comprised in any subtree.Yet these elements possibly comprise some pattern effects, background color for example, and these pattern effects possibly cause interference to the current sub-interface that needs to show equally, therefore also need these elements be hidden.Fig. 7 is sub-showing interface and an example of corresponding dom tree thereof after cutting apart.
3. heavily cut apart
To the characteristics of Web interface in the dynamic change time of running; The operation of the interpolation of the variation of DOM element content, element or deletion in the inventive method meeting monitoring interface (DOMAPI does not comprise the operation of moving the DOM element, so move operation is actual in the interpolation completion again of deletion earlier).Occur in a sub-interface internal after cutting apart if once add deletion action, then need heavily not cut apart, because the completeness of current splitting scheme and exclusiveness are not destroyed to whole interface.If the opposite operation of adding deletion DOM element is not in any sub-interface internal, then these are operating as the interface modification of " sub-interface rank ".When this modification takes place, just must calculate again and cut apart, be able to adaptive screen to guarantee amended interface to whole interface.
Being positioned at the DOM number of elements that the outside DOM element additions and deletions operation in sub-interface must cause not belonging to any sub-interface changes.Through keeping watch on the quantity of this type DOM element, can monitor the time that sub-interface rank retouching operation takes place effectively, and heavily cut apart in good time.
4. the pattern adjustment is carried out at the antithetical phrase interface
Sub-interface dimensions after cutting apart usually can not complete just adaptive screen.The size of some indivisible subtree (for example picture) possibly surpass the screen scope.As indicated above in addition, avoid some too in small, broken bits cutting apart for guaranteeing the interface availability, the size of some divisible subtrees also maybe be greater than the size of screen.
Therefore, the interface need the antithetical phrase interface to carry out the pattern adjustment after cutting apart completion.According to analyzing before, sub-interfacial level exceeds the screen scope can not cause too big problem, so width adjustment is mainly considered in the pattern adjustment.
The CSS normalized definition visual formats model of DOM element (Visual Formatting Model).Stipulate that wherein a DOM element possibly generate two kinds of control enclosurees (Controlling Box): block box (Block Box) and row inner box (Inline Box).Two kinds of different control enclosurees cause the different methods that DOM element width is set.The difference of control enclosure is as shown in table 5.
Table 5.DOM element control enclosure is described
Therefore when carrying out the pattern adjustment of sub-interface, must consider the control enclosure type of the DOM subtree root element that sub-interface is corresponding.The width of root element can directly be set for block element.For the row interior element, must find its first be not father's element of row interior element, the width of this element is set; The display attribute of capable interior element perhaps at first is set, and is block element with this element transformation, and its width is set again.In addition, the outer back gauge of root element can also be set, make that existence is necessarily stayed white between sub-interface and the screen frame; The adjustment font size increases the size of small-size screen Chinese words, to improve the overall usability at sub-interface.
After cutting apart completion, the inventive method can be according to the sub-interface tabulation after cutting apart, and generation supplies the user to switch the interface at sub-interface automatically.When the user selects certain sub-interface in the interface, show this sub-interface, hide other sub-interfaces simultaneously.
Then, the inventive method can be kept watch on the variation of each sub-interface internal.When the sub-interface content of hiding changed, dynamic navigation was realized at the sub-interface that needs the instantly prompting user and even automatically switch and show.In order to keep watch on the variation of sub-interface internal, the inventive method can be kept watch on the innerHTML property value of each sub-interface root element.In addition, other DOM element additions and deletions of sub-interface level also need take in dynamic navigation.
When keeping watch on the dom tree variation, write down the eigenwert at last sub-interface of a moment, and regularly the eigenwert and a last moment of current time were compared, whether change to judge the interface.Need the sub-interface feature value of supervision as shown in table 6.It should be noted that when the interface dom tree comprises than the multielement more complicated supervisory work possibly cause big expense.
Table 6. interface monitoring features value
| Eigenwert | Describe |
| Root element innerHTML property value | Judge whether that sub-interface internal changes |
| DOM subtree number of elements | Judging whether to take place sub-interface rank changes |
Provide the example that the interface of Ctrip.com (taking journey) homepage is cut apart below.
Fig. 8 (a) need be cut apart it to adapt to the mobile phone screen of 320x480 for taking the effect of journey PC edition owner page or leaf.Adopt the inventive method that the dom tree that meets the following conditions is cut apart:
1) width and area be all above the width of screen and 1.5 times of area, or width is less than 1.5 times of screen width but area surpasses 4 times of screen;
2) size at maximum sub-interface is greater than 20% of screen size;
3) width and highly all above the width of screen and height.
Through over-segmentation, the interface of member has been divided into 6 sub-interfaces, and numbering has marked each the sub-interface after cutting apart among Fig. 8 (a).In addition, the width of also having reseted sub-interface overflows to avoid level.Actual display effect in mobile phone end is shown in Fig. 8 (b).Can find out that the inventive method has realized that preferably the interface cuts apart.
Above embodiment is only in order to technical scheme of the present invention to be described but not limit it; Those of ordinary skill in the art can make amendment or is equal to replacement technical scheme of the present invention; And not breaking away from the spirit and scope of the present invention, protection scope of the present invention should be as the criterion so that claims are said.
Claims (10)
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN2012102280192A CN102841790A (en) | 2012-07-02 | 2012-07-02 | Web application interface dynamic adapting method for heterogeneous terminal |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN2012102280192A CN102841790A (en) | 2012-07-02 | 2012-07-02 | Web application interface dynamic adapting method for heterogeneous terminal |
Publications (1)
| Publication Number | Publication Date |
|---|---|
| CN102841790A true CN102841790A (en) | 2012-12-26 |
Family
ID=47369194
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN2012102280192A Pending CN102841790A (en) | 2012-07-02 | 2012-07-02 | Web application interface dynamic adapting method for heterogeneous terminal |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN102841790A (en) |
Cited By (12)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN104077221A (en) * | 2014-06-27 | 2014-10-01 | 百度在线网络技术（北京）有限公司 | Style test method and device for front-end page |
| CN104346174A (en) * | 2014-11-19 | 2015-02-11 | 北京大学 | Method for describing and reproducing on-line vector diagram modeling process |
| CN104951302A (en) * | 2015-06-11 | 2015-09-30 | 广州神马移动信息科技有限公司 | Webpage rendering method and device |
| CN104951187A (en) * | 2015-06-16 | 2015-09-30 | 无锡久源软件科技有限公司 | Mobile phone page block displaying method |
| CN105205077A (en) * | 2014-06-25 | 2015-12-30 | 广州市动景计算机科技有限公司 | Page layout method, device and system |
| CN105278964A (en) * | 2015-11-23 | 2016-01-27 | 金蝶软件（中国）有限公司 | Assembly rendering method and device |
| WO2016206559A1 (en) * | 2015-06-23 | 2016-12-29 | 阿里巴巴集团控股有限公司 | Method and device for full size adaptation of object to be displayed |
| CN106445547A (en) * | 2016-10-11 | 2017-02-22 | 福建中金在线信息科技有限公司 | Method and device for generating beautifying dropdown box |
| CN106910250A (en) * | 2017-02-28 | 2017-06-30 | 百度在线网络技术（北京）有限公司 | For the method and apparatus of the operation pages in virtual reality scenario |
| CN109656827A (en) * | 2018-12-17 | 2019-04-19 | 北京云测信息技术有限公司 | A kind of control tree generation method and terminal device |
| US11385857B2 (en) | 2019-03-06 | 2022-07-12 | Huawei Technologies Co., Ltd. | Method for displaying UI component and electronic device |
| CN114911550A (en) * | 2021-02-09 | 2022-08-16 | 阿里巴巴集团控股有限公司 | Cloud application interface processing system, method, device and equipment |
Citations (3)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| US6578192B1 (en) * | 1999-10-20 | 2003-06-10 | International Business Machines Corporation | Method and system for supporting dynamic document content expressed in a component-level language |
| CN101197849A (en) * | 2007-12-21 | 2008-06-11 | 腾讯科技（深圳）有限公司 | Method and device for commuting internet page into wireless application protocol page |
| CN102375851A (en) * | 2010-08-23 | 2012-03-14 | 中国移动通信有限公司 | Method and equipment for display page |
-
2012
- 2012-07-02 CN CN2012102280192A patent/CN102841790A/en active Pending
Patent Citations (3)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| US6578192B1 (en) * | 1999-10-20 | 2003-06-10 | International Business Machines Corporation | Method and system for supporting dynamic document content expressed in a component-level language |
| CN101197849A (en) * | 2007-12-21 | 2008-06-11 | 腾讯科技（深圳）有限公司 | Method and device for commuting internet page into wireless application protocol page |
| CN102375851A (en) * | 2010-08-23 | 2012-03-14 | 中国移动通信有限公司 | Method and equipment for display page |
Non-Patent Citations (1)
| Title |
|---|
| GANG HUANG等: "《Adapting User Interface of Service-Oriented Rich Client to Mobile Phones》", 《PROCEEDINGS OF THE 6TH IEEE INTERNATIONAL SYMPOSIUM ON SERVICE ORIENTED SYSTEM ENGINEERING（SOSE 2011）》 * |
Cited By (19)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN105205077A (en) * | 2014-06-25 | 2015-12-30 | 广州市动景计算机科技有限公司 | Page layout method, device and system |
| CN104077221A (en) * | 2014-06-27 | 2014-10-01 | 百度在线网络技术（北京）有限公司 | Style test method and device for front-end page |
| CN104077221B (en) * | 2014-06-27 | 2017-10-24 | 百度在线网络技术（北京）有限公司 | The pattern method of testing and device of front end page |
| CN104346174B (en) * | 2014-11-19 | 2017-12-29 | 北京大学 | A kind of description of online polar plot modeling process and replay method |
| CN104346174A (en) * | 2014-11-19 | 2015-02-11 | 北京大学 | Method for describing and reproducing on-line vector diagram modeling process |
| CN104951302A (en) * | 2015-06-11 | 2015-09-30 | 广州神马移动信息科技有限公司 | Webpage rendering method and device |
| CN104951187A (en) * | 2015-06-16 | 2015-09-30 | 无锡久源软件科技有限公司 | Mobile phone page block displaying method |
| US10853912B2 (en) | 2015-06-23 | 2020-12-01 | Alibaba Group Holding Limited | Method and apparatus for complete size adaptation of object to be displayed |
| WO2016206559A1 (en) * | 2015-06-23 | 2016-12-29 | 阿里巴巴集团控股有限公司 | Method and device for full size adaptation of object to be displayed |
| CN106326251A (en) * | 2015-06-23 | 2017-01-11 | 阿里巴巴集团控股有限公司 | A full-scale adaption method and device for to-be-displayed objects |
| CN106326251B (en) * | 2015-06-23 | 2019-05-17 | 阿里巴巴集团控股有限公司 | The full-scale adaptation method and device of object to be presented |
| CN105278964B (en) * | 2015-11-23 | 2018-10-12 | 金蝶软件（中国）有限公司 | component rendering method and device |
| CN105278964A (en) * | 2015-11-23 | 2016-01-27 | 金蝶软件（中国）有限公司 | Assembly rendering method and device |
| CN106445547A (en) * | 2016-10-11 | 2017-02-22 | 福建中金在线信息科技有限公司 | Method and device for generating beautifying dropdown box |
| CN106910250A (en) * | 2017-02-28 | 2017-06-30 | 百度在线网络技术（北京）有限公司 | For the method and apparatus of the operation pages in virtual reality scenario |
| CN109656827A (en) * | 2018-12-17 | 2019-04-19 | 北京云测信息技术有限公司 | A kind of control tree generation method and terminal device |
| CN109656827B (en) * | 2018-12-17 | 2021-10-19 | 北京云测信息技术有限公司 | Control tree generation method and terminal equipment |
| US11385857B2 (en) | 2019-03-06 | 2022-07-12 | Huawei Technologies Co., Ltd. | Method for displaying UI component and electronic device |
| CN114911550A (en) * | 2021-02-09 | 2022-08-16 | 阿里巴巴集团控股有限公司 | Cloud application interface processing system, method, device and equipment |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CN102841790A (en) | Web application interface dynamic adapting method for heterogeneous terminal | |
| US10706091B2 (en) | User driven computerized selection, categorization, and layout of live content components | |
| CA2773152C (en) | A method for users to create and edit web page layouts | |
| JP2023169320A (en) | System and method for providing responsive editing and display obtained by integrating hierarchical fluid components and dynamic layout | |
| US9645977B2 (en) | Systems and methods for configuring a header and layout of a mobile version of a conventional website | |
| US7694271B2 (en) | Rendering GUI widgets with generic look and feel | |
| US8560946B2 (en) | Timeline visualizations linked with other visualizations of data in a thin client | |
| US8751953B2 (en) | Progress indicators for loading content | |
| US20130326333A1 (en) | Mobile Content Management System | |
| US10049095B2 (en) | In-context editing of output presentations via automatic pattern detection | |
| US20130073945A1 (en) | Dynamic reorganization of page elements of a web application | |
| US9817811B2 (en) | Web server system, dictionary system, dictionary call method, screen control display method, and demonstration application generation method | |
| CN108664461A (en) | A kind of web form Auto-writing method and device | |
| JP2020017277A (en) | Web reporting design system for programming event operation, based on graphic interface | |
| CN106155654B (en) | Method and device for shielding webpage operation and electronic equipment | |
| JP2018501551A (en) | Formula processing method, apparatus, device, and program | |
| US10956658B2 (en) | Digital content editing of a document object model (DOM) based on object model comparison | |
| WO2016022137A1 (en) | Replicating a web technology | |
| WO2017134487A1 (en) | Method for dynamically displaying multimedia contents | |
| JP5766651B2 (en) | Multilingual Web server system and multilingual support method in Web server system | |
| CN101436181A (en) | Method for acquiring and exhibiting general-purpose web medium | |
| CN104462101B (en) | A kind of method and electronic equipment of information processing | |
| JP2008071212A (en) | Contents providing method | |
| Nebeling | Lightweight informed adaptation: Methods and tools for responsive design and development of very flexible, highly adaptive web interfaces | |
| JP7536260B1 (en) | DATA ACQUISITION SYSTEM, DATA ACQUISITION METHOD, AND DATA ACQUISITION PROGRAM |
Legal Events
| Date | Code | Title | Description |
|---|---|---|---|
| C06 | Publication | ||
| PB01 | Publication | ||
| C10 | Entry into substantive examination | ||
| SE01 | Entry into force of request for substantive examination | ||
| C02 | Deemed withdrawal of patent application after publication (patent law 2001) | ||
| WD01 | Invention patent application deemed withdrawn after publication |
Application publication date: 20121226 |