一种所见即所得的动态生成用户界面的方法和系统技术领域
本发明涉及带人机交互界面的计算机程序应用技术领域，特别是涉及一种在二维显示平面中所见即所得动态生成布局界面控件元素的方法和系统。
背景技术
在带有用户界面的计算机应用程序中，如果内外界情况发生了改变，目前的用户操作界面不能满足新的应用要求，或者要新增一套新的用户界面，例如：智能家居产品中，新增加了一类智能终端产品，这个类别是之前的系统中没有的，而新类别的智能终端产品操作方式和已有产品的操作方式大不相同，这就需要新增一套用户界面。那么这种情况下普遍需要修改应用程序的源代码，修改界面部分处理代码，甚至还要修改数据处理部分的代码，然后测试并发布新的应用程序版本；终端显示设备再把新版本的程序重新安装并部署好。其间花费的人力物力成本巨大，周期长。而且以上步骤中，最终用户除了重新安装部署应用程序之外，其它工作都无法帮忙，只能被动等待。
发明内容
为了解决上述问题，本发明解决的技术问题在于提供了一种所见即所得的动态生成用户界面的方法和系统，以更方便灵活的修改和添加各种布局。
本发明提供了一种所见即所得的动态生成用户界面的方法，包括，
所见即所得的用户界面设计工具用来添加并自由拖拽各类控件到合适的显示区域位置，设置控件的布局参数，设置控件的编号，并生成布局配置文件；
所述所见即所得的用户界面设计工具在添加图片类控件和图片按钮类控件的时候，都要从本地选取一个图片文件作为此控件对应显示的图片；
所述布局配置文件和所述控件对应显示的图片文件被导入或者下载到终端显示设备中；
所述终端显示设备解析所述布局配置文件，根据各个控件的布局参数、编号和控件对应显示的图片文件，动态生成各个控件并显示到所述终端显示设备的屏幕上。
上述的所见即所得的动态生成用户界面的方法中，其中，所述所见即所得的用户界面设计工具根据所述显示终端设备分辨率的大小，来设定所述各类控件的可被显示和可被拖拽区域的大小。
上述的所见即所得的动态生成用户界面的方法，其中，用户能够在所述终端显示设备上设置下载所述布局配置文件和所述控件对应显示的图片文件的下载地址。
上述的所见即所得的动态生成用户界面的方法，其中，所述终端显示设备在动态生成各个控件的时候，把所述控件的编号设置在控件的标签属性中（例如在android系统中，可设置的属性包括android控件的tag信息位置和ID信息位置）。
本发明还提供了一种所见即所得的动态生成用户界面的系统，包括所见即所得的用户界面设计工具和终端显示设备，其中，
所述所见即所得的用户界面设计工具包括布局配置文件加载单元、控件添加编辑单元、布局配置文件生成单元；所述终端显示设备包括解析单元、动态生成控件并显示单元、控件事件响应处理单元；
所述布局配置文件加载单元，用于打开之前保存的布局配置文件，分析文件中的控件数量和布局参数并把所有控件显示在所述所见即所得的用户界面设计工具的布局区域；
所述控件添加编辑单元，用于添加和编辑各类控件，拖拽各类控件到合适的位置；
所述布局配置文件生成单元，用于把所有控件综合起来生成一个布局配置文件；
所述解析单元，用于对布局配置文件进行读取和解析；
所述动态生成控件并显示单元，用于根据所述解析单元的解析结果，动态生成各个控件并显示各个控件到所述终端显示设备的屏幕上；
所述控件事件响应处理单元，用于对控件的产生的事件进行监听、响应和处理和更新显示。
上述的所见即所得的动态生成用户界面的系统，其中，所述所见即所得的用户界面设计工具，可以添加的控件种类包括图片，图片按钮，数字时钟，控制数据，文字标签，状态数字。
上述的所见即所得的动态生成用户界面的系统，其中，所述所见即所得的用户界面设计工具，可以设置控件的布局参数，包括控件横坐标，控件纵坐标，控件上显示的文本，还包括控件的编号。
上述的所见即所得的动态生成用户界面的系统，其中，所述布局配置文件，包括控件的编号，控件类型，控件横坐标，控件纵坐标，控件上显示的文本。
上述的所见即所得的动态生成用户界面的系统，其中，所述控件横坐标是指控件的所处位置到屏幕参考原点的横向直线点阵数；所述控件纵坐标是指控件的所处位置到屏幕参考原点的纵向直线点阵数。
上述的所见即所得的动态生成用户界面的系统，其中，所述终端显示设备还包括静态存储单元，所述静态存储单元会给每个控件分配一个数据存储空间，所有控件对应的数据组成一个数组，所述控件的编号等同于数组内数据元素的序号。
上述的所见即所得的动态生成用户界面的方法和系统，其中，所述终端显示设备还包括非易失性存储单元，所述的布局配置文件和控件对应显示的图片文件，都放置在非易失性存储单元中。
上述的所见即所得的动态生成用户界面的方法，其中，所述控件对应显示的图片，所述图片文件的名字用数字命名，其名字的内容包括该控件的编号和一个数字序号；同一个编号的控件，可以对应多个图片文件，以不同的数字序号来区分。
上述的所见即所得的动态生成用户界面的方法和系统，其中，所述终端显示设备从控件的标签属性中取得控件的编号，根据编号找到对应的所述数组内数据元素数值；如果控件是所述图片控件或者所述图片按钮控件，就会根据所述控件的编号和所述数组内数据元素的数值找到控件的所述对应显示的图片名字，所述图片名字的前半部分是控件的编号，所述图片名字的后半部分是所述数组内数据元素数值，从而显示出正确的图片；如果控件是所述数字时钟、控制数据、状态数字，就会把对应的所述数组内数据元素数值显示出来；如果控件是所述按钮图片、所述数字时钟、所述控制数据且控件被用户点击、触摸等，就可以直接修改对应的所述数组内数据元素数值，更新用户界面显示，同时执行相应的命令动作。
本发明的技术方案的有益效果在于：能够通过简单的添加各类显示控件，实现对各类显示控件进行自由拖拽摆放定位和布局，并精确设置控件的各种属性和编号，把生成的布局配置文件导入终端显示设备并显示出用户界面；使得不懂任何编程技术的最终使用人员也能方便灵活快速的设计出符合需要的用户操作界面而无需更改应用程序源代码。
附图说明
图1是本发明所见即所得动态生成用户界面的方法例流程图。
图2是本发明用户界面设计工具的操作界面。
具体实施方式
以下结合附图和具体实施例对本发明的技术方案作进一步的详细说明。
本发明可用于众多通用或专用的计算系统环境或配置中，例如：个人计算机、服务器计算机、手持设备或便携式设备、平板型设备、多处理器系统、基于微处理器的系统、机顶盒、可编程的消费电子设备、网络PC、小型计算机、大型计算机、包括以上任何系统或设备的分布式计算机环境等。
本发明所见即所得动态生成用户界面的方法例流程图，如图1所示，包括：
步骤101，首先要根据系统用户界面的特点来开发制作一款用户界面设计工具。
要准备用户界面上所有要用到的控件种类，根据控件种类各自的特点，设计出控件在工具上的显示形态、字样等，对于用户界面中没有用到而以后可能用到的控件种类，也可以做进去，将来的适应性会更广。本发明实施例中，可以添加的控件有图片，图片按钮，数字时钟，控制数据，文字标签，状态数字共6类。
要有一个打开并展示之前保存的布局配置文件（在本发明实施例中的所见即所得的用户界面设计工具中，称之为工程文件）的功能，好处是方便用户从上次没编辑完的地方继续编辑。
这个工具还要能根据终端显示设备屏幕的长和宽的点阵数据，设置控件显示区域的大小，以使显示区域更吻合和终端显示设备的屏幕。
要根据系统用户界面上面控件的特点，来决定工具要设定的控件的布局参数，对于无用的布局参数，可以不用设定，以简化用户界面设计工具的操作界面。本发明实施例中，可以设置的控件布局参数有控件横坐标（也就是x），控件纵坐标（也就是y），保留参数，控件上显示的文本，还包括控件的编号。至于控件的种类，在添加控件的时候，就已经决定了，不能被编辑更改。
最终制作完成的用户界面设计工具如图2所示，其中201是控件显示区域，也是控件可以拖拽的区域，控件只能在这个范围内拖动并显示。202是显示打开的工程文件的路径和名字。打开工程、保存工程、添加图片、添加图片按钮、添加数字时钟、添加数据、添加文字、状态数字这8个都是按钮。打开工程是为了打开之前保存的布局配置文件，保存工程是把当前的所有控件参数重新保存在布局文件中。203是屏幕坐标系参考原点，水平向右延长是横坐标x，竖直向下延长是纵坐标y。204是显示区域纵向滚动条，205是显示区域横向滚动条，当终端设备的屏幕尺寸大于用户界面设计工具的显示区域尺寸的时候，可以滑动这2个滚动条来显示更多的面积。
步骤102，使用用户界面设计工具来设计用户界面并生成布局配置文件。对于新添加的控件，初始位置都在显示区域的左上角203位置，用户可以用鼠标选取控件之后，在显示区域内自由拖拽到合适的位置。拖拽完毕控件固定之后，控件布局参数编辑区域的x，y的值也随之自动改变。还可以在布局参数编辑区域手动设置各个参数。
最后，要定义生成的布局配置文件的格式和内容，本发明实施例中定义的布局配置文件的格式如下：
1#39#34#1#0#0#
2#252#41#2#0#0#
3#369#40#3#0#0#20：30
4#479#40#5#0#0#2345
5#265#183#6#0#0#即时功率
6#413#183#7#0#0#7890
格式说明如下：
每一行表示一个控件；
第1个#之前的数字，代表这个控件的种类类型，即是什么类型的控件。其值只能为1到6的数字，分别对应上述6类控件；
第2个#之前的数字，代表这个控件的横坐标值，也就是图2中的x，表示控件的左边相对于显示区域左边界限的垂直像素数值；
第3个#之前的数字，代表这个控件的纵坐标值，也就是图2中的y，表示控件的顶边相对于显示区域顶边界限的垂直像素数值；
第4个#之前的数字，代表这个控件的编号，对所有控件统一编号，不能有重复。对于图片控件和图片按钮控件，其对应显示的图片的名字命名规则为xxxyyy.png，其中xxx就是控件的编号，yyy是控件对应的数组内数据元素的值，即控件编号为xxx的图片控件，数组内的第xxx个数据元素的值如果为1，则显示xxx001.png图片，值为2，则显示xxx002.png图片，以此类推。对于图片按钮控件，按下图片按钮之后，可以把数组内的第xxx个数据元素的内容由1变为0，或者由0变为1，从而显示不同的图片。对于其它类型的控件，用户必须手工输入各自的控件编号；
第5个#之前的数字，保留未用；
第6个#之前的数字，保留未用；
第6个#之后的，是控件上的字符串，实际上只对文字标签类控件有效，因为数字时钟类控件，数据按钮控件，状态数值文字控件显示的内容是根据对应的数组内数据元素值来显示的，不需要使用这里的字符串。
步骤103，布局配置文件和图片控件、图片按钮控件对应显示的图片文件可以直接导入到终端显示设备中；也可以在终端显示设备中设置要下载的地址，由终端显示设备下载回来这些文件到本地的非易失性存储器中。
步骤104，终端显示设备根据布局配置文件和控件对应显示的图片文件生成各个控件。在本发明实施例中，终端显示设备是android系统设备，因此，以下均以android为例。终端显示设备中的andorid应用程序，读取布局配置文件，每读一行，就是一个控件，分析这个控件的种类，分别生成不同的控件。布局方式使用绝对布局AbsoluteLayout。生成控件之后，把读取到的参数，设置到控件的属性之中，包括横、纵坐标，文字内容等，另外还有一个重要的参数是控件的编号，在本实施例中，把这个编号保存在android控件的tag信息中，作为另外一个解决方式，编号还可以保存隐藏在android控件的其它信息中，比如id信息中等。这样，当这个控件被激活或者显示的时候，会先读取控件的tag信息，也就是控件的编号，再根据编号得到控件对应的数组内元素数据的数值，根据数值来做出相应的动作或者显示不同的形态。
步骤105，在终端显示设备的应用程序中，要在静态存储单元中给每一个控件准备一个数据空间，所有的这些数据空间组成一个数组，控件的编号就是数组内数据元素的序号，应用程序根据控件的编号找到对应的数据，根据对应的数据来显示不同的控件形态或者执行不同的动作。
首先，应用程序要准备好各类控件的显示函数，对于图片控件和图片按钮控件，根据控件的编号和控件对应的数组内数据元素数值，来找到对应的图片，并显示出来。这两类控件在实际处理中都是图片按钮控件，只是图片控件不设置监听事件，不响应用户操作；而图片按钮控件要设置监听事件。被导入到终端显示设备里的图片文件的文件名格式是xxxyyy.png,其中xxx是控件的编号，yyy是编号对应的数组内数据元素的数值号，同一个编号的控件，可以对应多个不同的图片文件，用来显示不同的形态，这些不同的图片文件，以不同的yyy来区分。使用setBackgroundDrawable的方法，把图片设置为当前控件的背景，即可显示出相应的图片。在使用的时候，要注意数值的范围不要超过所有yyy的定义范围。图片控件只能根据对应数组内元素的数值来显示不同的控件，而图片按钮控件，能接收用户的激活操作，用户按下或者触摸之后，可以改变对应的数组内数据元素的数值，比如由0改成1或者由1改成0等等，从而更改显示的图片，并根据数值作出相应的动作。
对于数字时钟控件，实质上是一个按钮控件，这个控件首先对应的数组元素数值前1个字节是小时，后1个字节是分钟，在显示的时候，把小时和分钟显示成按钮的文字即可，中间加上：号。当用户点击数字时钟的时候，可以设置时钟的时间，这时要调用设置时间的TimePickerDialog控件，调用完毕之后，要修改控件对应的数组元素数值，并更新界面显示。
控制数据控件，实质也是一个按钮控件，首先根据控件编号把对应数组内元素的数值以字符串的形式显示出来，点击这个控件，会弹出AlertDialog对话框，可以修改这个数值，同时保存到对应的数组内元素数值，并作出相应的控制动作。
文字标签控件，就是在固定的位置显示一个固定的文本，文本的内容就是布局配置文件中控件的字符串，这个文字标签的内容在控件生成的时候，就已经把控件要显示的内容设置好了，以后无需更改，也不会响应用户的操作。
状态数字控件，首先根据控件编号把对应数组内元素的数值以字符串的形式显示出来，每当数值改变的时候，应该刷新该控件的显示。只显示数值，不响应用户的操作。
以上的描述仅仅涉及本发明的一些具体实施方式，对于本领域的普通技术人员基于本发明的精神所做的替换或改进均应为本发明的保护范围所涵盖，本发明的保护范围应以权利要求书为准。