WO2016070748A1 - Procédé de réalisation d'une interface client hybride et système associé - Google Patents

Procédé de réalisation d'une interface client hybride et système associé Download PDF

Info

Publication number
WO2016070748A1
WO2016070748A1 PCT/CN2015/093308 CN2015093308W WO2016070748A1 WO 2016070748 A1 WO2016070748 A1 WO 2016070748A1 CN 2015093308 W CN2015093308 W CN 2015093308W WO 2016070748 A1 WO2016070748 A1 WO 2016070748A1
Authority
WO
WIPO (PCT)
Prior art keywords
page
component
client interface
location
local
Prior art date
Application number
PCT/CN2015/093308
Other languages
English (en)
Chinese (zh)
Inventor
鲁嘉武
Original Assignee
阿里巴巴集团控股有限公司
鲁嘉武
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 阿里巴巴集团控股有限公司, 鲁嘉武 filed Critical 阿里巴巴集团控股有限公司
Publication of WO2016070748A1 publication Critical patent/WO2016070748A1/fr

Links

Images

Classifications

    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F16/00—Information retrieval; Database structures therefor; File system structures therefor

Definitions

  • the invention relates to a data display technology, in particular to a hybrid client interface implementation method and system thereof.
  • a webview component is used to host a page fragment. Then, as shown in Figure 1, if you want to implement non-contiguous page fragments to be displayed on the same client interface, you must use multiple webview components.
  • the webview component itself consumes resources (loading pages, acquiring data, rendering pages), and excessive use of the webview component will inevitably lead to performance and experience degradation, such as consuming memory to cause a card or It is a long load time and so on.
  • the object of the present invention is to provide a hybrid client interface implementation method and system thereof, which ensure the flexibility of the client interface without affecting the user experience of the client.
  • an embodiment of the present invention discloses a hybrid client interface implementation method, where the client interface includes at least two page segments and at least one local component, and the method includes the following steps:
  • the local component is superimposed at a specified location above the browser component to form a client interface.
  • the embodiment of the present invention further discloses a hybrid client interface implementation system, where the client interface includes at least two page segments and at least one local component, and the system includes:
  • a generating module for generating a browser component and at least one local component
  • a combination module for combining at least two page segments into one page
  • a loading module configured to control a browser component generated by the generating module to load and display a combined module combination page, wherein at least two page segments are distributed on both sides of at least one local component
  • the overlay module is configured to superimpose the local component generated by the generation module on a specified position above the browser component to form a client interface.
  • At least two page segments are combined into one page, loaded and displayed by the browser component, and then the local component is superimposed on a specified position above the browser component to form a client interface, which not only ensures the client The flexibility of the end interface does not affect the user experience of the client.
  • the position and/or size of the page segments in the browser component are adjusted according to the location of the local component, which is convenient and flexible.
  • the client interface can display different business content at the same time to better adapt to different needs.
  • 1 is a schematic structural diagram of an existing client interface
  • FIG. 2 is a schematic flowchart of a method for implementing a client interface
  • FIG. 3 is a schematic flowchart of a method for implementing a hybrid client interface according to a first embodiment of the present invention
  • 4A-4C are schematic structural diagrams of a hybrid client interface in the first embodiment of the present invention.
  • FIG. 5 is a schematic structural diagram of a hybrid client interface in a second embodiment of the present invention.
  • FIG. 6 is a schematic flowchart of a method for implementing a hybrid client interface according to a second embodiment of the present invention.
  • FIG. 7 is a schematic structural diagram of a hybrid client interface implementation system according to a third embodiment of the present invention.
  • FIG. 3 is a schematic flowchart of a method for implementing the hybrid client interface.
  • the client interface includes at least two page segments and at least one local component.
  • the local component is a prefabricated component that implements the interface locally on the client, including an editing component (Memo), a drop-down box component (Combobox), a multi-selection box component, a radio button component, an input box component (Edit), and a tag component ( Label, etc., but does not include browser components.
  • the method includes the following steps:
  • step 301 a browser component and at least one local component are generated.
  • At least two page segments are combined into one page and loaded and displayed by the browser component, wherein at least two page segments are distributed on both sides of at least one local component.
  • the page segment 1 and the page segment 2 are respectively on the upper and lower sides of the local component 2; or as shown in FIG. 4B, the page segment 1, the page segment 2, and the page segment 3 are respectively on the local component 2.
  • Side, lower side and right side; or as shown in FIG. 4C, page segment 1, page segment 2 and page segment 3 are respectively on the left side, the right side and the lower side of the local component 2, and the like.
  • each page fragment has a different business content. It enables the client interface to display different business content at the same time to better adapt to different needs.
  • each page fragment may also be the same service content.
  • the local component is superimposed on a specified location above the browser component to form a client interface.
  • superimposing the local component on the specified position above the browser component means: the page displayed in the browser component is used as the background, and the local component is superimposed on the browser component (covering the browser component) a part of).
  • At least two page segments are combined into one page, and loaded and displayed by the browser component, and the local component is superimposed on a specified position above the browser component to form a client interface, which not only ensures the client.
  • the flexibility of the end interface does not affect the user experience of the client.
  • a second embodiment of the present invention relates to a hybrid client interface implementation method.
  • the second embodiment is improved on the basis of the first embodiment, and the main improvement is that the position and/or size of the page segment in the browser component is adjusted according to the position of the local component. It is flexible. Specifically:
  • step 303 After step 303, the following steps are further included:
  • the location of the local component may also be adjusted according to the position and/or size of the page fragment in the browser component, or the location of the local component and the page fragment in the browser component may be adjusted simultaneously. Location and / or size.
  • the step of adjusting the position and/or size of the page segment in the browser component according to the location of the local component comprises the following sub-steps:
  • the position and/or size of the page fragment is adjusted accordingly.
  • the adjustment parameters include coordinates and dimensions, and the like. It will be appreciated that other page segments associated with the page segment are adjusted while adjusting one of the page segments as necessary. Of course, in other embodiments of the invention, other parameters may be used to adjust the page fragment and local components.
  • the method may further include the following steps:
  • At least two page fragments are combined into a new page and loaded and displayed by the browser component.
  • page segments can be updated, or all page segments can be updated. If necessary, adjust the position and/or size of the page fragment based on the superimposed local component, or even re-overlay the local component above the browser component.
  • the client will check whether the loaded content is consistent with the cache, and if not, update; if the page changes, the url occurs. Change, the client will go to reload the new resource.
  • url Uniform Resource Locator
  • the client interface has four blocks, each of which represents a visual page view, which can be loaded by the native component (local component) or by the webview component (browser component).
  • the webview component is a visual component for loading the page on the client, and the content of the html content (the page fragment in the html dynamic block) loaded in the webview component can be controlled by js (javascript scripting language).
  • the native component can also control the content (location, size, background, etc.) in the html through js. In this way, the position of different blocks on the client interface can be arbitrarily controlled.
  • each page component is laid out in order to the client interface.
  • the native1 component is first rendered and placed in the layout; then the h5 (html5) page fragment is loaded using the webview1 component, loaded into the layout; then the native2 is rendered.
  • the component is placed in the layout; finally, the webview2 component is used to load the h5 page fragment and loaded into the layout to form the client interface.
  • the client needs to create n webview components, load n page fragments, and initialize and render n page fragments. Since the webview component itself consumes resources, this approach has serious performance problems. At present, we can only use the webview component as little as possible to reduce the impact of performance, so we lose a lot of flexibility.
  • a single webview component is used to carry any number of A page fragment in the html dynamic block of the location (eg, html dynamic block 1, html dynamic block 2 shown in FIG. 5) on which the native component is superimposed to form a client interface.
  • the client first puts a page loaded by a webview component as a background in the client interface; then the client sets different native components according to the business rule (for example, native1 component and native2 component). Locate the fixed position of the screen (covering a part of the webview component); finally, if necessary or change, the native component can adjust the page fragment in the webview component according to the current location (location, size, etc.).
  • the client loads the responding h5 page fragment collection (ie, a page combined by these h5 page fragments) through a background webview component, and adds a page composed of these h5 page fragments to the client interface ( For example, the bottom of the phone view window).
  • the n h5 page fragments are all in one html page, and their layout can be adjusted accordingly with the location of the native component. Therefore, you only need to load and render html once.
  • the client renders the native component and overwrites the background (ie, the lowest level) webview component according to the location convention. Repeat this step to add the native component to the response location.
  • the native component communicates with the h5 page fragment to determine whether the position of the h5 page fragment is to be adjusted accordingly.
  • the h5 page fragment can communicate with the native component through the application programming interface ("API") of the jsbridge, and the native component can communicate with the h5 page fragment through the related API of the webview component, thereby implementing the native component.
  • API application programming interface
  • the location of the native component overlaid on the webview component can be passed to the h5 page fragment, and the location of the native component is compared with the current h5 page fragment location; if adjustments are needed, the current h5 page fragment is manipulated via javascript to make adjustments.
  • the location of the native component may overlap with the location of the html dynamic block or is not very suitable. Therefore, according to the position of the native component, the coordinates, length and width of the h5 page segment can be dynamically jumped. .
  • the specific process is mainly as follows:
  • the webview component and the native component are usually regarded as a page component on one level.
  • To display the page fragment on both sides of the native component it is often necessary to use multiple webview components to load multiple page fragments to implement and native. Mix of components.
  • a single webview component is used to load a page composed of a plurality of page segments, and a native component is superimposed on the single webview component to achieve the same visual effect, and at the same time ensure the client interface. Flexibility and performance have great advantages.
  • the method embodiments of the present invention can all be implemented in software, hardware, firmware, and the like. Regardless of whether the invention is implemented in software, hardware, or firmware, the instruction code can be stored in any class.
  • Type of computer accessible memory eg, permanent or modifiable, volatile or non-volatile, solid or non-solid, fixed or replaceable media, etc.
  • the memory may be, for example, Programmable Array Logic ("PAL"), Random Access Memory (RAM), or Programmable Read Only Memory (PROM). "), Read-Only Memory (“ROM”), Electrically Erasable Programmable ROM (“EEPROM”), Disk, CD, Digital Versatile Disc , referred to as "DVD”) and so on.
  • PAL Programmable Array Logic
  • RAM Random Access Memory
  • PROM Programmable Read Only Memory
  • ROM Read-Only Memory
  • EEPROM Electrically Erasable Programmable ROM
  • Disk CD
  • DVD Digital Versatile Disc
  • FIG. 7 is a schematic structural diagram of the hybrid client interface implementation system.
  • the client interface includes at least two page segments and at least one local component, and the system includes:
  • a generation module for generating a browser component and at least one local component.
  • a combination module for combining at least two page segments into one page Preferably, each page fragment has a different business content. It enables the client interface to display different business content at the same time to better adapt to different needs.
  • each page fragment may also be the same service content.
  • a loading module configured to control a browser component generated by the generating module to load and display a combination of the combined module, wherein at least two page segments are distributed on both sides of the at least one local component.
  • the overlay module is configured to superimpose the local component generated by the generation module on a specified position above the browser component to form a client interface.
  • the combination module combines at least two page segments into one page, and the loading module controls the browser component generated by the generation module to load and display the above page, and then the overlay module generates the module generation.
  • the local components are superimposed on the specified location above the browser component to form a client interface, which not only ensures the flexibility of the client interface, but also does not affect the client user experience.
  • the first embodiment is a method embodiment corresponding to the present embodiment, and the present embodiment can be implemented in cooperation with the first embodiment.
  • the related technical details mentioned in the first embodiment are still effective in the present embodiment, and are not described herein again in order to reduce repetition. Accordingly, the related art details mentioned in the present embodiment can also be applied to the first embodiment.
  • a fourth embodiment of the present invention relates to a hybrid client interface implementation system.
  • the fourth embodiment is improved on the basis of the third embodiment, and the main improvement is that the adjustment module adjusts the position and/or size of the page segment in the browser component according to the position of the local component, which is convenient and flexible. Specifically:
  • the system also includes an adjustment module for adjusting the position and/or size of the page segments in the browser component based on the location of the local components.
  • the location of the local component may also be adjusted according to the position and/or size of the page fragment in the browser component, or the location of the local component and the page fragment in the browser component may be adjusted simultaneously. Location and / or size.
  • the above adjustment module further comprises:
  • a determining sub-module for determining whether the location of the local component overlaps with the location of the page fragment or whether it meets a predefined threshold
  • the adjustment submodule is configured to adjust the position and/or size of the page segment accordingly if the submodule determines that the location of the local component overlaps with the location of the page fragment or does not meet a predefined threshold.
  • the adjustment parameters include coordinates and dimensions, and the like. It will be appreciated that other page segments associated with the page segment are adjusted while adjusting one of the page segments as necessary. Of course, in other embodiments of the invention, other parameters may be used to adjust the page fragment and local components.
  • system further includes an update module, configured to combine at least two page segments into a new page when the client interface needs to be updated, and loaded and displayed by the browser component.
  • page segments can be updated, or all page segments can be updated. If necessary, adjust the position of the page fragment based on the superimposed local component, or even re-overlay the local component on the browser component.
  • the second embodiment is a method embodiment corresponding to the present embodiment, and the present embodiment can be implemented in cooperation with the second embodiment.
  • the related technical details mentioned in the second embodiment are still effective in the present embodiment, and are not described herein again in order to reduce repetition. Accordingly, the related art details mentioned in the present embodiment can also be applied to the second embodiment.
  • each module mentioned in each device implementation manner of the present invention is a logic module.
  • a logic module may be a physical module, a part of a physical module, or multiple physical entities.
  • the combined implementation of modules, the physical implementation of these logic modules themselves is not the most important, the combination of the functions implemented by these logic modules is the key to solving the technical problems raised by the present invention.
  • the above-mentioned various device embodiments of the present invention do not introduce a module that is not closely related to solving the technical problem proposed by the present invention, which does not indicate that the above device implementation does not have other Module.

Landscapes

  • Engineering & Computer Science (AREA)
  • Theoretical Computer Science (AREA)
  • Data Mining & Analysis (AREA)
  • Databases & Information Systems (AREA)
  • Physics & Mathematics (AREA)
  • General Engineering & Computer Science (AREA)
  • General Physics & Mathematics (AREA)
  • Information Transfer Between Computers (AREA)
  • User Interface Of Digital Computer (AREA)

Abstract

La présente invention concerne un procédé de réalisation d'une interface client hybride et un système associé, qui se rapportent à la technologie d'affichage de données. Le procédé consiste à : combiner au moins deux fragments de page en une page et la charger et l'afficher par un ensemble navigateur (302) ; puis superposer un ensemble local sur une position désignée au-dessus de l'ensemble navigateur pour former une interface client (303), de sorte que non seulement la flexibilité de l'interface client soit garantie, mais aussi que l'expérience d'utilisateur d'un client n'en soit pas affectée. De plus, la position et/ou la taille d'un fragment de page dans un ensemble navigateur sont ajustées en fonction de la position d'un ensemble local, ce qui est commode et flexible.
PCT/CN2015/093308 2014-11-04 2015-10-30 Procédé de réalisation d'une interface client hybride et système associé WO2016070748A1 (fr)

Applications Claiming Priority (2)

Application Number Priority Date Filing Date Title
CN201410614152.0A CN105549806B (zh) 2014-11-04 2014-11-04 混合型客户端界面实现方法及其系统
CN201410614152.0 2014-11-04

Publications (1)

Publication Number Publication Date
WO2016070748A1 true WO2016070748A1 (fr) 2016-05-12

Family

ID=55829020

Family Applications (1)

Application Number Title Priority Date Filing Date
PCT/CN2015/093308 WO2016070748A1 (fr) 2014-11-04 2015-10-30 Procédé de réalisation d'une interface client hybride et système associé

Country Status (2)

Country Link
CN (1) CN105549806B (fr)
WO (1) WO2016070748A1 (fr)

Families Citing this family (7)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN108572822A (zh) * 2018-04-13 2018-09-25 携程旅游网络技术（上海）有限公司 App客户端混合编程方法及系统
CN108959495B (zh) * 2018-06-25 2019-12-06 百度在线网络技术（北京）有限公司 H5网页的页面显示方法、装置、设备和计算机存储介质
CN110830839B (zh) * 2018-08-08 2022-03-08 腾讯科技（深圳）有限公司 多挂件展示方法、装置及存储介质
CN109725970B (zh) * 2018-12-25 2020-07-24 北京微播视界科技有限公司 应用客户端窗口展示的方法、装置及电子设备
CN111506847B (zh) * 2019-01-30 2023-06-09 阿里巴巴集团控股有限公司 网页展示方法、装置、设备及可读存储介质
CN111191171A (zh) * 2019-12-31 2020-05-22 北京奇才天下科技有限公司 基于安卓的多Fragment加载方法、装置及电子设备
CN111324834B (zh) * 2020-01-20 2024-01-16 北京有竹居网络技术有限公司 图文混排的方法、装置、电子设备及计算机可读介质

Citations (5)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
US6507854B1 (en) * 1999-11-05 2003-01-14 International Business Machines Corporation Enhanced network caching and mirroring system
CN101150559A (zh) * 2006-09-21 2008-03-26 阿里巴巴公司 一种网站之间数据交换的方法及系统
CN102999336A (zh) * 2012-11-19 2013-03-27 北京奇虎科技有限公司 应用界面实现方法和系统
CN103186370A (zh) * 2011-12-29 2013-07-03 金蝶软件（中国）有限公司 Web页面展示方法及系统
CN104050274A (zh) * 2014-06-25 2014-09-17 国家电网公司 一种html页面嵌套方法及装置

Family Cites Families (3)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
US20030187968A1 (en) * 2002-03-28 2003-10-02 Gateway, Inc. Layer menus and multiple page displays for web GUI
CN103577446B (zh) * 2012-07-30 2017-12-29 联想(北京)有限公司 一种浏览器的多页面控制方法及装置
CN103744932A (zh) * 2013-12-30 2014-04-23 华为技术有限公司 一种页面处理方法及装置

Patent Citations (5)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
US6507854B1 (en) * 1999-11-05 2003-01-14 International Business Machines Corporation Enhanced network caching and mirroring system
CN101150559A (zh) * 2006-09-21 2008-03-26 阿里巴巴公司 一种网站之间数据交换的方法及系统
CN103186370A (zh) * 2011-12-29 2013-07-03 金蝶软件（中国）有限公司 Web页面展示方法及系统
CN102999336A (zh) * 2012-11-19 2013-03-27 北京奇虎科技有限公司 应用界面实现方法和系统
CN104050274A (zh) * 2014-06-25 2014-09-17 国家电网公司 一种html页面嵌套方法及装置

Also Published As

Publication number Publication date
CN105549806A (zh) 2016-05-04
CN105549806B (zh) 2019-06-07

Similar Documents

Publication Publication Date Title
WO2016070748A1 (fr) Procédé de réalisation d'une interface client hybride et système associé
US10691331B2 (en) Native overlay for rapid editing of web content
US9720582B2 (en) Responsive image rendition authoring
US8769435B1 (en) Systems and methods for resizing an icon
KR101932675B1 (ko) 단말기, 이의 제어 방법 및 상기 방법을 구현하기 위한 기록 매체에 기록된 프로그램
US20180217727A1 (en) Method and system of scaling application windows
US20150074519A1 (en) Method and apparatus of controlling page element
US9619120B1 (en) Picture-in-picture for operating systems
KR20160113135A (ko) 웹 기반 애플리케이션에서 편집하기 위한 문서의 인쇄 뷰를 제공하는 기법
US20150347206A1 (en) Embedding a guest module within an embedder module
JP5303534B2 (ja) 体裁情報処理装置及び方法
US10241658B2 (en) Information processing apparatus, non-transitory computer-readable recording medium with information processing program recorded thereon, and information processing method
WO2017177851A1 (fr) Procédé de changement dynamique d'éléments d'interface utilisateur
US11200071B2 (en) Cognitive scrollbar
US10326780B1 (en) Auto-sizing an untrusted view
US20160077899A1 (en) Handling of inputs in a multi-process application
EP2983096B1 (fr) Procédé pour la modification automatique en temps réel du côté serveur d'une page web afin de visualiser un contenu superposé à la page web
US9507766B2 (en) Tree tables for mobile devices and other low resolution displays
JP2019020805A (ja) 反応型ウェブサイトビルダーシステム及びその方法
US9826008B1 (en) Embedding a user interface of a guest module within a user interface of an embedder module
WO2024000111A1 (fr) Procédé d'affichage de bureau, dispositif électronique, appareil d'affichage et support de stockage lisible par ordinateur
US10678646B2 (en) Self-recovering application
US20190042083A1 (en) Managing documents with scroll boxes
US20130275912A1 (en) Electronic apparatus and object processing method thereof
US8731338B1 (en) Image downscaling

Legal Events

Date Code Title Description
121 Ep: the epo has been informed by wipo that ep was designated in this application

Ref document number: 15856583

Country of ref document: EP

Kind code of ref document: A1

NENP Non-entry into the national phase

Ref country code: DE

122 Ep: pct application non-entry in european phase

Ref document number: 15856583

Country of ref document: EP

Kind code of ref document: A1