CN103890727A - Web浏览器中的Web应用和辅助设备的模拟、Web应用开发工具以及使用它们的方法 - Google Patents

Web浏览器中的Web应用和辅助设备的模拟、Web应用开发工具以及使用它们的方法 Download PDF

Info

Publication number
CN103890727A
CN103890727A CN201280046855.7A CN201280046855A CN103890727A CN 103890727 A CN103890727 A CN 103890727A CN 201280046855 A CN201280046855 A CN 201280046855A CN 103890727 A CN103890727 A CN 103890727A
Authority
CN
China
Prior art keywords
web application
interactive document
document
code
web
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
CN201280046855.7A
Other languages
English (en)
Other versions
CN103890727B (zh
Inventor
Z.侯
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.)
Intel Corp
Original Assignee
Intel Corp
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 Intel Corp filed Critical Intel Corp
Publication of CN103890727A publication Critical patent/CN103890727A/zh
Application granted granted Critical
Publication of CN103890727B publication Critical patent/CN103890727B/zh
Expired - Fee Related legal-status Critical Current
Anticipated expiration legal-status Critical

Links

Images

Classifications

    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F9/00—Arrangements for program control, e.g. control units
    • G06F9/06—Arrangements for program control, e.g. control units using stored programs, i.e. using an internal store of processing equipment to receive or retain programs
    • G06F9/44—Arrangements for executing specific programs
    • G06F9/455—Emulation; Interpretation; Software simulation, e.g. virtualisation or emulation of application or operating system execution engines
    • 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/137—Hierarchical processing, e.g. outlines
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F40/00—Handling natural language data
    • G06F40/20—Natural language analysis
    • G06F40/205—Parsing

Abstract

公开设备模拟器和使用设备模拟器的方法。在一些实施例中，设备模拟器能够允许模拟的显示器与目标设备的显示器之间的精确像素对像素和英寸对英寸映射。还公开利用此类模拟器的Web应用开发工具。在一些实施例中，此类Web应用开发工具提供将电子文档源文件转换成用于多种操作系统和形状因素的交互式文档Web应用的便利方法。

Description

Web浏览器中的Web应用和辅助设备的模拟、Web应用开发工具以及使用它们的方法
发明领域
本公开一般涉及用于多个操作系统和形状因素（form factor）的设备模拟和Web应用开发。
背景技术
Web应用是在浏览器控制的环境（例如，Java applet）中托管的计算机软件应用，或以浏览器支持的语言，例如JavaScript、超文本标记语言（HTML）等编码的计算机软件应用。此类应用流行，是因为Web浏览器的广泛及跨平台使用。实际上，Web浏览器频繁地在许多流行操作系统（“OS”或“多种OS”）中使用，例如，Microsoft®公司售卖的Windows® OS sold by Microsoft®、苹果公司售卖的MAC OS®和Google®公司售卖的Android® OS。它们可以在落在范围广泛的形状因素内的设备中使用，例如桌上型计算机、膝上型上计算机、平板个人计算机（“PC”或“多个PC”）以及手持设备（例如，移动电话、智能电话等）。
使用创作工具不断地开发着Web应用，这些创作工具本身为Web应用，即在Web浏览器中托管。常常地，此类创作工具采用设备模拟器的形式，设备模拟器在开发系统上运行的Web浏览器中显示。设备模拟器包括目标设备（例如，移动电话、台式计算机等）的屏的一个或多个图像。开发中的Web应用显示在目标设备的屏的图像内。以此方式，模拟器允许开发人员在目标设备屏的上下文中预览开发中的Web应用。
为了设备模拟器精确地表示Web应用将如何在目标设备上展示，需要能够实现两种类型的映射。首先，设备模拟器必须能够像素对像素映射，其中设备模拟器中模拟的显示器（下文称为“模拟的显示器”）的一个像素关联到目标设备的显示器（下文称为“目标显示器”）上的一个像素。其次，需要英寸对英寸（即物理）映射，其中模拟的显示器的一个英寸关联到目标显示器的一个英寸。
虽然现有创作工具是有用的，但是它们无法实现精确的英寸对英寸映射。这是因为该事实，即精确的英寸对英寸映射需要有关模拟的显示器的每英寸像素的数量（PPI）的信息，或换言之，需要有关正在运行设备模拟器的开发系统的显示器的PPI信息。在许多实例中，模拟的显示器的PPI是未知的。无论如何，将开发显示器的PPI映射到目标显示器的PPI可能是困难的，即使开发显示器的PPI是已知的也是这样。
此外，现有的Web应用开发工具不提供用于同时将电子文档（如e-book）转换成同时用于多种OS和/或形状因素的交互式文档应用的直接简单机制。相反，现有Web应用开发工具一般需要应用开发人员使用不同的工具来生成用于各个OS的应用。这种过程可能繁琐且不方便，并且可能产生OS之间和/或形状因素之间的用户接口不方便的交互式文档应用。而且，用于将文档转换成交互式文档应用的许多现有实用工具不会调整页面布局以将不同平台之间分辨率和屏幕朝向的变化纳入考虑。因此，使用现有工具开发的交互式文档应用的用户可能不得不前后翻滚来阅读文档的单个页面，这不是用户所期望的。
附图说明
图1提供根据本公开的非限制实施例的设备模拟器的软件组件的框图。
图2是根据本公开的实时地调整目标设备的由设备模拟器呈示的模拟的显示器的缩放/比例的非限制方法的流程图。
图3提供能够在多种Web浏览器（例如，Internet Explorer、Firefox和Chrome）中实时地精确放大/缩小托管框架（iframe）的JavaScript伪代码的非限制示例。
图4是本公开的Web应用开发工具的一个或多个方面可基于的模型、视图、控制（MVC）体系结构模式的示范框图。
图5是根据本公开的非限制实施例的用于Web应用开发工具的顶层体系结构和工作流程图。
图6是根据本公开的非限制实施例的交互式文档Web应用的体系结构图。
图7是根据本公开的非限制实施例的编译器服务产生的原生应用的体系结构图。
图8提供根据本公开的用户界面的非限制示例。
图9是根据本公开的非限制实施例的基于Web的用户界面的体系结构图。
图10是根据本公开的非限制实施例的转换服务的体系结构图。
图11是根据本公开的Web应用开发工具的非限制示例的类图。
图12是根据本公开的非限制实施例的方法和流程图。
具体实施方式
本公开的一个方面涉及用于精确地模拟目标设备的显示器的系统和方法。相应地，本文描述的是包括处理器和其上存储设备模拟器指令的存储器的系统。当被执行时，设备模拟器指令可以使处理器执行多种功能。例如，设备模拟器指令可以使处理器在Web浏览器内生成用户界面，其中该用户界面包括至少一个托管框架和至少一个标量。在一些实施例中，目标设备的模拟可以在托管框架中运行，其中目标设备包括至少一个显示器。
设备模拟器指令在被执行时还可以工作以使处理器将所述标量的位置转化成缩放比率，并将该缩放比率应用于托管框架。在一些非限制实施例中，标量的至少一个第一位置可以关联到能够实现至少一个托管框架与目标设备的显示器之间的英寸对英寸映射的缩放比率。在又一些非限制实施例中，标量的至少一个第二位置可以关联到能够实现至少一个托管框架与目标设备的显示器之间的像素对像素映射的缩放比率。
本文还描述用于模拟目标设备的方法。这些方法可以包括例如生成浏览器执行的在Web浏览器中的目标设备的模拟，并基于由标量位置确定的缩放比率来改变模拟的尺寸。在本文描述的方法的一些非限制实施例中，标量的至少一个第一位置关联到能够实现所述模拟与所述目标设备的显示器之间的英寸对英寸映射的缩放比率。在本文描述的方法的又一些非限制实施例中，标量的至少一个第二位置关联到能够实现所述至少一个托管框架与所述目标设备的显示器之间的像素对像素映射的缩放比率。
在一些实施例中，本文描述的方法包括在处理器执行的Web浏览器内显示用户界面。该用户接口可以包括呈现层和呈示层。呈现层可以包括HTML代码，以及呈示层可以包括JavaScript代码。在一些实施例中，该方法包括在呈现层内执行目标设备的模拟，其中目标设备包括至少一个显示器。该方法还可以包括利用所述呈示层检测标量的位置，利用呈示层将标量的位置转换成缩放比率，并将缩放比率应用于模拟。在一些非限制实施例中，标量的至少一个第一位置关联到能够实现所述模拟与目标设备的至少一个显示器之间的英寸对英寸映射的缩放比率。在又一些非限制实施例中，标量的至少一个第二位置关联到能够实现至少一个托管框架与目标设备的至少一个显示器之间的像素对像素映射的缩放比率。
本公开的一个方面涉及用于实现目标设备（例如，移动电话）的浏览器托管的模拟中的精确英寸对英寸映射的系统和方法。在一些实施例中，本公开的系统和方法能够实现目标设备与目标设备的浏览器托管的模拟之间的精确英寸对英寸映射，同时还提供用于切换到模拟与目标设备之间的精确像素对像素映射的简单机制。
相应地，本文描述的是作为Web应用在计算设备的处理器上运行的设备模拟器。一般，本文描述的设备模拟器使用户界面（UI）能够在计算设备上运行的Web浏览器中显示。该UI包括至少一个设备模拟器预览区（本文中也称为“托管框架”），该至少一个设备模拟器预览区配置成模拟目标设备，例如移动电话、平板PC、膝上型计算机等的显示器。例如电子书的交互式文档Web应用可以在至少一个托管框架内运行和显示。以此方式，本公开的设备模拟器可以使用户（例如，软件开发人员）能够在模拟目标设备显示器的环境中实现交互式文档Web应用的操作和外观可视化。
除了上文描述的基本元素和功能外，本文描述的设备模拟器还可以包括紧邻至少一个托管框架或以其他方式与之相邻的至少一个设备框架。此类设备框架可以显示图像，例如目标设备的屏的图像。在此类实例中，可以将设备框架分布在托管框架周围，从而增强托管框架内执行的Web应用的模拟的操作和外观。
本文描述的设备模拟器还可以包括用于调整至少一个托管框架的属性的机制。例如，本文描述的设备模拟器的UI可以包括允许选择目标设备类型、分辨率和朝向的元素和底层代码。例如，本文描述的设备模拟器可以包括包含有关多个目标设备和形状因素例如，移动电话、平板PC、智能电话和膝上型计算机的数据的源文件。一旦选择了特定设备或属性（例如，分辨率和/或朝向），则本公开的设备模拟器可以使用调整的属性来调整托管框架的相关特性并再次呈示托管框架中运行的交互式文档Web应用。
例如，如果用户通过UI选择不同的分辨率，则本文描述的设备模拟器可以工作以调整托管框架的分辨率，并利用新选择的分辨率来再次呈示托管框架（和其中运行的Web应用）和/或一个或多个设备框架。相似地，如果通过UI更改了设备类型，则本文描述的设备模拟器可以加载与所选设备相关的数据（例如，屏成像、分辨率、朝向等），并利用与所选设备关联的特性再次呈示托管框架和/或一个或多个设备框架。
UI还可以包括标量，该标量与标量代码（稍后描述）组合使用户能够改变至少一个托管框架和/或一个或多个设备框架的尺寸。例如，可以由标量代码将标量的位置转换成缩放比率，然后可以将缩放比率应用于至少一个托管框架和/或一个或多个设备框架的缩放属性。正如稍后详细描述的，此功能性能够实现至少一个托管框架中模拟的显示器与目标设备（例如，移动电话、平板PC等）的显示器之间的精确英寸对英寸映射。以及在一些实施例中，此功能性能够提供一种高效机制以用于托管框架与目标设备的显示器之间的精确英寸对英寸映射与像素对像素映射的转换。
对于本公开来说，在标量的上下文中使用时，术语“位置”是指标量的实际位置（例如，相对于标量的另一个部分）和可归因于标量的位置的值的其中之一或二者兼有。例如，如果标量是具有可以在一定值范围（例如0至100）上左向右行进的臂部的滑块，则滑块的“位置”可以是指滑块臂部的相对位置，和/或可归因于滑块位于该位置处的值（例如，0、25、50、100等）。
图1提供根据本公开的设备模拟器的软件组件的非限制示例的框图。正如先前解释，设备模拟器可以在开发系统，例如桌上型PC的处理器上运行的Web浏览器内执行。
如图1所示，设备模拟器100包括呈现层101和呈示层102。呈现层101（本文在模型、视图、控制体系结构的上下文中也称为“视图“）包括一般运行以在开发系统的处理器上运行的Web浏览器中绘制用户界面的功能的底层代码。在图1所示的非限制示例中，呈现层101绘制预览区103、托管框架104、一个或多个设备框架105和标量106。结合Web应用开发工具的UI的产生，稍后描述呈现层101的具体操作，该web应用开发工具利用本文描述的设备模拟器以帮助产生交互式文档Web应用。为了当前论述，应该注意，可以使用HTML将呈现层101编码，并且呈现层101可以包括与本领域技术人员认识相符的多种插件。例如，以及正如下文将详细描述的，呈现层101可以包括index.html文件（或其他类似文件），该文件包含对第三方插件应用和/或数据库，例如jQuery javascript滑块插件和关联数据库的引用。
虽然图1将预览区103图示为比托管框架104大很多，但是应该理解预览区103可以是任何大小。在一些实施例中，将预览区103的大小设为使得它至少逼近托管框架104的一个尺寸。
可以将预览区103再划分（例如，使用HTML）成多个列和行，从而定义分开的区域或框架。此概念在图1中由虚线107图示，其图示预览区103被划分成三个行和三个列，从而将预览区103划分成围绕着托管框架104的8个区域（例如，8个设备框架105）。根据先前论述，可以独立地将预览区103（包括一个或多个设备框架105）的每个区域（框架）编码，以便显示图像，例如目标设备的屏的图像。稍后图8中图示此概念，这提供其中一个或多个设备框架（一个或多个）显示目标设备的屏的图像的用户界面的非限制示例。
虽然图1图示将预览区划分成围绕单个托管框架104的8个区域，但是应该理解预览区103可以被划分成任何数量的区域，并且可以包含多于一个托管框架。实际上，通过本公开可设想具有含1、2、3、4、5或更多个托管框架的预览区的设备模拟器。通过举例，预览区103可以划分成6个列和三个行，从而能够显示各被8个区域（包括8个设备框架105）围绕的两个托管框架。以此方式，可以同时呈示目标设备的多个模拟。
可以使用HTML、其变体和/或其他适合的代码来将预览区103（包括托管框架104）编码。在使用HTML将预览区103编码的实例中，可以使用例如<iframe> HTML标记来定义托管框架105。
标量106是具有用户可更改的位置范围的用户界面对象。在一些实施例中，标量106以滑块、滑轮、一对放大/缩小按钮、下拉列表和/或一系列单选按钮的形式呈现。作为可以根据本公开使用的适合标量的非限制示例，提到jQuery Ul滑块库和/或插件，其实现在稍后进行描述。
呈示层102工作以将设备模型数据和其他特性应用于托管框架104，在Web浏览器内呈示定制面板（稍后描述）以及利用目标设备的适合属性和/或用户选择的特性呈示托管框架104中运行的Web应用。呈示层102可以通过例如调用包含与目标设备的显示器关联的属性的至少一个源文件来提供此功能性。此类源文件可以包括一个或多个目标设备的信息（例如，设备类型、朝向、分辨率等）。呈示层102可以将目标显示器的属性应用于托管框架104的相关属性。由此，可以在开发系统的Web浏览器内以目标设备的适合属性显示设备模拟器100的托管框架104中运行的Web应用。
呈现层102还可以包括监视标量106的位置的标量代码107。基于标量106的位置，标量代码107可以根据执行设备模拟器100所在的浏览器，确定缩放比率或比例。例如，标量代码可以将标量106的位置转换成在Firefox Web浏览器中使用的比例或在Microsoft Internet Explorer中使用的缩放比率。为了方便和简洁，本文将此转换的结果称为“缩放比率”。
标量代码107可以将确定的缩放比率应用于预览区103、托管框架104、一个或多个设备框架105及其组合，并且利用所确定的缩放比率再次呈示预览区103（包括托管框架104和一个或多个设备框架105）。
标量代码107还可以包括事件处理机，事件处理机响应标量事件将确定的缩放比率应用于预览区103。例如，标量代码107可以在标量106的位置开始改变（“开始”）时，标量106的位置改变（“移动”或“滑动”）时，标量106的位置停止改变（“停止”）时或其组合，将确定的缩放比率应用于预览区103（或其组件）。在一些实施例中，随着标量106的位置变化，标量代码107将确定的缩放比率应用于预览区103（包括设备模拟预览区104和一个或多个框架105，如果存在的话）。在此类实例中，标量代码107可以使呈示层100更新预览区103、托管框架104、一个或多个设备框架105或其组合的缩放比率，以及使用所确定的缩放比率实时地再次呈示一个或多个此类区。
通过适当地调整标量106， 可以调整预览区103、托管框架104、一个或多个设备框架（105）及其组合的大小，以便提供目标设备的模拟的显示器与实际目标设备的精确英寸对英寸映射。这可以通过例如调整标量106以使设备模拟器100呈示开发系统的显示器上的预览区103（以及具体地托管框架104）以使预览区103（以及具体为托管框架104）的大小逼近目标设备的物理大小来实现。以此方式，设备模拟器可以提供所见即所得（WYSWYG）的环境。因此，Web应用能够以与其在目标设备上将展示的相同方式展示在设备模拟器中。
图2是根据本公开的实时地调整目标设备的由设备模拟器呈示的模拟的显示器的缩放的非限制方法的流程图。在开始步骤201中，设备模拟器100可以使用与缺省目标显示器相符的特性在预览区103的托管框架104中呈示Web应用。作为备选，设备模拟器100可以等待目标设备的选择，然后才在预览区103的全部或一部分（包括托管框架104和一个或多个设备框架105）中呈示Web应用。无论开始步骤201中执行的操作如何，在呈示预览区步骤202中，设备模拟器100呈示预览区103。
在呈示预览区103之后，在检测标量位置步骤203中，标量代码107监视标量106的位置。然后在将标量位置转换成缩放比率步骤204中，可以将标量106的位置转换成缩放比率。在将缩放比率应用于设备模拟步骤205中，设备模拟器100然后可以将确定的缩放比率应用于预览区。可以随着标量106被调整，重复步骤202-205。使用此方法，可以更新预览区103（包括托管框架104和/或一个或多个设备框架105），从而允许用户实时地将对预览区103的缩放比率的更改可视化。
在一些实施例中，本文描述的设备模拟器能够产生大小与目标设备的显示器物理大小相差约5%或更小、约2%或更小或甚至约1%或更小的目标设备的模拟的显示器。在一些实施例中，本文描述的设备模拟器能够产生大小等于目标设备的显示器物理大小的目标设备的模拟的显示器。
为了实现英寸对英寸映射，可以手动调整标量106，直到设备模拟器100呈示的模拟的显示器的比较逼近目标设备的物理大小位置。这可以通过例如在开发系统的监视器上呈示模拟的显示器，将目标设备固定到托管系统上，并在调整标量同时以目视方式将模拟的显示器的大小与目标设备的物理大小比较来实现。作为备选，此比较可以自动地进行，例如通过编码成将模拟的显示器的属性与开发显示器的每英寸像素数（点）（PPI）比较的程序来进行。例如，此类程序可以调用包含多个开发显示器的PPI信息的数据库，并将该PPI信息与模拟的显示器，具体为托管框架的相关属性比较。
还可以将标量106配置成使得选定的位置关联到与目标设备的显示器像素对像素映射的设备模拟预览区103、托管框架104、一个或多个设备框架105或其组合的缩放比率。例如，标量106的选定的位置可以关联到设备模拟预览区103、托管框架104、一个或多个设备框架105的100%的缩放比率。在一些非限制实施例中，预览区内的像素的数量大于或等于目标设备的显示器的像素的数量。即，预览区（以及具体为托管框架）的分辨率优选地等于或大于目标设备的显示器的分辨率。在此类实例中，由标量确定的缩放比率可以提供与目标设备的显示器实现像素对像素映射的模拟的显示器。
在一些实例中，预览区的分辨率可以设为低于目标设备的显示器的分辨率。在此类实例中，预览区（以及具体为特定托管框架104）中运行的模拟的显示器可以关联到目标设备的显示器的一部分。尽管如此，使用本文描述的标量，可以确定促成模拟的显示器与目标设备的显示器的对应部分之间的像素对像素映射的缩放比率。
作为可根据本公开使用的标量的非限制示例，提到通过jQuery Ul滑块插件和Javascript库（下文称为“jQuery 插件”）使能的滑块。jQuery插件提供多种滑块选项，包括开发人员可以选择的多种句柄和范围。这些句柄和范围可以由用户例如使用鼠标或键盘来进行选择。
为了图示JQuery UI滑块插件的非限制使用，参考图3。一般，图3提供示范JavaScript伪代码，其使得能够在多种Web浏览器，如Internet Explorer、Firefox和Chrome中实现托管框架（iframe）的实时精确放大/缩小。
在图3所示的非限制示例中，可以通过将如下行添加到定义呈现层101的HTML文档中（例如，index.html中）来包括jQuery库：
Figure 985974DEST_PATH_IMAGE002
以及
Figure 965431DEST_PATH_IMAGE004
Figure 745168DEST_PATH_IMAGE006
。
然后，在该HTMI文档的body部分中，可以使用“<div>”来提供滑块的定位符，例如：
Figure 202694DEST_PATH_IMAGE008
。
然后可以使用如下语句以指令jQuery库来在适合的定位符处显示滑块，其中范围具有最大值、最小值和缺省值：
当然，还可以使用不同类型的滑块和具有不同范围的滑块。
可以在先前的末尾指定滑块的事件处理机。在图3中的非限制示例中，通过如下定义事件处理机：
Figure 839529DEST_PATH_IMAGE012
这指示事件处理机将拾取滑块的每次移动，并更新预览区，从而响应滑块的每次移动实时地重新绘制预览区（包括托管框架）。但是，正如上文提到的，还可以指定响应其他事件（例如，开始和/或停止事件）重新绘制预览区的事件处理机。
图3中的示范伪代码的其余部分指定滑块位置转换成缩放比率，以及在多种Web浏览器，如Internet Explorer和Chrome中应用该缩放比率。
正如背景技术中提到的，目前的Web应用开发工具未提供应用开发人员同时将如e-book的电子文档转换成用于多种OS和/或形状因素的交互式文档应用的便利方式。相反，现有工具典型地需要应用开发人员使用用于不同OS的不同工具来将电子文档转换成此类交互式文档应用。此过程是耗时的，且可能导致所产生的交互式文档应用的用户的不连贯的体验。而且，现有工具常常未考虑分辨率、屏幕朝向和可能影响跨不同平台和操作系统的阅读体验的其他因素上的差异。
本公开可以通过提供利用本文描述的设备模拟器的集成式开发方法和Web应用开发工具来解决这些问题的其中一个或多个问题。例如，本公开的Web应用开发工具和方法可以提供一种快速地将如e-book的电子文档转换成用于一种或多种OS和形状因素的交互式文档web应用的机制。而且，本文描述的工具和方法能够调整所生成的应用的多种元素，以便将不同目标设备之间在屏幕分辨率、朝向、形状因素等上的差异纳入考虑。
相应地，本公开的另一个方面涉及Web应用开发工具。在一些实施例中，本文描述的Web应用开发工具运行在如下桌上型或膝上型计算机的开发系统的处理器上执行的Web浏览器中。该Web应用开发工具一般包括基于Web的用户界面和转换服务。在一些实施例中，这些Web应用开发工具还包括编译器服务。下文详细地论述这些组件中每个组件的功能和示范配置。
就此而言，参考图4，其提供本公开的Web应用开发工具的一个或多个方面可基于的模型、视图、控制（MVC）体系结构模式的示范框图。在该MVC模式中，响应有关其状态的信息的请求（例如来自视图），和/或响应更改状态的指令（例如，来自控制器），模型401可以管理应用域的行为和数据。在事件驱动的系统中，模型401在关于其状态的信息改变时可以通知观察方（例如视图），以使观察方能够反应。
视图402一般配置成将模型呈示成适于交互的形式，例如用户界面元素。应该理解对于单个模型可以存在多个视图。在此类情况中，每个视图可以用作与另一个视图相同或不同的目的。视图402可以具有与显示器表面（例如，监视器）1:1对应关系，并且可以配置成使得它知道如何对显示器表面进行呈示。
控制器403一般配置成接收（例如，从用户）输入，并通过对模型对象或其他资源的调用来发起对此类输入的响应。例如，控制器403可以从用户接收输入，并指令模型和视图以基于该输入来执行动作。
如上文提到的，本公开的工具和方法可以利用UI和转换服务来将如e-book的电子文档转换成交互式文档Web应用。正如下文详细将详细描述的，UI可以配置成通过例如提供上传或导入实用工具来提供用于源文件的提供的方便机制，该上传或导入实用工具使得源文件能够加载到本公开的Web应用开发工具中。一旦被加载，该转换服务可以将源文件转换成交互式文档Web应用（例如，采用HTML/JavaScript语言），这可以在设备模拟器中运行并对其进行编辑。可选地，基于Web的创作工具可以利用转换服务将交互式文档Web应用打包成适于与范围广泛多种OS和形状因素一起使用的程序包和应用安装器。
出于清晰和简明的目的，本公开着重于将以epub文件格式存储的电子文档转换成交互式文档Web应用。但是，应该理解可以使用以任何适合文件格式存储的电子文档。例如，可以使用以PDF格式、doc格式、docx格式、HTML格式、TXT格式、MOBI格式等存储的文档。
图5提供根据本公开的非限制实施例的示范Web应用开发工具的顶级体系结构和工作流程图。如图所示，Web应用开发工具500包括用户界面501、转换服务502和编译器服务503。操作中，例如通过用户界面501将例如e-book的源文件504加载到Web应用开发工具500中。一旦加载，转换服务502将源文件504转换成交互式文档Web应用505。在用户界面501内运行的设备模拟器（未示出）内生成交互式文档Web应用505的预览。
正如稍后将描述的，交互式文档Web应用505可以包括样式代码（例如，级联样式表）和动态代码（例如JavaScript）。一般，样式代码允许定制交互式文档Web应用501的用户界面。与之相比，动态代码一般执行操作以响应通过Web应用开发工具500的用户界面501进行的输入，动态地调整交互式文档Web应用501的多种元素（例如，其页面布局、朝向等）。
注意，用户界面501可以包括定制代码、模拟器控制代码和项目栏代码，其任何一个均可以用于定制交互式文档Web应用505。例如，通过UI进行的输入可以用于更改交互式文档应用505的用户接口，和/或其分辨率、布局、朝向、字体等。而且，用户接口501可以包括运行以将插件（例如社交插件）插入到交互式文档Web应用501中的元素。响应此类输入，交互式文档Web应用505和/或其预览可以被更新。
一旦完成交互式文档Web应用505的定制，则编译器服务503可以执行操作以将最终定制的交互式文档Web应用打包成适于在多种OS上安装的原生应用。在图5的示范顶层体系结构和工作流程图中图示这一点，其中编译器服务503将交互式电子文档Web应用505打包成分别用于OS1、OS2、OSn的应用安装器5071、5072、507n。编译器服务505可以使用Web工具箱或另一种适合机制将交互式文档Web应用打包成原生应用。
转换服务生成的电子文档Web应用包括使应用能够在设备模拟器中动态地进行编辑的源文件和/或底层代码。例如，电子文档Web应用可以包括动态代码，例如，配置成动态地从其他源文件生成HTML页面的JavaScript引擎。
此外，交互式文档Web应用可以包括布局代码，例如定义电子文档Web应用的用户界面的布局的一个或多个HTML页面。而且，该电子文档Web应用可以包括定义交互式文档Web应用的用户界面的每个组件的外观（例如，色彩方案、按钮形状、图标等）样式代码（例如，级联样式工作表）。交互式文档Web应用还可以包括提供内容表（TOC）以及可选地用作交互式文档web应用的入口的TOC代码（例如，一个或多个HTML文件）。例如，交互式文档Web应用可以包括含有上述源文件中所含的电子文档的每个章节的基本内容的章节代码（例如，一个或多个html文件）。
图6提供根据本公开的交互式文档Web应用的示范体系结构图。如图所示，使用上文描述的MVC体系结构来将交互式文档Web应用601编码。模型602包括动态代码603（例如，JavaScript引擎treesaver.js），动态代码603动态地根据源文件，例如布局代码604（例如，resources.html）、样式代码605（例如，style.ess）、TOC代码606（例如，index.html）和章节代码607（例如，HTML文件）生成HTML页面。
动态代码603（例如，treesaver.js）、布局代码604和/或样式代码605的其中一个或多个可以编码成使得它们在托管浏览器加载TOC代码606（例如，index.html）和/或章节代码607之前加载。这可以使得动态代码603能够使用样式代码605（例如style.ess）中指定的样式（例如样式工作表）以及布局代码604（例如，resources.html）中指定的导航布局在托管浏览器中生成HTML页面。可以在视图608（例如，托管浏览器中）呈示动态代码603生成的HTML页面，其中这些页面可以供用户查看。
动态代码603还可以响应通过控制609进行输入，控制609可以包含在本文描述的Web应用开发工具的用户界面中。因此，例如，控制609可以运行以更改模型602的多个方面，例如移到前一个/下一个章节、前一个/下一个页面或旋转屏幕。动态代码603可以响应此类输入生成HTML页面，从而更新模型602以包含通过控制609输入的更改。然后可以利用响应该输入生成的HTML页面更新视图608，从而使得用户能够查看对交互式文档Web应用的更改。
值得注意的事实是图6中示出的非限制示例中，使用HTML和JavaScript来产生交互式文档Web应用。因此，交互式文档Web应用可以是与平台无关的，因为范围广泛的多种OS和硬件均能够执行HTML和JavaScript。实际上，期望只要目标设备的OS和硬件支持Web浏览，则该目标设备应该能够无困难地执行本公开的交互式文档Web应用。
虽然本文描述的交互式文档Web应用可以是与平台和/或OS无关的，但是可能需要将此类应用打包到适合的安装器中，之后才能可以将它们安装在目标操作系统上。注意，不同的OS可能需要不同类型的安装器。例如，Microsoft Windows®可能需要使用MSI格式的安装器，而另一种OS可以需要另一种格式的安装器。在一些实施例中，本公开的Web应用开发工具可以通过可选编译器服务的使用来解决此问题。
一般，本公开的编译器服务执行操作以将交互式文档Web应用编译成目标OS的最终原生应用，并生成用于目标OS的适合安装器。在要在不同的OS上使用交互式文档Web应用的实例中，编译器服务可以配置成同时或分别地生成用于每种目标OS的原生应用和安装器。
本文公开的编译器服务可以包括预处理代码（例如，图9中的ebulwagsvc.php）和封装代码的一个或多个。预先处理代码可以执行多种功能。例如，预处理代码可以将图标（例如，用户上传的图标）添加到交互式电子文档Web应用中。作为附加或备选，该预处理代码可以将交互式电子文档Web应用压缩到单个文件中，如.zip文件中。以及在一些实施例中，一旦构建了交互式文档Web应用的各个原生应用版本，则预处理代码可以将压缩的文件上传到分发服务器，并且将下载链接呈现给基于Web的UI。
封装代码是运行为将交互式文档Web应用编译成用于多种OS和形状因素的原生应用的服务。可以将封装代码托管在本地或远程位置。例如，封装代码可以是远离运行本文描述的Web应用开发工具的开发系统的托管Web服务的计算机（例如服务器）。
图7提供根据本公开的编译器服务产生的原生应用的体系结构图的非限制示例。如图所示，编译器服务701将交互式文档Web应用封包到交互式文档Web应用程序包702中。此外，编译器服务701可以添加附加的层，例如，Web引擎703、软件开发工具箱（SDK）704和混合封包器705。
交互式文档Web应用程序包702可以包括本文公开的交互式文档Web应用的多种组件。例如，交互式文档Web应用程序包702可以包括动态代码、布局代码、样式代码、章节代码和TOC代码，正如前文描述的。交互式文档Web应用程序包可以采用包含上文论述的多个文件的压缩文件（例如，zip文件）的形式。
Web引擎703可以是与OS无关的引擎，其配置成从交互式电子文档Web应用程序包702中提取交互式电子文档Web应用。此外，Web引擎703可以配置成剖析交互式文档Web应用的底层代码（例如，布局代码（例如，html）、样式代码（例如，CSS）和动态代码（例如，JavaScript）），并将输出呈示到指定的窗口（，例如，混合封包器705指定的窗口）。目前，Web引擎必须对应于每种OS来编译。就此而言，可以跨多种OS工作的Web引擎变得可用，本公开设想了此类Web引擎。
SDK 704可以是OS相关的SDK，并且可以执行多个不同功能。例如，SDK 704可以验证特定用户是否获授权使用最终原生应用。此外，SDK可以执行操作以将最终原生应用置于全屏模式或窗口化模式。当然，这些功能仅是示范性的，并且SDK 704可以提供本领域中公知的其他SDK功能。在本公开的一些实施例中，编译器服务701编译用于每种目标OS的SDK。
混合封包器705可以是为目标OS编译的应用，并且可以用于调用验证和其他协议。例如，混合封包器705可以调用SDK 704以验证用户是否获授权使用最终原生应用。一旦成功验证，则混合封包器705可以加载目标OS的Web引擎703，并将交互式文档Web应用程序包的位置传递到Web引擎703。
无论方法如何，应该理解，编译器服务701执行操作以生成分别用于OS1和OSn的应用安装器7061、706n。这可以通过使用图7所示的示范体系结构图和方法或以另一种方式来实现。
如上文提到的，本公开的Web应用开发工具可以包括用户界面（UI）。正如下文将详细描述的，本公开的UI可以是基于Web的，并且可以允许用户编辑设备模拟器中运行的交互式文档Web应用的多种方面。对交互式文档Web应用所做的编辑可以实时地、周期性地或按变化的间隔被呈示。以此方式，Ul可以允许用户在目标设备的模拟的显示器的上下文中观察对交互式文档Web应用所做更改的效果。
为此，参考图8，其中提供个本公开的UI的非限制示例。如图所示，UI 800包括设备模拟器，该设备模拟器包括设备模拟器预览区801和设备框架802。一般，设备模拟器用作可以预览转换服务生成的交互式文档Web应用的位置。设备框架802一般关联到本文先前描述的设备模拟器的一个或多个设备框架。因此，设备框架802可以执行操作以显示一个或多个图像，如目标设备（例如，移动电话、平板PC等）的屏的图像。设备模拟器预览区801可以关联到本文先前描述的设备模拟器的托管框架。因此，交互式文档Web应用的预览可以在设备模拟器预览区801内运行。
正如图8中进一步图示的，UI 800可以包括其他组件，例如项目栏803、一个或多个模拟器设置面板804和一个或多个定制面板805。一般，项目栏803包含与项目级操作相关的元素。例如，项目栏803可以包括允许用户选择项目类型、创建新项目、制作测试程序包和/或发布现有项目的发行程序包的元素。
模拟器设置面板804一般包括与UI 800内运行的设备模拟器的操作相关的元素。例如，模拟器设置面板804可以包括标量806（例如，滑块），标量806（例如，滑块）可以运行以调整设备模拟器预览区801和/或设备框架802的缩放比率。在一些实施例中，标量806可以能够实现设备模拟器生成的模拟的显示器与目标设备的显示器的像素对像素和英寸对英寸映射，如前文描述的。
除了标量806外，模拟器设置面板804可以包括影响UI 800内执行的设备模拟器中运行的交互式文档Web应用的显示器的其他定制命令。例如，模拟器设置面板可以包括允许更改模拟的设备类型、分辨率、朝向（旋转）等的命令。
定制面板805可以包括改变交互式文档应用的格式、样式和布局的命令。例如，定制面板805可以包括更改交互式文档Web应用的用户界面、应用中的信息的组织、字体等的命令。此外，定制面板805可以包括在交互式文档Web应用内的适合位置处插入插件的命令。例如，定制面板805可以包括在交互式文档Web应用内的适合位置处插入至社交媒体站点（例如，www.facebook.com和www.twitter.com）的链接或插件的命令。正如稍后将要描述的，这可以使用将相关插件代码插入到交互式文档Web应用的源文件中的动态代码来实现。
本公开的基于Web的UI可以使用MVC模式来设计。作为此概念的非限制图示，参考图9，图9提供根据本公开的UI 900的非限制体系结构图。
当选择e-book为项目类型（例如，通过项目栏803）时，UI 900的底层代码可以生成适合的控制器类对象903（例如，eBookController.js）以从其他资源，例如模型类对象904（例如，eBookmodel.js）加载用于所选项目的相关数据和面板。此外，控制器类对象903可以在Web浏览器中呈示相关定制面板。
UI 900的底层代码还可以生成一个或多个附加控制器类对象以从适合的资源加载设备模拟器数据，并呈示UI 900中运行的设备模拟器的设备框架。这在图9的非限制示例中予以示出，其中deviceHelper.js从sharedmodel.js（包含模拟器信息的模型资源）加载设备模拟器数据。
当（例如通过上传、导入或另一种方式）提供如epub文档的源文档时，可以使用转换服务901（例如，图9中的epub2html.php）将该源文件转换成包含布局和样式代码的交互式文档Web应用905，正如上文解释的。例如，epub2html.php服务可以将源文件转换成包括HTML和CSS文件的交互式文档Web应用。一旦完成，控制器类对象903（例如，eBookController.js）可以加载交互式文档Web应用，并将其呈示在设备模拟器预览区中。
当调用如项目栏803、一个或多个模拟器设置面板804和一个或多个定制面板805中包含的那些的命令（例如，单击它们或将其拖放在设备模拟器预览区中）时，控制器类对象903（例如，eBookcontroller.js）可以（例如通过如ebupdatesvc.php的服务）指令转换服务901修改交互式文档Web应用的源文件（例如，如resources.html的布局代码）、如style.css等的样式代码）以包含期望的更改。此外，控制器类对象903可以指令转换服务901在视图902的设备模拟器预览区中重新加载该交互式文档Web应用。一旦对交互式文档应用905的编辑完成，则编译服务（例如ebulgwasvc.php）906可以编译用于多种OS的原生安装器。
根据上文，应该显见到本公开的非限制实施例的转换服务可以执行两个功能。第一，本文描述的转换服务可以执行操作以将电子文档转换成交互式文档Web应用（例如，从epub转换到webapp）。其次，本文描述的转换服务可以执行操作以更新交互式文档Web应用的源文件以包含通过UI所做的任何更改。如图9所示以及上文简要描述，这两个功能可以由相应服务，例如epub2html.php和ebupdatesvc.php来执行。
关于电子文档转换成交互式Web应用，本文描述的转换服务（例如，图9中的epub2html.php）可以使用转换算法从文档源文件提取数据。一般，转换算法包括e-book剖析器和webapp生成器，该e-book剖析器提取电子文档源文件（采用epub或另一种支持的公式）以检索相关的数据，以及webapp生成器创建交互式Web应用的某些源文件。例如，e-book剖析器可以提取与创作者、标题、发行者、章节列表等对应的元数据，以及剖析文档源文件的正文文本和/或图像。Webapp生成器可以通过以e-book剖析器提取的数据（例如元数据和章节列表）填充模板文件（例如，模板TOC.html文件）来创建交互式文档Web应用的TOC代码（例如，TOC.html）。此外，webapp生成器可以通过以提取的正文文本数据和图像来填充章节模板（例如，模板章节html文件）来创建章节代码（例如，单独HTML文件）。
关于更新交互式文档Web应用的源文件以包含通过UI所做的任何更改，转换服务（例如图9的ebupdates.php）可以执行一个或多个功能。例如，转换服务可以执行操作以将社交插件代码插入到交互式文档Web应用的布局代码（例如，resources.html）中的适合位置处。作为备选或附加，转换服务可以执行操作以通过以选定的主题中指定的样式和布局代码来替换或更新样式代码（例如，style.css）和/或布局代码（例如，resources.html）以更改书籍主题。在此类实例中，可以保留或可以不保留社交插件代码。在一些实施例中，保留社交插件代码，即使主题中更改也是如此。由此，应该理解，可以使用转换服务来更新与交互式文档Web应用的布局和外观有关的任何和所有元素，例如字体、字体大小、朝向、分辨率等。
转换服务还可以配置成提供复位选项。当执行时，复位选项可以运行以将交互式文档Web应用的样式和布局代码复位到缺省或预先选择的主题中指定的样式和布局代码。在此类实例中，可以保留或可以不保留社交插件代码（例如，html代码）。在一些实施例中，可以执行复位选项时移除社交插件代码。
图10是根据本公开的转换服务的示范体系结构图。如图所示，可以通过UI 1002或另一种方式将文档源文件1001加载到本公开的基于Web的创作工具中。一旦加载，转换服务1003使用e-book剖析器1004从文档源文件1001提取数据（例如，元数据、正文文本、图像等）。webApp生成器1005应用所提取的信息以生成交互式文档Web应用1006的源文件。
可以在UI 1002中运行的设备模拟器中（例如，使用缺省主题、布局等）生成并显示交互式文档Web应用1006的预览。更新服务1007可以检测通过UI 1002所做的更改，并指令动态代码（例如，如treesaver.js的JavaScript代码）以相应地更新交互式文档Web应用1006的源文件。然后可以刷新UI 1002内运行的交互式文档Web应用1006的预览。
为了清晰，本公开现在将论述根据本公开的电子文档至Web应用的转换算法所执行的工作流程的非限制示例。为了图示，本示例着重于将以epub格式存储的文档源文件转换成交互式文档Web应用。但是，应该理解可以使用以其他格式存储的源文档执行相同或相似的步骤。
在此非限制示例中，转换服务包括e-book剖析器，e-book剖析器将epub格式的源文档文件提取到临时目录。作为初始问题，e-book剖析器可以验证所提取的文件的内容，然后继续下去通过检查从源文档文件提取并存储在临时目录中的XML文件（例如container.xml）以提取元数据。通过此检查，e-book剖析器可以获取rootfile节点的完整路径属性，该完整路径属性是包含epub的元数据、文件清单和线性阅读次序的开放包裹格式（OPF）的路径。
一旦确定OPF文件的路径，则e-book剖析器可以将该OPF文件打开为可扩展标记语言（XML）文件，定位元数据节点，以及制作元数据节点的克隆副本（下文称为“克隆元数据节点”）。e-book剖析器然后可以搜索元数据节点内的特定节点以标识可以在交互式电子文档应用中使用的信息。例如，e-book剖析器可以标识与标题（例如，dc:title）和内容表（例如spin节点）相关的节点。关于内容表，e-book剖析器可以检查TOC属性的spin节点，并搜索清单节点下的所有子节点以获取具有等于TOC属性的id的项。此外，e-book剖析器可以标识可以与导航控制文件（NCX文件）的路径名对应的href属性值。
转换算法可以通过如下方式生成内容表：迭代spin节点下的所有itemref子节点；获取它们的标识值（例如，idref）；搜索清单节点下的所有子节点以获取具有等于标识值的标识符的项；获取此类项的href属性值；以及使用href属性作为完整路径名在TOC列表中创建新章节项。
e-book剖析器可以将NCX文件作为XML文件打开，以及检查它以执行若干功能。例如，e-book剖析器可以定位NCX文件中的docTitle节点并获取其文本节点值。在OPF文件中丢失dc:title节点的实例中，可以将此值用作标题。此外，e-book剖析器可以对于docAuthor节点分析NCX文件，并获取文本节点值。此值可以用作书创作者姓名。而且，e-book剖析器可以通过如下操作更新TOC列表：在NCX文件中定位navMap节点；迭代所有navPoint子节点，并获取它们的navLabel/文本节点值。此值可以用作每个章节的标题。e-book剖析器还可以搜索上文描述的TOC列表，并将navLabel/文本节点值作为标题添加到具有与内容节点的src属性相同的完整路径名的任何章节项。否则，可以使用缺省描述符，例如，“第xx部分”作为章节的标题，其中xx是TOC列表中的索引号。
正如上文简要解释的，e-book剖析器可以从电子文档源文件提取正文文本和图像。下文描述提供e-book剖析器和webapp生成器可以如何使用该信息来生成交互式文档Web应用的源文件的非限制示例。
在此非限制示例中，e-book剖析器可以打开上文描述的TOC列表中的每个章节项指定的HTML文件。Webapp生成器可以打开输出章节文件（在输出目录中）以进行编写，以及可以利用模板文件的内容预先填充输出章节文件。在一些实例中，输出章节文件具有与源电子文档文件相同的名称，但是具有HTML扩展名。e-book剖析器还可以定位相关head->title节点，并且webapp生成器可以使用该节点的值作为所关注的章节的标题。如果没有head->title节点可用，则webapp生成器可以使用另一个值作为章节标题，例如，书标题。
web app生成器然后可以将克隆的元数据节点输出到输出章节文件。使用递归函数（例如，convertnodelist()），e-book剖析器可以迭代输入章节文件的<body>部分的所有子节点，并提取正文文本和/或图像。webapp生成器然后可以将正文文本和图像添加到输出章节文件。
递归函数（例如，convertnodelist()）可以使用两个自变量：nodeList和parentNode。nodeList自变量是e-book剖析器可以从中读取的输入节点的列表。parentNode自变量是目标输出节点，这是webapp生成器可插入输出的地方。
e-book剖析器可以迭代nodeList自变量中的所有节点，并根据节点类型来执行多种动作。例如，如果节点类型是XML_TEXT_NODE，则e-book剖析器可以从nodeValue提取正文文本，并将该bodyText追加在parentnode下。
如果节点类型是XML_ ELEMENT_NODE，则e-book剖析器可以检查nodeName，并基于nodeName执行不同的动作。例如，如果nodeName是img，则e-book剖析器可以从节点的src属性提取图像的位置，并从临时目录将图像文件复制到输出目录。Webapp生成器然后可以创建img节点，将该img节点的src属性设置为输出目录中的位置，并将图像的宽度和高度属性设置为期望的值。
如果nodeName是div、p、span和/或pre，则webapp生成器可以基于相关的父节点（parent node）的名称来执行功能。例如，如果父节点名称是p或span，或如果没有文本子节点，则webapp生成器可以调用递归函数（例如，convertnodelist()），使用当前节点的所有子节点作为nodeList，并使用当前父节点作为parentNode。否则，webapp生成器可以：创建新p节点；将其追加到parentNode下；调用递归函数（例如，convertnodelist()）；使用当前节点的所有子节点作为nodeList；以及使用新p节点作为parentNode。
如果nodeName是table、tr、td或svg，则webapp生成器可以调用递归函数（例如，convertnodelist()），使用当前节点的所有子节点作为nodeList，并使用当前parentNode作为parentNode。
如果nodeName是h1、h2、h3、h4、h5、h6、b、l、big、ol、ul、li、d、dt、dd、em、code、strong和/或blockquote，webapp生成器可以：创建具有相同名称的新节点；将其追加到parentNode下；调用递归函数（例如，convertnodelist()）；使用当前节点的所有子节点作为nodeList；以及使用新节点作为parentNode。
web app生成器还可以使用上文描述的TOC模板（例如，TOC.html）和TOC列表创建交互式文档Web应用的TOC代码（例如，index.html）。例如，web app生成器可以打开输出TOC文件（例如，index.html），并以TOC模板文件的内容预先填充它。TOC模板可以包括标题的节点项（例如，head->title）和创建者的节点项（例如，body->article），可以由webapp生成器利用e-book剖析器提取的相关数据填充它们。在一些实施例中，webapp生成器以书标题的h1节点和创建者的h4节点填充body->article节点。webapp生成器还可以迭代TOC列表（上文描述的）中的所有章节项，并为每个章节项创建节点（例如，h4节点）。然后可以将每个节点的值设置为包括与章节标题对应的文本（可以由e-book剖析器如上文描述的来确定）。还可以在每个章节项节点下添加与每个章节代码的位置关联的超链接。
当完成电子文档至Web应用的转换时，转换服务可以将临时目录中的一个或多个输出文件（例如，index.html）返回到基于Web的UI以用于预览呈示。
图11提供根据本公开的Web应用开发工具的用户接口的类图的非限制示例。可以将此非限制类图中的对象映射到图6的体系结构视图，如图表1所示：
表1
模型 / 类 / 视图 示范对象 普通功能
模型 Ebookmodel 加载定制面板的模型数据
模型 Devicemodel 加载设备模拟器的模型数据
模型 ePub2HTML.php 将电子文档源文件转换成用于交互式文档Web应用的源文件（例如html）
模型 Epubupdatesvc.php 基于通过UI所做的输入修改交互式文档Web应用的源文件
视图 eBookview.html 在UI的设备模拟器预览区（托管框架）中呈示设备框架图像和交互式文档Web应用
视图 Workspace 布局代码（例如，index.html）中的div，其表示进入设备模拟器，包括eBookview.html
控制 Webappauthoringtool Ebookcontroller的基类。可为所有项目类型（例如，e-book、Web应用、视频等）的通用功能定义虚拟应用程序接口。可包括UI的项目栏上的按钮的事件处理机。
控制 eBookcontroller 可定义本文描述的Web应用开发工具的核控制器。可定义基控制器（例如，packageclick）的实现，应用面板和设备模型数据以呈示面板和设备模拟器，并且可定义调用epubupdatesvc.php的事件处理机
控制 deviceHelper 可应用设备模型数据以利用选定的设备类型、分辨率和朝向（旋转）的至少其中之一呈示设备模拟器的一个或多个设备框架
控制 eBookhelper 可以根据事件（例如文档源文件的上传或将文档源文件转换成交互式文档Web应用的完成）将模型（例如，epub2html.php）与视图（例如，ebookview.html）关联。
控制 eBookuploadform.html 可选类，其可收集用户输入以用于完成的应用到本地或远程编译器服务的提交以便编译至少一个交互式文档Web应用程序包。
控制 Ebulwagsvc.php 可执行操作以将交互式文档Web应用程序包递交到编译器服务以便生成用于目标OS的应用安装器。
图11还标识可在webappauthoringtool对象中为每个对象定义的多种函数，例如+load()和+unload()。此类函数仅是出于说明的目的而提供的，且不应视为限定本公开的范围。正如本领域中将认识到的，可以根据本公开的Web应用开发工具使用包括比图11所示的特定非限制示例更多或更少函数的用户界面。
本公开的另一个方面涉及用于创作交互式文档Web应用并将此类应用编译成用于多种OS和/或形状因素的原生文件的计算机实现的方法。就此而言，参考图12，其中提供个本公开的方法的非限制示例。
在源文件提供步骤1200中，将电子文档源文件（例如，epub、pdf等）提供到根据本公开的Web应用开发工具。可以由用户例如通过先前描述的UI上传或通过另一种方式提供电子文档源文件。
在转换步骤1210中，调用转换服务以从电子文档源文件提取数据。例如，以及如先前描述的，转换服务可以从电子文档源文件中提取元数据、正文文本、图像和其他信息。转换服务可以使用此数据来使用缺省或预先选择的样式生成包含内容表、章节和其他期望的部分的交互式Web应用。
在呈示步骤1200中，根据本公开在设备模拟器中呈示交互式文档Web应用的预览。如上文描述，此预览以缺省或预先选择的样式呈示。之后，可以呈示交互式文档Web应用的预览以包括下面论述的编辑步骤1230期间所做的编辑。
在编辑步骤1230中，可以如上文描述的使用用户界面来编辑交互式文档Web应用的预览。例如，可以更改交互式文档Web应用的分辨率、朝向、样式和格式（例如，字体、字体大小等）。此外，可以将（例如，至社交媒体Web站点的）插件插入到交互式文档Web应用中。
在更新步骤1240中，（例如通过转换服务）更新交互式文档Web应用以包括编辑步骤1230期间输入的更改。然后可以刷新交互式文档Web应用的预览。
一旦不需要进一步编辑，则可以在编译步骤1250中将交互式文档Web应用编译成用于选定的OS和形状因素的交互式Web应用程序包和安装器。最终结果是提供用于选定的平台的安装器，图12中如步骤1260所示。
本公开的另一个方面涉及机器可读介质，该机器可读介质包含用于执行本公开的操作的指令或包含定义本文描述的结构、电路、装置、处理器和/或系统特征的代码或设计数据。例如，本公开设想包括其上存储有指令的机器可读介质的制品，这些指令被处理器执行时，促使处理器执行与本公开的设备模拟器、Web应用开发工具和/或方法相符的操作。
前文描述参考特定的名称（例如，本文描述的文件、服务、函数和对象的名称）和代码。此类名称和代码在本文中仅出于论述目的而提供，并且应视为示范性的。本领域技术人员将理解，可以对本文描述的文件、服务和函数使用任何适合的名称，以及本文描述的多种特征的编码中的变化是可能的。此类变化由本公开设想并并入本文中。
对于本领域技术人员来说，考虑本文公开的本发明的说明书和实施将显见到本公开的其他实施例。说明书理应仅视为示范性的，其中本发明的真实范围和精神由所附权利要求指示。

Claims (18)

1.一种方法，其包括：
利用处理器将电子文档源文件转换成交互式文档web应用；
在web浏览器中呈示用户界面，所述用户界面包括至少一个设备模拟器预览区；
在所述设备模拟器预览区中呈示所述交互式文档web应用的预览；以及
利用所述处理器将所述交互式文档web应用编译成适合在至少一个目标操作系统上执行的至少一个原生应用安装器。
2.根据权利要求1所述的方法，其中所述处理器将所述交互式文档web应用编译成用于多个目标操作系统或形状因素的多个原生应用安装器。
3.根据权利要求2所述的方法，其中所述多个原生应用安装器由所述处理器同时地、顺序地、或其组合地编译。
4.根据权利要求1所述的方法，还包括：
响应通过所述用户界面输入的命令，利用所述处理器将修改应用到所述交互式文档web应用的至少一个源文件；以及
刷新所述交互式文档web应用的所述预览以反映所述修改。
5.根据权利要求1所述的方法，其中所述用户界面包括定制代码、模拟器控制代码以及项目栏代码中的至少一个。
6.根据权利要求1所述的方法，其中所述转换通过由所述处理器执行的电子文档到web应用转换服务执行，所述电子文档到web应用转换服务包括：
e-book剖析器，可操作用于从所述电子文档源文件提取源文档信息；以及
web app生成器，可操作用于使用所述源文档信息生成所述交互式文档web应用。
7.根据权利要求6所述的方法，其中所述源文档信息选自由元数据、正文文本、图像及其组合组成的群。
8.根据权利要求5所述的方法，其中所述应用由应用更新转换服务执行，其中在由所述处理器执行时所述应用更新转换进行操作以响应通过所述用户界面输入的命令，将所述修改应用到所述交互式文档web应用的所述至少一个源文件。
9.根据权利要求8所述的方法，其中所述应用更新转换服务包括由所述处理器执行的JavaScript代码。
10.一种系统，其包括：
处理器；
具有web应用开发工具指令存储其上的存储器，其中在被执行时所述web应用开发工具指令促使所述处理器：
将电子文档源文件转换到交互式文档web应用；
在web浏览器中呈示用户界面，所述用户界面包括至少一个设备模拟器预览区；
在所述设备模拟器预览区中呈示所述交互式文档web应用的预览；以及
将所述交互式文档web应用编译到适合于在至少一个目标操作系统上执行的至少一个原生应用安装器。
11.如权利要求10所述的系统，其中所述web应用开发工具指令在被执行时还促使所述处理器将所述交互式文档web应用编译到用于多个目标操作系统或形状因素的多个原生应用安装器。
12.如权利要求11所述的系统，其中所述web应用开发工具指令在被执行时还促使所述处理器同时地、顺序地、或其组合地编译所述多个原生应用安装器。
13.如权利要求10所述的系统，其中所述web应用开发工具指令在被执行时还促使所述处理器：
响应通过所述用户界面输入的命令将修改应用到所述交互式文档web应用的至少一个源文件；以及
刷新所述交互式文档web应用的所述预览以反映所述修改。
14.如权利要求10所述的系统，其中所述用户界面包括定制代码、模拟器控制代码以及项目栏代码中的至少一个。
15.如权利要求10所述的系统，还包括存储在所述系统的存储器中的电子文档到web应用转换指令，其中所述电子文档到web应用转换指令在被执行时促使所述处理器：
从所述电子文档源文件提取源文档信息；以及
使用所述源文档信息生成所述交互式文档web应用。
16.如权利要求15所述的系统，其中所述源文档信息选自由元数据、正文文本、图像及其组合组成的群。
17.如权利要求13所述的系统，还包括存储在所述系统的存储器中的应用更新转换指令，其中所述应用更新转换指令在被执行时促使所述处理器响应通过所述用户界面输入的命令将所述修改应用到所述交互式文档web应用的所述至少一个源文件。
18.如权利要求17所述的系统，其中所述应用更新转换指令包括JavaScript代码。
CN201280046855.7A 2011-09-26 2012-09-17 Web浏览器中的Web应用和辅助设备的模拟、Web应用开发工具以及使用它们的方法 Expired - Fee Related CN103890727B (zh)

Applications Claiming Priority (4)

Application Number Priority Date Filing Date Title
US13/245272 2011-09-26
US13/245,272 US8819624B2 (en) 2011-09-26 2011-09-26 Simulation of web applications and secondary devices in a web browser, web application development tools, and methods using the same
US13/245,272 2011-09-26
PCT/US2012/055775 WO2013048808A1 (en) 2011-09-26 2012-09-17 Simulation of web applications and secondary devices in a web browser, web application development tools, and methods using the same

Publications (2)

Publication Number Publication Date
CN103890727A true CN103890727A (zh) 2014-06-25
CN103890727B CN103890727B (zh) 2017-06-27

Family

ID=47912643

Family Applications (1)

Application Number Title Priority Date Filing Date
CN201280046855.7A Expired - Fee Related CN103890727B (zh) 2011-09-26 2012-09-17 Web浏览器中的Web应用和辅助设备的模拟、Web应用开发工具以及使用它们的方法

Country Status (5)

Country Link
US (1) US8819624B2 (zh)
EP (1) EP2761448A4 (zh)
CN (1) CN103890727B (zh)
TW (1) TWI476677B (zh)
WO (1) WO2013048808A1 (zh)

Cited By (3)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN105786881A (zh) * 2014-12-24 2016-07-20 阿里巴巴集团控股有限公司 自适应电子书刊文件结构以及相应的方法及装置
CN113672225A (zh) * 2021-08-24 2021-11-19 网易（杭州）网络有限公司 用户界面的处理方法、装置、设备及存储介质
CN117290016A (zh) * 2023-11-24 2023-12-26 本溪钢铁（集团）信息自动化有限责任公司 视图的页面配置方法及装置

Families Citing this family (27)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
US20130111382A1 (en) * 2011-11-02 2013-05-02 Microsoft Corporation Data collection interaction using customized layouts
US9268848B2 (en) 2011-11-02 2016-02-23 Microsoft Technology Licensing, Llc Semantic navigation through object collections
US20130145361A1 (en) * 2011-12-01 2013-06-06 International Business Machines Corporation Discovering and installing web application plugins
US9170783B1 (en) * 2011-12-15 2015-10-27 The Mathworks, Inc. Class creation assistant for textual programming languages
US9311427B2 (en) 2012-01-03 2016-04-12 Cimpress Schweiz Gmbh Automated generation of mobile optimized website based on an existing conventional web page description
US20130191495A1 (en) * 2012-01-23 2013-07-25 Cristian Almstrand Framework and system to distribute applications for heterogeneous platforms
US10049168B2 (en) * 2012-01-31 2018-08-14 Openwave Mobility, Inc. Systems and methods for modifying webpage data
US20150106685A1 (en) * 2012-10-12 2015-04-16 Thrivon Management Consulting Transforming a document into web application
US10614156B1 (en) * 2012-11-14 2020-04-07 Worldwide Creative Techniques, Llc System and method for using a dynamic webpage editor
US9400660B1 (en) * 2013-03-12 2016-07-26 Intuit Inc. Customizing user interfaces of native applications for portable electronic devices
CN103761277A (zh) * 2014-01-09 2014-04-30 北京掌阔技术有限公司 一种ePub电子书的加载方法和系统
KR101648964B1 (ko) 2015-04-02 2016-08-30 네이버 주식회사 자동 여백 생성을 이용하여 컨텐츠를 제공하는 시스템 및 방법
KR101654300B1 (ko) 2015-04-03 2016-09-22 네이버 주식회사 모션 연출이 포함된 페이지의 레이어 병합을 이용하여 컨텐츠를 제공하는 시스템 및 방법
US10452244B2 (en) * 2015-05-04 2019-10-22 Salesforce.Com, Inc. Systems and methods of optimizing delivery of form factor specific content
US11295492B2 (en) 2015-07-31 2022-04-05 Samsung Electronics Co., Ltd. Electronic device and server related to rendering of web content and controlling method thereof
TWI560613B (en) * 2015-08-18 2016-12-01 Pai Tsung Lee Method and system for creating app
US20170185609A1 (en) * 2015-12-28 2017-06-29 International Business Machines Corporation Universal adaptor for rapid development of web-based data visualizations
WO2018081525A1 (en) * 2016-10-28 2018-05-03 Ebay Inc. Optimization of publication for target computing device
US10083015B2 (en) * 2016-12-15 2018-09-25 International Business Machines Corporation Mobile accessibility evaluation from application binary
US10877735B1 (en) 2017-09-25 2020-12-29 Amazon Technologies, Inc. Automated generation of software applications using analysis of submitted content items
US10705805B1 (en) 2017-12-12 2020-07-07 Amazon Technologies, Inc. Application authoring using web-of-sheets data model
EP3514681A1 (en) * 2018-01-22 2019-07-24 Robert Bosch GmbH Method, host device and system for providing applications
US11586603B1 (en) 2018-05-23 2023-02-21 Amazon Technologies, Inc. Index sheets for robust spreadsheet-based applications
US11263271B2 (en) * 2018-09-11 2022-03-01 Book Walker Co., Ltd. Digital content viewing system, digital content viewing method, and computer-readable recording medium
US11010536B2 (en) * 2018-12-20 2021-05-18 AINS, Inc. Systems and methods for dynamic web user interface generation
CN111694568B (zh) * 2019-03-15 2023-04-07 阿里巴巴集团控股有限公司 一种ui卡片文档的生成方法和装置
US20220283791A1 (en) * 2021-03-08 2022-09-08 Charles Amashta Systems and Methods For Cascading Style Sheets in Native Mobile Applications

Citations (3)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN1815439A (zh) * 2005-01-31 2006-08-09 微软公司 用于目标设备显示模拟的方法和系统
CN101059758A (zh) * 2006-04-19 2007-10-24 日本电气株式会社 屏幕转换程序生成方法及设备
US20090235162A1 (en) * 2008-03-11 2009-09-17 Disney Enterprises, Inc. Method and system for providing enhanced virtual books

Family Cites Families (14)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
US5966535A (en) * 1995-12-07 1999-10-12 At&T Corporation Method and apparatus for generating program code for world wide web service applications
US7536324B2 (en) * 1996-10-25 2009-05-19 Ipf, Inc. Internet-based system for managing and delivering consumer product brand information to consumers at points of presence along the world wide web (WWW)
US6092114A (en) * 1998-04-17 2000-07-18 Siemens Information And Communication Networks, Inc. Method and system for determining the location for performing file-format conversions of electronics message attachments
US7055094B2 (en) * 1999-12-30 2006-05-30 Rutgers, The State University Of New Jersey Virtual tags and the process of virtual tagging utilizing user feedback in transformation rules
FR2811782B1 (fr) * 2000-07-12 2003-09-26 Jaxo Europ Systeme de conversion de documents a structure arborescente par parcours selectif de ladite structure
US7194693B2 (en) * 2002-10-29 2007-03-20 International Business Machines Corporation Apparatus and method for automatically highlighting text in an electronic document
US7814413B2 (en) * 2003-04-17 2010-10-12 Oracle International Corporation System and method for controlling web pages
US20050268215A1 (en) 2004-06-01 2005-12-01 Microsoft Corporation Method and apparatus for viewing and interacting with a spreadsheet from within a web browser
EP1800223A4 (en) 2004-10-14 2008-11-19 Onstream Systems Ltd PROCESS FOR THE EDITING OF AN ELECTRICAL DOCUMENT
US20080005667A1 (en) 2006-06-28 2008-01-03 Dias Daniel M Method and apparatus for creating and editing electronic documents
US8555239B1 (en) * 2007-10-12 2013-10-08 The Pnc Financial Services Group, Inc. Mainframe-based web service development accelerator
US20110088011A1 (en) * 2009-10-14 2011-04-14 Vermeg Sarl Automated Enterprise Software Development
US20110131482A1 (en) * 2009-12-02 2011-06-02 Olive Software Inc. System and method for multi-channel publishing
US9134964B2 (en) * 2011-04-06 2015-09-15 Media Direct, Inc. Systems and methods for a specialized application development and deployment platform

Patent Citations (3)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN1815439A (zh) * 2005-01-31 2006-08-09 微软公司 用于目标设备显示模拟的方法和系统
CN101059758A (zh) * 2006-04-19 2007-10-24 日本电气株式会社 屏幕转换程序生成方法及设备
US20090235162A1 (en) * 2008-03-11 2009-09-17 Disney Enterprises, Inc. Method and system for providing enhanced virtual books

Cited By (5)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN105786881A (zh) * 2014-12-24 2016-07-20 阿里巴巴集团控股有限公司 自适应电子书刊文件结构以及相应的方法及装置
CN113672225A (zh) * 2021-08-24 2021-11-19 网易（杭州）网络有限公司 用户界面的处理方法、装置、设备及存储介质
CN113672225B (zh) * 2021-08-24 2023-08-22 网易（杭州）网络有限公司 用户界面的处理方法、装置、设备及存储介质
CN117290016A (zh) * 2023-11-24 2023-12-26 本溪钢铁（集团）信息自动化有限责任公司 视图的页面配置方法及装置
CN117290016B (zh) * 2023-11-24 2024-01-26 本溪钢铁（集团）信息自动化有限责任公司 视图的页面配置方法及装置

Also Published As

Publication number Publication date
US20130080887A1 (en) 2013-03-28
WO2013048808A1 (en) 2013-04-04
EP2761448A4 (en) 2015-04-29
TW201329852A (zh) 2013-07-16
EP2761448A1 (en) 2014-08-06
US8819624B2 (en) 2014-08-26
TWI476677B (zh) 2015-03-11
CN103890727B (zh) 2017-06-27

Similar Documents

Publication Publication Date Title
CN103890727A (zh) Web浏览器中的Web应用和辅助设备的模拟、Web应用开发工具以及使用它们的方法
CN103814371A (zh) Web浏览器中的Web应用和辅助设备的模拟、Web应用开发工具以及使用它们的方法
Hermes Xamarin mobile application development: Cross-platform c# and xamarin. forms fundamentals
Marin et al. Generating native user interfaces for multiple devices by means of model transformation
de Lange et al. Collaborative wireframing for model-driven web engineering
Hermes et al. Mobile development using xamarin
Gill Using React Native for mobile software development
Alor-Hernández Frameworks, Methodologies, and Tools for Developing Rich Internet Applications
Norrie et al. X-Themes: supporting design-by-example
Calvary et al. Introduction to model-based user interfaces
Earley CH5M3D: an HTML5 program for creating 3D molecular structures
Moore et al. Python GUI Programming-A Complete Reference Guide: Develop responsive and powerful GUI applications with PyQt and Tkinter
Trivedi User interface implementation of environmental data integration system with React
Hamid Automated web-based user interfaces for novice programmers
Sundar et al. Content Management System and Automation of Model Cloning Scalable EAV Model in GNEISYS Framework
Pani et al. A Novel Approach for Designing Mobile Native Apps
Jonna et al. Angular UI Development with PrimeNG
Guerrero et al. Fiori Applications in SAP HANA
Roubi et al. Toward a Model Driven Approach for Generating Multi Platform Applications with ZeroCouplage Framework
Takeuchi et al. Creating mapping applications for the iPhone
Sekulovski Cross-platform mobile application generation with a model-driven approach based on IFML and cross-compilation
Cheeseman Cocoa Recipes for Mac OS X
Seffah et al. POMA: Pattern-Oriented and Model-Driven Architecture
Ullman Effortless Flex 4 Development
Bruzual Dynamic Online Help for Increased User Experience

Legal Events

Date Code Title Description
C06 Publication
PB01 Publication
C10 Entry into substantive examination
SE01 Entry into force of request for substantive examination
GR01 Patent grant
GR01 Patent grant
CF01 Termination of patent right due to non-payment of annual fee
CF01 Termination of patent right due to non-payment of annual fee

Granted publication date: 20170627

Termination date: 20210917