复杂用户界面状态变更的声明性定义的制作方法

文档序号:6422730阅读:151来源:国知局

专利名称::复杂用户界面状态变更的声明性定义的制作方法
技术领域
:本发明涉及呈现技术,尤其涉及界面的布局管理技术。
背景技术
:现代用户界面工具包使用布局管理器来创建可动态地调整大小的用户界面。布局管理器是具有在不使用距离单位的情况下按组件(有时称为窗口小部件)的相对位置对其布局的能力的软件组件。以此方式来定义组件布局而非用像素或常用距离单位来定义组件位置常常是更普遍的,所以许多流行的窗口小部件工具包默认地包括这种能力。窗口小部件工具包常常允许设计者将窗口小部件放置在布局容器内,在该容器被呈现时其具有特定布局特征。Windows演示基础(WPF)和微软Silverlight是提供布局管理器的工具包的两个示例。设计者用可扩展应用程序标记语言(XAML)来描述用户界面组件,并且可以使用诸如微软VisualStateManager之类的应用程序编程接口(API)来定义用户界面状态和转变。使用布局管理器的一个原因是实现应用程序的自动调整大小,从而使得用户界面可以在具有不同显示分辨率和可调节大小且可配置的窗口的设备上正确地工作。使用布局管理器来自动地确定屏幕上图形元件和控件的布局。布局管理器通常通过迫使它们的子件(图形元件、用户界面元件)与某种布局规则相符合来操作。例如,栈面板可以迫使其子件进入水平或垂直栈,只控制对象相对于彼此的相对位置。作为另一示例,统一栅格可迫使对象被安排在栅格中,每一子件具有固定大小。表样式布局可迫使子件符合行和列定义,并定义位置边界来控制定位和大小。对于动态的用户界面,在用户界面组件的不同布局之间转变常常是有用的。例如,当用户在“更多”按钮上点击时,设计者可能想要使一个组件的区域扩展并显示更多的用户界面控件。出于可用性原因,设计者希望转变是平滑的并且允许详细的控制。在某些场景中,仅仅在两个完全不同的用户界面屏幕之间淡去是足够的,但当图形元件或用户界面控件的布局被设计成从一个布局到另一布局平滑地变形时,这种技术不起作用。例如,设计者可能想要用户登录到应用程序之后面板看上去从左侧飞出。诸如微软VisualStateManager之类的当前动画系统自动地对从一个状态到另一状态的转变动画化。在先前的示例中,动画系统使得面板动画化为在到达最终完整显示的位置之前从显示屏幕的左侧通过若干中间位置。设计者常常想要界面在特定用户动作或添加或移除不同场景的特定控件之后实质改变。例如,设计者可能想要基于查看界面的客户机的屏幕/窗口大小来提供不同细节水平的界面。在MICROSOFTTMSILVERLIGHTTM和MICROSOFTTMWINDOWSTM演示框架(WPF)所使用的术语中,模板包括控件组并且可以具有一个或多个定义的状态(例如,正常状态和鼠标悬停状态)。不幸的是,用户常常想要执行等价于完全改变模板的动作,但又希望布局系统足够智能来识别模板之间的相似性以动画化两个模板外表之间的界面。例如,如果第一界面具有一组五个控件而第二界面具有相同的五个控件再加上两个,则期望使这两个额外的控件动画化地进入位置而不影响现有的五个控件。如今,这通常通过切换两个额外控件的可见性来执行。这种方法导致了三个问题。第一,被隐藏的额外控件可能太过昂贵以致甚至无法在不可见的状态下维护。出于性能原因,避免创建不被使用的元件是有帮助的。第二,使一个布局管理器满足多个布局的需要可能是难以操作的;有时候,通过将特定元件移动到不同的布局容器等来改变元件分层的结构来得更为简单。这比由现有的基于状态的机制所支持的简单属性变更涉及更多方面。第三,设计者可能已经创建了应用程序或控件的单独的设计,并且可能对优化设计以共享共同的结构没有兴趣,即使这种优化是可能的,也仅仅是因为它是一种‘工作’而这么做。设计者通常是那些聚焦于界面视觉层的人,与聚焦于界面行为层的程序员不同。将更多的能力放在设计者的手中并且不涉及过多的自定义软件编码或布局定制的视觉层系统满足了更广泛的用户。
发明内容此处描述了支持在声明性定义的界面模板和状态之间的复杂界面转变的视觉布局系统。该系统构建旧模板和新模板之间的对应关系,保留两个模板中都存在的视觉元件,并按需改变视觉元件的属性和在渲染树中的位置。该系统按需创建或销毁只出现在一个模板中的视觉元件。通过使用该视觉布局系统,设计者可以在模板的声明性表示中指定用户界面的状态,该模板将产生所指定的显示。该系统允许为设计者扫描要被指定为模板的状态变更。因此,该视觉布局系统向设计者提供了用于指定复杂的用户界面转变的便利设施并在运行时以可接受的性能管理转变。提供本
发明内容以便以简化形式介绍将在以下的具体实施方式中进一步描述的一些概念。本
发明内容并不旨在标识出所要求保护的主题的关键特征或必要特征,也不旨在用于限定所要求保护的主题的范围。图1是示出一个实施例中的视觉布局系统的各组件的框图。图2是示出一个实施例中的确定两个模板之间的增量的视觉布局系统的处理的流程图。图3是示出一个实施例中的动画化用户界面状态之间的转变的视觉布局系统的处理的流程图。具体实施例方式此处描述了支持在声明性定义的界面模板和状态之间的复杂界面转变的视觉布局系统。在某些实施例中,该系统扩展状态的定义从而使得控制状态可以是对现有模板或完全新的模板中的任一个的一组属性变更。在新模板的情况下,该系统构建旧模板和新模板之间的对应关系。该系统保留出现在两个模板中的视觉元件,并按需改变视觉元件的属性和在渲染树中的位置。该系统按需创建或销毁只出现在一个模板中的视觉元件。例如,第一状态可包括包括用于查看新闻文章的五个控件的公共的控件模板。用于编辑文章的第二状态包括接收编辑者可执行的其他动作的附加控件。通过使用视觉布局系统,设计者可以在模板的声明性表示(例如,可扩展标记语言(XML)文件)中指定状态,这将产生所指定的显示。该系统允许为设计者扫描要被指定为模板的状态变更(因为模板易于理解)。因为创建和卸载整个模板和控件组可能具有负面性能影响,所以在某些实施例中,该系统内部地将声明性规范以及状态和模板之间的差别转换成树增量,该系统可以在运行时以可接受的性能水平来呈现该树增量(因为树变更是高效的)而不会导致从头实例化新模板的成本。因此,该视觉布局系统向设计者提供了用于指定复杂的用户界面转变的便利设施并在运行时以可接受的性能管理转变。视觉布局系统可以在各种现代界面工具包和布局管理器中实现。一个示例是MICROSOFTTMSILVERLIGHTTM和MICROSOFTTMWPF。MICROSOFTTMVisualStateManager的现有版本以与下面方式相类似地获取XML状态描述(注意,这不是实际句法但在功能上是等价的,并为了更紧凑的演示而被简化)。<ControlTemplate><VisualStateManager.VisualStateGroups><VisualStateGroupx:Name="CommonStates"><VisualStatex:Name="NormalState"/>〈VisualStatex:Name="HoverState">〈SetterTargetName二”Container"TargetProperty=”Background”Value="Gray"/></VisualState></VisualStateGroup></VisualStateGroups>〈Gridx:Name="Container"Background=”White,’><RichTextBoxx:Name=,,EditableMessage”/>〈TextBlockx:Name=”Label"Text="{BindingLabelText}"/></Grid></ControlTemplate>在该示例中,模板“ControlTemplate(控制模板)”用带有三个对象的树来定义。在名为“HoverState(悬停状态)”的状态中,名为“Container(容器)”的对象的Background(背景)属性将是灰色的。开发者可以用诸如“VisualStateManager.GoToState(this,“HoverState”,true)”之类的软件调用来变更状态,其中最后的布尔属性指示是否要动画化该转变。如果要动画化该转变,则需要有此处未涵盖的用来定义动画化的本质和持续时间的其他结构。这是极其有用的,但不能应付设计者想要控制的所有情况。有时候,设计者想要改变若干完全不同的模板之间的视觉元件。例如,这可能因为以下情况而发生设计者个别地从另一设计工具中导出每一模板,或者不同的模板使用本质上差距很大的对象从而使得只在当前显示的特定模板中创建对象是高效的。此处描述的视觉布局系统允许设计者如下声明性地定义多个模板权利要求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所述的系统,其特征在于,所述模板定义组件还被配置成接收声明性定义,所述声明性定义包括带有对于所有状态共同的控件的基模板信息,以及包括被添加到对于那些状态共同的控件的附加控件的附加状态。全文摘要本发明描述了复杂用户界面状态变更的声明性定义。此处描述了支持在声明性定义的界面模板和状态之间的复杂界面转变的视觉布局系统。该系统构建旧模板和新模板之间的对应关系,保留两个模板中都存在的视觉元件,并按需改变视觉元件的属性和在渲染树中的位置。该系统按需创建或销毁只出现在一个模板中的视觉元件。通过使用该视觉布局系统,设计者可以在模板的声明性表示中指定用户界面的状态,该模板将产生所指定的显示。该系统允许为设计者扫描要被指定为模板的状态变更。因此,该视觉布局系统向设计者提供了用于指定复杂的用户界面转变的便利设施并在运行时以可接受的性能管理转变。文档编号G06F9/44GK102221993SQ20111009978公开日2011年10月19日申请日期2011年4月15日优先权日2010年4月16日发明者K·L·扬申请人:微软公司
网友询问留言 已有0条留言
  • 还没有人留言评论。精彩留言会获得点赞!
1