WO2016070748A1 - 混合型客户端界面实现方法及其系统 - Google Patents
混合型客户端界面实现方法及其系统 Download PDFInfo
- 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
- 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.)
- Ceased
Links
Images
Classifications
-
- G—PHYSICS
- G06—COMPUTING OR CALCULATING; 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
一种混合型客户端界面实现方法及其系统，涉及数据显示技术。所述方法将至少两个页面片段组合成一个页面，并由浏览器组件加载和显示（302），然后将本地组件叠加于该浏览器组件上方的指定位置，以形成客户端界面（303），不但确保了客户端界面的灵活度，而且不会影响客户端的用户体验。此外，根据本地组件的位置来调整浏览器组件中页面片段的位置和/或大小，方便灵活。
Description
本发明涉及数据显示技术，特别涉及混合型客户端界面实现方法及其系统。
为了更好的适应不同的需求，可以在一个客户端界面中嵌入多个页面片段来提升客户端界面的灵活度。
通常，一个webview组件用于承载一个页面片段。那么如图1所示，如果要实现不连续的页面片段在同一客户端界面显示，则必须要使用多个webview组件。然而，本发明的发明人发现，webview组件本身比较消耗资源(加载页面、获取数据、渲染页面)，如果过多的使用webview组件必会带来性能、体验上的下降，例如消耗内存造成卡或是加载时间长等等。
发明内容
本发明的目的在于提供一种混合型客户端界面实现方法及其系统，在确保客户端界面的灵活度的同时，不会影响客户端的用户体验。
为解决上述技术问题，本发明的实施方式公开了一种混合型客户端界面实现方法，该客户端界面中包括至少两个页面片段和至少一个本地组件，该方法包括以下步骤：
生成一个浏览器组件和至少一个本地组件；
将至少两个页面片段组合成一个页面，并由该浏览器组件加载和显示，其中至少两个页面片段分布在至少一个本地组件的两侧；
将本地组件叠加于浏览器组件上方的指定位置，以形成客户端界面。
本发明的实施方式还公开了一种混合型客户端界面实现系统，该客户端界面中包括至少两个页面片段和至少一个本地组件，该系统包括：
生成模块，用于生成一个浏览器组件和至少一个本地组件；
组合模块，用于将至少两个页面片段组合成一个页面；
加载模块，用于控制生成模块生成的浏览器组件加载和显示组合模块组合的页面，其中至少两个页面片段分布在至少一个本地组件的两侧；以及
叠加模块，用于将生成模块生成的本地组件叠加于浏览器组件上方的指定位置，以形成客户端界面。
本发明实施方式与现有技术相比，主要区别及其效果在于：
在本发明中，将至少两个页面片段组合成一个页面，并由浏览器组件加载和显示，然后将本地组件叠加于该浏览器组件上方的指定位置，以形成客户端界面，不但确保了客户端界面的灵活度，而且不会影响客户端的用户体验。
进一步地，根据本地组件的位置来调整浏览器组件中页面片段的位置和/或大小，方便灵活。
进一步地，更新客户端界面时，只需要加载和渲染一次新的网页页面即可，在不影响用户体验的基础上，能够大大灵活客户端的展现能力。
进一步地，能够使客户端界面同时显示不同业务内容，以更好地适应不同需求。
图1是现有的客户端界面的结构示意图；
图2是现有的客户端界面实现方法的流程示意图；
图3是本发明第一实施方式中一种混合型客户端界面实现方法的流程示意图；
图4A-4C分别是本发明第一实施方式中一种混合型客户端界面的结构示意图；
图5是本发明第二实施方式中一种混合型客户端界面的结构示意图；
图6是本发明第二实施方式中一种混合型客户端界面实现方法的流程示意图；
图7是本发明第三实施方式中一种混合型客户端界面实现系统的结构示意图。
在以下的叙述中，为了使读者更好地理解本申请而提出了许多技术细节。但是，本领域的普通技术人员可以理解，即使没有这些技术细节和基于以下各实施方式的种种变化和修改，也可以实现本申请各权利要求所要求保护的技术方案。
为使本发明的目的、技术方案和优点更加清楚，下面将结合附图对本发明的实施方式作进一步地详细描述。
本发明第一实施方式涉及一种混合型客户端界面实现方法。图3是该混合型客户端界面实现方法的流程示意图。该客户端界面中包括至少两个页面片段和至少一个本地组件。可以理解，本地组件是在客户端本地实现界面的预制组件，包括编辑组件(Memo)、下拉框组件(Combobox)、多选框组件、单选框组件、输入框组件(Edit)、标签组件(Label)等等，但不包括浏览器组件。
该方法包括以下步骤：
在步骤301中，生成一个浏览器组件和至少一个本地组件。
此后进入步骤302，将至少两个页面片段组合成一个页面，并由该浏览器组件加载和显示，其中至少两个页面片段分布在至少一个本地组件的两侧。例如，如图4A所示，页面片段1和页面片段2分别在本地组件2的上下侧；或是如图4B所示，页面片段1、页面片段2和页面片段3分别在本地组件2的上侧、下侧和右侧；又或是如图4C所示，页面片段1、页面片段2和页面片段3分别在本地组件2的左侧、右侧和下侧等等。
优选地，各页面片段具有不同业务内容。能够使客户端界面同时显示不同业务内容，以更好地适应不同需求。
此外，可以理解，在本发明的其他实施方式中，各页面片段也可以是相同业务内容。
此后进入步骤303，将本地组件叠加于浏览器组件上方的指定位置，以形成客户端界面。在本发明的一个优选例中，将本地组件叠加于浏览器组件上方的指定位置是指：将浏览器组件中显示的页面作为背景，本地组件叠加在浏览器组件之上(遮盖掉浏览器组件的一部分)。
此后结束本流程。
在本实施方式中，将至少两个页面片段组合成一个页面，并由浏览器组件加载和显示，将本地组件叠加于该浏览器组件上方的指定位置，以形成客户端界面，不但确保了客户端界面的灵活度，而且不会影响客户端的用户体验。
本发明第二实施方式涉及一种混合型客户端界面实现方法。
第二实施方式在第一实施方式的基础上进行了改进，主要改进之处在于：根据本地组件的位置来调整浏览器组件中页面片段的位置和/或大小，方
便灵活。具体地说：
在步骤303之后还包括以下步骤：
根据本地组件的位置来调整浏览器组件中页面片段的位置和/或大小。
可以理解，在本发明的其他实施方式中，也可以根据浏览器组件中页面片段的位置和/或大小来调整本地组件的位置，或者可以同时调整本地组件的位置和浏览器组件中页面片段的位置和/或大小。
优选地，根据本地组件的位置来调整浏览器组件中页面片段的位置和/或大小的步骤中包括以下子步骤：
判断本地组件的位置与页面片段的位置是否重叠或是否符合预定义的阈值；
若本地组件的位置与页面片段的位置重叠或不符合预定义的阈值，则对页面片段的位置和/或大小进行相应调整。
可以理解，与传统的直接将本地组件和浏览器组件加载的网页页面一个个排布到客户端界面上不同，由于本实施方式将多个页面片段组合成一个页面，并由浏览器组件加载和显示，然后在该浏览器组件上方叠加本地组件，因此需要对页面片段的位置和/或大小以及本地组件的位置进行调整，以使其均匀分布(例如页面片段与组件间隙在一范围内，不能太大，也不能太小)。
可选地，调整参数包括坐标和尺寸等等。可以理解，必要时，在调整其中一个页面片段的同时，调整与该页面片段相关联的其他页面片段。当然，在本发明的其他实施方式中，也可以使用其他参数对页面片段和本地组件进行调整。
作为可选实施方式，该方法还可以包括以下步骤：
需要更新客户端界面时，将至少两个页面片段组合成一个新的页面，并由浏览器组件加载和显示。
更新客户端界面时，只需要加载和渲染一次新的网页页面即可，在不影响用户体验的基础上，能够大大灵活客户端的展现能力
此外，可以理解，可以只对其中的部分页面片段进行更新，也可以对所有页面片段进行更新。必要时，根据已叠加的本地组件调整页面片段的位置和/或大小，或甚至是重新叠加本地组件于浏览器组件上方。
优选地，若页面的url(统一资源定位)地址不变，但是内容发生变更了，这样客户端会去检查加载的内容是否和缓存里的一致，如果不一致则进行更新；若页面变更后url发生变化，那客户端会去重新加载新的资源。
如图1所示，客户端界面上具有四个区块，每个区块表示一个可视化的页面组件(view)，其可以由native组件(本地组件)或由webview组件(浏览器组件)加载页面来实现，可以看到图1分别示出了native1、webview1、native2、webview2组件。其中，webview组件为客户端上的用于加载页面的可视化组件，在webview组件中加载的html中的内容(在html动态区块中的页面片段)的位置可以通过js(javascript脚本语言)来控制，并且native组件也可以通过js来控制html中的内容(位置、大小、背景等等)。这样，可以任意的控制客户端界面上不同区块的位置。
通常是将各页面组件按顺序布局到客户端界面上，如图2所示，先渲染native1组件，放到布局中；接着使用webview1组件加载h5(html5)页面片段，加载到布局；然后渲染native2组件，放到布局中；最后使用webview2组件加载h5页面片段，加载到布局以形成客户端界面。这样，如果有n个h5页面片段，客户端就需要创建n个webview组件，加载n个页面片段，初始化和渲染n个页面片段。由于webview组件本身就比较消耗资源，所以这样的做法有比较严重的性能问题，目前我们只能尽量的少使用webview组件来减少性能的影响，因此失去了不少灵活性。
而在本发明的一个优选例中，使用单个webview组件来承载任意个、任
意位置的html动态区块(例如图5中所示的html动态区块1、html动态区块2)中的页面片段，native组件叠加于其上以形成客户端界面。具体地，如图5和图6所示，客户端先将一个webview组件加载的页面作为背景放在客户端界面里；然后客户端根据业务规则将不同的native组件(例如native1组件和native2组件)定位到屏幕的固定位置(遮盖掉webview组件的一部分)；最后如有必要或者改变，native组件可以根据当前的位置通知webview组件中的页面片段进行调整(位置，大小等)。
表1 通常方法与本发明方法的比较
我们将上述通常方法与本发明方法在表1中进行了比较，可以看到，本发明方法能够很好的提高客户端的灵活度又不失性能。
也就是说，客户端通过一个背景的webview组件来加载响应的h5页面片段集合(即由这些h5页面片段组合的一个页面)，并把由这些h5页面片段组合的一个页面添加到客户端界面(例如手机视图window)的最底层。n个h5页面片段都在一个html的页面当中，它们的布局是可以随native组件的位置进行相应调整。因此，只需要加载和渲染一次html就可以了。客户端渲染native组件，按照位置约定覆盖到背景(即最底层)的webview组件上，重复该步骤依次添加native组件到响应的位置上。
然后，native组件和h5页面片段进行通讯，从而判断h5页面片段的位置是否要进行相应的调整。可以理解，h5页面片段可以通过jsbridge的应用编程接口(Application Programming Interface，简称“API”)与native组件进行通讯，native组件可以通过webview组件的相关API与h5页面片段进行通讯，从而可以实现native组件和h5页面片段的双向通讯。具体地，
可以把覆盖在webview组件上的native组件的位置传递给h5页面片段，将native组件的位置和当前的h5页面片段位置进行比较；如果需要调整，则通过javascript操作当前的h5页面片段，进行调整。
因为native组件是覆盖在webview组件的上面，native组件的位置可能和html动态区块的位置有些重叠或者不是非常合适，所以根据native组件的位置可以动态的跳转h5页面片段的坐标和长宽等。具体过程主要如下：
1.计算当前native组件的位置信息；
2.通过webview组件的API，把对应的native组件信息及相应的位置信息报告给webview组件中的h5页面片段；
3.得到native组件的相关信息后，使用js对比当前的h5页面片段的位置信息，计算出需要改变的尺寸或坐标；
4.通过js操作h5页面片段，进行相应的位置和大小调整。
由上可以看到，webview组件和native组件通常视为一个层面上的页面组件，若要显示在native组件两侧的页面片段时，往往需要利用多个webview组件加载多个页面片段来实现与native组件的混合。而在本发明中，使用单个webview组件加载由多个页面片段组合的一个页面，并将native组件叠加于该单个webview组件上方，能够在视觉上达到同样的效果，并且同时保证了客户端界面的灵活度和性能，具有很大的优势。
以上仅为本发明的一个优选例，可以根据实际情况使用其他浏览器组件对其他类型和版本的页面进行加载，并将本地组件叠加于浏览器组件上方，以实现页面片段与本地组件的混合。此外，可以根据需要在客户端界面上显示任意数量的本地组件和页面片段，不限于上述的两个和上述的布局。
本发明的各方法实施方式均可以以软件、硬件、固件等方式实现。不管本发明是以软件、硬件、还是固件方式实现，指令代码都可以存储在任何类
型的计算机可访问的存储器中(例如永久的或者可修改的，易失性的或者非易失性的，固态的或者非固态的，固定的或者可更换的介质等等)。同样，存储器可以例如是可编程阵列逻辑(Programmable Array Logic，简称“PAL”)、随机存取存储器(Random Access Memory，简称“RAM”)、可编程只读存储器(Programmable Read Only Memory，简称“PROM”)、只读存储器(Read-Only Memory，简称“ROM”)、电可擦除可编程只读存储器(Electrically Erasable Programmable ROM，简称“EEPROM”)、磁盘、光盘、数字通用光盘(Digital Versatile Disc，简称“DVD”)等等。
本发明第三实施方式涉及一种混合型客户端界面实现系统。图7是该混合型客户端界面实现系统的结构示意图。该客户端界面中包括至少两个页面片段和至少一个本地组件，该系统包括：
生成模块，用于生成一个浏览器组件和至少一个本地组件。
组合模块，用于将至少两个页面片段组合成一个页面。优选地，各页面片段具有不同业务内容。能够使客户端界面同时显示不同业务内容，以更好地适应不同需求。此外，可以理解，在本发明的其他实施方式中，各页面片段也可以是相同业务内容。
加载模块，用于控制生成模块生成的浏览器组件加载和显示组合模块组合的页面，其中至少两个页面片段分布在至少一个本地组件的两侧。以及
叠加模块，用于将生成模块生成的本地组件叠加于浏览器组件上方的指定位置，以形成客户端界面。
在本实施方式的混合型客户端界面实现系统中，组合模块将至少两个页面片段组合成一个页面，加载模块控制生成模块生成的浏览器组件加载和显示上述页面，然后叠加模块将生成模块生成的本地组件叠加于该浏览器组件上方的指定位置，以形成客户端界面，不但确保了客户端界面的灵活度，而且不会影响客户端的用户体验。
第一实施方式是与本实施方式相对应的方法实施方式，本实施方式可与第一实施方式互相配合实施。第一实施方式中提到的相关技术细节在本实施方式中依然有效，为了减少重复，这里不再赘述。相应地，本实施方式中提到的相关技术细节也可应用在第一实施方式中。
本发明第四实施方式涉及一种混合型客户端界面实现系统。
第四实施方式在第三实施方式的基础上进行了改进，主要改进之处在于：调整模块根据本地组件的位置来调整浏览器组件中页面片段的位置和/或大小，方便灵活。具体地说：
该系统还包括调整模块，用于根据本地组件的位置来调整浏览器组件中页面片段的位置和/或大小。
可以理解，在本发明的其他实施方式中，也可以根据浏览器组件中页面片段的位置和/或大小来调整本地组件的位置，或者可以同时调整本地组件的位置和浏览器组件中页面片段的位置和/或大小。
优选地，上述调整模块进一步包括：
判断子模块，用于判断本地组件的位置与页面片段的位置是否重叠或是否符合预定义的阈值；以及
调整子模块，用于若判断子模块确认本地组件的位置与页面片段的位置重叠或不符合预定义的阈值，则对页面片段的位置和/或大小进行相应调整。
可选地，调整参数包括坐标和尺寸等等。可以理解，必要时，在调整其中一个页面片段的同时，调整与该页面片段相关联的其他页面片段。当然，在本发明的其他实施方式中，也可以使用其他参数对页面片段和本地组件进行调整。
作为可选实施方式，该系统还包括更新模块，用于需要更新客户端界面时，将至少两个页面片段组合一个新的页面，并由浏览器组件加载和显示。
更新客户端界面时，只需要加载和渲染一次新的网页页面即可，在不影响用户体验的基础上，能够大大灵活客户端的展现能力。
此外，可以理解，可以只对其中的部分页面片段进行更新，也可以对所有页面片段进行更新。必要时，根据已叠加的本地组件调整页面片段的位置，或甚至是重新叠加本地组件于浏览器组件上。
第二实施方式是与本实施方式相对应的方法实施方式，本实施方式可与第二实施方式互相配合实施。第二实施方式中提到的相关技术细节在本实施方式中依然有效，为了减少重复，这里不再赘述。相应地，本实施方式中提到的相关技术细节也可应用在第二实施方式中。
需要说明的是，本发明各设备实施方式中提到的各模块都是逻辑模块，在物理上，一个逻辑模块可以是一个物理模块，也可以是一个物理模块的一部分，还可以以多个物理模块的组合实现，这些逻辑模块本身的物理实现方式并不是最重要的，这些逻辑模块所实现的功能的组合才是解决本发明所提出的技术问题的关键。此外，为了突出本发明的创新部分，本发明上述各设备实施方式并没有将与解决本发明所提出的技术问题关系不太密切的模块引入，这并不表明上述设备实施方式并不存在其它的模块。
需要说明的是，在本专利的权利要求和说明书中，诸如第一和第二等之类的关系术语仅仅用来将一个实体或者操作与另一个实体或操作区分开来，而不一定要求或者暗示这些实体或操作之间存在任何这种实际的关系或者顺序。而且，术语“包括”、“包含”或者其任何其他变体意在涵盖非排他性的包含，从而使得包括一系列要素的过程、方法、物品或者设备不仅包括那些要素，而且还包括没有明确列出的其他要素，或者是还包括为这种过程、方法、物品或者设备所固有的要素。在没有更多限制的情况下，由语句“包括一个”限定的要素，并不排除在包括所述要素的过程、方法、物品或者设备中还存在另外的相同要素。
虽然通过参照本发明的某些优选实施方式，已经对本发明进行了图示和描述，但本领域的普通技术人员应该明白，可以在形式上和细节上对其作各种改变，而不偏离本发明的精神和范围。
Claims (10)
- 一种混合型客户端界面实现方法，其特征在于，该客户端界面中包括至少两个页面片段和至少一个本地组件，该方法包括以下步骤：生成一个浏览器组件和至少一个本地组件；将至少两个页面片段组合成一个页面，并由该浏览器组件加载和显示，其中至少两个页面片段分布在至少一个本地组件的两侧；将本地组件叠加于所述浏览器组件上方的指定位置，以形成所述客户端界面。
- 根据权利要求1所述的混合型客户端界面实现方法，其特征在于，所述将本地组件叠加于所述浏览器组件上方的指定位置的步骤之后还包括以下步骤：根据所述本地组件的位置来调整所述浏览器组件中页面片段的位置和/或大小。
- 根据权利要求2所述的混合型客户端界面实现方法，其特征在于，根据所述本地组件的位置来调整所述浏览器组件中页面片段的位置和/或大小的步骤中包括以下子步骤：判断所述本地组件的位置与所述页面片段的位置是否重叠或是否符合预定义的阈值；若所述本地组件的位置与所述页面片段的位置重叠或不符合预定义的阈值，则对所述页面片段的位置和/或大小进行相应调整。
- 根据权利要求1所述的混合型客户端界面实现方法，其特征在于，该方法还包括以下步骤：需要更新所述客户端界面时，将至少两个页面片段组合成一个新的页 面，并由所述浏览器组件加载和显示。
- 根据权利要求1至4中任一项所述的混合型客户端界面实现方法，其特征在于，所述页面片段具有不同业务内容。
- 一种混合型客户端界面实现系统，其特征在于，该客户端界面中包括至少两个页面片段和至少一个本地组件，该系统包括：生成模块，用于生成一个浏览器组件和至少一个本地组件；组合模块，用于将至少两个页面片段组合成一个页面；加载模块，用于控制所述生成模块生成的浏览器组件加载和显示所述组合模块组合的页面，其中至少两个页面片段分布在至少一个本地组件的两侧；以及叠加模块，用于将所述生成模块生成的本地组件叠加于所述浏览器组件上方的指定位置，以形成所述客户端界面。
- 根据权利要求6所述的混合型客户端界面实现系统，其特征在于，该系统还包括调整模块，用于根据所述本地组件的位置来调整所述浏览器组件中页面片段的位置和/或大小。
- 根据权利要求7所述的混合型客户端界面实现系统，其特征在于，所述调整模块包括：判断子模块，用于判断所述本地组件的位置与所述页面片段的位置是否重叠或是否符合预定义的阈值；以及调整子模块，用于若所述判断子模块确认所述本地组件的位置与所述页面片段的位置重叠或不符合预定义的阈值，则对所述页面片段的位置和/或大小进行相应调整。
- 根据权利要求6所述的混合型客户端界面实现系统，其特征在于，该系统还包括更新模块，用于需要更新所述客户端界面时，将至少两个页面 片段组合一个新的页面，并由所述浏览器组件加载和显示。
- 根据权利要求6至9中任一项所述的混合型客户端界面实现系统，其特征在于，所述页面片段具有不同业务内容。
Applications Claiming Priority (2)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201410614152.0 | 2014-11-04 | ||
| CN201410614152.0A CN105549806B (zh) | 2014-11-04 | 2014-11-04 | 混合型客户端界面实现方法及其系统 |
Publications (1)
| Publication Number | Publication Date |
|---|---|
| WO2016070748A1 true WO2016070748A1 (zh) | 2016-05-12 |
Family
ID=55829020
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| PCT/CN2015/093308 Ceased WO2016070748A1 (zh) | 2014-11-04 | 2015-10-30 | 混合型客户端界面实现方法及其系统 |
Country Status (2)
| Country | Link |
|---|---|
| CN (1) | CN105549806B (zh) |
| WO (1) | WO2016070748A1 (zh) |
Families Citing this family (7)
| 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)
| 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)
| 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 | 华为技术有限公司 | 一种页面处理方法及装置 |
-
2014
- 2014-11-04 CN CN201410614152.0A patent/CN105549806B/zh active Active
-
2015
- 2015-10-30 WO PCT/CN2015/093308 patent/WO2016070748A1/zh not_active Ceased
Patent Citations (5)
| 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 |
|---|---|
| CN105549806B (zh) | 2019-06-07 |
| CN105549806A (zh) | 2016-05-04 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| WO2016070748A1 (zh) | 混合型客户端界面实现方法及其系统 | |
| US11169694B2 (en) | Interactive layer for editing a rendering displayed via a user interface | |
| US9720582B2 (en) | Responsive image rendition authoring | |
| US8769435B1 (en) | Systems and methods for resizing an icon | |
| US20180217727A1 (en) | Method and system of scaling application windows | |
| CN104731821A (zh) | 用于异步请求模式的网页遮罩方法 | |
| US9619120B1 (en) | Picture-in-picture for operating systems | |
| KR20180066545A (ko) | 단말기, 이의 제어 방법 및 상기 방법을 구현하기 위한 기록 매체에 기록된 프로그램 | |
| KR20160113135A (ko) | 웹 기반 애플리케이션에서 편집하기 위한 문서의 인쇄 뷰를 제공하는 기법 | |
| US10241658B2 (en) | Information processing apparatus, non-transitory computer-readable recording medium with information processing program recorded thereon, and information processing method | |
| US10326780B1 (en) | Auto-sizing an untrusted view | |
| WO2017177851A1 (en) | Method for dynamically changing user interface elements | |
| US20160077899A1 (en) | Handling of inputs in a multi-process application | |
| US9507766B2 (en) | Tree tables for mobile devices and other low resolution displays | |
| US10303752B2 (en) | Transferring a web content display from one container to another container while maintaining state | |
| US11200071B2 (en) | Cognitive scrollbar | |
| CN113035154A (zh) | 一种分屏显示方法、装置、系统及电子设备 | |
| CN108345678A (zh) | 信息处理装置、信息处理系统以及信息处理方法 | |
| EP2983096A1 (en) | Method for the real-time automatic modification on the server side of a web page to the end of visualizing a content superposed to the web page | |
| KR20230080060A (ko) | 페이크 렌더링을 제공하는 웹 페이지 구축 시스템 및 그 방법 | |
| US10678646B2 (en) | Self-recovering application | |
| US20190042083A1 (en) | Managing documents with scroll boxes | |
| HK1224389B (zh) | 混合型客户端界面实现方法及其系统 | |
| US20130275912A1 (en) | Electronic apparatus and object processing method thereof | |
| WO2024000111A1 (zh) | 桌面展示方法、电子设备、显示装置及计算机可读存储介质 |
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 |