Web瀏覽器中的Web應(yīng)用和輔助設(shè)備的模擬、Web應(yīng)用開發(fā)工具以及使用它們的方法
【專利摘要】公開設(shè)備模擬器和使用設(shè)備模擬器的方法。在一些實(shí)施例中，設(shè)備模擬器能夠允許模擬的顯示器與目標(biāo)設(shè)備的顯示器之間的精確像素對(duì)像素和英寸對(duì)英寸映射。還公開利用此類模擬器的Web應(yīng)用開發(fā)工具。在一些實(shí)施例中，此類Web應(yīng)用開發(fā)工具提供將電子文檔源文件轉(zhuǎn)換成用于多種操作系統(tǒng)和形狀因素的交互式文檔Web應(yīng)用的便利方法。
【專利說明】Web瀏覽器中的Web應(yīng)用和輔助設(shè)備的模擬、Web應(yīng)用開發(fā)工具以及使用它們的方法
發(fā)明領(lǐng)域
[0001]本公開一般涉及用于多個(gè)操作系統(tǒng)和形狀因素(form factor)的設(shè)備模擬和Web應(yīng)用開發(fā)。
【背景技術(shù)】
[0002]Web應(yīng)用是在瀏覽器控制的環(huán)境(例如，Java applet)中托管的計(jì)算機(jī)軟件應(yīng)用，或以瀏覽器支持的語言，例如JavaScript、超文本標(biāo)記語言(HTML)等編碼的計(jì)算機(jī)軟件應(yīng)用。此類應(yīng)用流行，是因?yàn)閃eb瀏覽器的廣泛及跨平臺(tái)使用。實(shí)際上，Web瀏覽器頻繁地在許多流行操作系統(tǒng)(“OS”或“多種OS”)中使用，例如，Microsoft?公司售賣的Windows? OSsold by Microsoft?、蘋果公司售賣的MAC OS?和Google?公司售賣的Android? OS。它們可以在落在范圍廣泛的形狀因素內(nèi)的設(shè)備中使用，例如桌上型計(jì)算機(jī)、膝上型上計(jì)算機(jī)、平板個(gè)人計(jì)算機(jī)(“PC”或“多個(gè)PC”)以及手持設(shè)備(例如，移動(dòng)電話、智能電話等)。
[0003]使用創(chuàng)作工具不斷地開發(fā)著Web應(yīng)用，這些創(chuàng)作工具本身為Web應(yīng)用，即在Web瀏覽器中托管。常常地，此類創(chuàng)作工具采用設(shè)備模擬器的形式，設(shè)備模擬器在開發(fā)系統(tǒng)上運(yùn)行的Web瀏覽器中顯示。設(shè)備模擬器包括目標(biāo)設(shè)備(例如，移動(dòng)電話、臺(tái)式計(jì)算機(jī)等)的屏的一個(gè)或多個(gè)圖像。開發(fā)中的Web應(yīng)用顯示在目標(biāo)設(shè)備的屏的圖像內(nèi)。以此方式，模擬器允許開發(fā)人員在目標(biāo)設(shè)備屏的上下文中預(yù)覽開發(fā)中的Web應(yīng)用。
[0004]為了設(shè)備模擬器精確地表示W(wǎng)eb應(yīng)用將如何在目標(biāo)設(shè)備上展示，需要能夠?qū)崿F(xiàn)兩種類型的映射。首先，設(shè)備模擬器必須能夠像素對(duì)像素映射，其中設(shè)備模擬器中模擬的顯示器(下文稱為“模擬的顯示器”)的一個(gè)像素關(guān)聯(lián)到目標(biāo)設(shè)備的顯示器(下文稱為“目標(biāo)顯示器”)上的一個(gè)像素。其次，需要英寸對(duì)英寸(即物理)映射，其中模擬的顯示器的一個(gè)英寸關(guān)聯(lián)到目標(biāo)顯示器的一個(gè)英寸。
[0005]雖然現(xiàn)有創(chuàng)作工具是有用的，但是它們無法實(shí)現(xiàn)精確的英寸對(duì)英寸映射。這是因?yàn)樵撌聦?shí)，即精確的英寸對(duì)英寸映射需要有關(guān)模擬的顯示器的每英寸像素的數(shù)量(PPI)的信息，或換言之，需要有關(guān)正在運(yùn)行設(shè)備模擬器的開發(fā)系統(tǒng)的顯示器的PPI信息。在許多實(shí)例中，模擬的顯示器的PPI是未知的。無論如何，將開發(fā)顯示器的PPI映射到目標(biāo)顯示器的PPI可能是困難的，即使開發(fā)顯示器的PPI是已知的也是這樣。
[0006]此外,現(xiàn)有的Web應(yīng)用開發(fā)工具不提供用于同時(shí)將電子文檔(如e-book)轉(zhuǎn)換成同時(shí)用于多種OS和/或形狀因素的交互式文檔應(yīng)用的直接簡(jiǎn)單機(jī)制。相反，現(xiàn)有Web應(yīng)用開發(fā)工具一般需要應(yīng)用開發(fā)人員使用不同的工具來生成用于各個(gè)OS的應(yīng)用。這種過程可能繁瑣且不方便，并且可能產(chǎn)生OS之間和/或形狀因素之間的用戶接口不方便的交互式文檔應(yīng)用。而且，用于將文檔轉(zhuǎn)換成交互式文檔應(yīng)用的許多現(xiàn)有實(shí)用工具不會(huì)調(diào)整頁(yè)面布局以將不同平臺(tái)之間分辨率和屏幕朝向的變化納入考慮。因此，使用現(xiàn)有工具開發(fā)的交互式文檔應(yīng)用的用戶可能不得不前后翻滾來閱讀文檔的單個(gè)頁(yè)面，這不是用戶所期望的?！緦＠綀D】

【附圖說明】
[0007]圖1提供根據(jù)本公開的非限制實(shí)施例的設(shè)備模擬器的軟件組件的框圖。
[0008]圖2是根據(jù)本公開的非限制實(shí)施例的實(shí)時(shí)地調(diào)整目標(biāo)設(shè)備的由設(shè)備模擬器呈示的模擬的顯示器的縮放的非限制方法的流程圖。
[0009]圖3 提供能夠在多種 Web 瀏覽器(例如，Internet Explorer、Firefox 和 Chrome)中實(shí)時(shí)地精確放大/縮小托管框架(iframe)的JavaScript偽代碼的非限制示例。
[0010]圖4是本公開的Web應(yīng)用開發(fā)工具的一個(gè)或多個(gè)方面可基于的模型、視圖、控制(MVC)體系結(jié)構(gòu)模式的示范框圖。
[0011]圖5是根據(jù)本公開的非限制實(shí)施例的用于Web應(yīng)用開發(fā)工具的頂層體系結(jié)構(gòu)和工作流程圖。
[0012]圖6是根據(jù)本公開的非限制實(shí)施例的交互式文檔Web應(yīng)用的體系結(jié)構(gòu)圖。
[0013]圖7是根據(jù)本公開的非限制實(shí)施例的編譯器服務(wù)產(chǎn)生的原生應(yīng)用的體系結(jié)構(gòu)圖。
[0014]圖8提供根據(jù)本公開的用戶界面的非限制示例。
[0015]圖9是根據(jù)本公開的非限制實(shí)施例的基于Web的用戶界面的體系結(jié)構(gòu)圖。
[0016]圖10是根據(jù)本公開的非限制實(shí)施例的轉(zhuǎn)換服務(wù)的體系結(jié)構(gòu)圖。
[0017]圖11是根據(jù)本公開的Web應(yīng)用開發(fā)工具的非限制示例的類圖。
[0018]圖12是根據(jù)本公開的非限制實(shí)施例的方法和流程圖。
【具體實(shí)施方式】
[0019]本公開的一個(gè)方面涉及用于精確地模擬目標(biāo)設(shè)備的顯示器的系統(tǒng)和方法。相應(yīng)地，本文描述的是包括處理器和其上存儲(chǔ)設(shè)備模擬器指令的存儲(chǔ)器的系統(tǒng)。當(dāng)被執(zhí)行時(shí)，設(shè)備模擬器指令可以使處理器執(zhí)行多種功能。例如，設(shè)備模擬器指令可以使處理器在Web瀏覽器內(nèi)生成用戶界面，其中該用戶界面包括至少一個(gè)托管框架和至少一個(gè)標(biāo)量。在一些實(shí)施例中，目標(biāo)設(shè)備的模擬可以在托管框架中運(yùn)行，其中目標(biāo)設(shè)備包括至少一個(gè)顯示器。
[0020]設(shè)備模擬器指令在被執(zhí)行時(shí)還可以工作以使處理器將所述標(biāo)量的位置轉(zhuǎn)化成縮放比率，并將該縮放比率應(yīng)用于托管框架。在一些非限制實(shí)施例中，標(biāo)量的至少一個(gè)第一位置可以關(guān)聯(lián)到能夠?qū)崿F(xiàn)至少一個(gè)托管框架與目標(biāo)設(shè)備的顯示器之間的英寸對(duì)英寸映射的縮放比率。在又一些非限制實(shí)施例中，標(biāo)量的至少一個(gè)第二位置可以關(guān)聯(lián)到能夠?qū)崿F(xiàn)至少一個(gè)托管框架與目標(biāo)設(shè)備的顯示器之間的像素對(duì)像素映射的縮放比率。
[0021]本文還描述用于模擬目標(biāo)設(shè)備的方法。這些方法可以包括例如生成瀏覽器執(zhí)行的在Web瀏覽器中的目標(biāo)設(shè)備的模擬，并基于由標(biāo)量位置確定的縮放比率來改變模擬的尺寸。在本文描述的方法的一些非限制實(shí)施例中，標(biāo)量的至少一個(gè)第一位置關(guān)聯(lián)到能夠?qū)崿F(xiàn)所述模擬與所述目標(biāo)設(shè)備的顯示器之間的英寸對(duì)英寸映射的縮放比率。在本文描述的方法的又一些非限制實(shí)施例中，標(biāo)量的至少一個(gè)第二位置關(guān)聯(lián)到能夠?qū)崿F(xiàn)所述至少一個(gè)托管框架與所述目標(biāo)設(shè)備的顯示器之間的像素對(duì)像素映射的縮放比率。
[0022]在一些實(shí)施例中，本文描述的方法包括在處理器執(zhí)行的Web瀏覽器內(nèi)顯示用戶界面。該用戶接口可以包括呈現(xiàn)層和呈示層。呈現(xiàn)層可以包括HTML代碼，以及呈示層可以包括JavaScript代碼。在一些實(shí)施例中，該方法包括在呈現(xiàn)層內(nèi)執(zhí)行目標(biāo)設(shè)備的模擬，其中目標(biāo)設(shè)備包括至少一個(gè)顯示器。該方法還可以包括利用所述呈示層檢測(cè)標(biāo)量的位置，利用呈示層將標(biāo)量的位置轉(zhuǎn)換成縮放比率，并將縮放比率應(yīng)用于模擬。在一些非限制實(shí)施例中，標(biāo)量的至少一個(gè)第一位置關(guān)聯(lián)到能夠?qū)崿F(xiàn)所述模擬與目標(biāo)設(shè)備的至少一個(gè)顯示器之間的英寸對(duì)英寸映射的縮放比率。在又一些非限制實(shí)施例中，標(biāo)量的至少一個(gè)第二位置關(guān)聯(lián)到能夠?qū)崿F(xiàn)至少一個(gè)托管框架與目標(biāo)設(shè)備的至少一個(gè)顯示器之間的像素對(duì)像素映射的縮放比率。
[0023]本公開的一個(gè)方面涉及用于實(shí)現(xiàn)目標(biāo)設(shè)備(例如，移動(dòng)電話)的瀏覽器托管的模擬中的精確英寸對(duì)英寸映射的系統(tǒng)和方法。在一些實(shí)施例中，本公開的系統(tǒng)和方法能夠?qū)崿F(xiàn)目標(biāo)設(shè)備與目標(biāo)設(shè)備的瀏覽器托管的模擬之間的精確英寸對(duì)英寸映射，同時(shí)還提供用于切換到模擬與目標(biāo)設(shè)備之間的精確像素對(duì)像素映射的簡(jiǎn)單機(jī)制。
[0024]相應(yīng)地，本文描述的是作為Web應(yīng)用在計(jì)算設(shè)備的處理器上運(yùn)行的設(shè)備模擬器。一般，本文描述的設(shè)備模擬器使用戶界面(UI)能夠在計(jì)算設(shè)備上運(yùn)行的Web瀏覽器中顯示。該Π包括至少一個(gè)設(shè)備模擬器預(yù)覽區(qū)(本文中也稱為“托管框架”)，該至少一個(gè)設(shè)備模擬器預(yù)覽區(qū)配置成模擬目標(biāo)設(shè)備，例如移動(dòng)電話、平板PC、膝上型計(jì)算機(jī)等的顯示器。例如電子書的交互式文檔Web應(yīng)用可以在至少一個(gè)托管框架內(nèi)運(yùn)行和顯示。以此方式，本公開的設(shè)備模擬器可以使用戶(例如，軟件開發(fā)人員)能夠在模擬目標(biāo)設(shè)備顯示器的環(huán)境中實(shí)現(xiàn)交互式文檔Web應(yīng)用的操作和外觀可視化。
[0025]除了上文描述的基本元素和功能外，本文描述的設(shè)備模擬器還可以包括緊鄰至少一個(gè)托管框架或以其他方式與之相鄰的至少一個(gè)設(shè)備框架。此類設(shè)備框架可以顯示圖像，例如目標(biāo)設(shè)備的屏的圖像。在此類實(shí)例中，可以將設(shè)備框架分布在托管框架周圍，從而增強(qiáng)托管框架內(nèi)執(zhí)行的Web應(yīng)用的模擬的操作和外觀。
[0026]本文描述的設(shè)備模擬器還可以包括用于調(diào)整至少一個(gè)托管框架的屬性的機(jī)制。例如，本文描述的設(shè)備模擬器的Π可以包括允許選擇目標(biāo)設(shè)備類型、分辨率和朝向的元素和底層代碼。例如，本文描述的設(shè)備模擬器可以包括包含有關(guān)多個(gè)目標(biāo)設(shè)備和形狀因素例如，移動(dòng)電話、平板PC、智能電話和膝上型計(jì)算機(jī)的數(shù)據(jù)的源文件。一旦選擇了特定設(shè)備或?qū)傩?例如，分辨率和/或朝向)，則本公開的設(shè)備模擬器可以使用調(diào)整的屬性來調(diào)整托管框架的相關(guān)特性并再次呈示托管框架中運(yùn)行的交互式文檔Web應(yīng)用。
[0027]例如，如果用戶通過Π選擇不同的分辨率，則本文描述的設(shè)備模擬器可以工作以調(diào)整托管框架的分辨率，并利用新選擇的分辨率來再次呈示托管框架(和其中運(yùn)行的Web應(yīng)用)和/或一個(gè)或多個(gè)設(shè)備框架。相似地，如果通過Π更改了設(shè)備類型，則本文描述的設(shè)備模擬器可以加載與所選設(shè)備相關(guān)的數(shù)據(jù)(例如，屏成像、分辨率、朝向等)，并利用與所選設(shè)備關(guān)聯(lián)的特性再次呈示托管框架和/或一個(gè)或多個(gè)設(shè)備框架。
[0028]UI還可以包括標(biāo)量，該標(biāo)量與標(biāo)量代碼(稍后描述)組合使用戶能夠改變至少一個(gè)托管框架和/或一個(gè)或多個(gè)設(shè)備框架的尺寸。例如，可以由標(biāo)量代碼將標(biāo)量的位置轉(zhuǎn)換成縮放比率，然后可以將縮放比率應(yīng)用于至少一個(gè)托管框架和/或一個(gè)或多個(gè)設(shè)備框架的縮放屬性。正如稍后詳細(xì)描述的，此功能性能夠?qū)崿F(xiàn)至少一個(gè)托管框架中模擬的顯示器與目標(biāo)設(shè)備(例如，移動(dòng)電話、平板PC等)的顯示器之間的精確英寸對(duì)英寸映射。以及在一些實(shí)施例中，此功能性能夠提供一種高效機(jī)制以用于托管框架與目標(biāo)設(shè)備的顯示器之間的精確英寸對(duì)英寸映射與像素對(duì)像素映射的轉(zhuǎn)換。
[0029]對(duì)于本公開來說，在標(biāo)量的上下文中使用時(shí)，術(shù)語“位置”是指標(biāo)量的實(shí)際位置(例如，相對(duì)于標(biāo)量的另一個(gè)部分)和可歸因于標(biāo)量的位置的值的其中之一或二者兼有。例如，如果標(biāo)量是具有可以在一定值范圍(例如O至100)上左向右行進(jìn)的臂部的滑塊，則滑塊的“位置”可以是指滑塊臂部的相對(duì)位置，和/或可歸因于滑塊位于該位置處的值(例如，0、25、50,100 等)。
[0030]圖1提供根據(jù)本公開的設(shè)備模擬器的軟件組件的非限制示例的框圖。正如先前解釋，設(shè)備模擬器可以在開發(fā)系統(tǒng)，例如桌上型PC的處理器上運(yùn)行的Web瀏覽器內(nèi)執(zhí)行。
[0031]如圖1所示，設(shè)備模擬器100包括呈現(xiàn)層101和呈示層102。呈現(xiàn)層101 (本文在模型、視圖、控制體系結(jié)構(gòu)的上下文中也稱為“視圖“)包括一般運(yùn)行以在開發(fā)系統(tǒng)的處理器上運(yùn)行的Web瀏覽器中繪制用戶界面的功能的底層代碼。在圖1所示的非限制示例中，呈現(xiàn)層101繪制預(yù)覽區(qū)103、托管框架104、一個(gè)或多個(gè)設(shè)備框架105和標(biāo)量106。結(jié)合Web應(yīng)用開發(fā)工具的Π的產(chǎn)生，稍后描述呈現(xiàn)層101的具體操作，該web應(yīng)用開發(fā)工具利用本文描述的設(shè)備模擬器以幫助產(chǎn)生交互式文檔Web應(yīng)用。為了當(dāng)前論述，應(yīng)該注意，可以使用HTML將呈現(xiàn)層101編碼，并且呈現(xiàn)層101可以包括與本領(lǐng)域技術(shù)人員認(rèn)識(shí)相符的多種插件。例如，以及正如下文將詳細(xì)描述的，呈現(xiàn)層101可以包括index, html文件(或其他類似文件)，該文件包含對(duì)第三方插件應(yīng)用和/或數(shù)據(jù)庫(kù)，例如jQuery javascript滑塊插件和關(guān)聯(lián)數(shù)據(jù)庫(kù)的引用。
[0032]雖然圖1將預(yù)覽區(qū)103圖示為比托管框架104大很多，但是應(yīng)該理解預(yù)覽區(qū)103可以是任何大小。在一些實(shí)施例中，將預(yù)覽區(qū)103的大小設(shè)為使得它至少逼近托管框架104的一個(gè)尺寸。
[0033]可以將預(yù)覽區(qū)103再劃分(例如，使用HTML)成多個(gè)列和行，從而定義分開的區(qū)域或框架。此概念在圖1中由虛線107圖示，其圖示預(yù)覽區(qū)103被劃分成三個(gè)行和三個(gè)列，從而將預(yù)覽區(qū)103劃分成圍繞著托管框架104的8個(gè)區(qū)域(例如，8個(gè)設(shè)備框架105)。根據(jù)先前論述，可以獨(dú)立地將預(yù)覽區(qū)103 (包括一個(gè)或多個(gè)設(shè)備框架105)的每個(gè)區(qū)域(框架)編碼，以便顯示圖像，例如目標(biāo)設(shè)備的屏的圖像。稍后圖8中圖示此概念，這提供其中一個(gè)或多個(gè)設(shè)備框架(一個(gè)或多個(gè))顯示目標(biāo)設(shè)備的屏的圖像的用戶界面的非限制示例。
[0034]雖然圖1圖示將預(yù)覽區(qū)劃分成圍繞單個(gè)托管框架104的8個(gè)區(qū)域，但是應(yīng)該理解預(yù)覽區(qū)103可以被劃分成任何數(shù)量的區(qū)域，并且可以包含多于一個(gè)托管框架。實(shí)際上，通過本公開可設(shè)想具有含1、2、3、4、5或更多個(gè)托管框架的預(yù)覽區(qū)的設(shè)備模擬器。通過舉例，預(yù)覽區(qū)103可以劃分成6個(gè)列和三個(gè)行，從而能夠顯示各被8個(gè)區(qū)域(包括8個(gè)設(shè)備框架105)圍繞的兩個(gè)托管框架。以此方式，可以同時(shí)呈示目標(biāo)設(shè)備的多個(gè)模擬。
[0035]可以使用HTML、其變體和/或其他適合的代碼來將預(yù)覽區(qū)103(包括托管框架104)編碼。在使用HTML將預(yù)覽區(qū)103編碼的實(shí)例中，可以使用例如〈iframe〉HTML標(biāo)記來定義托管框架105。
[0036]標(biāo)量106是具有用戶可更改的位置范圍的用戶界面對(duì)象。在一些實(shí)施例中，標(biāo)量106以滑塊、滑輪、一對(duì)放大/縮小按鈕、下拉列表和/或一系列單選按鈕的形式呈現(xiàn)。作為可以根據(jù)本公開使用的適合標(biāo)量的非限制示例，提到j(luò)Query Ul滑塊庫(kù)和/或插件，其實(shí)現(xiàn)在稍后進(jìn)行描述。
[0037]呈示層102工作以將設(shè)備模型數(shù)據(jù)和其他特性應(yīng)用于托管框架104，在Web瀏覽器內(nèi)呈示定制面板(稍后描述)以及利用目標(biāo)設(shè)備的適合屬性和/或用戶選擇的特性呈示托管框架104中運(yùn)行的Web應(yīng)用。呈示層102可以通過例如調(diào)用包含與目標(biāo)設(shè)備的顯示器關(guān)聯(lián)的屬性的至少一個(gè)源文件來提供此功能性。此類源文件可以包括一個(gè)或多個(gè)目標(biāo)設(shè)備的信息(例如，設(shè)備類型、朝向、分辨率等)。呈示層102可以將目標(biāo)顯示器的屬性應(yīng)用于托管框架104的相關(guān)屬性。由此，可以在開發(fā)系統(tǒng)的Web瀏覽器內(nèi)以目標(biāo)設(shè)備的適合屬性顯不設(shè)備模擬器100的托管框架104中運(yùn)行的Web應(yīng)用。
[0038]呈現(xiàn)層102還可以包括監(jiān)視標(biāo)量106的位置的標(biāo)量代碼107?；跇?biāo)量106的位置，標(biāo)量代碼107可以根據(jù)執(zhí)行設(shè)備模擬器100所在的瀏覽器，確定縮放比率或比例。例如，標(biāo)量代碼可以將標(biāo)量106的位置轉(zhuǎn)換成在Firefox Web瀏覽器中使用的比例或在Microsoft Internet Explorer中使用的縮放比率。為了方便和簡(jiǎn)潔,本文將此轉(zhuǎn)換的結(jié)果稱為“縮放比率”。
[0039]標(biāo)量代碼107可以將確定的縮放比率應(yīng)用于預(yù)覽區(qū)103、托管框架104、一個(gè)或多個(gè)設(shè)備框架105及其組合，并且利用所確定的縮放比率再次呈示預(yù)覽區(qū)103(包括托管框架104和一個(gè)或多個(gè)設(shè)備框架105)。
[0040]標(biāo)量代碼107還可以包括事件處理機(jī)，事件處理機(jī)響應(yīng)標(biāo)量事件將確定的縮放比率應(yīng)用于預(yù)覽區(qū)103。例如，標(biāo)量代碼107可以在標(biāo)量106的位置開始改變(“開始”)時(shí)，標(biāo)量106的位置改變(“移動(dòng)”或“滑動(dòng)”)時(shí)，標(biāo)量106的位置停止改變(“停止”)時(shí)或其組合，將確定的縮放比率應(yīng)用于預(yù)覽區(qū)103 (或其組件)。在一些實(shí)施例中，隨著標(biāo)量106的位置變化，標(biāo)量代碼107將確定的縮放比率應(yīng)用于預(yù)覽區(qū)103(包括設(shè)備模擬預(yù)覽區(qū)104和一個(gè)或多個(gè)框架105，如果存在的話)。在此類實(shí)例中，標(biāo)量代碼107可以使呈示層100更新預(yù)覽區(qū)103、托管框架104、一個(gè)或多個(gè)設(shè)備框架105或其組合的縮放比率，以及使用所確定的縮放比率實(shí)時(shí)地再次呈示一個(gè)或多個(gè)此類區(qū)。
[0041]通過適當(dāng)?shù)卣{(diào)整標(biāo)量106，可以調(diào)整預(yù)覽區(qū)103、托管框架104、一個(gè)或多個(gè)設(shè)備框架(105)及其組合的大小，以便提供目標(biāo)設(shè)備的模擬的顯示器與實(shí)際目標(biāo)設(shè)備的精確英寸對(duì)英寸映射。這可以通過例如調(diào)整標(biāo)量106以使設(shè)備模擬器100呈示開發(fā)系統(tǒng)的顯示器上的預(yù)覽區(qū)103(以及具體地托管框架104)以使預(yù)覽區(qū)103(以及具體為托管框架104)的大小逼近目標(biāo)設(shè)備的物理大小來實(shí)現(xiàn)。以此方式，設(shè)備模擬器可以提供所見即所得(WYSWYG)的環(huán)境。因此，Web應(yīng)用能夠以與其在目標(biāo)設(shè)備上將展示的相同方式展示在設(shè)備模擬器中。
[0042]圖2是根據(jù)本公開的實(shí)時(shí)地調(diào)整目標(biāo)設(shè)備的由設(shè)備模擬器呈示的模擬的顯示器的縮放的非限制方法的流程圖。在開始步驟201中，設(shè)備模擬器100可以使用與缺省目標(biāo)顯示器相符的特性在預(yù)覽區(qū)103的托管框架104中呈示W(wǎng)eb應(yīng)用。作為備選，設(shè)備模擬器100可以等待目標(biāo)設(shè)備的選擇，然后才在預(yù)覽區(qū)103的全部或一部分(包括托管框架104和一個(gè)或多個(gè)設(shè)備框架105)中呈示W(wǎng)eb應(yīng)用。無論開始步驟201中執(zhí)行的操作如何，在呈示預(yù)覽區(qū)步驟202中，設(shè)備模擬器100呈示預(yù)覽區(qū)103。
[0043]在呈示預(yù)覽區(qū)103之后,在檢測(cè)標(biāo)量位置步驟203中，標(biāo)量代碼107監(jiān)視標(biāo)量106的位置。然后在將標(biāo)量位置轉(zhuǎn)換成縮放比率步驟204中，可以將標(biāo)量106的位置轉(zhuǎn)換成縮放比率。在將縮放比率應(yīng)用于設(shè)備模擬步驟205中，設(shè)備模擬器100然后可以將確定的縮放比率應(yīng)用于預(yù)覽區(qū)?？梢噪S著標(biāo)量106被調(diào)整，重復(fù)步驟202-205。使用此方法，可以更新預(yù)覽區(qū)103 (包括托管框架104和/或一個(gè)或多個(gè)設(shè)備框架105)，從而允許用戶實(shí)時(shí)地將對(duì)預(yù)覽區(qū)103的縮放比率的更改可視化。[0044]在一些實(shí)施例中，本文描述的設(shè)備模擬器能夠產(chǎn)生大小與目標(biāo)設(shè)備的顯示器物理大小相差約5%或更小、約2%或更小或甚至約1%或更小的目標(biāo)設(shè)備的模擬的顯示器。在一些實(shí)施例中，本文描述的設(shè)備模擬器能夠產(chǎn)生大小等于目標(biāo)設(shè)備的顯示器物理大小的目標(biāo)設(shè)備的模擬的顯示器。
[0045]為了實(shí)現(xiàn)英寸對(duì)英寸映射，可以手動(dòng)調(diào)整標(biāo)量106，直到設(shè)備模擬器100呈示的模擬的顯示器的比較逼近目標(biāo)設(shè)備的物理大小位置。這可以通過例如在開發(fā)系統(tǒng)的監(jiān)視器上呈示模擬的顯示器，將目標(biāo)設(shè)備固定到托管系統(tǒng)上，并在調(diào)整標(biāo)量同時(shí)以目視方式將模擬的顯示器的大小與目標(biāo)設(shè)備的物理大小比較來實(shí)現(xiàn)。作為備選，此比較可以自動(dòng)地進(jìn)行，例如通過編碼成將模擬的顯示器的屬性與開發(fā)顯示器的每英寸像素?cái)?shù)(點(diǎn))(PPI)比較的程序來進(jìn)行。例如，此類程序可以調(diào)用包含多個(gè)開發(fā)顯示器的PPI信息的數(shù)據(jù)庫(kù)，并將該P(yáng)PI信息與模擬的顯示器，具體為托管框架的相關(guān)屬性比較。
[0046]還可以將標(biāo)量106配置成使得選定的位置關(guān)聯(lián)到與目標(biāo)設(shè)備的顯示器像素對(duì)像素映射的設(shè)備模擬預(yù)覽區(qū)103、托管框架104、一個(gè)或多個(gè)設(shè)備框架105或其組合的縮放比率。例如，標(biāo)量106的選定的位置可以關(guān)聯(lián)到設(shè)備模擬預(yù)覽區(qū)103、托管框架104、一個(gè)或多個(gè)設(shè)備框架105的100%的縮放比率。在一些非限制實(shí)施例中，預(yù)覽區(qū)內(nèi)的像素的數(shù)量大于或等于目標(biāo)設(shè)備的顯示器的像素的數(shù)量。即，預(yù)覽區(qū)(以及具體為托管框架)的分辨率優(yōu)選地等于或大于目標(biāo)設(shè)備的顯示器的分辨率。在此類實(shí)例中，由標(biāo)量確定的縮放比率可以提供與目標(biāo)設(shè)備的顯示器實(shí)現(xiàn)像素對(duì)像素映射的模擬的顯示器。
[0047]在一些實(shí)例中，預(yù)覽區(qū)的分辨率可以設(shè)為低于目標(biāo)設(shè)備的顯示器的分辨率。在此類實(shí)例中，預(yù)覽區(qū)(以及具體為特定托管框架104)中運(yùn)行的模擬的顯示器可以關(guān)聯(lián)到目標(biāo)設(shè)備的顯示器的一部分。盡管如此，使用本文描述的標(biāo)量，可以確定促成模擬的顯示器與目標(biāo)設(shè)備的顯示器的對(duì)應(yīng)部分之間的像素對(duì)像素映射的縮放比率。
[0048]作為可根據(jù)本公開使用的標(biāo)量的非限制示例，提到通過jQuery Ul滑塊插件和Javascript庫(kù)(下文稱為“jQuery插件”)使能的滑塊。jQuery插件提供多種滑塊選項(xiàng),包括開發(fā)人員可以選擇的多種句柄和范圍。這些句柄和范圍可以由用戶例如使用鼠標(biāo)或鍵盤來進(jìn)行選擇。
[0049]為了圖示JQuery Π滑塊插件的非限制使用，參考圖3。一般，圖3提供示范JavaScript偽代碼，其使得能夠在多種Web瀏覽器，如Internet Explorer、Firefox和Chrome中實(shí)現(xiàn)托管框架(iframe)的實(shí)時(shí)精確放大/縮小。
[0050]在圖3所示的非限制示例中，可以通過將如下行添加到定義呈現(xiàn)層101的HTML文檔中(例如，index, html中)來包括jQuery庫(kù):
【權(quán)利要求】
1.一種系統(tǒng)，其包括: 處理器； 其上存儲(chǔ)有設(shè)備模擬器指令的存儲(chǔ)器，其中在被執(zhí)行時(shí)，所述設(shè)備模擬器指令促使所述處理器執(zhí)行如下操作: 在Web瀏覽器內(nèi)生成用戶界面，所述用戶界面包括至少一個(gè)托管框架和至少一個(gè)標(biāo)量，所述至少一個(gè)托管框架包含其中運(yùn)行的目標(biāo)設(shè)備的模擬，所述目標(biāo)設(shè)備包括至少一個(gè)顯示器； 將所述標(biāo)量的位置轉(zhuǎn)換成縮放比率；以及 將所述縮放比率應(yīng)用于所述至少一個(gè)托管框架； 其中所述標(biāo)量的至少一個(gè)第一位置關(guān)聯(lián)到能夠?qū)崿F(xiàn)所述至少一個(gè)托管框架與所述目標(biāo)設(shè)備的所述至少一個(gè)顯示器之間的英寸對(duì)英寸映射的縮放比率。
2.如權(quán)利要求1所述的系統(tǒng)，其中所述標(biāo)量的至少一個(gè)第二位置關(guān)聯(lián)到能夠?qū)崿F(xiàn)所述至少一個(gè)托管框架與所述目標(biāo)設(shè)備的所述至少一個(gè)顯示器的像素對(duì)像素映射的縮放比率。
3.如權(quán)利要求1所述的系統(tǒng)，其中所述設(shè)備模擬器指令被執(zhí)行時(shí)還促使所述處理器生成與所述至少一個(gè)托管框架相鄰的多個(gè)設(shè)備框架。
4.如權(quán)利要求1所述的系統(tǒng)，其中所述多個(gè)設(shè)備框架包含所述目標(biāo)設(shè)備的屏的圖像。
5.如權(quán)利要求1所述的系統(tǒng)，其中所述設(shè)備模擬器指令被執(zhí)行時(shí)還促使所述處理器響應(yīng)與所述標(biāo)量關(guān)聯(lián)的事件刷新所述至少一個(gè)托管框架。
6.如權(quán)利要求5所述的系統(tǒng)，其中與所述標(biāo)量關(guān)聯(lián)的所述事件選自如下組成的群:開始、停止、移動(dòng)或其組合。
7.如權(quán)利要求5所述的系統(tǒng)，其中響應(yīng)與所述標(biāo)量關(guān)聯(lián)的所述事件，實(shí)時(shí)地刷新所述至少一個(gè)托管框架。
8.如權(quán)利要求1所述的系統(tǒng)，其中所述至少一個(gè)第一位置關(guān)聯(lián)到縮放比率，所述縮放比率使得所述至少一個(gè)托管框架以與所述目標(biāo)設(shè)備的所述顯示器的對(duì)應(yīng)尺寸相差約5%或更小的至少一個(gè)尺寸在所述系統(tǒng)的顯示器上呈示所述至少一個(gè)托管框架。
9.一種方法，其包括: 在處理器執(zhí)行的Web瀏覽器中生成目標(biāo)設(shè)備的模擬，所述目標(biāo)設(shè)備包括至少一個(gè)顯示器；以及 基于從標(biāo)量位置確定的縮放比率改變所述模擬的縮放； 其中所述標(biāo)量的至少一個(gè)第一位置關(guān)聯(lián)到能夠?qū)崿F(xiàn)所述模擬與所述目標(biāo)設(shè)備的所述至少一個(gè)顯示器之間的英寸對(duì)英寸映射的縮放比率。
10.如權(quán)利要求9所述的方法，其中所述標(biāo)量的至少一個(gè)第二位置關(guān)聯(lián)到能夠?qū)崿F(xiàn)所述模擬與所述目標(biāo)設(shè)備的所述至少一個(gè)顯示器之間的像素對(duì)像素映射的縮放比率。
11.如權(quán)利要求9所述的方法，還包括: 在所述Web瀏覽器內(nèi)的至少一個(gè)托管框架內(nèi)執(zhí)行所述模擬；以及 在與所述至少一個(gè)托管框架相鄰的至少一個(gè)設(shè)備框架中顯示所述目標(biāo)設(shè)備的屏的成像。
12.如權(quán)利要求10所述的方法，還包括響應(yīng)標(biāo)量事件，刷新所述Web瀏覽器中的所述模擬。
13.如權(quán)利要求12所述的方法，其中所述標(biāo)量事件選自如下組成的群:開始、停止、移動(dòng)或其組合。
14.如權(quán)利要求12所述的方法，其中響應(yīng)所述標(biāo)量事件實(shí)時(shí)地刷新所述模擬。
15.一種方法，其包括: 在由處理器執(zhí)行的Web瀏覽器內(nèi)顯示用戶界面，所述用戶界面包括呈現(xiàn)層和呈示層，所述呈現(xiàn)層包括超文本標(biāo)記語言代碼，所述呈示層包括JavaScript代碼； 在所述呈現(xiàn)層內(nèi)執(zhí)行目標(biāo)設(shè)備的模擬，所述目標(biāo)設(shè)備包括至少一個(gè)顯示器； 用所述呈示層檢測(cè)標(biāo)量的位置； 用所述呈示層將所述標(biāo)量的所述位置轉(zhuǎn)換成縮放比率；以及 將所述縮放比率應(yīng)用于所述模擬； 其中所述標(biāo)量的至少一個(gè)第一位置關(guān)聯(lián)到能夠?qū)崿F(xiàn)所述模擬與所述目標(biāo)設(shè)備的所述至少一個(gè)顯示器之間的英寸對(duì)英寸映射的縮放比率。
16.如權(quán)利要求15所述的方法，其中所述標(biāo)量的至少一個(gè)第二位置關(guān)聯(lián)到能夠?qū)崿F(xiàn)所述模擬與所述目標(biāo)設(shè)備的所述至少一個(gè)顯示器之間的像素對(duì)像素映射的縮放比率。
17.如權(quán)利要求1 5所述的方法，還包括: 在所述用戶界面內(nèi)的至少一個(gè)托管框架內(nèi)執(zhí)行所述模擬；以及 在與所述至少一個(gè)托管框架相鄰的至少一個(gè)設(shè)備框架中顯示所述目標(biāo)設(shè)備的屏的成像。
18.如權(quán)利要求15所述的方法，還包括: 響應(yīng)標(biāo)量事件，用所述呈示層刷新所述模擬。
19.如權(quán)利要求18所述的方法,其中所述標(biāo)量事件選自開始、停止、移動(dòng)或其組合。
20.如權(quán)利要求18所述的方法，其中響應(yīng)所述標(biāo)量事件實(shí)時(shí)地刷新所述模擬。
【文檔編號(hào)】G06F9/44GK103814371SQ201280046903
【公開日】2014年5月21日 申請(qǐng)日期:2012年9月17日 優(yōu)先權(quán)日:2011年9月26日
【發(fā)明者】Z.侯 申請(qǐng)人:英特爾公司