JP2998652B2 - GUI screen layout design method - Google Patents

GUI screen layout design method

Info

Publication number
JP2998652B2
JP2998652B2 JP8249785A JP24978596A JP2998652B2 JP 2998652 B2 JP2998652 B2 JP 2998652B2 JP 8249785 A JP8249785 A JP 8249785A JP 24978596 A JP24978596 A JP 24978596A JP 2998652 B2 JP2998652 B2 JP 2998652B2
Authority
JP
Japan
Prior art keywords
constraint
gui
unit
attribute
check
Prior art date
Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
Expired - Fee Related
Application number
JP8249785A
Other languages
Japanese (ja)
Other versions
JPH1097415A (en
Inventor
太樹 後藤
Current Assignee (The listed assignees may be inaccurate. Google has not performed a legal analysis and makes no representation or warranty as to the accuracy of the list.)
NEC Corp
Original Assignee
NEC Corp
Priority date (The priority date is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the date listed.)
Filing date
Publication date
Application filed by NEC Corp filed Critical NEC Corp
Priority to JP8249785A priority Critical patent/JP2998652B2/en
Publication of JPH1097415A publication Critical patent/JPH1097415A/en
Application granted granted Critical
Publication of JP2998652B2 publication Critical patent/JP2998652B2/en
Anticipated expiration legal-status Critical
Expired - Fee Related legal-status Critical Current

Links

Landscapes

  • User Interface Of Digital Computer (AREA)
  • Digital Computer Display Output (AREA)
  • Stored Programmes (AREA)

Description

【発明の詳細な説明】DETAILED DESCRIPTION OF THE INVENTION

【0001】[0001]

【発明の属する技術分野】本発明は、ユーザによる情報
参照・入力の操作性を向上させるグラフィカルユーザイ
ンターフェース(以下、GUIと略称する)を備える計
算機上のプログラムの開発における、GUI画面レイア
ウトを設計する装置、方法に関する。
BACKGROUND OF THE INVENTION 1. Field of the Invention The present invention designs a GUI screen layout in the development of a program on a computer having a graphical user interface (hereinafter abbreviated as GUI) for improving the operability of information reference and input by a user. The present invention relates to an apparatus and a method.

【0002】[0002]

【従来の技術】計算機上で実行されるプログラムに対す
るユーザインターフェースとして、画面上で視覚的に情
報の参照、入力操作を行うことができるGUIが多く採
用されている。
2. Description of the Related Art As a user interface for a program executed on a computer, a GUI capable of visually referring to and inputting information on a screen is often used.

【0003】GUIを採用したプログラムのGUI部分
の設計・開発は、初期の頃はすべてプログラムのコーデ
ィングによってGUI部品(ボタン、ラベル、入力部品
等)の配置、イベント処理等の実現を行っていたが、現
在では、このGUIの構築を支援する環境として、GU
Iビルダと呼ばれるGUI構築ツールを利用することが
多い。
In the early stages of designing and developing a GUI portion of a program employing a GUI, the arrangement of GUI parts (buttons, labels, input parts, etc.) and the implementation of event processing were all performed by coding the program in the early days. Currently, as an environment to support the construction of this GUI,
A GUI construction tool called an I builder is often used.

【0004】このGUIビルダとは、それ自身がGUI
を備えるプログラムとなっており、ユーザがGUIビル
ダの画面上で、GUI部品をマウス等の入力装置を使っ
てWYSIWYG(what you see is what you get)形式
で自由に配置し、大きさ、色等についてはGUI部品属
性として値を設定することによって、各GUI部品の位
置、大きさ、色等の決定、すなわちGUI画面レイアウ
ト設計を行うためのものである。さらにGUIビルダ
は、その画面上で設計したレイアウトをもとに、最終的
にGUI部分のプログラムを生成する。
[0004] This GUI builder is itself a GUI builder.
The user can freely arrange GUI parts on the screen of the GUI builder using an input device such as a mouse in WYSIWYG (what you see is what you get) format, size, color, etc. Is to determine the position, size, color, etc. of each GUI component by setting a value as a GUI component attribute, that is, to design a GUI screen layout. Further, the GUI builder ultimately generates a GUI part program based on the layout designed on the screen.

【0005】一方、現実にGUIを備えるシステムの開
発を行う場合には、GUI画面のレイアウトの見かけや
GUIによる操作に関してシステム全体の統一性が顧客
から求められるため、開発前に、画面レイアウト、すな
わちGUI部品の配置位置や色等に関する共通的な規約
をGUIガイドラインとして定めて文書にしておき、そ
れに沿ってGUI画面レイアウト設計を行うことが一般
的である。また、開発後、設計が完成した実際の画面を
顧客に見せた後に、GUI部品の配置位置、色等の変更
要求、すなわちGUIガイドラインの変更を顧客から要
求されることも現実問題としてあり得る。なお、このよ
うに、GUIビルダを用いてGUI画面レイアウト設計
を行うに際してユーザ自らがGUIガイドライン等に基
づいて定義しまたは変更を行うGUI部品属性等の制約
を本明細書では以下「ガイドライン制約」という。
On the other hand, when actually developing a system having a GUI, since the customer is required to have uniformity of the whole system with respect to the appearance of the GUI screen layout and the operation by the GUI, the screen layout, ie, Generally, common rules regarding the layout position and color of GUI components are defined as GUI guidelines and written, and the GUI screen layout design is generally performed in accordance therewith. Further, after the development, after the actual screen on which the design has been completed is shown to the customer, there may be a real problem that the customer requests a change in the arrangement position and color of the GUI parts, that is, a change in the GUI guideline. Note that, in this specification, a GUI component layout or the like, which is defined or changed by the user himself / herself based on the GUI guidelines or the like when designing a GUI screen layout using the GUI builder, is hereinafter referred to as a “guideline constraint”. .

【0006】しかし、GUIビルダ自体には当然上記し
たガイドライン制約などはまったく考慮されていず、G
UI部品を画面上のどこにでも配置することができてし
まう等、一般的に部品属性値の設定が無制限であるた
め、従来のGUIビルダを用いて現実にシステム開発を
行う場合は、開発者自身がGUIガイドライン等の文書
を参照し、理解し、ガイドライン制約を満たしているか
を自分の目で見て判断しながら、GUIガイドラインに
沿ったGUI画面レイアウトを設計しなければならな
い。
However, the GUI builder itself does not consider the above-mentioned guideline restrictions at all.
In general, the setting of component attribute values is unlimited, such as the UI components can be placed anywhere on the screen. Therefore, when actually developing the system using the conventional GUI builder, the developer himself Must refer to and understand documents such as GUI guidelines and determine with his / her own eyes whether or not the guidelines are satisfied, and design a GUI screen layout according to the GUI guidelines.

【0007】この問題に関連し、GUIビルダ上でのG
UI画面レイアウト設計に制約を取り込んだ技術とし
て、特開平5−224904号に開示された技術があ
る。図7は特開平5−224904号で開示されている
装置のブロック図である。
In connection with this problem, G on the GUI builder
As a technique that incorporates restrictions into the UI screen layout design, there is a technique disclosed in Japanese Patent Application Laid-Open No. 5-224904. FIG. 7 is a block diagram of an apparatus disclosed in Japanese Patent Application Laid-Open No. 5-224904.

【0008】図7において、GUI32は表示装置39
の制御プログラムである。編集装置31は、その本体で
ある処理装置33に、GUI32の複数のGUI部品を
管理するブラウザ34と、これらの部品を単位要素とし
て編集されるGUIデータを管理する編集データ管理部
36と、入力装置を通じてのユーザ入力をGUI32の
イベントとして受け取り、この受け取ったイベントを解
析してブラウザ34および編集データ管理部36の処理
態様を決定する編集動作解析部35とを備えて構成され
ている。記憶装置38はGUIデータやGUI部品のデ
ータを格納保持する。
In FIG. 7, a GUI 32 is a display device 39.
Is a control program. The editing device 31 includes a browser 34 for managing a plurality of GUI components of the GUI 32, an edit data management unit 36 for managing GUI data edited using these components as unit elements, and The system includes an editing operation analysis unit 35 that receives a user input through the apparatus as an event of the GUI 32, analyzes the received event, and determines a processing mode of the browser 34 and the editing data management unit 36. The storage device 38 stores and holds GUI data and data of GUI components.

【0009】この編集装置31では、各GUI部品はそ
の属性として、構造や存在条件等を示す型や、イベント
についてのこの型により与えられる制約条件を有する。
編集動作解析部35では、各GUI部品の型や、型によ
り与えられる制約条件をもとに、毎回イベントの適否を
型推論し、その結果、該当する部品についての制約条件
が満たされないと判断したときは、そのイベントに対応
するユーザの入力を無効とする。
In the editing device 31, each GUI component has, as its attributes, a type indicating a structure, an existence condition, and the like, and a constraint condition given by this type for an event.
The editing operation analysis unit 35 infers the suitability of the event each time based on the type of each GUI component and the constraint conditions given by the type, and as a result, determines that the constraint condition for the corresponding component is not satisfied. At this time, the user input corresponding to the event is invalidated.

【0010】すなわち、特開平5−224902号に開
示されているのは、GUIビルダに組み込みの形で各G
UI部品等についての制約条件を定義し、GUIビルダ
に対するユーザの各操作について、その制約を満たさな
い操作を拒否し、制約を満たす操作のみを許可するとい
う装置、手法である。
That is, Japanese Unexamined Patent Publication No. 5-224902 discloses that each G is embedded in a GUI builder.
An apparatus and method for defining a constraint condition for a UI component or the like, rejecting a user operation on the GUI builder that does not satisfy the constraint, and permitting only an operation that satisfies the constraint.

【0011】この特開平5−224902号で考えられ
ているGUI部品等についての制約は型を用いて記述さ
れていて型推論によってチェックが行われる。制約の記
述は例えば、
The restrictions on the GUI parts and the like considered in Japanese Patent Application Laid-Open No. 5-224902 are described using a type and are checked by type inference. The description of the constraint is, for example,

【0012】[0012]

【数1】 は、x1というGUI部品が型Π1をもって存在するこ
とを表し、
(Equation 1) Represents that a GUI part x1 exists with a type $ 1,

【0013】[0013]

【数2】 は、Π1の型の部品はΠ2の型の部品に重ね合わせられ
るということを表している。
(Equation 2) Indicates that the part of the # 1 type is superimposed on the part of the # 2 type.

【0014】また、Also,

【0015】[0015]

【数3】 という推論規則は、以下の意味を持つ。 (1)予め用意されている部品群Γから、現在Δ1,x
1で示されるGUI部品群、Δ2,x2で示されるGU
I部品群、Δ3で示されるGUI部品が作られている。 (2)部品x1の構造は型Π1が、部品x2の構造は型
Π2がそれぞれ示している。 (3)また、部品群Γのもとで、型Π2が示す構造の上
に型Π1が示す構造を重ね合わせることができる。 (4)以上の条件のもとで、実際に部品x1が部品x2
の上に重なった部品x1∠x2が作られ、その構造を示
す型がΠ1∠Π2である。
(Equation 3) Has the following meaning. (1) From component group 部品 prepared in advance, current Δ1, x
GUI parts group indicated by 1 and GU indicated by Δ2 and x2
A GUI component represented by an I component group, Δ3, has been created. (2) The structure of the part x1 is indicated by the mold # 1, and the structure of the part x2 is indicated by the mold # 2. (3) Further, under the component group Γ, the structure shown by the mold # 1 can be superimposed on the structure shown by the mold # 2. (4) Under the above conditions, the part x1 is actually the part x2
A part x1∠x2 which is superimposed on is formed, and a mold showing its structure is {1∠Π2}.

【0016】[0016]

【発明が解決しようとする課題】しかし、ガイドライン
制約を伴うGUI画面レイアウトの設計を従来技術を用
いて現実に行おうとした場合、次に挙げるような問題が
生じる。 [1]GUIガイドラインのように、GUIビルダのユ
ーザが後から定義を行ったり変更を行うようなユーザ自
身によって定義されるガイドライン制約が、従来のGU
Iビルダでは考慮されていない。
However, when a GUI screen layout with guideline restrictions is actually designed using the conventional technique, the following problems occur. [1] Like the GUI guideline, a guideline constraint defined by a user himself / herself that a user of the GUI builder makes a definition or makes a change later is a conventional GUI.
Not considered in the I Builder.

【0017】特開平5−224904号で考えられてい
る制約は、例えばボタンの上にはボタンを配置できない
等の、GUIとして一般的にあり得ないものを主として
制約として定義するものであり、その制約を型を用いて
表現し、型推論によって判断を行うものなので、実際の
GUIガイドラインに現れるような、具体的な属性値を
考えた制約の記述を考慮したものではない。
The restrictions considered in Japanese Patent Application Laid-Open No. Hei 5-224904 mainly define, as restrictions, what is not generally possible as a GUI, such as the inability to arrange buttons on buttons. Since constraints are expressed using types and judgment is made by type inference, this does not take into account the description of constraints in consideration of specific attribute values, as appears in actual GUI guidelines.

【0018】そのため、GUIガイドラインに沿ったG
UI画面レイアウト設計を行うためには、特開平5−2
24904号で述べられている制約とは別に、開発者が
GUIガイドラインの文書を参照し、そのガイドライン
制約を理解し、そのガイドライン制約を満たすようなG
UI画面レイアウトを考慮しながら設計開発を行う必要
がある。そのため、ガイドライン制約を伴うシステムの
GUI画面レイアウト設計工数が大きくなるという問題
がある。 [2]ガイドライン制約がシステムの開発途中で変更さ
れることがあり得るが、大規模なシステム開発において
は、GUI画面数、GUI部品数が非常に数多くなるた
め、ガイドライン制約が変更された場合には、その変更
に応じて、どの画面のどの部品属性を変更すべきかを逐
一調べ、それらをすべて修正しなければならず、修正の
ための工数が大きくなる。
Therefore, G according to the GUI guidelines
To design a UI screen layout, refer to Japanese Patent Laid-Open No.
Apart from the constraints set forth in US Pat. No. 24904, developers may refer to the GUI guideline documents to understand the guideline constraints,
It is necessary to perform design development while considering the UI screen layout. Therefore, there is a problem that the man-hour for designing the GUI screen layout of the system with the guideline restriction increases. [2] The guideline constraints may be changed during the development of the system. However, in large-scale system development, the number of GUI screens and GUI components becomes very large. In such a case, it is necessary to check each screen which component attribute should be changed in accordance with the change, and to correct them all, which increases the man-hour for correction.

【0019】この問題に関し、特開平5−224904
号で考えられている制約は、GUIビルダ(部品)を提
供するときに与えられる不可変な制約で、後から変更さ
れる可能性があるユーザ自身が定義したガイドライン制
約としての位置付けは想定されていない。したがって、
制約が変更された場合の影響を特定するなどの、制約の
変更に対する支援が考慮されていない。
Regarding this problem, Japanese Patent Laid-Open No. Hei 5-224904
Is a non-variable constraint given when providing a GUI builder (part), and is assumed to be positioned as a user-defined guideline constraint that may be changed later. Absent. Therefore,
Support for changing constraints, such as identifying the impact of changing constraints, is not considered.

【0020】そのため、GUI部品等についてのガイド
ライン制約が変更された場合は、従来通り、その制約の
変更で影響を受けるGUI部品をすべての画面から探し
出して修正する必要があるため、関連するGUI画面レ
イアウトの修正工数が大きい。
Therefore, when the guideline constraint on the GUI component or the like is changed, it is necessary to search for the GUI component affected by the change of the constraint from all the screens and correct it, as in the related art. Large layout man-hours.

【0021】本発明の目的は、上記のような従来技術の
問題を解決し、GUIガイドライン等に基づく制約を伴
うGUI画面レイアウトの設計の生産性、保守性を向上
させることにある。
An object of the present invention is to solve the problems of the prior art described above and to improve the productivity and maintainability of the GUI screen layout design with restrictions based on GUI guidelines and the like.

【0022】[0022]

【課題を解決するための手段】上記課題を解決するため
に、本発明によるGUI画面レイアウト設計方式は、G
UI画面レイアウト設計及びGUI画面プログラムの生
成を行うGUIビルダ部と、GUI部品についてあらか
じめユーザ自身が定義する制約を記述し保存する制約記
述部とで構成され、前記GUIビルダ部は、ユーザが設
定する前記GUI部品の属性と属性値のデータを保管し
管理する属性管理部と、前記制約記述部に記述された個
々の制約とGUI部品の属性との関連データを保管管理
する制約−属性値関連管理部と、前記属性管理部のデー
タが前記制約記述部に記述された個々の制約を満たすか
否かチェックする制約チェック部と、前記制約チェック
部でのチェック結果をユーザに表示するために処理する
チェック結果処理部と、前記制約記述部に記述された制
約の更新の有無と更新された制約の特定についてチェッ
クし管理する制約更新管理部を有し、ユーザがGUI部
品の属性値を設定する毎に、前記制約−属性値関連管理
部が該GUI部品についての制約の有無を判断し、前記
制約−属性値関連管理部が該GUI部品についての制約
があると判断したときには前記制約チェック部が前記制
約記述部から呼び出した制約と前記属性値管理部からの
データに基づき制約を満たすか否かチェックし、該チェ
ック結果を前記チェック結果処理部を介して表示させる
ことにより、制約を満たすGUI部品の設定のみを行え
るようにし、更に、前記GUIビルダ部を起動させる毎
に、前記制約更新管理部が制約の更新の有無のチェック
と更新された制約の特定を行い、前記制約チェック部を
介して更新された制約に関連する設定済みのGUI部品
を表示させ、かつ、該GUI部品の属性値が該更新され
た制約を満たすか否かチェックさせ表示させることによ
り、制約を満たすGUI部品の設定のみを行えるように
したことを特徴とする。
In order to solve the above-mentioned problems, a GUI screen layout design method according to the present invention employs a
It comprises a GUI builder section for designing a UI screen layout and generating a GUI screen program, and a constraint description section for describing and storing constraints defined by the user in advance for the GUI components. The GUI builder section is set by the user. An attribute management unit that stores and manages data of the attributes and attribute values of the GUI parts, and a constraint-attribute value relation management that stores and manages data relating to each constraint described in the constraint description unit and the attributes of the GUI parts Unit, a constraint check unit for checking whether data of the attribute management unit satisfies individual constraints described in the constraint description unit, and processing for displaying a check result of the constraint check unit to a user. A check result processing unit, and a constraint for checking and managing whether or not the constraint described in the constraint description unit is updated and specifying the updated constraint. Each time a user sets an attribute value of a GUI component, the constraint-attribute value-related management unit determines whether or not there is a constraint on the GUI component, and the constraint-attribute value-related management unit has a new management unit. When it is determined that there is a constraint on the GUI component, the constraint check unit checks whether the constraint is satisfied based on the constraint called from the constraint description unit and data from the attribute value management unit. By displaying through the check result processing unit, only the setting of the GUI component satisfying the constraint can be performed. Further, every time the GUI builder unit is activated, the constraint update management unit checks whether the constraint is updated. And the updated constraint is specified, the set GUI component related to the updated constraint is displayed via the constraint checking unit, and the GUI component is By sex value display is checked whether they meet the constraints is the updated, characterized in that so as to perform only the settings of the GUI components that satisfy the constraints.

【0023】かかるGUI画面レイアウト設計方式を採
用することにより、GUIビルダのユーザはGUIビル
ダ上で設定可能な属性値に合わせてGUI部品の設定変
更を行っていけば、ユーザがGUIガイドライン等の制
約を意識しなくても該制約を満たすGUI画面レイアウ
ト設計を行うことができ、設計工数を削減することがで
きる。
By adopting such a GUI screen layout design method, if the user of the GUI builder changes the setting of the GUI parts in accordance with the attribute values that can be set on the GUI builder, the user is restricted by the GUI guidelines and the like. A GUI screen layout design that satisfies the constraint can be performed without being aware of this, and the number of design steps can be reduced.

【0024】さらに、前記GUI画面レイアウト設計方
式において、前記GUIビルダ部が、前記制約記述部に
記述された制約の更新の有無と更新された制約の特定に
ついてチェックし管理する制約更新管理部を有し、前記
GUIビルダ部を起動させる毎に、前記制約更新管理部
が制約の更新の有無のチェックと更新された制約の特定
を行い、前記制約チェック部を介して更新された制約に
関連する設定済のGUI部品を表示させ、かつ該GUI
部品の属性値が該更新された制約を満たすか否かチェッ
クさせ表示させるようにすれば、GUIガイドライン変
更時に、関連してどのGUI部品のどの属性を修正すべ
きかを示すことができるようになり、GUIガイドライ
ン等の制約の変更時のGUI画面レイアウト修正工数を
削減することができる。
Further, in the GUI screen layout design method, the GUI builder unit has a constraint update management unit that checks and manages whether or not the constraint described in the constraint description unit is updated and the specification of the updated constraint. Each time the GUI builder unit is activated, the constraint update management unit checks whether or not the constraint is updated, specifies the updated constraint, and sets a setting related to the constraint updated via the constraint check unit. Display the completed GUI parts, and
By checking and displaying whether or not the attribute value of the component satisfies the updated constraint, when the GUI guideline is changed, it is possible to indicate which attribute of which GUI component should be modified in relation to the GUI guideline. In addition, it is possible to reduce the man-hour for modifying the GUI screen layout when the constraint such as the GUI guideline is changed.

【0025】[0025]

【発明の実施の形態】以下、本発明による実施の形態に
ついて図面を参照して説明する。 [構成の説明]図1は本発明によるGUI画面レイアウ
ト設計方式の全体の構成を示すブロック図である。本発
明によるGUI画面レイアウト設計方式はGUIビルダ
部1と制約記述部4とで構成されている。
Embodiments of the present invention will be described below with reference to the drawings. [Description of Configuration] FIG. 1 is a block diagram showing the overall configuration of a GUI screen layout design system according to the present invention. The GUI screen layout design method according to the present invention includes a GUI builder unit 1 and a constraint description unit 4.

【0026】GUIビルダ部1は、基本的な機能として
は従来のGUIビルダと同様であり、表示装置(図示せ
ず)でGUIビルダ画面2を見ながら、入力装置(図示
せず)を使って、GUI部品の配置、属性値の設定等を
行い、GUI画面を設計し、最終的に画面プログラム3
を生成するものである。
The GUI builder unit 1 has the same basic functions as a conventional GUI builder, and uses an input device (not shown) while viewing the GUI builder screen 2 on a display device (not shown). , Layout of GUI parts, setting of attribute values, etc., designing of GUI screen, and finally screen program 3
Is generated.

【0027】本発明ではこのGUIビルダ部1の外部
に、GUIガイドライン等に基づきユーザ自身が定義す
る制約を記述するための制約記述部4を設ける。この制
約記述部4はファイル、データベース等の形で制約の記
述を格納保持可能である。
In the present invention, a constraint description unit 4 for describing a constraint defined by a user himself based on a GUI guideline or the like is provided outside the GUI builder unit 1. The constraint description unit 4 can store and hold a description of the constraint in the form of a file, a database, or the like.

【0028】制約記述部4は、制約を、 attr(画面名、部品の種類、部品名、属性名) 演
算子 属性値 の形式で記述し、保存する。画面名、部品名には特別な
記号として*を記述することができ、これは任意の画面
名、部品名を意味する。
The constraint description unit 4 describes and stores the constraint in the form of attr (screen name, component type, component name, attribute name) operator attribute value. * Can be described as a special symbol in the screen name and component name, which means an arbitrary screen name and component name.

【0029】ここで演算子は以下のものを利用できる。Here, the following operators can be used.

【0030】== :等しい != :等しくない > :大きい >= :大きい、または等しい < :小さい <= :小さい、または等しい また、以下の演算子も利用することができる。==: equal! =: Not equal>: large> =: large or equal <: small <=: small or equal The following operators can also be used.

【0031】not (制約) and (制約,制約) or (制約) 本発明によるGUI画面レイアウト設計方式では、GU
Iビルダ部1で設計編集されるすべてのGUI部品の属
性が、制約記述部4でこの形式で記述されるガイドライ
ン制約を満たさなければならないように構成されてい
る。
Not (constraint) and (constraint, constraint) or (constraint) In the GUI screen layout design method according to the present invention, the GUI
The configuration is such that the attributes of all the GUI components designed and edited by the I builder unit 1 must satisfy the guideline constraints described in this format by the constraint description unit 4.

【0032】次に、GUIビルダ部1内の構成について
説明する。
Next, the configuration inside the GUI builder unit 1 will be described.

【0033】まず、エディタ部5は、GUIビルダ部1
自身のGUI部分であり、GUIビルダ画面2の表示、
入力の受付を行う部分である。属性値管理部7は、GU
Iビルダ部1上で設定される、GUI部品の属性と属性
値に関するデータを保持し管理する部分である。また、
制約チェック部9は、設定されたあるGUI部品の属性
値に対して、制約記述部4中に格納されている関連する
制約記述を呼び出し解釈して、その設定された属性値が
制約を満たしているか否かを判断し、その結果をチェッ
ク結果処理部11に受け渡す部分である。
First, the editor unit 5 includes the GUI builder unit 1
It is its own GUI part, display of GUI builder screen 2,
This is the part that accepts input. The attribute value management unit 7
This is a part that holds and manages data related to the attributes and attribute values of the GUI components set on the I builder unit 1. Also,
The constraint checking unit 9 calls and interprets a related constraint description stored in the constraint description unit 4 with respect to the set attribute value of a certain GUI component, and the set attribute value satisfies the constraint. It is a part that determines whether or not there is, and passes the result to the check result processing unit 11.

【0034】制約−属性値関連管理部8は、制約記述部
4中の個々の制約と、属性値管理部7中の部品属性との
関連(どの制約がどの部品属性に関連するものか)を管
理している部分である。
The constraint-attribute-value-related managing unit 8 determines the relationship between each constraint in the constraint description unit 4 and the component attribute in the attribute value managing unit 7 (which constraint relates to which component attribute). It is the part that is managed.

【0035】制約更新管理部10は、制約記述部4が更
新されたか否か、更新された場合は制約記述部4中のど
の制約が更新されたか、あるいは新しい制約が加えられ
たかについてチェックし管理する部分である。
The constraint update management unit 10 checks whether the constraint description unit 4 has been updated, and if so, checks and manages which constraint in the constraint description unit 4 has been updated or whether a new constraint has been added. This is the part to do.

【0036】チェック結果処理部11は、部品の属性値
が制約を満たしているか否かについて制約チェック部9
がチェックした結果に基づいて、エディタ部5を介して
エラーメッセージを出したり、違反をしているGUI部
品を表示する、等ガイドライン制約に従った画面設計を
適切に進行させるための処理を行う部分である。
The check result processing section 11 determines whether or not the attribute value of the component satisfies the constraint.
Based on the result of the check, issues an error message via the editor unit 5, displays a violating GUI part, and performs processing for appropriately proceeding with screen design in accordance with the guideline restrictions. It is.

【0037】本発明は以上の要素から構成される。次
に、本発明の動作の説明を行う。 [動作の説明]以下、本発明の動作をユーザの利用手順
に沿って、図1、2、3、4を用いて説明する。
The present invention comprises the above elements. Next, the operation of the present invention will be described. [Explanation of Operation] The operation of the present invention will be described below with reference to FIGS.

【0038】まず、GUIを備えるプログラムのシステ
ム開発に先立って、GUIガイドライン(GUI画面の
共通的な規約)を作成し、そのGUIガイドラインに基
づいて制約記述部4に制約を記述し格納する。ここで
は、制約記述部4はファイルで実現するものとする。
First, prior to system development of a program having a GUI, a GUI guideline (a common rule for a GUI screen) is created, and a constraint is described and stored in the constraint description unit 4 based on the GUI guideline. Here, the constraint description unit 4 is realized by a file.

【0039】制約としては、例えば、特定のボタンの配
置できる座標の範囲であるとか、特定のボタンの背景
色、特定のラベルに指定できるフォント名等が考えられ
る。この記述された制約条件により、実際にGUIの開
発に際してGUIビルダ部1によって設定、変更される
GUI部品の属性はすべてこの制約条件を満たさなけれ
ばならないことになる。
The restrictions may be, for example, a range of coordinates in which a specific button can be arranged, a background color of a specific button, a font name that can be specified for a specific label, and the like. According to the described constraints, all the attributes of the GUI components set and changed by the GUI builder unit 1 when developing the GUI must satisfy the constraints.

【0040】続いて、ユーザ(GUIを備えるプログラ
ムのシステム開発者)はこのGUIビルダ部1でGUI
画面レイアウト設計を行う。この手順を図1、図2およ
び図4を用いて説明する。図2は、GUIビルダ部1を
用いての設計手順を説明するフローチャートであり、図
4は図1中のGUIビルダ画面2の画面例を示す図であ
る。なお、GUIビルダ部1上の利用手順の基本的な流
れは、従来のGUIビルダの利用手順と同様である。
Subsequently, a user (a system developer of a program having a GUI) uses the GUI builder unit 1 to execute the GUI.
Perform screen layout design. This procedure will be described with reference to FIGS. 1, 2, and 4. FIG. 2 is a flowchart illustrating a design procedure using the GUI builder unit 1, and FIG. 4 is a diagram illustrating a screen example of the GUI builder screen 2 in FIG. The basic flow of the use procedure on the GUI builder unit 1 is the same as the conventional use procedure of the GUI builder.

【0041】まず、GUIビルダ部1を起動させ(S
1)、実際の設計に入る前に制約記述部4の内容が更新
されているか否かチェックする(S2)。なお、更新さ
れている場合については後段で詳述するので、ここでは
更新されていなかったとして先に進む。
First, the GUI builder unit 1 is started (S
1) Before starting the actual design, it is checked whether or not the contents of the constraint description section 4 have been updated (S2). It should be noted that since the case of being updated will be described in detail later, the process proceeds assuming that it has not been updated here.

【0042】次に、GUI画面のレイアウト設計を開始
して(S3)、まず新たにGUI部品を配置する手順に
ついて説明する。新たにGUI部品を配置する場合(S
4)は、図4に示す部品パレット22からマウスで配置
したい部品を選択し、インスタンスとしての部品名を入
力する。これは制約記述部4で部品名を利用して制約を
記述しているためである。部品名を入力した後、現在設
計している画面23の一点をマウスでクリックすること
によって部品の配置場所を決定する。
Next, a procedure for starting layout design of the GUI screen (S3) and newly arranging GUI parts will be described. When a new GUI component is placed (S
4) Select a component to be arranged from the component pallet 22 shown in FIG. 4 with a mouse and input a component name as an instance. This is because the constraint description unit 4 describes the constraint using the component name. After inputting the component name, the location of the component is determined by clicking on one point of the currently designed screen 23 with the mouse.

【0043】ここで、まず、制約−属性値関連管理部8
(図1参照)が属性値管理部7を介して、今配置しよう
としている部品名に関連する制約があるかどうかをチェ
ックする(S5)。もし制約がなければそのまま配置可
能である(S6)。
Here, first, the constraint-attribute value relation management unit 8
(See FIG. 1) via the attribute value management unit 7 to check whether there is a restriction related to the component name to be arranged now (S5). If there is no restriction, it can be arranged as it is (S6).

【0044】もし、制約があればクリックされた位置の
座標に対して、制約チェック部9は関連する制約を制約
記述部4から呼び出し、解釈し、その座標の属性値が制
約を満たしていればその部品はそこにそのまま配置され
る(S6)。もし制約を満たしていなければその位置へ
の配置は無効として配置前の状態のままで、チェック結
果処理部11を介してGUIビルダ画面2にエラーメッ
セージを出す(S7)。
If there is a constraint, the constraint checking unit 9 calls the relevant constraint from the constraint description unit 4 for the coordinates of the clicked position, interprets the constraint, and if the attribute value of the coordinate satisfies the constraint. The part is placed as it is (S6). If the constraint is not satisfied, the placement at that position is invalidated and an error message is issued on the GUI builder screen 2 via the check result processing unit 11 while maintaining the state before the placement (S7).

【0045】なお、GUI部品についての大きさ、色等
の部品属性を設定あるいは変更する場合(S8)につい
ても、GUI部品の配置操作の場合と同様に制約−属性
値関連管理部8が属性値管理部7(図1参照)を介し
て、今設定、変更しようとしている部品名に関連する制
約があるかどうかをチェックし(S9)、制約がない、
あるいは制約を満たしている場合は、そのまま部品属性
の設定、変更が行われる(S−10)。もし、制約を満
たしていなければその設定、変更が無効としてGUIビ
ルダ画面2にエラーメッセージが出される(S7)。
When setting or changing the component attributes such as the size and color of the GUI component (S8), the constraint-attribute-value-related managing unit 8 sets the attribute value in the same manner as in the case of the GUI component placement operation. It is checked via the management unit 7 (see FIG. 1) whether there is a constraint related to the component name that is to be set or changed (S9).
Alternatively, if the constraint is satisfied, the setting and change of the component attribute are performed as it is (S-10). If the constraint is not satisfied, the setting and change are invalidated, and an error message is issued on the GUI builder screen 2 (S7).

【0046】次に、GUIガイドライン等に基づくユー
ザ定義の制約が変更された場合の操作について図1、図
2および図3を用いて説明する。ここでは、GUIガイ
ドラインを設計、変更する人と、GUIビルダ部1を利
用してGUI画面を設計する人とは別であると考えてい
るため、GUIガイドラン等の変更はGUIビルダ部1
の使用中には行わないとする。
Next, an operation when a user-defined constraint based on a GUI guideline or the like is changed will be described with reference to FIGS. 1, 2, and 3. FIG. Here, it is considered that the person who designs and changes the GUI guideline is different from the person who designs the GUI screen using the GUI builder unit 1.
It is not performed during the use of.

【0047】まず、ガイドライン制約を変更する場合
は、制約記述部4の対応する制約記述の内容を変更する
(これを以下「制約の更新」という)。
First, when the guideline constraint is changed, the content of the corresponding constraint description in the constraint description section 4 is changed (hereinafter, this is referred to as "constraint update").

【0048】GUIビルダ部1が起動された時(S1)
には必ず制約更新管理部10によって制約記述部4中の
制約が更新されたかどうか判断される(S2)。制約更
新管理部10が、制約記述部4が更新されたと判断する
と、以下手順は図3に示すフローに移行する。次いで、
制約更新管理部10は制約が更新されたと判断した場合
はどの部品属性について制約が更新されたか、あるいは
新しい制約が加えられたかについてチェックする(F
1)。そして、制約更新管理部10は更新された制約デ
ータを制約チェック部9に受け渡し、制約チェック部9
は更新された制約データを受け取ると、その制約を現在
までに設定したGUI画面レイアウトが満たしているか
どうかをチェックする(F2)。
When the GUI builder unit 1 is started (S1)
It is determined whether or not the constraint in the constraint description unit 4 has been updated by the constraint update management unit 10 (S2). When the constraint update management unit 10 determines that the constraint description unit 4 has been updated, the procedure proceeds to the flow shown in FIG. Then
When determining that the constraint has been updated, the constraint update management unit 10 checks which component attribute the constraint has been updated or whether a new constraint has been added (F).
1). Then, the constraint update management unit 10 passes the updated constraint data to the constraint check unit 9, and the constraint check unit 9
Receives the updated constraint data, checks whether the GUI screen layout set up to now satisfies the constraint (F2).

【0049】もし変更された制約を満たさない部品属性
があれば、その部品名をチェック結果処理部11に渡
し、チェック結果処理部11はその部品をGUIビルダ
画面2上で色を変えるなどして示す(F4)。また、変
更された制約を満たさない部品属性がない場合でも、そ
の部品属性は制約の変更に関連があるということで、色
を変えるなどしてGUIビルダ画面2上に示す(F3、
F5)。
If there is a part attribute that does not satisfy the changed constraint, the part name is passed to the check result processing unit 11, and the check result processing unit 11 changes the color of the part on the GUI builder screen 2, for example. (F4). Further, even when there is no component attribute that does not satisfy the changed constraint, the component attribute is related to the change of the constraint, and is displayed on the GUI builder screen 2 by changing a color (F3,
F5).

【0050】[0050]

【実施例】以下、本発明の一実施例について、図1、図
2、図3および図4を参照して説明する。
DETAILED DESCRIPTION OF THE PREFERRED EMBODIMENTS An embodiment of the present invention will be described below with reference to FIGS. 1, 2, 3 and 4. FIG.

【0051】まず、GUIを備えるプログラムのシステ
ム開発の前に、GUIガイドライン(GUI画面の共通
的な規約)を設計し、そのGUIガイドラインをもとに
制約記述部4に制約の記述を行い格納する。
First, prior to the system development of a program having a GUI, a GUI guideline (a common rule for a GUI screen) is designed, and a constraint is described and stored in the constraint description unit 4 based on the GUI guideline. .

【0052】本実施例では、GUIガイドラインにおい
て、次のような制約を共通規約として定めることにす
る。 規約1:ボタンは画面の右から100ドット以内にしか
配置してはいけない。 規約2:ボタンの幅は100ドットか、200ドットで
なければならない。 規約3:画面1のラベルの背景色は赤か青でなければな
らない。
In this embodiment, the following restrictions are defined as common rules in the GUI guidelines. Rule 1: Buttons must be placed only within 100 dots from the right of the screen. Rule 2: Button width must be 100 dots or 200 dots. Rule 3: The background color of the label on screen 1 must be red or blue.

【0053】制約記述部4は、このGUIガイドライン
のようなユーザ定義の制約を記述するものであり、記述
形式は発明の実施の形態の[構成]の欄で説明した通り
である。制約記述部4に制約を記述した後は、開発され
るGUIのGUI部品の属性は、すべてこの制約記述部
4に記述された制約を満足する値でなければならなくな
る。
The constraint description section 4 describes a user-defined constraint such as the GUI guideline, and has a description format as described in the [Configuration] section of the embodiment of the present invention. After the constraints are described in the constraint description unit 4, all the attributes of the GUI parts of the GUI to be developed must have values satisfying the constraints described in the constraint description unit 4.

【0054】以下に挙げるのは、上記したGUIガイド
ラインの規約1、2、3の、制約記述部4での記述例で
ある(但し、設計中の画面の横幅を1000ドットとす
る)。
The following is an example of description in the constraint description section 4 of the above-mentioned Rules 1, 2, and 3 of the GUI guidelines (however, the width of the screen being designed is 1000 dots).

【0055】 制約1: attr (*, ボタン, *, left) >= 1000 - 100 制約2: or ((attr (*, ボタン, *, width) == 100),
(attr (*, ボタン, *, width) == 200)) 制約3: or ((attr (画面1, ラベル, *, backcolor) =
= red),(attr (画面1, ラベル, *, backcolor) == blu
e)) 続いて、ユーザは、このGUIビルダ部1上でGUI画
面レイアウトの設計を開始する。このGUI画面レイア
ウト設計をするユーザと、GUIガイドラインを設計す
るユーザは一般に別のユーザである。
Restriction 1: attr (*, button, *, left)> = 1000-100 Restriction 2: or ((attr (*, button, *, width) == 100),
(attr (*, button, *, width) == 200)) Restriction 3: or ((attr (screen1, label, *, backcolor) =
= red), (attr (screen1, label, *, backcolor) == blu
e)) Subsequently, the user starts designing a GUI screen layout on the GUI builder unit 1. The user who designs the GUI screen layout and the user who designs the GUI guidelines are generally different users.

【0056】次に、図1、2、3、4を参照しながら、
本実施例を動作手順にしたがって詳細に説明する。
Next, referring to FIGS.
This embodiment will be described in detail according to the operation procedure.

【0057】GUIビルダ部1上でのGUI画面レイア
ウトの設計方法の基本的な流れは従来のGUIビルダを
用いる方法と大きくは変わらない。
The basic flow of the GUI screen layout design method on the GUI builder unit 1 is not much different from the conventional method using the GUI builder.

【0058】GUIビルダ部1上で部品の配置を行う場
合(図2のステップS4)は、部品パレット22(図4
参照)からマウスでクリックすることによって、配置し
たいGUI部品を選択する。ここではGUI部品として
ボタンを選択する。次に、そのGUI部品につける名前
(部品名)を入力する。これは上記の制約記述が部品名
を用いて属性を指定し、その制約を記述しているためで
ある。ここではこのボタンに対し、“ボタン1”という
名前をつけることにする。
When arranging parts on the GUI builder unit 1 (step S4 in FIG. 2), the parts pallet 22 (FIG.
Click on the mouse button from ()) to select the GUI component to be placed. Here, a button is selected as a GUI component. Next, a name (part name) to be given to the GUI part is input. This is because the above constraint description specifies an attribute using a component name and describes the constraint. Here, the button is named “button 1”.

【0059】次に、このGUI部品(ここではボタン)
を配置したい場所をクリックすれば、そこに配置され
る。但し、このクリックを行った際に、制約−属性値関
連管理部8がこの部品名(ここでは“ボタン1”)に関
連する制約があるかどうかを調べる。
Next, this GUI component (here, button)
Click where you want to place it, and it will be placed there. However, when this click is performed, the constraint-attribute value association management unit 8 checks whether there is a constraint related to this component name (here, “button 1”).

【0060】制約−属性値関連管理部8は、制約中の*
を展開し、例えばテーブル形式で、どの制約とどの部品
属性とが関連するかを管理するものである。例えば“ボ
タン1”のx座標に関して、上記した制約1が関連する
ことがわかるようになっている。このテーブル形式等に
よる制約と部品属性との関連データは、例えばユーザが
制約記述部4に制約を記述し格納した後、制約チェック
部9と属性値管理部7を介して制約−属性値関連管理部
8に生成される。
The constraint-attribute-value-related management unit 8 sets the *
To manage which constraints are associated with which part attributes in a table format, for example. For example, regarding the x coordinate of “button 1”, it can be seen that the above-described constraint 1 is related. For example, after the user describes and stores the constraint in the constraint description unit 4, the constraint-attribute-related management via the constraint check unit 9 and the attribute value management unit 7 is performed on the relation data between the constraint in the table format and the like and the component attribute. Generated by the unit 8.

【0061】もし、関連する制約がなければクリックし
た位置にそのまま配置することができる(S6)が、こ
の例のように関連する制約(制約1)がある場合は、次
に、制約チェック部9が現在の属性値(クリックした位
置座標)が、その制約(制約1)を満たしているかどう
かをチェックする(S5)。
If there is no related constraint, it can be arranged as it is at the clicked position (S6), but if there is a related constraint (constraint 1) as in this example, then the constraint check unit 9 Checks whether the current attribute value (clicked position coordinates) satisfies the constraint (constraint 1) (S5).

【0062】ここで制約が満たされていれば、クリック
した位置にそのまま配置することができる(S6)が、
制約が満たされていなければ、制約に違反している旨
と、その制約の内容を表示し(S7)、現在の位置座標
の選択を無効にし、配置場所選択の状態(S4)に戻
る。この制約チェックの結果に依存する処理は、チェッ
ク結果処理部11を通して行われる。
Here, if the constraint is satisfied, it is possible to directly arrange at the clicked position (S6).
If the constraint is not satisfied, the fact that the constraint is violated and the contents of the constraint are displayed (S7), the selection of the current position coordinates is invalidated, and the process returns to the placement location selection state (S4). The processing depending on the result of the constraint check is performed through the check result processing unit 11.

【0063】制約チェック部9は、図5に示されるよう
に制約チェックエンジン部9a、演算子定義のデータを
保持する演算子定義部9b、および属性値定義のデータ
を保持する属性値定義部9cから構成されている。
As shown in FIG. 5, the constraint check section 9 includes a constraint check engine section 9a, an operator definition section 9b for holding operator definition data, and an attribute value definition section 9c for holding attribute value definition data. It is composed of

【0064】属性値定義は、属性値管理部7が管理する
属性値を attr (画面名,部品の種類,部品名,属性) = 属性値 の形式で持つものである。
The attribute value definition has attribute values managed by the attribute value management unit 7 in the format of attr (screen name, component type, component name, attribute) = attribute value.

【0065】今、例えば属性値管理部7からのデータに
基づいて次のように定義がされたとする。 attr (画面1, ボタン, ボタン1, left) = 800 attr (画面1, ボタン, ボタン1, top) = 500 attr (画面1, ボタン, ボタン1, width) = 100 attr (画面2, ボタン, ボタン2, width) = 200 attr (画面1, ラベル, ラベル1, backcolor) = red attr (画面1, ラベル, ラベル2, backcolor) = blue attr (画面2, ラベル, ラベル3, backcolor) = blue 演算子定義は、比較のための演算子等に関するデータ
で、例えば、演算子==,andについては、 x == x = true x == y = false and (true, true) = true and (false, x) = false and (x, false) = false のように、演算子==,andが成り立てばtrue、
成り立たなければfalseとなるように定義されてい
る。
Assume that the following definition is made based on data from the attribute value management unit 7, for example. attr (screen1, button, button1, left) = 800 attr (screen1, button, button1, top) = 500 attr (screen1, button, button1, width) = 100 attr (screen2, button, button) 2, width) = 200 attr (screen 1, label, label 1, backcolor) = red attr (screen 1, label, label 2, backcolor) = blue attr (screen 2, label, label 3, backcolor) = blue operator The definition is data on operators for comparison, for example, for operators == and and, x == x = true x == y = false and (true, true) = true and (false, x ) = false and (x, false) = false, true if the operator ==, and
If not, it is defined as false.

【0066】制約チェックエンジン部9aは、制約記述
部4から呼び出した制約について、属性値管理部7から
のデータに基づき属性値定義の=の左辺、演算子定義の
=の左辺とマッチする部分について、属性値定義の=の
右辺、演算子定義の=の右辺で置き換え(書き換え)を
行い、その結果trueまで書き換えられれば制約を満
たす、falseであれば制約を満たさない、とするも
のである。
The constraint check engine unit 9a determines, for the constraint called from the constraint description unit 4, a part that matches the left side of the attribute value definition and the left side of the operator definition = based on the data from the attribute value management unit 7. Is replaced (rewritten) by the right side of the attribute value definition = and the right side of the operator definition =, and as a result, the constraint is satisfied if rewritten up to true, and if false, the constraint is not satisfied.

【0067】今、例としてボタンの配置された座標が
(800,500)であったとすると制約1が満たされ
ないので、指定した場所へのボタン1の配置は無効とい
うことになる。
Now, as an example, if the coordinates where the buttons are arranged are (800, 500), the constraint 1 is not satisfied, so that the arrangement of the buttons 1 at the designated location is invalid.

【0068】次に、GUI部品の配置以外の、別の属性
の設定の場合について説明する。
Next, the case of setting another attribute other than the placement of the GUI parts will be described.

【0069】GUI部品の大きさについては、GUI部
品の周囲の部分をマウスでクリックし、そのままドラッ
グすることで大きさを変化させる。この場合はドラッグ
を離した段階で制約のチェックを行い、制約を満たす大
きさであれば有効、制約を満たさない大きさであれば無
効とする。
The size of the GUI component is changed by clicking a portion around the GUI component with a mouse and dragging the portion as it is. In this case, the constraint is checked at the stage when the drag is released, and valid if the size satisfies the constraint, and invalid if the size does not satisfy the constraint.

【0070】その他、GUI部品の色等については、こ
こではGUIビルダ部1のメニューから開く、属性エデ
ィタ24(図4参照)で、設定するものとする。
In addition, the colors of the GUI parts and the like are set here by the attribute editor 24 (see FIG. 4) opened from the menu of the GUI builder section 1.

【0071】属性エディタ24とは、現在選択されてい
るGUI部品の各属性を設定するためのエディタで、G
UI部品の各属性について、選択入力、または値入力に
よって属性値を設定できるものとする。
The attribute editor 24 is an editor for setting each attribute of the currently selected GUI component.
For each attribute of the UI component, an attribute value can be set by selection input or value input.

【0072】この場合はこの属性エディタ24で、ある
属性に属性値を設定した段階で制約のチェックを行い、
制約を満たす属性値であれば有効、制約を満たさない属
性値であれば無効とする。
In this case, the constraint is checked by the attribute editor 24 when the attribute value is set for a certain attribute.
Valid if the attribute value satisfies the constraint, invalid if the attribute value does not satisfy the constraint.

【0073】以上のように、GUI部品の配置、属性値
の設定を、制約記述中の制約の自動チェックが行われな
がら繰り返すことで、GUI画面レイアウトの設計を行
う。次に、GUIガイドライン等に基づくガイドライン
制約が変更された場合の操作について説明する。いま、
GUIガイドラインを設計、変更する人と、GUIビル
ダ部1を利用してGUI画面を設計する人は別であると
考えているため、GUIガイドラインの変更はGUIビ
ルダ部1の使用時には行わないと考えている。
As described above, the layout of the GUI parts and the setting of the attribute values are repeated while the constraint in the constraint description is automatically checked, thereby designing the GUI screen layout. Next, an operation when a guideline constraint based on a GUI guideline or the like is changed will be described. Now
Since it is considered that the person who designs and changes the GUI guideline is different from the person who designs the GUI screen using the GUI builder unit 1, the change of the GUI guideline is not performed when the GUI builder unit 1 is used. ing.

【0074】まず、GUIガイドライン等の制約を変更
する場合は、対応する制約記述部4の制約記述を変更す
る。ここで、例えば上記したGUIガイドラインの規約
3が次のように変更されたとする。 規約3:画面1のラベルの背景色は赤か黄でなければな
らない。 この場合、この変更に合わせて制約記述部4中の制約3
も次のように変更する。 制約3: or ((attr (画面1, ラベル, *, backcolor) =
= red),(attr (画面1, ラベル, *, backcolor) == yell
ow)) GUIビルダ部1は起動時に制約更新管理部10によっ
て制約記述が更新されたかどうか、更新された場合は制
約記述部4中のどの制約が更新されたか、あるいは新し
い制約が加えられたか否かをチェックする(図2中ステ
ップS2)。
First, when a constraint such as a GUI guideline is changed, the corresponding constraint description in the constraint description unit 4 is changed. Here, for example, it is assumed that the above-mentioned rule 3 of the GUI guideline is changed as follows. Rule 3: The background color of the label on screen 1 must be red or yellow. In this case, in accordance with this change, the constraint 3
Is also changed as follows. Restriction 3: or ((attr (screen1, label, *, backcolor) =
= red), (attr (screen1, label, *, backcolor) == yell
ow)) The GUI builder unit 1 checks whether the constraint description has been updated by the constraint update management unit 10 at the time of startup, and if so, which constraint in the constraint description unit 4 has been updated or whether a new constraint has been added. Is checked (step S2 in FIG. 2).

【0075】この制約更新管理部10が制約記述部4が
更新されたと判断すると、その制約(この場合制約3)
を制約チェック部9に受け渡す。制約チェック部9は更
新された制約を受け取ると、その制約を現在までに設定
したGUI画面レイアウトが満たしているかどうかをチ
ェックする(図3中ステップF2)。
When the constraint update management unit 10 determines that the constraint description unit 4 has been updated, the constraint (in this case, constraint 3)
Is transferred to the constraint checking unit 9. Upon receiving the updated constraint, the constraint checking unit 9 checks whether the GUI screen layout set up to now satisfies the constraint (step F2 in FIG. 3).

【0076】制約チェック部9は、まず制約−属性値関
連管理部8を通して、制約3がGUI部品のラベル1と
ラベル2に関連することを知ることができるようになっ
ている。制約チェック部9はラベル1の属性値が制約3
を満たすかどうかチェックし、次にラベル2の属性値が
制約3を満たすかどうかチェックする(F2)。
The constraint check unit 9 can first know through the constraint-attribute value association management unit 8 that the constraint 3 is related to the labels 1 and 2 of the GUI parts. The constraint checking unit 9 determines that the attribute value of the label 1 is the constraint 3
Is satisfied, and then it is checked whether the attribute value of label 2 satisfies constraint 3 (F2).

【0077】もし変更された制約を満たさない部品属性
があれば、その部品属性名をチェック結果処理部11に
渡し、チェック結果処理部11はその部品をGUIビル
ダ画面2上で色を変えるなどして示す(F4)。
If there is a part attribute that does not satisfy the changed constraint, the part attribute name is passed to the check result processing unit 11, and the check result processing unit 11 changes the color of the part on the GUI builder screen 2 or the like. (F4).

【0078】この場合はラベル1は変更された制約を満
たしているが、修正する可能性があるということで、色
を変えて(ラベル2とも色を変えて)示す。
In this case, although the label 1 satisfies the changed constraint, the label 1 is shown in a different color (the label 2 is also changed in color) because it may be corrected.

【0079】[0079]

【発明の他の実施の形態】図6は本発明によるGUI画
面レイアウト設計方式の第2の実施の形態の機能ブロッ
ク図である。図6において、図1と同一の参照番号で示
す要素の機能は図1とまったく同じである。異なってい
る点は、図1で示した実施の形態のように制約記述部4
をGUIビルダ部1の外部ファイルのような形式で持つ
のではなく、GUIビルダ部1内部に制約記述部4をデ
ータとして持ち、専用の制約エディタ部12を持ってい
ることである。動作については第1の実施の形態と同じ
である。
FIG. 6 is a functional block diagram of a GUI screen layout design system according to a second embodiment of the present invention. In FIG. 6, the functions of the elements denoted by the same reference numerals as those in FIG. 1 are exactly the same as those in FIG. The difference is that the constraint description unit 4 differs from the embodiment shown in FIG.
Is not in a format like an external file of the GUI builder unit 1, but has a constraint description unit 4 as data inside the GUI builder unit 1 and a dedicated constraint editor unit 12. The operation is the same as in the first embodiment.

【0080】なお、第1の実施の形態のように制約記述
部4を外部ファイルのような形式で持ったときは、制約
を後から変更しようとする場合や制約を変更後に一括し
てその影響を特定する場合等に、GUIビルダ部1内に
制約記述部4を設けるのに比し、便宜である場合があ
る。
When the constraint description unit 4 has a format such as an external file as in the first embodiment, when the constraints are to be changed later, or when the constraints are changed, the Is specified, it may be more convenient than providing the constraint description section 4 in the GUI builder section 1.

【0081】[0081]

【発明の効果】本発明による第1の効果は、GUIガイ
ドライン等に基づく制約を伴うGUI画面レイアウト設
計において、従来ユーザがGUIガイドライン等の文書
を参照し、その制約を理解し、制約を満たしているかど
うかをユーザ自らが判断しながら行っていたGUI画面
レイアウト設計の工数を削減することができることであ
る。
A first effect of the present invention is that, in a GUI screen layout design with restrictions based on GUI guidelines and the like, a conventional user refers to documents such as GUI guidelines, understands the restrictions, and satisfies the restrictions. That is, it is possible to reduce the number of man-hours of GUI screen layout design that the user has performed while judging whether or not there is any.

【0082】その理由は、まずGUIガイドライン等に
基づきユーザ自らが定義するガイドライン制約をあらか
じめ制約記述として記述し保持しておくことができ、G
UI画面レイアウト設計時には制約チェック部によって
その制約を満たさないようなGUI部品の属性値設定は
システム的に不可能にするからである。すなわち、制約
を満たすようなGUI部品の属性値設定を自動的にナビ
ゲートすることによって、ユーザがGUIガイドライン
等の制約を意識せずに、GUIビルダ上でGUI画面レ
イアウト設計が行えるためである。
The reason is that, first, the guideline constraints defined by the user himself / herself can be described and stored in advance as constraint descriptions based on GUI guidelines and the like.
This is because at the time of designing the UI screen layout, it is systematically impossible to set the attribute values of the GUI parts so that the constraint is not satisfied by the constraint check unit. That is, by automatically navigating the attribute value setting of the GUI component that satisfies the constraint, the user can design the GUI screen layout on the GUI builder without being conscious of the constraint such as the GUI guideline.

【0083】本発明による第2の効果は、GUIガイド
ライン等に基づく制約を伴うGUI画面レイアウト設計
において、品質向上、テスト工数の削減が図れることで
ある。
A second effect of the present invention is that quality improvement and test man-hour reduction can be achieved in GUI screen layout design with restrictions based on GUI guidelines and the like.

【0084】その理由は、制約記述部、制約チェック部
によってGUIガイドライン等に基づく制約を満たすよ
うな属性値の設定以外は設定不可能になるため、GUI
ガイドライン等に基づく制約に違反するような画面レイ
アウトが作成されるというバグは自動的になくなるため
である。
The reason is that it is impossible to set other than attribute values that satisfy the constraints based on the GUI guidelines and the like by the constraint description unit and the constraint check unit.
This is because a bug that a screen layout is created that violates restrictions based on guidelines or the like is automatically eliminated.

【0085】本発明による第3の効果は、GUIガイド
ライン等に基づく制約を伴うGUI画面レイアウト設計
において、従来はGUIガイドラインが変更されるとど
の画面のどの部品がその変更の影響を受けるかを逐一調
べながらすべて修正していかなければならなかったのに
対して、GUIガイドライン変更時のGUIレイアウト
修正工数の削減が図れることである。
A third effect of the present invention is that, in a GUI screen layout design with restrictions based on GUI guidelines or the like, when a GUI guideline is changed, it is determined on a screen which part is affected by the change. While all of the corrections have to be performed while checking, the GUI layout correction man-hour when changing the GUI guidelines can be reduced.

【0086】その理由は、制約記述中の各制約と、その
各制約に関連する部品、および属性との関係を管理する
制約−属性値関係管理部と、制約記述が更新されたかど
うかをチェックする制約更新管理部と、制約の変更によ
って制約違反となった部品をGUIビルダ画面上で示し
チェック結果処理部とを設けることにより、設計途中で
GUIガイドライン等の制約、すなわち制約記述が変更
された場合に、その変更に伴って修正すべきGUI部品
属性を特定し、GUIビルダ画面上で示すことが可能と
なることと、また、その際の修正も、制約チェック部に
より、変更後の制約を満たす設定しか許されないので、
制約の変更内容を意識せずに容易に行うことができるた
めである。
The reason is that a constraint-attribute value relationship management unit that manages the relationship between each constraint in the constraint description, components related to each constraint, and an attribute, and checks whether the constraint description has been updated. When a constraint update management unit and a component that violated the constraint due to the change of the constraint are displayed on the GUI builder screen and a check result processing unit is provided, so that a constraint such as a GUI guideline, that is, a constraint description is changed during design. In addition, it is possible to specify a GUI component attribute to be corrected in accordance with the change, and to indicate the attribute on the GUI builder screen. Only settings are allowed,
This is because it can be easily performed without being aware of the contents of the change in the constraint.

【0087】以上、全体の効果として、GUIガイドラ
イン等の制約を伴うGUIレイアウト設計に関する生産
性、保守性の向上が期待できる。
As described above, as an overall effect, improvement in productivity and maintainability of a GUI layout design with restrictions such as GUI guidelines can be expected.

【図面の簡単な説明】[Brief description of the drawings]

【図1】本発明によるGUI画面レイアウト設計方式の
全体の構成を示すブロック図である。
FIG. 1 is a block diagram showing an overall configuration of a GUI screen layout design method according to the present invention.

【図2】本発明によるGUI画面レイアウト設計方式の
設計手順を説明するフローチャートである。
FIG. 2 is a flowchart illustrating a design procedure of a GUI screen layout design method according to the present invention.

【図3】本発明によるGUI画面レイアウト設計方式の
設計手順を説明するフローチャートである。
FIG. 3 is a flowchart illustrating a design procedure of a GUI screen layout design method according to the present invention.

【図4】本発明によるGUI画面レイアウト設計方式の
GUIビルダの画面例を示す図である。
FIG. 4 is a diagram showing a screen example of a GUI builder of a GUI screen layout design method according to the present invention.

【図5】本発明によるGUI画面レイアウト設計方式に
おける制約チェック部のブロック図である。
FIG. 5 is a block diagram of a constraint check unit in a GUI screen layout design method according to the present invention.

【図6】本発明によるGUI画面レイアウト設計方式の
他の実施の形態の全体の構成を示すブロック図である。
FIG. 6 is a block diagram showing an overall configuration of another embodiment of a GUI screen layout design method according to the present invention.

【図7】従来技術である特開平5−224904号に開
示された装置の機能ブロック図である。
FIG. 7 is a functional block diagram of a device disclosed in Japanese Patent Application Laid-Open No. HEI 5-224904.

【符号の説明】[Explanation of symbols]

1 GUIビルダ 2 GUIビルダ画面 3 生成される画面プログラム 4 制約記述部 5 エディタ部 6 プログラム生成部 7 属性値管理部 8 制約−属性値関連管理部 9 制約チェック部 10 制約更新管理部 11 チェック結果処理部 REFERENCE SIGNS LIST 1 GUI builder 2 GUI builder screen 3 screen program to be generated 4 constraint description section 5 editor section 6 program generation section 7 attribute value management section 8 constraint-attribute value relation management section 9 constraint check section 10 constraint update management section 11 check result processing Department

Claims (3)

(57)【特許請求の範囲】(57) [Claims] 【請求項1】 GUI画面レイアウト設計及びGUI画
面プログラムの生成を行うGUIビルダ部と、GUI部
品についてあらかじめユーザ自身が定義する制約を記述
し保存する制約記述部とで構成され、 前記GUIビルダ部は、ユーザが設定する前記GUI部
品の属性と属性値のデータを保管し管理する属性管理部
と、前記制約記述部に記述された個々の制約とGUI部
品の属性との関連データを保管管理する制約−属性値関
連管理部と、前記属性管理部のデータが前記制約記述部
に記述された個々の制約を満たすか否かチェックする制
約チェック部と、前記制約チェック部でのチェック結果
をユーザに表示するために処理するチェック結果処理部
と、前記制約記述部に記述された制約の更新の有無と更
新された制約の特定についてチェックし管理する制約更
新管理部を有し、 ユーザがGUI部品の属性値を設定する毎に、前記制約
−属性値関連管理部が該GUI部品についての制約の有
無を判断し、前記制約−属性値関連管理部が該GUI部
品についての制約があると判断したときには前記制約チ
ェック部が前記制約記述部から呼び出した制約と前記属
性値管理部からのデータに基づき制約を満たすか否かチ
ェックし、該チェック結果を前記チェック結果処理部を
介して表示させることにより、制約を満たすGUI部品
の設定のみを行えるようにし、更に、前記GUIビルダ
部を起動させる毎に、前記制約更新管理部が制約の更新
の有無のチェックと更新された制約の特定を行い、前記
制約チェック部を介して更新された制約に関連する設定
済みのGUI部品を表示させ、かつ、該GUI部品の属
性値が該更新された制約を満たすか否かチェックさせ表
示させることを特徴とするGUI画面レイアウト設計方
式。
1. GUI screen layout design and GUI screen
A GUI builder unit for generating a surface program, and a GUI unit
Describes constraints defined by the user in advance for products
The GUI builder unit is configured by a user.
Attribute management unit that stores and manages attribute data and attribute value data
And each constraint described in the constraint description section and a GUI section
Constraints for storing and managing data related to product attributes
The data of the attribute management unit and the constraint description unit
System that checks whether each constraint described in
About check part and check result in the constraint check part
Result processing unit that processes to display to the user
And whether or not the constraint described in the constraint description section is updated.
Constraint updates to check and manage the identification of new constraints
Has a new management department,  Each time the user sets the attribute value of the GUI component,
-The attribute value related management unit has restrictions on the GUI part.
If there is nothing, the constraint-attribute-value-related managing unit sets the GUI unit
If it is determined that there are restrictions on the product,
Check unit calls the constraint called from the constraint description unit and the attribute.
Whether the constraint is satisfied based on the data from the gender
Check the check result and send it to the check result processing unit.
GUI component that satisfies the constraints by displaying via
So that you can only set, And the GUI builder
Each time the unit is started, the constraint update management unit updates the constraint.
Check for the presence of and identify the updated constraint,
Settings related to constraints updated via constraint checker
Display the GUI component that has already been
Check whether the gender value satisfies the updated constraint
ShowGUI screen layout design method characterized by the following
formula.
【請求項2】 GUI画面レイアウト設計及びGUI画
面プログラムの生成を行うGUIビルダ部と、GUI部
品についてあらかじめユーザ自身が定義する制約を記述
し保存する制約記述部とで構成され、 前記GUIビルダ部は、ユーザが設定する前記GUI部
品の属性と属性値のデータを保管し管理する属性管理部
と、前記制約記述部に記述された個々の制約とGUI部
品の属性との関連データを保管管理する制約−属性値関
連管理部と、前 記属性管理部のデータが前記制約記述部
に記述された個々の制約を満たすか否かチェックする制
約チェック部と、前記制約チェック部でのチェック結果
をユーザに表示するために処理するチェック結果処理部
と、前記制約記述部に記述された制約の更新の有無と更
新された制約の特定についてチェックし管理する制約更
新管理部を有し、 ユーザがGUI部品を配置する毎に、前記制約−属性値
関連管理部が該GUI部品についての制約の有無を判断
し、前記制約−属性値関連管理部が該GUI部品につい
ての制約があると判断したときには前記制約チェック部
が前記制約記述部から呼び出した制約と前記属性値管理
部からのデータに基づき制約を満たすか否かチェック
し、該チェック結果を前記チェック結果処理部を介して
表示させることにより、制約を満たすGUI部品の設定
のみを行えるようにし、 更に、前記GUIビルダ部を起
動させる毎に、前記制約更新管理部が制約の更新の有無
のチェックと更新された制約の特定を行い、前記制約チ
ェック部を介して更新された制約に関連する設定済
GUI部品を表示させ、かつ、該GUI部品の属性値が
該更新された制約を満たすか否かチェックさせ表示させ
ることを特徴とするGUI画面レイアウト設計方式。
2. GUI screen layout design and GUI screen
A GUI builder unit for generating a surface program, and a GUI unit
Describes constraints defined by the user in advance for products
And a constraint description section for saving the data, wherein the GUI builder section is a GUI section set by a user.
Attribute management unit that stores and manages attribute data and attribute value data
And each constraint described in the constraint description section and a GUI section
Constraints for storing and managing data related to product attributes
And the communication management unit, data before Symbol attribute management unit said constraint description section
System that checks whether each constraint described in
About check part and check result in the constraint check part
Result processing unit that processes to display to the user
And whether or not the constraint described in the constraint description section is updated.
Constraint updates to check and manage the identification of new constraints
It has a new management unit, and each time a user places a GUI component,
The relation management unit determines whether there is a restriction on the GUI part.
Then, the constraint-attribute value related management unit performs
When it is determined that there are all constraints, the constraint checking unit
Called from the constraint description unit and the attribute value management
Checks whether constraints are satisfied based on data from department
Then, the check result is transmitted via the check result processing unit.
Setting GUI parts that satisfy constraints by displaying
In addition, every time the GUI builder unit is activated, the constraint update management unit checks whether the constraint has been updated and specifies the updated constraint, and the updated constraint is updated via the constraint check unit. and to display the GUI parts already set only related constraints, and, GUI screen layout design method that attribute value of the GUI component and wherein the displaying is checked whether they meet the constraints is the updated.
【請求項3】 前記制約記述部が前記GUIビルダ部内
部に設けられていることを特徴とする請求項1または2
に記載のGUI画面レイアウト設計方式。
3. The GUI builder according to claim 1, wherein the constraint description unit is provided inside the GUI builder unit.
GUI screen layout design method described in 1.
JP8249785A 1996-09-20 1996-09-20 GUI screen layout design method Expired - Fee Related JP2998652B2 (en)

Priority Applications (1)

Application Number Priority Date Filing Date Title
JP8249785A JP2998652B2 (en) 1996-09-20 1996-09-20 GUI screen layout design method

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
JP8249785A JP2998652B2 (en) 1996-09-20 1996-09-20 GUI screen layout design method

Publications (2)

Publication Number Publication Date
JPH1097415A JPH1097415A (en) 1998-04-14
JP2998652B2 true JP2998652B2 (en) 2000-01-11

Family

ID=17198196

Family Applications (1)

Application Number Title Priority Date Filing Date
JP8249785A Expired - Fee Related JP2998652B2 (en) 1996-09-20 1996-09-20 GUI screen layout design method

Country Status (1)

Country Link
JP (1) JP2998652B2 (en)

Families Citing this family (9)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
US7398474B2 (en) * 2005-01-31 2008-07-08 Microsoft Corporation Method and system for a digital device menu editor
US20070156382A1 (en) 2005-12-29 2007-07-05 Graham James L Ii Systems and methods for designing experiments
JP2008269554A (en) * 2007-03-29 2008-11-06 Hitachi Software Eng Co Ltd Source code generating device
FR2915016B1 (en) * 2007-04-10 2009-06-05 Siemens Vdo Automotive Sas SYSTEM FOR AUTOMATED CREATION OF A SOFTWARE INTERFACE
JP5152436B2 (en) * 2010-06-08 2013-02-27 三菱電機株式会社 Programmable display screen creation system and screen creation program
JP5511704B2 (en) * 2011-02-02 2014-06-04 クラリオン株式会社 Apparatus, method, and program for supporting creation of software
JP5826544B2 (en) * 2011-07-20 2015-12-02 株式会社東芝 Facility control equipment
JP6045050B2 (en) * 2013-03-19 2016-12-14 Necソリューションイノベータ株式会社 User interface consistency check method, apparatus and program
JP6086880B2 (en) * 2014-07-30 2017-03-01 Kddi株式会社 3D design apparatus, method and program

Also Published As

Publication number Publication date
JPH1097415A (en) 1998-04-14

Similar Documents

Publication Publication Date Title
US6964010B1 (en) Formatted-item list control
US9977654B2 (en) Method of developing an application for execution in a workflow management system and apparatus to assist with generation of an application for execution in a workflow management system
US6341359B1 (en) Self-diagnosing and self correcting data entry components
US6098061A (en) Computer system for interactive help using human-understandable knowledge and computer-understandable knowledge
TWI424351B (en) Identifying design issues in electronic forms
EP0803825A2 (en) Multi-media title editing apparatus and a style creation device employed therefor
US20080109722A1 (en) Direct presentation of help information relative to selectable menu items in a computer controlled display interface
JP2003308145A (en) Method for changing graphic user interface and recording medium therefor
JP2998652B2 (en) GUI screen layout design method
US7058582B2 (en) Method for performing programming by plain text requests
US8327274B2 (en) Method and apparatus for customizing a model entity presentation based on a presentation policy
JP2006276953A (en) Screen definition data difference extraction method, device and program
WO2017214665A1 (en) Improvements in or relating to forms
JP3713466B2 (en) Program creation support method, program creation support program, and program creation support apparatus
JP2001273181A (en) Computer system
US6728717B2 (en) Storage system with online manual
JP2001022873A (en) Customizing processor and program recording medium therefor
JPH06131346A (en) Document processor
JP2016115022A (en) Information processing apparatus, information processing method, and program
JP4771831B2 (en) Graphic display program and graphic display method
JP4957043B2 (en) Information processing apparatus, program, and business application introduction method
US20010002834A1 (en) Method for inputting and acquiring requirement
JP2001042985A (en) Method for display control over menu in fif form and data input device
JP3138430B2 (en) User interface screen creation support device
US6219065B1 (en) Method for inputting and acquiring requirement

Legal Events

Date Code Title Description
A01 Written decision to grant a patent or to grant a registration (utility model)

Free format text: JAPANESE INTERMEDIATE CODE: A01

Effective date: 19991005

FPAY Renewal fee payment (event date is renewal date of database)

Free format text: PAYMENT UNTIL: 20071105

Year of fee payment: 8

FPAY Renewal fee payment (event date is renewal date of database)

Free format text: PAYMENT UNTIL: 20081105

Year of fee payment: 9

FPAY Renewal fee payment (event date is renewal date of database)

Free format text: PAYMENT UNTIL: 20081105

Year of fee payment: 9

FPAY Renewal fee payment (event date is renewal date of database)

Free format text: PAYMENT UNTIL: 20091105

Year of fee payment: 10

LAPS Cancellation because of no payment of annual fees