CN106547534A - 展示页面扩展点的装置及方法 - Google Patents

展示页面扩展点的装置及方法 Download PDF

Info

Publication number
CN106547534A
CN106547534A CN201610829818.3A CN201610829818A CN106547534A CN 106547534 A CN106547534 A CN 106547534A CN 201610829818 A CN201610829818 A CN 201610829818A CN 106547534 A CN106547534 A CN 106547534A
Authority
CN
China
Prior art keywords
page
extension point
code
point
placeholder
Prior art date
Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
Granted
Application number
CN201610829818.3A
Other languages
English (en)
Other versions
CN106547534B (zh
Inventor
赵文
代亚亚
Current Assignee (The listed assignees may be inaccurate. Google has not performed a legal analysis and makes no representation or warranty as to the accuracy of the list.)
Suzhou Yudeshui Electric Technology Co Ltd
Original Assignee
Huawei Technologies Co Ltd
Priority date (The priority date is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the date listed.)
Filing date
Publication date
Application filed by Huawei Technologies Co Ltd filed Critical Huawei Technologies Co Ltd
Priority to CN201610829818.3A priority Critical patent/CN106547534B/zh
Publication of CN106547534A publication Critical patent/CN106547534A/zh
Priority to PCT/CN2017/090882 priority patent/WO2018049869A1/zh
Priority to EP17850072.4A priority patent/EP3502876A4/en
Priority to US16/356,778 priority patent/US20190213224A1/en
Application granted granted Critical
Publication of CN106547534B publication Critical patent/CN106547534B/zh
Active legal-status Critical Current
Anticipated expiration legal-status Critical

Links

Classifications

    • 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
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
    • G06F16/90—Details of database functions independent of the retrieved data types
    • G06F16/95—Retrieval from the web
    • G06F16/958—Organisation or management of web site content, e.g. publishing, maintaining pages or automatic linking
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
    • G06F16/90—Details of database functions independent of the retrieved data types
    • G06F16/95—Retrieval from the web
    • G06F16/955—Retrieval from the web using information identifiers, e.g. uniform resource locators [URL]
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F3/00—Input arrangements for transferring data to be processed into a form capable of being handled by the computer; Output arrangements for transferring data from processing unit to output unit, e.g. interface arrangements
    • G06F3/01—Input arrangements or combined input and output arrangements for interaction between user and computer
    • G06F3/048—Interaction techniques based on graphical user interfaces [GUI]
    • G06F3/0481—Interaction techniques based on graphical user interfaces [GUI] based on specific properties of the displayed interaction object or a metaphor-based environment, e.g. interaction with desktop elements like windows or icons, or assisted by a cursor's changing behaviour or appearance
    • G06F3/0482—Interaction with lists of selectable items, e.g. menus
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F40/00—Handling natural language data
    • G06F40/10—Text processing
    • G06F40/12—Use of codes for handling textual entities
    • G06F40/14—Tree-structured documents
    • G06F40/143—Markup, e.g. Standard Generalized Markup Language [SGML] or Document Type Definition [DTD]
    • 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/33—Intelligent editors
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F8/00—Arrangements for software engineering
    • G06F8/70—Software maintenance or management

Landscapes

  • Engineering & Computer Science (AREA)
  • Theoretical Computer Science (AREA)
  • General Engineering & Computer Science (AREA)
  • Software Systems (AREA)
  • Physics & Mathematics (AREA)
  • General Physics & Mathematics (AREA)
  • Databases & Information Systems (AREA)
  • Data Mining & Analysis (AREA)
  • Human Computer Interaction (AREA)
  • Health & Medical Sciences (AREA)
  • Artificial Intelligence (AREA)
  • Audiology, Speech & Language Pathology (AREA)
  • Computational Linguistics (AREA)
  • General Health & Medical Sciences (AREA)
  • User Interface Of Digital Computer (AREA)
  • Information Retrieval, Db Structures And Fs Structures Therefor (AREA)

Abstract

本发明公开了一种展示页面扩展点的方法，属于计算机技术领域。所述方法包括：在显示页面时，确定该页面的源码中的扩展点占位符，根据所述扩展点占位符确定对应的所述扩展点在所述页面中位置信息，根据所述位置信息在所述页面中展示所述扩展点的可视化标记，通过在扩展页面组件时，只需要根据页面扩展点的标识即可直接确定拓展点在页面中的位置，使得网页管理者查找该拓展点在该页面上的位置时，不需要按照该定制手册在基线网页的源码中确定页面拓展点对应的代码段，并按照代码的层级关系和嵌套关系逐层回溯查找，从而克服了人工查找步骤较为繁琐的缺陷，达到了提高对网页进行扩展的效率的效果。

Description

展示页面扩展点的装置及方法
技术领域
本发明涉及计算机技术领域，特别涉及一种展示页面扩展点的装置及方法。
背景技术
在网页的前端定制开发过程中，基线是网页的软件文档或源码的一个稳定版本，在基线的基础上，网页管理者还可以对网页进行定制，比如，在基线网页中的预留位置扩展新的页面元素。
在现有技术中，网页开发者开发基线网页时，在基线网页的源码中预留扩展点，并向网页管理者提供指示预留的扩展点的定制手册，当网页管理者需要对网页进行扩展，比如增加新的页面元素时，网页管理者可以根据定制手册确定页面中哪些位置区域是预留的扩展点。
在现有技术中，页面的拓展点在基线网页中的预留位置需要网页管理者根据定制手册来确定，人工确定扩展点位置的步骤较为繁琐且工作量大，导致网页元素扩展的效率较低。
发明内容
为了克服现有技术中页面的拓展点在基线网页中的预留位置需要网页管理者根据定制手册来确定，人工确定扩展点位置的步骤较为繁琐且工作量大，导致网页元素扩展的效率较低的缺陷，本发明提供了一种展示页面扩展点的装置及方法。
第一方面，本发明提供了一种展示页面扩展点的方法，所述方法包括：
在显示页面时，确定该页面的源码中的扩展点占位符，该扩展点占位符对应该页面中的扩展点，所述扩展点是所述页面中用于扩展页面元素的区域；根据所述扩展点占位符确定对应的所述扩展点在所述页面中位置信息；根据所述位置信息在所述页面中展示所述扩展点的可视化标记。
通过在扩展页面组件时，只需要根据页面扩展点的标识即可直接确定拓展点在页面中的位置，使得网页管理者查找该拓展点在该页面上的位置时，不需要按照该定制手册在基线网页的源码中确定页面拓展点对应的代码段，并按照代码的层级关系和嵌套关系逐层回溯查找，从而解决了人工查找步骤较为繁琐的问题，达到了提高对网页进行扩展的效率的效果。
在一种可能的设计中，所述方法还包括：
在接收到对所述可视化标记的指定操作时，展示所述扩展点对应的代码编辑界面；接收在所述代码编辑界面中输入的代码。
通过在可视化标记被触发时直接打开并展示代码编辑页面，省去了网页管理者根据手册查找到文件名称，手动打开代码编辑界面的步骤，节省了人力，也提高了网页管理者编写代码的效率。
在另一种可能的设计中，在根据所述扩展点占位符确定对应的所述扩展点在所述页面中位置信息的过程中，所述方法包括：
根据所述扩展点占位符，调用元素对象矩形边界获取方法获取所述扩展点在所述页面中位置信息。
调用元素对象矩形边界获取方法获取所述扩展点在所述页面中位置信息，可以快速获取一个矩形区域相对于页面边框的准确位置信息，使得获取拓展点在页面中的位置信息开销较小且高效。
在又一种可能的设计中，所述方法可以被设计为：建立所述拓展点的所述可视化标记和所述扩展点的标识之间的关联关系。
在再一种可能的设计中，在展示所述扩展点对应的代码编辑界面时，所述扩展点占位符中包含所述扩展点的标识，在接收到对所述可视化标记的指定操作时，展示所述扩展点对应的代码编辑界面的过程中，所述方法可被设计为：
在接收到对所述可视化标记的指定操作时，获取与所述可视化标记相关联的所述扩展点的标识；根据所述扩展点的标识在所述页面的源码中进行索引，获得所述扩展点占位符在所述页面的源码中的行号；根据所述行号在所述页面的源码中显示所述扩展点占位符，以及对应所述扩展点占位符的编辑入口控件；在接收到对所述编辑入口控件的触发操作时，展示所述编辑界面。
通过接收对可视化标记的指定操作展示源码中的拓展点占位符，可以使得网页管理者获知该拓展点占位符中包含的信息，进一步通过设置一个编辑入口控件，使得网页管理者可以通过触发该控件快速编辑显示在该拓展点的页面元素，在展示编辑界面的过程中，向网页管理者或用户展示被选择的扩展点的扩展点占位符在页面源码中的具体位置，使得可展示的信息更为丰富。
在一种可能的设计中，所述方法还包括：
接收到针对在所述代码编辑界面中输入的代码的保存操作时，将所述代码保存在独立于所述页面的源码的文件中，所述文件与所述扩展点的标识相关联。
其中，通过单独保存该拓展点的代码，可以使得该拓展点中的页面元素的编辑与页面本身的编辑相独立，互不影响，达到了可以分别单独编辑页面元素以及升级页面，降低了维护页面的难度，提高了维护页面的效率。
在另一种可能的设计中，所述方法还包括：
接收到针对在所述代码编辑界面中输入的代码的保存操作后，根据所述代码渲染对应的页面元素；将渲染获得的所述页面元素显示在所述页面中所述扩展点对应的区域。
在页面管理者或者用户针对扩展点编辑代码并保存后，能够及时在页面中展示的编辑页面元素在页面中的展示效果，便于页面管理者或者用户查看编辑效果。
第二方面，本发明实施例提供了一种电子设备，该电子设备包括：处理器和存储器；该处理器被配置为执行存储器中存储的指令；该处理器通过执行指令来实现上述第一方面或者第一方面的各种可能的设计所提供的展示页面扩展点的方法。
第三方面，本发明实施例提供了一种展示页面扩展点的装置，该展示页面扩展点的装置包括至少一个单元，该至少一个单元用于实现上述第一方面或者第一方面的各种可能的设计所提供的展示页面扩展点的方法。
第四方面，本发明实施例还提供了一种计算机可读介质，该计算机可读介质存储有用于实现第一方面或者第一方面的各种可能的设计所提供的展示页面扩展点的方法。
附图说明
为了更清楚地说明本发明实施例中的技术方案，下面将对实施例描述中所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图仅仅是本发明的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他的附图。
图1是本发明一个示例性实施例提供的电子设备的结构示意图；
图2是本发明一个实施例提供的展示页面扩展点的方法的流程图；
图3是基于图2所示实施例示出的一种可视化标记示意图；
图4是基于图2所示实施例示出的一种编辑界面示意图；
图5是基于图2所示实施例示出的一种渲染前后页面的示意图；
图6是基于图2所示实施例的一种页面的示意图；
图7是本发明一个实施例提供的展示页面扩展点的装置的框图。
具体实施方式
为使本发明的目的、技术方案和优点更加清楚，下面将结合附图对本发明实施方式作进一步地详细描述。
在本文提及的“模块”是指存储在存储器中的能够实现某些功能的程序或指令；在本文中提及的“单元”是指按照逻辑划分的功能性结构，该“单元”可以由纯硬件实现，或者，软硬件的结合实现。
请参考图1，其示出了本发明一个示例性实施例提供的电子设备的结构示意图。
该电子设备10包括：处理器11和收发器12。
处理器11可以是中央处理器、网络处理器或者协处理器等，其可以包括一个或者一个以上处理核心。处理器11通过运行软件程序以及模块，从而执行各种功能应用以及数据处理。
可选的，该通信设备10还包括存储器13、高速缓存器14、总线15等部件。
其中：
存储器13与高速缓存器14分别通过总线15与处理器11相连。高速缓存器14用于缓存处理器11计算过程中的一些中间数据。
存储器13可用于存储软件程序以及模块。
存储器13可存储操作系统16、至少一个功能所需的应用程序模块17。操作系统16可以是实时操作系统(Real Time eXecutive，RTX)、LINUX、UNIX、WINDOWS或OS X之类的操作系统。该应用程序模块17可以包括占位符确定模块17a、位置信息确定模块17b、展示模块17c、代码接收模块17d、保存模块17e、渲染模块17f以及关联模块17g。
占位符确定模块17a，用于在显示页面时，确定页面的源码中的扩展点占位符，该扩展点占位符对应该页面中的扩展点，该扩展点是该页面中用于扩展页面元素的区域。
位置信息确定模块17b，用于根据该扩展点占位符确定对应的该扩展点在该页面中位置信息；根据该扩展点占位符，调用元素对象矩形边界获取方法获取该扩展点在该页面中位置信息。
展示模块17c，用于根据位置信息在页面中展示扩展点的可视化标记；在在展示该扩展点对应的代码编辑界面且接收到对该可视化标记的指定操作时，展示该扩展点对应的代码编辑界面；在接收到对该可视化标记的指定操作时，获取与该可视化标记相关联的该扩展点的标识；根据该扩展点的标识在该页面的源码中进行索引，获得该扩展点占位符在该页面的源码中的行号；根据行号在该页面的源码中显示该扩展点占位符，以及对应该扩展点占位符的编辑入口控件；在接收到对该编辑入口控件的触发操作时，展示该编辑界面。
代码接收模块17d，用于接收在该代码编辑界面中输入的代码。
保存模块17e，用于接收到针对在该代码编辑界面中输入的代码的保存操作时，将该代码保存在独立于该页面的源码的文件中，该文件与该扩展点的标识相关联。
渲染模块17f，用于接收到针对在该代码编辑界面中输入的代码的保存操作后，根据该代码渲染对应的页面元素。
关联模块17g，用于建立该拓展点的该可视化标记和该扩展点的标识之间的关联关系。
展示模块17c，还用于将渲染获得的该页面元素显示在该页面中该扩展点对应的区域。
该电子设备10可以是PC(英文：Personal Computer，中文：个人计算机)、PAD(英文：Portable Android Device，中文：平板电脑)、膝上型电脑(英文：laptop computer)、移动工作站(英文：Mobile Workstation)或者智能手机等电子设备。
请参考图2，其示出了本发明一个实施例提供的展示页面扩展点的方法的流程图。该方法可以用于图1所示的电子设备中。如图2所示，该展示页面扩展点的方法可以包括：
步骤201，在显示页面时，确定该页面的源码中的扩展点占位符。
计算机在显示页面时，通过遍历该页面对应的全部源码，根据拓展点的属性确定拓展点占位符。其中，在该源码中可以通过一个div标签来表示该扩展点占位符。例如，页面源码中的一个扩展点占位符可以如下：
<div id＝"123456"class＝"u-extend"desc＝"该扩展点用于定制XXX"></div>。
在上述拓展点占位符中，id是该拓展点占位符的标识，用于唯一标识该拓展点占位符；class是该div标签的属性，其中u-extend用于表明该div标签是一个拓展点占位符，即计算机可以在源码中，通过查找class是u-extend的div标签来确定源码中的拓展点占位符；desc是该拓展点占位符的注释，该注释用于为网页管理者和网页开发者解释该拓展点占位符的功能。
其中，该页面可以是网页管理者在网页扩展工具中打开的网页的定制页面，或者，该页面也可以是网页的使用者在浏览器中打开的页面。
其中，上述扩展点占位符对应于显示的页面中的扩展点，该扩展点是该页面中的一个区域，该区域用于扩展页面元素，比如，扩展的页面元素可以是页面中的文本、图像、按钮、复选框或者输入框等元素。
该步骤201可以由图1中的处理器11执行占位符确定模块17a来实现。
步骤202，根据该扩展点占位符，调用元素对象矩形边界获取方法获取该扩展点在该页面中位置信息。
其中，元素对象矩形边界获取方法被计算机调用后，会返回该扩展点占位符对应的拓展点相对于该页面的位置信息。该位置信息根据该页面是否支持滚动操作分为两种方式返回该页面的位置信息。该方法返回的位置信息所表示的区域是一个四条边分别与该页面的对应边框平行的矩形区域，其中该矩形区域的左边位置和右边位置均以该页面的左边框为参考，返回的数值是相对于左边框的距离，其中该矩形区域的上边位置和下边位置均以该页面的上边框为参考，返回的数值是相对于上边框的距离。
可选的，以Web环境为例，上述元素对象矩形边界获取方法可以是Element.getBoundingClientRect()方法。
在一种方式中，当该页面不支持滚动操作时，即不需要通过页面中左右方向以及上下方向的滚动，就可以查看到页面中全部的显示内容，该方法返回的该拓展点在该页面中的位置信息只含有是相对于页面边框的距离，通常该距离以像素为单位表示。
在另一种方式中，当该页面支持滚动操作时，该方法返回的该拓展点在该页面中的位置信息是相对于页面边框的距离，以及左右(或者上下)滚动条移动的相对距离。
比如，以Web环境为例，对于上述Element.getBoundingClientRect()方法中的信息表示方面而言：上述拓展点左边与页面左边框之间的距离可由Element.getBoundingClientRect()方法中的left信息表示，且上述拓展点从左侧向右滚动的距离可由Element.getBoundingClientRect()方法中的Element.scrollLeft表示。上述拓展点上边与页面上边框之间的距离可由Element.getBoundingClientRect()方法中的top信息表示，且上述拓展点从上方向下方滚动的距离可由Element.getBoundingClientRect()方法中的Element.scrollTop表示。而拓展点右边与页面左边框之间的距离可由Element.getBoundingClientRect()方法中的right信息表示，拓展点下边与页面上边框之间的距离可由Element.getBoundingClientRect()方法中的bottom表示。
例如，该拓展点的左边距页面左边框20像素，拓展点的上边距页面的上边框30像素，且左右方向滚动条没有移动，上下方向滚动已经向下滚动了25像素的距离，左右宽30像素，上下高20像素，此时，该方法返回的该拓展点的位置信息是：该拓展点的左边距页面左边框20像素，上边距页面的上边框55像素，右边距页面左边框50像素，下边距页面上边框75像素。
该步骤202可以由图1中的处理器11执行位置信息确定模块17b来实现。
步骤203，根据该位置信息在该页面中展示该扩展点的可视化标记。
由步骤202可知，获取的该位置信息是一个矩形区域，此处可以将该矩形区域中心的位置作为该可视化标记的中心，来展示该可视化标记，该可视化标记用于向网页管理者展示一个醒目的位置。例如，该可视化标记可以是一个特殊形状的图标，可以具有醒目的颜色。该可视化标记可以是控件形式。
该步骤203可以由图1中的处理器11执行展示模块17c来实现。
步骤204，建立该拓展点的该可视化标记和该扩展点的标识之间的关联关系。
其中，在步骤204中，为该拓展点的可视化标记和该拓展点的标识之间建立相关关系。相应的，若一个页面中存在多个拓展点，则为该多个拓展点中的各个拓展点分别建立各个拓展点各自对应的可视化标记和标识之间的关联关系。例如，若可视化标记是控件形式，该关联关系可以包括在该可视化标记的代码中。
该步骤204可以由图1中的处理器11执行展示模块17g来实现。
步骤205，在展示该扩展点对应的代码编辑界面且接收到对该可视化标记的指定操作时，展示该扩展点对应的代码编辑界面。
在本发明实施例中，若上述页面是网页管理者在网页扩展工具中打开的网页的定制页面，则网页管理者还可以通过对该可视化标记的操作直接进入扩展点对应的代码编辑界面。
其中，针对该可视化标记的指定操作可以由任意一种网页管理者能使用的输入设备来输入。例如，输入设备可以是鼠标，指定操作可以是单击、双击、右键点击或滚轮点击；输入设备也可以是键盘，指定的操作可以是按下特定的单个按键或者组合按键；输入设备还可以触摸板，指定操作可以是特定的手势轨迹。
计算机在接收到对该可视化标记的指定操作时，计算机将展示该拓展点对应的代码编辑界面。其中，网页管理者能在该编辑界面中输入代码。
请参考图3，其是基于图2所示实施例示出的一种可视化标记示意图。可视化标记31处于页面中，该可视化标记31的中心可以位于拓展点32的中心。
可选的，步骤205中的扩展点占位符中包含该扩展点的标识，步骤205可以通过依序执行步骤205a、205b、205c和205d来实现在接收到对该可视化标记的指定操作时，展示该扩展点对应的代码编辑界面的效果。
该步骤205可以由图1中的处理器11执行展示模块17c来实现。
步骤205a，在接收到对该可视化标记的指定操作时，获取与该可视化标记相关联的该扩展点的标识。
其中，该拓展点的标识用于在源码中唯一标识一个拓展点占位符。例如，该拓展点的标识可以是该拓展点占位符的id。
该步骤205a可以由图1中的处理器11执行展示模块17c来实现。
步骤205b，根据该扩展点的标识在该页面的源码中进行索引，获得该扩展点占位符在该页面的源码中的行号。
在该源码中，每一行代码都具有唯一的一个行号。计算机可以根据该拓展点的标识在该页面的源码中进行索引，查找该标识所在的行号。
该步骤205b可以由图1中的处理器11执行展示模块17c来实现。
步骤205c，根据该行号在该页面的源码中显示该扩展点占位符，以及对应该扩展点占位符的编辑入口控件。
其中，该拓展点占位符的编辑入口控件的外观也可以是一个特殊形状的图标，可以具有醒目的颜色，或者可以是一个特殊的字符形状。
该步骤205c可以由图1中的处理器11执行展示模块17c来实现。
步骤205d，在接收到对该编辑入口控件的触发操作时，展示该编辑界面。
其中，对该编辑入口控件的触发操作可参见步骤205中对触发操作的解释，此处不再赘述。
该步骤205d可以由图1中的处理器11执行展示模块17c来实现。
步骤206，接收在该代码编辑界面中输入的代码。
此处的代码输入工作可以由网页管理者完成，输入的方法包括但不限于使用输入设备输入，或者从存储介质中拷贝代码完成输入。计算机接收该网页开发人员在该代码编辑界面输入的代码。
该步骤206可以由图1中的处理器11执行代码接收模块17d来实现。
步骤207，接收到针对在该代码编辑界面中输入的代码的保存操作时，将该代码保存在独立于该页面的源码的文件中，该文件与该扩展点的标识相关联。
其中，计算机在接收到针对在该代码编辑界面中输入的代码的保存操作时，将该代码单独保存在一个文件中，该代码单独保存文件不会在该页面源码中代码的改变受到影响，因此，该页面中对于页面本身的优化升级和对该拓展点的编辑可实现分离，互不影响，提高了页面中各部分的独立性，有利于页面内容的编辑和修改。
在步骤207中，保存在该代码编辑界面中输入的代码的文件与该拓展点的标识相关联，可以是该文件的保存路径与该拓展点的标识相关联。
可选的，在接收到针对在该代码编辑界面中输入的代码的保存操作后，计算机可以将该拓展点从该页面中移除，使其不再可视。
例如，该独立于该页面的源码的文件可以是文件后缀为“.uslx”的文件，该文件中可以包括如下的内容：
<script id＝"xxxid"type＝"text/u-meta">
...customized content...
</script>
其中，文件中的id是该扩展点的标识，type使用text/u-meta标识扩展内容，便于框架解析、渲染到页面。
请参考图4，其是基于图2所示实施例示出的一种编辑界面示意图。拓展点的标识401位于该页面的源码界面40中，该拓展点的标识401对应的行号402标在所在代码行的前方，在该行号402前方还显示有编辑入口控件403，如图中所示，该编辑入口控件403可以是一个大写的字母E，当该编辑入口控件403被触发时，计算机显示编辑界面41，在该编辑界面41中的编辑区域411中，网页管理者可以输入代码，通过代码来编辑显示在拓展点的页面元素的功能。
其中，源码界面40和编辑界面41可以是同一个页面中的不同标签页，当源码界面40中的编辑入口控件403被触发时，比如被鼠标单击时，将展示编辑界面41对应的标签页。其中，当该编辑界面41已经处于打开状态时，计算机将该源码界面40的标签页切换至该编辑界面41的标签页；当该编辑界面41处于未打开状态时，计算机查找到存储该编辑界面41的文件，打开该文件并将当前显示的源码界面40的标签页切换显示为该编辑界面41的标签页。当网页管理者在该编辑界面41输入完成所需的代码后，可以点击保存按钮412保存该代码，计算机将在编辑界面中输入的代码单独保存在一个文件中。
该步骤207可以由图1中的处理器11执行保存模块17e来实现。
步骤208，接收到针对在该代码编辑界面中输入的代码的保存操作后，根据该代码渲染对应的页面元素。
计算机读取在该代码编辑界面中输入的代码，渲染对应的页面元素，使得该页面元素能够在该页面中实现代码中指示的功能。
该步骤208可以由图1中的处理器11执行渲染模块17f来实现。
步骤209，将渲染获得的该页面元素显示在该页面中该扩展点对应的区域。
渲染后的该页面元素可以是按钮、复选框或者输入框等组件，上述组件显示在该拓展点对应的区域，具体显示的方法可以是先将上述组件的中心与拓展点的中心重合，然后显示组件。
请参考图5，其是基于图2所示实施例示出的一种渲染前后页面的示意图。在渲染前的页面51中，在拓展点位置仍显示可视化标记511，此时虽然在编辑界面中完成了对该拓展点所在位置的组件的代码的输入，但是没有渲染该代码，所以可视化标记显示的外形和功能均不变。在包含渲染后的页面元素的页面52中，在拓展点位置显示渲染后的页面元素521，该页面元素521具有了相应的可视化外形和功能。例如，图5中该页面元素521是一个文本展示框，其中有文字“赠品x1,(送完为止)”在渲染后可以正常显示。
该步骤209可以由图1中的处理器11执行展示模块17c来实现。
在本公开实施例的一种能够实现的方式中，请参考图6，其是基于图2所示实施例的一种页面的示意图。计算机在显示该页面时，确定该页面的源码中的拓展点占位符，根据该拓展点占位符中的位置信息在该页面中显示含有该位置信息的提示按钮601、提示按钮602、提示按钮603以及提示按钮604等等。各个提示按钮上写有对应的拓展点的位置信息，该位置信息用于告知网页管理者该拓展点的位置。当提示按钮601-提示按钮604中任意一个按钮被触发时，例如鼠标的点击操作，该页面将跳转至如图4的中所示的源码界面40，可选的，该页面还可以直接跳转至图4中所示的编辑界面41，以供网页管理者输入代码并使计算机继续执行步骤207～步骤209，完成对页面元素的渲染。
在网页管理者完成对页面元素的拓展，并向全网发布定制后的页面，用户通过终端中的浏览器请求定制后的页面时，可以获取到页面的源码以及单独存储的该文件，用户的电子设备通过遍历该源码找到该源码中的拓展点的标识，根据该拓展点的标识与单独存储的文件的相关关系，找到该单独存储的文件，并根据该文件渲染本地的页面，使得本地的页面完成页面的定制，网页管理者可以依此方法将自己定制的页面更新全网中相同的页面。
综上所述，本发明实施例所示的展示页面扩展点的方法，通过在显示页面时，确定该页面的源码中的扩展点占位符，根据该扩展点占位符，调用元素对象矩形边界获取方法获取该扩展点在该页面中位置信息，根据该位置信息在该页面中展示该扩展点的可视化标记，在展示该扩展点对应的代码编辑界面且接收到对该可视化标记的指定操作时，展示该扩展点对应的代码编辑界面，接收在该代码编辑界面中输入的代码，接收到针对在该代码编辑界面中输入的代码的保存操作时，将该代码保存在独立于该页面的源码的文件中，接收到针对在该代码编辑界面中输入的代码的保存操作后，根据该代码渲染对应的页面元素，将渲染获得的该页面元素显示在该页面中该扩展点对应的区域，通过在扩展页面组件时，只需要根据页面扩展点的标识即可直接确定拓展点在页面中的位置，使得网页管理者查找该拓展点在该页面上的位置时，不需要按照该定制手册在基线网页的源码中确定页面拓展点对应的代码段，并按照代码的层级关系和嵌套关系逐层回溯查找，从而克服了人工查找步骤较为繁琐的缺陷，达到了提高对网页进行扩展的效率的效果。
请参考图7，其示出了本发明一个实施例提供的展示页面扩展点的装置的框图。该装置可以通过硬件或者软硬结合的方式实现为图1所示电子设备10的部分或者全部，用以执行如图2中由电子设备所执行的全部或者部分步骤。该装置可以包括：占位符确定单元701、位置信息确定单元702、展示单元703、代码接收单元704、保存单元705、渲染单元706或关联单元707。
占位符确定单元701，具有与占位符确定模块17a相同或相似的功能。
位置信息确定单元702，具有与位置信息确定模块17b相同或相似的功能。
展示单元703，具有与展示模块17c相同或相似的功能。
代码接收单元704，具有与代码接收模块17d相同或相似的功能。
保存单元705，具有与保存模块17e相同或相似的功能。
渲染单元706，具有与渲染模块17f相同或相似的功能。
关联单元707，具有与关联模块17g相同或相似的功能。
本领域普通技术人员可以理解实现上述实施例的全部或部分步骤可以通过硬件来完成，也可以通过程序来指令相关的硬件完成，所述的程序可以存储于一种计算机可读存储介质中，上述提到的存储介质可以是只读存储器，磁盘或光盘等。
以上所述仅为本发明的较佳实施例，并不用以限制本发明，凡在本发明的精神和原则之内，所作的任何修改、等同替换、改进等，均应包含在本发明的保护范围之内。

Claims (14)

1.一种展示页面扩展点的装置，其特征在于，所述装置包括：
占位符确定单元，用于在显示页面时，确定所述页面的源码中的扩展点占位符，所述扩展点占位符对应所述页面中的扩展点，所述扩展点是所述页面中用于扩展页面元素的区域；
位置信息确定单元，用于根据所述扩展点占位符确定对应的所述扩展点在所述页面中位置信息；
展示单元，用于根据所述位置信息在所述页面中展示所述扩展点的可视化标记。
2.根据权利要求1所述的装置，其特征在于，
所述展示单元还用于，在接收到对所述可视化标记的指定操作时，展示所述扩展点对应的代码编辑界面；
所述装置还包括：代码接收单元；
所述代码接收单元，用于接收在所述代码编辑界面中输入的代码。
3.根据权利要求1所述的装置，其特征在于，所述位置信息确定单元，具体用于：
根据所述扩展点占位符，调用元素对象矩形边界获取方法获取所述扩展点在所述页面中位置信息。
4.根据权利要求2所述的装置，其特征在于，所述装置还包括：
关联单元，用于建立所述拓展点的所述可视化标记和所述扩展点的标识之间的关联关系。
5.根据权利要求4所述的装置，其特征在于，在展示所述扩展点对应的代码编辑界面时，所述展示单元，具体用于：
在接收到对所述可视化标记的指定操作时，获取与所述可视化标记相关联的所述扩展点的标识；
根据所述扩展点的标识在所述页面的源码中进行索引，获得所述扩展点占位符在所述页面的源码中的行号；
根据所述行号在所述页面的源码中显示所述扩展点占位符，以及对应所述扩展点占位符的编辑入口控件；
在接收到对所述编辑入口控件的触发操作时，展示所述编辑界面。
6.根据权利要求5所述的装置，其特征在于，所述装置还包括：保存单元；
所述保存单元，用于在接收到针对在所述代码编辑界面中输入的代码的保存操作时，将所述代码保存在独立于所述页面的源码的文件中，所述文件与所述扩展点的标识相关联。
7.根据权利要求2、4、5或6所述的装置，其特征在于所述装置还包括：渲染单元；
所述渲染单元，用于在接收到针对在所述代码编辑界面中输入的代码的保存操作后，根据所述代码渲染对应的页面元素；
所述展示单元，还用于将渲染获得的所述页面元素显示在所述页面中所述扩展点对应的区域。
8.一种展示页面扩展点的方法，其特征在于，所述方法包括：
在显示页面时，确定所述页面的源码中的扩展点占位符，所述扩展点占位符对应所述页面中的扩展点，所述扩展点是所述页面中用于扩展页面元素的区域；
根据所述扩展点占位符确定对应的所述扩展点在所述页面中位置信息；
根据所述位置信息在所述页面中展示所述扩展点的可视化标记。
9.根据权利要求8所述的方法，其特征在于，所述方法还包括：
在接收到对所述可视化标记的指定操作时，展示所述扩展点对应的代码编辑界面；
接收在所述代码编辑界面中输入的代码。
10.根据权利要求8所述的方法，其特征在于，所述根据所述扩展点占位符确定对应的所述扩展点在所述页面中位置信息，包括：
根据所述扩展点占位符，调用元素对象矩形边界获取方法获取所述扩展点在所述页面中位置信息。
11.根据权利要求9所述的方法，其特征在于，所述方法还包括：
建立所述拓展点的所述可视化标记和所述扩展点的标识之间的关联关系。
12.根据权利要求11所述的方法，其特征在于，在展示所述扩展点对应的代码编辑界面时，所述扩展点占位符中包含所述扩展点的标识，所述在接收到对所述可视化标记的指定操作时，展示所述扩展点对应的代码编辑界面，包括：
在接收到对所述可视化标记的指定操作时，获取与所述可视化标记相关联的所述扩展点的标识；
根据所述扩展点的标识在所述页面的源码中进行索引，获得所述扩展点占位符在所述页面的源码中的行号；
根据所述行号在所述页面的源码中显示所述扩展点占位符，以及对应所述扩展点占位符的编辑入口控件；
在接收到对所述编辑入口控件的触发操作时，展示所述编辑界面。
13.根据权利要求12所述的方法，其特征在于，所述方法还包括：
接收到针对在所述代码编辑界面中输入的代码的保存操作时，将所述代码保存在独立于所述页面的源码的文件中，所述文件与所述扩展点的标识相关联。
14.根据权利要求9、11、12或13所述的方法，其特征在于，所述方法还包括：
接收到针对在所述代码编辑界面中输入的代码的保存操作后，根据所述代码渲染对应的页面元素；
将渲染获得的所述页面元素显示在所述页面中所述扩展点对应的区域。
CN201610829818.3A 2016-09-19 2016-09-19 展示页面扩展点的装置及方法 Active CN106547534B (zh)

Priority Applications (4)

Application Number Priority Date Filing Date Title
CN201610829818.3A CN106547534B (zh) 2016-09-19 2016-09-19 展示页面扩展点的装置及方法
PCT/CN2017/090882 WO2018049869A1 (zh) 2016-09-19 2017-06-29 展示页面扩展点的装置及方法
EP17850072.4A EP3502876A4 (en) 2016-09-19 2017-06-29 DEVICE AND METHOD FOR DISPLAYING AN EXPANSION POINT IN SIDES
US16/356,778 US20190213224A1 (en) 2016-09-19 2019-03-18 Page extension point presentation apparatus and method

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
CN201610829818.3A CN106547534B (zh) 2016-09-19 2016-09-19 展示页面扩展点的装置及方法

Publications (2)

Publication Number Publication Date
CN106547534A true CN106547534A (zh) 2017-03-29
CN106547534B CN106547534B (zh) 2020-04-14

Family

ID=58368148

Family Applications (1)

Application Number Title Priority Date Filing Date
CN201610829818.3A Active CN106547534B (zh) 2016-09-19 2016-09-19 展示页面扩展点的装置及方法

Country Status (4)

Country Link
US (1) US20190213224A1 (zh)
EP (1) EP3502876A4 (zh)
CN (1) CN106547534B (zh)
WO (1) WO2018049869A1 (zh)

Cited By (12)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN107085515A (zh) * 2017-03-30 2017-08-22 武汉斗鱼网络科技有限公司 个性化页面生成方法及装置
WO2018049869A1 (zh) * 2016-09-19 2018-03-22 华为技术有限公司 展示页面扩展点的装置及方法
CN108572776A (zh) * 2018-05-02 2018-09-25 广州视源电子科技股份有限公司 基于特殊字符的渲染处理方法、装置、设备及存储介质
CN109063181A (zh) * 2018-08-23 2018-12-21 北京达佳互联信息技术有限公司 数据配置方法、装置、服务器及存储介质
CN109144505A (zh) * 2018-06-25 2019-01-04 阿里巴巴集团控股有限公司 Android页面的展示方法和装置
CN110110304A (zh) * 2019-03-29 2019-08-09 东软集团股份有限公司 表单扩展方法、装置、存储介质及电子设备
CN110175026A (zh) * 2019-05-31 2019-08-27 长沙米拓信息技术有限公司 一种网页可视化编辑方法、装置及存储介质
CN110209308A (zh) * 2018-03-13 2019-09-06 腾讯科技（深圳）有限公司 光标控制方法及相关设备
CN110442815A (zh) * 2019-06-24 2019-11-12 北京奇艺世纪科技有限公司 页面生成方法、系统、装置及计算机可读存储介质
CN110489682A (zh) * 2019-07-08 2019-11-22 北京三快在线科技有限公司 一种页面加载方法和装置
CN110990087A (zh) * 2019-11-27 2020-04-10 北京明略软件系统有限公司 网络组件嵌套运行方法、装置及数据处理设备
CN111309320A (zh) * 2018-12-12 2020-06-19 玲珑视界科技（北京）有限公司 一种首页界面定制方法及系统

Families Citing this family (4)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
US20200293592A1 (en) * 2018-10-25 2020-09-17 Sanjay Kumar Methods and systems for browser extension used to generate relative xpath, absolute xpath and/or css selectors
CN112241265A (zh) * 2019-07-17 2021-01-19 易保网络技术(上海)有限公司 可视化的页面处理方法和设备
CN110888643A (zh) * 2019-11-29 2020-03-17 北京奇艺世纪科技有限公司 页面处理方法及装置
US11366658B1 (en) * 2021-01-19 2022-06-21 Sap Se Seamless lifecycle stability for extensible software features

Citations (7)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN101030139A (zh) * 2007-04-18 2007-09-05 杭州华为三康技术有限公司 一种Web界面扩展方法和装置
US20090055755A1 (en) * 2007-08-21 2009-02-26 Ryan Hicks Representing editable attributes of embedded content
CN103136176A (zh) * 2011-11-28 2013-06-05 联想(北京)有限公司 一种在编辑文档中插入内容的方法和电子设备
CN103500099A (zh) * 2013-09-27 2014-01-08 摩卡软件(天津)有限公司 一种通过扩展点和扩展实现软件快速二次开发的方法
CN105117205A (zh) * 2015-07-24 2015-12-02 北京奇虎科技有限公司 一种网页编辑方法和装置
CN105224303A (zh) * 2014-07-02 2016-01-06 北京泺喜文化传媒有限公司 页面显示的控制方法和装置
CN105389299A (zh) * 2015-10-13 2016-03-09 广州视睿电子科技有限公司 一种页面生成方法及装置

Family Cites Families (11)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
US8219922B2 (en) * 2008-12-30 2012-07-10 International Business Machines Corporation Dynamic point and extend user interface
CN102510377A (zh) * 2011-10-31 2012-06-20 北京锐安科技有限公司 一种加速网页交互的异步数据处理方法及系统
IL225079B (en) * 2012-03-06 2018-12-31 Wix Com Ltd A method and system for a home page based on a combination of editing and activation of a dynamic layout
US9026992B2 (en) * 2012-06-22 2015-05-05 Microsoft Technology Licensing, Llc Folded views in development environment
IL224401A (en) * 2013-01-24 2014-04-30 Appendad Ltd Visualization of an area in a processed code
US9785302B2 (en) * 2013-03-14 2017-10-10 Microsoft Technology Licensing, Llc Inline display and preview of related information for elements in a document
CN104503755B (zh) * 2014-12-22 2018-02-13 中软信息系统工程有限公司 基于html5高清位图的动态信息融合展现方法
US20160378738A1 (en) * 2015-06-29 2016-12-29 International Business Machines Corporation Editing one or more text files from an editing session for an associated text file
US10489122B1 (en) * 2015-09-02 2019-11-26 Devin Abbott Inline text editor elements as an abstraction layer for graphical code editing
US10255045B2 (en) * 2015-10-28 2019-04-09 Apple Inc. Graphical representation of data in a program code editor
CN106547534B (zh) * 2016-09-19 2020-04-14 华为技术有限公司 展示页面扩展点的装置及方法

Patent Citations (7)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN101030139A (zh) * 2007-04-18 2007-09-05 杭州华为三康技术有限公司 一种Web界面扩展方法和装置
US20090055755A1 (en) * 2007-08-21 2009-02-26 Ryan Hicks Representing editable attributes of embedded content
CN103136176A (zh) * 2011-11-28 2013-06-05 联想(北京)有限公司 一种在编辑文档中插入内容的方法和电子设备
CN103500099A (zh) * 2013-09-27 2014-01-08 摩卡软件(天津)有限公司 一种通过扩展点和扩展实现软件快速二次开发的方法
CN105224303A (zh) * 2014-07-02 2016-01-06 北京泺喜文化传媒有限公司 页面显示的控制方法和装置
CN105117205A (zh) * 2015-07-24 2015-12-02 北京奇虎科技有限公司 一种网页编辑方法和装置
CN105389299A (zh) * 2015-10-13 2016-03-09 广州视睿电子科技有限公司 一种页面生成方法及装置

Cited By (18)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
WO2018049869A1 (zh) * 2016-09-19 2018-03-22 华为技术有限公司 展示页面扩展点的装置及方法
WO2018176813A1 (zh) * 2017-03-30 2018-10-04 武汉斗鱼网络科技有限公司 个性化页面生成方法及装置
CN107085515A (zh) * 2017-03-30 2017-08-22 武汉斗鱼网络科技有限公司 个性化页面生成方法及装置
CN110209308A (zh) * 2018-03-13 2019-09-06 腾讯科技（深圳）有限公司 光标控制方法及相关设备
CN108572776A (zh) * 2018-05-02 2018-09-25 广州视源电子科技股份有限公司 基于特殊字符的渲染处理方法、装置、设备及存储介质
CN109144505A (zh) * 2018-06-25 2019-01-04 阿里巴巴集团控股有限公司 Android页面的展示方法和装置
CN109144505B (zh) * 2018-06-25 2022-03-01 创新先进技术有限公司 Android页面的展示方法和装置
CN109063181A (zh) * 2018-08-23 2018-12-21 北京达佳互联信息技术有限公司 数据配置方法、装置、服务器及存储介质
CN111309320A (zh) * 2018-12-12 2020-06-19 玲珑视界科技（北京）有限公司 一种首页界面定制方法及系统
CN110110304A (zh) * 2019-03-29 2019-08-09 东软集团股份有限公司 表单扩展方法、装置、存储介质及电子设备
CN110110304B (zh) * 2019-03-29 2023-10-27 东软集团股份有限公司 表单扩展方法、装置、存储介质及电子设备
CN110175026A (zh) * 2019-05-31 2019-08-27 长沙米拓信息技术有限公司 一种网页可视化编辑方法、装置及存储介质
CN110175026B (zh) * 2019-05-31 2023-10-13 长沙米拓信息技术有限公司 一种网页可视化编辑方法、装置及存储介质
CN110442815A (zh) * 2019-06-24 2019-11-12 北京奇艺世纪科技有限公司 页面生成方法、系统、装置及计算机可读存储介质
CN110489682A (zh) * 2019-07-08 2019-11-22 北京三快在线科技有限公司 一种页面加载方法和装置
CN110489682B (zh) * 2019-07-08 2022-04-15 北京三快在线科技有限公司 一种页面加载方法和装置
CN110990087A (zh) * 2019-11-27 2020-04-10 北京明略软件系统有限公司 网络组件嵌套运行方法、装置及数据处理设备
CN110990087B (zh) * 2019-11-27 2023-03-21 北京明略软件系统有限公司 网络组件嵌套运行方法、装置及数据处理设备

Also Published As

Publication number Publication date
EP3502876A1 (en) 2019-06-26
CN106547534B (zh) 2020-04-14
US20190213224A1 (en) 2019-07-11
WO2018049869A1 (zh) 2018-03-22
EP3502876A4 (en) 2019-09-11

Similar Documents

Publication Publication Date Title
CN106547534A (zh) 展示页面扩展点的装置及方法
CN104216600B (zh) 一种提供应用程序的功能的方法及触屏智能终端设备
CN110096277A (zh) 一种动态页面展示方法、装置、电子设备及存储介质
EP1610230A2 (en) A method of annotating, retrieving and rendering a markup language document with digital ink annotations
US20100083172A1 (en) Method and system for generating and displaying an interactive dynamic list view of multiply connected objects
CN103019557B (zh) 页面切换方法和装置
US20060031755A1 (en) Sharing inking during multi-modal communication
Song et al. A hybrid approach for content extraction with text density and visual importance of DOM nodes
CN111240661B (zh) 编程页面展示方法、装置、存储介质和计算机设备
CN101576878A (zh) 用户勾圈网页即时翻译系统及方法
CN103034683B (zh) 用于浏览器的页面切换方法和装置
CN104808903B (zh) 文本选择方法和装置
WO2006107529A2 (en) Method and system for aggregating rules for a property associated with a document element
CN102830928A (zh) 获得文本查询结果的方法、装置及移动设备
CN102065114A (zh) 一种移动终端访问网页的方法及装置
Roudaki et al. A classification of web browsing on mobile devices
CN105335052A (zh) 信息处理方法及终端设备
CN115878935B (zh) 一种图表的局部刷新方法、系统、装置、设备及介质
CN103810173A (zh) 分页数据处理方法和系统
CN107544970A (zh) 用于浏览器的动态局部渲染的装置和方法
CN106033387A (zh) 测试flash内部控件的方法和装置
CN111125592B (zh) 应用程序的热力图渲染方法及其装置
US10628632B2 (en) Generating a structured document based on a machine readable document and artificial intelligence-generated annotations
CN101377737A (zh) 应用系统资源管理装置
CN107423291A (zh) 一种数据翻译方法以及客户端设备

Legal Events

Date Code Title Description
PB01 Publication
PB01 Publication
SE01 Entry into force of request for substantive examination
SE01 Entry into force of request for substantive examination
GR01 Patent grant
GR01 Patent grant
TR01 Transfer of patent right

Effective date of registration: 20211119

Address after: 215010 room 704, building 5, No. 556, Changjiang Road, high tech Zone, Suzhou, Jiangsu

Patentee after: SUZHOU YUDESHUI ELECTRICAL TECHNOLOGY Co.,Ltd.

Address before: 518129 Bantian HUAWEI headquarters office building, Longgang District, Guangdong, Shenzhen

Patentee before: HUAWEI TECHNOLOGIES Co.,Ltd.

TR01 Transfer of patent right