JP2017059237A - Information processor, and processing method and program of the same - Google Patents

Abstract

PROBLEM TO BE SOLVED: To provide a system that makes work regarding editing of a template in screen design efficient.SOLUTION: An information processor edits the design of a template screen having a plurality of components to create a style sheet, displays a template editing screen for editing a value corresponding to a key of a property of a design of the component included in the template screen, and displays a component to which the design is applied. The processor receives an instruction of a user for the displayed component. The processor displays a key and a value of a property corresponding to a component for which the instruction has been received out of the property of the design. The processor receives a change of a value corresponding to the key of the displayed property. The processor updates display of the component according to the value whose change was received. The processor creates the style sheet by using the key and the value of property of the component whose display was updated.SELECTED DRAWING: Figure 21

Description

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

A Web application generally has a plurality of screens such as a search screen and a registration screen. Each of the plurality of screen designs is desired to have a certain unity, such as color and font. Such a unified design template is called a “theme”.
Conventionally, as shown in Patent Document 1, a mechanism for editing a screen design using a graphical tool for each screen is shown.

Japanese Patent Application No. 2008-313156

  However, in the mechanism of Patent Document 1, when a design of a certain screen is modified, it is necessary to perform the same design modification on other screens, which is inefficient and increases the number of work steps.

  On the other hand, there is a graphical tool for creating a style sheet for managing a template for a multi-screen design. By using the preview function of this tool, the created style sheet can be applied to the sample screen prepared by the tool, and the “theme” that is the design template can be confirmed.

  However, such a tool displays many property keys and values contained in the style sheet. When the property value is changed by the user, the sample screen corresponding to the property key whose value has been changed. This is a mechanism in which the display of the parts displayed in the item is updated. Therefore, there is a problem that the user has to find and specify the property that the user wants to change from among many properties and change the value.

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

  An information processing apparatus for editing a design of a template screen having a plurality of parts and generating a style sheet, and a template editing screen for editing a value corresponding to a property key of a part design included in the template screen The template editing screen display means for displaying the template, the template editing screen displayed by the template editing screen display means, the template part displaying means for displaying the part to which the design is applied, and the template part displaying means A template part instruction receiving unit that receives a user instruction with respect to a part, and a property display unit that displays a property key and a value corresponding to the part of the design property corresponding to the part received by the template part instruction receiving unit And the property Property value change accepting means for accepting a change in the value corresponding to the property key displayed by the display means, and template part display updating for updating the part display according to the value accepted by the property value change accepting means. An information processing apparatus comprising: means; and style sheet generation means for generating the style sheet using a property key and value of a component whose display is updated by the template component display update unit.

  ADVANTAGE OF THE INVENTION According to this invention, the structure which improves the work which concerns on the edit of the template of a screen design can be provided.

1 is a system configuration diagram illustrating an example of configurations of a program development apparatus, a program development server, a database server, an application client, and an application server according to the present invention. It is a block diagram which shows an example of each hardware constitutions applicable as the program development apparatus concerning this invention, a program development server, a database server, an application client, and an application server. It is an example of the block diagram which shows the software structure of embodiment of this invention. It is a block diagram of a program development apparatus. It is a figure which shows an example of an ER diagram. It is a figure which shows an example of a 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. It is a figure which shows an example of the application definition. 6 is a diagram illustrating an example of a data model definition 403. FIG. 6 is a diagram illustrating an example of a data model definition 403. FIG. 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 goods search screen. It is a figure which shows an example of the input / output definition of the goods purchase screen. It is a figure which shows an example of the input / output definition of the goods purchase result screen. It is a figure which shows an example of the input / output definition of an 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 a 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. FIG. It is a figure which shows an example of the theme of autumn created based on the theme of summer using the theme editor screen 2100. FIG. It is a figure which shows an example of the theme of winter produced based on the theme of summer using the theme editor screen 2100. FIG. It is a figure which shows an example of the property editor part 413 at the time of selecting a label among the theme components 412. FIG. FIG. 10 is a diagram illustrating an example of a property editor unit 413 when a button is selected from the theme parts 412. It is a figure which shows an example of the property editor part 413 at the time of selecting a link among the theme components 412. FIG. It is a figure which shows an example of the property editor part 413 at the time of selecting several theme parts 412 among the theme parts 412. FIG. It is a figure which shows an example of the content of a theme file. It is a figure which shows an example of the flowchart of user theme file preparation. It is a figure which shows an example of the flowchart of a user theme file update. It is a figure which shows an example of the flowchart of 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 a web application production | generation flowchart. It is a figure which shows an example of a web application screen image. It is a figure which shows an example of a web application screen image. It is a figure which shows an example which performs theme part 412 selection from a layout editor part. It is a figure which shows an example which performs theme part 412 selection from a layout editor part. It is a figure which shows an example of the process flowchart which displays a theme editor part from a layout editor part. It is a figure which shows an example of the matching table of the theme component 412 and the property key in a theme property file. In 3rd Embodiment, it is a figure which shows an example of the flowchart of a user theme file update. In 3rd Embodiment, it is a figure which shows an example of the property editor part 413 at the time of selecting the some theme component 412 among the theme components 412. FIG. In a 3rd embodiment, it is a figure showing an example of a discernment display where a property selected in property editor part 413 affects a part. FIG. 20 is a diagram illustrating an example of a value display of another component having the same property key as the property key selected by the property editor unit 413 in the third embodiment. In 3rd Embodiment, it is a figure which shows an example of the existing theme selection as a value of the property editor part 413. FIG.

[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 apparatus 101 (information processing apparatus) defines a screen layout, a database search instruction, and the like according to the developer's operation. The program development apparatus 101 alone may accept input from the user (Web application developer) and cause the program development server 102 described later to perform actual program generation processing and application generation processing. You may process from generation to application generation.

  In this embodiment, the application generated by the program development apparatus 101 is a Web application. However, the application is not limited to this, and an application or embedded software that operates on an information processing apparatus such as a mobile phone, a smartphone, or a tablet. The application does not have to be communication using Web technology.

  The program development servers 102a to 102b (information processing apparatuses) develop a program in accordance with a developer instruction input by the program development apparatus 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 apparatuses) are databases used by the developed application. In the present invention, the database servers 103a to 103b (information processing apparatuses) may be used for operation confirmation during development. For example, the database server 103 may be configured by the same device as the program development device 101 for use by a developer, or may be arranged in a network 106 such as a LAN (database server 103a). Moreover, you may arrange | position on the internet or a cloud (database server 103b). When the program development apparatus 101 cooperates with the program development server 102, the program development server 102 and the database server 103 may be configured in the same apparatus.

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

The application clients 104a to 104b (information processing apparatuses) are user input terminals that operate application programs developed by the program development apparatus 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 in the cloud (application client 104b). An information processing apparatus such as a portable terminal may be used.

FIG. 2 is a block diagram showing an example of each hardware configuration applicable as a program development apparatus, 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.

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

The input controller 205 controls 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 apparatus.
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 a 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, and device 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, and smart media.
The communication I / F controller 208 executes communication control processing with an external device via a network.

A 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 necessary.


FIG. 3 is an example of a block diagram illustrating a software configuration according to the embodiment of this invention.
The program development apparatus 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 a template.

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

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

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

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

  The style sheet generation unit 313 is a functional unit that generates a style sheet using the property key and value of the component whose display is updated by the template component display update unit 312.

  The property display unit 304 displays the property keys and values included in all of the plurality of components for which the instruction has been received by the template component instruction receiving unit 303 when there are a plurality of components for which the instruction has been received by the template component instruction receiving unit 303. It is a functional part.

The template part display unit 302 corresponds to the part for which the instruction has been received by the template part instruction receiving unit 303 and the property for which the change has been received by the property value change receiving unit 305 in accordance with the property value received by the property value change receiving unit 305. It is a functional unit that updates the display with the parts to be performed.
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 parts, which is output when the program generated by the program generation unit 306 operates.
The layout editing screen display unit 314 is a functional unit that displays a layout editing screen for editing the layout of components displayed on the application screen.

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

The layout editing screen application unit 315 is a functional unit that applies a design to the components included in the layout editing screen displayed by the layout editing screen display unit 314 according to the value received by the property value change receiving unit 305.
The screen component instruction receiving unit 308 is a functional unit that receives a user 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 a user instruction for the component displayed by the layout editing screen display unit 314.
The property display unit 304 is a functional unit that displays a property key and a value corresponding to the screen component whose instruction is received by the screen component instruction receiving unit 308.

  The property display unit 304 is a functional unit that displays a property key and a value corresponding to the screen component for which an instruction has been received by the layout editing screen component instruction receiving unit 316.

  The template determination unit 309 is a functional unit that determines whether a template applied to the application screen displayed by the editing screen display unit 307 is a template created by the user.

  The template determination unit 309 is a functional unit that determines whether the template applied to the application screen displayed by the layout editing screen display unit 314 is a template created by the user.

  When the property display unit 304 receives a user instruction from the screen component instruction reception 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 the unit 309 that the template is not created by the user, a template created by copying the template is used, and the property key and value corresponding to the screen component received by the screen component instruction receiving unit 308 are set. It is a functional part to be displayed.

When the property display unit 304 receives a user instruction from the layout editing screen component instruction reception unit 316 and the template determination unit 309 determines that the template is created by the user, the property display unit 304 uses the template. If it is determined by the template determination unit 309 that the template is not created by the user, a template created by copying the template is used, and the property corresponding to the screen component whose instruction is received by the layout editing screen component instruction receiving 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 an application screen that is output when an application program operates.
The template editing unit 311 is a functional unit that edits a design template of 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 property key and value 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 components.

  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 selection of a design template stored in the design template storage unit 317 in accordance with a user instruction to change a value corresponding to the property key displayed by the property display unit 304. Part.

  The property value change accepting unit 305 uses the property value stored in the design template storage unit 317 as the design template accepted by the design template selection unit 319 and uses the property value displayed by the property display unit 304 as a property key. It is a functional unit 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 accepted by the property value change acceptance unit 305 affects.

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

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

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

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

FIG. 4 is a configuration diagram of the Web application automatic generation device. The Web application automatic generation apparatus is an apparatus for automatically generating a Web application based on a definition file defined by a user who develops a Web application. The repository definition unit 400, the theme editor unit 410, the layout editor unit 420, and the web application generation unit 430 are configured. 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.
The theme editor unit 410 includes a theme drawing unit 411, a theme component 412, and a property editor unit 413.

The theme drawing unit 411 is preliminarily provided with component parts used on the Web screen so that the entire image of the theme can be understood. Here, the component part refers to the theme part 412.
The layout editor unit 420 includes a layout drawing unit 421 and a layout component 422.

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

  FIG. 21 is a diagram illustrating an example of the theme editor unit 410, and a portion indicated by 2100 is a theme drawing unit 411. The theme part 412 is displayed on the theme drawing unit 411. A property editor unit 413 exists in 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 (to be described later with reference to FIG. 29), and “font” and “color” according to the property keys and values included in the entry A theme part 412 reflecting “decoration” or the like is displayed. The property editor unit 413 displays the property key and value 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 property keys and values included in the template. The property editor unit 413 is a template editing screen for editing a value corresponding to a part design property key included in the template screen. The theme editor unit 410 is a functional unit that edits a design template of 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 component 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. on the layout component, and displays the contents of the input / output definition 404 on the screen.

  In other words, the layout editor unit 420 is a functional unit that displays an editing screen for editing an application screen having a plurality of screen parts, which is output when the generated program is operated. The layout editor unit 420 is a functional unit that edits the layout of the application screen that is output when the application program operates. The layout editor unit 420 is a functional unit that displays a layout editing screen for editing the layout of components 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, the embedded theme file 432 or the user theme file 406 is selected and read according to the user's specification. The generation processing unit 431 generates source code 441 and HTML / JSP / JavaScript (registered trademark) 442 from the read definition file. Further, a style sheet 443 is generated from the theme file. The source code 441 is compiled after being generated by the generation processing unit. That is, the Web application generation unit 430 is a functional unit that generates an application program. 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 Web application example.

  FIG. 5 is an ER diagram of an application sample to be described. 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 merchandise 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 user login. Display search results on the same screen. When a product to be purchased is selected from the search result list, a transition to a product purchase screen 602 is made. When an information input for purchasing a product is received and the purchase button is pressed, a product purchase result screen 603 is displayed.
FIG. 7 is a diagram illustrating an example of a tree structure of a repository definition for generating an application.
The details of repository definition will be described below.
FIG. 8 is a diagram illustrating an example of the database definition 401. Information 801 for database connection is recorded. Reference numeral 802 denotes a detailed view 801.

FIG. 9 is a diagram illustrating an example of the application definition 402. The application definition 402 is divided into an input / output list 901 and a belonging input / output 902 area. The input / output list 901 displays all input / output definitions stored in the repository definition unit 400 in an initial state. In the belonging input / output 902, an input / output definition belonging to an application is set. Only the input / output definition to which it belongs belongs to the application generation target.
FIG. 10 is a diagram illustrating 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 illustrating an example of the data model definition 403 as in FIG. This data model definition 403 is a definition of the order data model shown in FIG.

  FIG. 12 is a diagram illustrating an example of the data model operation definition indicating the data operation of the order data model. It holds the definition of order registration (operation code: JUCHU_INSERT). As the operation logic, definition is made to register each input data of JUCHI_ID, SHOHIN_ID, QUANITY, and DELIVER transmitted from the screen in the order data model.

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

  FIG. 18 is a definition indicating 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 of MENU_TOP as a menu. (1801 in FIG. 18)

FIG. 19 is a diagram illustrating an example of a business process definition for order registration processing. A process is described in which an order data is received from an order registration screen (not shown), an order registration (JUCHU_INSERT code) process is executed, and the result is returned to the screen.
This completes the description of the repository definition. The repository definition includes user theme files.

Next, a method for creating a user theme file will be described.
FIG. 20 is a diagram illustrating an example of a screen for newly creating a user theme file. The new theme creation screen 2000 is displayed by a method such as right-clicking the “theme” portion of the repository definition in FIG. 7 and selecting “create user theme file” from the pop-up menu. The new theme creation screen 2000 includes a code field 2001, a name field 2002, and a copy source theme field 2003. The input value to the code field 2001 is the file name of the user theme file to be created.

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

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

Here, the contents of the theme file will be described with reference to FIG. FIG. 29 is a diagram illustrating an example of the contents of a theme file. There are two types of theme files, “user theme file 406” and “embedded theme file 432”. The content of the theme file is a format in which the property key and property value are connected by “=” (equal). It has become.

In the present embodiment, the style sheet 443 is generated from the theme file when generating the Web application. However, 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 by grouping a plurality of properties of the style sheet 443, or only those necessary for developing the Web application are carefully selected. In order to produce an effect that management is easy for a development tool, 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 this embodiment.

  Next, properties related to the theme part 412 will be described with reference to FIG. FIG. 41 is a diagram showing an example of the association table 4100 between the category attribute value 4101 of the theme part 412 and the property key 4104 of the theme property file. This association table 4100 is stored in the external memory 211 of the program development apparatus 101. In this embodiment, the association between the category attribute value 4101 of the theme part 412 and the property key 4104 of the theme property file is managed by a table. However, the present invention is not limited to this. You may manage by an array or a variable.

Specifically, in FIG. 21, when a theme part 412 with a category attribute value 4101 = “label” is selected from the theme parts 412 drawn on the theme drawing part 2101 by the user, it is displayed on the property editor part 2102. The property key to be used is 4104 in the correspondence table 4100.
LABEL. fontSize
LABEL. fontWeight
LABEL. bakgroundColor
LABEL. borderColor
LABEL. foregroundColor
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 on the property editor 2102. At that time, using the value of the property type 4102, each property is divided into “B. Font”, “C. Color”, “D. Decoration”, and “E. Placement” and displayed on the property editor unit 2102.

When a value change input is received, the display of the theme drawing unit 2101 is updated according to the changed property value. Each theme part 412 has a category attribute, and the theme part 412 having the same category attribute value has the same property even if it is another theme part 412. When the change of the property value is accepted, the display is updated for all theme parts 412 having the same category attribute value.
FIG. 22 is a diagram illustrating an example of a spring theme created based on a summer theme using the theme editor screen 2100.
FIG. 23 is a diagram illustrating an example of an autumn theme created based on a 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 list here is only a sample, but if you use the theme editor of the present invention, you can unify and set the design of colors, fonts, etc., so you can select themes according to the season, color tone, usage, etc. Can be easily created.
Next, details of the property editor unit 413 will be described.

  252 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 the value related to the “theme” of the selected label 2501 in the “A. Theme” area. Specifically, “HTML version” “category” “theme classification” “parent category” “name”. These are properties whose values cannot be changed by the user, and there are properties that cannot change their values.

  “Category” in the property editor section 2502 is information indicating the type of the selected theme part 412 and includes values such as “label”, “button”, and “link” (4101 in FIG. 41). The theme parts 412 in 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 2502 is a screen for editing property keys and values included in the template. The property editor 2502 is a template editing screen for editing values corresponding to the part design property keys included in the template screen.

The “parent category” of the property editor section 2502 is a category corresponding to the parent of the “category” of the theme part 412. If no value is set in the property of the theme part 412, the property value of “parent category” is inherited. Specifically, it can be seen from the property editor section 2502 in FIG. 25 that the parent category of the label is a page, and from 4105 in FIG. 41, if no value is set for the “font size” of the label, Inherits 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” in the property editor section 2502.

  Reference numeral 2602 in FIG. 26 is an example of the property editor unit 413 when the button 2601 is selected from 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 in FIG. 25 is selected, but one when the button 2601 is selected. Further, “E. arrangement” is not displayed because the button 2601 does not have a property related to “E. arrangement”. From 4102 in FIG. 41, there are two label “decoration” properties, one button “decoration” property, one label “arrangement” property, and one button “arrangement” property. Because it is zero. As described above, the property editor unit 413 has a feature that the property is extracted and displayed in accordance with the theme part 412 selected by the user.

  Reference numeral 2702 in FIG. 27 is an example of the property editor 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 property of “C. Color” is significantly different from that when the button 2601 in FIG. 26 is selected. This is because, from 4102 in FIG. 41, there are three “color” properties of the button and five “color” properties of the link.

  Reference numeral 2803 in FIG. 28 shows a state of the property editor unit 413 when a plurality of theme parts 412 such as a button 2801 and a link 2802 are selected from the theme parts 412 displayed on the theme editor screen 2800. It can be seen that the properties included in both the buttons 2601 in FIG. 26 and the links 2701 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. It can be seen from 4103 in FIG. 41 that the property included in both the button and the link is “color”. When the 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 the selected theme parts 412 are extracted from the properties of the selected theme parts 412 and displayed, and the property values are collectively changed. There is a feature that can be.

Above, description of the property editor part 413 is complete | finished. The property value set in the property editor unit 413 is stored as a user theme file 406.

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

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, and a new theme file having the file name as the theme code input in step S3002 is created and stored in the external memory 211. That is, step S3005 is a step showing an example of processing for storing the property key and value of the indicated part in association with each other as a design template.
In step S3006, the theme editor screen 2100 is displayed.

In step S3007, the theme parts 2101 of the theme editor screen 2100 displayed in step S3006 are used for the theme component by using the property value colors, fonts, and the like defined in the user theme file created in step S3005. Draw 412.
Details of the processing in step S3007 will be described with reference to FIG.

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

  In step S <b> 3101, the selection of the theme component 412 displayed on the theme editor portion of the theme editor screen 2100 by the user is accepted. For example, a plurality of theme parts 412 can be selected by an operation such as sequentially clicking a plurality of theme parts 412 while pressing the CTRL key. That is, step S3101 is a step showing an example of processing for accepting a user 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. When the number of selected theme parts 412 is plural (≧ 2), the process proceeds to step S3104.

  In step S3103, a property list related to the theme part 412 selected in step S3101 is acquired. Specifically, as described in FIG. 41, a list of properties is acquired from the association table 4100 using the category attribute value of the selected theme component 412.

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

  In step S3105, properties included in all property lists are extracted from the property list for each of the plurality of theme parts 412 acquired in step S3104. Specifically, the properties included in all the property lists are obtained by a logical product set of each property list. Specifically, the property “color” included in both the button 2801 and the link 2802 described in FIG. 28 is this example.

  In step S 3106, the property list acquired in step S 3102 or the property list extracted in step S 3105 is displayed on the property editor unit 2102. That is, step S3106 is a step showing an example of processing for displaying a screen for editing property keys and values included in the template. Step S3106 is a step showing an example of a process for displaying a template editing screen for editing a value corresponding to the key of the design property of the part included in the template screen.

  Step S3106 is a step showing an example of processing for displaying a property key and a value corresponding to a component for which an instruction has been received among the properties included in the template. Step S3106 is a step showing an example of processing for displaying a property key and a value corresponding to a part for which an instruction has been received among design properties.

  Step S3106 is a step showing an example of processing for displaying property keys and values included in all of the plurality of components for which the instruction has been received when there are a plurality of components 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. That is, it is possible to solve the problem that the user has to find and specify the property that the user wants to change from among a large number of properties and change the value.

  In step S3107, a change value input by the user is accepted. That is, step S3107 is a step showing an example of processing for accepting a change in the value of the displayed property. Step S3107 is a step showing an example of a process of accepting a change of a 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 the theme component 412 having the same category attribute value among the theme components 412 displayed in the theme drawing unit 411 (hereinafter, related Identify the theme part). In this embodiment, the related theme part is specified using the category attribute value. However, the present invention is not limited to this, and the theme part having the property key whose change has been accepted in step S3107 is referred to as the related theme part. You may do that.

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 processing for displaying a part to which a template is applied. Step S3109 is a step showing an example of processing for updating the display of the component in accordance with the value of the property whose change has been accepted. Further, step S3109 is a step showing an example of processing for updating the display of the component that has received the instruction and the component corresponding to the property that has received the change in accordance with the value of the property that has received the change.
In step S3110, the user theme file is updated and stored according to the changed property value.
Above, description of a user theme file update flowchart is complete | finished.

Next, a procedure for drawing the theme editor screen 2100 will be described with reference to FIG. FIG. 32 is a diagram illustrating 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 apparatus 101.
In step S3201, when the theme designation is accepted from the selection menu, the designated theme file is read from the external memory 211.

As shown in FIG. 29, the theme file has a plurality of entries by combinations of property keys and property values, and therefore, loop processing is performed from the step S3202 to the step S3209 for the number of entries.
In step S3203, the property key and property value of the next entry are read.
In step S 3204, 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 part 412 is acquired.

  In step S3206, it is determined whether the category attribute value of the entry key matches the category attribute value of the theme part. The category attribute value of the entry property key will be 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 entry property key = “LABEL”. That is, the category attribute value of the property key = the first of the property key. It 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 part 412. If they match, the process proceeds to step S3207. If they do not match, the loop processing from step S3204 to step S3209 is continued.
In step S3207, the property value acquired in step S3203 is set in a variable that matches the property key of the theme component 412.

In step S3208, the theme part 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 processing for displaying a part to which the template is applied on the displayed screen. Step S3208 is a step showing an example of processing for displaying a part to which the design is applied on the displayed template editing 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 description of the flowchart of drawing the theme editor screen.

  Next, a procedure for reflecting the theme created in FIG. 30 and FIG. 31 to the layout editor unit for creating the screen layout of the web application by the user (web application developer) will be described with reference to FIG. A layout editor screen 3300 in FIG. 33 is a diagram illustrating 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 a 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. Thereby, the user can apply and confirm the created theme on the screen of the Web application under development without deploying the Web application under development. The theme is specified by selecting a theme from a theme file list using a drop-down list such as 3303 in FIG.

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

  In step S3401, the user specifies a theme (3303 in FIG. 33) on the layout editor screen 3300 (FIG. 33). That is, step S3401 is a step showing an example of processing for displaying an edit screen for editing an application screen having a plurality of screen parts, which is output when the generated program is operated. Step S3401 is a step showing an example of processing for displaying a layout editing screen for editing the layout of components displayed on the application screen.

In step S3402, a theme file (user theme file 406 or embedded theme file 432) corresponding to the theme accepted 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 being 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 layout component type is acquired from the target input / output item.

In step S3406, all entries matching the layout component type are acquired from the theme file acquired in step S3402. For example, when the layout component type is “label”, the next entry is acquired from the theme property file shown in FIG.
LABEL. backgroundColor = # eeeeeeee
LABEL. foregroundColor = # 333333
LABEL. borderColor = # 2ca9e1
LABEL. borderWidth = 0 0 5px 0 0
LABEL. padding = 3pt

In step S3407, a layout component is drawn using the entry information acquired in step S3406. That is, step S3407 is a step showing an example of processing for applying the property key and value included in the design template to a plurality of screen parts included in the displayed editing screen. Step S3407 is a step showing an example of processing for applying a design to a part included in the displayed layout editing screen in accordance with the value for which the change has been accepted.
Step S3408 is the end of the input / output item loop processing.
Above, description of the flowchart which applies a theme to the layout editor part 420 is complete | finished.

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

Next, a procedure in which the Web application generation unit 430 generates a Web application with the repository definition unit 400 as an input will be described with reference to FIG. FIG. 35 is a diagram illustrating an example of a Web application generation flowchart. The following steps are all executed by the CPU 201 of the program development apparatus 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 S 3504, 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 S 3506, 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 a file used for running a Web application such as HTML, JSP, Javascript (registered trademark), in addition to a file describing a programming language. That is, step S3507 is a step showing an example of processing 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.

Step S3507 is a functional unit that constructs an application that outputs an application screen including components. Step S3507 is a functional unit that constructs an application that outputs an application screen that uses 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 with 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 obtained by applying the user theme file 406 (design template file) created by the theme editor unit 410 to the layout components (screen parts) created by the layout editor unit 420. As described above, 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 in web application development, the developer links 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.
A mechanism can be provided.
Above, description of 1st Embodiment is complete | finished.
As described above, it is possible to provide a mechanism for improving the efficiency of the work related to the editing of the screen design template.

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

  On the other hand, when a user comes up with a design while creating an individual screen design on the layout editor screen, the user may want to apply the design uniformly to other screens.

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

FIG. 38 shows an example of the case where it is desired to save the design of the purchase button 3801 as a theme even when the screen is designed on the layout editor screen. When the purchase button 3801 is double-clicked, a theme editor screen 3900 shown in FIG. 39 is activated to open the user theme file being applied on the layout editor screen. If the theme being applied is an embedded theme file, the embedded theme file is copied and created as a new user theme file, and the user theme file is opened. Further, in the opened theme editor screen 3900, a theme part 3901 having the same category attribute value as that of the purchase button 3801 that has been double-clicked is selected. As described above, it is possible to immediately edit the design of the screen part that the user likes as a part of the design template.

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

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

In step S4002, it is determined whether there is a theme being applied on the layout editor screen. That is, step S4002 is a step showing an example of processing for 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 no theme is applied, the process proceeds to step S4004. If the user theme file is being applied, the process advances to step S4006.
In step S4003, the built-in theme file is copied and created as a new user theme file.
In step S4004, a new user theme file is created.

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

  From the above, the design template being applied on the layout editing screen is “default template”, “template created by user”, “no template applied”, etc., and the developer himself selects the template to edit on the design template editing screen. The problem of having to do can be solved. That is, the design edited on the layout editing screen can be created and edited as a design template without being conscious of whether the developer is currently applying the theme file.

In step S4007, a 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 when it is determined that the template is not created by the user, It is a step showing an example of a process for displaying a property key and value corresponding to a screen component for which an instruction has been received, using a template created by copying a template.
In step S4008, if the theme is saved in step S4001, the properties of the layout component that has been designated are acquired.

In step S4009, the properties of the theme part in the same category as the layout part 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 processing for displaying the property key and value corresponding to the screen component for which the instruction has been received. Specifically, if the category attribute value of the layout component that has been designated to be saved in step S4001 is “button”, the property of the theme component of category attribute value = “button” is displayed in the property editor section 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 labor 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 editing screen and the design template editing screen are organically linked. Therefore, when the design edited on the layout editing screen is created or edited as a design template, it is possible to solve the problem that it takes time.
This is the end of the description of the second embodiment.

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

In the third embodiment, after selecting a theme part 412 from the theme editor, a mechanism is provided that uses the property editor unit 413 to change the design of colors, fonts, and the like more efficiently.

With reference to the flowchart of FIG. 42, a procedure for performing an operation of changing the design of colors, fonts, and the like using the property editor 413 will be described. FIG. 42 is a diagram illustrating an example of a user theme file update flowchart in the third embodiment. The following steps are all executed by the CPU 201 of the program development apparatus 101. In the third embodiment, the flowchart of FIG. 31 in the first embodiment is replaced with FIG. 42, and the same processing as the step of FIG.

In step S4201, it is determined whether to display what is displayed in the property editor 413 when a plurality of theme parts 412 displayed in the theme editor are selected. Specifically, the setting 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 part property display”, the process proceeds to step S4202.
In step S4202, the component property list acquired in step S3104 is displayed side by side (4302 and 4303 in FIG. 43).

  In step S4203, different values are identified and displayed with the same property key in the component property list 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. That is, step S4202 and step S4203 are processes of displaying the value set corresponding to the same key in another component in the vicinity of the value when displaying the property key and value of the component that has received the instruction. It is a step showing an example.

  This makes it possible to easily identify property keys that have different values in multiple parts, thus enabling more efficient editing work that unifies designs and provides design features. . In this embodiment, as a method of identifying that the values are different, the display is made in red or the button is displayed. However, the present invention is not limited to this, and other identifications such as blinking display and circled display are possible. It may be a method.

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

  In step S4205, the application destination value is overwritten with the application source value in accordance with the button that has been pressed. Specifically, if the button that has been pressed is the arrow button 4304, the value 4305 that is the application destination is overwritten with the value 4304 that is the application source. On the other hand, when the button that has been pressed is the arrow button 4305, the value 4304 that is the application destination is overwritten with the value 4305 that is the application source. Thereby, since different values can be easily changed to the same value in a plurality of parts, the editing work for unifying the design can be made more efficient.

  In step S4206, an object indicating which part of the theme part 412 of the theme editor unit the property value that receives the change input in step S3107 is displayed. That is, step S4206 is a step showing an example of processing for identifying and displaying which design on the template screen the value for accepting the change affects. Specifically, when the selection of the theme part 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. Suppose that the value “3pt” of the “padding” key of the “placement” property is selected from among them (4403 in FIG. 44).

In that case, an object (an arrow 4404 in FIG. 44) indicating which part of the text field 4401 displayed in the theme editor section affects the value of the “padding” key is displayed. Thereby, it is possible to easily recognize where the value of the property editor unit 413 is reflected in the part in the theme editor unit. In the present embodiment, the object is displayed when the property editor unit 413 accepts the change input of the property value. However, the present invention is not limited to this, and the property key or property value is displayed in the property editor unit 413. The object may be displayed when is selected.
In step S4207, the value for the key of another component 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 part 412 displayed in the theme editor part of the theme editor screen 4500 of FIG. 45, for example, the text field 4501, is received, the property list 4502 regarding the text field 4501 is displayed in the property editor part 413. Suppose that the value “18pt” of the “font-size” key of the “font” property is selected (4502 in FIG. 45).

  In this case, the value for the “font-size” key of another part having the “font-size” key in the currently edited theme 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 “24 pt” and “11 pt”, respectively. If it is “11pt”, a table like 4503 in FIG. 45 is displayed. This makes it easy to recognize what values are set for multiple parts with the same property key, making editing work more uniform and creating design features more efficient. It becomes possible to become.

  In step S4209, the change contents of the value for the key received in step S3107 are determined. If the change content is a value, the process proceeds to step S4210. If the change content is an object, the process proceeds to step S4211. 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 selection of a stored design template in accordance with a user instruction to change a value corresponding to the displayed property key. Step S4209 is a step illustrating an example of processing for accepting a user operation on the displayed object for identification display.

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

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

In the combo box 4603, not only can a value be entered, but an existing theme file name can be selected as an option, and one of these options can be selected. If a value has been input, it is assumed that the value has been changed and the process proceeds to step S4210. If the existing theme file name is selected, it is assumed that the existing theme is selected, 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 processing for changing the value corresponding to the displayed property key in accordance with the accepted operation.

Specifically, when the size of the arrow 4404 in FIG. 44 is increased from “3 pt” to “5 pt” by the user's operation of the mouse or the like, “5 pt” is acquired as the changed value. In the present embodiment, the object is an arrow, but the present invention is not limited to this. For example, a box in which text is surrounded by a frame may be used as the 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 unit 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 in the combo box 4603. That is, step S4212 and step S3110 are steps showing an example of processing for changing the value corresponding to the displayed property key using the property value stored as the design template for which selection has been accepted. As a result, it is possible to unify the same design as the selected existing theme by selecting an existing theme without directly entering a value in the property editor unit 413, so that the editing work can be made more efficient. It becomes like this.
The subsequent processing is the same as the flowchart of FIG.
This is the end of the description of FIG.
This is the end of the description of the third embodiment.

  As described above, it is possible to provide a mechanism for improving the efficiency of the work related to the editing of the screen design template. In web application development, since an integrated development tool in which the layout editing function and the design template editing function are closely linked can be provided, the developer must 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 that records a program that implements the functions of the above-described embodiments is supplied to a system or apparatus, and a computer (or CPU or MPU) of the system or apparatus stores the program stored in the recording medium. It goes without saying that the object of the present invention can also 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 recording the program constitutes the present invention.

  As a recording medium for supplying the program, for example, a flexible disk, hard disk, optical disk, magneto-optical disk, CD-ROM, CD-R, DVD-ROM, magnetic tape, nonvolatile memory card, ROM, EEPROM, silicon A disk or the like can be used.

  Further, by executing the program read by the computer, not only the functions of the above-described embodiments are realized, but also an OS (operating system) operating on the computer based on an instruction of the program is actually It goes without saying that a case where the function of the above-described embodiment is realized by performing part or all of the processing and the processing is included.

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

  The present invention may be applied to a system constituted by a plurality of devices or an apparatus constituted by a single device. Needless to say, the present invention can be applied to a case where the present invention is achieved by supplying a program to a system or apparatus. In this case, by reading a recording medium storing a program for achieving the present invention into the system or apparatus, the system or apparatus can enjoy the effects of the present invention.

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

  Furthermore, by downloading and reading a program for achieving the present invention from a server, database, etc. on a network using a communication program, the system or apparatus can enjoy the effects of the present invention. In addition, all the structures which combined each embodiment mentioned above and its modification are also included in this invention.

101 Program Development Device 102 Program Development Server 103 Database Server 104 Application Client 105 Application Server 106 Network

Claims (15)

An information processing apparatus for editing a design of a template screen having a plurality of parts and generating a style sheet,
A template editing screen display means for displaying a template editing screen for editing a value corresponding to a property key of a part design included in the template screen;
Template component display means for displaying the part to which the design is applied on the template edit screen displayed by the template edit screen display means;
Template component instruction receiving means for receiving user instructions for the components displayed by the template component display means;
Among the properties of the design, property display means for displaying a property key and value corresponding to a part for which an instruction has been received by the template part instruction receiving means;
Property value change accepting means for accepting a change in value corresponding to the property key displayed by the property display means;
A template part display updating unit for updating the display of the part according to the value received by the property value change receiving unit;
An information processing apparatus comprising: a style sheet generation unit configured to generate the style sheet using a property key and a value of a component whose display is updated by the template component display update unit. The property display means is:
When there are a plurality of parts whose instructions are received by the template part instruction receiving unit, property keys and values included in all of the plurality of parts whose instructions are received by the template part instruction receiving unit are displayed. Item 4. The information processing apparatus according to Item 1. The template part display means includes
In accordance with the value of the property whose change has been received by the property value change receiving means, the display of the part whose instruction has been received by the template part instruction receiving means and the part corresponding to the property whose change has been received by the property value change receiving means has been updated. The information processing apparatus according to claim 1, wherein the information processing apparatus is an information processing apparatus. The design template storage means for associating the key and value of the property of the part displayed by the template part display means with each other and storing it as a design template is further provided. Information processing device. An application construction means for constructing an application for outputting an application screen including the component;
The application construction means includes
The information processing apparatus according to claim 1, wherein an application that outputs an application screen that uses the style sheet generated by the style sheet generation unit is constructed. Layout editing screen display means for displaying a layout editing screen for editing the layout of the component displayed on the application screen;
A layout editing screen applying means for applying a design to the component included in the layout editing screen displayed by the layout editing screen display means according to the value received by the property value change receiving means. The information processing apparatus according to claim 5. A layout editing screen component instruction receiving unit that receives a user instruction for the component displayed by the layout editing screen display unit,
The information processing apparatus according to claim 6, wherein the property display unit displays a property key and a value corresponding to a component for which an instruction has been received by the layout editing screen component instruction reception unit. Template determination means for determining whether or not the template applied to the application screen displayed by the layout editing screen display means is a template created by a user;
The property display means is:
When the user instruction is received by the layout editing screen component instruction receiving unit, and when the template determining unit determines that the template is created by the user, the template is used, and the template determining unit uses the template. If it is determined that the template is not created by the above, a template created by copying the template is used, and the property key and value corresponding to the screen component whose instruction is received by the layout editing screen component instruction receiving unit are displayed. The information processing apparatus according to claim 7. Design template selection means for receiving selection of a design template stored in the design template storage means according to a user instruction to change a value corresponding to the property key displayed by the property display means. ,
The property value change accepting means is:
Changing the value corresponding to the property key displayed by the property display means, using the property value stored by the design template storage means as the design template accepted by the design template selection means; The information processing apparatus according to claim 4. 10. The design influence identification display means for identifying and displaying which design on the template screen the value whose change is received by the property value change receiving means influences. The information processing apparatus according to any one of claims. For the object for identification display displayed by the design influence identification display means, a user operation acceptance means for accepting a user operation and the property value change acceptance means,
The information processing apparatus according to claim 10, wherein a value corresponding to a property key displayed by the property display unit is changed in accordance with an operation received by the user operation reception unit. The property display means is:
When there are a plurality of parts whose instructions are received by the template part instruction receiving unit, the property keys and values of the parts whose instructions are received by the template part instruction receiving unit are displayed side by side and set corresponding to the same key. The information processing apparatus according to any one of claims 1 to 11, wherein the displayed value is identified and displayed to be different between components. The property display means is:
When displaying the property key and value of a component for which an instruction has been received by the template component instruction receiving unit, a value set corresponding to the same key in another component is displayed near the value. The information processing apparatus according to any one of claims 1 to 12. A processing method in an information processing apparatus for editing a design of a template screen having a plurality of parts and generating a style sheet,
The information processing apparatus is
A template editing screen display step for displaying a template editing screen for editing a value corresponding to a property key of a part design included in the template screen;
A template part display step for displaying the part to which the design is applied on the template edit screen displayed by the template edit screen display step;
A template part instruction receiving step for receiving a user instruction for the part displayed in the template part displaying step;
Among the properties of the design, a property display step for displaying a property key and a value corresponding to a part for which an instruction has been received by the template part instruction receiving step;
A property value change accepting step for accepting a change of a value corresponding to the property key displayed by the property displaying step;
A template part display update step for updating the display of the part according to the value received by the property value change accepting step;
A processing method comprising: executing a style sheet generation step of generating the style sheet using the property key and value of the component whose display has been updated by the template component display update step. A program that can be executed by an information processing device that edits the design of a template screen having multiple parts and generates a style sheet,
The information processing apparatus;
A template editing screen display means for displaying a template editing screen for editing a value corresponding to a property key of a part design included in the template screen;
Template component display means for displaying the part to which the design is applied on the template edit screen displayed by the template edit screen display means;
Template component instruction receiving means for receiving user instructions for the components displayed by the template component display means;
Among the properties of the design, property display means for displaying a property key and value corresponding to a part for which an instruction has been received by the template part instruction receiving means;
Property value change accepting means for accepting a change in value corresponding to the property key displayed by the property display means;
A template part display updating unit for updating the display of the part according to the value received by the property value change receiving unit;
A program that functions as a style sheet generation unit that generates the style sheet by using a property key and a value of a component whose display is updated by the template component display update unit.

Images