(57)【要約】【課題】  画面の縦横比に応じた画面設計を不要とし、画面の縦横比が変わっても相対的なレイアウトが変わらないような画面を視覚的に分かり易い操作で作成可能にすること。【解決手段】  レイアウトウインドウおよび部品ウインドウ内に複数種類の画面レイアウトおよび部品を表示する手段と、表示された複数種類の画面レイアウトのいずれかのアイコンの選択操作を受け、選択された画面レイアウトを構成する複数の分割領域を画面編集ウインドウ内に表示し、いずれかの階層の分割領域の表示状態で当該分割領域に対する複数種類の画面レイアウトのいずれかのアイコンの選択操作を更に受付け、積層構造に画面分割した画面レイアウトを定義する手段と、画面編集ウインドウ内に表示された画面レイアウトの各分割領域に対して配置する部品を、部品ウインドウ内に表示された複数種類のアイコンのいずれかの選択操作によって受付け、選択された部品を配置する手段とを備える。【選択図】      図１
2006139583.tif 000002
【特許請求の範囲】
【請求項１】
所望の画面レイアウトを決定し、その画面レイアウトの画面中に表示部品や入力部品等の部品を配置して目的とする機能を満たす画面を作成する画面作成装置であって、
１つの画面を複数に分割する分割領域に関する画面レイアウトの定義情報を格納したレイアウトテーブルと、
前記入力部品等の複数種類の部品に関する定義情報を格納した部品テーブルと、
前記レイアウトテーブルの定義情報および前記部品テーブルの定義情報を読み出し、表示画面の一部に生成したレイアウトウインドウおよび部品ウインドウ内に前記複数種類の画面レイアウトおよび部品をそれぞれアイコン形式で表示する第１の手段と、
前記レイアウトウインドウ内に表示された複数種類の画面レイアウトのいずれかのアイコンの選択操作を受け、選択された画面レイアウトを構成する複数の分割領域を画面編集ウインドウ内に表示し、いずれかの階層の分割領域の表示状態で当該分割領域に対する複数種類の画面レイアウトのいずれかのアイコンの選択操作を更に受付け、積層構造に画面分割した画面レイアウトを定義する第２の手段と、
前記画面編集ウインドウ内に表示された画面レイアウトの各分割領域に対して配置する部品を、前記部品ウインドウ内に表示された複数種類のアイコンのいずれかの選択操作によって受付け、選択された部品を配置する第３の手段と、
前記第２の手段により定義された各画面分割階層の画面レイアウトの種別と前記第３の手段により各画面分割階層の分割領域に配置された部品の種別とを画面構造テーブルに格納する第４の手段と、
前記画面構造テーブルの格納情報を読出し、積層構造に画面分割した画面レイアウトの各画面分割階層に配置された部品の画像をプレビューウインドウに表示する第５の手段と、
を備えることを特徴とする画面作成装置。
【請求項２】
各画面分割階層の画面レイアウトにおける部品配置前の状態で、当該階層の画面レイアウトの分割領域に部品配置を促すメッセージを表示する第６の手段を備えることを特徴とする請求項１に記載の画面作成装置。
【請求項３】
前記画面編集ウインドウ内に表示された複数の画面分割階層の画面レイアウトのいずれかの階層に配置された部品を部品編集ウインドウに移動させる操作を受け、当該部品を部品編集ウインドウに移動し、前記部品ウインドウ内に表示された複数種類のアイコンのいずれかの選択操作によって配置済みの部品を再編集する第７の手段を備えることを特徴とする請求項２に記載の画面作成装置。
【請求項４】
前記プレビューウインドウに部品の画像を表示する際に、画面レイアウトの分割領域の境界または輪郭を可視表示する第８の手段を備えることを特徴とする請求項２に記載の画面作成装置。
【請求項５】
前記各画面分割階層の画面レイアウトの分割領域に配置された部品が応答するイベント情報を前記画面構造テーブルに格納する第９の手段を備えることを特徴とする請求項４に記載の画面作成装置。
【請求項６】
前記レイアウトテーブルに格納した画面レイアウトの定義情報は、１つの画面を複数に相対的に分割する相対分割領域に関するものであることを特徴とする請求項１〜５のいずれかに記載の画面作成装置。
【請求項７】
所望の画面レイアウトを決定し、その画面レイアウトの画面中に表示部品や入力部品等の部品を配置して目的とする機能を満たす画面を作成する画面作成方法であって、
１つの画面を複数に分割する分割領域に関する画面レイアウトの定義情報を格納したレイアウトテーブル及び前記入力部品等の複数種類の部品に関する定義情報を格納した部品テーブルの定義情報をそれぞれ読み出し、表示画面の一部に生成したレイアウトウインドウおよび部品ウインドウ内に前記複数種類の画面レイアウトおよび部品をそれぞれアイコン形式で表示する第１のステップと、
前記レイアウトウインドウ内に表示された複数種類の画面レイアウトのいずれかのアイコンの選択操作を受け、選択された画面レイアウトを構成する複数の分割領域を画面編集ウインドウ内に表示し、いずれかの階層の分割領域の表示状態で当該分割領域に対する複数種類の画面レイアウトのいずれかのアイコンの選択操作を更に受付け、積層構造に画面分割した画面レイアウトを定義する第２のステップと、
前記画面編集ウインドウ内に表示された画面レイアウトの各分割領域に対して配置する部品を、前記部品ウインドウ内に表示された複数種類のアイコンのいずれかの選択操作によって受付け、選択された部品を配置する第３のステップと、
前記第２のステップで定義された各画面分割階層の画面レイアウトの種別と前記第３のステップで各画面分割階層の分割領域に配置された部品の種別とを画面構造テーブルに格納する第４のステップと、
前記画面構造テーブルの格納情報を読出し、積層構造に画面分割した画面レイアウトの各画面分割階層に配置された部品の画像をプレビューウインドウに表示する第５のステップと、
を備えることを特徴とする画面作成方法。
【請求項８】
各画面分割階層の画面レイアウトにおける部品配置前の状態で、当該階層の画面レイアウトの分割領域に部品配置を促すメッセージを表示する第６のステップを備えることを特徴とする請求項７に記載の画面作成方法。
【請求項９】
前記画面編集ウインドウ内に表示された複数の画面分割階層の画面レイアウトのいずれかの階層に配置された部品を部品編集ウインドウに移動させる操作を受け、当該部品を部品編集ウインドウに移動し、前記部品ウインドウ内に表示された複数種類のアイコンのいずれかの選択操作によって配置済みの部品を再編集する第７のステップを備えることを特徴とする請求項８に記載の画面作成方法。
【請求項１０】
前記プレビューウインドウに部品の画像を表示する際に、画面レイアウトの分割領域の境界または輪郭を可視表示する第８のステップを備えることを特徴とする請求項８に記載の画面作成方法。
【請求項１１】
前記各画面分割階層の画面レイアウトの分割領域に配置された部品が応答するイベント情報を前記画面構造テーブルに格納する第９のステップを備えることを特徴とする請求項１０に記載の画面作成方法。
【請求項１２】
前記レイアウトテーブルに格納した画面レイアウトの定義情報は、１つの画面を複数に相対的に分割する相対分割領域に関するものであることを特徴とする請求項７〜１１のいずれかに記載の画面作成方法。
【請求項１３】
所望の画面レイアウトを決定し、その画面レイアウトの画面中に表示部品や入力部品等の部品を配置して目的とする機能を満たす画面を作成させるための処理をコンピュータに実行させるプログラムであって、
１つの画面を複数に分割する分割領域に関する画面レイアウトの定義情報を格納したレイアウトテーブル及び前記入力部品等の複数種類の部品に関する定義情報を格納した部品テーブルの定義情報をそれぞれ読み出し、表示画面の一部に生成したレイアウトウインドウおよび部品ウインドウ内に前記複数種類の画面レイアウトおよび部品をそれぞれアイコン形式で表示する第１のステップと、
前記レイアウトウインドウ内に表示された複数種類の画面レイアウトのいずれかのアイコンの選択操作を受け、選択された画面レイアウトを構成する複数の分割領域を画面編集ウインドウ内に表示し、いずれかの階層の分割領域の表示状態で当該分割領域に対する複数種類の画面レイアウトのいずれかのアイコンの選択操作を更に受付け、積層構造に画面分割した画面レイアウトを定義する第２のステップと、
前記画面編集ウインドウ内に表示された画面レイアウトの各分割領域に対して配置する部品を、前記部品ウインドウ内に表示された複数種類のアイコンのいずれかの選択操作によって受付け、選択された部品を配置する第３のステップと、
前記第２のステップで定義された各画面分割階層の画面レイアウトの種別と前記第３のステップで各画面分割階層の分割領域に配置された部品の種別とを画面構造テーブルに格納する第４のステップと、
前記画面構造テーブルの格納情報を読出し、積層構造に画面分割した画面レイアウトの各画面分割階層に配置された部品の画像をプレビューウインドウに表示する第５のステップと、
をコンピュータに実行させることを特徴とするプログラム。
【発明の詳細な説明】
【技術分野】
【０００１】
本発明は、携帯電話機等の情報端末で使用するビジュアルユーザインタフェースを持つプログラムを作成する場合に必要となる画面を作成する画面作成方法及び装置に係り、特に、所望の画面レイアウトを決定し、その画面レイアウトの画面中に表示部品や入力部品等の部品を配置して目的とする機能を満たす画面を作成する画面作成方法及び装置並びにプログラムに関するものである。
【背景技術】
【０００２】
これまでに、ビジュアルユーザインタフェースを持つプログラムを開発するツールでは、Visual C++、Visual BASIC等が提供されている。
この種の開発ツールを用いてビジュアルプログラムを構築する場合、目的とする機能を満たす画面を順次作成し、その画面中の部品情報に対応する処理プログラムを記述するという手法が用いられる。
また、複数の部品で構成される画面レイアウトを作成する画面レイアウトシステムとして、下記の特許文献１に開示されたものがある。
【特許文献１】特開２００２−７３００４号公報
【発明の開示】
【発明が解決しようとする課題】
【０００３】
ところで、ビジュアルユーザインタフェースを搭載した携帯電話機にあっては、近時における表示素子製造技術の進歩に伴って１つの画面内に多くの情報を精細に表示することが可能になって来ている。また、同じプログラムで様々な大きさや縦横比の画面に対応するため、縦横比を変更して縮小・拡大しても全体の相対的なレイアウトが変わらないよう、相対表示画面の設計が求められている。
しかしながら、上記Visual C++, Visual BASIC等の開発ツールには、そのような相対的なレイアウトを設計するための機能が用意されていない。そのため、画面の縦横比に応じて画面レイアウトの設計をすることが必要になり、開発コストが嵩むという問題があった。
また、前記特許文献１においても、相対的なレイアウトが変わらないような画面を設計することについては何ら考慮されていない。
また、所望のレイアウトの画面を作成する場合、レイアウトを定める部品を順次に積み重ねる形式で作成するのが視覚的に分かり易いが、前記Visual C++, Visual BASIC等の開発ツールや特許文献１においては、そのような機能は用意されていない。
【０００４】
本発明は、上記のような問題点に鑑みなされたものであり、その目的は画面の縦横比に応じた画面設計を不要とし、画面の縦横比が変わっても相対的なレイアウトが変わらないような画面を視覚的に分かり易い操作で作成することができる画面作成方法および装置並びにプログラムを提供することにある。
【課題を解決するための手段】
【０００５】
上記目的を達成するために、本発明に係る画面作成装置は、所望の画面レイアウトを決定し、その画面レイアウトの画面中に表示部品や入力部品等の部品を配置して目的とする機能を満たす画面を作成する画面作成装置であって、
１つの画面を複数に分割する分割領域に関する画面レイアウトの定義情報を格納したレイアウトテーブルと、前記入力部品等の複数種類の部品に関する定義情報を格納した部品テーブルと、前記レイアウトテーブルの定義情報および前記部品テーブルの定義情報を読み出し、表示画面の一部に生成したレイアウトウインドウおよび部品ウインドウ内に前記複数種類の画面レイアウトおよび部品をそれぞれアイコン形式で表示する第１の手段と、前記レイアウトウインドウ内に表示された複数種類の画面レイアウトのいずれかのアイコンの選択操作を受け、選択された画面レイアウトを構成する複数の分割領域を画面編集ウインドウ内に表示し、いずれかの階層の分割領域の表示状態で当該分割領域に対する複数種類の画面レイアウトのいずれかのアイコンの選択操作を更に受付け、積層構造に画面分割した画面レイアウトを定義する第２の手段と、前記画面編集ウインドウ内に表示された画面レイアウトの各分割領域に対して配置する部品を、前記部品ウインドウ内に表示された複数種類のアイコンのいずれかの選択操作によって受付け、選択された部品を配置する第３の手段と、前記第２の手段により定義された各画面分割階層の画面レイアウトの種別と前記第３の手段により各画面分割階層の分割領域に配置された部品の種別とを画面構造テーブルに格納する第４の手段と、前記画面構造テーブルの格納情報を読出し、積層構造に画面分割した画面レイアウトの各画面分割階層に配置された部品の画像をプレビューウインドウに表示する第５の手段とを備えることを特徴とする。
また、各画面分割階層の画面レイアウトにおける部品配置前の状態で、当該階層の画面レイアウトの分割領域に部品配置を促すメッセージを表示する第６の手段を備えることを特徴とする。
また、前記画面編集ウインドウ内に表示された複数の画面分割階層の画面レイアウトのいずれかの階層に配置された部品を部品編集ウインドウに移動させる操作を受け、当該部品を部品編集ウインドウに移動し、前記部品ウインドウ内に表示された複数種類のアイコンのいずれかの選択操作によって配置済みの部品を再編集する第７の手段を備えることを特徴とする。
また、前記プレビューウインドウに部品の画像を表示する際に、画面レイアウトの分割領域の境界または輪郭を可視表示する第８の手段を備えることを特徴とする。
また、前記各画面分割階層の画面レイアウトの分割領域に配置された部品が応答するイベント情報を前記画面構造テーブルに格納する第９の手段を備えることを特徴とする。
また、前記レイアウトテーブルに格納した画面レイアウトの定義情報は、１つの画面を複数に相対的に分割する相対分割領域に関するものであることを特徴とする。
【０００６】
本発明に係る画面作成方法は、所望の画面レイアウトを決定し、その画面レイアウトの画面中に表示部品や入力部品等の部品を配置して目的とする機能を満たす画面を作成する画面作成方法であって、
１つの画面を複数に分割する分割領域に関する画面レイアウトの定義情報を格納したレイアウトテーブル及び前記入力部品等の複数種類の部品に関する定義情報を格納した部品テーブルの定義情報をそれぞれ読み出し、表示画面の一部に生成したレイアウトウインドウおよび部品ウインドウ内に前記複数種類の画面レイアウトおよび部品をそれぞれアイコン形式で表示する第１のステップと、前記レイアウトウインドウ内に表示された複数種類の画面レイアウトのいずれかのアイコンの選択操作を受け、選択された画面レイアウトを構成する複数の分割領域を画面編集ウインドウ内に表示し、いずれかの階層の分割領域の表示状態で当該分割領域に対する複数種類の画面レイアウトのいずれかのアイコンの選択操作を更に受付け、積層構造に画面分割した画面レイアウトを定義する第２のステップと、前記画面編集ウインドウ内に表示された画面レイアウトの各分割領域に対して配置する部品を、前記部品ウインドウ内に表示された複数種類のアイコンのいずれかの選択操作によって受付け、選択された部品を配置する第３のステップと、前記第２のステップで定義された各画面分割階層の画面レイアウトの種別と前記第３のステップで各画面分割階層の分割領域に配置された部品の種別とを画面構造テーブルに格納する第４のステップと、前記画面構造テーブルの格納情報を読出し、積層構造に画面分割した画面レイアウトの各画面分割階層に配置された部品の画像をプレビューウインドウに表示する第５のステップとを備えることを特徴とする。
また、各画面分割階層の画面レイアウトにおける部品配置前の状態で、当該階層の画面レイアウトの分割領域に部品配置を促すメッセージを表示する第６のステップを備えることを特徴とする。
また、前記画面編集ウインドウ内に表示された複数の画面分割階層の画面レイアウトのいずれかの階層に配置された部品を部品編集ウインドウに移動させる操作を受け、当該部品を部品編集ウインドウに移動し、前記部品ウインドウ内に表示された複数種類のアイコンのいずれかの選択操作によって配置済みの部品を再編集する第７のステップを備えることを特徴とする。
また、前記プレビューウインドウに部品の画像を表示する際に、画面レイアウトの分割領域の境界または輪郭を可視表示する第８のステップを備えることを特徴とする。
また、前記各画面分割階層の画面レイアウトの分割領域に配置された部品が応答するイベント情報を前記画面構造テーブルに格納する第９のステップを備えることを特徴とする。
また、前記レイアウトテーブルに格納した画面レイアウトの定義情報は、１つの画面を複数に相対的に分割する相対分割領域に関するものであることを特徴とする。
【０００７】
本発明に係るプログラムは、所望の画面レイアウトを決定し、その画面レイアウトの画面中に表示部品や入力部品等の部品を配置して目的とする機能を満たす画面を作成させるための処理をコンピュータに実行させるプログラムであって、
１つの画面を複数に分割する分割領域に関する画面レイアウトの定義情報を格納したレイアウトテーブル及び前記入力部品等の複数種類の部品に関する定義情報を格納した部品テーブルの定義情報をそれぞれ読み出し、表示画面の一部に生成したレイアウトウインドウおよび部品ウインドウ内に前記複数種類の画面レイアウトおよび部品をそれぞれアイコン形式で表示する第１のステップと、前記レイアウトウインドウ内に表示された複数種類の画面レイアウトのいずれかのアイコンの選択操作を受け、選択された画面レイアウトを構成する複数の分割領域を画面編集ウインドウ内に表示し、いずれかの階層の分割領域の表示状態で当該分割領域に対する複数種類の画面レイアウトのいずれかのアイコンの選択操作を更に受付け、積層構造に画面分割した画面レイアウトを定義する第２のステップと、前記画面編集ウインドウ内に表示された画面レイアウトの各分割領域に対して配置する部品を、前記部品ウインドウ内に表示された複数種類のアイコンのいずれかの選択操作によって受付け、選択された部品を配置する第３のステップと、前記第２のステップで定義された各画面分割階層の画面レイアウトの種別と前記第３のステップで各画面分割階層の分割領域に配置された部品の種別とを画面構造テーブルに格納する第４のステップと、前記画面構造テーブルの格納情報を読出し、積層構造に画面分割した画面レイアウトの各画面分割階層に配置された部品の画像をプレビューウインドウに表示する第５のステップとをコンピュータに実行させることを特徴とする。
【発明の効果】
【０００８】
本発明によれば、画面の縦横比に応じた画面設計を不要とし、画面の縦横比が変わっても相対的なレイアウトが変わらないような画面を視覚的に分かり易い操作で作成することができる。
【発明を実施するための最良の形態】
【０００９】
以下、本発明を図示する実施の形態に基づいて詳細に説明する。
図１は、本発明に係る画面作成装置の実施の形態を示すブロック構成図であり、入力装置を構成するキーボード１０１及びマウス１０２、レイアウト対象の画面を表示する表示装置１０３、メモリ１０４、レイアウト対象の画面を作成するための処理を行うＣＰＵ１０５を備えている。
メモリ１０６には、各種テーブル群の記憶領域とプログラム群の記憶領域が設けられ、テーブル群の記憶領域にはイベントテーブル１０６１、レイアウトテーブル１０６２、部品テーブル１０６３、画面構造テーブル１０６４、部品構造テーブル１０６５が設けられている。
プログラム群の記憶領域には、画面作成エディタ１０７１と部品作成エディタ１０７２が記憶されている。
画面作成エディタ１０７１は、携帯電話機等の情報端末に搭載するビジュアルユーザインタフェースで用いる画面を作成・編集するプログラムであり、本発明の主要な構成要素となるものである。
部品作成エディタ１０７２は、所望のレイアウトの画面内に配置するボタンなどの入力部品や表示部品を作成および編集するプログラムである。この部品作成エディタ１０７２は、新規に部品を作成する場合や、既に１つの画面内に配置されている部品を変更あるいは修正する場合に使用するものである。
【００１０】
図２は、表示装置１０３に表示される画面レイアウト作成・編集画面２００の構成例を示す図である。
図２において、画面左上には、複数種類の画面レイアウトのアイコンを表示するレイアウトウインドウ２０１が表示され、その下部には、入力部品や表示部品などの部品を表示する部品ウインドウ２０２が表示されている。
また、画面右上には、ビジュアルユーザインタフェースにおける画面を編集するための画面編集ウインドウ２０３が表示され、その下部には画面編集ウインドウ２０３内の画面における部品を分割領域単位で編集（変更または修正）するための部品編集ウインドウ２０４が表示されている。
画面編集ウインドウ２０３は作成・編集対象の１つの画面における画面分割の積層構造を表示するツリービューウインドウ２０３１と、１つの画面の内容を表示するプレビューウインドウ２０３２で構成されている。
部品編集ウインドウ２０４は、編集対象の１つの相対分割領域上の部品をツリービューウインドウ２０３１から移動させてその相対分割領域内に配置されている部品を積層構造で表示するツリーウインドウ２０４１と、このツリーウインドウ２０４１内の１つの部品の内容を表示するプレビューウインドウ２０４２から構成されている。
イベントテーブル１０６１は、ユーザ操作などのイベントの種別を登録したテーブルであり、例えば図３に示すように構成されている。
【００１１】
図３に示すイベントテーブル１０６１は、携帯電話機のビジュアルユーザインタフェースにおけるイベント情報の構成例を示したものであり、その格納情報はイベントNo.１０６１１、イベントＩＤ１０６１２、イベント種別１０６１３で構成されている。
例えば携帯電話機のファンクションキーの「上キー押下」操作についてはイベントＩＤ＝EVT_KEY_UPが登録されている。
レイアウトテーブル１０６２は、１つの画面を複数に相対分割する相対分割領域に関する画面レイアウトの定義情報を格納したものであり、その格納情報は図４に示すようにレイアウトNo.１０６２１、レイアウトＩＤ１０６２２、分割方向１０６２３の情報が登録されている。
【００１２】
図４に例示する定義情報は、１つの画面を分割しない場合のレイアウト定義、左右方向に２分割する場合のレイアウト定義、上下方向に２分割にする場合の定義の例を示すものであり、レイアウト「No.２」及び「No.３」の定義は図２のレイアウトウインドウ２０１におけるアイコン２０１１、２０１２に対応する。
本発明においては、図４の定義の他に、後述する図２０に示すように、各種の分割の仕方を定義することができる。なお、１つの画面を分割しない場合の定義は“TOP”として示している。
部品テーブル１０６３は、画面に配置する複数種類の入力部品等の部品の定義情報を格納したものであり、例えば図５に示すように、部品No.１０６３１、部品ＩＤ１０６３２、部品名、ビットマップデータの先頭アドレス１０６３４の情報が格納されている。
ここで例示する部品には、コマンドボタン、リスト、ビットマップ、テキスト、テキストボックス、ラジオボタン、チェックボックス、タブといったものが用意されている。
そして、それぞれの部品はビットマップデータ１０８としてメモリ１０６内に格納されている。
【００１３】
画面構造テーブル１０６４は、１つの画面を構成する画面レイアウトの種別（ＩＤ）と各画面分割階層に配置された部品種別（ＩＤ）と、各画面分割階層に配置された各部品が応答するイベントの情報とを格納するものであり、例えば図６（ａ）に示すように構成されている。
すなわち、図６（ａ）に示すように、部品No.１０６４１、部品名１０６４２、部品種別１０６４３、部品No.またはレイアウトNo.１０６４４，処理イベント数１０６４５、イベントＩＤ（１）１０６４６〜（ｎ）、親部品No.１０６５０の情報で構成され、各画面分割階層における分割領域および部品毎に、これらの情報が格納されるようになっている。
この画面構造テーブル１０６４および後述の部品構造テーブル１０６５では、画面を分割するアイコンも部品（レイアウト部品）として扱っている。例えば、図２の上下方向に画面を２分割するアイコン２０１２については、レイアウトNo.１０６４４として「２」が登録され、応答する外部操作イベントとしてイベントＩＤ＝１（上キー押下）、イベントＩＤ＝２（下キー押下）が登録されている。
部品構造テーブル１０６５は、各画面分割階層の各分割領域に配置した部品の種別の情報を画面分割階層別に格納するものであり、例えば図６（ｂ）に示すように、画面分割階層別の部品種別を親子関係で格納するようになっている。
図６（ｂ）においては、部品No.１０６５１、親部品No.１０６５２、子部品数１０６５３、子部品No.（１）１０６５４〜（ｍ）１０６５７の情報を格納するようになっている。
図６（ａ），（ｂ）に示す画面構造テーブル１０６４および部品構造テーブル１０６５の格納内容であった場合、図７（ａ）に示すような構造のレイアウトで部品が配置されていることになる。本発明では、１つの画面について、図７（ｂ）に示すように、必要な部品を積層構造で積み重ねる形式で作成する。
なお、部品No.は図５の部品テーブル１０６３で定義されたものである。
また、矢印７０１は外部操作のイベントの伝達方向を示している。このイベントの伝達方向は矢印７０１と逆向きに設定されることもある。
なお、部品（レイアウト用の部品を含む）がそれぞれ処理するイベントは、例えば図８に示すように対応している。
【００１４】
次に、以上の構成において、所望のレイアウトのアイコンを選択し、その選択したレイアウトの画面中に部品を配置する場合の操作手順について、図９〜図２３の画面レイアウト作成・編集画面を参照して説明する。
まず、図９に示すように、レイアウトウインドウ２０１から例えば画面を上下方向に２分割するアイコン２０１２を選択しドラッグアンドドロップ操作によって画面編集ウインドウ２０３のツリービューウインドウ２０３１に配置する。
すると、図１０に示すように、ツリービューウインドウ２０３１に画面分割の階層構造が表示され、上下の分割領域に「部品を置いて下さい」というメッセージが表示される。
また、プレビューウインドウ２０３２には分割した画面の境界が破線２０３３で表示され、それぞれの分割領域に部品の配置を促すメッセージ「ドラッグアンドドロップして下さい」が表示される。
そこで、図１１に示すように、部品ウインドウ２０２から例えばビットマップ部品２０２１をツリービューウインドウ２０３１内の上側の分割領域の「部品を置いて下さい」という表示位置に配置するドラッグアンドドロップ操作を行う。
すると、図１２に示すように、ツリービューウインドウ２０３１の上側の分割領域の「部品を置いて下さい」に代わってビットマップ部品が配置されたことが表示され、またプレビューウインドウ２０３２には、配置されたビットマップ部品２０３１のプレビュー画像が表示される。
【００１５】
次に、図１３に示すように、リスト部品２０２２をツリービューウインドウ２０３１内の下側の分割領域の「部品を置いて下さい」という表示位置に配置するドラッグアンドドロップ操作を行う。これにより、下側の分割領域の「部品を置いて下さい」に代わってリスト部品が配置されたことが表示され、またプレビューウインドウ２０３２には、配置されたリスト部品２０３２のプレビュー画像が表示される。
以上によって、図１４に示すような積層構造の画面が作成される。
【００１６】
次に、配置した部品を編集する場合の操作手順について、図１５〜図１９を参照して説明する。
図１５のように上下２分割の各分割領域にビットマップ部品とリスト部品が配置された状態で、例えばリスト部品を編集することが必要になった場合、画面編集ウインドウ２０３のツリービューウインドウ２０３１内のリスト部品を操作によって部品編集ウインドウ２０４のツリービューウインドウ２０４１に移動する。
すると、図１６に示すように、画面編集ウインドウ２０３のツリービューウインドウ２０３１内のリスト部品は消去され、再び部品の配置を求めるメッセージ「部品を置いて下さい」が表示される。
一方、部品編集ウインドウ２０４のツリービューウインドウ２０４１内にはリスト部品の階層が表示され、プレビューウインドウ２０４２には編集前のリスト部品がプレビュー表示される。
そこで、リスト部品の各項目に例えばラジオボタン２０２３を配置し、更にテキスト部品２０２４を配置するドラッグアンドドロップ操作を行うことによってリスト部品を編集する。
【００１７】
すると、図１７に示すように、部品編集ウインドウ２０４のプレビューウインドウ２０４２には編集されたリスト部品がプレビュー表示される。
この後、図１８に示すように、部品編集ウインドウ２０４のツリービューウインドウ２０４１のリスト部品の階層位置をドラッグアンドドロップ操作によって選択し、画面編集ウインドウ２０３のツリービューウインドウ２０３１の「部品を置いて下さい」の位置に移動させることにより、編集したリスト部品をツリービューウインドウ２０３１に戻す。
これにより、画面編集ウインドウ２０３のツリービューウインドウ２０３１およびプレビューウインドウ２０３２の表示内容は図１９に示すようなものに変わり、編集済みのリスト部品が再配置された状態となる。
【００１８】
ここで、レイアウトウインドウ２０１では、画面を分割するレイアウト用のアイコンとして、左右２分割、上下２分割のアイコンを例示しているが、本発明はこれに限定されるものではなく、図２０（ａ）に示すように画面を碁盤目状のレイアウトに分割するアイコン２０１３、同図（ｂ）に示すように画面を東、西、南、北および中心といった５つの分割領域に分割するアイコン２０１４、同図（ｃ）に示すように画面を４等分するアイコン２０１５など、各種の分割形状のアイコンを用いることができる。
図２０（ｃ）のアイコン２０１５を用いた場合、画面分割した階層構造は図２０（ｄ）に示すようなものとなる。
この場合、図２０（ｃ）のレイアウトの画面は、左右２分割用のアイコン２０１１と上下２分割用のアイコン２０１２を組み合わせて使用することによっても作成することができる。
すなわち、図２１（ａ）に示すようにＴＯＰ画面を左右２分割用のアイコン２０１１で２分割して分割領域２１０１，２１０２を作成し、次に左側の分割領域２０１１を上下２分割用のアイコン２０１２で２分割して分割領域２１０１０，２１０１１を作成し、更に右側の分割領域１０２２を左右２分割用のアイコン２０１１で２分割して分割領域２１０１２，２１０１３を作成することによって実現することができる。
図２１（ａ）のように分割した場合、画面分割の積層構造は同図（ｂ）に示すようなものとなる。
本発明において、相対画面分割を行い、それぞれの分割領域に入力部品等を配置する場合、（１）必要な相対画面分割領域を全て作成した後、それぞれの分割階層を１つずつ呼び出して部品を配置する方法、（２）「部品を置いて下さい」というメッセージが画面編集ウインドウ２０３のツリービューウインドウ２０３１に表示されている状態で、そのメッセージの階層位置にレイアウト用のアイコンを移して画面を再分割し、その再分割した領域に部品を配置する方法がある。本発明ではいずれの方法を用いてもよい。
【００１９】
図２２〜図２３は、上記（２）の方法を用いて相対画面分割しながら部品を配置する場合の操作手順を示すものである。
すなわち、図１２のように上下分割した相対分割領域の上側の領域にビットマップ部品を配置した後、下側の領域を左右方向に再分割し、その再分割領域にリスト部品を配置する場合、図２２に示すように、画面編集ウインドウ２０３のツリービューウインドウ２０３１に表示されている下側の相対分割領域の「部品を置いて下さい」のメッセージ表示位置に、左右方向に相対２分割するアイコン２０１１をドラッグアンドドロップする操作を行う。
すると、図２３に示すように、画面編集ウインドウ２０３のツリービューウインドウ２０３１に再分割された画面の積層構造が表示され、それぞれの再分割領域に「部品を置いて下さい」というメッセージが表示される。そこで、必要な部品を再配置する。
【００２０】
次に、画面作成エディタ１０７１の処理の詳細について図２４〜図３１のフローチャートを参照して説明する。
以下では、次の４つの処理に関するフローチャートを参照して説明する。
（１）レイアウトを作成した時に、内部データが作成され、プレビューウインドウとツリービューウインドウに反映されるまでの処理、
（２）部品を画面に配置した時に、内部データが作成されプレビューウインドウとツリービューウインドウに反映されるまでの処理、
（３）画面編集ウインドウから部品編集ウインドウへ部品をドラッグアンドドロップ操作で移動させ、画面の一部だけを編集するときの内部データの変更処理とツリービューウインドウとプレビューウインドウへの反映の処理、
（４）部品編集ウインドウから画面編集ウインドウへ部品をドラッグアンドドロップして編集していた部品を画面に反映させたときの内部データの変更処理とツリービューウインドウとプレビューウインドウへの反映の処理、
【００２１】
図２４は、レイアウトを作成した時に、内部データが作成され、プレビューウインドウとツリービューウインドウに反映されるまでの処理手順を示すフローチャートである。
図２４において、まず、レイアウトウインドウ２０１から画面編集ウインドウ２０３へレイアウト用のアイコンをドラッグアンドドロップする（ステップ２４０１）。
次に、変数curDragにドラッグしたレイアウトのレイアウトNoを設定し、更に変数curDropにドロップした部品(もしくはレイアウト)の親部品Noを設定する（ステップ２４０２）。
そして、画面構造テーブル１０６４にレコードを1件追加する（ステップ２４０３）。この場合、確保したテーブルをcurTableとする。
次に、curTableの部品名として画面内で一意なIDを設定し、更に部品種別として”レイアウト”、レイアウトNoとしてcurDrag、親の部品NoとしてcurDropをそれぞれ設定する（ステップ２４０４）。
次に、画面編集ウインドウ２０３のツリービューウインドウ２０３１に追加したレイアウトを追加表示する（ステップ２４０５）。
次に、curDrop(親部品)がレイアウト用の部品であるかを判定し（ステップ２４０６）、そうであれば、親の画面領域は、すでに分割されているので、今回のレイアウト配置で、親のレイアウトが分割した領域の片側を更に分割する。すなわち、プレビューウインドウ２０３２上で、すでに分割されている親の画面領域の片側を更に分割し、分割した領域の境界を点線で区切る（ステップ２４０７）。
しかし、curDrop(親部品)がレイアウト用の部品でなかった場合には、親部品領域は分割されていない。このため、プレビューウインドウ２０３２上で、親画面領域を分割し、境界を点線で区切る（ステップ２４０８）。
次に、分割した領域上に「部品を置いて下さい。」というメッセージを表示する（ステップ２４０９）。
以上により、レイアウト配置処理が終了する。
【００２２】
図２５は、部品を画面に配置した時に、内部データが作成されプレビューウインドウとツリービューウインドウに反映されるまでの処理手順を示すフローチャートである。
図２５において、まず、部品ウインドウ２０２から画面編集ウインドウ２０３へ、必要な部品をドラッグアンドドロップする（ステップ２５０１）。
そして、変数curDragにドラッグした部品の部品Noを設定し、また変数curDropにドロップされた部品(もしくはレイアウト)の部品Noを設定する（ステップ２５０２）。この場合、“部品を置いてください”というところへドロップした場合は、その親の部品Noを設定する。
次に、画面構造テーブル１０６４にレコードを１件追加する（ステップ２５０３）。ここでは、確保したテーブルをcurTableとする。
次に、curTableの部品名に画面内で一意なIDを設定し、また部品種別に”部品”、レイアウトNoにcurDrag、親ノードの部品NoにcurDropを設定する（ステップ２５０４）。
次に、画面編集ウインドウ２０３のツリービューウインドウ２０３１に、追加した部品を追加表示する（ステップ２５０５）。
次に、プレビューウインドウ２０３２の部品を配置する階層位置に表示されている「ドラッグアンドドロップして下さい」というメッセージを削除し、ステップ２５０１でドラッグアンドドロップした部品をプレビューウインドウ２０３２に表示する（ステップ２５０６）。
【００２３】
図２６は、画面編集ウインドウから部品編集ウインドウへ部品をドラッグアンドドロップ操作で移動させ、部品の一部だけを編集するときの内部データの変更処理とツリービューとプレビュー画面への反映の処理手順を示すフローチャートである。
図２６において、まず、画面編集ウインドウ２０３のツリービュー２０３１に表示されている１つの画面分割階層をドラッグし、部品編集ウインドウ２０４のツリービューウインドウ２０４１上にドロップする（ステップ２６０１）。
次に、変数curDragにドラッグした部品の(画面構造テーブル上の)部品Noを設定し（ステップ２６０２）、部品編集ウインドウのツリービューウインドウ２０３１が空かどうかを判定する（ステップ２６０３）。
空であった場合には終了する。
しかし、空でなかった場合には、変数curDragのレコードを部品構造テーブル１０６５へ移動する。また、curDragの親部品Noの子部品数を１減らし、該当する子部品Noを削除する（ステップ２６０４）。
次に、変数curDragの子部品数が「０」であるかを判定し（ステップ２６０５）、「０」であればステップ２６０９に進む。
「０」でなかった場合、ステップ２６０６〜２６０８のループ（１）の処理を行う。すなわち、変数curDragの全ての子部品に対してmove_record(子部品No.)関数の処理を行う(ステップ２６０７)。
このループ（１）の処理については図２７に詳細に示している。
次に、画面編集ウインドウ２０３のプレビューウインドウ２０３２を再描画する（ステップ２６０９）。具体的には、preview_draw(画面rootの情報を持つレコード)関数の呼び出しを行う。このpreview_draw関数については、図２８に詳細に示している。
次に、部品編集ウインドウ２０３のプレビューウインドウ２０４２を再描画する（ステップ２６１０）。具体的には、preview_draw(curDrag)関数の呼び出しを行う。
【００２４】
図２７は、図２６のステップ２６０７のmove_record(子部品No.)関数の処理の詳細を示すフローチャートである。
図２７において、画面構造テーブル１０６４から部品Noのレコードを検索する（ステップ２７０１）。詳しくは、work_record＝検索の結果見つかったレコードとした後（ステップ２７０１）、検索したレコードが見つかったかを判定し（ステップ２７０２）、見つからなかった場合には処理を終了する。
見つかった場合には、work_recordのテーブルを部品構造テーブル１０６５へ移動する（ステップ２７０３）。
次に、work_recordの子部品数が「０」であるかを判定し（ステップ２７０４）、「０」であれば処理を終了する。
「０」でなかった場合には、ステップ２７０５〜２７０７のループ（２）の処理を行う。
すなわち、work_recordの全ての子部品に対してmove_record(work_record.子部品No.)関数の処理を行う（ステップ２７０６）。
【００２５】
図２８は、図２６のステップ２６０９、２６１０のmove_record(子部品No.)関数の処理の詳細を示すフローチャートである。
図２８において、まず、部品Noのレコード情報を元に、部品(レイアウト)を表示する（ステップ２８０１）。
次に、その部品Noの子部品数が「０」かどうかを判定し（ステップ２８０２）、「０」であった場合には処理を終了する。
「０」でなかった場合には、ステップ２８０３〜２８０５のループ（３）の処理を行う。
すなわち、部品Noの全ての子部品に対して、preview_draw(部品No.子部品No.)関数の処理を行う（ステップ２８０４）。
【００２６】
図２９は、部品編集ウインドウ２０４から画面編集ウインドウ２０３へ部品をドラッグアンドドロップして編集していた部品を画面に反映させたときの内部データの変更処理とツリービューウインドウ２０３１とプレビューウインドウ２０３２への反映の処理を示すフローチャートである。
図２９において、まず、部品編集ウインドウ２０４のツリービューウインドウ２０４１の表示されている編集後の部品をドラッグし、画面編集ウインドウ２０３のツリービューウインドウ２０３１上にドロップする（ステップ２９０１）。
次に、curDragにドラッグした部品の(部品テーブル上の)部品Noを設定した後（ステップ２９０２）、ドロップ先の部品(レイアウト)上に部品の配置が可能かどうかを判定する（ステップ２９０３）。配置可能でなければ、処理を終了する。
配置可能であった場合には、curDragのレコードを部品構造テーブル１０６５へ移動する。そして、curDragの親部品No.および子部品数を１つ減らし、該当する子部品Noを削除する（ステップ２９０４）。
次に、curDragの子部品数が「０」かどうかを判定し、「０」であればステップ２９０９に進む（ステップ２９０５）。
curDragの子部品数が「０」でなかった場合、ステップ２９０６〜２９０８において、ループ（４）の処理をcurDragの全ての子部品に対して行う。すなわち、curDragの全ての子部品に対して図３０に詳細に示すadd_record(子部品No.)関数の処理を行う。
次に、画面編集ウインドウ２０３のプレビューウインドウ２０３２を再描画する。具体的には、図３１に詳細を示すpreview_draw(画面ｔｏｐの情報を持つレコード)関数の呼び出しを行う（ステップ２９０９）。
次に、部品編集ウインドウ２０４のプレビューウインドウ２０４２を再描画する。具体的には、図３１のpreview_draw(curDrag)関数の呼び出しを行う（ステップ２９１０）。
【００２７】
図３０のadd_record(子部品No.)関数の処理においては、検索の結果見つかったレコードを一時記憶する領域work_recordを確保した後、部品テーブル１０６３から部品Noのレコードを検索する（ステップ３００１）。
そして、検索したレコードが見つかったか否かを判定し（ステップ３００２）、見つからなかった場合には処理を終了する。
見つかった場合には、work_recordのテーブルを画面構造テーブル（１０６４）へ移動する（ステップ３００３）。
そして、work_recordの子部品数が「０」であるかを判定し（ステップ３００４）、「０」であった場合には処理を終了する。
「０」であった場合には、ステップ３００５〜３００７において、work_recordの全ての子部品に対してループ（５）の処理を行う。すなわち、work_recordの全ての子部品に対してadd_record(work_record.子部品No.)関数の処理を行う（ステップ３００６）。
【００２８】
図３１に示すpreview_draw(部品No)関数の処理では、部品Noのレコード情報を元に、部品(レイアウト)を表示する（ステップ３１０１）。
次に、部品Noの子部品数が「０」であるかを判定し（ステップ３１０２）、「０」であれば処理を終了する。
「０」でなければ、ステップ３１０３〜３１０５において、部品Noの全ての子部品に対してループ（６）の処理を行う。すなわち、部品Noの全ての子部品に対してpreview_draw(部品No.子部品No.)関数の処理を行う（ステップ３１０４）。
【図面の簡単な説明】
【００２９】
【図１】本発明の実施の形態を示すブロック構成図である。
【図２】画面レイアウト作成・変種画面の例を示す図である。
【図３】部品が応答するイベント情報を登録したイベントテーブルの構成を示す図である。
【図４】画面レイアウトの定義情報を格納したレイアウトテーブルの構成を示す図である。
【図５】部品の定義情報を格納した部品テーブルの構成を示す図である。
【図６】１つの画面を構成するレイアウトの種別や配置部品、各部品が応答するイベント情報を登録する画面構造テーブルと、各分割階層に配置した部品の情報を登録する部品構造テーブルの構成を示す図である。
【図７】図６のテーブルの登録内容に対応する画面の積層構造を示す図である。
【図８】各部品が応答するイベントの例を示す図である。
【図９】画面のレイアウトをレイアウト部品のドラッグアンドドロップ操作によって作成する段階の画面を示す図である。
【図１０】部品の配置を促すメッセージが表示された状態を示す図である。
【図１１】部品をドラッグアンドドロップ操作によって配置する段階の画面を示す図である。
【図１２】配置された部品がプレビュー表示された状態を示す図である。
【図１３】レイアウトの残りの領域に、部品をドラッグアンドドロップ操作によって配置する段階の画面を示す図である。
【図１４】画面分割の積層構造を示す図である。
【図１５】配置した部品を部品編集ウインドウへ移動して編集する段階の画面を示す図である。
【図１６】部品編集ウインドウへ部品を移動した状態を示す図である。
【図１７】部品編集ウインドウのプレビューウインドウに編集された部品が表示された状態を示す図である。
【図１８】編集後の部品を画面編集ウインドウのツリービューウインドウに移動する状態を示す図である。
【図１９】画面編集ウインドウのツリービューウインドウに編集後の部品を移動した状態を示す図である。
【図２０】レイアウト部品の他の例を示す図である。
【図２１】複数のレイアウト部品を組み合わせて所望のレイアウトを作成する例を示す図である。
【図２２】階層分割しながら画面を作成する場合の画面を示す図である。
【図２３】階層分割した階層に部品の配置を促すメッセージが表示された状態を示す図である。
【図２４】画面レイアウトの選択操作および部品配置操作に応答して画面構造テーブル等を作成する画面作成エディタのレイアウト配置処理の概要を示すフローチャートである。
【図２５】画面作成エディタの部品配置処理の概要を示すフローチャートである。
【図２６】部品作成エディタの部品編集処理の概要を示すフローチャートである。
【図２７】図２６における関数move_recordの詳細を示すである。
【図２８】図２６における関数preview_drawの詳細を示すである。
【図２９】編集後の部品を画面編集ウインドウへ戻す場合の処理を示すフローチャートである。
【図３０】図２９における関数add_recordの詳細を示すである。
【図３１】図２９における関数preview_drawの詳細を示すである。
【符号の説明】
【００３０】
１０３  表示装置
１０４    メモリ
１０５    ＣＰＵ
２０１    レイアウトウインドウ
２０２    部品ウインドウ
２０３    画面編集ウインドウ
２０４    部品編集ウインドウ
１０６１    イベントテーブル
１０６２    レイアウトテーブル
１０６３    部品テーブル
１０６４    画面構造テーブル
１０６５    部品構造テーブル
１０７１    画面作成エディタ
１０７２    部品作成エディタ
２０１１    レイアウト用のアイコン
２０２１    ビットマップ部品
【図１】
2006139583.tif 000003
【図２】
2006139583.tif 000004
【図３】
2006139583.tif 000005
【図４】
2006139583.tif 000006
【図５】
2006139583.tif 000007
【図６】
2006139583.tif 000008
【図７】
2006139583.tif 000009
【図８】
2006139583.tif 000010
【図９】
2006139583.tif 000011
【図１０】
2006139583.tif 000012
【図１１】
2006139583.tif 000013
【図１２】
2006139583.tif 000014
【図１３】
2006139583.tif 000015
【図１４】
2006139583.tif 000016
【図１５】
2006139583.tif 000017
【図１６】
2006139583.tif 000018
【図１７】
2006139583.tif 000019
【図１８】
2006139583.tif 000020
【図１９】
2006139583.tif 000021
【図２０】
2006139583.tif 000022
【図２１】
2006139583.tif 000023
【図２２】
2006139583.tif 000024
【図２３】
2006139583.tif 000025
【図２４】
2006139583.tif 000026
【図２５】
2006139583.tif 000027
【図２６】
2006139583.tif 000028
【図２７】
2006139583.tif 000029
【図２８】
2006139583.tif 000030
【図２９】
2006139583.tif 000031
【図３０】
2006139583.tif 000032
【図３１】
2006139583.tif 000033