JP2016110206A - Web screen development support system - Google Patents

Abstract

PROBLEM TO BE SOLVED: To provide a development support technique capable of efficiently creating a Web screen for operation requiring kinetic control of the screen with a simple operation, and capable of generating a code excellent in legibility and homogeneity.SOLUTION: A Web screen development system 10 is provided with means for displaying an edit screen 30 comprising a column layout selection menu 34 and an HTML component selection menu 38 on the basis of a screen generation base file 12, means for displaying a selected column layout 39 on the edit screen 30, means for arranging selected HTML components on the edit screen 30, means for displaying, for each HTML component, a component function setting window 50 comprising a field 63 for selecting a function that realizes a specific control function and a field 62 for selecting an event that causes the control function to operate on the edit screen 30, means for outputting, as a component function definition file 22, the selected function and a correspondence between the event and each of the HTML components, and means for outputting a Web screen file 20 comprising the selected column layout and the HTML components.SELECTED DRAWING: Figure 1

Description

  The present invention relates to a Web screen development support system, and more particularly, to a technology that mainly supports development of a business Web screen in which dynamic screen control is frequently used.

There have been various products and services that have sought to create a general Web site with a simple operation (see Non-Patent Document 1).
These products and services have sufficient functions for the purpose of creating a static website that emphasizes the appearance, but are not suitable for creating business-use web screens that frequently use dynamic screen controls. there were.

  For example, when a button on the Web screen is selected, in order to realize a screen control that hides other buttons and input fields, the operation is specified in a script language such as JavaScript (registered trademark). It is necessary and a developer who has specialized knowledge is forced to code individually using an editor.

6 free web services that can create websites intuitively Internet URL: http://kachibito.net/web-service/6-free-sitebuilder.html Search date: October 24, 2014

In this way, as long as individual developers code business-use Web screens on an editor basis, there was a limit to improving productivity.
In addition, CSS and JavaScript codes are often freely described in HTML files according to the individual developer's manners, which makes it difficult for others to understand and lacks maintainability and reusability.

Recently, instead of generating a Web screen on the server side using a template engine as in the past, a dynamic Web screen is created only on the client side using a Web screen generation technology called SPA (Single Page Application). The method of completing generation is becoming mainstream.
For this reason, developers are required to create a large HTML file including a plurality of screens and taking into consideration the transition relationship between them, and there is a concern that the above problems will be further expanded.

  The present invention has been devised in view of such a current situation, and it is possible to efficiently create a business-use Web screen that requires dynamic control of the screen with a simple operation, and it is also readable and homogeneous. The purpose is to provide development support technology that can generate code with excellent performance.

  In order to achieve the above object, a Web screen development support system according to claim 1 includes a screen generation base file including an HTML file including a script for realizing a Web screen editing function, and the screen generation base file. Based on the above, the selection screen of the column layout of the Web screen, the editing screen with the selection menu of the HTML parts to be arranged on the Web screen, the means for displaying on the computer display, and the selection via the computer input means Means for displaying the column layout on the editing screen, means for placing the selected HTML component on the editing screen, a column for selecting a function for realizing a specific control function for each HTML component, and Means for displaying a part function edit window having a column for selecting an event for activating a control function on the edit screen, and an input function And means for outputting the correspondence between the event and each HTML part as a part function definition file, and means for outputting the HTML file including the multi-column layout and HTML part as a Web screen file. It is a feature.

  The Web screen development support system according to claim 2 is the system according to claim 1, and further includes a component attribute setting window including a setting item for defining a predetermined attribute of each HTML component. It is characterized by comprising means for displaying above and means for reflecting the input setting information in the editing screen and the Web screen file.

  The Web screen development support system according to claim 3 is the system according to claim 1 or 2, and further edits the component style setting window including setting items for defining a predetermined style of each HTML component. A means for displaying on the screen, means for reflecting the input setting information on the editing screen, and means for outputting the correspondence between the setting information and each HTML part as a part style definition file It is said.

  The Web screen development support system according to claim 4 is the system according to claims 1 to 3, and further includes a field for designating a plurality of Web screen files on the editing screen and a transition relationship between the Web screens. A means for displaying a screen transition setting window with a field for specifying a file, and a means for generating a Web screen file having a plurality of Web screens by combining a plurality of specified Web screen files as a single HTML file And a means for inserting a button for moving to the transition destination web screen and a means for outputting the transition relation between each web screen as a screen transition definition file. Yes.

According to the Web screen development support system of the first aspect, the developer selects the column layout and the necessary HTML parts on the editing screen, and opens the part function editing window for each HTML part to display the functions and events. A web screen with the necessary screen control functions can be easily constructed just by selecting.
In addition, since the behavior of HTML parts is specified as a combination of functions and events prepared in advance, and the corresponding relationship is exported as a part function definition file, the contents can be easily understood by a third party. It becomes possible to improve the maintainability and reusability of HTML parts.
Moreover, since the screen generation base file is an HTML file, you can develop a web screen on a general-purpose web browser without having to install a dedicated application program on the computer or connect to a server on the Internet. be able to.

  In the case of the Web screen development support system according to claim 2, the developer can set the attribute of each HTML part through the part attribute setting window and does not need to describe the tag in the HTML file. A certain order is formed in the code of the screen file, and its maintainability and reusability can be improved.

  In the case of the Web screen development support system according to claim 3, the developer can set the style of each HTML part through the part style setting window, and it is not necessary to describe CSS by himself in the HTML file. A certain order is formed in the code of the screen file, and its maintainability and reusability can be improved.

  According to the Web screen development support system of claim 4, a plurality of Web screen files specified by the developer are automatically integrated as one Web screen file, and the developer specifies between each Web screen. Since the transition relations are automatically reflected, it is very easy to develop a Web screen that supports the SPA method.

  FIG. 1 is a block diagram showing the functional configuration of a Web screen development support system 10 according to the present invention. The screen generation base file 12, the screen editing unit 14, the computer display 16, and inputs such as a mouse and a keyboard are shown. Device 18.

The screen generation base file 12 is composed of an HTML file including a JavaScript code having a Web screen editing function.
The screen editing unit 14 is realized by the CPU of the computer executing a predetermined process according to the OS, the web browser program, and the JavaScript code.
The screen editing unit 14 outputs a Web screen file 20, a JS file 21, a component function definition file 22, a component style definition file 24, and a screen transition definition file 26 (details will be described later).

The processing procedure of the system 10 will be described below according to the flowchart of FIG.
First, when the user clicks on the screen generation base file 12 on the computer, the Web browser program is activated, the screen editing unit 14 is generated, and the editing screen is displayed on the display 16 (S10).

FIG. 3 illustrates the transition of the editing screen 30.
First, as shown in FIG. 3A, the user selects a column layout of the Web screen to be created and reflects it on the editing screen 30 (S12). Then, as shown in FIG. HTML parts (tables, buttons, input boxes, etc.) to be arranged on the Web screen are selected and reflected on the editing screen 30 (S14).

FIG. 4 is an enlarged view of the editing screen 30. When the user clicks the Layout button 32, a column layout selection menu 34 in which a plurality of column layout icons are listed is displayed.
When the user selects one icon from the column layout selection menu 34 and drags and drops it on the editing screen 30, the corresponding column layout 39 is reflected on the editing screen 30.
Next, the user clicks the HTML button 36 to display the HTML part selection menu 38, and the necessary HTML parts (radio buttons, tables, etc.) are arranged in an arbitrary area by dragging and dropping.

When the mouse cursor is brought close to the placed HTML part, a plurality of buttons for editing the attribute, style, and function of the HTML part are displayed as shown in FIG.
When the user clicks the component attribute setting button 40 from these, a component attribute setting window 42 is popped up as shown in FIG.
When the user clicks the part style setting button 44, a part style setting window 46 is popped up as shown in FIG.
Alternatively, when the user clicks the component function setting button 48, a component function setting window 50 is popped up as shown in FIG.

FIG. 5 shows an example of the component attribute setting window 42 for setting details of “table” which is one of HTML components.
That is, the user selects the number of vertical and horizontal items in the matrix setting column 52, inputs a necessary character string in the header name setting column 53 and the header ID setting column 54, and clicks the Set button 55.
As a result, a table (HTML part) corresponding to the setting content is displayed on the editing screen 30 (S16).

FIG. 6 shows an example of the component style setting window 46, which is used to set a style for a specific HTML component.
That is, the user specifies the text size in the font size setting field 56 and selects “left end / center / right end” in the layout setting field 57.
When the user moves the mouse cursor close to the character color setting field 58 or the background color setting field 59, a color palette is displayed (not shown), and when an arbitrary color is selected from the color palette, the character color setting field 58 or the background color setting is displayed. The corresponding color code is entered in the column 59.
Finally, when the user makes necessary settings in the CSS class setting field 60 and clicks the Set button 61, the style attribute set in the HTML part is reflected on the editing screen 30 (S18).

FIG. 7 shows a scene where a function of an HTML part (for example, a button) is defined as an example of the part function setting window 50.
First, the user selects one (for example, “click”) from among a plurality of events listed on the pull-down menu in the event selection field 62.
Next, the user selects one of a plurality of events listed on a pull-down menu (not shown) in the function selection field 63.
Finally, when the user clicks the Set button 64, the setting content (event + function) is associated with the HTML part (S20).

During the editing operation described above, the user clicks the Save button 66 in the menu bar.
Receiving this, the screen editing unit 14 overwrites and saves the screen generation base file 12 in a form including the editing results of the user so far (S22).

Then, as shown in FIG. 3D, when the Web screen is completed, the user clicks the Export button 67 in the menu bar.
Upon receiving this, the screen editing unit 14 generates a Web screen file 20, a JS file 21, a component function definition file 22, and a component style definition file 24 reflecting the user's previous editing results, and stores them in a predetermined external storage device. Output to the area (S24).

FIG. 8 shows the relationship between the Web screen file 20, the JS file 21, and the component function definition file 22. As shown in FIG. 8A, each HTML component 68 in the Web screen file 20 includes A component ID (for example, “id =“ 001 ”) is assigned.
The JS file 21 describes a plurality of JavaScript functions (for example, “funcA (function A)”) selected by the user.
Further, the component function definition file 22 defines correspondences between component IDs, events, and functions.

When the Web browser program generates a Web screen based on the Web screen file 20, specific events and functions are associated with each HTML component according to the code described in the component function definition file 22.
As a result, when the user gives a corresponding event to a certain HTML part, a function associated with the part is executed.

Since the above-described mechanism is provided, HTML parts can be easily reused by simply modifying the description of the part function definition file 22 on the Web screen created by the system 10.
For example, in the example shown in FIG. 8B, the description of the Web screen file 20 and the JS file 21 is not changed, but since the component function definition file 22 has been modified, “id =“ 001 ””. The behavior of HTML parts has changed as follows.
"Id =" 001 ""(old)->"click" executes "function A""id=" 001 "(new)->" mouse over "executes" function B "

FIG. 9 is a reference diagram showing the correspondence between the conventional Web screen file 70 and the JS file 71. As shown in FIG. 9A, each component 72 in the Web screen file 70 includes an event and a function. The correspondence relationship with was directly described.
For this reason, when an event or function is changed, even if there is no change in the design of the part, it is necessary to rewrite it as a new HTML part as shown in FIG. It took time and was accompanied by the danger of bugs.

According to this system 10, it is possible to construct a Web screen corresponding to the SPA method very easily.
That is, as shown in FIG. 10, the screen editing unit 14 has a function of combining a plurality of Web screen files 20 created in advance through the editing screen 30 into one Web screen file 80 corresponding to the SPA method. ing.

Selection of a plurality of Web screen files 20 to be combined and transition relations between the Web screens are made via a screen transition setting window 82 as shown in FIG.
First, in the web screen file designation field 84, the user inputs the screen name of each web screen and designates the web screen file 20 corresponding to each web screen.

  Next, the user designates the transition relation between the Web screens in the screen transition relation designation field 86. Specifically, multiple combinations of transition source Web screens and transition destination Web screens are described.

Finally, when the user clicks the Set button 88, the screen editing unit 14 integrates each Web screen file 20 as one Web screen file 80, and links buttons for moving to each Web screen to the destination Web screen 90 is automatically inserted.
At the same time, the screen editing unit 14 moves the transition relationship between the Web screens as a screen transition definition file 26.
Although not shown, the screen editing unit 14 also combines the JS file 21, the component function definition file 22, and the component style definition file 24 associated with each Web screen file 20, and the JS file for the Web screen file 80. , Output to the external storage device as a component function definition file and a component style definition file.

  In the screen transition definition file 26 above, the correspondence between the transition source screen and the transition destination screen is described as "Screen (1)-> Screen (2)" or "Screen (3)-> Screen (1)" Therefore, the transition relationship of each Web screen included in the Web screen file 80 becomes obvious at a glance.

  The user clicks the Import button (not shown) on the edit screen 30 and selects an existing Web screen file 20, so that the necessary corrections are made through the edit screen 30 and reused as a new Web screen file. Of course it is also possible.

It is a block diagram which shows the function structure of the web screen development assistance system which concerns on this invention. It is a flowchart which shows the process sequence in this system. It is a figure which shows the transition of an edit screen. It is an enlarged view of an edit screen. It is a figure which shows an example of a component attribute setting window. It is a figure which shows an example of a component style setting window. It is a figure which shows an example of a component function setting window. It is a figure which shows the relationship between the Web screen file in this system, a JS file, and a component function definition file. It is a figure which shows the relationship between the conventional Web screen file and a JS file. It is a figure which shows the production | generation process of the web screen file corresponding to a SPA system. It is a figure which shows an example of a screen transition setting window.

10 Web screen development support system
12 Base file for screen generation
14 Screen editor
16 display
18 Input device
20 Web screen file
21 JS file
22 Plug-in function definition file
24 Part style definition file
26 Screen transition definition file
30 Edit screen
32 Layout button
34 Column layout selection menu
36 HTML button
38 HTML parts selection menu
39 Column layout
40 Parts attribute setting button
42 Part attribute setting window
44 Parts style setting button
46 Part Style Setting Window
48 Parts function setting button
50 Parts function setting window
66 Save button
67 Export button
68 HTML parts
80 Web screen file for SPA system
82 Screen transition setting window
84 Web screen file specification field
86 Screen transition relation specification field
90 Link button

Claims (4)

A screen generation base file consisting of an HTML file containing a script for realizing the Web screen editing function,
Based on the screen generation base file, means for displaying on the computer display an edit screen having a selection menu of a column layout of the Web screen and a selection menu of HTML parts to be arranged on the Web screen;
Means for displaying the column layout selected via the input means of the computer on the editing screen;
Means for placing the selected HTML part on the editing screen;
For each HTML component, a means for displaying on the editing screen a component function setting window including a column for selecting a function that realizes a specific control function, and a column for selecting an event that activates the control function;
Means for outputting a correspondence between the selected function and event and each HTML component as a component function definition file;
Means for outputting an HTML file comprising the above-mentioned multi-column layout and HTML parts as a Web screen file;
Web screen development support system characterized by having Means for displaying a part attribute setting window having setting items for defining predetermined attributes of each HTML part on the editing screen;
Means for reflecting the input setting information in the editing screen and the web screen file;
The Web screen development support system according to claim 1, further comprising: Means for displaying a part style setting window having setting items for defining a predetermined style of each HTML part on the editing screen;
Means for reflecting the input setting information on the editing screen;
Means for outputting the correspondence between the setting information and each HTML part as a part style definition file;
The Web screen development support system according to claim 1 or 2, further comprising: On the editing screen, means for displaying a screen transition setting window having a column for specifying a plurality of Web screen files and a column for specifying a transition relation between each Web screen;
Means for generating a Web screen file having a plurality of Web screens by combining a plurality of specified Web screen files as a single HTML file;
A means for inserting a button for moving to the transition destination web screen on each of the above web screens,
A means for outputting the transition relationship between each Web screen as a screen transition definition file,
The Web screen development support system according to claim 1, further comprising:

Images