JP6889361B2 - Information processing device and its processing method and program - Google Patents

Description

The present invention relates to an information processing device for generating a program, a processing method of the information processing device, and a program.

A Web application generally has a plurality of screens such as a search screen and a registration screen. It is desirable that each of the plurality of screen designs has a certain sense of unity such as colors and fonts. A template with such a unified design is called a "theme".
Conventionally, as shown in Patent Document 1, a mechanism for editing a screen design by using a graphical tool for each screen has been shown.

Japanese Patent Application No. 2008-313156

However, in the mechanism of Patent Document 1, when the design of a certain screen is modified, it is necessary to modify the design of other screens in the same manner, which is inefficient and increases the work man-hours.

On the other hand, there are graphical tools for creating stylesheets that manage templates for multi-screen designs. By using the preview function of this tool, you can apply the created style sheet to the sample screen prepared by the tool and check the "theme" which is the template of the design.

However, such a tool displays the keys and values of many properties contained in the stylesheet, and when the property value is changed by the user, the sample screen corresponding to the key of the property whose value has changed. It is a mechanism to update the display of the parts displayed in. Therefore, there is a problem that the user must find and specify the property to be changed from among many properties and change the value.

Therefore, an object of the present invention is to provide a mechanism for streamlining the work related to editing a screen design template.

The present invention is an information processing device for designing a plurality of screens of a Web application, and is an input definition information that defines an item input on the screen of the Web application and an output that defines an item to be output on the screen of the Web application. An input / output definition management means that manages the definition information as input / output definition information, and a template of a design commonly used on the plurality of screens, for each item of the plurality of screens defined in the input / output definition information. A template component display means that controls to display a list of a plurality of display components that are corresponding templates, and the plurality of display components in a state where the plurality of display components are displayed by control by the template component display means. Among the property value receiving means for receiving an instruction to change the value of the display property corresponding to the display component selected by the user, the value of the display property based on the instruction received by the property value receiving means, and the input / output definition. It is characterized by including a display control means for controlling to display a screen corresponding to the input / output definition information according to the items defined by the input / output definition information managed by the management means .

According to the present invention, it is possible to provide a mechanism for streamlining the work related to editing a screen design template.

It is a system configuration diagram which shows an example of the configuration of the program development apparatus, the program development server, the database server, the application client, and the application server which concerns on this invention. It is a block diagram which shows an example of each hardware configuration which can be applied as a program development apparatus, a program development server, a database server, an application client, and an application server which concerns on this invention. This is an example of a block diagram showing a software configuration according to an embodiment of the present invention. It is a block diagram of a program development apparatus. It is a figure which shows an example of the ER diagram. It is a figure which shows an example of the screen transition diagram. It is a figure which shows an example of a repository definition. It is a figure which shows an example of the database definition 401. It is a figure which shows an example of application definition 402. It is a figure which shows an example of the data model definition 403. It is a figure which shows an example of the data model definition 403. It is a figure which shows an example of a data model operation definition. It is a figure which shows an example of the input / output definition of the product search screen 601. It is a figure which shows an example of the input / output definition of the product purchase screen 602. It is a figure which shows an example of the input / output definition of the product purchase result screen 603. It is a figure which shows an example of the input / output definition of the order list screen. It is a figure which shows an example of an input / output definition. It is a figure which shows an example of the menu setting of an input / output definition. It is a figure which shows an example of a business process definition. It is a figure which shows an example of a new theme creation dialog. It is a figure which shows an example of the theme editor. It is a figure which shows an example of the spring theme created based on the summer theme using the theme editor screen 2100. It is a figure which shows an example of the autumn theme created based on the summer theme using the theme editor screen 2100. It is a figure which shows an example of the winter theme created based on the summer theme using the theme editor screen 2100. It is a figure which shows an example of the property editor part 413 when a label is selected among the theme parts 412. It is a figure which shows an example of the property editor part 413 when a button is selected among the theme parts 412. It is a figure which shows an example of the property editor part 413 when a link is selected among the theme parts 412. It is a figure which shows an example of the property editor part 413 when a plurality of theme parts 412 are selected among the theme parts 412. It is a figure which shows an example of the contents of a theme file. It is a figure which shows an example of the flowchart of the user theme file creation. It is a figure which shows an example of the flowchart of the user theme file update. It is a figure which shows an example of the flowchart of the theme editor screen drawing. It is a figure which shows an example of a layout editor part. It is a figure which shows an example of the flowchart which applies a theme to a layout editor part. It is a figure which shows an example of the Web application generation flowchart. It is a figure which shows an example of the Web application screen image. It is a figure which shows an example of the Web application screen image. It is a figure which shows an example which performs the theme component 412 selection from a layout editor part. It is a figure which shows an example which performs the theme component 412 selection from a layout editor part. It is a figure which shows an example of the processing flowchart which displays the theme editor part from the layout editor part. It is a figure which shows an example of the correspondence table of the theme component 412 and the property key in the theme property file. It is a figure which shows an example of the flowchart of the user theme file update in 3rd Embodiment. In the third embodiment, it is a figure which shows an example of the property editor part 413 when a plurality of theme parts 412 are selected among the theme parts 412. In the third embodiment, it is a figure which shows an example of the identification display which the property selected by the property editor part 413 affects the part. In the third embodiment, it is a figure which shows an example of the value display of the other part which has the same property key as the property key selected by the property editor part 413. In the third embodiment, it is a figure which shows an example of the existing theme selection as the value of the property editor part 413.

[First Embodiment]
Hereinafter, embodiments of the present invention will be described in detail with reference to the drawings.
FIG. 1 is a system configuration diagram showing an example of the configuration of a program development device (developer terminal), a program development server, a database server, an application client (client device), and an application server according to the present invention (information processing system).

The program development device 101 (information processing device) defines a screen layout, a database search instruction, and the like according to the operation of the developer. The program development device 101 alone may accept input from a user (Web application developer) and cause the program development server 102, which will be described later, to perform actual program generation processing and application generation processing, or the program development device 101 alone may be used as a program. You may process up to generation and application generation.

In this embodiment, the application generated by the program development device 101 is a Web application, but the application is not limited to this, and an application or embedded software that operates in an information processing device such as a mobile phone, a smartphone, or a tablet. , It does not have to be an application that uses communication by Web technology.

The program development server 102a-102b (information processing device) develops a program according to the developer's instruction input by the program development device 101. The program development server 102a may be arranged in a network 106 such as a LAN, and the program development server 102b may be arranged on the Internet or the cloud.

The database servers 103a to 103b (information processing apparatus) are databases used by the developed application, and in the present invention, they may be used for operation confirmation and the like at the time of development. For example, the database server 103 may be configured by the same device as the program development device 101 for use by the developer, or may be arranged in a network 106 such as a LAN (database server 103a). Further, it may be arranged on the Internet or the cloud (database server 103b). When the program development device 101 cooperates with the program development server 102, the program development server 102 and the database server 103 may be configured in the same device.

The application servers 105a to 105b (information processing device) execute the application developed by the program development device 101. It may be arranged in a network 106 such as a LAN (application server 105a), or may be arranged on the Internet or the cloud (application server 105b). Further, it can operate by connecting to the network 106, the Internet, and the database server 103 on the cloud.

The application clients 104a to 104b (information processing devices) are user input terminals that operate the application program developed by the program development device 101 in cooperation with the application server 105. It may be arranged in a network 106 such as a LAN (application client 104a), or may be arranged on the Internet or the cloud (application client 104b). It may be an information processing device such as a mobile terminal.

FIG. 2 is a block diagram showing an example of each hardware configuration applicable as a program development device, a program development server, a database server, an application client, and an application server according to the present invention.
In FIG. 2, the CPU 201 comprehensively controls each device connected to the system bus 204.

Further, the ROM 203 or the external memory 211 stores an operating system (OS), which is a control program of the CPU 201, and a program for realizing various functions described later of the information processing device such as each server, client, and device.
The RAM 202 functions as a main memory, a work area, a temporary save area, and the like of the CPU 201.

The input controller 205 controls the input from the input unit 209. Examples of the input unit 209 include pointing devices such as a keyboard and a mouse in the information processing device.
The output controller 206 controls the display of the output unit 210. Examples of the output unit 210 include a CRT and a liquid crystal display.

The external memory controller 207 controls access to the external memory 211 that stores the boot program, various applications, font data, user files, edit files, printer drivers, and the like. In addition, various tables and parameters for realizing various functions of each server, client, device, etc. are stored. Examples of the external memory 211 include a hard disk (HD), a flexible disk (FD), a compact flash (registered trademark) connected to a PCMCIA card slot via an adapter, smart media, and the like.
The communication I / F controller 208 executes a communication control process with an external device via the network.

The program 212 for realizing the present invention is recorded in the external memory 211, and is executed by the CPU 201 by being loaded into the RAM 202 as needed.


FIG. 3 is an example of a block diagram showing a software configuration according to an embodiment of the present invention.
The program development device 101 includes the following functional units.
The template editing screen display unit 301 is a functional unit that displays a screen for editing property keys and values included in the template.

The template editing screen display unit 301 is a functional unit that displays a template editing screen for editing the value corresponding to the property key of the design of the part included in the template screen.
The template component display unit 302 is a functional unit that displays components to which a template is applied on the screen displayed by the template edit screen display unit 301.

The template part display unit 302 is a functional unit that displays parts to which the design is applied on the template edit screen displayed by the template edit screen display unit 301.
The template component instruction receiving unit 303 is a functional unit that receives a user's instruction for the component displayed by the template component display unit 302.

The property display unit 304 is a functional unit that displays the key and value of the property corresponding to the part for which the instruction is received by the template part instruction receiving unit 303 among the properties included in the template.

The property display unit 304 is a functional unit that displays the key and value of the property corresponding to the part for which the instruction is received by the template part instruction reception unit 303 among the design properties.
The property value change reception unit 305 is a functional unit that accepts changes in the property values displayed by the property display unit 304.
The property value change receiving unit 305 is a functional unit that receives a change in the value corresponding to the property key displayed by the property display unit 304.
The template part display unit 302 is a functional unit that updates the display of parts according to the value of the property that has been changed by the property value change reception unit 305.
The template part display update unit 312 is a functional unit that updates the display of parts according to the value changed by the property value change reception unit 305.
The template part display update unit 312 is a functional unit that updates the display of parts according to the value of the property that has been changed by the property value change reception unit 305.

The style sheet generation unit 313 is a functional unit that generates a style sheet by using the property keys and values of the parts whose display has been updated by the template part display update unit 312.

When there are a plurality of parts for which the instruction is received by the template part instruction receiving unit 303, the property display unit 304 displays the key and value of the property included in all of the plurality of parts for which the instruction is received by the template part instruction receiving unit 303. It is a functional part.

The template part display unit 302 corresponds to the part whose instruction is received by the template part instruction reception unit 303 and the property whose change is received by the property value change reception unit 305 according to the value of the property whose change is received by the property value change reception unit 305. It is a functional part that updates the display with the parts to be used.
The program generation unit 306 is a functional unit that generates an application program.

The edit screen display unit 307 is a functional unit that displays an edit screen for editing an application screen having a plurality of screen components, which is output by operating a program generated by the program generation unit 306.
The layout edit screen display unit 314 is a functional unit that displays a layout edit screen for editing the layout of parts to be displayed on the application screen.

This is a functional unit that applies the property keys and values included in the template to a plurality of screen components included in the edit screen displayed by the edit screen display unit 307.

The layout edit screen application unit 315 is a functional unit that applies the design to the parts included in the layout edit screen displayed by the layout edit screen display unit 314 according to the value changed by the property value change reception unit 305.
The screen component instruction receiving unit 308 is a functional unit that receives a user's instruction for the screen component displayed by the editing screen display unit 307.
The layout editing screen component instruction receiving unit 316 is a functional unit that receives user instructions for the parts displayed by the layout editing screen display unit 314.
The property display unit 304 is a functional unit that displays the key and value of the property corresponding to the screen component for which the instruction is received by the screen component instruction reception unit 308.

The property display unit 304 is a functional unit that displays the key and value of the property corresponding to the screen component for which the instruction is received by the layout edit screen component instruction reception unit 316.

The template determination unit 309 is a function unit that determines whether or not the template applied to the application screen displayed by the edit screen display unit 307 is a template created by the user.

The template determination unit 309 is a function unit that determines whether or not the template applied to the application screen displayed by the layout edit screen display unit 314 is a template created by the user.

When the property display unit 304 receives the user's instruction by the screen component instruction receiving unit 308 and the template determination unit 309 determines that the template is created by the user, the property display unit 304 uses the template to determine the template. If it is determined by unit 309 that the template is not created by the user, the template created by copying the template is used, and the key and value of the property corresponding to the screen component for which the instruction is received by the screen component instruction receiving unit 308 are set. It is a functional part to display.

The property display unit 304 uses the template when the layout edit screen component instruction reception unit 316 receives the user's instruction and the template determination unit 309 determines that the template is created by the user. If the template determination unit 309 determines that the template is not created by the user, the template created by copying the template is used, and the property corresponding to the screen component for which the instruction is received by the layout edit screen component instruction reception unit 316 is used. It is a functional part that displays keys and values.
The screen layout editing unit 310 is a functional unit that edits the layout of the application screen output by operating the application program.
The template editing unit 311 is a functional unit that edits a template for designing an application screen.

The program generation unit 306 is a functional unit that generates an application program including an application screen to which the template edited by the template editing unit 311 is applied.

The design template storage unit 317 is a functional unit that stores the key and value of the property of the component displayed by the template component display unit 302 in association with each other as a design template.
The application construction unit 318 is a functional unit that constructs an application that outputs an application screen including parts.

The application construction unit 318 is a functional unit that constructs an application that outputs an application screen using the style sheet generated by the style sheet generation unit 313.

The design template selection unit 319 has a function of accepting the selection of the design template stored in the design template storage unit 317 according to the user's instruction in order to change the value corresponding to the property key displayed by the property display unit 304. It is a department.

The property value change reception unit 305 uses the property value stored in the design template storage unit 317 as the design template selected by the design template selection unit 319, and uses the property value displayed by the property display unit 304 as the property key. It is a functional part that changes the corresponding value.

The design influence identification display unit 320 is a functional unit that identifies and displays which design on the template screen the value for which the change is accepted by the property value change reception unit 305 affects the design.

The user operation reception unit 321 is a functional unit that accepts a user's operation on an object for identification display displayed by the design influence identification display unit 320.

The property value change reception unit 305 is a functional unit that changes the value corresponding to the property key displayed by the property display unit 304 according to the operation received by the user operation reception unit 321.

When there are a plurality of parts for which the instruction is received by the template part instruction receiving unit 303, the property display unit 304 displays the property keys and values of the parts for which the instruction is received by the template part instruction receiving unit 303 side by side for each part, and is the same. It is a functional unit that identifies and displays that the value set corresponding to the key differs between parts.

When the property display unit 304 displays the property key and value of the part for which the instruction is received by the template part instruction receiving unit 303, the property display unit 304 sets a value set in the vicinity of the value corresponding to the same key in other parts. It is a functional part to be displayed.

FIG. 4 is a configuration diagram of a Web application automatic generation device. The Web application automatic generation device is a device for the purpose of automatically generating a Web application based on a definition file defined by a user who develops a Web application. It is composed of a repository definition unit 400, a theme editor unit 410, a layout editor unit 420, and a Web application generation unit 430. The repository definition unit 400 includes a database definition 401, an application definition 402, a data model definition 403, an input / output definition 404, a business process definition 405, and a user theme file 406. These files are created by the user and displayed in a tree structure shown in FIG. 7, which will be described later.
The theme editor unit 410 includes a theme drawing unit 411, theme parts 412, and a property editor unit 413.

The theme drawing unit 411 is provided with a set of component parts used on the Web screen in advance so that the overall image of the theme can be understood. The component component referred to here refers to the theme component 412.
The layout editor unit 420 includes a layout drawing unit 421 and layout components 422.

The Web application generation unit 430 includes a generation processing unit 431 and an embedded theme file 432. Note that you do not want the developer to edit the embedded theme file 432, and it takes time for the developer to set all the properties of the theme file, so the embedded theme file closest to the design desired by the developer. By selecting the theme file 432, the embedded theme file 432 is copied and the user theme file 406 of the repository definition unit 400 is created.

FIG. 21 is a diagram showing an example of the theme editor unit 410, and the portion shown in 2100 is the theme drawing unit 411. The theme component 412 is displayed on the theme drawing unit 411. The property editor unit 413 exists in the 2102 on the same window as the theme drawing unit 411.

The theme drawing unit 411 reads the contents (hereinafter referred to as an entry) of the user theme file 406 (described later in FIG. 29), and sets "font" and "color" according to the key and value of the property included in the entry. The theme parts 412 reflecting "decoration" and the like are displayed. The property editor unit 413 displays the key and value of the property included in the entry of the user theme file 406, and the user can edit the property value. That is, the property editor unit 413 is a screen for editing the key and value of the property included in the template. Further, the property editor unit 413 is a template editing screen for editing the value corresponding to the property key of the design of the component included in the template screen. The theme editor unit 410 is a functional unit that edits a template for designing an application screen.

Next, the layout drawing unit 421 included in the layout editor unit 420 will be described. The layout drawing unit 421 displays the contents of the input / output definition created by the user as a graphical screen. The layout drawing unit 421 displays the layout components defined by the input / output definition 404. At the time of display, the layout drawing unit 421 reads the user theme file 406 or the embedded theme file 432, reflects "font", "color", "decoration", etc. in the layout parts, and displays the contents of the input / output definition 404 on the screen.

That is, the layout editor unit 420 is a functional unit that displays an edit screen for editing an application screen having a plurality of screen components, which is output by operating the generated program. Further, the layout editor unit 420 is a functional unit that edits the layout of the application screen output by operating the application program. Further, the layout editor unit 420 is a functional unit that displays a layout editing screen for editing the layout of parts to be displayed on the application screen.

Next, the Web application generation unit 430 will be described. The generation processing unit 431 reads the database definition 401, application definition 402, data model definition 403, input / output definition 404, and business process definition 405 from the repository definition unit 400. Further, according to the user's specification, the embedded theme file 432 or the user theme file 406 is selected and read. The generation processing unit 431 generates the source code 441 and HTML / JSP / Javascript (registered trademark) 442 from the read definition file. Furthermore, a style sheet 443 is generated from the theme file. The source code 441 is compiled by the generation processing unit after it is generated. That is, the Web application generation unit 430 is a functional unit that generates an application program. Further, the Web application generation unit 430 is a functional unit that generates an application program including an application screen to which the edited template is applied.
Next, the theme editor will be described using a sample example of the Web application.

FIG. 5 is an ER diagram of an application sample described below. In this embodiment, a product data model 501 and an order data model 502 are prepared as examples. These data models physically correspond to database tables. The multiplicity of goods and orders is 1: 1.

FIG. 6 is a screen transition diagram of the application. A product search is performed by the user on the product search screen 601 displayed after the user has logged in. Display the search results on the same screen. When the product to be purchased is selected from the search result list, the screen transitions to the product purchase screen 602. When the information input for product purchase is accepted and the purchase button is pressed, the product purchase result screen 603 is displayed.
FIG. 7 is a diagram showing an example of a tree structure of a repository definition for generating an application.
The details of the repository definition will be described below.
FIG. 8 is a diagram showing an example of the database definition 401. Information for connecting to the database is recorded in 801. 802 is a detailed view of 801.

FIG. 9 is a diagram showing an example of the application definition 402. The application definition 402 is divided into an input / output list 901 and an affiliation input / output 902 area. In the input / output list 901, all the input / output definitions stored in the repository definition unit 400 are displayed in the initial state. For the affiliation input / output 902, the input / output definition belonging to the application is set. Only the input / output definition to which this belongs is the target of application generation.
FIG. 10 is a diagram showing an example of the data model definition 403. This data model definition is the definition of the product data model shown in FIG.
FIG. 11 is a diagram showing an example of the data model definition 403 as in FIG. 10. This data model definition 403 is the definition of the order data model shown in FIG.

FIG. 12 is a diagram showing an example of a data model operation definition showing the data operation of the order data model. It holds the definition of order registration (operation code: JUCHU_INSERT). As the operation logic, it is defined that each input data of JUCHU_ID, SHOHIN_ID, QUANITY, and DELIVERY transmitted from the screen is registered in the order data model.

FIG. 13 is a diagram showing an example of input / output definitions of the product search screen 601. The input / output definition screen 1300 graphically displays the input / output definition on the layout editor unit 1301. Further, as an example, in the state where the product ID field 1302 is selected, the definition details of the product ID field 1302 are displayed in the detail view 1303.
FIG. 14 is a diagram showing an example of input / output definitions of the product purchase screen 602.
FIG. 15 is a diagram showing an example of input / output definitions of the product purchase result screen 603.
FIG. 16 is a diagram showing an example of input / output definitions on the order list screen.
The description of FIGS. 14 to 16 is the same as that of FIG. 13, and is omitted here.
FIG. 17 is a diagram showing an example of input / output definitions of the menu unit. The menu part is related to the input / output definitions of other screens as a part of each screen.

FIG. 18 is a definition showing that the input / output definition of the product search screen 601 includes a menu. The input / output definition of the product search screen 601 includes an input / output definition of a code MENU_TOP as a menu. (1801 in FIG. 18)

FIG. 19 is a diagram showing an example of a business process definition of order registration processing. A process of accepting input of order data from the order registration screen (not shown), executing the process of order registration (JUCHU_INSERT code), and returning the result to the screen is described.
This is the end of the explanation of repository definition. The repository definition contains the user theme file.

Next, a method of creating a user theme file will be described.
FIG. 20 is a diagram showing an example of a screen for creating a new user theme file. This new theme creation screen 2000 is displayed by right-clicking the "theme theme" part of the repository definition in FIG. 7 and selecting the pop-up menu "Create user theme file". The new theme creation screen 2000 is composed of a code field 2001, a name field 2002, and a copy source theme field 2003. The input value in the code field 2001 will be the file name of the user theme file to be created.

The input value of the name field 2002 is an arbitrary character string used to identify the theme. The copy source theme field 2003 is a field for designating an existing theme that is the source of the newly created user theme file. When the Finish button 2004 is clicked, the existing theme specified in the copy source theme field 2003 is copied to create a user theme file, and the user theme file is drawn on the theme editor screen 2100.

FIG. 21 is a diagram showing an example of the theme editor screen. The theme editor screen 2100 includes a theme drawing unit 2101 and a property editor unit 2102. When the theme component 412 drawn on the theme drawing section 2101 is selected by the user, the properties related to the theme component 412 are extracted from the theme file (described later in the description of FIGS. 29 and 41), and the property editor section 2102 is extracted. Display in. When each property of the property editor unit 2102 is selected by the user, each property value can be changed and a value change input is accepted.

Here, the contents of the theme file will be described with reference to FIG. 29. FIG. 29 is a diagram showing an example of the contents of the theme file. There are two types of theme files, "user theme file 406" and "embedded theme file 432", but the contents of the theme file are in the format of connecting the property key and property value with "=" (equal). It has become.

In the present embodiment, the style sheet 443 is generated from the theme file when the Web application is generated, but the present invention is not limited to this, and the style sheet 443 is directly generated without generating the theme file using the theme editor unit 410. May be generated. However, as shown in FIG. 29, the properties of the theme file are grouped together by a plurality of properties of the style sheet 443, or only those necessary for developing a Web application are carefully selected by the developer. It is desirable to generate a theme file using the theme editor unit 410 and generate a style sheet using the theme file as in the present embodiment in order to produce the effect of being easy to manage for the development tool and the development tool.

Next, the properties related to the theme component 412 will be described with reference to FIG. 41. FIG. 41 is a diagram showing an example of a correspondence table 4100 between the category attribute value 4101 of the theme component 412 and the property key 4104 of the theme property file. The correspondence table 4100 is stored in the external memory 211 of the program development device 101. In this embodiment, the correspondence between the category attribute value 4101 of the theme component 412 and the property key 4104 of the theme property file is managed in a table, but the association is not limited to this and is not limited to this. It may be managed by an array or a variable.

Specifically, in FIG. 21, when the theme component 412 having the category attribute value 4101 = "label" is selected from the theme components 412 drawn on the theme drawing section 2101 by the user, it is displayed on the property editor section 2102. The property key to be used is from 4104 of the mapping table 4100.
LABEL. fontSize
LABEL. fontWight
LABEL. backgroundColor
LABEL. borderColor
LABEL. forwardColor
LABEL. backgroundImage
LABEL. borderWidth
LABEL. padding
It can be seen that it is.

Using these property keys, property values are extracted from the theme file 2900 of FIG. 29 and displayed in the property editor section 2102. At that time, each property is divided into "B. font", "C. color", "D. decoration", and "E. arrangement" by using the value of the property type 4102, and displayed in the property editor unit 2102.

When the value change input is accepted, the display of the theme drawing unit 2101 is updated according to the changed property value. Each theme component 412 has a category attribute, and the theme component 412 having the same category attribute value has the same property even if it is another theme component 412. When the property value change is accepted, the display is updated for all the theme parts 412 having the same category attribute value.
FIG. 22 is a diagram showing an example of a spring theme created based on a summer theme using the theme editor screen 2100.
FIG. 23 is a diagram showing an example of an autumn theme created based on the summer theme using the theme editor screen 2100.
FIG. 24 is a diagram showing an example of a winter theme created based on a summer theme using the theme editor screen 2100.

The above is just a sample, but if you use the theme editor of the present invention, you can set the design of colors, fonts, etc. in a unified manner, so you can set themes according to the season, color tone, usage, etc. It can be easily created.
Next, the details of the property editor unit 413 will be described.

2502 of FIG. 25 is an example of the property editor unit 413 when the label 2501 is selected from the theme parts 412 displayed on the theme editor screen 2500. The property editor unit 2502 displays the property and its value related to the "theme" of the selected label 2501 in the "A. theme" area. Specifically, they are "HTML version", "category", "theme classification", "parent category", and "name". These are properties whose values cannot be changed by the user, and there are also properties whose values cannot be changed in this way.

The "category" of the property editor unit 2502 is information indicating the type of the selected theme component 412, and has values such as "label", "button", and "link" (4101 in FIG. 41). Theme parts 412 of the same category have the same properties (4104 in FIG. 41). Therefore, when the property value is changed in the property editor unit 2502, the change is applied to the display of all the theme parts 412 in the same category. That is, the property editor unit 2502 is a screen for editing the key and value of the property included in the template. Further, the property editor unit 2502 is a template editing screen for editing the value corresponding to the property key of the design of the part included in the template screen.

Further, the "parent category" of the property editor unit 2502 is a category corresponding to the parent of the "category" of the theme component 412. If no value is set for the property of the theme component 412, the property value of the "parent category" is inherited. Specifically, from the property editor section 2502 of FIG. 25, it is found that the parent category of the label is a page, and from 4105 of FIG. 41, when a value is not set for the "font size" of the label, the page is displayed. Inherit the property value of the font size (PAGE.fontSize).
The user can change each property value belonging to "B. font", "C. color", "D. decoration", and "E. arrangement" of the property editor unit 2502.

2602 of FIG. 26 is an example of the property editor unit 413 when the button 2601 is selected among the theme parts 412 displayed on the theme editor screen 2600. The number of properties displayed in the "D. decoration" area is two when the label 2501 is selected in FIG. 25, but is one when the button 2601 is selected. Further, "E. Arrangement" is not displayed because the property related to "E. Arrangement" does not exist in the button 2601. From 4102 in FIG. 41, there are two label "decoration" properties, one button "decoration" property, one label "arrangement" property, and a button "arrangement" property. Because it is 0. As described above, the property editor unit 413 has a feature of extracting and displaying properties according to the theme component 412 selected by the user.

2702 of FIG. 27 is an example of the property editor unit 413 when the link 2701 is selected from the theme parts 412 displayed on the theme editor screen 2700. It can be seen that the properties of "C. color" are significantly different from those when the button 2601 in FIG. 26 is selected. This is because, from 4102 in FIG. 41, the button has three "color" properties and the link has five "color" properties.

2803 of FIG. 28 is a state of the property editor unit 413 when a plurality of theme parts 412 are selected like the button 2801 and the link 2802 among the theme parts 412 displayed on the theme editor screen 2800. It can be seen that the properties included in both the case where the button 2601 is selected in FIG. 26 and the link 2701 is selected in FIG. 27 are displayed.

In the example of FIG. 28, focusing on "C. color", it is possible to set only the property "color" included in both the button 2801 and the link 2802. From 4103 in FIG. 41, it can be seen that the property included in both the button and the link is "color". When this property value is changed by the user, the property value of the property "color" of both the button 2801 and the link 2802 is changed. When a plurality of theme parts 412 are selected in this way, the properties included in all of the selected theme parts 412 are extracted and displayed from the properties of the selected theme parts 412, and the property values are changed at once. It has the characteristic of being able to do it.

This is the end of the description of the property editor section 413. The property value set in the property editor unit 413 is stored as the user theme file 406.

Next, the procedure for creating the user theme file 406 will be described with reference to FIG. FIG. 30 is a diagram showing an example of a user theme file creation flowchart. The following steps are all executed by the CPU 201 of the program development device 101.
When the user receives an instruction to "create a user theme file" in step S3001, the new theme creation screen 2000 is displayed.
In step S3002, the user receives the input of the theme code (2001 in FIG. 20).
In step S3003, the user receives the input of the theme name (2002 in FIG. 20).
In step S3004, the user accepts the selection of the copy source theme (2003 in FIG. 20).

In step S3005, a new user theme file is created. Specifically, the theme file of the copy source theme selected in step S3004 is copied, a new theme file having the theme code input in step S3002 as the file name is created, and stored in the external memory 211. That is, step S3005 is a step showing an example of a process of associating the keys and values of the properties of the indicated parts and storing them as a design template.
In step S3006, the theme editor screen 2100 is displayed.

In step S3007, the theme parts are used in the theme drawing unit 2101 of the theme editor screen 2100 displayed in step S3006 by using the design of the property value color, font, etc. defined in the user theme file created in step S3005. Draw 412.
The details of the process of step S3007 will be described with reference to FIG.

Next, the procedure for updating the user theme file 406 will be described with reference to FIG. 31.
FIG. 31 is a diagram showing an example of a flowchart for updating the user theme file. The following steps are all executed by the CPU 201 of the program development device 101.

In step S3101, the user accepts the selection of the theme component 412 displayed in the theme editor section of the theme editor screen 2100. For example, a plurality of theme parts 412 can be selected by sequentially clicking a plurality of theme parts 412 while pressing the CTRL key. That is, step S3101 is a step showing an example of a process of receiving a user's instruction for the displayed component.

In step S3102, the number of theme parts 412 selected in step S3101 is determined. If the number of selected theme parts 412 = 1, the process proceeds to step S3103. If the number of selected theme parts 412 is plural (≧ 2), the process proceeds to step S3104.

In step S3103, the property list related to the theme component 412 selected in step S3101 is acquired. Specifically, as mentioned in the explanation of FIG. 41, the list of one property is acquired from the correspondence table 4100 by using the category attribute value of the selected theme component 412.

In step S3104, the property list related to each of the plurality of theme parts 412 selected in step S3101 is acquired. Specifically, the same method as in step S3103 is performed for each of the selected theme parts 412, and a property list for each of the plurality of theme parts 412 is acquired.

In step S3105, the properties included in all the property lists are extracted from the property list related to each of the plurality of theme parts 412 acquired in step S3104. Specifically, the properties included in all the property lists are obtained by the logical intersection of each property list. Specifically, the property "color" included in both the button 2801 and the link 2802 described with reference to FIG. 28 is an example of this.

In step S3106, the property list acquired in step S3102 or the property list extracted in step S3105 is displayed in the property editor unit 2102. That is, step S3106 is a step showing an example of a process of displaying a screen for editing the key and value of the property included in the template. Further, step S3106 is a step showing an example of a process of displaying the template edit screen for editing the value corresponding to the property key of the design of the part included in the template screen.

Further, step S3106 is a step showing an example of a process of displaying the key and value of the property corresponding to the component that has received the instruction among the properties included in the template. Further, step S3106 is a step showing an example of a process of displaying the key and value of the property corresponding to the component that has received the instruction among the properties of the design.

Further, step S3106 is a step showing an example of a process of displaying the key and the value of the property included in all of the plurality of parts for which the instruction has been received when there are a plurality of parts for which the instruction has been received. As a result, only the properties corresponding to the selected theme part are displayed in the property editor section. In other words, it is possible to solve the problem that the user has to find and specify the property to be changed from among many properties and change the value.

In step S3107, the user accepts a property value change input. That is, step S3107 is a step showing an example of a process of accepting a change in the value of the displayed property. Further, step S3107 is a step showing an example of a process of accepting a change in the value corresponding to the displayed property key.

In step S3108, the category attribute value is read from the property list acquired in step S3103 or step S3104, and among the theme parts 412 displayed in the theme drawing unit 411, the theme parts 412 having the same category attribute values (hereinafter, related). Specify the theme part). In this embodiment, the related theme part is specified by using the category attribute value, but the present invention is not limited to this, and the theme part having the property key whose change is accepted in step S3107 is regarded as the related theme part. You may do so.

In step S3109, the display of the selected theme part and the related theme part is updated according to the changed property value. That is, step S3109 is a step showing an example of the process of displaying the parts to which the template is applied. Further, step S3109 is a step showing an example of a process of updating the display of parts according to the value of the property for which the change has been accepted. Further, step S3109 is a step showing an example of a process of updating the display of the component for which the instruction has been accepted and the component corresponding to the property for which the change has been accepted according to the value of the property for which the change has been accepted.
In step S3110, the user theme file is updated and saved according to the changed property value.
This is the end of the explanation of the user theme file update flowchart.

Next, a procedure for drawing the theme editor screen 2100 will be described with reference to FIG. 32. FIG. 32 is a diagram showing an example of a flowchart for drawing the theme editor screen. The following steps are all executed by the CPU 201 of the program development device 101.
When the theme designation is received from the selection menu in step S3201, the designated theme file is read from the external memory 211.

As shown in FIG. 29, since the theme file contains a plurality of entries based on the combination of the property key and the property value, loop processing is performed for the number of entries from step S3202 to step S3209.
In step S3203, the property key and property value of the next entry are read.
In step S3204, loop processing is performed for the number of theme parts 412 displayed on the theme drawing unit 411.
In step S3205, the category attribute value of the next theme component 412 is acquired.

In step S3206, it is determined whether the category attribute value of the entry key and the category attribute value of the theme component match. The category attribute value of the property key of the entry is described. For example, in the case of the entry "LABEL.backgroundColor = #eeeeee" in the theme property file of FIG. 29, the category attribute value of the property key of the entry = "LABEL". That is, the category attribute value of the property key = the first of the property keys. This is the part before (dot).

The category attribute value extracted from the property key of the entry is compared with the category attribute value included in the theme component 412, and if they match, the process proceeds to step S3207. If they do not match, the loop processing of steps S3204 to S3209 is continued.
In step S3207, the property value acquired in step S3203 is set in the variable that matches the property key of the theme component 412.

In step S3208, the theme component 412 is drawn on the theme drawing unit using the property value set in step S3207. That is, step S3208 is a step showing an example of the process of displaying the component to which the template is applied on the displayed screen. Further, step S3208 is a step showing an example of a process of displaying a part to which the design is applied on the displayed template edit screen.
Step S3209 is the end of the loop processing of the theme component 412.
Step S3210 is the end of the loop processing of the theme file entry.
This is the end of the explanation of the flowchart of the theme editor screen drawing.

Next, using FIG. 33, a procedure for reflecting the theme created in FIGS. 30 and 31 to the layout editor section in which the user (Web application developer) creates the screen layout of the Web application will be described. The layout editor screen 3300 of FIG. 33 is a diagram showing an example of the layout editor unit 420. The layout editor screen 3300 includes a layout drawing unit 3301.

The layout drawing unit 3301 displays the layout component 3302 arranged by the user. The layout component 3302 displayed on the layout drawing unit 3301 reflects the theme of the theme file (user theme file 406 or embedded theme file 432) specified by the user. As a result, the user can apply the created theme to the screen of the Web application under development and confirm it without deploying the Web application under development. The theme is specified by selecting a theme from the list of theme files in the drop-down list as shown in 3303 of FIG. 33.

Next, a procedure for applying the theme specified by the user to the layout editor unit 420 will be described with reference to FIG. 34. FIG. 34 is a diagram showing an example of a flowchart for applying the theme to the layout editor unit 420. The following steps are all executed by the CPU 201 of the program development device 101.

In step S3401, the layout editor screen 3300 (FIG. 33) accepts the user's designation of the theme (3303 in FIG. 33). That is, step S3401 is a step showing an example of a process of displaying an edit screen for editing an application screen having a plurality of screen components, which is output by operating the generated program. Further, step S3401 is a step showing an example of a process of displaying a layout edit screen for editing the layout of parts to be displayed on the application screen.

In step S3402, the theme file (user theme file 406 or embedded theme file 432) corresponding to the theme specified in step S3401 is acquired from the external memory 211.
In step S3403, the input / output definition 404 of the screen of the Web application displayed on the layout drawing unit 3301 is acquired from the external memory 211.
From step S3404, loop processing is started for the number of input / output items of the input / output definition 404 acquired in step S3403.
In step S3405, the type of layout component is acquired from the target input / output items.

In step S3406, all the entries matching the type of the layout component are acquired from the theme file acquired in step S3402. For example, when the type of the layout component is "label", the following entry is acquired from the theme property file shown in FIG. 29.
LABEL. backgroundColor = #eeeeee
LABEL. forwardColor = # 333333
LABEL. borderColor = # 2ca9e1
LABEL. borderWith = 0 5px 0 0
LABEL. padding = 3pt

In step S3407, the layout component is drawn using the entry information acquired in step S3406. That is, step S3407 is a step showing an example of a process of applying property keys and values included in the design template to a plurality of screen components included in the displayed edit screen. Further, step S3407 is a step showing an example of a process of applying the design to the parts included in the displayed layout edit screen according to the value for which the change is accepted.
Step S3408 is the end of the loop processing of the input / output items.
This completes the description of the flowchart for applying the theme to the layout editor section 420.

From the above, in the case of Web application development, it is possible to solve the problem that the Web application screen to which the theme is applied cannot be confirmed unless the Web application to which the style sheet created by the tool is applied is generated and operated. .. That is, the Web application screen to which the created design template is applied can be confirmed without generating and operating the Web application.

Next, with reference to FIG. 35, a procedure for the Web application generation unit 430 to generate the Web application by inputting the repository definition unit 400 will be described. FIG. 35 is a diagram showing an example of a Web application generation flowchart. The following steps are all executed by the CPU 201 of the program development device 101.
In step S3501, the application definition 402 of the repository definition unit 400 is read into the RAM 202.
In step S3502, the data model definition 403 of the repository definition unit 400 is read into the RAM 202.
In step S3503, the input / output definition 404 of the repository definition unit 400 is read into the RAM 202.
In step S3504, the business process definition 405 of the repository definition unit 400 is read into the RAM 202.
In step S3505, the database definition 401 of the repository definition unit 400 is read into the RAM 202.
In step S3506, the user theme file 406 of the repository definition unit 400 is read into the RAM 202.

In step S3507, information is acquired from each definition / file of the repository definition unit 400 read into the RAM 202, and the source code of the Web application is generated. The generated source code includes not only a file in which a programming language is described, but also a file used for operating a Web application such as HTML, JSP, and Javascript (registered trademark). That is, step S3507 is a step showing an example of a process for generating an application program. That is, step S3507 is a functional unit that generates an application program including an application screen to which the edited template is applied.

Further, step S3507 is a functional unit for constructing an application that outputs an application screen including parts. Further, step S3507 is a functional unit for constructing an application that outputs an application screen using the generated style sheet.
In step S3508, a style sheet is generated using the user theme file 406 read into the RAM 202 in step S3506.
This is the end of the description of the flowchart for generating the Web application.

Next, a sample screen of the Web application generated by the flowchart of FIG. 35 will be described. FIG. 36 is an image of the product search screen 601. FIG. 37 is an image of the product purchase screen 602. These Web application screens are images in which the user theme file 406 (design template file) created by the theme editor unit 410 is applied to the layout parts (screen components) created by the layout editor unit 420. As described above, in Web application development, it is possible to provide an integrated development tool in which the layout editing function and the design template editing function are closely linked. Therefore, the developer links the layout editing function and the design template editing function. This makes it possible to solve the problem that the Web application development work is inefficient.
A mechanism can be provided.
This is the end of the description of the first embodiment.
As described above, it is possible to provide a mechanism for streamlining the work related to editing the screen design template.

[Second Embodiment]
Next, the second embodiment will be described with reference to the drawings.
In the first embodiment, when creating a theme having a unified design on all screens, a method of selecting the theme component 412 from the theme editor, changing the design such as color and font, and creating a user theme file. Was explained.

On the other hand, when a user comes up with a design while creating an individual screen design on the layout editor screen, he / she may want to apply the design to other screens in a unified manner.

In the second embodiment, in such a case, the theme editor having the same category as the corresponding layout part can be started by double-clicking the corresponding layout part on the layout editor screen.

FIG. 38 is an example in which the design of the purchase button 3801 is desired to be saved as a theme even when the screen is designed on the layout editor screen. When the purchase button 3801 is double-clicked, the theme editor screen 3900 shown in FIG. 39 is started, and the user theme file being applied is opened on the layout editor screen. If the theme being applied is an embedded theme file, copy the embedded theme file, create it as a new user theme file, and open the user theme file. Further, in the opened theme editor screen 3900, the theme part 3901 having the same category attribute value as the purchase button 3801 that was double-clicked is selected. As a result, you can immediately edit the design of your favorite screen parts as parts of the design template.

Next, a procedure for displaying the theme editor unit 410 from the layout editor unit 420 will be described with reference to FIG. 40. FIG. 40 is a diagram showing an example of a processing flowchart for displaying the theme editor section from the layout editor section. The following steps are all executed by the CPU 201 of the program development device 101.

In step S4001, the layout editor screen accepts the designation of the layout component to be saved as a theme. That is, step S4001 is a step showing an example of a process of receiving a user's instruction for the displayed screen component.

In step S4002, it is determined whether or not the theme being applied exists on the layout editor screen. That is, step S4002 is a step showing an example of a process of determining whether or not the template applied to the displayed application screen is a template created by the user. If the embedded theme file is being applied, the process proceeds to step S4003. If the theme has not been applied, proceed to Tep S4004. If the user theme file is being applied, the process proceeds to step S4006.
In step S4003, the embedded theme file is copied and created as a new user theme file.
In step S4004, it is created as a new user theme file.

In step S4005, the user theme file newly created in step S4003 or step S4004 is used as the theme file to be opened in step S4007.
In step S4006, the user theme file being applied is set as the theme file to be opened in step S4007.

From the above, the developer himself selects the template to be edited on the design template edit screen depending on whether the design template being applied on the layout edit screen is "default template", "user-created template", "template not applied", etc. You can solve the problem that you have to do. In other words, the developer can create and edit the design edited on the layout edit screen as a design template without being aware of whether it is the theme file currently being applied.

In step S4007, the theme editor screen drawing process (FIG. 32) is performed. That is, step S3201 and step S3208 of FIG. 32 performed in step S4007 use the template when it is determined that the template is created by the user, and the template is used when it is determined that the template is not created by the user. This is a step showing an example of a process of displaying the key and value of the property corresponding to the screen component for which the instruction is received, using the template created by copying the template.
In step S4008, when the theme is saved in step S4001, the property of the layout component for which the designation is accepted is acquired.

In step S4009, the properties of the theme parts in the same category as the layout parts category acquired in step S4008 are displayed in the property editor section of the theme editor screen. That is, step S4009 is a step showing an example of a process of displaying a property key and a value corresponding to a screen component that has received an instruction. Specifically, when the category attribute value = "button" of the layout part that has been specified to save the theme in step S4001, the property of the theme part of the category attribute value = "button" is set to the property editor part of the theme editor screen. indicate.

As described above, the layout editing screen and the design template editing screen can be organically linked, and the trouble of the developer can be saved. In other words, in Web application development, if the developer wants to apply the same design to other screens while editing the screen layout of one screen, the layout edit screen and the design template edit screen are organically linked. Therefore, when creating or editing a design edited on the layout edit screen as a design template, it is possible to solve the problem that it takes time and effort.
This is the end of the description of the second embodiment.

[Third Embodiment]
Next, the third embodiment will be described with reference to the drawings.
In the first embodiment, when creating a theme having a unified design on all screens, a method of selecting the theme component 412 from the theme editor, changing the design such as color and font, and creating a user theme file. Was explained.

In the third embodiment, after selecting the theme component 412 from the theme editor, the property editor unit 413 is used to provide a mechanism for making the work of changing the design such as color and font more efficient.

Using the flowchart of FIG. 42, a procedure for changing the design of colors, fonts, and the like using the property editor unit 413 will be described. FIG. 42 is a diagram showing an example of a flowchart for updating the user theme file in the third embodiment. The following steps are all executed by the CPU 201 of the program development device 101. In the third embodiment, the flowchart of FIG. 31 in the first embodiment is replaced with FIG. 42, and the same step numbers are assigned to the same processes as those in the steps of FIG. 31, and the description thereof will be omitted.

In step S4201, when a plurality of theme parts 412 displayed in the theme editor unit are selected, the setting of what is displayed in the property editor unit 413 is determined. Specifically, the set value set in advance in the development tool is determined, and in the case of "common property display", the process proceeds to step S3105, and in the case of "multiple component property display", the process proceeds to step S4202.
In step S4202, the property list of the parts acquired in step S3104 is displayed side by side (4302 and 4303 in FIG. 43).

In step S4203, different values are identified and displayed by the same property key from the property list of the parts acquired in step S3104. For example, it is displayed in red so that it can be identified that the values of 4304 and 4305 in FIG. 43 are different, or a button is displayed as in 4304 and 4305 in FIG. 43. That is, in step S4202 and step S4203, when displaying the property key and value of the component that has received the instruction, the process of displaying the value set corresponding to the same key in the other component in the vicinity of the value is displayed. This is a step showing an example.

As a result, property keys that set different values for multiple parts can be easily identified, which makes it possible to streamline the editing work for unifying the design and displaying the features of the design. .. In the present embodiment, the method of identifying that the values are different is to display in red or to display a button, but the present invention is not limited to this, and other identification such as blinking display, circled, etc. It may be a method.

In step S4204, the selection of which of the different values identified and displayed in step S4203 is applied is accepted. Specifically, it accepts the pressing of the arrow button 4304 and the arrow button 4305.

In step S4205, the value of the application destination is overwritten with the value of the application source according to the button that has received the press. Specifically, when the button that has received the press is the arrow button 4304, the value 4304 that is the application source overwrites the value 4305 that is the application destination. On the other hand, when the button that accepts the press is the arrow button 4305, the value 4305 that is the application source overwrites the value 4304 that is the application destination. As a result, different values can be easily changed to the same value in a plurality of parts, so that the editing work for unifying the design can be made more efficient.

In step S4206, an object indicating which part of the theme component 412 of the theme editor section is affected by the property value that accepts the change input in step S3107 is displayed. That is, step S4206 is a step showing an example of a process of identifying and displaying which design of the template screen the value for which the change is accepted affects the design. Specifically, when the selection of the theme component 412 displayed in the theme editor section of the theme editor screen 4400 of FIG. 44, for example, the text field 4401 is accepted, the property list 4402 related to the text field 4401 is displayed in the property editor section 413. , It is assumed that the value "3pt" of the "padding" key of the "arrangement" property is selected from among them (4403 in FIG. 44).

In that case, an object (arrow 4404 in FIG. 44) indicating which part of the text field 4401 displayed in the theme editor section the value of the "padding" key affects is displayed. As a result, it is possible to easily recognize where the value of the property editor section 413 is reflected in the component in the theme editor section. In the present embodiment, the object is displayed when the property editor section 413 accepts the change input of the property value, but the present invention is not limited to this, and the property key or the property value is displayed in the property editor section 413. The object may be displayed when is selected.
In step S4207, the value for the key of another part having the same key as the property key is acquired.

In step S4208, the value acquired in step S4207 is displayed (4503 in FIG. 45). Specifically, when the selection of the theme component 412 displayed in the theme editor section of the theme editor screen 4500 of FIG. 45, for example, the text field 4501 is accepted, the property list 4502 related to the text field 4501 is displayed in the property editor section 413. , It is assumed that the value "18pt" of the "field-size" key of the "font" property is selected from among them (4502 in FIG. 45).

In that case, in the theme currently being edited, the value for the "font-size" key of another part having the "font-size" key is acquired. Here, there are three parts, "title", "button", and "link", as other parts having the "font-size" key, and the values for the "font-size" key in the three parts are "24pt" and "11pt", respectively. Assuming that it is "11pt", a table like 4503 in FIG. 45 is displayed. This makes it possible to easily recognize what values are set for multiple parts that have the same property key, making editing work that unifies the design and brings out the features of the design more efficient. It will be possible to change.

In step S4209, the content of the value change for the key received in step S3107 is determined. If the change is a value, the process proceeds to step S4210, if the change is an object, the process proceeds to step S4211, and if an existing theme is selected, the process proceeds to step S4212. That is, step S4209 is a step showing an example of a process of accepting the selection of the stored design template according to the instruction of the user in order to change the value corresponding to the displayed property key. Further, step S4209 is a step showing an example of a process of accepting a user's operation for the displayed object for identification display.

For example, when the value “3pt” of 4403 in FIG. 44 is changed to “5pt”, it is regarded as the change of the value, and the process proceeds to step S4210. When the size of the arrow 4404 in FIG. 44 is changed by the operation of the user's mouse or the like, it is regarded as the change of the object, and the process proceeds to step S4211. Further, when the existing theme is selected in the combo box 4603 of FIG. 46, it is regarded as the selection of the existing theme, and the process proceeds to step S4212.

Here, FIG. 46 will be described. FIG. 46 is a diagram showing an example of existing theme selection as the value of the property editor unit 413 in the third embodiment.
Specifically, when the selection of the theme component 412 displayed in the theme editor section of the theme editor screen 4600 of FIG. 46, for example, the text field 4601 is accepted, the property list 4602 related to the text field 4601 is displayed in the property editor section 413. , When the value of the "field-size" key of the "font" property is selected, the combo box 4603 is displayed (4603 in FIG. 46).

The combo box 4603 can not only input a value but also have an existing theme file name as an option and select one from those options. When the value is input, it is regarded as the change of the value, and the process proceeds to step S4210. If the existing theme file name is selected, it is regarded as the selection of the existing theme, and the process proceeds to step S4212.

In step S4210, the received input value is acquired.
In step S4211, the size of the changed object is acquired as a value. That is, step S4211 and step S3110 are steps showing an example of a process of changing the value corresponding to the displayed property key according to the received operation.

Specifically, when the size of the arrow 4404 in FIG. 44 is expanded from "3pt" to "5pt" by the operation of the user's mouse or the like, "5pt" is acquired as the changed value. In the present embodiment, the object is an arrow, but the object is not limited to this, and for example, a box in which text is surrounded by a frame may be used as an object. That is, in addition to changing the size of the arrow, the property value may be changed by shifting the position of the box or changing the size. As a result, the design can be edited by visually changing the size and position of the object without changing the value of the property editor section 413, so that the editing work can be made more efficient. ..

In step S4212, the value corresponding to the property key is acquired from the existing theme file selected by the combo box 4603. That is, step S4212 and step S3110 are steps showing an example of a process of changing the value corresponding to the displayed property key by using the property value stored as the design template for which the selection is accepted. As a result, by selecting an existing theme, it is possible to unify the same design as the selected existing theme without directly inputting a value in the property editor section 413, so that the editing work can be made more efficient. Will be.
The following processing is the same as the flowchart of FIG. 31.
This is the end of the description of FIG. 42.
This is the end of the description of the third embodiment.

As described above, it is possible to provide a mechanism for streamlining the work related to editing the screen design template. In addition, in Web application development, since it is possible to provide an integrated development tool in which the layout editing function and the design template editing function are closely linked, the developer should link the layout editing function and the design template editing function. It is possible to solve the problem that the Web application development work is inefficient.

As described above, a recording medium on which a program that realizes the functions of the above-described embodiment is recorded is supplied to the system or device, and the computer (or CPU or MPU) of the system or device stores the program in the recording medium. Needless to say, the object of the present invention can be achieved by reading and executing.

In this case, the program itself read from the recording medium realizes the novel function of the present invention, and the recording medium on which the program is recorded constitutes the present invention.

Recording media for supplying programs include, for example, flexible disks, hard disks, optical disks, magneto-optical disks, CD-ROMs, CD-Rs, DVD-ROMs, magnetic tapes, non-volatile memory cards, ROMs, EEPROMs, and silicon. A disk or the like can be used.

Further, by executing the program read by the computer, not only the function of the above-described embodiment is realized, but also the OS (operating system) or the like running on the computer is actually operated based on the instruction of the program. Needless to say, there are cases where a part or all of the processing is performed and the processing realizes the functions of the above-described embodiment.

Further, after the program read from the recording medium is written in the memory provided in the function expansion board inserted in the computer or the function expansion unit connected to the computer, the function expansion board is based on the instruction of the program code. It goes without saying that there is a case where the CPU or the like provided in the function expansion unit performs a part or all of the actual processing, and the function of the above-described embodiment is realized by the processing.

Further, the present invention may be applied to a system composed of a plurality of devices or a device composed of one device. It goes without saying that the present invention can also be applied when it is achieved by supplying a program to a system or an apparatus. In this case, by reading the recording medium in which the program for achieving the present invention is stored into the system or the device, the system or the device can enjoy the effect of the present invention.

The form of the above program may consist of object code, program code executed by an interpreter, script data supplied to an OS (operating system), and the like.

Further, by downloading and reading a program for achieving the present invention from a server, database, or the like on the network by a communication program, the system or device can enjoy the effect of the present invention. It should be noted that all the configurations in which each of the above-described embodiments and modifications thereof are combined are also included in the present invention.

101 Program development device 102 Program development server 103 Database server 104 Application client 105 Application server 106 Network

Claims (12)

An information processing device that designs multiple screens of a Web application.
Input / output definition management means that manages input definition information that defines items input on the screen of the Web application and output definition information that defines items to be output on the screen of the Web application as input / output definition information.
Control to display a list of a plurality of display components , which are templates of a design commonly used on the plurality of screens and which are templates corresponding to each item of the plurality of screens defined in the input / output definition information. and template parts display means for,
Property value reception that accepts an instruction to change the value of the display property corresponding to the display component selected by the user among the plurality of display components in a state where the plurality of display components are displayed by the control by the template component display means. Means and
Corresponds to the input / output definition information according to the value of the display property based on the instruction received by the property value receiving means and the item defined by the input / output definition information managed by the input / output definition management means. Display control means that controls the display of the screen,
An information processing device characterized by being equipped with. A style sheet displayed by applying the value of the display property of each item defined as the input / output definition information to the Web application as the value of the display property of the display component based on the instruction received by the property value receiving means. The information processing apparatus according to claim 1, further comprising a style sheet generating means for generating the above. The template part display means is
Claims in accordance with the instruction to change the value of the display property based on the instruction received by the property value receiving means, and controls to display a list of the display component is a template of each item as a set The information processing apparatus according to 1 or 2. Further having a storage means for storing the value of the display property of each display component based on the instruction received by the property value receiving means.
The display control means
The information processing apparatus according to any one of claims 1 to 3, wherein the value of the display property of the display component stored by the storage means is applied to the corresponding item and controlled to be displayed. Further provided with an application construction means for constructing an application that outputs the screen of the Web application,
The application construction means
The information processing apparatus according to any one of claims 2 to 4, wherein an application for outputting a screen of a Web application using a style sheet generated by the style sheet generating means is constructed. An item designation receiving means that accepts the designation of items on the screen displayed by the display control means, and
The property value receiving means is
The information processing apparatus according to claim 1 to 5, wherein the setting of the value of the display property of the display component, which is a template corresponding to the item received by the item designation receiving means, is received updatable. It is further provided with a design influence identification display means for identifying and displaying which design of the screen displayed by the display control means and how the value for which the change is accepted by the property value receiving means affects. The information processing apparatus according to any one of claims 1 to 6. The user operation receiving means and the property value receiving means that accept the user's operation with respect to the object for identification display displayed by the design influence identification display means
The information according to claim 7 , wherein the design influence identification display means updatablely accepts the setting of the value of the display property corresponding to the affected display component according to the operation received by the user operation reception means. Processing equipment. The property value receiving means is
When there are a plurality of parts that have received the user's operation by the user operation receiving means, the keys and values of the display properties of the parts that have received the user's operation by the user operation receiving means are displayed side by side for each part, and the same key is supported. The information processing apparatus according to claim 8 , wherein the information processing apparatus according to claim 8 is characterized in that the values set in the above are identified and displayed differently among the parts. The property value receiving means is
When displaying the key and value of the property of the part for which the instruction is received by the user operation receiving means, the value set corresponding to the same key in other parts is displayed in the vicinity of the value. The information processing apparatus according to claim 8 or 9. A processing method in an information processing device that designs multiple screens of a Web application.
The information processing device
An input / output definition management step that manages input definition information that defines an item to be input on the screen of the Web application and output definition information that defines an item to be output on the screen of the Web application as input / output definition information.
Control to display a list of a plurality of display components , which are templates of a design commonly used on the plurality of screens and which are templates corresponding to each item of the plurality of screens defined in the input / output definition information. and template parts display step of,
Property value reception that accepts an instruction to change the value of the display property corresponding to the display component selected by the user among the plurality of display components while the plurality of display components are displayed by the control by the template component display step. Steps and
Corresponds to the input / output definition information according to the value of the display property based on the instruction received by the property value receiving step and the item defined by the input / output definition information managed by the input / output definition management step. Display control steps that control the display of the screen,
A processing method characterized by. A program that can be executed by an information processing device that designs multiple screens of a Web application.
Input / output definition that manages input definition information that defines items input to the screen of the Web application and output definition information that defines items to be output on the screen of the Web application as input / output definition information. Management means and
Control to display a list of a plurality of display components , which are templates of a design commonly used on the plurality of screens and which are templates corresponding to each item of the plurality of screens defined in the input / output definition information. and template parts display means for,
Property value receiving means for receiving an instruction to change the value of the display property corresponding to the display component selected by the user among the plurality of display components in a state where the plurality of display components are displayed by the control by the template component display means. When,
Corresponds to the input / output definition information according to the value of the display property based on the instruction received by the property value receiving means and the item defined by the input / output definition information managed by the input / output definition management means. Display control means that controls the display of the screen,
A program characterized by functioning as.

Images