复杂用户界面状态变更的声明性定义
阅读：363发布：2020-05-13
专利汇可以提供复杂用户界面状态变更的声明性定义专利检索，专利查询，专利分析的服务。并且本 发明 描述了复杂 用户界面 状态变更的 声明 性定义。此处描述了支持在声明性定义的界面模板和状态之间的复杂界面转变的视觉布局系统。该系统构建旧模板和新模板之间的对应关系，保留两个模板中都存在的视觉元件，并按需改变视觉元件的属性和在 渲染 树中的 位置 。该系统按需创建或销毁只出现在一个模板中的视觉元件。通过使用该视觉布局系统，设计者可以在模板的声明性表示中 指定 用户界面的状态，该模板将产生所指定的显示。该系统允许为设计者扫描要被指定为模板的状态变更。因此，该视觉布局系统向设计者提供了用于指定复杂的用户界面转变的便利设施并在运行时以可接受的性能管理转变。，下面是复杂用户界面状态变更的声明性定义专利的具体信息内容。
1.一种用于确定两个用户界面模板之间的增量的计算机实现的方法，所述方法包括：
接收(210)第一声明性模板定义，所述第一声明性模板定义定义了与被显示的用户界面的一个或多个第一状态相关联的一个或多个控件的用户界面布局；
接收(220)第二声明性模板定义，所述第二声明性模板定义定义了与一个或多个第二状态相关联的一个或多个控件的用户界面布局，其中所述用户界面基于在所述用户界面内的指定用户动作而转变到所述一个或多个第二状态；
将所述第一声明性模板定义中的一个或多个控件中的至少一个与所述第二声明性模板定义中的一个或多个控件中的至少一个进行相关(230)；
标识(240)所述第一声明性模板定义和第二声明性模板定义之间的一个或多个差别；
以及
基于所标识的差别来创建(250)编辑操作，所述编辑操作包括用于从由所述第一声明性模板定义所定义的用户界面布局转变到由所述第二声明性模板定义所定义的用户界面布局的过程指令，
其中先前的步骤由至少一个处理器来执行。
2.如权利要求1所述的方法，其特征在于，接收所述第一声明性模板定义包括接收可扩展标记语言(XML)文件，所述可扩展标记语言文件包括指定与所述第一声明性模板定义相关联的控件的分层元件。
3.如权利要求1所述的方法，其特征在于，接收所述第一声明性模板定义包括接收模板设计者创建的一个或多个状态，所述一个或多个状态表示用户界面模板的行为，还表示用户动作或其它事件可以修改用户界面模板的布局或属性的方式。
4.如权利要求1所述的方法，其特征在于，其中所述第二声明性模板定义添加所述第一声明性模板定义中未出现的至少一个用户界面元件。
5.如权利要求1所述的方法，其特征在于，将控件进行相关包括按标识符标识控件并且如果控件在所述第一和第二声明性模板定义中具有相同的标识符则确定它们是相关的。
6.如权利要求1所述的方法，其特征在于，将控件进行相关包括标识可在转变到所述第二声明性模板定义后、通过重新使用现有控件而无需实例化新控件来显示的项。
7.如权利要求1所述的方法，其特征在于，标识差别包括为在所述第一和第二声明性模板定义中相关的控件标识属性值差别。
8.如权利要求1所述的方法，其特征在于，标识差别包括标识出现在所述第二声明性模板定义中但未出现在所述第一声明性模板定义中的控件。
9.如权利要求1所述的方法，其特征在于，标识差别包括标识出现在所述第一声明性模板定义中的控件的结构变更。
10.如权利要求1所述的方法，其特征在于，创建编辑操作包括创建基于所述第一和第二声明性模板定义中指定的属性差别来修改所述第一和第二声明性模板定义中定义的控件属性的编辑操作。
11.如权利要求1所述的方法，其特征在于，创建编辑操作包括创建为所述第二声明性模板定义所添加的控件实例化控件的编辑操作。
12.如权利要求1所述的方法，其特征在于，还包括将所创建的编辑操作与所述第一声明性模板定义相关联地存储，从而使得来自所述第一声明性模板定义的请求可以调用所述编辑操作来转变到所述第二声明性模板定义所指定的用户界面布局。
13.一种用于允许用户界面设计者定义复杂的用户界面状态变更的计算机系统，所述系统包括：
被配置成从所述用户界面设计者接收一个或多个模板的声明性定义和用户界面的状态的模板定义组件(110)；
被配置成存储其中可以存在所述用户界面并接收从一个状态转变为另一状态的指示的多个状态的状态管理组件(120)；
被配置成比较一个或多个传入和传出状态的模板来确定元件布局和在所述状态之间改变的属性的模板增量组件(130)；
被配置成基于模板的比较来生成一个或多个编辑操作来从所述传入状态转变到所述传出状态的状态转变组件(140)；
被配置成在状态转变之前拍摄包括每一用户界面元件的位置的快照的快照组件(150)；
被配置成使元件在所述传出状态和所述传入状态之间平滑地转变的元件转变组件(160)。
14.如权利要求13所述的系统，其特征在于，所述模板定义组件还被配置成从允许用户界面设计者在视觉上创建界面定义的视觉编辑工具接收用户界面定义信息，所述视觉编辑工具将所述界面定义导出成声明性格式。
15.如权利要求13所述的系统，其特征在于，所述模板定义组件还被配置成接收声明性定义，所述声明性定义包括带有对于所有状态共同的控件的基模板信息，以及包括被添加到对于那些状态共同的控件的附加控件的附加状态。
复杂用户界面状态变更的声明性定义
技术领域
[0001] 本发明涉及呈现技术，尤其涉及界面的布局管理技术。
背景技术
[0002] 现代用户界面工具包使用布局管理器来创建可动态地调整大小的用户界面。布局管理器是具有在不使用距离单位的情况下按组件(有时称为窗口小部件)的相对位置对其布局的能力的软件组件。以此方式来定义组件布局而非用像素或常用距离单位来定义组件位置常常是更普遍的，所以许多流行的窗口小部件工具包默认地包括这种能力。窗口小部件工具包常常允许设计者将窗口小部件放置在布局容器内，在该容器被呈现时其具有特定布局特征。Windows演示基础(WPF)和微软Silverlight是提供布局管理器的工具包的两个示例。设计者用可扩展应用程序标记语言(XAML)来描述用户界面组件，并且可以使用诸如微软Visual State Manager之类的应用程序编程接口(API)来定义用户界面状态和转变。
[0003] 使用布局管理器的一个原因是实现应用程序的自动调整大小，从而使得用户界面可以在具有不同显示分辨率和可调节大小且可配置的窗口的设备上正确地工作。使用布局管理器来自动地确定屏幕上图形元件和控件的布局。布局管理器通常通过迫使它们的子件(图形元件、用户界面元件)与某种布局规则相符合来操作。例如，栈面板可以迫使其子件进入水平或垂直栈，只控制对象相对于彼此的相对位置。作为另一示例，统一栅格可迫使对象被安排在栅格中，每一子件具有固定大小。表样式布局可迫使子件符合行和列定义，并定义位置边界来控制定位和大小。
[0004] 对于动态的用户界面，在用户界面组件的不同布局之间转变常常是有用的。例如，当用户在“更多”按钮上点击时，设计者可能想要使一个组件的区域扩展并显示更多的用户界面控件。出于可用性原因，设计者希望转变是平滑的并且允许详细的控制。在某些场景中，仅仅在两个完全不同的用户界面屏幕之间淡去是足够的，但当图形元件或用户界面控件的布局被设计成从一个布局到另一布局平滑地变形时，这种技术不起作用。例如，设计者可能想要用户登录到应用程序之后面板看上去从左侧飞出。诸如微软Visual State Manager之类的当前动画系统自动地对从一个状态到另一状态的转变动画化。在先前的示例中，动画系统使得面板动画化为在到达最终完整显示的位置之前从显示屏幕的左侧通过若干中间位置。
[0005] 设计者常常想要界面在特定用户动作或添加或移除不同场景的特定控件之后实质改变。例如，设计者可能想要基于查看界面的客户机的屏幕/窗口大小来提供不同细节水平的界面。在MICROSOFT TM SILVERLIGHT TM和MICROSOFT TM WINDOWS TM演示框架(WPF)所使用的术语中，模板包括控件组并且可以具有一个或多个定义的状态(例如，正常状态和鼠标悬停状态)。不幸的是，用户常常想要执行等价于完全改变模板的动作，但又希望布局系统足够智能来识别模板之间的相似性以动画化两个模板外表之间的界面。例如，如果第一界面具有一组五个控件而第二界面具有相同的五个控件再加上两个，则期望使这两个额外的控件动画化地进入位置而不影响现有的五个控件。如今，这通常通过切换两个额外控件的可见性来执行。
[0006] 这种方法导致了三个问题。第一，被隐藏的额外控件可能太过昂贵以致甚至无法在不可见的状态下维护。出于性能原因，避免创建不被使用的元件是有帮助的。第二，使一个布局管理器满足多个布局的需要可能是难以操作的；有时候，通过将特定元件移动到不同的布局容器等来改变元件分层的结构来得更为简单。这比由现有的基于状态的机制所支持的简单属性变更涉及更多方面。第三，设计者可能已经创建了应用程序或控件的单独的设计，并且可能对优化设计以共享共同的结构没有兴趣，即使这种优化是可能的，也仅仅是因为它是一种‘工作’而这么做。设计者通常是那些聚焦于界面视觉层的人，与聚焦于界面行为层的程序员不同。将更多的能力放在设计者的手中并且不涉及过多的自定义软件编码或布局定制的视觉层系统满足了更广泛的用户。
发明内容
[0007] 此处描述了支持在声明性定义的界面模板和状态之间的复杂界面转变的视觉布局系统。该系统构建旧模板和新模板之间的对应关系，保留两个模板中都存在的视觉元件，并按需改变视觉元件的属性和在渲染树中的位置。该系统按需创建或销毁只出现在一个模板中的视觉元件。通过使用该视觉布局系统，设计者可以在模板的声明性表示中指定用户界面的状态，该模板将产生所指定的显示。该系统允许为设计者扫描要被指定为模板的状态变更。因此，该视觉布局系统向设计者提供了用于指定复杂的用户界面转变的便利设施并在运行时以可接受的性能管理转变。
[0008] 提供本发明内容以便以简化形式介绍将在以下的具体实施方式中进一步描述的一些概念。本发明内容并不旨在标识出所要求保护的主题的关键特征或必要特征，也不旨在用于限定所要求保护的主题的范围。附图说明
[0010] 图2是示出一个实施例中的确定两个模板之间的增量的视觉布局系统的处理的流程图。
[0011] 图3是示出一个实施例中的动画化用户界面状态之间的转变的视觉布局系统的处理的流程图。
具体实施方式
[0012] 此处描述了支持在声明性定义的界面模板和状态之间的复杂界面转变的视觉布局系统。在某些实施例中，该系统扩展状态的定义从而使得控制状态可以是对现有模板或完全新的模板中的任一个的一组属性变更。在新模板的情况下，该系统构建旧模板和新模板之间的对应关系。该系统保留出现在两个模板中的视觉元件，并按需改变视觉元件的属性和在渲染树中的位置。该系统按需创建或销毁只出现在一个模板中的视觉元件。例如，第一状态可包括包括用于查看新闻文章的五个控件的公共的控件模板。用于编辑文章的第二状态包括接收编辑者可执行的其他动作的附加控件。通过使用视觉布局系统，设计者可以在模板的声明性表示(例如，可扩展标记语言(XML)文件)中指定状态，这将产生所指定的显示。该系统允许为设计者扫描要被指定为模板的状态变更(因为模板易于理解)。因为创建和卸载整个模板和控件组可能具有负面性能影响，所以在某些实施例中，该系统内部地将声明性规范以及状态和模板之间的差别转换成树增量，该系统可以在运行时以可接受的性能水平来呈现该树增量(因为树变更是高效的)而不会导致从头实例化新模板的成本。因此，该视觉布局系统向设计者提供了用于指定复杂的用户界面转变的便利设施并在运行时以可接受的性能管理转变。
[0013] 视觉布局系统可以在各种现代界面工具包和布局管理器中实现。一个示例是MICROSOFT TM SILVERLIGHT TM和MICROSOFT TM WPF。MICROSOFT TM Visual State Manager的现有版本以与下面方式相类似地获取XML状态描述(注意，这不是实际句法但在功能上是等价的，并为了更紧凑的演示而被简化)。
[0014]
[0015] 在该示例中，模板“ControlTemplate(控制模板)”用带有三个对象的树来定义。在名为“HoverState(悬停状态)”的状态中，名为“Container(容器)”的对象的Background(背景)属性将是灰色的。开发者可以用诸如“VisualStateManager.GoToState(this，“HoverState”，true)”之类的软件调用来变更状态，其中最后的布尔属性指示是否要动画化该转变。如果要动画化该转变，则需要有此处未涵盖的用来定义动画化的本质和持续时间的其他结构。
[0016] 这是极其有用的，但不能应付设计者想要控制的所有情况。有时候，设计者想要改变若干完全不同的模板之间的视觉元件。例如，这可能因为以下情况而发生：设计者个别地从另一设计工具中导出每一模板，或者不同的模板使用本质上差距很大的对象从而使得只在当前显示的特定模板中创建对象是高效的。
[0017] 此处描述的视觉布局系统允许设计者如下声明性地定义多个模板：
[0018]
[0019]
[0020] 在该示例中，向先前示例添加了两个新的状态(LowDetail(低细节)和HighDetail(高细节))，并且它们其中的一个具有完全不同的模板。例如，“HighDetail”状态包括含有多个子控件的附加StackPanel(栈面板)控件。在将该模板的实例状态变更为“HighDetail”状态时，将改变视觉元件来匹配新的模板。该模板与原始模板相比具有许多变更：添加了两个新的元件(Border(边界)和ReallyExpensiveVisualizationControl(非常昂贵可视化控件))，名为“Container”的元件改变了类型(之前是Grid(栅格)，现在是StackPanel)，名为“Label(标记)”的元件改变了其在树中的次序(之前是在集合尾部，现在是在开头)，名为“Label”的元件改变了其属性中的一个(现在是Bold(加粗))，以及名为“EditableMessage(可编辑消息)”的元件改变了其在树中的层(之前是Container的直接子件，现在在其与Container之间存在Border元件)。该视觉布局系统的一个工作是将内容移动到新的模板而只影响作者期望的部分。作者一般期望在两个模板中未变更的元件保持不变(例如，用户键入到“EditableMessage”控件中的文本将保持不变)，而在模板之间变更的元件能平滑地动画化到其位置。
[0021] 对于这一问题至少存在视觉布局系统可用的两个方法。第一个方法在运行时使用模板。在从新的模板中构建新的元件树时，该系统首先寻找旧模板和新模板之间的对应关系。在以上示例中，对应关系是基于名称的，或名称加类型，但其他变形也是可能的。当新模板指定创建的项与旧模板中的元件匹配，则该系统改为使用已经实例化的旧项并修改在旧模板和新模板中被显式地不同地设置的任何属性。在创建新项时，该系统检查来自正交状态组的活动状态集(例如，该示例中的HoverState，如果它是该组的活动状态的话)并应用推想有效的任何属性增量。以此方式，该系统将所显示的界面从第一模板平滑地转换成了第二模板，而不影响两个模板中的元件。另外，该系统通过允许对设计者在状态变更期间想要发生的内容的紧凑的声明性表示来简化设计者的任务。
[0022] 第二个方法在设计时使用模板，在运行时使用增量。换言之，虽然将系统作为一组多个模板来呈现给设计者，但在内部该系统将设置作为带有一组增量的单个模板来对待以转变状态。在某些实施例中，该系统用产生界面的运行时版本的编译器对设计时表示进行编译。编译器负责确定模板对应关系并将每一状态重新写入一组编辑操作。先前示例的编辑操作将与以下类似：1)将“Container”变为StackPanel，2)将“Label”的FontWeight(字体权重)改为Bold，将Border添加为“Container”的第三个子件，将“EditableMessage”移动到作为“Container”的第三个子件的Border的内部(注意，就所有的后续指令而言，Border现在是第二个子件)，并将ReallyExpensiveVisualizationControl添加为“Container”的第三个子件。第二个方法一般执行得更快，因为系统不必在运行时分析模板。此外，该系统可以应付多个正交的基于模板的状态，虽然一次允许多个增量集将引入执行包括基于索引的添加/移除的冲突解决的能力。在本领域中存在该系统可应用来处理冲突解决的沿用已久的技术。
[0023] 对于任一种方法，在模板转变之后，现有的视觉元件常常改变位置，并且如果元件的容器改变，则整个定位模型可能改变。在某些实施例中，视觉布局系统动画化元件的位置改变从而使得元件从一个位置平滑地移动到另一位置。这可以通过以下动作来完成，例如，在状态改变之前拍摄每一元件的位置的快照，在状态改变之后(并且在显示最终状态之前)观察每一元件位置，并且在显示最后最终状态之前将每一元件从起始位置动画化到结束位置。
[0024] 图1是示出一个实施例中的视觉布局系统的各组件的框图。系统100包括模板定义组件110、状态管理组件120、模板增量组件130、状态转变组件140、快照组件150、元件转变组件160和元件隔离组件170。这些组件中的每一个都在此处进一步详细讨论。
[0025] 模板定义组件110接收模板的声明性定义并向来自设计者的用户界面陈述。例如，设计者可以使用允许设计者在视觉上创建界面定义的视觉编辑工具，诸如MICROSOFT TM Blend，该视觉工具将界面定义导出为声明性格式(例如，XML文件或其他持久表示)。声明性定义可以包括基模板信息，诸如所有状态共同的控件或使用模板的共同控件的状态，以及包括被添加到共同控件的附加控件的状态。例如，用于编辑项的状态可以包括未在用于查看项的状态中出现的附加文本框。模板定义组件110允许设计者在将控件放置在设计表面上的熟悉的模型中工作而无需担心用来将界面从一个状态转移到另一状态的行为逻辑。系统100使用设计者的定义来在运行时产生合适的状态转变。
[0026] 状态管理组件120存储多个状态，其中用户界面可以存在并接收从一个状态转变为另一状态的指示。状态可以用诸如XAML文件之类的声明性格式来存储。设计者可以通过在视觉上在设计者工具中将控件布局在画布上，或者可以手动地将控件定义添加到声明性格式文件来创建状态。声明性格式还可以包含转变信息，诸如引起转变的条件(例如，鼠标悬停、按钮点击等等)以及转变的属性(例如，持续时间)。例如，可以使用Visual State Manager来将这些存储为XAML文件中的Triggers(触发)和/或VisualStates(视觉状态)。转变可以基于不同应用程序的各种目的由应用程序逻辑引起。
[0027] 模板增量组件130比较传入和传出状态的模板来确定元件布局和在状态之间改变的属性。布局属性可以包括许多不同的属性类型，诸如栅格布局的列和行(以及列扩展和行扩展)、画布的左上属性、可见性属性、栈定向、对接器布局中的对接方向、扩展器布局的扩展属性、包装面板布局的定向和项宽度/高度，以及各个元件位置属性(例如，宽度、高度、最小宽度、最小高度、最大宽度、最大高度、边界、填充、水平对齐和垂直对齐)。另外，组件130可以在计算增量时监视其他非布局属性，因为这些属性也会在模板之间改变。布局还可以包含被添加到显示屏幕和/或被状态变更带走的控件或元件。该系统可以基于两个模板中的元件相同的名称或其他标识符来标识模板之间相对应的属性。系统100可以在设计时、编译时或运行时比较模板。在设计时，系统可以将多个模板编译成基模板或模板的表示以及将基模板转换成每一状态的表示的一个或多个编辑操作。在运行时，系统调用一组合适的编辑操作来执行状态转变。或者，系统可以在运行时比较模板并执行应用修改。
[0028] 状态转变组件140基于模板的比较来生成一个或多个编辑操作来从传入状态转换成传出状态。状态转变组件140可以包括在设计时处理所接收的声明性定义的编译器或在运行时动态地标识在模板之间转变的编辑操作的运行时组件。状态转变组件140执行步骤来将所显示的界面从其传出状态中的初始视图变成传入状态中的新视图。在此期间，状态转变组件可以调用快照组件150和元件转变组件160来产生两个状态模板之间共同的元件的平滑的动画化转变。
[0029] 快照组件150在状态转变之前拍摄包括每一用户界面元件的位置的快照。位置可以包括表示元件维度的用户界面元件的抽象边界的矩形。注意，还使用使用该系统来处理三维动画，所以快照可以包括边界框和/或变形而非矩形。快照组件150可以拍摄两个快照，一个在通知用户界面元件正处在传出状态之后，而另一个在通知用户界面元件正处在传入状态之后。在某些实施例中，视觉布局系统提供用于请求在不实际呈现用户界面元件的情况下用户界面元件改变状态的API。该系统还拍摄快照，执行状态转变(在存储器中但尚未更新显示屏幕)，并查询每一元件来发现其新的位置。该系统随后在允许传入状态变为活动的所显示的状态之前将元件动画化到其新的位置。
[0030] 元件转变组件160使元件在传出状态和传入状态之间平滑地转变。这可以包括动画化视觉布局属性以及改变非布局属性的状态。例如，如果元件在一个位置开始并移向另一位置，则元件转变组件160将该元件从起始位置移动到结束位置，其间通过若干中间位置来向用户提供平滑移动的表象。虽然此处使用矩形和矩形坐标作为示例，但本领域技术人员将明白，该系统可用于各种类型的坐标和转变动作。例如，该系统可以使用其中元件通过旋转角来动画化的极坐标系统。作为另一示例，特定用户界面布局可以定义蜿蜒路径，元件沿着该路径移动来从传出状态变为传入状态。虽然在模板/状态之间改变的一组属性会通知要创建哪些动画，但这些动画的起始值可能是属性的当前值而非所指定的值。这使得用新的转变来中断转变的过程看上去是平滑的。
[0031] 在某些实施例中，视觉布局系统100包括将元件的移动与其他元件隔离的元件隔离组件170。因为布局管理器动态地确定元件布局和位置，所以改变一个元件的大小和位置可能使得其他元件的布局也改变。这在转变动画化的上下文中可能是不合需要的，所以元件隔离组件170可以创建包含元件转变组件160正在动画化的元件的临时容器。元件隔离组件170基于传入状态来设置容器的大小和位置，然后在容器内将元件从其传出状态位置和大小动画化成其传入状态位置和大小。因为容器大小和位置在转变期间不改变，所以其他元件不会受到动画化的影响。当转变完成后，元件隔离组件160从布局中移除该临时容器。另选地或另外地，布局管理器可以提供标志，布局动画化系统设置该标志来通知管理器对元件的一组特定变更未影响其它元件。
[0032] 其上实现视觉布局系统的计算设备可包括中央处理单元、存储器、输入设备(例如，键盘和定点设备)、输出设备(例如，显示设备)和存储设备(例如，盘驱动器或其他非易失性存储介质)。存储器和存储设备是可以用实现或允许该系统的计算机可执行指令(例如，软件)来编码的计算机可读存储介质。此外，数据结构和消息结构可被存储或经由诸如通信链路上的信号等数据传送介质发送。可以使用各种通信链路，诸如因特网、局域网、广域网、点对点拨号连接、蜂窝电话网络等。
[0033] 该系统的实施例可以在各种操作环境中实现，这些操作环境包括个人计算机、服务器计算机、手持式或膝上型设备、多处理器系统、基于微处理器的系统、可编程消费电子产品、数码照相机、网络PC、小型计算机、大型计算机、包括任何上述系统或设备中任一种的分布式计算环境等。计算机系统可以是蜂窝电话、个人数字助理、智能电话、个人计算机、可编程消费电子设备、数码相机等。
[0034] 该系统可以在由一个或多个计算机或其他设备执行的诸如程序模块等计算机可执行指令的通用上下文中描述。一般而言，程序模块包括执行特定任务或实现特定抽象数据类型的例程、程序、对象、组件、数据结构等等。通常，程序模块的功能可以在各个实施例中按需进行组合或分布。
[0035] 图2是示出一个实施例中的确定两个模板之间的增量的视觉布局系统的处理的流程图。以下步骤可以在设计时、编译时或运行时发生，这取决于如何实现系统，如以下进一步描述的。在框210中开始，系统接收第一声明性模板定义，它定义了与一个或多个第一状态相关联的一个或多个控件的用户界面布局。例如，系统可以接收包括指定与第一模板相关联的控件的分层元件的XML或XAML文件。模板包括模板设计者创建来表示模板的行为的状态，以及用户动作或其它事件可以修改模板的布局或属性的方式。
[0036] 在框220中继续，系统接收第二声明性模板定义，它定义了与一个或多个第二状态相关联的一个或多个控件的用户界面布局，其中第二模板包括与第一模板中的控件有关的至少一个控件。例如，系统可以标识第二模板或到第一模板的一组添加或在与第一模板相同的XML或XAML文件中构成第二模板的基模板。虽然两个模板完全不同且不共享任何控件是有效的，但此处不对这种情况进行说明因为这不会导致任何内容的转变。第二模板可以表示用户界面可以基于用户动作而转变到的用户界面状态。例如，用户可以选择电子商务网站上的项并在购买该项之前请求所选项的更多细节。用户界面可以从指定产品列表的第一模板切换到示出关于所选产品的细节的第二模板。
[0037] 在框230中继续，系统将第一模板定义中的一个或多个控件中的至少一个与第二模板定义中的一个或多个控件中的至少一个进行相关。例如，系统可以按名称来标识控件并且如果控件在两个模板中具有相同的名称则确定控件是相关的。另选地或另外地，设计者可以向控件赋予数值或其它标识符，系统可以在模板之间匹配该数值或标识符来确定控件是相关的。对于两个模板之间相关的项，系统在从基于第一模板的用户界面转变到基于第二模板的用户界面时不必实例化新的控件(除非控件类型改变)，从而保留了系统资源并提升了性能。在两个模板中可能是相同的项的示例有设计者希望其在每一页面上看上去都是相同的导航菜单，出现在每一页面上的购物车图标，出现在概述页面和细节页面(其中在概述下添加了进一步的细节)顶部的项概述，等等。可能性仅限于设计者的想象力。
[0038] 在框240中继续，系统标识第一模板定义和第二模板定义之间的一个或多个差别。差别可以包括在两个模板中相关的控件的属性差别(例如，背景色的改变、控件类型的改变，等等)、结构变更或完全的新控件。例如，第二模板可以包括第一模板中未出现的控件或排除第一模板中出现的控件。对于属性变更，系统标识变更的内容。对于控件变更，系统标识要实例化的新的控件以及作为破坏候选的被移除的控件。本领域的普通技术人员将明白，从性能角度来看执行懒惰破坏可能是保守的，因为从第二模板快速的转变回第一模板可能再次使用在第二模板显示期间不需要的控件的先前实例化的版本。
[0039] 在框250中继续，系统基于所标识的差别来创建编辑操作，该操作包括用于从由第一模板定义所定义的用户界面布局转变到由第二模板定义所定义的用户界面布局的过程指令。例如，对于变更的属性，系统基于各个模板中指定的属性差别来创建修改第一和第二模板中定义的控件属性的编辑操作。对于所添加或移除的控件，系统基于传入模板定义来创建实例化或隐藏控件的编辑操作。对于控件的重构，系统产生将控件移动到其新的位置和结构的指令(例如，如果控件具有新的类型或者控件现在是其先前的兄弟控件的子件)。在某些情况下，过程指令可能与过去在设计者完成从布局的角度来定义用户界面状态之后开发者可能添加的指令相似。然而，与过去的系统不同，视觉布局系统自动地产生这些转变指令，避免了开发者的时间成本以及通过手动和容易出错的过程而导致错误的潜在可能。
因此，在非常短的时间跨度内，设计者可以定义用户界面布局和转变，然后查看和测试他的工作，而无需等待任何其他人来添加附加的软件逻辑。
因此，在非常短的时间跨度内，设计者可以定义用户界面布局和转变，然后查看和测试他的工作，而无需等待任何其他人来添加附加的软件逻辑。
[0040] 在框260中继续，系统可任选地将所创建的编辑操作以及与该编辑操作相关的一个或多个状态相关联地存储。例如，如果编辑操作指定了从第一模板定义转变到第二模板定义的步骤，则系统可以将编辑操作与第一模板相关联地存储，从而使得来自第一模板的转变请求可以调用编辑操作来转变到由第二模板所指定的用户界面布局。系统可以将编辑操作存储在经编译的文件表示中(例如，在为易于运行时的执行而在设计时编译模板的情况中)，或者可被高速缓存在存储器中(例如，在运行时分析模板以便即将到来的转变的情况下)。在运行时情况下，系统可以执行指令并不存储它们的情况下丢弃它们。在框260之后，这些步骤结束。
[0041] 图3是示出一个实施例中的动画化用户界面状态之间的转变的视觉布局系统的处理的流程图。在框310中开始，系统接收要从由第一用户界面布局所表征的第一状态转变到由第二用户界面布局所表征的第二状态的请求。例如，在接收到用户在第一用户界面布局中点击按钮或激活链接的指示之后，处理程序可以调用用于转变到第二状态的API。用户界面布局可以表示各种真实世界的桌面应用程序或web应用程序场景，并且状态转变表示用户界面中通常由复杂的定制设计的软件代码执行的变更。然而，使用视觉布局系统，设计者可以使用通过视觉设计工具来创建的声明性表示来定义类似的转变。
[0042] 在框320中继续，系统访问与第一和第二用户界面布局相关联的一个或多个模板来标识与每一布局相关联的状态信息。例如，状态信息可以标识在状态之间改变的控件属性，被添加到每一状态中的显示屏幕的控件，每一状态的经编译的表示，等等。在框330中继续，系统接收自动生成的编辑操作的过程集，该编辑操作标识第一用户界面布局和第二用户界面布局之间的差别。例如，编辑操作可以调用API来设置属性值，实例化要被添加到显示屏幕的控件，隐藏或毁坏要从显示屏幕移除的控件，等等。编辑操作可以通过设计时或运行时编译过程来自动生成，该过程直接地或通过编辑工具将由设计者产生的声明性定义转换成由用户界面运行时平台所理解的经编译的表示。如果在运行时生成，则系统通过适当地编译声明性定义来接收操作。
[0043] 在框340中继续，系统存储第一用户界面布局中的元件的一个或多个起始位置。起始位置可以包括屏幕上或窗口中的位置以及诸如维度、颜色、不透明度等的信息。系统使用该起始位置信息来产生第一用户界面布局和第二用户界面布局之间的平滑动画化。例如，系统可以平滑地从一个位置动画化到另一位置，将尺寸较小的尺寸扩展到较大的尺寸，逐渐地转变不透明度等等来提供平滑的转变。在框350中继续，系统调用所接收的编辑操作来将用户界面从第一状态转变到第二状态。在某些实施例中，转变最初影响用户界面的存储器内表示，该表示对用户是不可见的直到系统平滑地将第一用户界面布局的元件动画化到其在第二用户界面布局中的位置。在动画化完成之后，系统可以显示带有用户看来在两个布局之间有平滑转变的效果的第二用户界面布局。
[0044] 在框360中继续，系统将用户界面从第一用户界面布局中的元件的所存储的起始位置动画化到所调用编辑操作所标识的一个或多个结束位置。例如，系统可以逐渐地将颜色从第一用户界面布局中指定的颜色改变为第二用户界面布局中指定的颜色。在动画化的结尾，第二用户界面布局变为用户界面的活动布局。系统对由用户动作所请求的附加状态转变或者由设计者定义来修改所显示的用户界面的其他事件重复该过程。在框360之后，这些步骤结束。
[0045] 在某些实施例中，视觉布局系统为在传出和传入模板中都出现的控件保存除了其他实例信息之外的控制数据。例如，用户可能已经在文本控件中键入文本，选择了单选控件或组合框中的特定选项等等。系统可以在从一个模板或状态转变到另一模板或状态期间保存这些用户动作以及控件所保存的其他信息。虽然这通常是用户所期待的，但用现有的布局管理器来这么做常常导致编写定制代码来执行这一行为的成本，该定制代码在用户界面随着时间的推移应用程序版本发生改变时可能被或可能无法被正确地更新。使用视觉布局系统，可以自动地处理这种状态保存并且随着用户界面改变保持最新而无需设计者或开发者的显式聚焦，从而使得用户接收更好的用户界面而无需额外的设计者精力。
[0046] 在某些实施例中，视觉布局系统可以为在两个模板之间改变类型的控件产生平滑转变。例如，设计者可能偏好一个用户界面布局中的水平列表和另一用户界面布局中的垂直列表。在进行两个模板之间的转变时，系统可以将第一种类型的控件中的项移动到第二种类型的控件而无需设计者的额外考虑。设计者可以简单地在设计时将两个控件进行相关，诸如通过赋予两个控件相同的名称或其他标识符。
| 标题 | 发布/更新时间 | 阅读量 |
|---|---|---|
| 声明式的MySQL数据库系统高可用方法 | 2020-05-12 | 994 |
| 样式的声明级联重新排序 | 2020-05-12 | 918 |
| 使用声明性变换的数据模式变换 | 2020-05-13 | 510 |
| 电子表单中的声明式尺寸可变列表 | 2020-05-13 | 18 |
| 使用声明来表示安全身份 | 2020-05-14 | 747 |
| 包括可显示的声明的安全性令牌 | 2020-05-14 | 903 |
| 已声明的起源策略 | 2020-05-11 | 840 |
| 用于发布可验证声明的系统和方法 | 2020-05-12 | 165 |
| 绑定单元声明文件 | 2020-05-11 | 1036 |
| 绑定单元声明文件 | 2020-05-11 | 395 |
高效检索全球专利专利汇是专利免费检索,专利查询,专利分析-国家发明专利查询检索分析平台，是提供专利分析，专利查询，专利检索等数据服务功能的知识产权数据服务商。
我们的产品包含105个国家的1.26亿组数据，免费查、免费专利分析。
分析报告
专利汇分析报告产品可以对行业情报数据进行梳理分析，涉及维度包括行业专利基本状况分析、地域分析、技术分析、发明人分析、申请人分析、专利权人分析、失效分析、核心专利分析、法律分析、研发重点分析、企业专利处境分析、技术处境分析、专利寿命分析、企业定位分析、引证分析等超过60个分析角度，系统通过AI智能系统对图表进行解读，只需1分钟，一键生成行业专利分析报告。
QQ群二维码
意见反馈
意见反馈