CN106354490A - Dynamic layout method for EPG page - Google Patents
Dynamic layout method for EPG page Download PDFInfo
- Publication number
- CN106354490A CN106354490A CN201610686566.3A CN201610686566A CN106354490A CN 106354490 A CN106354490 A CN 106354490A CN 201610686566 A CN201610686566 A CN 201610686566A CN 106354490 A CN106354490 A CN 106354490A
- Authority
- CN
- China
- Prior art keywords
- dom
- tree
- node
- compiled
- render
- Prior art date
- Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
- Granted
Links
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F8/00—Arrangements for software engineering
- G06F8/20—Software design
- G06F8/22—Procedural
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F8/00—Arrangements for software engineering
- G06F8/30—Creation or generation of source code
- G06F8/38—Creation or generation of source code for implementing user interfaces
Landscapes
- Engineering & Computer Science (AREA)
- Software Systems (AREA)
- General Engineering & Computer Science (AREA)
- Theoretical Computer Science (AREA)
- Physics & Mathematics (AREA)
- General Physics & Mathematics (AREA)
- Human Computer Interaction (AREA)
- Information Transfer Between Computers (AREA)
Abstract
The invention discloses a dynamic layout method for an EPG page. The dynamic layout method comprises the steps that a JavaScript file of a server is acquired and analyzed through a JS analyzer; the specific implementation mode of DOM is abstracted through Virtual DOM, and all marks are complied into corresponding local UI assemblies one by one according to the specific platform type of a client side; type information carrying a visual instruction is used for establishing the other Render Tree of a tree structure through the JS analyzer; definite coordinates which should appear on a screen are distributed for each node; rendering is carried out; displaying is carried out; the page layout JavaScript file of the server is analyzed through the C/S client side and complied into the corresponding local UI file according to the specific platform of the client side, the layout page is rendered, and therefore dynamic layout is achieved. The client side can be fast updated through the server by modifying the JavaScript file.
Description
Technical field
The present invention relates to page Dynamic Distribution method field is and in particular to a kind of epg page Dynamic Distribution method.
Background technology
With the appearance of smart machine especially intelligent terminal, the content that terminal can carry obtains more and more abundanter, needs
The business representing also gets more and more, and the frequency of the renewal iteration of service needed is also increasingly faster, the effect requirements that business is represented
More and more higher.Existing epg service showing method includes two kinds.One is the method representing business based on browser, and it includes
Following steps, browser passes through network to server pull html, and html resolver parses html document, and by each labelling by
The individual dom changing on dom tree；The style information that in html, these carry visual instructions simultaneously will be used for creating another
Tree construction render tree, render tree build after finishing, and processing stage entering " layout ", that is, save for each
Point one definite coordinate that should occur on screen of distribution；The next stage is to render, and renders and can travel through render tree, by
Each node is drawn out by user interface back end layers.It two is the method representing business based on pure c/s client, it include with
Lower step, xml layout resolver obtains and parses xml topology file in app, and each labelling is changed into view tree one by one
On view node, simultaneously in xml these carry visual instructions style informations will be used for creating another tree construction render
Tree, render tree builds after finishing, and processing stage entering " layout ", for each node distribution, one should occur in
Definite coordinate on screen, the next stage is to render, and renders and can travel through render tree, will be every by user interface back end layers
Individual node is drawn out.
Using above-mentioned first method, the rendering effect that it represents the epg page by browser is poor；And the epg page
In the case of there is Complex Animation effect, page animation occurs interim card, leads to poor user experience.Using above-mentioned second side
Method, the client xml topology file of its c/s type is as version and packs together, if necessary to update client ui it is necessary to
Again update topology file, and version of packing out again, processing business and updates speed relatively slow it is impossible to meet the quick of existing business
Reach the standard grade requirement.
Content of the invention
The present invention provides a kind of epg Dynamic Distribution method to solve above-mentioned technical problem.
The present invention is achieved through the following technical solutions:
Epg Dynamic Distribution method, comprising:
Js resolver obtains the javascript file of simultaneously resolution server；
The specific implementation of the abstract dom of virtual dom, and according to the platform specific type of client by each labelling one by one
It is compiled into corresponding local ui assembly；
Style information with visual instructions is used for creating another tree construction render tree by js resolver；
For one definite coordinate that should occur on screen of each node distribution；
Render；
Show.
Each labelling is compiled into corresponding local ui according to the platform specific type of client by described virtual dom one by one
The method of assembly is: if android or ios platform is then compiled into view, becomes the node on view tree；If
Browser has then been compiled into dom, becomes the node of dom tree.
The described step rendering includes traveling through render tree, is drawn out each node by user interface back end layers.
C/s client resolution server page layout javascript file, is compiled into according to the platform specific of client
Corresponding local ui assembly, and render layout page, thus realizing Dynamic Distribution.And server passes through modification
Javascript file can quickly allow client be updated.
Using the method for the present invention, the labelling inside js file is compiled into corresponding local ui assembly by one by one, for example
Android platform, these labels will be compiled into corresponding view assembly, and the rendering speed of these local ui assemblies can compare
The rendering speed of browser is a lot of soon, and animation effect degree can be well more a lot of than the animation effect of browser.
Js file is that javascript file can directly be deployed to server, and client goes access server to download
Javascript file, parses new javascript file, generates viewtree, renders displaying ui, by updating server
Javascript file can achieve client ui renewal it is not necessary to newly packing version realize updating.
Each big application store, more new opplication, need to repack app, upload to the examination ＆ verification of application store, update and need very
The long time, the ui becoming is updated it is only necessary to change the javascript file in server using new technical scheme client
Can, client startup next time can first check for whether server javascript file has renewal, just downloads if there are updating
New javascript file, updates very convenient convenience.
The present invention compared with prior art, at least has such advantages as and beneficial effect:
The method of the present invention, its c/s client resolution server page layout javascript file, concrete according to client
Platform is compiled into corresponding local ui assembly, and renders layout page, thus realizing Dynamic Distribution, and server passes through to repair
Changing javascript file can quickly allow client be updated.
Specific embodiment
For making the object, technical solutions and advantages of the present invention become more apparent, with reference to embodiment, the present invention is made
Further detailed description, the exemplary embodiment of the present invention and its explanation are only used for explaining the present invention, are not intended as to this
The restriction of invention.
Embodiment
The method of the present invention not only supports Intelligent set top box, also supports non intelligent machine top box.Can pass through faster
Internet carries out processing business and updates ui to Set Top Box, reaches outstanding rendering effect, and interface operation smoothness can give user simultaneously
Bring good Consumer's Experience.
Epg Dynamic Distribution method, comprising:
Js resolver obtains the javascript file of simultaneously resolution server；
The specific implementation of the abstract dom of virtual dom, and according to the platform specific type of client by each labelling one by one
It is compiled into corresponding local ui assembly, if android or ios platform is then compiled into view, become the section on view tree
Point；If browser has then been compiled into dom, become the node of dom tree；
Style information with visual instructions is used for creating another tree construction render tree by js resolver；
For one definite coordinate that should occur on screen of each node distribution；
Render, travel through render tree, by user interface back end layers, each node is drawn out；
Show.
Above-described specific embodiment, has been carried out to the purpose of the present invention, technical scheme and beneficial effect further
Describe in detail, be should be understood that the specific embodiment that the foregoing is only the present invention, be not intended to limit the present invention
Protection domain, all any modification, equivalent substitution and improvement within the spirit and principles in the present invention, done etc., all should comprise
Within protection scope of the present invention.
Claims (3)
1.epg page Dynamic Distribution's method is it is characterised in that include:
Js resolver obtains the javascript file of simultaneously resolution server；
The specific implementation of the abstract dom of virtual dom, and according to the platform specific type of client by each labelling one by one
It is compiled into corresponding local ui assembly；
Style information with visual instructions is used for creating another tree construction render tree by js resolver；
For one definite coordinate that should occur on screen of each node distribution；
Render；
Show.
2. epg page Dynamic Distribution's method according to claim 1 it is characterised in that: described virtual dom is according to visitor
The method that each labelling is compiled into corresponding local ui assembly one by one is by the platform specific type at family end: if android or
Ios platform is then compiled into view, becomes the node on view tree；If browser has then been compiled into dom, become dom
The node of tree.
3. epg page Dynamic Distribution's method according to claim 1 it is characterised in that: the described step rendering includes time
Go through render tree, by user interface back end layers, each node is drawn out.
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201610686566.3A CN106354490B (en) | 2016-08-19 | 2016-08-19 | EPG page Dynamic Distribution method |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201610686566.3A CN106354490B (en) | 2016-08-19 | 2016-08-19 | EPG page Dynamic Distribution method |
Publications (2)
| Publication Number | Publication Date |
|---|---|
| CN106354490A true CN106354490A (en) | 2017-01-25 |
| CN106354490B CN106354490B (en) | 2019-08-27 |
Family
ID=57843412
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN201610686566.3A Active CN106354490B (en) | 2016-08-19 | 2016-08-19 | EPG page Dynamic Distribution method |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN106354490B (en) |
Cited By (9)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN107861722A (en) * | 2017-11-22 | 2018-03-30 | 北京酷我科技有限公司 | A kind of method of dynamic modification UI layouts on iOS |
| CN108399072A (en) * | 2017-02-06 | 2018-08-14 | 腾讯科技（深圳）有限公司 | Five application page update method and device |
| CN108734755A (en) * | 2018-05-23 | 2018-11-02 | 北京五八信息技术有限公司 | Update method, apparatus, storage medium and the computer equipment of animation rendering effect |
| CN109542542A (en) * | 2017-09-21 | 2019-03-29 | 北京金山安全软件有限公司 | Method, device, server and terminal for updating user interaction interface |
| CN110427264A (en) * | 2019-06-28 | 2019-11-08 | 中国科学院计算技术研究所 | A kind of JS analytic method and system based on Kubernetes |
| CN112114779A (en) * | 2020-08-26 | 2020-12-22 | 北京奇艺世纪科技有限公司 | Processing method, system, device, electronic equipment and storage medium of dynamic effect object |
| CN112559098A (en) * | 2019-09-26 | 2021-03-26 | 华为技术有限公司 | Card rendering method and electronic equipment |
| CN113033142A (en) * | 2019-12-25 | 2021-06-25 | 腾讯科技（深圳）有限公司 | Information flow dynamic display method, device, equipment and medium |
| CN113596527A (en) * | 2020-04-30 | 2021-11-02 | 西安诺瓦星云科技股份有限公司 | Program distribution method, device and system and computer readable storage medium |
Citations (8)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN101365105A (en) * | 2008-10-10 | 2009-02-11 | 中国电信股份有限公司 | Method and set-top box for IPTV electronic program guide display control |
| US7577978B1 (en) * | 2000-03-22 | 2009-08-18 | Wistendahl Douglass A | System for converting TV content to interactive TV game program operated with a standard remote control and TV set-top box |
| CN101883227A (en) * | 2009-05-05 | 2010-11-10 | 百视通网络电视技术发展有限责任公司 | Multi-standard and multi-terminal-supporting electronic program guide (EPG) system and implementing method thereof |
| CN102065338A (en) * | 2010-10-29 | 2011-05-18 | 广东星海数字家庭产业技术研究院有限公司 | Digital television interaction service tag language resolution method and system |
| CN102508887A (en) * | 2011-10-19 | 2012-06-20 | 江西省南城县网信电子有限公司 | System and method for resolving digital television interaction service markup language |
| CN103870251A (en) * | 2012-12-07 | 2014-06-18 | 广州爱游信息科技有限公司 | Method and device for quickly generating game UI (User Interface) function panel from PSD (Photoshop Document) |
| US20140181631A1 (en) * | 2012-12-20 | 2014-06-26 | Cable Television Laboratories, Inc. | Administration of web page |
| CN105554552A (en) * | 2015-12-14 | 2016-05-04 | 福建新大陆通信科技股份有限公司 | UI dynamic layout system and method based on set-top box |
-
2016
- 2016-08-19 CN CN201610686566.3A patent/CN106354490B/en active Active
Patent Citations (8)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| US7577978B1 (en) * | 2000-03-22 | 2009-08-18 | Wistendahl Douglass A | System for converting TV content to interactive TV game program operated with a standard remote control and TV set-top box |
| CN101365105A (en) * | 2008-10-10 | 2009-02-11 | 中国电信股份有限公司 | Method and set-top box for IPTV electronic program guide display control |
| CN101883227A (en) * | 2009-05-05 | 2010-11-10 | 百视通网络电视技术发展有限责任公司 | Multi-standard and multi-terminal-supporting electronic program guide (EPG) system and implementing method thereof |
| CN102065338A (en) * | 2010-10-29 | 2011-05-18 | 广东星海数字家庭产业技术研究院有限公司 | Digital television interaction service tag language resolution method and system |
| CN102508887A (en) * | 2011-10-19 | 2012-06-20 | 江西省南城县网信电子有限公司 | System and method for resolving digital television interaction service markup language |
| CN103870251A (en) * | 2012-12-07 | 2014-06-18 | 广州爱游信息科技有限公司 | Method and device for quickly generating game UI (User Interface) function panel from PSD (Photoshop Document) |
| US20140181631A1 (en) * | 2012-12-20 | 2014-06-26 | Cable Television Laboratories, Inc. | Administration of web page |
| CN105554552A (en) * | 2015-12-14 | 2016-05-04 | 福建新大陆通信科技股份有限公司 | UI dynamic layout system and method based on set-top box |
Cited By (12)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN108399072A (en) * | 2017-02-06 | 2018-08-14 | 腾讯科技（深圳）有限公司 | Five application page update method and device |
| CN109542542A (en) * | 2017-09-21 | 2019-03-29 | 北京金山安全软件有限公司 | Method, device, server and terminal for updating user interaction interface |
| CN107861722A (en) * | 2017-11-22 | 2018-03-30 | 北京酷我科技有限公司 | A kind of method of dynamic modification UI layouts on iOS |
| CN108734755A (en) * | 2018-05-23 | 2018-11-02 | 北京五八信息技术有限公司 | Update method, apparatus, storage medium and the computer equipment of animation rendering effect |
| CN110427264A (en) * | 2019-06-28 | 2019-11-08 | 中国科学院计算技术研究所 | A kind of JS analytic method and system based on Kubernetes |
| CN110427264B (en) * | 2019-06-28 | 2021-11-30 | 中国科学院计算技术研究所 | Kubernetes-based JS analyzing method and system |
| CN112559098A (en) * | 2019-09-26 | 2021-03-26 | 华为技术有限公司 | Card rendering method and electronic equipment |
| US11934352B2 (en) | 2019-09-26 | 2024-03-19 | Huawei Technologies Co., Ltd. | Card rendering method and electronic device |
| CN113033142A (en) * | 2019-12-25 | 2021-06-25 | 腾讯科技（深圳）有限公司 | Information flow dynamic display method, device, equipment and medium |
| CN113596527A (en) * | 2020-04-30 | 2021-11-02 | 西安诺瓦星云科技股份有限公司 | Program distribution method, device and system and computer readable storage medium |
| CN112114779A (en) * | 2020-08-26 | 2020-12-22 | 北京奇艺世纪科技有限公司 | Processing method, system, device, electronic equipment and storage medium of dynamic effect object |
| CN112114779B (en) * | 2020-08-26 | 2024-02-09 | 北京奇艺世纪科技有限公司 | Method, system, device, electronic equipment and storage medium for processing dynamic effect object |
Also Published As
| Publication number | Publication date |
|---|---|
| CN106354490B (en) | 2019-08-27 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CN106354490A (en) | Dynamic layout method for EPG page | |
| US11182535B2 (en) | Configuring a page for drag and drop arrangement of content artifacts in a page development tool | |
| CN107832108A (en) | Rendering intent, device and the electronic equipment of 3D canvas web page elements | |
| CN108415702B (en) | Dynamic rendering method and device for application interface of mobile terminal | |
| CN103631865B (en) | Webpage generating method and equipment | |
| CN104866512B (en) | Extract the method, apparatus and system of web page contents | |
| CN110083790A (en) | Page editing method, page output method, device, computer equipment and medium | |
| CN105630522B (en) | A kind of update method, the device and system of Web application | |
| CN107239491A (en) | For realizing method, equipment, browser and electronic equipment that user behavior is followed the trail of | |
| US10055386B2 (en) | Using server side font preparation to achieve WYSIWYG and cross platform fidelity on web based word processor | |
| CN112100550A (en) | Page construction method and device | |
| KR20150079867A (en) | Html5-protocol-based webpage presentation method and device | |
| CN104424232B (en) | A kind of webpage label method and apparatus | |
| CN102306174A (en) | Method and equipment for interacting with user based on web page elements | |
| CN103389895A (en) | Method and system for generating front end page | |
| CN103646023A (en) | Page and control increasing method based on WEB | |
| CN105677654A (en) | Advertisement filtering method and device | |
| CN105094775A (en) | Webpage generation method and apparatus | |
| CN104050190B (en) | A kind of method and system of relation chain data processing, client | |
| CN105786846A (en) | Website platform component capable of generating modules in user-defined manner | |
| CN107040818B (en) | Layout analytic hierarchy process method and system for Android TV | |
| CN101776997A (en) | Interface processing method and device | |
| CN113934957A (en) | Method and system for generating rendering sketch file from webpage | |
| CN105574114A (en) | On-line plotting method based on telecom resource management standard control library | |
| CN114756228A (en) | Page processing method, device, equipment and storage medium |
Legal Events
| Date | Code | Title | Description |
|---|---|---|---|
| C06 | 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 |