JP2008269554A - Source code generating device - Google Patents

Abstract

<P>PROBLEM TO BE SOLVED: To improve the efficiency in software development, modification, and maintenance by efficiently designing a user interface with designs which differ among a plurality of execution environments and efficiently outputting source code and GUI display data from the editing result, in a source code generating device for generating source code and GUI display data for displaying a GUI. <P>SOLUTION: Positions, sizes, component attributes, and event actions which differ among execution environments are managed for each of user interface components and are allowed to be independently edited. With this configuration, pieces of information which vary according to execution environments and pieces of information common to execution environments are edited, and pieces of source code and pieces of GUI display data for a plurality of execution environments are generated. <P>COPYRIGHT: (C)2009,JPO&INPIT

Description

  The present invention relates to a source code generation device that generates a source code of a program to be executed by a computer mounted on a mobile phone or the like, and in particular, edits a screen design corresponding to each of a plurality of different execution environments of a computer, and displays GUI display data. And a source code generation device for generating a source code for displaying a GUI display screen using the GUI display data.

2. Description of the Related Art Conventionally, many graphical user interface (GUI) libraries have been developed and provided for constructing a screen as a combination of standard user interface parts in order to efficiently and universally create a user interface part in program development work. .
As the GUI library operation method, the display contents are statically determined by arguments (parameters) when the GUI library is called from the program, and the GUI settings are saved during the operation of the program executing the GUI library. Some GUI libraries read data files called resource files and the like to dynamically determine display contents at the time of execution. There is also a GUI library that employs both formats simultaneously.

In the GUI library that statically sets the display contents, the setting values related to the GUI are described in the source code of the calling source program. In the GUI library that dynamically sets the display contents, the setting values related to the GUI are recorded in the resource file. .
Furthermore, in order to improve the productivity of the display screen development work in the program using these GUI libraries, the user interface portion is arranged by arranging GUI parts on the screen while previewing the actual GUI display image. GUI design development tools for designing are used.
The GUI design development tool automatically outputs the source code of the program that calls the library from the editing result and the resource file read by the library at the time of execution, and reflects the edited contents on the screen display of the program.

  In a program development project, the screen display environment is often different depending on the base hardware, operating system, execution platform, setting value at the time of execution, and the like. For example, when the same program is executed on hardware with different screen sizes, when the version of the GUI library that is the execution platform or the presence or absence of optional functions is different, or when the display function is changed according to user settings Etc.

In the case of developing a program corresponding to such various display environments, conventionally, it has been necessary to create a plurality of GUI designs for each environment on one screen. This is because if the screen size of the hardware is different, it is necessary to change the user interface components in a narrow range, set it to a small size, or change the displayed message to a short sentence when the screen size is small. .
Similarly, if vertical and horizontal display is required depending on how the hardware is configured even if the screen size is the same, it is necessary to re-lay out each part according to the vertical or horizontal screen, and the number of screens is large. Programs and programs that display complex screens have been a very heavy burden.

  For example, in a cellular phone 3101 having a display screen as shown in FIG. 31, there is a model in which the display screen is rotated in the horizontal direction as shown in FIG. 32 so that the screen can be used in both the vertical and horizontal directions. In the mobile phone 3101 whose screen changes in this way, both vertical and horizontal screen designs are required. These screens have the same components, such as a photo and a send button, but the positions and sizes of the components differ depending on the direction of the screen. As described above, even when there are many common parts in a plurality of screens, the conventional screen design method needs to create a design for each screen for each execution environment.

  In some cases, some operations must be changed depending on the execution environment. For example, in a program in which the input focus is moved by a direction key between user interface components arranged on the screen, the focus is often moved according to a rule such as upper left to lower right. At this time, in a program that changes the arrangement of components according to the vertical and horizontal screen directions, the order of focus movement must be changed in order to unify operability. Even in such a case, it is necessary to prepare a process for controlling the focus in accordance with the arrangement state of the components, which requires complicated processing logic.

  In order to deal with such a problem, some high-performance GUI libraries automatically recalculate position information and rearrange parts when the screen size setting is changed. These are not only fixed values such as (x, y) coordinates, but also the function to specify the position of the part by the distance from the left edge of the screen, the relative position from a specific part, etc., and the size of the part as a percentage of the screen size It has a function that can be specified with. In this case, even when executed with different screen sizes, the position of the component is automatically changed, and a single GUI design setting value corresponds to various screen sizes.

In program development, GUI design editing often proceeds while actually confirming the operating state of the program. By executing the program in an actual environment or on a virtual machine called a simulator or an emulator, the editing result of the GUI design is confirmed.
By combining a GUI design development tool, a library having a component rearrangement function, and a program execution confirmation environment, it is possible to develop a GUI design while confirming display in a plurality of screen layout states.
By switching the setting of the execution environment or switching the platform of the execution environment, one program can be executed in a plurality of environments, so that the GUI design can be edited while switching the operation status in each execution environment. Then, from the editing result, the source code for calling the GUI library and the GUI display data are output, so that the development work can be advanced efficiently.

  GUI display data refers to GUI data such as XML data, binary data, text data, etc. that are used to place display components at runtime, set attributes such as colors, characters, and images, and determine event operations. Data other than source code that includes display control information.

  As an example of such a known document, a GUI display program capable of automatically changing the position and size of a display component and layout information defined in a format file are combined to enable automatic GUI layout as described below. There exists patent document 1 etc.

Japanese Patent Laid-Open No. 10-228372

  In GUI design development of programs that use GUI libraries, in order to develop GUI designs that can be used in common in multiple execution environments, create multiple screen designs for the number of environments, or create libraries that support automatic relocation. Need to use. In a program that performs different processing depending on the execution environment, it is necessary to create a logic that determines the environment and performs separate processing.

In the case of creating GUI designs for the number of execution environments, there is a problem that not only the effort for GUI design creation is increased many times, but also a great effort is required for changing the GUI design.
Even on a screen having the same function as the same user interface component, a large number of GUI designs must be performed only by changing the position and size of the user interface component. Source code and GUI display data generated from the design result are The number of execution environments is also required to confirm that it works as expected.

In addition, in the operation of adding a new part to the screen, it is necessary to perform an additional operation for a plurality of GUI designs and appropriately manage them.
Since multiple GUI design information showing the same screen is often not linked on the tool, it must be managed manually by screen names and comments, etc., and maintenance and enhancement efficiency decreases, and mistakes are made. There was a problem that it was likely to occur.

In the method using the GUI library corresponding to the automatic rearrangement, there is a problem that only an arrangement method that can be set in the GUI library can be selected.
For example, in the case of using a GUI library in which the horizontal size of the user interface component can be set in two ways of “fixed value” or “ratio to the screen width”, other than programs that can be set to a fixed proportion of horizontal size in all execution environments I can not cope. For example, when an execution environment with a screen width of 200 pixels to 1600 pixels is assumed, on a screen that is larger than a certain size, or on the contrary, a small screen, on the other hand, a certain percentage of the width is too large and margins are generated. Problem that cannot display all information.
Normally, as a process corresponding to a special screen size, a process such as a fixed value is added when the screen size exceeds a certain range, but since source code that implements a process to switch between a fixed value and a variable value is required, There is a problem that the screen design and the source code cannot be associated with each other on the tool, and complicated maintenance is required depending on the size of the part and the pattern of the screen.

The same applies to the case where processing is switched according to the execution environment. Since the GUI design tool and the source code are not automatically associated with each other, it is necessary to manually manage the association between the execution environment and the processing logic based on the specification or the comment of the source code.
In addition, when parts are added or the screen size is changed, a large amount of work is required to identify the scope of impact associated with the screen design change and make appropriate source code corrections. It has become a problem that the efficiency of.

  An object of the present invention is to efficiently design a user interface having a different design for each of a plurality of execution environments in consideration of the above problems, and to display GUI display data and source code that are different for each execution environment from the design result. Is provided, and a source code generation apparatus capable of improving the efficiency of development, correction, and maintenance work of a program including GUI display data is provided.

In order to achieve the above object, a source code generation device of the present invention is a source code generation device for generating GUI display data for displaying a source code of a program to be executed by a computer and a user interface component on a display screen. ,
Storage means for independently editing component element information such as a position, size, component attribute, and event action that are different for each execution environment for each user interface component, and storing the information in association with a plurality of execution environment information; Source code for generating and outputting user interface component GUI display data corresponding to the execution environment specified based on the stored component element information and source code for displaying the user interface component using the GUI display data And a GUI display data generation means.
In addition, a means for previewing a user interface component on an editing screen by using GUI display data is provided.
Further, according to the execution environment, there is a means for excluding some user interface components from the output target of the source code or GUI display data.

According to the source code generation device of the present invention, there are the following effects.
(1) Component element information such as a plurality of positions, attributes, and event operations for one screen design when there are a plurality of execution environments that are the operation targets of the source code and GUI display data output from the source code generation device. Can be specified and edited for each execution environment to edit and generate the source code and GUI display data of the program having the optimum screen design for each execution environment.
(2) In GUI design development of a program, the design results and event operations corresponding to multiple execution environments on a single screen are previewed and confirmed on the source code generator at the time of design, so that the program is actually operated. Can reduce the work required for confirmation.
(3) Among some execution environments, when some user interface parts are unnecessary in a specific environment, a GUI design excluding these is designed, and by generating source code or GUI display data, It is possible to automatically perform processing description necessary for control of user interface components and management linked with GUI design.

Hereinafter, an embodiment of a source code generation device that applies a GUI design corresponding to a plurality of execution environments to which the present invention is applied will be described.
FIG. 1 is a system configuration diagram showing an example of an embodiment of the present invention.
The source code generation device includes a processing device 1, an input device 2, a display device 3, a GUI design information file 4, a resource file 5, a plurality of material data files 6, a source file 7, a GUI display data file 8, a memory 9, and a CPU 10. The input device 2 includes a key input device 21 and a pointing input device 22, and a source code generation program 91 and an operating system 92 are executed on the memory 9.

FIG. 2 is a block diagram showing functions, tables, and processing target data of the source code generation program 91.
The source code generation program 91 includes a GUI editing function 101, a component attribute editing function 102, an event operation editing function 103, an execution environment selection function 104, a user interface component providing function 105, a resource management function 106, and a GUI design. A GUI design information file 4 that records GUI design information, and includes information on an information file input / output function 111, a resource file input / output function 112, a source code generation function 113, and a GUI display data generation function 114 A resource file 5 that manages user data, a plurality of material data files 6 that record material data, which are images and character strings that are set in user interface components, and existing design information that has been developed using conventional technology Design information file 99, A screen table 201 for managing information in units of screens read from the UI design information file 4, and a component table for managing component element information such as positions, attributes, and event actions of user interface components read from the GUI design information file 4. 202, an environment table 203 for managing execution environment information read from the GUI design information file 4, a prototype table 204 for managing types and prototype information of user interface parts registered in advance, and a resource file 5. A resource table 205 that manages information on the material data, a material table 206 that reads the contents of a plurality of material data files 6, a plurality of preview screens 301 that combine GUI design results as visual display result images, Source code A function 113 and a GUI display data generation function 114, the result information 302, the source code 303 generated from the GUI design result, and the GUI display data 304 generated from the GUI design result. The source code 303 is output to the source file 7 by 113, and the GUI display data 304 is output to the GUI display data file 8 by the GUI display data generation function 114.
Further, the contents of the screen table 201 and the parts table 202 are output to the GUI design information file 4 and the contents of the resource table 205 are output to the resource file 5 as data storage processing.

An example of a screen displayed on the display device of the source code generation device of this embodiment is shown in FIG.
The screen 50a of this apparatus includes a component providing window 51a, a GUI editing window 52a, an event editing window 53a, an execution environment selection window 54a, a component attribute display window 55a, and a resource management window 56a. A new screen creation button is provided as part of the screen 50a. 57a and a source generation button 58a are displayed.
Also, preview images of user interface components 521a, 522a, and 523a are displayed in the GUI editing window 52a.
In FIG. 2, among the data generated during the operation of the source code generation device, data generated on the memory 9 is indicated by 40 and data existing as a file is indicated by 41. This is based on the assumption of the implementation in the example, and the arrangement type of the memory and the file is not limited to the above.

FIGS. 4 and 5 are diagrams showing examples of the environment table 203 and the parts table 202 and the relationship between the entries in the respective tables. FIG. 4 shows the state before the new execution environment data is added by reference numerals 203a and 202a. FIG. 5 shows the state after the new execution environment data is added by reference numerals 203b and 202b.
The environment table 203a holds an entry for each execution environment such as VGA and QVGA, and records information such as the screen size, the number of colors, and unique events related to the execution environment.
The component table 202a holds an entry for each GUI component arranged on the screen such as a button or text, and each entry holds a subentry corresponding to the execution environment held in the environment table 20a. Each sub-entry records information depending on the environment, such as the size and position of the component, among the information related to the component.
In FIG. 4 and FIG. 5, an entry with a circle represents an entry of the current execution environment (execution environment selected in the execution environment selection window).

FIG. 6 shows an example of the screen table 201. The screen table 201 holds an entry for each screen, such as a name input screen, and records information that does not depend on the execution environment among GUI components in the screen, such as a parent-child relationship between components arranged on the screen.
In FIG. 6, ○ mark and ◎ mark indicate the selected state of the GUI component arranged on the screen (referred to as “current screen”) displayed in the GUI edit window 52a among the entries in the screen table 201. Represents a thing.

FIG. 7 shows an example of the prototype table 204. In general, a GUI component has various attributes such as the thickness of a frame line and a font of a display character. The attribute of a GUI component is determined by the type of component such as a button or text, and the value of each attribute is determined for each instance of each component.
The prototype table 204 holds an entry for each type of GUI component, and records attributes and default values of various types of components.
Note that the attribute value of the instance of each component is recorded in the component table 202.

  FIG. 8 shows an example of the resource table 205. A resource is data constituting a GUI screen, such as a character string or an image. The resource table 205 holds an entry for each resource, and holds an identifier (resource ID) for specifying the resource, a data type (MIME TYPE) such as a character string and an image, its value, and the like. Specifically, the character string itself is stored for the character string type, and the path of the file storing the image is stored for the image type.

  FIG. 9 shows an example of the material table 206. The material is multimedia content such as an image, sound, and moving image in the data. The material table 206 holds an entry for each material, and records an identifier for specifying the material, a path of a file storing an image, and the like.

The outline of the processing of the source code generation device according to the above configuration is as follows.
The source code generation function 113 reads the GUI design information file 4 using the GUI design information file input / output function 111 according to the user's specification at the start of editing, and sets the contents in the screen table 201, the parts table 202, and the environment table 203. The resource file 5 and the plurality of material data files 6 are read using the resource file input / output function 112, and the contents are set in the resource table 205 and the material table 206.
Further, the prototype table 204 is generated from the contents programmed in advance. After the table preparation is completed, a preview screen 301 showing the display state of the parts arranged on the screen is generated from the contents of the screen table 201, the parts table 202, the resource table 205, and the material table 206, and the initial GUI editing window 52a It is displayed as a screen, the contents of the resource table are set in the resource management window 56a, the contents of the part attribute display window 55a and the event editing window 53a are cleared and initialized, and the contents of the prototype table 204 are displayed in the part providing window 51a. Then, the contents of the environment table 203 are displayed on the execution environment selection window 54a to enter a user operation waiting state.

Note that the source code generation apparatus of the present embodiment can also use an existing design information file 99 which is a design information file created by a conventional technique. That is, in the GUI design information of the present invention, as shown in the component table 202 of FIG. 4, the layout information of each GUI component is recorded for each execution environment. On the other hand, in the prior art, layout information for one execution environment is recorded in one GUI design information. An existing design information file 99 can be used by reading and merging a plurality of conventional GUI design information files 99 and converting them into a design information file according to the present invention.
FIG. 10 shows a data flow at the time of activation in the source code generation device.

When the GUI design is to be edited next while waiting for a user operation, the execution environment to be edited is selected from the execution environment selection function 104 and a new screen is added from the user interface component provision function 105. .
As a result of the screen addition operation, a new entry is added to the screen table 201, and a preview image of a blank screen having no user interface component is displayed in the GUI editing window 52a.

Next, necessary user interface components are selected from the user interface component providing window 51a for the blank area displayed in the GUI editing window 52a, and added to the GUI editing window 52a by a drag and drop operation.
As a result of adding the user interface component, a new entry is added to the component table 202, and the image graphic of the user interface component is added to the preview image of the GUI editing function 101.

Also, the entry of the part table 202 stores a plurality of pieces of information such as the position, size, attribute value, and event action of the corresponding user interface part for the number of environments set in the environment table 203. For generation, information on the position, size, attribute value, and event action of the execution environment designated in the execution environment selection window 54a at that time is used.
Examples of the environment table 203 and the parts table 202 and the relationship between the attribute information in the environment table entry and the part table entry are as shown in FIG.

A user interface component can be selected by operating the pointing input device 22 constituting the input device 2, and the position and size can be changed. The changed position information and size information of the user interface component are stored in a corresponding entry in the component table 22.
When creating a screen composed of a plurality of user interface components, the operation of adding components from the component providing window 51a is repeated as many times as necessary.

When editing the attribute information of the user interface component, the user interface component displayed in the GUI editing window 52a is selected by the pointing input device 22. Then, the attribute information of the selected user interface component is displayed as a list in the component attribute display window 55a by the component attribute editing function 102.
When changing the setting value of the attribute of the user interface component, the new setting value is input by the key input device 21 or the new setting value is selected by the pointing input device 22.

The attribute value of the user interface component includes a virtual attribute value that specifies the operation of the source code generation device in addition to the setting value corresponding to the class and GUI display data provided in the GUI library on a one-to-one basis. It is. For example, an attribute value specifying whether or not to output to the source code is an internal parameter for controlling the operation of the source code generation function 113 or the GUI display data generation function 114, and when the source code generation is executed in a state set to ON. The processing of the corresponding user interface component is output to the source file or the GUI display data file, and control is not performed when it is OFF.
In addition to the source code output value, there are also attribute values that are not directly related to the setting value of the class in the GUI library, such as an attribute that specifies the presence / absence of event control and an attribute that specifies the source code file name. Recorded in entry on table 202

Information on material data such as character strings and images specified as attribute values of user interface parts is once registered in the resource table 205 and the material table 206 and then displayed in the part attribute display window 55a as an option of the part attribute editing function 102. Is displayed.
When registering the material data file 6 in the resource table 205, the resource management function 106 creates a new entry. When an add button is selected after inputting a new material data file or material character string, a new entry storing material data and resource attribute information (file type, etc.) is added to the resource table 205, and the material table 206 is selected. A new entry is created by reading the contents of the material data file 6.

The contents of the resource table 205 created in this way are displayed as a list of attribute value candidates of the component attribute editing function 102 in the component attribute display window 55a, and the operator of the source code generation device specifies with the pointing input device 22. Thus, the attribute specifying the material data file 6 set in the user interface component can be edited.
Setting values of user interface component attributes including material attributes are immediately reflected in the preview screen 301. FIG. 11 shows the process on the block diagram and the flow of data when editing the GUI design.

When editing an event operation of a user interface component, the user interface component to be edited is selected by the GUI editing function 101. Then, the event action information of the selected part is displayed in a list format in the event edit window 53a by the event action editing function 103, and the action for the event received by the user interface part is designated by the pointing input device 22 or the key input device 21. To do.
When the event operation information is changed, the event operation information is stored in the entry of the corresponding component table 202.

Depending on the execution environment information stored in the environment table 203, different contents can be displayed in the preview, GUI editing function, part attribute editing function, and event operation editing function.
For example, by registering an execution environment using a VGA (640x480 pixel) size LCD (liquid crystal display device) and an execution environment using a QVGA (320x240 pixel) size LCD, the size of the screen area of the GUI design editing window 52a can be reduced. Switching operation can be performed.

If the GUI design is edited for an execution environment that uses a color LCD and an execution environment that uses a monochrome LCD, a preview image is displayed in color when “Color LCD environment” is selected. When the “monochrome LCD” environment is selected, the preview image is displayed in black and white, so that a completely different preview is displayed even on a screen made up of the same parts, and the GUI is more realistically closer to the actual execution environment. You can edit the design.
Furthermore, even when the event that occurs differs depending on the environment, the event action editing function 103 can switch the contents of the event displayed on the event edit window 53a, thereby performing necessary and sufficient event action editing without waste.

When the position, size, attribute value, and event action of user interface components for a plurality of execution environments are set, the execution environment desired to be edited is selected by the execution environment selection function 104.
When the selection contents of the execution environment by the execution environment selection function 104 are changed, the source code generation apparatus uses the GUI editing function 101, the component attribute editing function 102, and the event operation editing function 103 to change the GUI editing window 52a and the component attribute display window 55a. All the contents displayed in the event editing window 53a are displayed again.

The preview image of the GUI editing window 52a is also redrawn based on information stored in the parts table 202 such as the position, size, attribute value, and event action corresponding to the newly selected execution environment. The contents are different from those before selecting the environment.
FIG. 12 shows an example of a state in which the operation screen in FIG. 3 is switched by switching the execution environment.
The user interface components 521a, 522a and 523a in FIG. 3 are arranged at different positions such as 521c, 522c and 523c in FIG.
The attribute information of the user interface component is also set separately from the attribute value 55a of 523a selected in FIG. 3 and the attribute information 55c of the same component 523c in FIG.
Further, after the execution environment selection function 104 changes the execution environment selection value, the value corresponding to the currently selected execution environment among the plurality of positions, sizes, attributes, and event operation information stored in the parts table 202 Therefore, setting values corresponding to other execution environments are protected without being affected by the editing operation.

The design information for “Environment 2” shown in FIG. 12 can be efficiently created based on the design information for “Environment 1” shown in FIG. That is, the environment is switched from “environment 1” to “environment 2” by operating the pointing device input device 22 in the execution environment selection window 54a of FIG.
Since the resolution of “Environment 2” is lower than that of “Environment 1”, the screen design in the GUI editing window 52a becomes inappropriate as shown in FIG. Therefore, an appropriate screen design shown in FIG. 12 can be created by adjusting the size and position of each GUI component in the GUI editing window 52a.
Unlike the prior art, information that does not depend on the environment, such as GUI components constituting the screen, is used in common, and only information that depends on the execution environment, such as the size and position of each GUI component, may be edited for each execution environment.

  As described above, the operator of the source code generation apparatus can easily change the selection value of the execution environment in the execution environment selection window 54a at any timing during the editing of the GUI design. Editing operations can be performed as if multiple screen designs were performed. FIG. 14 shows a flow of execution environment switching processing when an execution environment is selected.

Next, when adding an execution environment, an add button 541 is selected in the execution environment selection window 54a, and an entry 203c (FIG. 5) storing information on a new execution environment is added to the environment table 203b. At the same time, a set 202c of information such as the position, size, attribute, and event action of each entry in the parts table 202b (FIG. 5) is added and initialized in association with a new environment.
An example of data change when a new execution environment is added to the environment table 203 and the parts table 202 is shown in FIG.

The setting values of the GUI design edited in this way indicate a screen composed of the same component combination. In other words, since the GUI layout and settings such as position, size, attribute, and event action are different, the screen is different, and when adding or deleting user interface parts, the addition and deletion operations need only be performed once. That is, it is not necessary to repeat the addition or deletion operation for the number of execution environments.
Also, as described later, since one class and user interface component are assigned to one component, as many user code component classes as the number of execution environments are not generated in the memory in the generated source code. There is no need to manage and save these screens at runtime.
The same applies to deleting the execution environment. After deleting the target entry from the environment table 203, the setting corresponding to the environment to be deleted is determined from the position, size, attribute, and event action information of all entries in the parts table 202. Only one set of values is deleted.

When saving the edited result, the save button 521 arranged in the GUI edit window 52a is selected.
This source code generation device outputs the editing result related to the GUI design to the GUI design information file 4 in order to save the editing result of the operator in a secondary storage device such as a hard disk. Specifically, the contents of the screen table 201 and the parts table 202 are output to the GUI design information file 4 and the contents of the resource table 205 are output to the resource file 5 as data storage processing. At this time, if the position, size, attribute value, and event action of the user interface components for a plurality of execution environments are set, all the setting values for each execution environment are stored in the GUI design information file 4.

When generating source code or GUI display data from the edited contents of the GUI screen, the source generation execution button 58a arranged in the GUI editing device is selected. Then, the source code generation apparatus saves the contents of the screen table 201, the component table 202, the resource table 205, the material table 206, and the environment table 203 in which the results of the operator's GUI design are stored in the GUI design information file 4. . Further, the contents of the resource table 205 are stored in the resource file 5.
In the generation process of the source code or GUI display data, result information 302 indicating whether the process was successful or some error occurred during the process is stored in the memory 4, and the operation of the source code generation apparatus after the process is completed Message as a message.

The source code or GUI display data generated in this way includes a plurality of execution environment source codes and GUI display data registered in the environment table 203.
FIG. 15 shows the flow of source code generation processing in this source code generation device. An example of the generated source code is shown in FIG. 16, and an example of the generated GUI display data is shown in FIG.

FIG. 18 is a flowchart showing the processing of the main () function that executes the top level processing of the source code generation device.
First, the initialize function is activated to execute initial processing (step 1801). Thereafter, the process waits until a user operation occurs (step 1802). When a user operation occurs, the process branches according to the user operation.
It is determined whether the user operation is a click on the “add new screen” button 57a (step 1803). If so, the new_screen () function is activated to execute the new screen addition process (step 1804), and then a user operation occurs. Wait until.
It is determined whether the user operation is a drag operation of the component in the component providing window 51a (step 1805). If so, the new_component () function is activated to execute the component addition process (step 1806), and then a user operation occurs. Wait until.

It is determined whether the user operation is pressing of a part in the GUI editing window 52a (step 1807). If so, the handle_gui () function is activated to execute GUI editing processing (step 1808), and then waits until a user operation occurs. To do.
It is determined whether the user operation is a click in the component attribute display window 55a (step 1809). If so, the handle_property () function is activated to execute attribute editing processing (step 1810), and then waits until a user operation occurs. .
It is determined whether the user operation is a click in the event editing window 53a (step 1811). If so, the handle_action () function is activated to execute event editing processing (step 1812), and then waits until a user operation occurs. .
It is determined whether the user operation is a click in the resource management window 56a (step 1813). If so, the handle_resource () function is activated to execute resource editing processing (step 1814), and then waits until a user operation occurs.

It is determined whether the user operation is a click in the execution environment selection window 54a (step 1815). If so, after the handle_environment () function is activated to execute the execution environment editing process (step 1816), until the user operation occurs stand by.
It is determined whether the user operation is a click on the source generation button 58a (step 1817). If so, the generate_source () function is activated to execute the source generation process (step 1818), and then waits until a user operation occurs.
It is determined whether the user operation is an end operation (step 1819). If so, the process ends (step 1820). Otherwise, the process waits until a user operation occurs.

FIG. 19 is a flowchart showing the process of the initialize () function that executes the initial process.
First, the GUI design information file 4 is read, and the contents of the screen table 201, the parts table 202, and the environment table 203 are set (step 1901). The first entry screen of the screen table 201 is made current (step 1902), the first component entry of the current screen is selected (step 1903), and the execution environment of the first entry of the environment table 203 is made current (step 1904).
Next, the resource file 5 and the material data file 6 are read, and the contents of the resource table 205 and the material table 206 are set (step 1905). Based on the programmed processing, the contents of the prototype table 204 are set (step 1906), the redraw () function is activated to execute the drawing processing of the editing screen 50a in FIG. 3 (step 1907), and the processing ends. (Step 1908).

FIG. 20 is a flowchart showing the process of the new_screen () function that executes a new screen creation process.
First, a new entry is added to the screen table 201 (step 2001), and this entry is made the current screen (step 2002). Then, the redraw () function is activated to execute the drawing process of the editing screen 50a (step 2003), the process ends (step 2004).

FIG. 21 is a process flow of a new_component () function that executes a process of adding a component to the GUI edit window 52a.
First, the part dragged by the user from the part providing window 51a is arranged at the dragged position on the GUI editing window 52a (step 2101). It is determined whether another part already exists at the position after dragging (step 2102). If so, a parent-child relationship with the part as a parent is set in the screen table 201 (step 2103).
Next, an entry for the corresponding component is added to the component table 201 (attribute values such as position, size, color, etc. are set in the entry for the number of environments set in the environment table 203) (step 2104). Next, after the added part is selected (step 2105), the redraw () function is activated to execute the drawing process of the editing screen 50a (step 2106), and the process ends (step 2107).

FIG. 22 is a flowchart showing the process of the handle_gui () function that executes the GUI editing process.
First, it is determined whether the user operation is a click on a selected part (step 2201). Otherwise, the part clicked by the user is selected (step 2202), and the redraw () function is activated to start the editing screen 50a. The drawing process is executed (step 2207), and the process ends (step 2208).
If the selected part is clicked, it is determined whether the pressed position is at the four corners of the part (step 2203). If so, the part size is changed to the end position of the drag by assuming that the part is resized (step 2204). Otherwise, it is regarded as a movement operation of the component, and the component is moved to the drag end position (step 2205).
Thereafter, the new position and size are set in the corresponding entry in the parts table 202 (step 2206), the redraw () function is activated to execute the drawing process of the editing screen 50a (step 2207), and the process ends. (Step 2208).

FIG. 23 is a flowchart showing the processing of the function handle_property () function that executes attribute editing processing.
First, the user's key input value is set in the attribute value column clicked by the user (step 2301), and the attribute value of the entry in the parts table 202 corresponding to the selected part is changed to the key input value (step 2301). 2302). Next, the redraw () function is activated to execute the drawing process of the editing screen 50a (step 2303), and the process ends (step 2304).

FIG. 24 is a flowchart showing the processing of the function handle_action () function that executes event editing processing.
First, the user's key input value is set in the operation name column clicked by the user (step 2401), and the event operation of the entry in the component table 202 corresponding to the selected component is changed to the key input value (step). 2402). Next, the redraw () function is activated to execute the drawing process of the editing screen 50a (step 2403), and the process ends (step 2404).

FIG. 25 is a flowchart showing the processing of the handle_resource () function that executes resource editing processing.
First, it is determined whether the user operation is a click on the “new” button 561 (step 2501). If so, a new entry (content is blank) is added to the head of the resource management window 56a (step 2502). The content of the new entry is set according to the key input content (step 2503), and the process is terminated (step 2512).
It is determined whether the user operation is a click on the “add” button 562 (step 2504). If so, a new entry is created in the resource table 205 (step 2505), and the new entry contains the first entry in the resource management window 56a. The contents are set (step 2506), and the process ends (step 2512).
It is determined whether the user operation is a click on an entry in the resource management window 56a (step 2507). If so, the clicked entry is highlighted (step 2508), and the process ends (step 2512).
It is determined whether the user operation is a click on the “delete” button 563 (step 2509). If so, the highlighted entry in the resource management window 56a is deleted (step 2510), and the corresponding entry in the resource table 205 is deleted. It deletes (step 2511), and the processing ends (step 2512).

FIG. 26 is a flowchart showing the process of the handle_environment () function that executes the execution environment editing process.
First, it is determined whether the user operation is a click on the “new” button 542 of the execution environment (step 2601). If so, a new entry (content is blank) is added to the head of the execution environment selection window 54a (step 2602). ) The contents of the new entry are set in accordance with the contents of the key input by the user (step 2603), and the process ends (step 2618).
It is determined whether the user operation is a click on the “add” button 541 (step 2604). If so, a new entry is created in the environment table 203 (step 2605), and the new entry is the first entry in the execution environment selection window 54a. Is set (step 2606). Also, a sub-entry corresponding to the added environment is added to the entry of each part in the parts table 202 and initialized (step 2607), the added execution environment is made current (step 2608), and the redraw () function is activated. Then, the drawing process of the editing screen 50a is executed (step 2617), and the process ends (step 2618).

It is determined whether the user operation is a click on an entry in the execution environment selection window 54a (step 2609). If so, the clicked entry is highlighted (step 2610), and the highlighted execution environment is made current (step 2611). ). Then, the redraw () function is activated to execute the drawing process of the edit screen 50a (step 2617), and the process ends (step 2618).
It is determined whether the user operation is a click on the “delete” button 543 (step 2612). If so, the highlighted entry in the execution environment selection window 54a is deleted (step 2613), and the corresponding entry in the environment table 203 is displayed. Is deleted (step 2614), and the subentry corresponding to the deleted environment is deleted from the entry of each component in the component table 202 (step 2615). Then, the execution environment corresponding to the first entry in the environment table 203 is made current (step 2616), the redraw () function is activated to execute the drawing process of the edit screen 50a (step 2617), and the process is terminated (step). 2618).
If there is no user operation, the process ends (step 2618).

FIG. 27 is a flowchart showing the process of the generate_source () function that executes the source generation process.
First, the top entry of the screen table 201 is substituted into a variable scr (step 2701), and it is determined whether or not scr exists (step 2702). If it does not exist, the process ends (step 2705). If it exists, the generate_source (scr) function is activated to generate a source for displaying the screen scr (step 2703), the next entry of the screen table 201 is substituted for the variable scr (step 2704), and step 2702 Return to the determination.

FIG. 28 is a flowchart showing the process of the redraw () function for executing the drawing process of the editing screen 50a.
First, the preview (current screen, current execution environment) function is activated to generate a preview screen showing the display state of the components arranged on the screen, and display it on the GUI editing window 52a (step 2801). The contents of 205 are displayed on the resource management window 56a (step 2802). Next, it is determined whether there is a selected part (step 2803), and if there is, the contents of the entry in the parts table 202 corresponding to the selected part are displayed in the part attribute display window 55a and the event editing window 53a. (Step 2804) If it does not exist, the contents of the component attribute display window 55a and the event edit window 53a are cleared (Step 2805).
Next, the contents of the prototype table 204 are displayed on the component providing window 51a (step 2806), the contents of the environment table 203 are displayed on the execution environment selection window 54a (step 2807), and the process is terminated (step 2808).

FIG. 29 is a flowchart showing the process of the generate_source (screen) function for executing the source code generation process.
Here, first, the first line of the environment table 203 is assigned to the variable env (step 2901). Then, it is determined whether env exists (2902), and if it does not exist, the process ends (step 2914). If so, a source for “determining whether the execution environment is env” is generated (A in FIG. 16) (step 2903), and a collection of subentries belonging to the screen specified by screen is displayed in the screen table 201. The variable rows is set (step 2904), and the first row of rows is assigned to the variable row (step 2905). Next, it is determined whether or not a row exists (step 2906). If not, the next row of the environment table 203 is assigned to the variable env, and the process returns to the determination of step 2902 (step 2913).
If it exists, the value of the “part name” of the row is substituted for the variable name, and the sub-entry in which “part name” is name and “environment” matches env in the part table 202 is substituted for the variable row 2 (step 2907). . Further, the value of “position” of row 2 is substituted for variable (x, y), and the value of “size” of row 2 is substituted for variable (h, w) (step 2908). Then, a source for “setting the position of the part name to (x, y) and the size to (h, w)” is generated (B in FIG. 16) (step 2909). For each attribute attr of row 2, a source for “setting the attr attribute value of part name to the value specified by row 2” is generated (C in FIG. 16) (step 2910).
Further, for each event e of row 2, a source for “setting an event handler for the component name e to the handler specified by row 2” is generated (D in FIG. 16) (step 2911). Then, the next row after the row is substituted into the variable row (step 2912), and the process returns to the determination at step 2906.

FIG. 30 is a flowchart showing the process of the preview (screen, env) function for generating a preview screen showing the display state of the components arranged on the screen.
First, in the screen table 201, a set of subentries belonging to the screen specified by screen is substituted into a variable row (step 3001). Next, the first row of rows is substituted into the variable row (step 3002). It is determined whether or not there is a row (step 3003), and if not, the process ends (step 3008). If it exists, the value of “part name” of row is substituted for variable name (step 3004). In the component table 201, a subentry whose “component name” is “name” and whose “environment” matches “env” is substituted into the variable row2 (step 3005). In accordance with the attribute value of the component specified by row2, the component is drawn on the preview screen (step 3006), the next row in the row is substituted into the variable row (step 3007), and the process returns to the determination in step 3003.

It is a system configuration figure showing an example of an embodiment of the present invention. It is a functional block diagram which shows the function and process data of a source code generation program in an example of embodiment of this invention. It is explanatory drawing which shows the example of an operation screen. It is explanatory drawing which shows the example of an environment table and a parts table, and the correlation between both tables. It is explanatory drawing which shows the addition of the execution environment to an environment table and a parts table. It is explanatory drawing which shows the example of a screen table. It is explanatory drawing which shows the example of a prototype table. It is explanatory drawing which shows the example of a resource table. It is explanatory drawing which shows the example of a raw material table. It is explanatory drawing which shows the flow of a process at the time of system starting. It is explanatory drawing which shows the flow of a GUI design process. It is explanatory drawing which shows the example of switching operation of an execution environment. It is explanatory drawing which shows the example of operation at the time of designing the screen for other execution environments based on the screen design for execution environments. It is explanatory drawing which shows the flow of a switching process of an execution environment. It is explanatory drawing which shows the flow of a source code production | generation process. It is explanatory drawing which shows the example of a production | generation source code. It is explanatory drawing which shows the example of generation | occurrence | production GUI display data. 6 is a flowchart illustrating processing of a main () function that executes top-level processing in an example of an embodiment of the present invention. 6 is a flowchart illustrating processing of an initialize () function that executes initial processing in an example of an embodiment of the present invention. FIG. 10 is a flowchart illustrating a process of a new_screen () function for executing a new screen creation process in an example of an embodiment of the present invention. FIG. FIG. 10 is a flowchart illustrating a process of a new_component () function for executing a process of adding a component to a GUI editing window in an example of an embodiment of the present invention. 6 is a flowchart illustrating processing of a handle_gui () function that executes GUI editing processing in an example of an embodiment of the present invention. 14 is a flowchart illustrating processing of a function handle_property () function that executes attribute editing processing in an example of an embodiment of the present invention. 14 is a flowchart illustrating processing of a function handle_action () function that executes event editing processing in an example of an embodiment of the present invention. 6 is a flowchart illustrating processing of a handle_resource () function that executes resource editing processing in an example of an embodiment of the present invention. 14 is a flowchart illustrating processing of a handle_environment () function that executes execution environment editing processing in an example of an embodiment of the present invention. In an example of an embodiment of the present invention, it is a flow chart which shows processing of a generate_source () function which performs source generation processing. 6 is a flowchart illustrating processing of a redraw () function that executes drawing processing of an editing screen in an example of an embodiment of the present invention. 6 is a flowchart illustrating a process of a generate_source (screen) function for executing a source code generation process in an example of an embodiment of the present invention. 6 is a flowchart illustrating processing of a preview (screen, env) function that generates a preview screen indicating a display state of components arranged on a screen in an example of an embodiment of the present invention. It is an external view which shows the example of the mobile telephone provided with the display screen which enabled it to use a screen in the vertical and horizontal directions. It is an external view which shows the example of the mobile telephone provided with the display screen which enabled it to use a screen in the vertical and horizontal directions.

Explanation of symbols

DESCRIPTION OF SYMBOLS 1 ... Processing apparatus, 2 ... Input device, 3 ... Display apparatus, 4 ... GUI design information file, 5 ... Resource file, 6 ... Multiple material data file, 7 ... Source file, 8 ... GUI display data file, 9 ... Memory DESCRIPTION OF SYMBOLS 10 ... CPU, 21 ... Key input device, 22 ... Pointing input device, 40 ... Data generated on memory, 41 ... Data existing as file, 91 ... Source code generation program, 92 ... Operating system, 99 ... Existing Design information file, 101 ... GUI editing function, 102 ... Part attribute editing function, 103 ... Event action editing function, 104 ... Execution environment selection function, 105 ... User interface part providing function, 106 ... Resource management function, 111 ... GUI design Information file input / output function, 112 ... resource file Output function 113 ... Source code generation device 114 ... GUI display data generation function 201 ... Screen table 202 ... Parts table 203 ... Environment table 204 ... Prototype table 205 ... Resource table 206 ... Material table 301 ... Preview screen, 302 ... result information, 303 ... source code, 304 ... GUI display data, 50a ... program screen, 51a ... part provision window, 52a ... GUI edit window, 53a ... event edit window, 54a ... execution environment selection window, 55a ... part attribute display window, 56a ... resource management window, 57a ... new screen button, 58a ... source generation button, 521a ... text display user interface part, 522a ... image display user interface part, 523a ... te 50b ... QVGA execution environment program screen, 51b ... QVGA execution environment component provision window, 52b ... QVGA execution environment GUI edit window, 53b ... QVGA execution environment event edit window, 54b ... QVGA execution environment Execution environment selection window, 55b ... QVGA execution environment component attribute display window, 56b ... QVGA execution environment resource management window, 57b ... QVGA execution environment new screen button, 58b ... QVGA execution environment source generation button, 521b ... QVGA Execution environment text display user interface component, 522b ... QVGA execution environment image display user interface component, 523b ... QVGA execution environment text input user interface component, 50c ... QVGA execution environment program screen, 51c ... QVGA execution environment component Window, 5 c ... QVGA execution environment GUI editing window, 53c ... QVGA execution environment event editing window, 54c ... QVGA execution environment execution environment selection window, 55c ... QVGA execution environment component attribute display window, 56c ... QVGA execution environment resource management Window, 57c ... New screen button of QVGA execution environment, 58c ... Source generation button of QVGA execution environment, 521c ... Text display user interface component of QVGA execution environment, 522c ... Image display user interface component of QVGA execution environment, 523c ... QVGA execution Text input user interface part of environment 45 ... Example of source code to be generated 46 ... Example of GUI display data to be generated 202a ... Part table 202b ... Part table with execution environment added 202c ... Add to entry in part table Attribute information set, 2 3a ... environment table, 203b ... environment table you add the execution environment, 203c ... a new entry in the environment table.

Claims (3)

A source code generation device for generating GUI display data for displaying a source code of a program to be executed by a computer and a user interface component on a display screen,
Storage means for independently editing component element information such as a position, size, component attribute, and event action that are different for each execution environment for each user interface component, and storing the information in association with a plurality of execution environment information; Source code for generating and outputting user interface component GUI display data corresponding to the execution environment specified based on the stored component element information and source code for displaying the user interface component using the GUI display data And a source code generation device comprising GUI display data generation means.   The source code generation apparatus according to claim 1, further comprising means for previewing a user interface component on an editing screen based on GUI display data.   The source code generation apparatus according to claim 1, further comprising means for excluding some user interface components from the output target of the source code or GUI display data according to an execution environment.

Images