Summary of the invention
In order to solve the problem, the technical matters that the present invention solves there are provided a kind of method and system of dynamically generating user interfaces of What You See Is What You Get, revises flexibly with more convenient and add various layout.
The invention provides a kind of method of dynamically generating user interfaces of What You See Is What You Get, comprise,
The user-interface design instrument of What You See Is What You Get is used for adding and freely pulling various controls to suitable position, viewing area, arranges the layout parameter of control, arranges the numbering of control, and generate layout configurations file;
The user-interface design instrument of described What You See Is What You Get, when interpolation picture category control and picture buttons class control, all will choose the picture of a picture file as this control correspondence display from this locality;
The picture file of described layout configurations file and the display of described control correspondence is imported into or downloads in terminal presentation facility;
Described terminal presentation facility resolves described layout configurations file, according to the picture file of the layout parameter of each control, numbering and control correspondence display, dynamically generates each control and is also shown on the screen of described terminal presentation facility.
In the method for the dynamically generating user interfaces of above-mentioned What You See Is What You Get, wherein, the user-interface design instrument of described What You See Is What You Get, according to the size of described display terminal resolution, sets being shown and can being pulled the size in region of described various controls.
The method of the dynamically generating user interfaces of above-mentioned What You See Is What You Get, wherein, user can arrange the download address of the picture file downloading described layout configurations file and the display of described control correspondence on described terminal presentation facility.
The method of the dynamically generating user interfaces of above-mentioned What You See Is What You Get, wherein, described terminal presentation facility is when dynamically generating each control, the numbering of described control is arranged on (such as in Android system, the attribute that can arrange comprises tag information position and the id information position of android control) in the tag attributes of control.
Present invention also offers a kind of system of dynamically generating user interfaces of What You See Is What You Get, comprise user-interface design instrument and the terminal presentation facility of What You See Is What You Get, wherein,
The user-interface design instrument of described What You See Is What You Get comprises layout configurations files loading unit, control adds edit cell, layout configurations file generating unit; Described terminal presentation facility comprise resolution unit, dynamic control creation and display unit, control event response processing unit;
Described layout configurations files loading unit, for the layout configurations file preserved before opening, the control quantity in Study document and layout parameter are also presented at all controls the layout areas of the user-interface design instrument of described What You See Is What You Get;
Described control adds edit cell, for adding and editor's various controls, pulls various controls to suitable position;
Described layout configurations file generating unit, for integrating all controls generation layout configurations file;
Described resolution unit, for reading layout configurations file and resolve;
Described dynamic control creation display unit, for the analysis result according to described resolution unit, dynamically generate each control and also show each control on the screen of described terminal presentation facility;
Described control event response processing unit, the event for the generation to control is monitored, responds and is processed and upgrades display.
The system of the dynamically generating user interfaces of above-mentioned What You See Is What You Get, wherein, the user-interface design instrument of described What You See Is What You Get, the control kind that can add comprises picture, picture buttons, digital dock, control data, word tag, status number.
The system of the dynamically generating user interfaces of above-mentioned What You See Is What You Get, wherein, the user-interface design instrument of described What You See Is What You Get, the layout parameter of control can be set, comprise control horizontal ordinate, control ordinate, the text that control shows, also comprises the numbering of control.
The system of the dynamically generating user interfaces of above-mentioned What You See Is What You Get, wherein, described layout configurations file, comprises the numbering of control, control type, control horizontal ordinate, control ordinate, the text that control shows.
The system of the dynamically generating user interfaces of above-mentioned What You See Is What You Get, wherein, described control horizontal ordinate refers to the horizontal linear lattice number of the present position of control to screen reference initial point; Described control ordinate refers to the longitudinal linear lattice number of the present position of control to screen reference initial point.
The system of the dynamically generating user interfaces of above-mentioned What You See Is What You Get, wherein, described terminal presentation facility also comprises static storage cell, described static storage cell distributes a data space can to each control, the data that all controls are corresponding form an array, and the numbering of described control is equal to the sequence number of data element in array.
The method and system of the dynamically generating user interfaces of above-mentioned What You See Is What You Get, wherein, described terminal presentation facility also comprises non-volatile memory cells, and the picture file of described layout configurations file and the display of control correspondence, is all placed in non-volatile memory cells.
The method of the dynamically generating user interfaces of above-mentioned What You See Is What You Get, wherein, the picture of described control correspondence display, the name numerical designation of described picture file, the content of its name comprises numbering and a digital number of this control; The control of same numbering, can corresponding multiple picture file, distinguishes with different digital numbers.
The method and system of the dynamically generating user interfaces of above-mentioned What You See Is What You Get, wherein, described terminal presentation facility obtains the numbering of control from the tag attributes of control, finds data element numerical value in corresponding described array according to numbering; If control is described picture control or described picture buttons control, the picture name of the described correspondence display of control will be found according to the numerical value of data element in the numbering of described control and described array, the first half of described picture name is the numbering of control, the latter half of described picture name is data element numerical value in described array, thus demonstrates correct picture; If control is described digital dock, control data, status number, data element numerical value in the described array of correspondence will be shown; If control be described button image, described digital dock, described control data and control by user's click, touch etc., just directly can revise data element numerical value in corresponding described array, more new user interface display, performs corresponding command action simultaneously.
The beneficial effect of technical scheme of the present invention is: can add all kinds of display control by simple, realize carrying out freely pulling to all kinds of display control putting location and layout, and each attribute and the numbering of control are accurately set, the layout configurations file generated is imported terminal presentation facility and demonstrates user interface; The user interface final utilization personnel being ignorant of any programming technique also convenient, flexiblely being designed fast suit the requirements and without the need to changing application source code.
Embodiment
Below in conjunction with the drawings and specific embodiments, technical scheme of the present invention is described in further detail.
The present invention can be used in numerous general or special purpose computing system environment or configuration, such as: personal computer, server computer, handheld device or portable set, laptop device, multicomputer system, system based on microprocessor, Set Top Box, programmable consumer-elcetronics devices, network PC, small-size computer, mainframe computer, comprise the distributed computer environment etc. of above any system or equipment.
The method example process flow diagram of What You See Is What You Get dynamically generating user interfaces of the present invention, as shown in Figure 1, comprising:
Step 101, first will carry out a user-interface design instrument of exploitation and composition according to the feature of system user interface.
Prepare all control kinds that will use in user interface, according to control kind feature separately, design the display form, printed words etc. of control on instrument, the control kind later may used for not using in user interface, also can do into, adaptability in the future can be wider.In the embodiment of the present invention, the control that can add has picture, picture buttons, digital dock, control data, word tag, and status number is totally 6 classes.
Have one to open and the function of the layout configurations file (in the user-interface design instrument of What You See Is What You Get in embodiments of the present invention, being referred to as project file) preserved before showing, benefit facilitates user to continue editor from the place that last time had not edited.
This instrument is also wanted according to the length of terminal presentation facility screen and wide dot array data, to arrange the size of control viewing area, to make the screen of the more identical and terminal presentation facility in viewing area.
Will according to the feature of control above system user interface, the layout parameter of the control that the instrument of deciding will set, for useless layout parameter, can set, to simplify the operation interface of user-interface design instrument.In the embodiment of the present invention, the control layout parameter that can arrange has control horizontal ordinate, and (namely x), (namely y), retention parameter, the text that control shows, also comprises the numbering of control to control ordinate.As for the kind of control, when interpolation control, just determine, can not by editor's change.
As shown in Figure 2, wherein 201 is control viewing areas to the user-interface design instrument finally completed, and is also the region that control can pull, and control can only drag and show within the scope of this.202 is the path and names showing the project file opened.Opening engineering, preserve engineering, add picture, add picture buttons, add digital dock, adding data, add word, status number these 8 is all button.Opening engineering is layout configurations file in order to preserve before opening, and preserving engineering is that current all control parameters are kept in topology file again.203 is screen coordinate system reference origin, and it is horizontal ordinate x that level extends to the right, and extending straight down is ordinate y.204 is the longitudinal scroll bars in viewing area, and 205 is viewing area horizontal scroll bars, and when the screen size of terminal device is greater than the display area size of user-interface design instrument time, these 2 scroll bars that can slide are to show more area.
Step 102, uses user-interface design instrument carry out design user interface and generate layout configurations file.For the new control added, initial position is all in the position, the upper left corner 203 of viewing area, and user is freely dragged to suitable position after can choosing control with mouse in viewing area.Pull complete control fixing after, the x of control layout parameter editing area, the value of y also changes thereupon automatically.At layout parameter editing area, manually parameters can also be set.
Finally, define the format and content of the layout configurations file of generation, the form of the layout configurations file defined in the embodiment of the present invention is as follows:
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# real-time power
6#413#183#7#0#0#7890
Format description is as follows:
Every a line represents a control;
Numeral before 1st #, represents the genre types of this control, is namely the control of what type.Its value can only be the numeral of 1 to 6, respectively corresponding above-mentioned 6 class controls;
Numeral before 2nd #, represents the abscissa value of this control, the x namely in Fig. 2, represents the vertical pixel numerical value of the left side relative to the left side, viewing area boundary of control;
Numeral before 3rd #, represents the ordinate value of this control, the y namely in Fig. 2, represents the vertical pixel numerical value of top margin relative to viewing area top margin boundary of control;
Numeral before 4th #, represents the numbering of this control, to all control Unified numbers, can not have repetition.For picture control and picture buttons control, the naming rule of the picture of its corresponding display is xxxyyy.png, wherein xxx is exactly the numbering of control, yyy is the value of data element in array that control is corresponding, and namely control is numbered the picture control of xxx, if the value of the xth xx in array data element is 1, then show xxx001.png picture, value is 2, then show xxx002.png picture, by that analogy.For picture buttons control, after pressing picture buttons, the content of the data element of the xth xx in array can be become 0 from 1, or become 1 from 0, thus show different pictures.For the control of other type, user must input respective control numbering by hand;
Numeral before 5th #, retains and does not use;
Numeral before 6th #, retains and does not use;
After 6th #, be the character string on control, in fact only effective to word tag class control, because digital dock class control, data button control, the content that status values word control shows is that in the array according to correspondence, data element values shows, and does not need the character string used here.
Step 103, the picture file that layout configurations file and picture control, picture buttons control correspondence show can directly import in terminal presentation facility; Also can the address that will download be set in terminal presentation facility, downloads these files in the nonvolatile memory of this locality by terminal presentation facility.
Step 104, terminal presentation facility generates each control according to the picture file of layout configurations file and the display of control correspondence.In embodiments of the present invention, terminal presentation facility is Android system equipment, therefore, below all for android.Andorid application program in terminal presentation facility, reads layout configurations file, often reads a line, be exactly a control, analyze the kind of this control, generate different controls respectively.Layout type uses absolute layout AbsoluteLayout.After generating control, the parameter read, among the attribute being set to control, comprise horizontal stroke, ordinate, word content etc., an important parameter is also had to be the numbering of control in addition, in the present embodiment, this numbering is kept in the tag information of android control, as another one settling mode, numbering can also be preserved in the out of Memory being hidden in android control, and such as id information is medium.Like this, when this control is activated or shows time, the tag information of the first read control of meeting, the namely numbering of control, obtain the numerical value of array interior element data corresponding to control again according to numbering, make corresponding action according to numerical value or show different forms.
Step 105, in the application program of terminal presentation facility, to a data space be prepared in static storage cell each control, these all data spaces form an array, the numbering of control is exactly the sequence number of data element in array, application program finds corresponding data according to the numbering of control, shows different control forms or perform different actions according to the data of correspondence.
First, application program will get out the explicit function of various controls, for picture control and picture buttons control, according to data element numerical value in the numbering of control and array corresponding to control, finds corresponding picture, and shows.This two classes control is all picture buttons control in actual treatment, and just picture control does not arrange monitoring event, does not respond user operation; And picture buttons control will arrange monitoring event.The file name formats being directed to the picture file in terminal presentation facility is xxxyyy.png, wherein xxx is the numbering of control, yyy is the numerical value number of numbering data element in corresponding array, the control of same numbering, can corresponding multiple different picture file, be used for showing different forms, these different picture files, distinguish with different yyy.Use the method for setBackgroundDrawable, picture is set to the background of current control, corresponding picture can be demonstrated.When in use, notice that the scope of numerical value does not exceed the range of definition of all yyy.Picture control can only show different controls according to the numerical value of corresponding array interior element, and picture buttons control, the activation manipulation of user can be received, after user presses or touches, the numerical value of data element in corresponding array can be changed, such as make 1 or make 0 etc. into by 1 into by 0, thus the picture of change display, and make corresponding action according to numerical value.
For digital dock control, be in fact a button control, front 1 byte of array element numerical value that this control is first corresponding is hour, rear 1 byte is minute, when display, hour and minute to be shown as the word of button, centre adds: number.When user's clicks word clock time, the time of clock can be set, at this moment will call the TimePickerDialog control of setup times, call complete after, the array element numerical value that control is corresponding be revised, and upgrade interface display.
Control data control, essence is also a button control, first according to control numbering, the numerical value of corresponding array interior element is shown with the form of character string, click this control, AlertDialog dialog box can be ejected, this numerical value can be revised, be saved in corresponding array interior element numerical value simultaneously, and make corresponding control action.
Word tag control, be exactly at the fixing text of fixing position display one, the content of text is exactly the character string of control in layout configurations file, the content of this word tag is when control generates, curriculum offering with regard to control having been shown is good, later without the need to change, the operation of user also can not be responded.
Status number control, first shows the numerical value of corresponding array interior element according to control numbering, whenever numerical value changes time, should refresh the display of this control with the form of character string.Only show numerical value, do not respond the operation of user.
Above description only relates to embodiments more of the present invention; the replacement done based on spirit of the present invention for those of ordinary skill in the art or improve and all should be protection scope of the present invention and contained, protection scope of the present invention should be as the criterion with claims.