一种用户界面中所包含的部件的生成方法和装置制造方法

一种用户界面中所包含的部件的生成方法和装置制造方法
【专利摘要】本发明公开了一种生成用户界面中所包含的部件方法和装置，用于解决现有技术中存在的开发者只能在UISDK所提供的UI部件中进行选择，不能完全根据开发者自身需求自定义UI部件的问题。方法包括：获取并解析用户在用户界面开发过程中输入的用户所设计的部件的注册信息；根据注册信息中携带的部件的属性信息、第一信息和第二信息，生成该部件的结构；根据注册信息中携带的第四信息，生成该部件能够执行的各种行为；根据注册信息中携带的第三信息，生成该部件在不同操作状态下的显示样式，并调用该第三信息中表示该部件在未操作状态下的显示样式，在用户界面中显示该部件。本发明中，用户可以自行设计用户界面中的各个部件，提高了用户体验。
【专利说明】一种用户界面中所包含的部件的生成方法和装置

【技术领域】
[0001] 本发明涉及用户界面（User Interface, UI)的开发【技术领域】，特别涉及一种用户 界面中所包含的部件的生成方法和装置。

【背景技术】
[0002] 用户界面软件开发包（User Interface Software Development Kit，UISDK)技 术，是一个用于用户界面开发、以及用户界面交互开发的框架。UISDK技术发展多年，已经 成为软件工具中的重要组成部分，为软件的开发、生成提供了一定便利，如我们进行Web开 发、应用程序开发，均有相应的UISDK开发工具，用于快速生成开发者所需的Π 。
[0003] UISDK是一种运行时库，在程序的头部载入。UISDK-般根据常用的部件、事件、行 为等进行封装，提供开发者便于使用的工具套件，比如按钮、列表、单选框、复选框、文本框、 导航条、进度条、滚动条等；UISDK对事件的封装包括点击（Onclick)事件、按键事件、获得 焦点、内容改变等；行为包括显示、执行、关联等方面，一般UISDK均进行高度封装。开发者 使用UISDK进行开发，在一定程度上提高了开发效率，可以不必在一个按钮上花费太多的 时间。比如最为简单的按钮部件，在不使用UISDK进行开发环境下，需要开发者自己定义一 个矩形区域，在该矩形区域内放置一些文本作为按钮内容，然后需要开发者定义当鼠标移 至该矩形区域时，矩形区域将会发生何种变化，比如更换区域内绘制新的图片，作为按钮处 于焦点或者鼠标停留的样式，当点击时做出另一种处理，点击行为发生后，启动相应的函数 或者方法执行，即所谓的点击事件。但是有了 UISDK后便大大不同了，开发者可以直接从开 发工具包中拖拽一个按钮到窗口区域，然后简单设置其属性便可使用，比如背景色、背景图 片、鼠标停留时的背景及图片，实现其点击事件。
[0004] 然而，开发者使用UISDK进行开发时，也有会受到一些限制，比如开发者只能在 UISDK所提供的Π 部件中进行选择，不能根据开发者自身需求自定义Π 部件，如某一 Π 部 件未提供背景图片的设置，开发者则无法为该部件指定自身所需的背景图片等，开发过程 中受到一定的限制，降低了用户体验。


【发明内容】

[0005] 本发明实施例提供了一种生成用户界面中所包含的部件的方法和装置，用于解决 现有技术中存在的开发者只能在UISDK所提供的UI部件中进行选择，不能完全根据开发者 自身需求自定义UI部件的问题。
[0006] 本发明实施例提供了一种生成用户界面中所包含的部件的方法，包括：
[0007] 获取并解析用户在用户界面开发过程中输入的用户所设计的部件的注册信息，所 述注册信息包括：所述部件的属性信息、用于表示所述部件的组成部分的第一信息、用于表 示与所述部件相关联的业务数据的第二信息、用于表示所述部件在不同操作状态下的显示 样式的第三信息、和用于表示所述部件能够执行的各种行为的第四信息；
[0008] 根据所述部件的属性信息、所述第一信息和所述第二信息，生成所述部件的结 构；
[0009] 根据所述第四信息，生成所述部件能够执行的各种行为；
[0010] 根据所述第三信息，生成所述部件在不同操作状态下的显示样式，并调用所述第 三信息中表示所述部件在未操作状态下的显示样式，在用户界面中显示所述部件。
[0011] 较佳地，在用户界面中显示所述部件之后，该方法还包括：
[0012] 根据用户对所述部件的操作指令，调用所述第四信息中与所述操作指令对应的行 为，并执行所调用的行为；
[0013] 根据用户对所述部件的操作指令，获取所述第三信息中包含的表示所述部件在所 述操作指令对应的操作状态下的显示样式；以及
[0014] 根据获取到的显示样式在用户界面中显示所述部件。
[0015] 在实施中，作为一种优选的实现方式，若所述部件包括至少两个子部件，所述注册 信息还包括：用于表示所述部件所包含的各子部件之间的嵌套关系的第五信息；
[0016] 其中，所述部件的属性信息包括所述部件所包含的各子部件的属性信息；所述第 一信息包括分别表示所述部件所包含的各子部件的组成部分的信息；所述第二信息包括分 别表示与所述部件所包含的各子部件相关联的业务数据的信息；所述第三信息包括分别表 示所述部件所包含的各子部件在不同操作状态下的显示样式的信息；所述第四信息包括分 别表示所述部件所包含的各子部件能够执行的各种行为的信息。
[0017] 该方式下，根据所述部件的属性信息、所述第一信息和所述第二信息，生成所述部 件的结构，包括：
[0018] 针对所述部件所包含的每个子部件，根据该子部件对应的属性信息、所述第一信 息中表示该子部件的组成部分的信息和所述第二信息中表示该子部件相关联的业务数据 的信息，生成该子部件的结构；以及
[0019] 根据所述第五信息和生成的所述部件所包含的各子部件的结构，生成所述部件的 结构。
[0020] 该方式下，根据所述第四信息，生成所述部件能够执行各种行为，包括：
[0021] 根据所述第四信息中包含的表示所述部件所包含的各子部件能够执行的各种行 为的信息，生成所述部件所包含的各子部件能够执行的各种行为。
[0022] 该方式下，根据所述第三信息，生成所述部件在不同操作状态下的显示样式，并调 用所述第三信息中表示所述部件在未操作状态下的显示样式，在用户界面中显示所述部 件，包括：
[0023] 根据所述第三信息中包含的表示所述部件所包含的各子部件在不同操作状态下 的显示样式，生成所述部件所包含的各子部件在不同操作状态下的显示样式，并调用第三 信息中表示所述部件所包含的各子部件在未操作状态下的显示样式，在用户界面中显示所 述部件。
[0024] 该方式下，在用户界面中显示所述部件之后，该方法还包括：
[0025] 根据用户对所述部件的各子部件的操作指令，调用所述第四信息中与所述操作指 令对应的各子部件需要执行的行为，并执行所调用的行为；
[0026] 根据用户对所述部件的各子部件的操作指令，获取所述第三信息中包含的分别表 示所述部件所包含的各子部件在所述操作指令对应的操作状态下的显示样式；以及
[0027] 根据获取到的显示样式在用户界面中显示所述部件。
[0028] 本发明实施例提供的生成用户界面中所包含的部件的装置，包括：
[0029] 注册界面提供模块，用于在接收到用于请求注册用户所设计的部件的注册请求 后，提供能够输入注册信息的注册界面；
[0030] 解析模块，用于解析用户在所述注册界面中输入的注册信息，所述注册信息包括： 所述部件的属性信息、用于表示所述部件的组成部分的第一信息、用于表示与所述部件相 关联的业务数据的第二信息、用于表示所述部件在不同操作状态下的显示样式的第三信 息、和用于表示所述部件能够执行的各种行为的第四信息；
[0031] 第一处理模块，用于根据所述部件的属性信息、所述第一信息和所述第二信息，生 成所述部件的结构；
[0032] 第二处理模块，用于根据所述第三信息中包含的表示所述部件在未操作状态下的 显示样式，在用户界面中显示所述部件。
[0033] 较佳地，该装置还包括：
[0034] 第四处理模块，用于根据用户对所述部件的操作指令，调用所述第四信息中与所 述操作指令对应的行为，并执行所调用的行为；根据用户对所述部件的操作指令，获取所述 第三信息中包含的表示所述部件在所述操作指令对应的操作状态下的显示样式；以及根据 获取到的显示样式在用户界面中显示所述部件。
[0035] 在实施中，作为一种优选的实现方式，若所述部件包括至少两个子部件，所述注册 信息还包括：用于表示所述部件所包含的各子部件之间的嵌套关系的第五信息；
[0036] 其中，所述部件的属性信息包括所述部件所包含的各子部件的属性信息；所述第 一信息包括分别表示所述部件所包含的各子部件的组成部分的信息；所述第二信息包括分 别表示与所述部件所包含的各子部件相关联的业务数据的信息；所述第三信息包括分别表 示所述部件所包含的各子部件在不同操作状态下的显示样式的信息；所述第四信息包括分 别表示所述部件所包含的各子部件能够执行的各种行为的信息。
[0037] 该方式下，所述第一处理模块具体用于：
[0038] 针对所述部件所包含的每个子部件，根据该子部件对应的属性信息、所述第一信 息中表示该子部件的组成部分的信息和所述第二信息中表示该子部件相关联的业务数据 的信息，生成该子部件的结构；以及根据所述第五信息和生成的所述部件所包含的各子部 件的结构，生成所述部件的结构。
[0039] 该方式下，所述第二处理模块具体用于：
[0040] 根据所述第四信息中包含的表示所述部件所包含的各子部件能够执行的各种行 为的信息，生成所述部件所包含的各子部件能够执行的各种行为。
[0041] 该方式下，所述第三处理模块具体用于：
[0042] 根据所述第三信息中包含的表示所述部件所包含的各子部件在不同操作状态下 的显示样式，生成所述部件所包含的各子部件在不同操作状态下的显示样式，并调用第三 信息中表示所述部件所包含的各子部件在未操作状态下的显示样式，在用户界面中显示所 述部件。
[0043] 该方式下，该装置还包括：
[0044] 第四处理模块，用于根据用户对所述部件的各子部件的操作指令，调用所述第四 信息中与所述操作指令对应的各子部件需要执行的行为，并执行所调用的行为；根据用户 对所述部件的各子部件的操作指令，获取所述第三信息中包含的分别表示所述部件所包含 的各子部件在所述操作指令对应的操作状态下的显示样式；以及根据获取到的显示样式在 用户界面中显示所述部件。
[0045] 本发明实施例提供的方法和装置中，用户可以自行设计和定义所设计的界面中的 各个部件，只需要将所设计的部件的注册信息告知给nSDK端，UISDK端就能根据用户输入 的注册信息，生成该部件的结构并在用户界面中显示该部件，因此，用户在设计网页等用户 界面时，不再受限于现有nSDK端提供固有部件的束缚，使用户在进行Π 开发，可以根据自 身需要生成不同于UISDK端所提供的固有部件的部件，实现了将用户自己设计的部件转化 为UISDK端的部件提高了用户体验。

【专利附图】

【附图说明】
[0046] 图1为本发明提供的一种生成用户界面所包含的部件的方法示意图；
[0047] 图2为本发明提供的一种用户在用户界面中设计的按钮的示意图；
[0048] 图3A为本发明提供的一种用户所设计的按钮在无操作状态下进行显示的示意 图；
[0049] 图3B为本发明提供的一种用户设计的按钮在点击操作状态下进行显示的示意 图；
[0050] 图4为本发明提供的实施例一的流程示意图；
[0051] 图5为本发明提供的一种用户所设计的列表的结构示意图；
[0052] 图6为本发明提供的一种生成用户界面所包含的部件的装置示意图。

【具体实施方式】
[0053] 本发明中，用户在设计用户界面的过程中，可以根据自身的需求，向UISDK注册部 件，使UISDK在接收到用户输入所设计的部件的注册信息后，生成该部件，以显示在用户设 计的界面中，从而提高了用户体验。
[0054] 下面结合说明书附图对本发明实施例作进一步详细描述。应当理解，此处所描述 的实施例仅用于说明和解释本发明，并不用于限定本发明。
[0055] 如图1所示，本发明实施例提供的一种生成用户界面所包含的部件的方法，在用 户设计界面的过程中，该方法包括：
[0056] 步骤11、获取并解析用户在用户界面开发过程中输入的用户所设计的部件的注册 信息，该注册信息包括：用户所设计的部件的属性信息、用于表示用户所设计的部件的组成 部分的第一信息、用于表示与用户所设计的部件相关联的业务数据的第二信息、用于表示 用户所设计的部件在不同操作状态下的显示样式的第三信息、和用于表示用户所设计的部 件能够执行的各种行为的第四信息。
[0057] 本步骤中，预先定义生成不同部件所需的接口信息，用户按照UISDK端定义的接 口信息输入自身所涉及的部件的注册信息，即可以理解为用户输入的注册信息为UISDK端 所定义的生成不同部件所需的接口信息的具体内容。
[0058] 本步骤中，用户输入的注册信息可以采用JSON(JavaScript Object Notation, JavaScript对象表示法）、XML(Extensible Markup Language,可扩展标记语言）等格式。
[0059] 步骤12、根据注册信息中所包含的用户所设计的部件的属性信息、第一信息和第 二信息，生成用户所设计的部件的结构。
[0060] 具体的，根据用户输入的注册信息中所包含的用户所设计的部件的属性信息、第 一信息和第二信息，进行计算以生成用户所设计的部件的结构。
[0061] 步骤13、根据注册信息中所包含的第四信息，生成该部件能够执行的各种行为。
[0062] 具体的，生成用户所设计的部件的结构之后，结合注册信息中所包含的第四信息， 确定该部件能够执行的各种行为，并生成该部件能够执行的各种行为。
[0063] 步骤14、根据注册信息中所包含的第三信息，生成该部件在不同操作状态下的显 示样式，并调用第三信息中表示该部件在未操作状态下的显示样式，在用户界面中显示该 部件。
[0064] 具体的，生成该部件能够执行的各种行为之后，结合注册信息中所包含的第三信 息，确定该部件在不同操作状态下的显示样式，并生成该部件在不同操作状态下的显示样 式，并调用第三信息中表示该部件在未操作状态下的显示样式，在用户界面中显示该部件。
[0065] 较佳地，上述步骤11?步骤14的执行主体为HSDK端。
[0066] 本发明实施例中，在用户设计用户界面过程中，用户可以自行设计和定义所设计 的用户界面中的各个部件，只需要将所设计的部件的注册信息告知给nSDK端，UISDK端就 能根据用户输入的注册信息，生成该部件，因此，用户在设计界面时，不再受限于UISDK端 提供固有部件的束缚，使用户在进行UI开发，可以根据自身需要生成不同于UISDK端所提 供的固有部件的部件，实现了将用户自己设计的部件转化为UISDK端的部件，提高了用户 体验。
[0067] 需要说明的是，用户设计部件即程序开发的过程，用户在提供注册信息时，需要根 据UISDK端给定的规范对所设计的部件进行注册。在程序进入运行时后，UISDK会在程序 运行的开始首先载入，程序执行过程中才能发挥其框架作用，控制程序运行，以实现生成并 显示用户所设计的部件的功能。
[0068] 本发明实施例可以应用于用户设计任何界面的过程中，如网页界面，游戏界面等； 用户设计的部件的类型可以是按钮、列表、单选框、复选框、文本框、导航条、进度条、滚动条 等中的任一种部件或至少两种部件的组合。
[0069] 在实施中，步骤11中，注册信息为用户按照UISDK端所规定的格式输入nSDK端 的。在UISDK端内部，对每种类型的部件都会进行宏观定义，以WEB页面设计中设计的按钮 为例，对按钮的宏观定义，包括以下信息：
[0070] "按钮应该是这样，按钮应该有个名字，按钮应该有自己独立的数据，点击按钮应 该执行一个函数，在执行函数时可利用自己的数据，按钮在常规无操作的状态下以什么方 式显示，在获得焦点后以什么方式显示"。
[0071] 上述定义即为UISDK端针对按钮这个部件所规定的接口信息，若用户需要生成自 身所涉及的按钮部件，则应该按照UISDK端针对按钮所规定的接口信息输入自身所生成的 按钮对应的注册信息，仍以WEB页面设计中设计按钮为例，若用户需要设计一个按钮，则用 户输入的注册信息如下：
[0072] "我要注册一个按钮，该按钮包括一个图像和一段显示文字，按钮的名字叫做按 钮A ;按钮点击后执行的函数为FunA ;按钮使用的数据为DataA,其中DataA中包括三个 部分的数据：img标签对应的图像数据DatalmgA、span标签对应的文字数据DataSpanA、 以及div标签对应的前二者数据组合DataDivA ;按钮在普通状态下显示的样式为 StyleNormalA,按钮在获得焦点后显示的样式为StyleFocusA",如图2所示。其中，标签为 WEB中的最小单元。程序如下：
[0073] 用户所设计的按钮如下：
[0074] 〈div id = "buttonA"class = 〃divA">// 定义一个 div 标签，id 为 buttonA，样 式为divA ;
[0075] 〈img id = 〃imgA〃class = 〃imgA〃>// 定义一个 img 标签，id 为 imgA，样式为 imgA ；
[0076] 〈span id = 〃spanA"class = 〃spanA">〈/span>// 定义一个 span 标签，id 为 spanA,样式为 spanA ;
[0077] </div>
[0078] 用户写入的注册信息如下：
[0079] { type: "button ",//郅件类型 buttonName:"按钮A",//邵件名称 elementld:"buttonA V/识别 1D onClickFunction:flincl;ion(.){alert("我是 n+this.data，sjpanA).!.,/，々、 击后触发的事件 data:丨//关联的数据
[0080] imgA:"buttonA.jpg",/7imgA 显示的图片数据 spanA:"按钮A 7/spanA显示的文字数据 } }
[0081] 运行上述程序后，生成的按钮结构如图3A所示，点击该新按钮后，执行点击功能 (onclickfunction)函数，该按钮的显示效果如图3B所示。
[0082] 较佳地，步骤11中，用户输入的注册信息中的部件的属性信息包括但不限于下列 信息中的一种或多种：类型信息、名称信息等。其中，类型信息表示该部件的类型，如按钮、 列表、单选框、复选框、文本框、导航条、进度条、滚动条等；名称信息表示用户为该部件的命 名。
[0083] 较佳地，步骤11中，用户输入的注册信息中的第二信息包括但不限于下列信息中 的一种或多种：部件所显示的图像数据的地址信息、部件所显示的字符数据（其中，字符包 括文字、数字、字母等）、部件所显示的视频数据的地址信息、部件所显示的音频数据的地址 信息。
[0084] 较佳地，步骤11中，用户输入的注册信息中的第三信息包括但不限于下列信息中 的一种或多种：部件的在无操作状态下的显示样式、部件在获得焦点状态下的显示样式、部 件在被选择状态下的显示样式、部件在不可用状态下的显示样式、部件在拖动状态下的显 示样式。
[0085] 较佳地，步骤11中，用户输入的注册信息中的第四信息是指部件能够执行的各种 行为对应的函数，第四信息包括但不限于下列信息中的一种或多种：鼠标点击、鼠标移动、 按键触发、推拽、获得焦点、失去焦点、内容改变、加载完成、尺寸改变、删除、卸载等。
[0086] 在实施中，在生成并显示用户设计的部件之后，保存该部件以及该部件对应的注 册信息中携带的第三信息和第四信息，以便该用户在本次界面设计或其他界面设计时，能 够使用该用户设计的部件，也使其他用户在进行界面设计时能够使用已生成的部件。
[0087] 基于上述任一实施例，步骤14中，在用户界面中显示用户所设计的部件之后，该 方法还包括：
[0088] 根据用户对该用户所设计的部件的操作指令，调用该部件的注册信息所包含的第 四信息中与该操作指令对应的行为，并执行所调用的行为；
[0089] 根据用户对该用户所设计的部件的操作指令，获取该部件的注册信息所包含的第 三信息中包含的表示该部件在该操作指令对应的操作状态下的显示样式；以及
[0090] 根据获取到的显示样式在用户界面中显示该部件。
[0091] 在实施中，作为一种优选的实现方式，若用户所设计的部件包括至少两个子部件， 则该部件所对应的注册信息还包括：用于表示该部件所包含的各子部件之间的嵌套关系的 第五信息。
[0092] 较佳地，第五信息中包括但不限于下列信息中的一种或多种：各子部件的位置关 系、各子部件的包含关系、各子部件的组合关系。
[0093] 该方式下，用户所设计的部件的属性信息包括该部件所包含的各子部件的属性信 息；
[0094] 用户所设计的第一信息包括分别表示该部件所包含的各子部件的组成部分的信 息；
[0095] 用户所设计的第二信息包括分别表示与该部件所包含的各子部件相关联的业务 数据的信息；
[0096] 用户所设计的第三信息包括分别表示该部件所包含的各子部件在不同操作状态 下的显示样式的信息；
[0097] 用户所设计的第四信息包括分别表示该部件所包含的各子部件能够执行的各种 行为的信息。
[0098] 该方式下，步骤12具体为：
[0099] 针对用户所设计的部件所包含的每个子部件，根据该子部件对应的属性信息、第 一信息中表不该子部件的组成部分的信息和第二信息中表不该子部件相关联的业务数据 的信息，生成该子部件的结构；以及
[0100] 根据注册信息携带的第五信息和生成的该部件所包含的各子部件的结构，生成该 部件的结构。
[0101] 具体的，若用户所设计的部件包括至少两个子部件，则在生成该部件的结构时，先 生成该部件中各子部件的结构，再根据注册信息所携带的用于表示该部件中各子部件的嵌 套关系的信息，生成该部件的结构。
[0102] 该方式下，步骤13具体为：
[0103] 根据注册信息携带的第四信息中包含的表示用户所设计的部件所包含的各子部 件能够执行的各种行为的信息，生成该件所包含的各子部件能够执行的各种行为。
[0104] 该方式下，步骤14具体为：
[0105] 根据注册信息携带的第三信息中包含的表示用户所设计的部件所包含的各子部 件在不同操作状态下的显示样式，生成该部件所包含的各子部件在不同操作状态下的显示 样式，并调用第三信息中表示该部件所包含的各子部件在未操作状态下的显示样式，在用 户界面中显示该部件。
[0106] 该方式下，步骤14中，在用户界面中显示该部件之后，该方法还包括：
[0107] 根据用户对该用户所设计的部件的各子部件的操作指令，调用注册信息携带的第 四信息中与该操作指令对应的各子部件需要执行的行为，并执行所调用的行为；
[0108] 根据用户对该用户所设计的部件的各子部件的操作指令，获取注册信息携带的第 三信息中包含的分别表示该部件所包含的各子部件在所述操作指令对应的操作状态下的 显示样式；以及
[0109] 根据获取到的显示样式在用户界面中显示该部件。
[0110] 下面以生成用户所设计的按钮为例，对本发明实施例提供的一种生成用户界面所 包含的部件的方法进行详细说明。
[0111] 实施例一、如图4所示，包括如下过程：
[0112] 步骤1 :用户根据美工设计Π 画面。
[0113] 以WebUI设计为例，该步骤表示，用户可以根据自己需求自由设计网页，如在制作 过程中，不必遵循UISDK所包含的固有按钮为一矩形区域或者圆角矩形的普通概念，可以 在形状、实现方式、标签组合、位置上自由设计。
[0114] 步骤2:用户根据自身的设计向UISDK注册新按钮。其中，用户写入nSDK的注册 信息包括：新按钮的属性信息、用于表示新按钮的组成部分的第一信息、用于表示新按钮的 对应的数据的第二信息、用于表示新按钮的在不同操作状态下的显示样式的第三信息、以 及用于表示新按钮能够执行的各种行为的第四信息。
[0115] 这一注册过程为生成用户所设计的部件的依据。通过用户所设计的部件的用户界 面的组成（即第一信息）的注册，告知nSDK某些元素将成为或者组合成为一个部件；第二 信息为部件的用户界面的显示基础，通过用户界面中的数据（即第二信息）和该部件在不 同操作下的显示样式（即第三信息）的注册，告知UISDK在部件的用户界面初始化时，该部 件上显示、内部包含携带的数据以及显示样式；当注册为nSDK的一个部件后，比如注册为 UISDK可识别的一个按钮，此时便可根据UISDK提供的行为添加该按钮行为了，比如：注册 点击按钮后执行的函数；鼠标在该按钮上悬停时执行的函数等等；总之，注册信息为nSDK 智能识别用户设计的前提条件。
[0116] 步骤3 :UISDK根据注册信息生成部件的用户界面。该生成包括部件的最终用户界 面组成，用户界面数据，以及行为的生成。
[0117] 该步骤对用户来讲是透明的，为nSDK内部处理。UISDK根据上一步获得的注册信 息，执行计算生成最终结果输出。UISDK中定义了各种部件的框架以及部件的实现方法，接 口信息规范。用户在注册信息中指定最终生成为nSDK中的某个部件，注册信息中包括了 各种基础单元的组合方式。UISDK根据以上注册信息执行内部运算，分析计算出该部件最终 的页面结构。
[0118] 其中，页面数据计算即UISDK根据用户注册时提供的数据（即第二信息）、页面结 构（即第一信息）等进行计算过程；页面行为由UISDK根据接口定义，在运行时生成调用用 户注册的行为信息（即第四信息）及在不同操作下的显示样式（即第三信息），另外nSDK 根据在生成部件的最终用户界面的过程中，可对生成的部件进行复制以及附加行为等操 作。
[0119] 步骤4 :UISDK根据用户交互控制页面运行。以Web页面为例，UISDK生成的部件 的最终运行程序画面与一般nSDK固有的部件无异，页面在生成时进行数据初始化，根据 与系统、用户之间的交互来运行程序。
[0120] 下面以生成用户所设计的包含三个子部件的列表为例，对本发明实施例提供的一 种生成用户界面所包含的部件的方法进行详细说明。
[0121] 首先，用户在用户界面中绘制了如图5所示的列表。
[0122] 所设计的列表代码如下：
[0123] <ul id="myList"> <li> <img id="ProductPic"> <span id="ProductName"></span> <div id="PiOductDescription"></div> </li> </ul>
[0124] 然后，用户在向UISDK注册时，考虑注册为UISDK的列表，所设计的列表内部每行 包括一个图片和两段文字构成的子部件，以上包含3条数据。针对该列表，注册信息如下 (以Json格式为例） ：
[0125] { "id"： "myListV/注册id,与网页中的标签id对应； "description"： "列表部件示例"，//描述； "CaEType": "List，，，"部件类型； "classes": {//显示样式的注册； "110111说丨"："1」81]^(而见丨",//该列表在一般状态下的显示样式；
[0126] "focus"： "ListFocus"，//该列表在获得热点时的显示样式； " dataSelecLed'^ListSelecLed"//该列表某个教据项选中时的显示样 式； }, noriCaE"： [//列表中的一行包含的部件项目声明； {//该处注册一个img图彳象部件，用于显示产品图片； "id": "ProductPic", "descripLion": "商品图片"， "CaEType": "img" }， {//该处注册一个span部件，用于显示产品图片的名称； "id": "ProductName", "description"： "商品名称"， "CaETypc"： "span" {//该处注册一个div部件，用于显示产品图片的描述； "id": "ProductDcscription", "description"： "商品描速"， "CaHType": "div" } ]， "ListConfig'1: {//ListConfig 用于列表配置； "UIDataltem": //声明List中包含的数据项；
["ProductPic'V'PiOductName",'iPiOductDescription"] }， "nav": {//myList部件的导航信息； ，'lei\To":，MVIyBuUon! '，,//向左导航到 MyBimon 1; "1^111:1'〇|':''1\4}/131_11:1'〇1127/向右导航到1\^81.丨1:1;〇112;
[0127] "handler"： {//myList部件相关事件注册； "aftEnterHandler": "viewDetail" } }
[0128] 上述注册信息中，〃id"、"description"、"CaEType"、"classes"、''normal"、 "focus"、"dataSelectecT、"oriCaE"、"ListConfig"、"nav"、"handler"等均为用户向 UISDK注册过程中的关键字，即UISDK规定的接口信息。其中"oriCaE"关键字表示该 部件所包含子部件的嵌套关系的第五信息，该示例中包含ProductPic、ProductName、 ProductDescription三个子部件，注意该处的子部件仅仅表示一种组合、结构，并非最终 UISDK计算结果，只是计算的一个要素。
[0129] 接着，用户输入注册信息中的数据信息（即第二信息），以使nSDK显示该列表，具 体的数据信息如下：
[0130] { "myList": { "Data":[ { "productPic":{"Data": "img/pl.jpg"}, "productName": {"Data":"Broken Bells"}, "productDescription":{"Data":"Broken Bells"} }， { "productPic":{"Data": "img/p2.jpg"), "productName": ("Data":"Warning"|, "productDescription":{"Data":"Hot Chip"} }， { "productPic":{"Data": "img/p3.jpg"S,
[0131] "productName": ("Data":"Wolfgang Amadeus Phoenix"}, "productDescription":{"Data,':,'Phoenix"} } ], SelectedIndex:0，// 当前选中项； DataSelectedIndex:0//数据选中项； } }
[0132] 最后，UISDK根据用户提供的所设计的列表的注册信息，计算获得如下部件代码：
[0133] <ul id="myList"> <h> <img id="ProductPic_0" src="img/pl ,jpg"> <span id="ProductName_0">Broken Bells</span> <div id="PiOductDescription_0">Broken Bells</div> </li> <li> <img id=,,ProductPic_l" src="irng/p2.jpg,,> <span id="ProductName_l">Waniing</span> <div id="ProductDescription_r'>Hot Chip</div> </Ii> <li> <img id="ProductPic_2" src="img/p3.jpg"> 〈span id="PiOductName_2">Wolfgang Amadeus Phoenix</span> <div id="ProductDescription_2">Phoenix</div> </li> </ul>
[0134] 以上信息是SDK根据给定的注册信息计算生成，原先oriCaE中注册的图片项目 ProductPic，结合数据信息后，生成了 ProductPic_0、ProductPic_l、ProductPic_2 三个 img标签。
[0135] 需要说明的是，上述注册信息中的〃id〃、"description"、〃CaEType〃、"classes"、 ''normal"、''focus〃、"dataSelected"、〃oriCaE〃、"ListConfig〃、"nav〃、''handler〃等均为用 户向nSDK输入的用于注册所设计的部件的关键字，即UISDK规定的接口信息，它们在Json 数据描述中以键的形式存在，在注册过程中要求用户给定其内容，具体格式由UISDK规定， 部分项目可为空。
[0136] 上述方法处理流程可以用软件程序实现，该软件程序可以存储在存储介质中，当 存储的软件程序被调用时，执行上述方法步骤。
[0137] 基于同一发明构思，本发明实施例中还提供了一种用户界面的生成装置，由于该 装置解决问题的原理与上述一种用户界面的生成方法相似，因此该装置的实施可以参见方 法的实施，重复之处不再赘述。
[0138] 如图6所示，本发明实施例提供的一种用户界面的生成装置，该装置应用于用户 设计界面的过程中，该装置包括：
[0139] 解析模块61，用于获取并解析用户在用户界面开发过程中输入的用户所设计的 部件的，所述注册信息包括：所述部件的属性信息、用于表示所述部件的组成部分的第一信 息、用于表示与所述部件相关联的业务数据的第二信息、用于表示所述部件在不同操作状 态下的显示样式的第三信息、和用于表示所述部件能够执行的各种行为的第四信息；
[0140] 第一处理模块62,用于根据所述部件的属性信息、所述第一信息和所述第二信息， 生成所述部件的结构；
[0141] 第二处理模块63,用于根据所述第四信息，生成所述部件能够执行的各种行为；
[0142] 第三处理模块64,用于生成所述部件在不同操作状态下的显示样式，并调用所述 第三信息中表示所述部件在未操作状态下的显示样式，在用户界面中显示所述部件。
[0143] 较佳地，该装置还包括：
[0144] 第四处理模块65,用于根据用户对所述部件的操作指令，调用所述第四信息中与 所述操作指令对应的行为，并执行所调用的行为；根据用户对所述部件的操作指令，获取所 述第三信息中包含的表示所述部件在所述操作指令对应的操作状态下的显示样式；以及根 据获取到的显示样式在用户界面中显示所述部件。
[0145] 在实施中，作为一种优选的实现方式，若所述部件包括至少两个子部件，所述注册 信息还包括：用于表示所述部件所包含的各子部件之间的嵌套关系的第五信息；
[0146] 其中，所述部件的属性信息包括所述部件所包含的各子部件的属性信息；所述第 一信息包括分别表示所述部件所包含的各子部件的组成部分的信息；所述第二信息包括分 别表示与所述部件所包含的各子部件相关联的业务数据的信息；所述第三信息包括分别表 示所述部件所包含的各子部件在不同操作状态下的显示样式的信息；所述第四信息包括分 别表示所述部件所包含的各子部件能够执行的各种行为的信息。
[0147] 该方式下，第一处理模块62具体用于：
[0148] 针对所述部件所包含的每个子部件，根据该子部件对应的属性信息、所述第一信 息中表示该子部件的组成部分的信息和所述第二信息中表示该子部件相关联的业务数据 的信息，生成该子部件的结构；以及根据所述第五信息和生成的所述部件所包含的各子部 件的结构，生成所述部件的结构。
[0149] 该方式下，第二处理模块63具体用于：
[0150] 根据所述第四信息中包含的表示所述部件所包含的各子部件能够执行的各种行 为的信息，生成所述部件所包含的各子部件能够执行的各种行为。
[0151] 该方式下，第三处理模块64具体用于：
[0152] 根据所述第三信息中包含的表示所述部件所包含的各子部件在不同操作状态下 的显示样式，生成所述部件所包含的各子部件在不同操作状态下的显示样式，并调用第三 信息中表示所述部件所包含的各子部件在未操作状态下的显示样式，在用户界面中显示所 述部件。
[0153] 该方式下，该装置还包括：
[0154] 第四处理模块65,用于根据用户对所述部件的各子部件的操作指令，调用所述第 四信息中与所述操作指令对应的各子部件需要执行的行为，并执行所调用的行为；根据用 户对所述部件的各子部件的操作指令，获取所述第三信息中包含的分别表示所述部件所包 含的各子部件在所述操作指令对应的操作状态下的显示样式；以及根据获取到的显示样式 在用户界面中显示所述部件。
[0155] 本发明实施例提供的装置所实现的功能可以应用于现有的nSDK，以使UISDK能 够为用户提供自行设计和定义所设计的界面中的各个部件的功能，用户在自行设计过程 中，只需要将所设计的部件的注册信息告知给nSDK，UISDK就能根据用户输入的注册信 息，生成该部件的结构并在用户界面中显示该部件，从而用户在设计网页等用户界面时，不 再受限于UISDK提供固有部件的束缚，使用户在进行Π 开发，可以根据自身需要生成不同 于UISDK所提供的固有部件的部件，提高了用户体验。
[0156] 本领域内的技术人员应明白，本发明的实施例可提供为方法、系统、或计算机程序 产品。因此，本发明可采用完全硬件实施例、完全软件实施例、或结合软件和硬件方面的实 施例的形式。而且，本发明可采用在一个或多个其中包含有计算机可用程序代码的计算机 可用存储介质（包括但不限于磁盘存储器、CD-ROM、光学存储器等）上实施的计算机程序产 品的形式。
[0157] 本发明是参照根据本发明实施例的方法、设备（系统）、和计算机程序产品的流程 图和/或方框图来描述的。应理解可由计算机程序指令实现流程图和/或方框图中的每一 流程和/或方框、以及流程图和/或方框图中的流程和/或方框的结合。可提供这些计算 机程序指令到通用计算机、专用计算机、嵌入式处理机或其他可编程数据处理设备的处理 器以产生一个机器，使得通过计算机或其他可编程数据处理设备的处理器执行的指令产生 用于实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能 的装置。
[0158] 这些计算机程序指令也可存储在能引导计算机或其他可编程数据处理设备以特 定方式工作的计算机可读存储器中，使得存储在该计算机可读存储器中的指令产生包括指 令装置的制造品，该指令装置实现在流程图一个流程或多个流程和/或方框图一个方框或 多个方框中指定的功能。
[0159] 这些计算机程序指令也可装载到计算机或其他可编程数据处理设备上，使得在计 算机或其他可编程设备上执行一系列操作步骤以产生计算机实现的处理，从而在计算机或 其他可编程设备上执行的指令提供用于实现在流程图一个流程或多个流程和/或方框图 一个方框或多个方框中指定的功能的步骤。
[0160] 尽管已描述了本发明的优选实施例，但本领域内的技术人员一旦得知了基本创造 性概念，则可对这些实施例作出另外的变更和修改。所以，所附权利要求意欲解释为包括优 选实施例以及落入本发明范围的所有变更和修改。
[0161] 显然，本领域的技术人员可以对本发明进行各种改动和变型而不脱离本发明的精 神和范围。这样，倘若本发明的这些修改和变型属于本发明权利要求及其等同技术的范围 之内，则本发明也意图包含这些改动和变型在内。
【权利要求】
1. 一种生成用户界面中所包含的部件的方法，其特征在于，该方法包括： 获取并解析用户在用户界面开发过程中输入的用户所设计的部件的注册信息，所述注 册信息包括：所述部件的属性信息、用于表不所述部件的组成部分的第一信息、用于表不与 所述部件相关联的业务数据的第二信息、用于表示所述部件在不同操作状态下的显示样式 的第三信息、和用于表示所述部件能够执行的各种行为的第四信息； 根据所述部件的属性信息、所述第一信息和所述第二信息，生成所述部件的结构； 根据所述第四信息，生成所述部件能够执行的各种行为； 根据所述第三信息，生成所述部件在不同操作状态下的显示样式，并调用所述第三信 息中表示所述部件在未操作状态下的显示样式，在用户界面中显示所述部件。
2. 如权利要求1所述的方法，其特征在于，在用户界面中显示所述部件之后，该方法还 包括： 根据用户对所述部件的操作指令，调用所述第四信息中与所述操作指令对应的行为， 并执行所调用的行为； 根据用户对所述部件的操作指令，获取所述第三信息中包含的表示所述部件在所述操 作指令对应的操作状态下的显示样式；以及 根据获取到的显示样式在用户界面中显示所述部件。
3. 如权利要求1所述的方法，其特征在于，若所述部件包括至少两个子部件，所述注册 信息还包括：用于表示所述部件所包含的各子部件之间的嵌套关系的第五信息； 其中，所述部件的属性信息包括所述部件所包含的各子部件的属性信息；所述第一信 息包括分别表示所述部件所包含的各子部件的组成部分的信息；所述第二信息包括分别表 示与所述部件所包含的各子部件相关联的业务数据的信息；所述第三信息包括分别表示所 述部件所包含的各子部件在不同操作状态下的显示样式的信息；所述第四信息包括分别表 示所述部件所包含的各子部件能够执行的各种行为的信息。
4. 如权利要求3所述的方法，其特征在于，根据所述部件的属性信息、所述第一信息和 所述第二信息，生成所述部件的结构，包括： 针对所述部件所包含的每个子部件，根据该子部件对应的属性信息、所述第一信息中 表示该子部件的组成部分的信息和所述第二信息中表示该子部件相关联的业务数据的信 息，生成该子部件的结构；以及 根据所述第五信息和生成的所述部件所包含的各子部件的结构，生成所述部件的结 构。
5. 如权利要求3所述的方法，其特征在于，根据所述第四信息，生成所述部件能够执行 各种行为，包括： 根据所述第四信息中包含的表示所述部件所包含的各子部件能够执行的各种行为的 信息，生成所述部件所包含的各子部件能够执行的各种行为。
6. 如权利要求3所述的方法，其特征在于，根据所述第三信息，生成所述部件在不同操 作状态下的显示样式，并调用所述第三信息中表示所述部件在未操作状态下的显示样式， 在用户界面中显示所述部件，包括： 根据所述第三信息中包含的表示所述部件所包含的各子部件在不同操作状态下的显 示样式，生成所述部件所包含的各子部件在不同操作状态下的显示样式，并调用第三信息 中表示所述部件所包含的各子部件在未操作状态下的显示样式，在用户界面中显示所述部 件。
7. 如权利要求3?6任一项所述的方法，其特征在于，在用户界面中显示所述部件之 后，该方法还包括： 根据用户对所述部件的各子部件的操作指令，调用所述第四信息中与所述操作指令对 应的各子部件需要执行的行为，并执行所调用的行为； 根据用户对所述部件的各子部件的操作指令，获取所述第三信息中包含的分别表示所 述部件所包含的各子部件在所述操作指令对应的操作状态下的显示样式；以及 根据获取到的显示样式在用户界面中显示所述部件。
8. -种生成用户界面中所包含的部件的装置，其特征在于，该装置包括： 解析模块，用于获取并解析用户在用户界面开发过程中输入的用户所设计的部件的注 册信息，所述注册信息包括：所述部件的属性信息、用于表示所述部件的组成部分的第一信 息、用于表示与所述部件相关联的业务数据的第二信息、用于表示所述部件在不同操作状 态下的显示样式的第三信息、和用于表示所述部件能够执行的各种行为的第四信息； 第一处理模块，用于根据所述部件的属性信息、所述第一信息和所述第二信息，生成所 述部件的结构； 第二处理模块，用于根据所述第四信息，生成所述部件能够执行的各种行为； 第三处理模块，用于生成所述部件在不同操作状态下的显示样式，并调用所述第三信 息中表示所述部件在未操作状态下的显示样式，在用户界面中显示所述部件。
9. 如权利要求8所述的装置，其特征在于，该装置还包括： 第四处理模块，用于根据用户对所述部件的操作指令，调用所述第四信息中与所述操 作指令对应的行为，并执行所调用的行为；根据用户对所述部件的操作指令，获取所述第三 信息中包含的表示所述部件在所述操作指令对应的操作状态下的显示样式；以及根据获取 到的显示样式在用户界面中显示所述部件。
10. 如权利要求8所述的装置，其特征在于，若所述部件包括至少两个子部件，所述注 册信息还包括:用于表示所述部件所包含的各子部件之间的嵌套关系的第五信息； 其中，所述部件的属性信息包括所述部件所包含的各子部件的属性信息；所述第一信 息包括分别表示所述部件所包含的各子部件的组成部分的信息；所述第二信息包括分别表 示与所述部件所包含的各子部件相关联的业务数据的信息；所述第三信息包括分别表示所 述部件所包含的各子部件在不同操作状态下的显示样式的信息；所述第四信息包括分别表 示所述部件所包含的各子部件能够执行的各种行为的信息。
11. 如权利要求10所述的装置，其特征在于，所述第一处理模块具体用于： 针对所述部件所包含的每个子部件，根据该子部件对应的属性信息、所述第一信息中 表示该子部件的组成部分的信息和所述第二信息中表示该子部件相关联的业务数据的信 息，生成该子部件的结构；以及根据所述第五信息和生成的所述部件所包含的各子部件的 结构，生成所述部件的结构。
12. 如权利要求10所述的装置，其特征在于，所述第二处理模块具体用于： 根据所述第四信息中包含的表示所述部件所包含的各子部件能够执行的各种行为的 信息，生成所述部件所包含的各子部件能够执行的各种行为。
13. 如权利要求10所述的装置，其特征在于，所述第三处理模块具体用于： 根据所述第三信息中包含的表示所述部件所包含的各子部件在不同操作状态下的显 示样式，生成所述部件所包含的各子部件在不同操作状态下的显示样式，并调用第三信息 中表示所述部件所包含的各子部件在未操作状态下的显示样式，在用户界面中显示所述部 件。
14. 如权利要求10?13任一项所述的装置，其特征在于，该装置还包括： 第四处理模块，用于根据用户对所述部件的各子部件的操作指令，调用所述第四信息 中与所述操作指令对应的各子部件需要执行的行为，并执行所调用的行为；根据用户对所 述部件的各子部件的操作指令，获取所述第三信息中包含的分别表示所述部件所包含的各 子部件在所述操作指令对应的操作状态下的显示样式；以及根据获取到的显示样式在用户 界面中显示所述部件。
【文档编号】G06F9/44GK104267954SQ201410503422
【公开日】2015年1月7日 申请日期:2014年9月26日 优先权日:2014年9月26日
【发明者】路玉太 申请人:青岛海信电器股份有限公司