CN104798036A - 使用声明性模板来标记出控件的用户界面控件框架 - Google Patents

使用声明性模板来标记出控件的用户界面控件框架 Download PDF

Info

Publication number
CN104798036A
CN104798036A CN201380043303.5A CN201380043303A CN104798036A CN 104798036 A CN104798036 A CN 104798036A CN 201380043303 A CN201380043303 A CN 201380043303A CN 104798036 A CN104798036 A CN 104798036A
Authority
CN
China
Prior art keywords
control
html
layout
template
attribute
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.)
Pending
Application number
CN201380043303.5A
Other languages
English (en)
Inventor
C·奇林乔内
M·利斯
D·霍普同
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.)
Microsoft Corp
Original Assignee
Microsoft 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 Microsoft Corp filed Critical Microsoft Corp
Publication of CN104798036A publication Critical patent/CN104798036A/zh
Pending legal-status Critical Current

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/957—Browsing optimisation, e.g. caching or content distillation
    • 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
    • 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/451—Execution arrangements for user interfaces
    • 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
    • G06F9/45504—Abstract machines for programme code execution, e.g. Java virtual machine [JVM], interpreters, emulators
    • G06F9/45508—Runtime interpretation or emulation, e g. emulator loops, bytecode interpretation
    • G06F9/45512—Command shells

Landscapes

  • Engineering & Computer Science (AREA)
  • Software Systems (AREA)
  • Theoretical Computer Science (AREA)
  • General Engineering & Computer Science (AREA)
  • Physics & Mathematics (AREA)
  • General Physics & Mathematics (AREA)
  • Human Computer Interaction (AREA)
  • Databases & Information Systems (AREA)
  • Data Mining & Analysis (AREA)
  • Stored Programmes (AREA)
  • Document Processing Apparatus (AREA)
  • User Interface Of Digital Computer (AREA)

Abstract

用户界面(“UI”)控件框架使得UI控件能被声明性地与HTML标记内联地创建，而不需要通常使用常规的UI控件模型需要的写样板代码JavaScript。UI控件框架被构建以位于现有的WinJS(JavaScript的Windows库)功能之上并封装跨许多控件实现公用的行为，使得UI控件模板的单个实例可被用于标记出多个控件实例。UI控件框架将布局与支持控件中的“隐藏代码”分开，使得数据绑定可在没有对控件以及其子控件的任一的布局的显式知晓的情况下被抽象地实现。标记提供允许代码具有对子控件的直接访问的“定位点”。将命名属性放置在控件实例上的自定义expando HTML属性可被使用。

Description

使用声明性模板来标记出控件的用户界面控件框架
背景
第五版本的超文本标记语言(即，“HTML5”)被称为万维网联盟(“W3C”)的国际标准主体正式地定义。HTML5包括超过100个与下一代Web技术有关的规范。HTML5描述被配置成使得设计者和开发者能够构建下一代网站和应用的一组HTML、CSS(层叠样式表)和JavaScript规范。尽管这样的技术在许多使用场景中令人满意地执行，但是依然存在用于要被实现的增强的和更丰富的web应用开发体验的机会。
提供本背景来介绍以下概述和详细描述的简要上下文。本背景不旨在帮助确定所要求保护的主题的范围，也不旨在被看作将所要求保护的主题限于解决以上所提出的问题或缺点中的任一个或全部的实现。
概述
用户界面(“UI”)控件框架使得UI控件能被声明性地与HTML标记内联地创建，而不需要通常使用常规的UI控件模型需要的写样板代码JavaScript。在一个具体的说明性实施例中，UI控件框架被构建以位于现有的WinJS(JavaScript的Windows库)功能之上并封装跨许多控件实现公用的行为，使得UI控件模板的单个实例可被用于标记出多个控件实例。UI控件框架将布局与支持控件中的“隐藏代码”分开，使得数据绑定可在没有对控件以及其子控件的任一的布局的显式知晓的情况下被抽象地实现。标记提供允许代码具有对子控件的直接访问的“定位点”。将命名属性放置在控件实例上的自定义expandoHTML属性可被使用。
有利地，布局和支持控件之间松散的耦合允许UI控件可被web应用设计者容易地创建，这些web应用设计者往往是HTML和CSS方面的专家，但是不像编程者/开发者那样精通JavaScript编码。框架支持对UI控件的声明性创建，而不需要设计者必须接触支持控件代码。框架及其声明性模板进一步是固有的灵活的，使得只要定位点保持被同样命名，设计者就可对控件布局作出大规模的改变，而不需要触发更新支持控件中的代码的需要。这样的灵活度为应用设计者提供了强劲的工具来产生丰富的用户体验，同时还减少与代码维护相关联的花费。
提供本概述是为了以简化的形式介绍将在以下具体实施方式中进一步描述的概念选择。本概述不旨在标识出所要求保护的主题的关键特征或必要特征，也不旨在用于帮助确定所要求保护的主题的范围。
附图描述
图1示出可在其中实现本UI控件框架的说明性计算环境；
图2示出了在传统的UI控件模型中，UI控件布局如何被紧密地耦合到底层“隐藏代码”；
图3示出了调用显示音乐曲目并使得能够实现它们的购买的UI控件的说明性HTML代码；
图4显示了被用于实现图3中显示的UI控件的样板代码JavaScript的说明性示例；
图5显示了在本UI控件框架中，指定UI控件布局的标记文件如何被松散地耦合并与支持控件分开；
图6示出了声明性UI控件模板如何被用于“标记出”多个控件实例的说明性示例；
图7示出了用于将数据绑定到在其中数据由支持控件提供的布局中的控件的说明性安排；
图8示出了本UI控件框架的实现的说明性体系结构；
图9显示了在WinJS下支持本UI控件框架的命名空间和函数的创建；
图10-12示出了本UI控件框架的说明性使用的示例；
图13示出了说明性HTML DOM(文档对象模型)树的一部分；
图14-17示出了包括与HTML元素相关联的各个expando属性的说明性HTML片段；以及
图18是可用来实现本UI控件框架的诸如个人计算机或服务器之类的说明性计算机***的简化框图。
附图中类似的附图标记描述类似的元素。
详细描述
图1示出可在其中实现本UI控件框架的说明性计算环境100。在环境100中，数个web应用用户105采用相应的计算设备110来通过因特网120访问包括web应用提供者115在内的基于web的资源。计算设备110可包括具有各种特征和功能的各种平台(在此不是所有这样的平台都在图1中被示出)，包括例如，移动电话、智能电话、个人计算机(“PC”)、超移动PC、PDA(个人数字助理)、电子邮件电子设备、数字媒体播放器、平板计算机、手持式游戏平台以及游戏控制台、上网本和膝上型计算机、因特网连接的电视、机顶盒、GPS(全球定位***)和导航设备、数字相机和具有在此提供的功能的各种组合的设备。然而，强调的是，以上列表旨在说明性，并且本安排可被预期来在各种各样支持HTML5功能或其子集的平台上使用。
尽管不是用于实现本UI控件框架的需要的功能，但是计算设备110可通常具有一些形式的网络连接特征(要么直接地要么通过中间设备(例如，因特网连接的个人计算机))以及web浏览器或应用或内嵌特征，这些内嵌特征提供在设备上操作的并支持用户通过显示和输入设备(诸如触摸屏、小键盘、定点设备等)的交互性的类似功能。如在图1中显示的，计算设备110可使用移动网络125或通过因特网服务提供者(“ISP”)130或在一些情况下使用两者来访问因特网120和web应用提供者115。
web应用设计者135与提供者115一起工作来设计包括充分利用HTML5的能力的应用和网站在内的下一代web技术。编程者140也与提供者一起工作。在这个说明性示例中，设计者通常熟悉HTML和CSS并使用HTML和CSS，但不需要具有与编程者相同高水平的对编码方面的专业知识。
如图2中显示的，传统的UI控件开发模型通常在UI控件布局205和底层代码210(通常称为“隐藏代码(code behind)”)之间实现紧密的耦合，UI控件布局205在用户的显示上组织和呈现控件，底层代码210被用来使用web应用的业务和/或呈现逻辑来实现控件。这样紧密的耦合意味着代码需要具有对每个UI控件和任意子控件的布局的显式知晓。此外，子控件所拥有的任何依赖性需要被父来显式地管理。
使用传统的开发模型，设计者可能需要在创建或修改应用特征时接触代码，这在设计者更有限的代码专业知识的情况下通常是有问题的。代码和布局之间的紧密耦合还可引起对于为每个UI控件生成相对大量的样板代码(boilerplate code)的需要。图3和4提供WinJS中这样的样板代码的说明性示例。WinJS提供了全面的功能来使得设计者、编程者和开发者能够实现使用JavaScript为Metro(城市)样式的应用(“应用”)设计的新控件。当前，WinJS使用HTML标记和JavaScript之间简单但强大的合约(contract)来定义UI控件。在图3中用附图标记305显示了UI控件的HTML标记的说明性片段，该说明性片段显示了可通过按下相应按钮来购买的各种音乐曲目。对应的JavaScript代码在图4中由附图标记405来显示。
如在这个示例中显示的，即使使用相对简单的控件，依然有大量的样板代码，其中这样的代码将通常需要为基本上每个UI控件重复。这样的情况可导致编程者(例如，图1和2中的编程者140)需要多次解决类似的问题，其可导致编码错误和不一致，减低公共和共享编码模式的普及度，并最终产生较高的应用维护成本。
不像传统UI控件模型中的紧密耦合，如图5中显示的，在本UI控件框架中，UI控件布局505松散地耦合到隐藏代码510。具体而言，松散的耦合使得标记文件515(例如可包括HTML和CSS)能够与支持控件520分开。UI控件将它们的布局存储在标记文件515中，包括对于任意子控件的引用，其可接着被用作声明性模板来“标记出(stamp out)”多个控件的布局。如图6中显示的，标记文件515(即，声明性模板)本身被单个实例化，但是标记出是按每控件实例来执行的。每个布局605按1:1的基础被映射到支持控件610中的代码。因此，本UI控件框架有利地使得多个UI控件能够被定义在单个模板中，这减少了对样板代码的重复生成的需要并同时使得能够实现通过标记的控件的简单声明性布局。
UI控件的数据(诸如属性或值)在布局中不直接被控件所管理。相反，在布局中通过声明性规范来请求数据以松散地向支持控件寻求获得数据。图7显示了这样的数据绑定的说明性示例，其中控件布局705包括两个子控件，如附图标记715和720指示的。子控件的数据是从提供如附图标记725和730指示的属性的支持控件710中绑定的。显著地，松散耦合允许支持控件所提供的数据被抽象地实现，而不需要对子控件的显式知晓。
图8显示了被构建在现有WinJS平台上的本UI控件框架的一个具体实现的说明性体系结构。关于WinJS的附加信息可在http://msdn.microsoft.com/en-us/library/windows/apps/br211377.aspx处找到。在这个具体示例中，控件框架805支持UI控件810并作为核构建块来构建在三个WinJS组件上。组件包括Base.js(如附图标记815指示的)，其是提供类型定义并支持使用WinJS承诺对象的异步延迟调用模型的WinJS类型库。Binding.js组件820被用于提供用于单向、动态属性绑定和数据模板化的声明性且命令式绑定***。UI.js组件825提供基本控件模型、HTML片段加载器和各种UI工具功能。强调的是，对WinJS平台及其具体构建块组件的使用旨在是说明性的，并且本UI控件框架不被限于WinJS平台实现。在此呈现的原理可取决于具体实现的要求来被适应与各种各样的编程范式(其中的一些可不使用CSS和JavaScript对象)使用。
命名空间和默认控件类被定义在WinJS中，如图9中显示的代码段905中显示的。这个类提供了一组函数，该组函数被安排来简化控件声明以及封装优化、以及对片段、模板等的后台管理中的一些。新的控件类而非WinJS控件定义函数被使用。然而，所提供的defineUserControl(定义用户控件)函数符合相同的WinJS控件合约。函数将参数中的多个从WinJS传递到WinJS.Class.define()内，连同将值传递到默认控件类。
函数参数被显示在以下的表1中：
表1
注意，从现有的控件中导出是可能的。在这种情况下的常见使用将是针对相同的控件行为采用不同的模板。这样的使用类似于Windows演示基础(“WPF”)中的控件实现。
控件基类实现WinJS合约(例如，setOptions(设置选项)、setElement(设置元素)和函数(元素，选项)构造器函数)，同时为扩展这个类的设计者和编程者提供可选自定义。控件基类支持各种函数，如以下表2中显示的：
表2
可能存在当控件作者在该作者的控件从UI中被移除(例如以便要么释放资源要么保存状态)时需要执行工作的情况。为了实现这个，如果控件从HTMLDOM(文档对象模型)中被移除，则称为“卸载”的方法在控件实例上被调用。这允许作者在正确的时间进行该工作。
当模板被加载时，它被封装，使得对实现UI控件的标记和CSS的加载对于控件消费者(例如，设计者135)而言是透明的。为了实现这种透明性，控件定义将具有URI(统一资源标识符)，该URI表示文件和该文件内针对模板的标识符两者。说明性的示例是：如以下表3中显示的“SimpleControls.html#EditBox”。
表3
使用HTML id属性来标识特定模板可以是可能的，但是当与父文档合并时，会存在一些关于唯一性方面的问题。为了解决这个，自定义HTML expando属性“data-ent-templateid”被使用，其被设置为在HTML文档中唯一的值。文件路径和id的组合可被用于全局地标识模板。
在给定控件布局文件对于模板的一对多的关系下，将特定文件(片段)加载到DOM内以供访问模板需要对于控件消费者而言是透明的。WinJS具有丰富且完整特征化的片段加载机制，其可被本UI控件框架充分利用。这允许片段被加载到文档内，并且它们驻留在文档中直到被显式地卸载。对于加载相同片段的后续调用将由此被立即完成。这种隐式高速缓存由此在片段被加载时管理它们。除了被实例化之外，WinJS.Binding(绑定).Template(模板)实例被高速缓存使得它们不需要在每次控件被呈现时被抓取。
被包括在源HTML文件中的CSS和脚本被合并，而不需要重复到父文档内。WinJS提供“卸载”片段的能力，其将移除和卸载内容。模板将在WinJS中使用WinJS.Binding.Template()函数(其符合控件合约)以为控件执行实际模板水合(hydration)和数据绑定。由此，片段加载和模板水合两者将对于控件作者而言被无缝地处理。
图10-12显示了本UI控件框架的说明性使用的示例。图10显示了实现用于使得用户能够经由以与在图3和4中显示并在附随的文本中描述的示例类似的方式按压按钮来购买显示的音乐曲目的UI的UI控件模板的HTML代码片段1005。对应的JavaScript代码1105被显示在图11中。控件消费者可使用图12中显示的HTML片段1205来简单声明性地实例化UI控件。
除了以上描述的UI控件框架的核心功能之外，多个提供附加的控件行为的自定义HTML expando属性可被使用。由属性引起的一个具体问题是对于给定的控件的DOM树，可能需要访问特定的HTML元素－要么直接地要么通过该元素表示的控件。图13中显示了说明性DOM树1310，其将应用的页表示为一组连接节点，该组连接节点包括如键1315指示的HTML元素、文本元素和属性。JavaScript可通过树来访问节点以修改或删除它们的内容并创建新的元素。DOM树中的节点彼此具有分层关系。
为了解决这个访问问题，模板被允许创作，其中被命名为“data-ent-member”的expando属性被置于特定的元素上。这个属性被解释以将它被置于其上的元素的实例作为控件实例上的成员来放置。如果元素表示控件，则替代于元素，控件实例被放置在该成员中。一个示例被显示在图14中显示的HTML片段1405中。在这个示例中，消费这个模板的控件将找到它具有两个属性集－成员1、成员2－其使得能够容易地访问那些元素。属性在以下表4中描述。
表4
在给定典型DOM树的复杂性以及将布局尽可能多地从代码实现中解耦的目标的情况下，事件被声明性地附加而非使用代码并实现事件***。尽管“data-ent-member”属性允许模板的组成部分移动并维持对代码的较低影响，但是它依然需要对事件监听者、定义的函数等的调用。此外，“this(这个)”指针指向产生事件的元素而非控件本身。这通常意味着开发者在整个他们的代码中使用“var that”或doing.bind(this)。为了避免开发者必须自己考虑这样的形式问题并将事件处理程序写成正如任何其它函数一样，如在图15中的HTML片段1505中显示的，expando属性“data-ent-event”被使用。在图15中显示的这个具体示例中，将被附加到HTML元素的DOM事件在以下被显示在表5中。
表5
所有的处理程序方法将在控件实例上被找到并且将具有它们的被设置为控件实例的“this”指针。当被调用时，它们将将所传递的标准参数传递到任一DOM事件处理程序。
附加的需要是抽象出应用中的特定操作－例如，播放视频、购买曲目等－以向控件消费者隐藏操作的复杂性。为了解决这个，称为“动作”的概念被创建。这个概念为调用、启用(例如，具有有效选择)和可用(基于机器配置、或市场需要从不可能发生)状态提供简单合约。
尽管本UI控件框架不处理对功能本身的实际调用(由于其取决于控件来确定最佳交互)，但是获得动作、处理可用性和使得其对控件可用的基础结构是控件框架的一部分。因此，如图16中的HTML片段1605中显示的，expando属性“data-ent-action”被使用。在这个示例中，“data-ent-action”属性的值被用于查找内部服务中的动作并将实例放置到实际控件上。控件可接着假定动作属性(如果真的话)是有效动作并且数据绑定或以其它方式对其操纵。
动画通常被用于为用户产生引人入胜的的体验集。为了使得能够实现一致的、引人入胜的的体验，而非在屏幕上表现为不和谐的视觉闪烁的简单元素，本UI控件框架的目标是使得控件自己展现。代替让控件在逐情况的基础上个别地管理这个，expando属性“data-ent-showanimation”和“data-ent-hideanimation”可被用于声明当给定元素分别被显示和/或隐藏时在该给定元素上播放的CSS动画。应当注意，但由于父元素的可见性可能实际上是不可见的，“shown(被显示)”将该元素可相信自己将是可见的可能性考虑在内。当将元素驻留在其中的树考虑在内时，这意味着这些动画应当仅在元素实际变得可见时被播放。附加地以及让这些动画在被显示或隐藏时自动地播放，需要存在显式地启动它们的方式。主要地，这将围绕关于旨在作为来自DOM的已知[remove(移除)|insert(***)|append(附加)]Child(子)函数的简易替换的函数。函数和对应说明的完整集合在以下显示在表6中。
表6
图17中的HTML片段1705中显示了动画处理的说明性示例。在这个示例中，存在两个HTML元素上的两个显示动画。当这些元素变得可见，它们将调用被应用到其中属性被设置的元素的动画，从而允许开发者避免必须自己管理动画播放。附加地，使用这个动画功能，存在对于可见性的程序性控制。具体地，存在“visibility(可见性)”布尔属性，其将为被显示/隐藏(作为属性)播放适当的动画，这允许到控件可见性的容易的数据绑定。
图18是可用来实现本UI控件框架的诸如PC或web服务器或其它服务器之类的说明性计算***1800的简化框图。计算机***1800包括处理器1805、***存储器1811以及将包括***存储器1811在内的各种***组件耦合至处理器1805的***总线1814。***总线1814可以是若干类型的总线结构中的任一种，包括使用各种总线体系结构中的任一种的存储器总线或存储器控制器、***总线、或局部总线。
***存储器1811包括只读存储器(“ROM”)1817和随机存取存储器(“RAM”)1821。基本输入/输出***(“BIOS”)1825被存储在ROM 1817中，该基本输入/输出***1825包含了诸如在启动期间帮助在计算机***1800内的元件之间传输信息的基本例程。计算机***1800还可包括对内置硬盘(未示出)读写的硬盘驱动器1828、对可移动磁盘1833(例如，软盘)读写的磁盘驱动器1830、以及对诸如CD(压缩盘)、DVD(数字多功能盘)或其它光学介质等可移动光盘1843读写的光盘驱动器1838。硬盘驱动器1828、磁盘驱动器1830，以及光盘驱动器1838分别通过硬盘驱动器接口1846、磁盘驱动器接口1849，以及光盘驱动器接口1852连接到***总线1814。
驱动器及其相关联的计算机可读存储介质为计算机***1800提供了对计算机可读指令、数据结构、程序模块，及其他数据的非易失性存储。虽然这个说明性的示例显示硬盘、可移动磁盘1833以及可移动光盘1843，但是其它类型的可存储可被诸如磁带盒、闪存卡、数字视频卡、数据磁带、RAM、ROM等访问的数据的计算机可读存储介质也可在本UI控件框架的一些应用中使用。此外，如在此使用的，术语计算机可读介质包括媒体类型的一个或多个实例(例如，一个或多个磁盘、一个或多个CD等)。
可以有若干个程序模块存储在硬盘、磁盘1833、光盘1843、ROM 1817，和/或RAM 1821上，包括操作***1855、一个或多个应用程序1857、其他程序模块1860、以及程序数据1863。用户可通过输入设备(诸如键盘1866)和定点设备1868(诸如鼠标)或使用自然用户接口(“NUI”)(在图18中未显示)通过语音将命令和信息输入到计算机***1800中。
其它输入设备(未示出)可以包括话筒、操纵杆、游戏键盘、圆盘式卫星天线、扫描仪等。这些及其他输入设备常常通过耦合到***总线1814的串行端口接口1871连接到处理器1805，但是，但也可以通过其他接口，如并行端口、游戏端口或通用串行总线(“USB”)端口、来进行连接。监视器1873或其他类型的显示设备也可以通过诸如视频适配器1875之类的接口来连接到***总线1814。
除监视器1873以外，个人计算机通常包括如扬声器和打印机等其它***输出设备(未示出)。图18中显示的说明性示例还包括主机适配器1878、小型计算机***接口(“SCSI”)总线1883以及连接到SCSI总线1883的外置存储设备1876。
计算机***1800可使用到诸如远程计算机1888等一个或多个远程计算机的逻辑连接在联网环境中操作。远程计算机1888可以被选为另一台个人计算机、服务器、路由器、网络PC、对等设备或其它公共网络节点，并通常包括以上对计算机***1800描述的许多或所有元件，虽然在图18中只示出单个代表性远程存储器/存储设备1890。
图18中所描绘的逻辑连接包括局域网(“LAN”)1893和广域网(“WAN”)1895。此类联网环境通常被部署在例如办公室、企业范围的计算机网络、内联网和因特网中。
当在LAN联网环境中使用时，计算机***1800通过网络接口或适配器1896连接到局域网1893。当在WAN联网环境中使用时，计算机***1800通常包括宽带调制解调器1898、网络网关或用于通过诸如因特网等广域网1895建立通信的其它装置。或为内置或为外置的宽带调制解调器1898经由串行端口接口1871连接到***总线1814。
在联网环境中，与计算机***1800有关的程序模块或其部分可被储存在远程存储器存储设备1890中。注意，图18中显示的网络连接是说明性的，并且取决于特定应用的具体要求，用于建立计算机之间的通信链路的其它手段可被使用。
尽管用结构特征和/或方法动作专用的语言描述了本主题，但可以理解，所附权利要求书中定义的主题不必限于上述特定特征或动作。相反，上述具体特征和动作是作为实现权利要求的示例形式公开的。

Claims (10)

1.一种用于实现用户界面(“UI”)控件框架的方法，所述方法包括以下步骤：
生成包括层叠样式表(“CSS”)和超文本标记语言(“HTML”)代码的标记文档，所述文档i)包括至少一个UI控件及其布局的内联声明性定义以及ii)作为单个实例化的模板来使用；
使用所述模板来标记出多个UI控件实例；
按照一对一的基础为每个UI控件实例生成支持控件；以及
使用与所述模板中的HTML元素相关联的expando属性，所述属性将命名属性放置在控件实例上，使得所述支持控件可直接访问所述布局中的任一子UI控件。
2.如权利要求1所述的方法，其特征在于，所述HTML是HTML修订版5(“HTML5”)并且CSS是CSS等级3(“CSS3”)。
3.如权利要求1所述的方法，其特征在于，所述HTML元素表示UI控件。
4.如权利要求1所述的方法，其特征在于，使用JavaScript来实现所述支持控件。
5.如权利要求1所述的方法，其特征在于，所述属性使得定位点能被定义在所述标记文档中。
6.如权利要求5所述的方法，其特征在于，布局被修订，同时在整个所述修订中维持所述定位点的名称。
7.如权利要求1所述的方法，其特征在于，支持控件按照一对一的基础被映射到被标记出的布局。
8.如权利要求1所述的方法，其特征在于，所述布局被松散地耦合到在实现所述UI控件的应用的底层的业务逻辑。
9.如权利要求1所述的方法，其特征在于，支持控件提供数据以供绑定到UI控件或子控件，所述支持控件抽象地提供所述数据，而不需要对所述子控件的直接知晓。
10.如权利要求1所述的方法，其特征在于，所述HTML代码包括使用所述expando属性指定的定位点。
CN201380043303.5A 2012-08-14 2013-08-14 使用声明性模板来标记出控件的用户界面控件框架 Pending CN104798036A (zh)

Applications Claiming Priority (3)

Application Number Priority Date Filing Date Title
US13/584,936 US20140053063A1 (en) 2012-08-14 2012-08-14 User interface control framework for stamping out controls using a declarative template
US13/584,936 2012-08-14
PCT/US2013/055001 WO2014028655A1 (en) 2012-08-14 2013-08-14 User interface control framework for stamping out controls using a declarative template

Publications (1)

Publication Number Publication Date
CN104798036A true CN104798036A (zh) 2015-07-22

Family

ID=49083761

Family Applications (1)

Application Number Title Priority Date Filing Date
CN201380043303.5A Pending CN104798036A (zh) 2012-08-14 2013-08-14 使用声明性模板来标记出控件的用户界面控件框架

Country Status (6)

Country Link
US (1) US20140053063A1 (zh)
EP (1) EP2885700A1 (zh)
JP (1) JP2015534145A (zh)
KR (1) KR20150043333A (zh)
CN (1) CN104798036A (zh)
WO (1) WO2014028655A1 (zh)

Cited By (6)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN105468377A (zh) * 2015-12-10 2016-04-06 北京中科汇联科技股份有限公司 一种移动端页面生成方法及***
WO2017050164A1 (zh) * 2015-09-23 2017-03-30 阿里巴巴集团控股有限公司 一种对象呈现方法与设备
CN106936871A (zh) * 2015-12-30 2017-07-07 阿里巴巴集团控股有限公司 界面展示数据的方法及装置
CN109739648A (zh) * 2018-12-28 2019-05-10 北京金山安全软件有限公司 动画播放控制方法、装置、设备及存储介质
CN111443909A (zh) * 2020-03-23 2020-07-24 北京百度网讯科技有限公司 用于生成页面的方法及装置
CN113918154A (zh) * 2021-10-22 2022-01-11 海隆软件(昆山)有限公司 一种生命周期、功能可控的前端框架***和方法

Families Citing this family (18)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
US9898445B2 (en) 2012-08-16 2018-02-20 Qualcomm Incorporated Resource prefetching via sandboxed execution
US20140053064A1 (en) * 2012-08-16 2014-02-20 Qualcomm Incorporated Predicting the usage of document resources
US9348669B2 (en) * 2013-12-09 2016-05-24 Google Inc. User interface framework
CN103823682B (zh) * 2014-02-26 2017-08-08 广州视源电子科技股份有限公司 一种动态ui控件生成方法以及装置
EP3184399A1 (en) * 2015-12-22 2017-06-28 Televic Rail NV Display system and method for displaying messages in a passenger compartment of a vehicle
CN105740145B (zh) * 2016-01-27 2018-09-18 广州酷狗计算机科技有限公司 定位控件中的元素的方法及装置
US10528647B2 (en) * 2016-06-10 2020-01-07 Ebay Inc. Optimization for browser rendering during navigation
US10521502B2 (en) * 2016-08-10 2019-12-31 International Business Machines Corporation Generating a user interface template by combining relevant components of the different user interface templates based on the action request by the user and the user context
CN107436927B (zh) * 2017-07-10 2019-12-17 长城计算机软件与***有限公司 一种ui组件的应用方法和***
CN108647076B (zh) * 2018-05-14 2020-07-24 阿里巴巴集团控股有限公司 一种页面处理方法、装置及设备
CN110389810B (zh) * 2019-07-31 2023-03-31 创新先进技术有限公司 一种在虚拟画布上快速摆放ui控件的方法、装置及设备
CN110554896B (zh) * 2019-08-02 2022-09-13 中电科思仪科技(安徽)有限公司 一种基于预置图片像素锚点信息处理的界面设计方法
US11151770B2 (en) * 2019-09-23 2021-10-19 Facebook Technologies, Llc Rendering images using declarative graphics server
CN110995793B (zh) * 2019-11-19 2022-07-05 北京奇艺世纪科技有限公司 一种信息流控件更新***、方法和装置
CN112099792B (zh) * 2020-09-18 2024-02-02 上海逸动医学科技有限公司 一种可视化ui样式设计方法及***
CN117389675A (zh) * 2021-01-04 2024-01-12 山西统信软件技术有限公司 一种布局控件的方法，计算设备及存储介质
CN113126992A (zh) * 2021-05-11 2021-07-16 南京炫佳网络科技有限公司 一种控件元素的控制方法、装置、设备及存储介质
US11687708B2 (en) * 2021-09-27 2023-06-27 Microsoft Technology Licensing, Llc Generator for synthesizing templates

Citations (2)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
US20060015841A1 (en) * 2004-06-30 2006-01-19 International Business Machines Corporation Control on demand data center service configurations
CN101587437A (zh) * 2008-05-20 2009-11-25 鸿富锦精密工业（深圳）有限公司 树型控件设计及生成***及方法

Family Cites Families (6)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
US20040125130A1 (en) * 2001-02-26 2004-07-01 Andrea Flamini Techniques for embedding custom user interface controls inside internet content
US7594181B2 (en) * 2002-06-27 2009-09-22 Siebel Systems, Inc. Prototyping graphical user interfaces
US7500223B2 (en) * 2004-01-02 2009-03-03 International Business Machines Corporation Automatically creating JavaScript objects to invoke methods on server-side Java beans
JP2006163855A (ja) * 2004-12-08 2006-06-22 Hitachi Software Eng Co Ltd Ｗｅｂアプリケーション開発支援装置及び開発支援方法
US8464318B1 (en) * 2008-11-24 2013-06-11 Renen Hallak System and method for protecting web clients and web-based applications
US20120102414A1 (en) * 2010-10-21 2012-04-26 Hilmar Demant Distributed controller of a user interface framework for web applications

Patent Citations (2)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
US20060015841A1 (en) * 2004-06-30 2006-01-19 International Business Machines Corporation Control on demand data center service configurations
CN101587437A (zh) * 2008-05-20 2009-11-25 鸿富锦精密工业（深圳）有限公司 树型控件设计及生成***及方法

Non-Patent Citations (1)

* Cited by examiner, † Cited by third party
Title
ADAM FREEMAN: "《Metro Revealed Building Windows 8 Apps with HTML5 and JavaScript》", 30 June 2012 *

Cited By (11)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
WO2017050164A1 (zh) * 2015-09-23 2017-03-30 阿里巴巴集团控股有限公司 一种对象呈现方法与设备
CN105468377A (zh) * 2015-12-10 2016-04-06 北京中科汇联科技股份有限公司 一种移动端页面生成方法及***
CN106936871A (zh) * 2015-12-30 2017-07-07 阿里巴巴集团控股有限公司 界面展示数据的方法及装置
CN106936871B (zh) * 2015-12-30 2020-05-29 阿里巴巴集团控股有限公司 界面展示数据的方法及装置
US11216610B2 (en) 2015-12-30 2022-01-04 Advanced New Technologies Co., Ltd. Generating a graphical user interface based on formatted structure data
CN109739648A (zh) * 2018-12-28 2019-05-10 北京金山安全软件有限公司 动画播放控制方法、装置、设备及存储介质
CN109739648B (zh) * 2018-12-28 2021-08-03 超级魔方(北京)科技有限公司 动画播放控制方法、装置、设备及存储介质
CN111443909A (zh) * 2020-03-23 2020-07-24 北京百度网讯科技有限公司 用于生成页面的方法及装置
CN111443909B (zh) * 2020-03-23 2023-09-29 北京百度网讯科技有限公司 用于生成页面的方法及装置
CN113918154A (zh) * 2021-10-22 2022-01-11 海隆软件(昆山)有限公司 一种生命周期、功能可控的前端框架***和方法
CN113918154B (zh) * 2021-10-22 2024-06-25 海隆软件(昆山)有限公司 一种生命周期、功能可控的前端框架***和方法

Also Published As

Publication number Publication date
KR20150043333A (ko) 2015-04-22
EP2885700A1 (en) 2015-06-24
US20140053063A1 (en) 2014-02-20
JP2015534145A (ja) 2015-11-26
WO2014028655A1 (en) 2014-02-20

Similar Documents

Publication Publication Date Title
CN104798036A (zh) 使用声明性模板来标记出控件的用户界面控件框架
Steele et al. The Android developer's cookbook: building applications with the Android SDK
Jackson et al. Android apps for absolute beginners
Lutz Programming python
CN1704900B (zh) 基于具有完全灵活性的自动化生成用户界面的方法和装置
CN102971688B (zh) 跨平台应用程序框架
Schwarz et al. The Android developer's cookbook: building applications with the Android SDK
Brossier Developing Android Applications with Adobe AIR
Overson et al. Developing Web Components: UI from jQuery to Polymer
Gassner Flash Builder 4 and Flex 4 Bible
Shackles Mobile Development with C
Fujima Building a meme media platform with a JavaScript MVC framework and HTML5
Ruiz Mastering Android Application Development
JP2008287365A (ja) プログラム生成装置およびプログラム生成方法およびプログラムおよび記録媒体
Magno Mobile-first Bootstrap
Wildermuth Essential Windows Phone 7.5: Application Development with Silverlight
Harwani Android Programming Unleashed
Williams Xamarin Blueprints
Bodmer Instant Ember. js Application Development How-to
Millas Microsoft. Net Framework 4. 5 Quickstart Cookbook
Gharat et al. AngularJS UI Development
Lecrenski et al. Professional Windows 8 programming: application development with C# and XAML
Modrzyk Reactive with ClojureScript Recipes
Lim et al. Vue on Rails: End-to-End Guide to Building Web Apps Using Vue. js and Rails
Echamea Mastering Backbone. js

Legal Events

Date Code Title Description
C06 Publication
PB01 Publication
EXSB Decision made by sipo to initiate substantive examination
SE01 Entry into force of request for substantive examination
WD01 Invention patent application deemed withdrawn after publication
WD01 Invention patent application deemed withdrawn after publication

Application publication date: 20150722