JP2006139583A

JP2006139583A - Method, system, and program for screen preparation

Info

Publication number: JP2006139583A
Application number: JP2004329283A
Authority: JP
Inventors: Takuya Sekihara; 拓也関原; Yasutetsu Murashima; 康哲村島; Takashi Inoue; 尚井上; Tomoharu Sawahata; 知晴澤幡; Katsunori Nakagawa; 克則中川
Original assignee: Hitachi Software Engineering Co Ltd
Current assignee: Hitachi Software Engineering Co Ltd
Priority date: 2004-11-12
Filing date: 2004-11-12
Publication date: 2006-06-01
Anticipated expiration: 2024-11-12
Also published as: JP4582701B2

Abstract

<P>PROBLEM TO BE SOLVED: To dispense with a screen design corresponding to an aspect ratio of a screen; and to prepare the screen with a visually recognizable operation, in which a relative layout is not changed even if a aspect ratio of a screen changes. <P>SOLUTION: A screen preparation method comprises a means for displaying a multiple kind of screen layouts and components in a layout window and component window, a means for displaying a plurality of divided areas forming the selected screen layout in a screen editing window by selective operations of any of icons on the multiple kind of displayed screen layouts and also defining a screen layout which is divided in a hierarchical structure by selective operations of any of icons on the multiple kind of screen layouts regarding the divided areas in a displayed state of any hierarchical divided area, and a means for receiving components arranged on each divided area of the screen layout displayed in the screen editing window by selective operations of any of the multiple kind of icons displayed in the component window and arranging the selected components. <P>COPYRIGHT: (C)2006,JPO&NCIPI

Description

本発明は、携帯電話機等の情報端末で使用するビジュアルユーザインタフェースを持つプログラムを作成する場合に必要となる画面を作成する画面作成方法及び装置に係り、特に、所望の画面レイアウトを決定し、その画面レイアウトの画面中に表示部品や入力部品等の部品を配置して目的とする機能を満たす画面を作成する画面作成方法及び装置並びにプログラムに関するものである。 The present invention relates to a screen creation method and apparatus for creating a screen necessary for creating a program having a visual user interface used in an information terminal such as a mobile phone, and in particular, determines a desired screen layout, and The present invention relates to a screen creation method, apparatus, and program for creating a screen satisfying a target function by arranging parts such as display parts and input parts in a screen layout screen.

これまでに、ビジュアルユーザインタフェースを持つプログラムを開発するツールでは、Visual C++、Visual BASIC等が提供されている。
この種の開発ツールを用いてビジュアルプログラムを構築する場合、目的とする機能を満たす画面を順次作成し、その画面中の部品情報に対応する処理プログラムを記述するという手法が用いられる。
また、複数の部品で構成される画面レイアウトを作成する画面レイアウトシステムとして、下記の特許文献１に開示されたものがある。
特開２００２−７３００４号公報 So far, Visual C ++, Visual BASIC, etc. have been provided as tools for developing programs having a visual user interface.
When a visual program is constructed using this type of development tool, a method is used in which screens satisfying a target function are sequentially created and a processing program corresponding to component information in the screen is described.
Further, there is a system disclosed in Patent Document 1 below as a screen layout system for creating a screen layout composed of a plurality of components.
JP 2002-73004 A

ところで、ビジュアルユーザインタフェースを搭載した携帯電話機にあっては、近時における表示素子製造技術の進歩に伴って１つの画面内に多くの情報を精細に表示することが可能になって来ている。また、同じプログラムで様々な大きさや縦横比の画面に対応するため、縦横比を変更して縮小・拡大しても全体の相対的なレイアウトが変わらないよう、相対表示画面の設計が求められている。
しかしながら、上記Visual C++, Visual BASIC等の開発ツールには、そのような相対的なレイアウトを設計するための機能が用意されていない。そのため、画面の縦横比に応じて画面レイアウトの設計をすることが必要になり、開発コストが嵩むという問題があった。
また、前記特許文献１においても、相対的なレイアウトが変わらないような画面を設計することについては何ら考慮されていない。
また、所望のレイアウトの画面を作成する場合、レイアウトを定める部品を順次に積み重ねる形式で作成するのが視覚的に分かり易いが、前記Visual C++, Visual BASIC等の開発ツールや特許文献１においては、そのような機能は用意されていない。 By the way, in a mobile phone equipped with a visual user interface, it has become possible to display a large amount of information on a single screen with the advancement of display element manufacturing technology. Also, in order to support screens of various sizes and aspect ratios with the same program, the design of relative display screens is required so that the overall relative layout does not change even if the aspect ratio is changed and reduced or enlarged. Yes.
However, development tools such as Visual C ++ and Visual BASIC do not have a function for designing such a relative layout. Therefore, it is necessary to design a screen layout according to the aspect ratio of the screen, and there is a problem that development costs increase.
In Patent Document 1, no consideration is given to designing a screen whose relative layout does not change.
In addition, when creating a screen of a desired layout, it is easy to visually understand that it is created in a form in which components that define the layout are sequentially stacked. However, in the development tools such as Visual C ++ and Visual BASIC, and Patent Document 1, There is no such function.

本発明は、上記のような問題点に鑑みなされたものであり、その目的は画面の縦横比に応じた画面設計を不要とし、画面の縦横比が変わっても相対的なレイアウトが変わらないような画面を視覚的に分かり易い操作で作成することができる画面作成方法および装置並びにプログラムを提供することにある。 The present invention has been made in view of the above problems, and its purpose is to eliminate the need for screen design according to the aspect ratio of the screen, so that the relative layout does not change even if the aspect ratio of the screen changes. It is an object to provide a screen creation method, apparatus, and program capable of creating a simple screen with an operation that is visually easy to understand.

上記目的を達成するために、本発明に係る画面作成装置は、所望の画面レイアウトを決定し、その画面レイアウトの画面中に表示部品や入力部品等の部品を配置して目的とする機能を満たす画面を作成する画面作成装置であって、
１つの画面を複数に分割する分割領域に関する画面レイアウトの定義情報を格納したレイアウトテーブルと、前記入力部品等の複数種類の部品に関する定義情報を格納した部品テーブルと、前記レイアウトテーブルの定義情報および前記部品テーブルの定義情報を読み出し、表示画面の一部に生成したレイアウトウインドウおよび部品ウインドウ内に前記複数種類の画面レイアウトおよび部品をそれぞれアイコン形式で表示する第１の手段と、前記レイアウトウインドウ内に表示された複数種類の画面レイアウトのいずれかのアイコンの選択操作を受け、選択された画面レイアウトを構成する複数の分割領域を画面編集ウインドウ内に表示し、いずれかの階層の分割領域の表示状態で当該分割領域に対する複数種類の画面レイアウトのいずれかのアイコンの選択操作を更に受付け、積層構造に画面分割した画面レイアウトを定義する第２の手段と、前記画面編集ウインドウ内に表示された画面レイアウトの各分割領域に対して配置する部品を、前記部品ウインドウ内に表示された複数種類のアイコンのいずれかの選択操作によって受付け、選択された部品を配置する第３の手段と、前記第２の手段により定義された各画面分割階層の画面レイアウトの種別と前記第３の手段により各画面分割階層の分割領域に配置された部品の種別とを画面構造テーブルに格納する第４の手段と、前記画面構造テーブルの格納情報を読出し、積層構造に画面分割した画面レイアウトの各画面分割階層に配置された部品の画像をプレビューウインドウに表示する第５の手段とを備えることを特徴とする。
また、各画面分割階層の画面レイアウトにおける部品配置前の状態で、当該階層の画面レイアウトの分割領域に部品配置を促すメッセージを表示する第６の手段を備えることを特徴とする。
また、前記画面編集ウインドウ内に表示された複数の画面分割階層の画面レイアウトのいずれかの階層に配置された部品を部品編集ウインドウに移動させる操作を受け、当該部品を部品編集ウインドウに移動し、前記部品ウインドウ内に表示された複数種類のアイコンのいずれかの選択操作によって配置済みの部品を再編集する第７の手段を備えることを特徴とする。
また、前記プレビューウインドウに部品の画像を表示する際に、画面レイアウトの分割領域の境界または輪郭を可視表示する第８の手段を備えることを特徴とする。
また、前記各画面分割階層の画面レイアウトの分割領域に配置された部品が応答するイベント情報を前記画面構造テーブルに格納する第９の手段を備えることを特徴とする。
また、前記レイアウトテーブルに格納した画面レイアウトの定義情報は、１つの画面を複数に相対的に分割する相対分割領域に関するものであることを特徴とする。 In order to achieve the above object, the screen creation apparatus according to the present invention determines a desired screen layout and arranges components such as display components and input components in the screen layout screen to satisfy the target function. A screen creation device for creating a screen,
A layout table storing definition information of a screen layout related to a divided area for dividing one screen into a plurality of parts; a parts table storing definition information related to a plurality of types of parts such as the input parts; the definition information of the layout table; Reading the definition information of the parts table and displaying the plurality of types of screen layouts and parts in icon form in the layout window and parts window generated in a part of the display screen, and displaying them in the layout window In response to the selection operation of one of the icons of the multiple types of screen layouts displayed, the multiple divided areas that make up the selected screen layout are displayed in the screen edit window, and the display state of the divided areas in any of the hierarchies is displayed. Which of the multiple types of screen layouts for the divided area A second means for defining a screen layout divided into screens in a laminated structure, and a component to be arranged for each divided area of the screen layout displayed in the screen editing window, A third means for accepting by selecting one of a plurality of types of icons displayed in the part window and arranging the selected part; and a screen layout of each screen division hierarchy defined by the second means. A fourth means for storing the type and the type of the component arranged in the divided area of each screen division hierarchy by the third means, and the storage information of the screen structure table are read out, and the screen is displayed in the laminated structure. And fifth means for displaying an image of a component arranged in each screen division hierarchy of the divided screen layout in a preview window.
In addition, a sixth means for displaying a message prompting component placement in a divided area of the screen layout of the hierarchy in a state before the placement of the components in the screen layout of each screen division hierarchy is provided.
In addition, in response to an operation of moving a component arranged in any one of the screen layouts of a plurality of screen division layers displayed in the screen editing window to the component editing window, the component is moved to the component editing window, A seventh means is provided for re-editing a component that has been placed by selecting one of a plurality of types of icons displayed in the component window.
In addition, when displaying an image of a part in the preview window, an eighth means for visually displaying a boundary or outline of a divided area of the screen layout is provided.
Further, the present invention is characterized by comprising ninth means for storing, in the screen structure table, event information to which a component arranged in a divided area of the screen layout of each screen division hierarchy responds.
Further, the screen layout definition information stored in the layout table relates to a relative division area for relatively dividing one screen into a plurality of pieces.

本発明に係る画面作成方法は、所望の画面レイアウトを決定し、その画面レイアウトの画面中に表示部品や入力部品等の部品を配置して目的とする機能を満たす画面を作成する画面作成方法であって、
１つの画面を複数に分割する分割領域に関する画面レイアウトの定義情報を格納したレイアウトテーブル及び前記入力部品等の複数種類の部品に関する定義情報を格納した部品テーブルの定義情報をそれぞれ読み出し、表示画面の一部に生成したレイアウトウインドウおよび部品ウインドウ内に前記複数種類の画面レイアウトおよび部品をそれぞれアイコン形式で表示する第１のステップと、前記レイアウトウインドウ内に表示された複数種類の画面レイアウトのいずれかのアイコンの選択操作を受け、選択された画面レイアウトを構成する複数の分割領域を画面編集ウインドウ内に表示し、いずれかの階層の分割領域の表示状態で当該分割領域に対する複数種類の画面レイアウトのいずれかのアイコンの選択操作を更に受付け、積層構造に画面分割した画面レイアウトを定義する第２のステップと、前記画面編集ウインドウ内に表示された画面レイアウトの各分割領域に対して配置する部品を、前記部品ウインドウ内に表示された複数種類のアイコンのいずれかの選択操作によって受付け、選択された部品を配置する第３のステップと、前記第２のステップで定義された各画面分割階層の画面レイアウトの種別と前記第３のステップで各画面分割階層の分割領域に配置された部品の種別とを画面構造テーブルに格納する第４のステップと、前記画面構造テーブルの格納情報を読出し、積層構造に画面分割した画面レイアウトの各画面分割階層に配置された部品の画像をプレビューウインドウに表示する第５のステップとを備えることを特徴とする。
また、各画面分割階層の画面レイアウトにおける部品配置前の状態で、当該階層の画面レイアウトの分割領域に部品配置を促すメッセージを表示する第６のステップを備えることを特徴とする。
また、前記画面編集ウインドウ内に表示された複数の画面分割階層の画面レイアウトのいずれかの階層に配置された部品を部品編集ウインドウに移動させる操作を受け、当該部品を部品編集ウインドウに移動し、前記部品ウインドウ内に表示された複数種類のアイコンのいずれかの選択操作によって配置済みの部品を再編集する第７のステップを備えることを特徴とする。
また、前記プレビューウインドウに部品の画像を表示する際に、画面レイアウトの分割領域の境界または輪郭を可視表示する第８のステップを備えることを特徴とする。
また、前記各画面分割階層の画面レイアウトの分割領域に配置された部品が応答するイベント情報を前記画面構造テーブルに格納する第９のステップを備えることを特徴とする。
また、前記レイアウトテーブルに格納した画面レイアウトの定義情報は、１つの画面を複数に相対的に分割する相対分割領域に関するものであることを特徴とする。 The screen creation method according to the present invention is a screen creation method for determining a desired screen layout and placing a display component, an input component, or the like in the screen layout screen to create a screen satisfying a desired function. There,
A layout table storing definition information of a screen layout related to a divided area for dividing one screen into a plurality of parts and definition information of a component table storing definition information related to a plurality of types of parts such as the input parts are respectively read out and displayed on the display screen. A first step of displaying each of the plurality of types of screen layouts and components in icon form in the layout window and component window generated in the section; and any one of the icons of the plurality of types of screen layouts displayed in the layout window In response to the selection operation, a plurality of divided areas composing the selected screen layout are displayed in the screen edit window, and one of a plurality of types of screen layouts for the divided area is displayed in the display state of the divided area of any hierarchy. The icon selection operation is further accepted to create a laminated structure A second step of defining a screen layout divided into planes, and a part to be arranged for each divided area of the screen layout displayed in the screen editing window are icons of a plurality of types of icons displayed in the part window. A third step of arranging the selected part received by any of the selection operations, a screen layout type of each screen division hierarchy defined in the second step, and each screen division hierarchy in the third step The fourth step of storing the types of parts arranged in the divided areas in the screen structure table and the storage information of the screen structure table is read out and arranged in each screen division hierarchy of the screen layout divided into the laminated structure. And a fifth step of displaying an image of the part in the preview window.
In addition, a sixth step of displaying a message prompting component placement in a divided area of the screen layout of the hierarchy in a state before the placement of the components in the screen layout of each screen division hierarchy is characterized.
In addition, in response to an operation of moving a component arranged in any one of the screen layouts of a plurality of screen division layers displayed in the screen editing window to the component editing window, the component is moved to the component editing window, A seventh step of re-editing a component that has been arranged by selecting one of a plurality of types of icons displayed in the component window is provided.
In addition, when displaying an image of a part in the preview window, an eighth step of visually displaying a boundary or outline of a divided area of the screen layout is provided.
Further, the present invention is characterized by comprising a ninth step of storing, in the screen structure table, event information to which a component arranged in a divided area of the screen layout of each screen division hierarchy responds.
Further, the screen layout definition information stored in the layout table relates to a relative division area for relatively dividing one screen into a plurality of pieces.

本発明に係るプログラムは、所望の画面レイアウトを決定し、その画面レイアウトの画面中に表示部品や入力部品等の部品を配置して目的とする機能を満たす画面を作成させるための処理をコンピュータに実行させるプログラムであって、
１つの画面を複数に分割する分割領域に関する画面レイアウトの定義情報を格納したレイアウトテーブル及び前記入力部品等の複数種類の部品に関する定義情報を格納した部品テーブルの定義情報をそれぞれ読み出し、表示画面の一部に生成したレイアウトウインドウおよび部品ウインドウ内に前記複数種類の画面レイアウトおよび部品をそれぞれアイコン形式で表示する第１のステップと、前記レイアウトウインドウ内に表示された複数種類の画面レイアウトのいずれかのアイコンの選択操作を受け、選択された画面レイアウトを構成する複数の分割領域を画面編集ウインドウ内に表示し、いずれかの階層の分割領域の表示状態で当該分割領域に対する複数種類の画面レイアウトのいずれかのアイコンの選択操作を更に受付け、積層構造に画面分割した画面レイアウトを定義する第２のステップと、前記画面編集ウインドウ内に表示された画面レイアウトの各分割領域に対して配置する部品を、前記部品ウインドウ内に表示された複数種類のアイコンのいずれかの選択操作によって受付け、選択された部品を配置する第３のステップと、前記第２のステップで定義された各画面分割階層の画面レイアウトの種別と前記第３のステップで各画面分割階層の分割領域に配置された部品の種別とを画面構造テーブルに格納する第４のステップと、前記画面構造テーブルの格納情報を読出し、積層構造に画面分割した画面レイアウトの各画面分割階層に配置された部品の画像をプレビューウインドウに表示する第５のステップとをコンピュータに実行させることを特徴とする。 The program according to the present invention determines a desired screen layout, arranges components such as display components and input components in the screen layout screen, and causes the computer to create a screen that satisfies the target function. A program to be executed,
A layout table storing definition information of a screen layout related to a divided area for dividing one screen into a plurality of parts and definition information of a component table storing definition information related to a plurality of types of parts such as the input parts are respectively read out and displayed on the display screen. A first step of displaying each of the plurality of types of screen layouts and components in icon form in the layout window and component window generated in the section; and any one of the icons of the plurality of types of screen layouts displayed in the layout window In response to the selection operation, a plurality of divided areas composing the selected screen layout are displayed in the screen edit window, and one of a plurality of types of screen layouts for the divided area is displayed in the display state of the divided area of any hierarchy. The icon selection operation is further accepted to create a laminated structure A second step of defining a screen layout divided into planes, and a part to be arranged for each divided area of the screen layout displayed in the screen editing window are icons of a plurality of types of icons displayed in the part window. A third step of arranging the selected part received by any of the selection operations, a screen layout type of each screen division hierarchy defined in the second step, and each screen division hierarchy in the third step The fourth step of storing the types of parts arranged in the divided areas in the screen structure table and the storage information of the screen structure table is read out and arranged in each screen division hierarchy of the screen layout divided into the laminated structure. The fifth step of displaying the image of the part in the preview window is executed by the computer.

本発明によれば、画面の縦横比に応じた画面設計を不要とし、画面の縦横比が変わっても相対的なレイアウトが変わらないような画面を視覚的に分かり易い操作で作成することができる。 According to the present invention, a screen design according to the aspect ratio of the screen is unnecessary, and a screen in which the relative layout does not change even if the aspect ratio of the screen changes can be created with an operation that is easy to understand visually. .

以下、本発明を図示する実施の形態に基づいて詳細に説明する。
図１は、本発明に係る画面作成装置の実施の形態を示すブロック構成図であり、入力装置を構成するキーボード１０１及びマウス１０２、レイアウト対象の画面を表示する表示装置１０３、メモリ１０４、レイアウト対象の画面を作成するための処理を行うＣＰＵ１０５を備えている。
メモリ１０６には、各種テーブル群の記憶領域とプログラム群の記憶領域が設けられ、テーブル群の記憶領域にはイベントテーブル１０６１、レイアウトテーブル１０６２、部品テーブル１０６３、画面構造テーブル１０６４、部品構造テーブル１０６５が設けられている。
プログラム群の記憶領域には、画面作成エディタ１０７１と部品作成エディタ１０７２が記憶されている。
画面作成エディタ１０７１は、携帯電話機等の情報端末に搭載するビジュアルユーザインタフェースで用いる画面を作成・編集するプログラムであり、本発明の主要な構成要素となるものである。
部品作成エディタ１０７２は、所望のレイアウトの画面内に配置するボタンなどの入力部品や表示部品を作成および編集するプログラムである。この部品作成エディタ１０７２は、新規に部品を作成する場合や、既に１つの画面内に配置されている部品を変更あるいは修正する場合に使用するものである。 Hereinafter, the present invention will be described in detail based on the illustrated embodiment.
FIG. 1 is a block configuration diagram showing an embodiment of a screen creation device according to the present invention. A keyboard 101 and a mouse 102 constituting an input device, a display device 103 for displaying a layout target screen, a memory 104, and a layout target. The CPU 105 that performs processing for creating the screen is provided.
The memory 106 includes a storage area for various table groups and a storage area for program groups, and an event table 1061, a layout table 1062, a part table 1063, a screen structure table 1064, and a part structure table 1065 are stored in the table group storage area. Is provided.
A screen creation editor 1071 and a part creation editor 1072 are stored in the storage area of the program group.
The screen creation editor 1071 is a program for creating and editing a screen used in a visual user interface mounted on an information terminal such as a mobile phone, and is a main component of the present invention.
The part creation editor 1072 is a program for creating and editing input parts such as buttons and display parts to be arranged in a screen of a desired layout. The component creation editor 1072 is used when a new component is created or when a component already arranged in one screen is changed or modified.

図２は、表示装置１０３に表示される画面レイアウト作成・編集画面２００の構成例を示す図である。
図２において、画面左上には、複数種類の画面レイアウトのアイコンを表示するレイアウトウインドウ２０１が表示され、その下部には、入力部品や表示部品などの部品を表示する部品ウインドウ２０２が表示されている。
また、画面右上には、ビジュアルユーザインタフェースにおける画面を編集するための画面編集ウインドウ２０３が表示され、その下部には画面編集ウインドウ２０３内の画面における部品を分割領域単位で編集（変更または修正）するための部品編集ウインドウ２０４が表示されている。
画面編集ウインドウ２０３は作成・編集対象の１つの画面における画面分割の積層構造を表示するツリービューウインドウ２０３１と、１つの画面の内容を表示するプレビューウインドウ２０３２で構成されている。
部品編集ウインドウ２０４は、編集対象の１つの相対分割領域上の部品をツリービューウインドウ２０３１から移動させてその相対分割領域内に配置されている部品を積層構造で表示するツリーウインドウ２０４１と、このツリーウインドウ２０４１内の１つの部品の内容を表示するプレビューウインドウ２０４２から構成されている。
イベントテーブル１０６１は、ユーザ操作などのイベントの種別を登録したテーブルであり、例えば図３に示すように構成されている。 FIG. 2 is a diagram illustrating a configuration example of the screen layout creation / editing screen 200 displayed on the display device 103.
In FIG. 2, a layout window 201 for displaying icons of a plurality of types of screen layouts is displayed at the upper left of the screen, and a parts window 202 for displaying parts such as input parts and display parts is displayed at the lower part. .
In addition, a screen editing window 203 for editing the screen in the visual user interface is displayed at the upper right of the screen, and the parts in the screen in the screen editing window 203 are edited (changed or modified) in units of divided areas at the lower part thereof. A component editing window 204 for displaying the image is displayed.
The screen editing window 203 includes a tree view window 2031 that displays a layered structure of screen divisions on one screen to be created / edited, and a preview window 2032 that displays the contents of one screen.
The parts editing window 204 includes a tree window 2041 that moves parts on one relative division area to be edited from the tree view window 2031 and displays parts arranged in the relative division area in a stacked structure, and this tree. The window 2041 includes a preview window 2042 that displays the contents of one part.
The event table 1061 is a table in which types of events such as user operations are registered, and is configured as shown in FIG. 3, for example.

図３に示すイベントテーブル１０６１は、携帯電話機のビジュアルユーザインタフェースにおけるイベント情報の構成例を示したものであり、その格納情報はイベントNo.１０６１１、イベントＩＤ１０６１２、イベント種別１０６１３で構成されている。
例えば携帯電話機のファンクションキーの「上キー押下」操作についてはイベントＩＤ＝EVT_KEY_UPが登録されている。
レイアウトテーブル１０６２は、１つの画面を複数に相対分割する相対分割領域に関する画面レイアウトの定義情報を格納したものであり、その格納情報は図４に示すようにレイアウトNo.１０６２１、レイアウトＩＤ１０６２２、分割方向１０６２３の情報が登録されている。 The event table 1061 shown in FIG. 3 shows a configuration example of event information in the visual user interface of the mobile phone, and the stored information is composed of an event number 10611, an event ID 10612, and an event type 10613.
For example, event ID = EVT_KEY_UP is registered for the “up key press” operation of the function key of the cellular phone.
The layout table 1062 stores screen layout definition information related to a relative division area that relatively divides one screen into a plurality of pieces, and the storage information includes layout No. 10621, layout ID 10622, and division direction as shown in FIG. Information of 10623 is registered.

図４に例示する定義情報は、１つの画面を分割しない場合のレイアウト定義、左右方向に２分割する場合のレイアウト定義、上下方向に２分割にする場合の定義の例を示すものであり、レイアウト「No.２」及び「No.３」の定義は図２のレイアウトウインドウ２０１におけるアイコン２０１１、２０１２に対応する。
本発明においては、図４の定義の他に、後述する図２０に示すように、各種の分割の仕方を定義することができる。なお、１つの画面を分割しない場合の定義は“TOP”として示している。
部品テーブル１０６３は、画面に配置する複数種類の入力部品等の部品の定義情報を格納したものであり、例えば図５に示すように、部品No.１０６３１、部品ＩＤ１０６３２、部品名、ビットマップデータの先頭アドレス１０６３４の情報が格納されている。
ここで例示する部品には、コマンドボタン、リスト、ビットマップ、テキスト、テキストボックス、ラジオボタン、チェックボックス、タブといったものが用意されている。
そして、それぞれの部品はビットマップデータ１０８としてメモリ１０６内に格納されている。 The definition information illustrated in FIG. 4 shows an example of layout definition when one screen is not divided, layout definition when divided into two in the horizontal direction, and definition when divided into two in the vertical direction. The definitions of “No. 2” and “No. 3” correspond to the icons 2011 and 2012 in the layout window 201 of FIG.
In the present invention, in addition to the definition of FIG. 4, various division methods can be defined as shown in FIG. The definition when one screen is not divided is indicated as “TOP”.
The part table 1063 stores definition information of parts such as a plurality of types of input parts arranged on the screen. For example, as shown in FIG. 5, the part number 10631, part ID 10632, part name, and bitmap data are stored. Information of the start address 10634 is stored.
Examples of components include command buttons, lists, bitmaps, text, text boxes, radio buttons, check boxes, and tabs.
Each component is stored in the memory 106 as bitmap data 108.

画面構造テーブル１０６４は、１つの画面を構成する画面レイアウトの種別（ＩＤ）と各画面分割階層に配置された部品種別（ＩＤ）と、各画面分割階層に配置された各部品が応答するイベントの情報とを格納するものであり、例えば図６（ａ）に示すように構成されている。
すなわち、図６（ａ）に示すように、部品No.１０６４１、部品名１０６４２、部品種別１０６４３、部品No.またはレイアウトNo.１０６４４，処理イベント数１０６４５、イベントＩＤ（１）１０６４６〜（ｎ）、親部品No.１０６５０の情報で構成され、各画面分割階層における分割領域および部品毎に、これらの情報が格納されるようになっている。
この画面構造テーブル１０６４および後述の部品構造テーブル１０６５では、画面を分割するアイコンも部品（レイアウト部品）として扱っている。例えば、図２の上下方向に画面を２分割するアイコン２０１２については、レイアウトNo.１０６４４として「２」が登録され、応答する外部操作イベントとしてイベントＩＤ＝１（上キー押下）、イベントＩＤ＝２（下キー押下）が登録されている。
部品構造テーブル１０６５は、各画面分割階層の各分割領域に配置した部品の種別の情報を画面分割階層別に格納するものであり、例えば図６（ｂ）に示すように、画面分割階層別の部品種別を親子関係で格納するようになっている。
図６（ｂ）においては、部品No.１０６５１、親部品No.１０６５２、子部品数１０６５３、子部品No.（１）１０６５４〜（ｍ）１０６５７の情報を格納するようになっている。
図６（ａ），（ｂ）に示す画面構造テーブル１０６４および部品構造テーブル１０６５の格納内容であった場合、図７（ａ）に示すような構造のレイアウトで部品が配置されていることになる。本発明では、１つの画面について、図７（ｂ）に示すように、必要な部品を積層構造で積み重ねる形式で作成する。
なお、部品No.は図５の部品テーブル１０６３で定義されたものである。
また、矢印７０１は外部操作のイベントの伝達方向を示している。このイベントの伝達方向は矢印７０１と逆向きに設定されることもある。
なお、部品（レイアウト用の部品を含む）がそれぞれ処理するイベントは、例えば図８に示すように対応している。 The screen structure table 1064 includes a screen layout type (ID) constituting one screen, a component type (ID) arranged in each screen division hierarchy, and an event to which each component arranged in each screen division hierarchy responds. Information is stored, for example, as shown in FIG.
That is, as shown in FIG. 6A, a part number 10642, a part name 10642, a part type 10463, a part number or layout number 10644, a processing event number 10645, an event ID (1) 10646 to (n), It consists of information of the parent part No. 10650, and this information is stored for each divided area and each part in each screen division hierarchy.
In the screen structure table 1064 and a component structure table 1065 described later, icons for dividing the screen are also handled as components (layout components). For example, for the icon 2012 that divides the screen into two in the vertical direction in FIG. 2, “2” is registered as the layout No. 10644, event ID = 1 (up key pressed), and event ID = 2 as an external operation event to respond. (Down key pressed) is registered.
The part structure table 1065 stores information on the types of parts arranged in each divided area of each screen division hierarchy for each screen division hierarchy. For example, as shown in FIG. The type is stored in a parent-child relationship.
In FIG. 6B, information on a part number 10651, a parent part number 10652, a number of child parts 10653, and child part numbers (1) 10654 to (m) 10657 are stored.
In the case of the stored contents of the screen structure table 1064 and the part structure table 1065 shown in FIGS. 6A and 6B, the parts are arranged in the layout having the structure shown in FIG. . In the present invention, as shown in FIG. 7B, one screen is created in a form in which necessary parts are stacked in a laminated structure.
The part number is defined in the part table 1063 in FIG.
An arrow 701 indicates the direction of transmission of an external operation event. The transmission direction of this event may be set in the direction opposite to the arrow 701.
Note that events processed by components (including layout components) correspond to each other as shown in FIG. 8, for example.

次に、以上の構成において、所望のレイアウトのアイコンを選択し、その選択したレイアウトの画面中に部品を配置する場合の操作手順について、図９〜図２３の画面レイアウト作成・編集画面を参照して説明する。
まず、図９に示すように、レイアウトウインドウ２０１から例えば画面を上下方向に２分割するアイコン２０１２を選択しドラッグアンドドロップ操作によって画面編集ウインドウ２０３のツリービューウインドウ２０３１に配置する。
すると、図１０に示すように、ツリービューウインドウ２０３１に画面分割の階層構造が表示され、上下の分割領域に「部品を置いて下さい」というメッセージが表示される。
また、プレビューウインドウ２０３２には分割した画面の境界が破線２０３３で表示され、それぞれの分割領域に部品の配置を促すメッセージ「ドラッグアンドドロップして下さい」が表示される。
そこで、図１１に示すように、部品ウインドウ２０２から例えばビットマップ部品２０２１をツリービューウインドウ２０３１内の上側の分割領域の「部品を置いて下さい」という表示位置に配置するドラッグアンドドロップ操作を行う。
すると、図１２に示すように、ツリービューウインドウ２０３１の上側の分割領域の「部品を置いて下さい」に代わってビットマップ部品が配置されたことが表示され、またプレビューウインドウ２０３２には、配置されたビットマップ部品２０３１のプレビュー画像が表示される。 Next, referring to the screen layout creation / editing screens of FIGS. 9 to 23 for the operation procedure when selecting an icon of a desired layout in the above configuration and placing a component in the screen of the selected layout. I will explain.
First, as shown in FIG. 9, for example, an icon 2012 that divides the screen into two in the vertical direction is selected from the layout window 201 and placed in the tree view window 2031 of the screen editing window 203 by a drag and drop operation.
Then, as shown in FIG. 10, a hierarchical structure of screen division is displayed in the tree view window 2031 and a message “Place a part” is displayed in the upper and lower divided areas.
In the preview window 2032, the boundaries of the divided screens are displayed by broken lines 2033, and a message “Please drag and drop” prompting the placement of the parts in each divided area is displayed.
Therefore, as shown in FIG. 11, a drag-and-drop operation is performed from the parts window 202 to place, for example, the bitmap part 2021 at a display position “Place a part” in the upper divided area in the tree view window 2031.
Then, as shown in FIG. 12, it is displayed that a bitmap part is placed in place of “Place a part” in the upper divided area of the tree view window 2031, and the preview window 2032 is placed. A preview image of the bitmap component 2031 is displayed.

次に、図１３に示すように、リスト部品２０２２をツリービューウインドウ２０３１内の下側の分割領域の「部品を置いて下さい」という表示位置に配置するドラッグアンドドロップ操作を行う。これにより、下側の分割領域の「部品を置いて下さい」に代わってリスト部品が配置されたことが表示され、またプレビューウインドウ２０３２には、配置されたリスト部品２０３２のプレビュー画像が表示される。
以上によって、図１４に示すような積層構造の画面が作成される。 Next, as shown in FIG. 13, a drag-and-drop operation is performed in which the list part 2022 is arranged at a display position “Place part” in the lower divided area in the tree view window 2031. As a result, it is displayed that the list part is arranged instead of “Place a part” in the lower divided area, and a preview image of the arranged list part 2032 is displayed in the preview window 2032. .
As a result, a screen having a laminated structure as shown in FIG. 14 is created.

次に、配置した部品を編集する場合の操作手順について、図１５〜図１９を参照して説明する。
図１５のように上下２分割の各分割領域にビットマップ部品とリスト部品が配置された状態で、例えばリスト部品を編集することが必要になった場合、画面編集ウインドウ２０３のツリービューウインドウ２０３１内のリスト部品を操作によって部品編集ウインドウ２０４のツリービューウインドウ２０４１に移動する。
すると、図１６に示すように、画面編集ウインドウ２０３のツリービューウインドウ２０３１内のリスト部品は消去され、再び部品の配置を求めるメッセージ「部品を置いて下さい」が表示される。
一方、部品編集ウインドウ２０４のツリービューウインドウ２０４１内にはリスト部品の階層が表示され、プレビューウインドウ２０４２には編集前のリスト部品がプレビュー表示される。
そこで、リスト部品の各項目に例えばラジオボタン２０２３を配置し、更にテキスト部品２０２４を配置するドラッグアンドドロップ操作を行うことによってリスト部品を編集する。 Next, an operation procedure for editing the arranged parts will be described with reference to FIGS.
As shown in FIG. 15, when it is necessary to edit, for example, a list part in a state where a bitmap part and a list part are arranged in each of the upper and lower divided parts, the tree view window 2031 in the screen editing window 203 The list parts are moved to the tree view window 2041 of the parts editing window 204 by operation.
Then, as shown in FIG. 16, the list parts in the tree view window 2031 of the screen editing window 203 are deleted, and the message “Place the parts” for requesting the arrangement of the parts is displayed again.
On the other hand, a hierarchy of list parts is displayed in the tree view window 2041 of the part editing window 204, and a list part before editing is previewed in the preview window 2042.
Therefore, for example, a radio button 2023 is arranged in each item of the list part, and the list part is edited by performing a drag and drop operation for arranging a text part 2024.

すると、図１７に示すように、部品編集ウインドウ２０４のプレビューウインドウ２０４２には編集されたリスト部品がプレビュー表示される。
この後、図１８に示すように、部品編集ウインドウ２０４のツリービューウインドウ２０４１のリスト部品の階層位置をドラッグアンドドロップ操作によって選択し、画面編集ウインドウ２０３のツリービューウインドウ２０３１の「部品を置いて下さい」の位置に移動させることにより、編集したリスト部品をツリービューウインドウ２０３１に戻す。
これにより、画面編集ウインドウ２０３のツリービューウインドウ２０３１およびプレビューウインドウ２０３２の表示内容は図１９に示すようなものに変わり、編集済みのリスト部品が再配置された状態となる。 Then, as shown in FIG. 17, the edited list part is previewed in the preview window 2042 of the part edit window 204.
After that, as shown in FIG. 18, the hierarchical position of the list part in the tree view window 2041 in the part edit window 204 is selected by drag and drop operation, and “Place the part in the tree view window 2031 in the screen edit window 203 is placed. The edited list parts are returned to the tree view window 2031.
As a result, the display contents of the tree view window 2031 and the preview window 2032 of the screen editing window 203 are changed to those shown in FIG. 19, and the edited list parts are rearranged.

ここで、レイアウトウインドウ２０１では、画面を分割するレイアウト用のアイコンとして、左右２分割、上下２分割のアイコンを例示しているが、本発明はこれに限定されるものではなく、図２０（ａ）に示すように画面を碁盤目状のレイアウトに分割するアイコン２０１３、同図（ｂ）に示すように画面を東、西、南、北および中心といった５つの分割領域に分割するアイコン２０１４、同図（ｃ）に示すように画面を４等分するアイコン２０１５など、各種の分割形状のアイコンを用いることができる。
図２０（ｃ）のアイコン２０１５を用いた場合、画面分割した階層構造は図２０（ｄ）に示すようなものとなる。
この場合、図２０（ｃ）のレイアウトの画面は、左右２分割用のアイコン２０１１と上下２分割用のアイコン２０１２を組み合わせて使用することによっても作成することができる。
すなわち、図２１（ａ）に示すようにＴＯＰ画面を左右２分割用のアイコン２０１１で２分割して分割領域２１０１，２１０２を作成し、次に左側の分割領域２０１１を上下２分割用のアイコン２０１２で２分割して分割領域２１０１０，２１０１１を作成し、更に右側の分割領域１０２２を左右２分割用のアイコン２０１１で２分割して分割領域２１０１２，２１０１３を作成することによって実現することができる。
図２１（ａ）のように分割した場合、画面分割の積層構造は同図（ｂ）に示すようなものとなる。
本発明において、相対画面分割を行い、それぞれの分割領域に入力部品等を配置する場合、（１）必要な相対画面分割領域を全て作成した後、それぞれの分割階層を１つずつ呼び出して部品を配置する方法、（２）「部品を置いて下さい」というメッセージが画面編集ウインドウ２０３のツリービューウインドウ２０３１に表示されている状態で、そのメッセージの階層位置にレイアウト用のアイコンを移して画面を再分割し、その再分割した領域に部品を配置する方法がある。本発明ではいずれの方法を用いてもよい。 Here, in the layout window 201, as the icons for the layout for dividing the screen, two left and right divided icons and two vertically divided icons are illustrated, but the present invention is not limited to this, and FIG. ), An icon 2013 for dividing the screen into a grid-like layout, and an icon 2014 for dividing the screen into five divided areas such as east, west, south, north, and center as shown in FIG. Various divided shapes such as an icon 2015 for dividing the screen into four equal parts as shown in FIG.
When the icon 2015 in FIG. 20C is used, the hierarchical structure divided into the screens is as shown in FIG.
In this case, the layout screen of FIG. 20C can also be created by using a combination of the left and right divided icons 2011 and the upper and lower divided icons 2012 in combination.
In other words, as shown in FIG. 21A, the TOP screen is divided into two divided by the left and right divided icons 2011 to create divided areas 2101 and 2102, and then the left divided area 2011 is divided into two divided icons 2012. This is realized by dividing the area into two to create divided areas 21010 and 21011, and further dividing the right divided area 1022 into two with the left and right divided icons 2011 to create divided areas 21012 and 21013.
When divided as shown in FIG. 21A, the laminated structure of screen division is as shown in FIG.
In the present invention, when performing relative screen division and placing input parts or the like in each divided area, (1) after creating all necessary relative screen divided areas, call each divided layer one by one to (2) With the message “Place a part” displayed in the tree view window 2031 of the screen editing window 203, the layout icon is moved to the hierarchical position of the message and the screen is re-displayed. There is a method of dividing and arranging parts in the subdivided area. Any method may be used in the present invention.

図２２〜図２３は、上記（２）の方法を用いて相対画面分割しながら部品を配置する場合の操作手順を示すものである。
すなわち、図１２のように上下分割した相対分割領域の上側の領域にビットマップ部品を配置した後、下側の領域を左右方向に再分割し、その再分割領域にリスト部品を配置する場合、図２２に示すように、画面編集ウインドウ２０３のツリービューウインドウ２０３１に表示されている下側の相対分割領域の「部品を置いて下さい」のメッセージ表示位置に、左右方向に相対２分割するアイコン２０１１をドラッグアンドドロップする操作を行う。
すると、図２３に示すように、画面編集ウインドウ２０３のツリービューウインドウ２０３１に再分割された画面の積層構造が表示され、それぞれの再分割領域に「部品を置いて下さい」というメッセージが表示される。そこで、必要な部品を再配置する。 22 to 23 show an operation procedure in the case where components are arranged while the relative screen is divided using the method (2).
That is, when the bitmap parts are arranged in the upper area of the relative divided area divided vertically as shown in FIG. 12, the lower area is subdivided in the horizontal direction, and the list parts are arranged in the subdivided areas. As shown in FIG. 22, an icon 2011 that relatively divides into two in the left-right direction at the message display position “Place a part” in the lower relative division area displayed in the tree view window 2031 of the screen editing window 203. Drag and drop the button.
Then, as shown in FIG. 23, the layered structure of the subdivided screen is displayed in the tree view window 2031 of the screen editing window 203, and a message “Place a part” is displayed in each subdivision area. . Therefore, necessary parts are rearranged.

次に、画面作成エディタ１０７１の処理の詳細について図２４〜図３１のフローチャートを参照して説明する。
以下では、次の４つの処理に関するフローチャートを参照して説明する。
（１）レイアウトを作成した時に、内部データが作成され、プレビューウインドウとツリービューウインドウに反映されるまでの処理、
（２）部品を画面に配置した時に、内部データが作成されプレビューウインドウとツリービューウインドウに反映されるまでの処理、
（３）画面編集ウインドウから部品編集ウインドウへ部品をドラッグアンドドロップ操作で移動させ、画面の一部だけを編集するときの内部データの変更処理とツリービューウインドウとプレビューウインドウへの反映の処理、
（４）部品編集ウインドウから画面編集ウインドウへ部品をドラッグアンドドロップして編集していた部品を画面に反映させたときの内部データの変更処理とツリービューウインドウとプレビューウインドウへの反映の処理、 Next, details of the processing of the screen creation editor 1071 will be described with reference to the flowcharts of FIGS.
Hereinafter, description will be given with reference to flowcharts relating to the following four processes.
(1) Processing until internal data is created and reflected in the preview window and tree view window when the layout is created,
(2) Processing until internal data is created and reflected in the preview window and tree view window when the part is placed on the screen.
(3) A part is moved from the screen edit window to the part edit window by a drag-and-drop operation, and internal data change processing when only a part of the screen is edited, and reflection processing to the tree view window and the preview window,
(4) Internal data change processing when the component edited by dragging and dropping the component from the component editing window to the screen editing window is reflected on the screen, and reflection processing on the tree view window and the preview window,

図２４は、レイアウトを作成した時に、内部データが作成され、プレビューウインドウとツリービューウインドウに反映されるまでの処理手順を示すフローチャートである。
図２４において、まず、レイアウトウインドウ２０１から画面編集ウインドウ２０３へレイアウト用のアイコンをドラッグアンドドロップする（ステップ２４０１）。
次に、変数curDragにドラッグしたレイアウトのレイアウトNoを設定し、更に変数curDropにドロップした部品(もしくはレイアウト)の親部品Noを設定する（ステップ２４０２）。
そして、画面構造テーブル１０６４にレコードを1件追加する（ステップ２４０３）。この場合、確保したテーブルをcurTableとする。
次に、curTableの部品名として画面内で一意なIDを設定し、更に部品種別として”レイアウト”、レイアウトNoとしてcurDrag、親の部品NoとしてcurDropをそれぞれ設定する（ステップ２４０４）。
次に、画面編集ウインドウ２０３のツリービューウインドウ２０３１に追加したレイアウトを追加表示する（ステップ２４０５）。
次に、curDrop(親部品)がレイアウト用の部品であるかを判定し（ステップ２４０６）、そうであれば、親の画面領域は、すでに分割されているので、今回のレイアウト配置で、親のレイアウトが分割した領域の片側を更に分割する。すなわち、プレビューウインドウ２０３２上で、すでに分割されている親の画面領域の片側を更に分割し、分割した領域の境界を点線で区切る（ステップ２４０７）。
しかし、curDrop(親部品)がレイアウト用の部品でなかった場合には、親部品領域は分割されていない。このため、プレビューウインドウ２０３２上で、親画面領域を分割し、境界を点線で区切る（ステップ２４０８）。
次に、分割した領域上に「部品を置いて下さい。」というメッセージを表示する（ステップ２４０９）。
以上により、レイアウト配置処理が終了する。 FIG. 24 is a flowchart showing a processing procedure until internal data is created and reflected in the preview window and the tree view window when the layout is created.
In FIG. 24, first, a layout icon is dragged and dropped from the layout window 201 to the screen editing window 203 (step 2401).
Next, the layout No. of the dragged layout is set to the variable curDrag, and the parent part No. of the dropped part (or layout) is set to the variable curDrop (step 2402).
Then, one record is added to the screen structure table 1064 (step 2403). In this case, the secured table is curTable.
Next, a unique ID in the screen is set as the part name of curTable, and “layout” is set as the part type, curDrag is set as the layout number, and curDrop is set as the parent part number (step 2404).
Next, the added layout is additionally displayed in the tree view window 2031 of the screen editing window 203 (step 2405).
Next, it is determined whether curDrop (parent part) is a part for layout (step 2406). If so, the parent screen area has already been divided. One side of the area divided by the layout is further divided. That is, one side of the parent screen area that has already been divided is further divided on the preview window 2032, and the boundary of the divided area is divided by a dotted line (step 2407).
However, when curDrop (parent part) is not a layout part, the parent part area is not divided. Therefore, the main screen area is divided on the preview window 2032 and the boundary is divided by a dotted line (step 2408).
Next, a message “Place a part.” Is displayed on the divided area (step 2409).
Thus, the layout arrangement process ends.

図２５は、部品を画面に配置した時に、内部データが作成されプレビューウインドウとツリービューウインドウに反映されるまでの処理手順を示すフローチャートである。
図２５において、まず、部品ウインドウ２０２から画面編集ウインドウ２０３へ、必要な部品をドラッグアンドドロップする（ステップ２５０１）。
そして、変数curDragにドラッグした部品の部品Noを設定し、また変数curDropにドロップされた部品(もしくはレイアウト)の部品Noを設定する（ステップ２５０２）。この場合、“部品を置いてください”というところへドロップした場合は、その親の部品Noを設定する。
次に、画面構造テーブル１０６４にレコードを１件追加する（ステップ２５０３）。ここでは、確保したテーブルをcurTableとする。
次に、curTableの部品名に画面内で一意なIDを設定し、また部品種別に”部品”、レイアウトNoにcurDrag、親ノードの部品NoにcurDropを設定する（ステップ２５０４）。
次に、画面編集ウインドウ２０３のツリービューウインドウ２０３１に、追加した部品を追加表示する（ステップ２５０５）。
次に、プレビューウインドウ２０３２の部品を配置する階層位置に表示されている「ドラッグアンドドロップして下さい」というメッセージを削除し、ステップ２５０１でドラッグアンドドロップした部品をプレビューウインドウ２０３２に表示する（ステップ２５０６）。 FIG. 25 is a flowchart showing a processing procedure until internal data is created and reflected in the preview window and the tree view window when components are arranged on the screen.
In FIG. 25, first, a necessary part is dragged and dropped from the part window 202 to the screen editing window 203 (step 2501).
Then, the part number of the dragged part is set to the variable curDrag, and the part number of the dropped part (or layout) is set to the variable curDrop (step 2502). In this case, when dropping to the place “Place a part”, the parent part number is set.
Next, one record is added to the screen structure table 1064 (step 2503). Here, let the secured table be curTable.
Next, a unique ID in the screen is set for the part name of curTable, “part” is set for the part type, curDrag is set for the layout number, and curDrop is set for the part number of the parent node (step 2504).
Next, the added part is additionally displayed in the tree view window 2031 of the screen editing window 203 (step 2505).
Next, the message “Please drag and drop” displayed at the hierarchical position where the parts are arranged in the preview window 2032 is deleted, and the parts dragged and dropped in step 2501 are displayed in the preview window 2032 (step 2506). ).

図２６は、画面編集ウインドウから部品編集ウインドウへ部品をドラッグアンドドロップ操作で移動させ、部品の一部だけを編集するときの内部データの変更処理とツリービューとプレビュー画面への反映の処理手順を示すフローチャートである。
図２６において、まず、画面編集ウインドウ２０３のツリービュー２０３１に表示されている１つの画面分割階層をドラッグし、部品編集ウインドウ２０４のツリービューウインドウ２０４１上にドロップする（ステップ２６０１）。
次に、変数curDragにドラッグした部品の(画面構造テーブル上の)部品Noを設定し（ステップ２６０２）、部品編集ウインドウのツリービューウインドウ２０３１が空かどうかを判定する（ステップ２６０３）。
空であった場合には終了する。
しかし、空でなかった場合には、変数curDragのレコードを部品構造テーブル１０６５へ移動する。また、curDragの親部品Noの子部品数を１減らし、該当する子部品Noを削除する（ステップ２６０４）。
次に、変数curDragの子部品数が「０」であるかを判定し（ステップ２６０５）、「０」であればステップ２６０９に進む。
「０」でなかった場合、ステップ２６０６〜２６０８のループ（１）の処理を行う。すなわち、変数curDragの全ての子部品に対してmove_record(子部品No.)関数の処理を行う(ステップ２６０７)。
このループ（１）の処理については図２７に詳細に示している。
次に、画面編集ウインドウ２０３のプレビューウインドウ２０３２を再描画する（ステップ２６０９）。具体的には、preview_draw(画面rootの情報を持つレコード)関数の呼び出しを行う。このpreview_draw関数については、図２８に詳細に示している。
次に、部品編集ウインドウ２０３のプレビューウインドウ２０４２を再描画する（ステップ２６１０）。具体的には、preview_draw(curDrag)関数の呼び出しを行う。 FIG. 26 shows a processing procedure for changing the internal data and reflecting the result on the tree view and the preview screen when the part is moved from the screen editing window to the part editing window by drag and drop operation and only a part of the part is edited. It is a flowchart to show.
In FIG. 26, first, one screen division layer displayed in the tree view 2031 of the screen editing window 203 is dragged and dropped on the tree view window 2041 of the part editing window 204 (step 2601).
Next, the part number (on the screen structure table) of the dragged part is set to the variable curDrag (step 2602), and it is determined whether the tree view window 2031 of the part edit window is empty (step 2603).
If it is empty, exit.
However, if it is not empty, the record of the variable curDrag is moved to the part structure table 1065. Further, the number of child parts of the parent part No. of curDrag is reduced by 1, and the corresponding child part No. is deleted (Step 2604).
Next, it is determined whether or not the number of child parts of the variable curDrag is “0” (step 2605). If “0”, the process proceeds to step 2609.
When it is not “0”, the processing of loop (1) in steps 2606 to 2608 is performed. That is, the move_record (child part No.) function is processed for all child parts of the variable curDrag (step 2607).
The processing of the loop (1) is shown in detail in FIG.
Next, the preview window 2032 of the screen editing window 203 is redrawn (step 2609). Specifically, the function preview_draw (record with screen root information) is called. The preview_draw function is shown in detail in FIG.
Next, the preview window 2042 of the part edit window 203 is redrawn (step 2610). Specifically, the preview_draw (curDrag) function is called.

図２７は、図２６のステップ２６０７のmove_record(子部品No.)関数の処理の詳細を示すフローチャートである。
図２７において、画面構造テーブル１０６４から部品Noのレコードを検索する（ステップ２７０１）。詳しくは、work_record＝検索の結果見つかったレコードとした後（ステップ２７０１）、検索したレコードが見つかったかを判定し（ステップ２７０２）、見つからなかった場合には処理を終了する。
見つかった場合には、work_recordのテーブルを部品構造テーブル１０６５へ移動する（ステップ２７０３）。
次に、work_recordの子部品数が「０」であるかを判定し（ステップ２７０４）、「０」であれば処理を終了する。
「０」でなかった場合には、ステップ２７０５〜２７０７のループ（２）の処理を行う。
すなわち、work_recordの全ての子部品に対してmove_record(work_record.子部品No.)関数の処理を行う（ステップ２７０６）。 FIG. 27 is a flowchart showing details of the process of the move_record (child component No.) function in step 2607 of FIG.
In FIG. 27, the component number record is searched from the screen structure table 1064 (step 2701). Specifically, after setting work_record = record found as a result of the search (step 2701), it is determined whether the searched record is found (step 2702). If no record is found, the process ends.
If found, the work_record table is moved to the part structure table 1065 (step 2703).
Next, it is determined whether the number of child parts of work_record is “0” (step 2704), and if it is “0”, the process is terminated.
If it is not “0”, the processing of loop (2) in steps 2705 to 2707 is performed.
That is, the move_record (work_record. Child part No.) function is processed for all the child parts of work_record (step 2706).

図２８は、図２６のステップ２６０９、２６１０のmove_record(子部品No.)関数の処理の詳細を示すフローチャートである。
図２８において、まず、部品Noのレコード情報を元に、部品(レイアウト)を表示する（ステップ２８０１）。
次に、その部品Noの子部品数が「０」かどうかを判定し（ステップ２８０２）、「０」であった場合には処理を終了する。
「０」でなかった場合には、ステップ２８０３〜２８０５のループ（３）の処理を行う。
すなわち、部品Noの全ての子部品に対して、preview_draw(部品No.子部品No.)関数の処理を行う（ステップ２８０４）。 FIG. 28 is a flowchart showing details of the process of the move_record (child component No.) function in steps 2609 and 2610 of FIG.
In FIG. 28, first, a component (layout) is displayed based on the record information of the component number (step 2801).
Next, it is determined whether or not the number of child parts of the part No is “0” (step 2802). If it is “0”, the process is terminated.
If it is not “0”, the processing of loop (3) in steps 2803 to 2805 is performed.
That is, the process of the preview_draw (part No. child part No.) function is performed for all the child parts of the part No (step 2804).

図２９は、部品編集ウインドウ２０４から画面編集ウインドウ２０３へ部品をドラッグアンドドロップして編集していた部品を画面に反映させたときの内部データの変更処理とツリービューウインドウ２０３１とプレビューウインドウ２０３２への反映の処理を示すフローチャートである。
図２９において、まず、部品編集ウインドウ２０４のツリービューウインドウ２０４１の表示されている編集後の部品をドラッグし、画面編集ウインドウ２０３のツリービューウインドウ２０３１上にドロップする（ステップ２９０１）。
次に、curDragにドラッグした部品の(部品テーブル上の)部品Noを設定した後（ステップ２９０２）、ドロップ先の部品(レイアウト)上に部品の配置が可能かどうかを判定する（ステップ２９０３）。配置可能でなければ、処理を終了する。
配置可能であった場合には、curDragのレコードを部品構造テーブル１０６５へ移動する。そして、curDragの親部品No.および子部品数を１つ減らし、該当する子部品Noを削除する（ステップ２９０４）。
次に、curDragの子部品数が「０」かどうかを判定し、「０」であればステップ２９０９に進む（ステップ２９０５）。
curDragの子部品数が「０」でなかった場合、ステップ２９０６〜２９０８において、ループ（４）の処理をcurDragの全ての子部品に対して行う。すなわち、curDragの全ての子部品に対して図３０に詳細に示すadd_record(子部品No.)関数の処理を行う。
次に、画面編集ウインドウ２０３のプレビューウインドウ２０３２を再描画する。具体的には、図３１に詳細を示すpreview_draw(画面ｔｏｐの情報を持つレコード)関数の呼び出しを行う（ステップ２９０９）。
次に、部品編集ウインドウ２０４のプレビューウインドウ２０４２を再描画する。具体的には、図３１のpreview_draw(curDrag)関数の呼び出しを行う（ステップ２９１０）。 FIG. 29 shows the internal data changing process when the part edited by dragging and dropping the part from the part editing window 204 to the screen editing window 203 is reflected on the screen, and the tree view window 2031 and the preview window 2032. It is a flowchart which shows the process of reflection.
In FIG. 29, first, the edited part displayed in the tree view window 2041 of the part edit window 204 is dragged and dropped onto the tree view window 2031 of the screen edit window 203 (step 2901).
Next, after setting the part number (on the part table) of the part dragged to curDrag (step 2902), it is determined whether or not the part can be placed on the drop destination part (layout) (step 2903). If it cannot be arranged, the process ends.
If it can be arranged, the curDrag record is moved to the part structure table 1065. Then, the parent part number of curDrag and the number of child parts are reduced by 1, and the corresponding child part number is deleted (step 2904).
Next, it is determined whether the number of child parts of curDrag is “0”. If “0”, the process proceeds to step 2909 (step 2905).
When the number of child parts of curDrag is not “0”, the processing of loop (4) is performed for all the child parts of curDrag in steps 2906 to 2908. That is, the add_record (child part number) function shown in detail in FIG. 30 is processed for all the child parts of curDrag.
Next, the preview window 2032 of the screen editing window 203 is redrawn. Specifically, a preview_draw (record having information on screen top) function shown in detail in FIG. 31 is called (step 2909).
Next, the preview window 2042 of the part edit window 204 is redrawn. Specifically, the preview_draw (curDrag) function of FIG. 31 is called (step 2910).

図３０のadd_record(子部品No.)関数の処理においては、検索の結果見つかったレコードを一時記憶する領域work_recordを確保した後、部品テーブル１０６３から部品Noのレコードを検索する（ステップ３００１）。
そして、検索したレコードが見つかったか否かを判定し（ステップ３００２）、見つからなかった場合には処理を終了する。
見つかった場合には、work_recordのテーブルを画面構造テーブル（１０６４）へ移動する（ステップ３００３）。
そして、work_recordの子部品数が「０」であるかを判定し（ステップ３００４）、「０」であった場合には処理を終了する。
「０」であった場合には、ステップ３００５〜３００７において、work_recordの全ての子部品に対してループ（５）の処理を行う。すなわち、work_recordの全ての子部品に対してadd_record(work_record.子部品No.)関数の処理を行う（ステップ３００６）。 In the process of the add_record (child part No.) function in FIG. 30, after securing an area work_record for temporarily storing a record found as a result of the search, a part number record is searched from the part table 1063 (step 3001).
Then, it is determined whether or not the searched record is found (step 3002). If no record is found, the process is terminated.
If found, the work_record table is moved to the screen structure table (1064) (step 3003).
Then, it is determined whether the number of child parts of work_record is “0” (step 3004). If it is “0”, the process is terminated.
If it is “0”, in step 3005 to 3007, the process of loop (5) is performed on all the child parts of work_record. That is, the add_record (work_record. Child part No.) function is processed for all the child parts of work_record (step 3006).

図３１に示すpreview_draw(部品No)関数の処理では、部品Noのレコード情報を元に、部品(レイアウト)を表示する（ステップ３１０１）。
次に、部品Noの子部品数が「０」であるかを判定し（ステップ３１０２）、「０」であれば処理を終了する。
「０」でなければ、ステップ３１０３〜３１０５において、部品Noの全ての子部品に対してループ（６）の処理を行う。すなわち、部品Noの全ての子部品に対してpreview_draw(部品No.子部品No.)関数の処理を行う（ステップ３１０４）。 In the process of the preview_draw (part No) function shown in FIG. 31, a part (layout) is displayed based on the record information of the part No (step 3101).
Next, it is determined whether or not the number of child parts of the part number is “0” (step 3102). If “0”, the process is terminated.
If it is not “0”, in step 3103 to 3105, the processing of the loop (6) is performed for all the child parts of the part No. That is, the process of the preview_draw (part No. child part No.) function is performed for all the child parts of the part No (step 3104).

本発明の実施の形態を示すブロック構成図である。It is a block block diagram which shows embodiment of this invention. 画面レイアウト作成・変種画面の例を示す図である。It is a figure which shows the example of a screen layout creation / variant screen. 部品が応答するイベント情報を登録したイベントテーブルの構成を示す図である。It is a figure which shows the structure of the event table which registered the event information to which components respond. 画面レイアウトの定義情報を格納したレイアウトテーブルの構成を示す図である。It is a figure which shows the structure of the layout table which stored the definition information of the screen layout. 部品の定義情報を格納した部品テーブルの構成を示す図である。It is a figure which shows the structure of the components table which stored the definition information of components. １つの画面を構成するレイアウトの種別や配置部品、各部品が応答するイベント情報を登録する画面構造テーブルと、各分割階層に配置した部品の情報を登録する部品構造テーブルの構成を示す図である。It is a figure which shows the structure of the screen structure table which registers the classification of the layout which comprises one screen, arrangement | positioning components, the event information which each component responds, and the components structure table which registers the information of the components arrange | positioned at each division | segmentation hierarchy. . 図６のテーブルの登録内容に対応する画面の積層構造を示す図である。It is a figure which shows the laminated structure of the screen corresponding to the registration content of the table of FIG. 各部品が応答するイベントの例を示す図である。It is a figure which shows the example of the event which each component responds. 画面のレイアウトをレイアウト部品のドラッグアンドドロップ操作によって作成する段階の画面を示す図である。It is a figure which shows the screen of the step which produces the layout of a screen by drag and drop operation of a layout component. 部品の配置を促すメッセージが表示された状態を示す図である。It is a figure showing the state where the message which urges arrangement of parts was displayed. 部品をドラッグアンドドロップ操作によって配置する段階の画面を示す図である。It is a figure which shows the screen of the step which arrange | positions components by drag and drop operation. 配置された部品がプレビュー表示された状態を示す図である。It is a figure which shows the state by which the arrange | positioned components were preview-displayed. レイアウトの残りの領域に、部品をドラッグアンドドロップ操作によって配置する段階の画面を示す図である。It is a figure which shows the screen of the step which arrange | positions components by the drag and drop operation to the remaining area | regions of a layout. 画面分割の積層構造を示す図である。It is a figure which shows the laminated structure of a screen division | segmentation. 配置した部品を部品編集ウインドウへ移動して編集する段階の画面を示す図である。It is a figure which shows the screen of the step which moves the arranged components to a component edit window, and edits them. 部品編集ウインドウへ部品を移動した状態を示す図である。It is a figure which shows the state which moved the component to the component edit window. 部品編集ウインドウのプレビューウインドウに編集された部品が表示された状態を示す図である。It is a figure which shows the state by which the edited part was displayed on the preview window of a part edit window. 編集後の部品を画面編集ウインドウのツリービューウインドウに移動する状態を示す図である。It is a figure which shows the state which moves the components after edit to the tree view window of a screen edit window. 画面編集ウインドウのツリービューウインドウに編集後の部品を移動した状態を示す図である。It is a figure which shows the state which moved the components after edit to the tree view window of a screen edit window. レイアウト部品の他の例を示す図である。It is a figure which shows the other example of a layout component. 複数のレイアウト部品を組み合わせて所望のレイアウトを作成する例を示す図である。It is a figure which shows the example which produces a desired layout combining several layout components. 階層分割しながら画面を作成する場合の画面を示す図である。It is a figure which shows the screen in the case of producing a screen, dividing a hierarchy. 階層分割した階層に部品の配置を促すメッセージが表示された状態を示す図である。It is a figure showing the state where the message which urges arrangement of parts was displayed on the hierarchy divided into layers. 画面レイアウトの選択操作および部品配置操作に応答して画面構造テーブル等を作成する画面作成エディタのレイアウト配置処理の概要を示すフローチャートである。It is a flowchart which shows the outline | summary of the layout arrangement | positioning process of the screen creation editor which produces a screen structure table etc. in response to selection operation and part arrangement | positioning operation of a screen layout. 画面作成エディタの部品配置処理の概要を示すフローチャートである。It is a flowchart which shows the outline | summary of the components arrangement | positioning process of a screen creation editor. 部品作成エディタの部品編集処理の概要を示すフローチャートである。It is a flowchart which shows the outline | summary of the component edit process of a component creation editor. 図２６における関数move_recordの詳細を示すである。FIG. 27 shows details of a function move_record in FIG. 図２６における関数preview_drawの詳細を示すである。FIG. 27 shows details of a function preview_draw in FIG. 26. FIG. 編集後の部品を画面編集ウインドウへ戻す場合の処理を示すフローチャートである。It is a flowchart which shows the process in the case of returning the edited components to a screen edit window. 図２９における関数add_recordの詳細を示すである。FIG. 30 shows details of a function add_record in FIG. 29. FIG. 図２９における関数preview_drawの詳細を示すである。FIG. 30 shows details of a function preview_draw in FIG. 29. FIG.

Explanation of symbols

１０３表示装置
１０４メモリ
１０５ＣＰＵ
２０１レイアウトウインドウ
２０２部品ウインドウ
２０３画面編集ウインドウ
２０４部品編集ウインドウ
１０６１イベントテーブル
１０６２レイアウトテーブル
１０６３部品テーブル
１０６４画面構造テーブル
１０６５部品構造テーブル
１０７１画面作成エディタ
１０７２部品作成エディタ
２０１１レイアウト用のアイコン
２０２１ビットマップ部品 103 display device 104 memory 105 CPU
201 Layout Window 202 Parts Window 203 Screen Editing Window 204 Parts Editing Window 1061 Event Table 1062 Layout Table 1063 Parts Table 1064 Screen Structure Table 1065 Parts Structure Table 1071 Screen Creation Editor 1072 Parts Creation Editor 2011 Layout Icon 2021 Bitmap Parts

Claims

A screen creation device that determines a desired screen layout and creates a screen satisfying a desired function by arranging components such as display components and input components in the screen layout screen,
A layout table storing definition information of screen layouts related to divided areas for dividing one screen into a plurality of areas;
A parts table storing definition information about a plurality of types of parts such as the input parts;
First means for reading out definition information of the layout table and definition information of the component table and displaying the plurality of types of screen layouts and components in icon form in a layout window and a component window generated as a part of a display screen, respectively. When,
In response to the selection operation of any of the icons of the plurality of types of screen layouts displayed in the layout window, a plurality of divided areas constituting the selected screen layout are displayed in the screen editing window. A second means for further accepting an operation of selecting an icon of a plurality of types of screen layouts for the divided region in the display state of the divided region, and defining a screen layout divided into screens in a laminated structure;
A part to be arranged in each divided area of the screen layout displayed in the screen editing window is received by selecting one of a plurality of types of icons displayed in the part window, and the selected part is arranged. A third means to:
A screen structure table storing the type of screen layout of each screen division hierarchy defined by the second means and the type of component arranged in the divided area of each screen division hierarchy by the third means. Means,
Fifth means for reading storage information of the screen structure table and displaying an image of a component arranged in each screen division hierarchy of a screen layout divided into a laminated structure in a preview window;
A screen creation device comprising:

6. The screen according to claim 1, further comprising a sixth means for displaying a message prompting component placement in a divided area of the screen layout of the hierarchy in a state before the placement of the components in the screen layout of each screen division hierarchy. Creation device.

In response to an operation of moving a component arranged in any one of the screen layouts of a plurality of screen division layers displayed in the screen editing window to the component editing window, the component is moved to the component editing window, and the component The screen creation apparatus according to claim 2, further comprising: seventh means for re-editing a part that has already been arranged by a selection operation of any of a plurality of types of icons displayed in the window.

The screen creation apparatus according to claim 2, further comprising: eighth means for visually displaying a boundary or outline of a divided area of the screen layout when displaying an image of a part in the preview window.

5. The screen creation apparatus according to claim 4, further comprising ninth means for storing event information to which a component arranged in a divided area of a screen layout of each screen division hierarchy responds in the screen structure table.

6. The screen creation apparatus according to claim 1, wherein the screen layout definition information stored in the layout table relates to a relative division area for relatively dividing one screen into a plurality of divisions. .

A screen creation method for determining a desired screen layout and arranging a display component, an input component, or the like in the screen layout screen to create a screen satisfying a desired function,
A layout table storing definition information of a screen layout related to a divided area for dividing one screen into a plurality of parts and definition information of a component table storing definition information related to a plurality of types of parts such as the input parts are respectively read out and displayed on the display screen. A first step of displaying each of the plurality of types of screen layouts and components in icon form in the layout window and component window generated in the section;
In response to the selection operation of any of the icons of the plurality of types of screen layouts displayed in the layout window, a plurality of divided areas constituting the selected screen layout are displayed in the screen editing window. A second step of further accepting an operation of selecting one of icons of a plurality of types of screen layouts for the divided region in the display state of the divided region, and defining a screen layout divided into screens in a laminated structure;
A part to be arranged in each divided area of the screen layout displayed in the screen editing window is received by selecting one of a plurality of types of icons displayed in the part window, and the selected part is arranged. A third step,
The screen layout table stores the type of screen layout of each screen division hierarchy defined in the second step and the type of component arranged in the division area of each screen division hierarchy in the third step. Steps,
A fifth step of reading storage information of the screen structure table and displaying an image of a component arranged in each screen division hierarchy of a screen layout divided into a laminated structure in a preview window;
A screen creation method characterized by comprising:

8. The screen according to claim 7, further comprising a sixth step of displaying a message prompting component placement in a divided area of the screen layout of the hierarchy in a state before placement of the components in the screen layout of each screen division hierarchy. How to make.

In response to an operation of moving a component arranged in any one of the screen layouts of a plurality of screen division layers displayed in the screen editing window to the component editing window, the component is moved to the component editing window, and the component The screen creation method according to claim 8, further comprising a seventh step of re-editing a part that has already been arranged by a selection operation of any of a plurality of types of icons displayed in the window.

9. The screen creation method according to claim 8, further comprising an eighth step of visually displaying a boundary or outline of a divided area of the screen layout when displaying an image of a part in the preview window.

The screen creation method according to claim 10, further comprising a ninth step of storing, in the screen structure table, event information to which a component arranged in a divided area of the screen layout of each screen division hierarchy responds.

12. The screen creation method according to claim 7, wherein the definition information of the screen layout stored in the layout table relates to a relative division region that relatively divides one screen into a plurality of divisions. .

A program for determining a desired screen layout, causing a computer to execute processing for creating a screen satisfying a target function by arranging components such as display components and input components in the screen layout screen,
A layout table storing definition information of a screen layout related to a divided area for dividing one screen into a plurality of parts and definition information of a component table storing definition information related to a plurality of types of parts such as the input parts are respectively read out and displayed on the display screen. A first step of displaying each of the plurality of types of screen layouts and components in icon form in the layout window and component window generated in the section;
In response to the selection operation of any of the icons of the plurality of types of screen layouts displayed in the layout window, a plurality of divided areas constituting the selected screen layout are displayed in the screen editing window. A second step of further accepting an operation of selecting one of icons of a plurality of types of screen layouts for the divided region in the display state of the divided region, and defining a screen layout divided into screens in a laminated structure;
A part to be arranged in each divided area of the screen layout displayed in the screen editing window is received by selecting one of a plurality of types of icons displayed in the part window, and the selected part is arranged. A third step,
The screen layout table stores the type of screen layout of each screen division hierarchy defined in the second step and the type of component arranged in the division area of each screen division hierarchy in the third step. Steps,
A fifth step of reading storage information of the screen structure table and displaying an image of a component arranged in each screen division hierarchy of a screen layout divided into a laminated structure in a preview window;
A program that causes a computer to execute.