Web浏览器中的Web应用和辅助设备的模拟、Web应用开发工具以及使用它们的方法
【专利摘要】公开设备模拟器和使用设备模拟器的方法。在一些实施例中，设备模拟器能够允许模拟的显示器与目标设备的显示器之间的精确像素对像素和英寸对英寸映射。还公开利用此类模拟器的Web应用开发工具。在一些实施例中，此类Web应用开发工具提供将电子文档源文件转换成用于多种操作系统和形状因素的交互式文档Web应用的便利方法。
【专利说明】Web浏览器中的Web应用和辅助设备的模拟、Web应用开发工具以及使用它们的方法
发明领域
[0001]本公开一般涉及用于多个操作系统和形状因素(form factor)的设备模拟和Web应用开发。
【背景技术】
[0002]Web应用是在浏览器控制的环境(例如，Java applet)中托管的计算机软件应用，或以浏览器支持的语言，例如JavaScript、超文本标记语言(HTML)等编码的计算机软件应用。此类应用流行，是因为Web浏览器的广泛及跨平台使用。实际上，Web浏览器频繁地在许多流行操作系统(“OS”或“多种OS”)中使用，例如，Microsoft?公司售卖的Windows? OSsold by Microsoft?、苹果公司售卖的MAC OS?和Google?公司售卖的Android? OS。它们可以在落在范围广泛的形状因素内的设备中使用，例如桌上型计算机、膝上型上计算机、平板个人计算机(“PC”或“多个PC”)以及手持设备(例如，移动电话、智能电话等)。
[0003]使用创作工具不断地开发着Web应用，这些创作工具本身为Web应用，即在Web浏览器中托管。常常地，此类创作工具采用设备模拟器的形式，设备模拟器在开发系统上运行的Web浏览器中显示。设备模拟器包括目标设备(例如，移动电话、台式计算机等)的屏的一个或多个图像。开发中的Web应用显示在目标设备的屏的图像内。以此方式，模拟器允许开发人员在目标设备屏的上下文中预览开发中的Web应用。
[0004]为了设备模拟器精确地表示Web应用将如何在目标设备上展示，需要能够实现两种类型的映射。首先，设备模拟器必须能够像素对像素映射，其中设备模拟器中模拟的显示器(下文称为“模拟的显示器”)的一个像素关联到目标设备的显示器(下文称为“目标显示器”)上的一个像素。其次，需要英寸对英寸(即物理)映射，其中模拟的显示器的一个英寸关联到目标显示器的一个英寸。
[0005]虽然现有创作工具是有用的，但是它们无法实现精确的英寸对英寸映射。这是因为该事实，即精确的英寸对英寸映射需要有关模拟的显示器的每英寸像素的数量(PPI)的信息，或换言之，需要有关正在运行设备模拟器的开发系统的显示器的PPI信息。在许多实例中，模拟的显示器的PPI是未知的。无论如何，将开发显示器的PPI映射到目标显示器的PPI可能是困难的，即使开发显示器的PPI是已知的也是这样。
[0006]此外,现有的Web应用开发工具不提供用于同时将电子文档(如e-book)转换成同时用于多种OS和/或形状因素的交互式文档应用的直接简单机制。相反，现有Web应用开发工具一般需要应用开发人员使用不同的工具来生成用于各个OS的应用。这种过程可能繁琐且不方便，并且可能产生OS之间和/或形状因素之间的用户接口不方便的交互式文档应用。而且，用于将文档转换成交互式文档应用的许多现有实用工具不会调整页面布局以将不同平台之间分辨率和屏幕朝向的变化纳入考虑。因此，使用现有工具开发的交互式文档应用的用户可能不得不前后翻滚来阅读文档的单个页面，这不是用户所期望的。【专利附图】
【附图说明】
[0007]图1提供根据本公开的非限制实施例的设备模拟器的软件组件的框图。
[0008]图2是根据本公开的实时地调整目标设备的由设备模拟器呈示的模拟的显示器的缩放/比例的非限制方法的流程图。
[0009]图3 提供能够在多种 Web 浏览器(例如，Internet Explorer、Firefox 和 Chrome)中实时地精确放大/缩小托管框架(iframe)的JavaScript伪代码的非限制示例。
[0010]图4是本公开的Web应用开发工具的一个或多个方面可基于的模型、视图、控制(MVC)体系结构模式的示范框图。
[0011]图5是根据本公开的非限制实施例的用于Web应用开发工具的顶层体系结构和工作流程图。
[0012]图6是根据本公开的非限制实施例的交互式文档Web应用的体系结构图。
[0013]图7是根据本公开的非限制实施例的编译器服务产生的原生应用的体系结构图。
[0014]图8提供根据本公开的用户界面的非限制示例。
[0015]图9是根据本公开的非限制实施例的基于Web的用户界面的体系结构图。
[0016]图10是根据本公开的非限制实施例的转换服务的体系结构图。
[0017]图11是根据本公开的Web应用开发工具的非限制示例的类图。
[0018]图12是根据本公开的非限制实施例的方法和流程图。
【具体实施方式】
[0019]本公开的一个方面涉及用于精确地模拟目标设备的显示器的系统和方法。相应地，本文描述的是包括处理器和其上存储设备模拟器指令的存储器的系统。当被执行时，设备模拟器指令可以使处理器执行多种功能。例如，设备模拟器指令可以使处理器在Web浏览器内生成用户界面，其中该用户界面包括至少一个托管框架和至少一个标量。在一些实施例中，目标设备的模拟可以在托管框架中运行，其中目标设备包括至少一个显示器。
[0020]设备模拟器指令在被执行时还可以工作以使处理器将所述标量的位置转化成缩放比率，并将该缩放比率应用于托管框架。在一些非限制实施例中，标量的至少一个第一位置可以关联到能够实现至少一个托管框架与目标设备的显示器之间的英寸对英寸映射的缩放比率。在又一些非限制实施例中，标量的至少一个第二位置可以关联到能够实现至少一个托管框架与目标设备的显示器之间的像素对像素映射的缩放比率。
[0021]本文还描述用于模拟目标设备的方法。这些方法可以包括例如生成浏览器执行的在Web浏览器中的目标设备的模拟，并基于由标量位置确定的缩放比率来改变模拟的尺寸。在本文描述的方法的一些非限制实施例中，标量的至少一个第一位置关联到能够实现所述模拟与所述目标设备的显示器之间的英寸对英寸映射的缩放比率。在本文描述的方法的又一些非限制实施例中，标量的至少一个第二位置关联到能够实现所述至少一个托管框架与所述目标设备的显示器之间的像素对像素映射的缩放比率。
[0022]在一些实施例中，本文描述的方法包括在处理器执行的Web浏览器内显示用户界面。该用户接口可以包括呈现层和呈示层。呈现层可以包括HTML代码，以及呈示层可以包括JavaScript代码。在一些实施例中，该方法包括在呈现层内执行目标设备的模拟，其中目标设备包括至少一个显示器。该方法还可以包括利用所述呈示层检测标量的位置，利用呈示层将标量的位置转换成缩放比率，并将缩放比率应用于模拟。在一些非限制实施例中，标量的至少一个第一位置关联到能够实现所述模拟与目标设备的至少一个显示器之间的英寸对英寸映射的缩放比率。在又一些非限制实施例中，标量的至少一个第二位置关联到能够实现至少一个托管框架与目标设备的至少一个显示器之间的像素对像素映射的缩放比率。
[0023]本公开的一个方面涉及用于实现目标设备(例如，移动电话)的浏览器托管的模拟中的精确英寸对英寸映射的系统和方法。在一些实施例中，本公开的系统和方法能够实现目标设备与目标设备的浏览器托管的模拟之间的精确英寸对英寸映射，同时还提供用于切换到模拟与目标设备之间的精确像素对像素映射的简单机制。
[0024]相应地，本文描述的是作为Web应用在计算设备的处理器上运行的设备模拟器。一般，本文描述的设备模拟器使用户界面(UI)能够在计算设备上运行的Web浏览器中显示。该Π包括至少一个设备模拟器预览区(本文中也称为“托管框架”)，该至少一个设备模拟器预览区配置成模拟目标设备，例如移动电话、平板PC、膝上型计算机等的显示器。例如电子书的交互式文档Web应用可以在至少一个托管框架内运行和显示。以此方式，本公开的设备模拟器可以使用户(例如，软件开发人员)能够在模拟目标设备显示器的环境中实现交互式文档Web应用的操作和外观可视化。
[0025]除了上文描述的基本元素和功能外，本文描述的设备模拟器还可以包括紧邻至少一个托管框架或以其他方式与之相邻的至少一个设备框架。此类设备框架可以显示图像，例如目标设备的屏的图像。在此类实例中，可以将设备框架分布在托管框架周围，从而增强托管框架内执行的Web应用的模拟的操作和外观。
[0026]本文描述的设备模拟器还可以包括用于调整至少一个托管框架的属性的机制。例如，本文描述的设备模拟器的Π可以包括允许选择目标设备类型、分辨率和朝向的元素和底层代码。例如，本文描述的设备模拟器可以包括包含有关多个目标设备和形状因素例如，移动电话、平板PC、智能电话和膝上型计算机的数据的源文件。一旦选择了特定设备或属性(例如，分辨率和/或朝向)，则本公开的设备模拟器可以使用调整的属性来调整托管框架的相关特性并再次呈示托管框架中运行的交互式文档Web应用。
[0027]例如，如果用户通过Π选择不同的分辨率，则本文描述的设备模拟器可以工作以调整托管框架的分辨率，并利用新选择的分辨率来再次呈示托管框架(和其中运行的Web应用)和/或一个或多个设备框架。相似地，如果通过Π更改了设备类型，则本文描述的设备模拟器可以加载与所选设备相关的数据(例如，屏成像、分辨率、朝向等)，并利用与所选设备关联的特性再次呈示托管框架和/或一个或多个设备框架。
[0028]UI还可以包括标量，该标量与标量代码(稍后描述)组合使用户能够改变至少一个托管框架和/或一个或多个设备框架的尺寸。例如，可以由标量代码将标量的位置转换成缩放比率，然后可以将缩放比率应用于至少一个托管框架和/或一个或多个设备框架的缩放属性。正如稍后详细描述的，此功能性能够实现至少一个托管框架中模拟的显示器与目标设备(例如，移动电话、平板PC等)的显示器之间的精确英寸对英寸映射。以及在一些实施例中，此功能性能够提供一种高效机制以用于托管框架与目标设备的显示器之间的精确英寸对英寸映射与像素对像素映射的转换。
[0029]对于本公开来说，在标量的上下文中使用时，术语“位置”是指标量的实际位置(例如，相对于标量的另一个部分)和可归因于标量的位置的值的其中之一或二者兼有。例如，如果标量是具有可以在一定值范围(例如O至100)上左向右行进的臂部的滑块，则滑块的“位置”可以是指滑块臂部的相对位置，和/或可归因于滑块位于该位置处的值(例如，0、25、50,100 等)。
[0030]图1提供根据本公开的设备模拟器的软件组件的非限制示例的框图。正如先前解释，设备模拟器可以在开发系统，例如桌上型PC的处理器上运行的Web浏览器内执行。
[0031]如图1所示，设备模拟器100包括呈现层101和呈示层102。呈现层101 (本文在模型、视图、控制体系结构的上下文中也称为“视图“)包括一般运行以在开发系统的处理器上运行的Web浏览器中绘制用户界面的功能的底层代码。在图1所示的非限制示例中，呈现层101绘制预览区103、托管框架104、一个或多个设备框架105和标量106。结合Web应用开发工具的Π的产生，稍后描述呈现层101的具体操作，该web应用开发工具利用本文描述的设备模拟器以帮助产生交互式文档Web应用。为了当前论述，应该注意，可以使用HTML将呈现层101编码，并且呈现层101可以包括与本领域技术人员认识相符的多种插件。例如，以及正如下文将详细描述的，呈现层101可以包括index, html文件(或其他类似文件)，该文件包含对第三方插件应用和/或数据库，例如jQuery javascript滑块插件和关联数据库的引用。
[0032]虽然图1将预览区103图示为比托管框架104大很多，但是应该理解预览区103可以是任何大小。在一些实施例中，将预览区103的大小设为使得它至少逼近托管框架104的一个尺寸。
[0033]可以将预览区103再划分(例如，使用HTML)成多个列和行，从而定义分开的区域或框架。此概念在图1中由虚线107图示，其图示预览区103被划分成三个行和三个列，从而将预览区103划分成围绕着托管框架104的8个区域(例如，8个设备框架105)。根据先前论述，可以独立地将预览区103 (包括一个或多个设备框架105)的每个区域(框架)编码，以便显示图像，例如目标设备的屏的图像。稍后图8中图示此概念，这提供其中一个或多个设备框架(一个或多个)显示目标设备的屏的图像的用户界面的非限制示例。
[0034]虽然图1图示将预览区划分成围绕单个托管框架104的8个区域，但是应该理解预览区103可以被划分成任何数量的区域，并且可以包含多于一个托管框架。实际上，通过本公开可设想具有含1、2、3、4、5或更多个托管框架的预览区的设备模拟器。通过举例，预览区103可以划分成6个列和三个行，从而能够显示各被8个区域(包括8个设备框架105)围绕的两个托管框架。以此方式，可以同时呈示目标设备的多个模拟。
[0035]可以使用HTML、其变体和/或其他适合的代码来将预览区103(包括托管框架104)编码。在使用HTML将预览区103编码的实例中，可以使用例如〈iframe〉HTML标记来定义托管框架105。
[0036]标量106是具有用户可更改的位置范围的用户界面对象。在一些实施例中，标量106以滑块、滑轮、一对放大/缩小按钮、下拉列表和/或一系列单选按钮的形式呈现。作为可以根据本公开使用的适合标量的非限制示例，提到jQuery Ul滑块库和/或插件，其实现在稍后进行描述。
[0037]呈示层102工作以将设备模型数据和其他特性应用于托管框架104，在Web浏览器内呈示定制面板(稍后描述)以及利用目标设备的适合属性和/或用户选择的特性呈示托管框架104中运行的Web应用。呈示层102可以通过例如调用包含与目标设备的显示器关联的属性的至少一个源文件来提供此功能性。此类源文件可以包括一个或多个目标设备的信息(例如，设备类型、朝向、分辨率等)。呈示层102可以将目标显示器的属性应用于托管框架104的相关属性。由此，可以在开发系统的Web浏览器内以目标设备的适合属性显不设备模拟器100的托管框架104中运行的Web应用。
[0038]呈现层102还可以包括监视标量106的位置的标量代码107。基于标量106的位置，标量代码107可以根据执行设备模拟器100所在的浏览器，确定缩放比率或比例。例如，标量代码可以将标量106的位置转换成在Firefox Web浏览器中使用的比例或在Microsoft Internet Explorer中使用的缩放比率。为了方便和简洁,本文将此转换的结果称为“缩放比率”。
[0039]标量代码107可以将确定的缩放比率应用于预览区103、托管框架104、一个或多个设备框架105及其组合，并且利用所确定的缩放比率再次呈示预览区103(包括托管框架104和一个或多个设备框架105)。
[0040]标量代码107还可以包括事件处理机，事件处理机响应标量事件将确定的缩放比率应用于预览区103。例如，标量代码107可以在标量106的位置开始改变(“开始”)时，标量106的位置改变(“移动”或“滑动”)时，标量106的位置停止改变(“停止”)时或其组合，将确定的缩放比率应用于预览区103 (或其组件)。在一些实施例中，随着标量106的位置变化，标量代码107将确定的缩放比率应用于预览区103(包括设备模拟预览区104和一个或多个框架105，如果存在的话)。在此类实例中，标量代码107可以使呈示层100更新预览区103、托管框架104、一个或多个设备框架105或其组合的缩放比率，以及使用所确定的缩放比率实时地再次呈示一个或多个此类区。
[0041]通过适当地调整标量106，可以调整预览区103、托管框架104、一个或多个设备框架(105)及其组合的大小，以便提供目标设备的模拟的显示器与实际目标设备的精确英寸对英寸映射。这可以通过例如调整标量106以使设备模拟器100呈示开发系统的显示器上的预览区103(以及具体地托管框架104)以使预览区103(以及具体为托管框架104)的大小逼近目标设备的物理大小来实现。以此方式，设备模拟器可以提供所见即所得(WYSWYG)的环境。因此，Web应用能够以与其在目标设备上将展示的相同方式展示在设备模拟器中。
[0042]图2是根据本公开的实时地调整目标设备的由设备模拟器呈示的模拟的显示器的缩放的非限制方法的流程图。在开始步骤201中，设备模拟器100可以使用与缺省目标显示器相符的特性在预览区103的托管框架104中呈示Web应用。作为备选，设备模拟器100可以等待目标设备的选择，然后才在预览区103的全部或一部分(包括托管框架104和一个或多个设备框架105)中呈示Web应用。无论开始步骤201中执行的操作如何，在呈示预览区步骤202中，设备模拟器100呈示预览区103。
[0043]在呈示预览区103之后,在检测标量位置步骤203中，标量代码107监视标量106的位置。然后在将标量位置转换成缩放比率步骤204中，可以将标量106的位置转换成缩放比率。在将缩放比率应用于设备模拟步骤205中，设备模拟器100然后可以将确定的缩放比率应用于预览区。可以随着标量106被调整，重复步骤202-205。使用此方法，可以更新预览区103 (包括托管框架104和/或一个或多个设备框架105)，从而允许用户实时地将对预览区103的缩放比率的更改可视化。[0044]在一些实施例中，本文描述的设备模拟器能够产生大小与目标设备的显示器物理大小相差约5%或更小、约2%或更小或甚至约1%或更小的目标设备的模拟的显示器。在一些实施例中，本文描述的设备模拟器能够产生大小等于目标设备的显示器物理大小的目标设备的模拟的显示器。
[0045]为了实现英寸对英寸映射，可以手动调整标量106，直到设备模拟器100呈示的模拟的显示器的比较逼近目标设备的物理大小位置。这可以通过例如在开发系统的监视器上呈示模拟的显示器，将目标设备固定到托管系统上，并在调整标量同时以目视方式将模拟的显示器的大小与目标设备的物理大小比较来实现。作为备选，此比较可以自动地进行，例如通过编码成将模拟的显示器的属性与开发显示器的每英寸像素数(点)(PPI)比较的程序来进行。例如，此类程序可以调用包含多个开发显示器的PPI信息的数据库，并将该PPI信息与模拟的显示器，具体为托管框架的相关属性比较。
[0046]还可以将标量106配置成使得选定的位置关联到与目标设备的显示器像素对像素映射的设备模拟预览区103、托管框架104、一个或多个设备框架105或其组合的缩放比率。例如，标量106的选定的位置可以关联到设备模拟预览区103、托管框架104、一个或多个设备框架105的100%的缩放比率。在一些非限制实施例中，预览区内的像素的数量大于或等于目标设备的显示器的像素的数量。即，预览区(以及具体为托管框架)的分辨率优选地等于或大于目标设备的显示器的分辨率。在此类实例中，由标量确定的缩放比率可以提供与目标设备的显示器实现像素对像素映射的模拟的显示器。
[0047]在一些实例中，预览区的分辨率可以设为低于目标设备的显示器的分辨率。在此类实例中，预览区(以及具体为特定托管框架104)中运行的模拟的显示器可以关联到目标设备的显示器的一部分。尽管如此，使用本文描述的标量，可以确定促成模拟的显示器与目标设备的显示器的对应部分之间的像素对像素映射的缩放比率。
[0048]作为可根据本公开使用的标量的非限制示例，提到通过jQuery Ul滑块插件和Javascript库(下文称为“jQuery插件”)使能的滑块。jQuery插件提供多种滑块选项,包括开发人员可以选择的多种句柄和范围。这些句柄和范围可以由用户例如使用鼠标或键盘来进行选择。
[0049]为了图示JQuery Π滑块插件的非限制使用，参考图3。一般，图3提供示范JavaScript伪代码，其使得能够在多种Web浏览器，如Internet Explorer、Firefox和Chrome中实现托管框架(iframe)的实时精确放大/缩小。
[0050]在图3所示的非限制示例中，可以通过将如下行添加到定义呈现层101的HTML文档中(例如，index, html中)来包括jQuery库:
【权利要求】
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代码。
【文档编号】G06F9/45GK103890727SQ201280046855
【公开日】2014年6月25日 申请日期:2012年9月17日 优先权日:2011年9月26日
【发明者】Z.侯 申请人:英特尔公司