JP4814801B2 - 表示画面構成装置 - Google Patents
表示画面構成装置 Download PDFInfo
- Publication number
- JP4814801B2 JP4814801B2 JP2007002864A JP2007002864A JP4814801B2 JP 4814801 B2 JP4814801 B2 JP 4814801B2 JP 2007002864 A JP2007002864 A JP 2007002864A JP 2007002864 A JP2007002864 A JP 2007002864A JP 4814801 B2 JP4814801 B2 JP 4814801B2
- Authority
- JP
- Japan
- Prior art keywords
- screen
- functional
- component
- event
- read
- 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
Links
- 230000006870 function Effects 0.000 description 38
- 238000000034 method Methods 0.000 description 28
- 238000010586 diagram Methods 0.000 description 8
- 230000007246 mechanism Effects 0.000 description 4
- 239000008186 active pharmaceutical agent Substances 0.000 description 1
- 230000000903 blocking effect Effects 0.000 description 1
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F9/00—Arrangements for program control, e.g. control units
- G06F9/06—Arrangements for program control, e.g. control units using stored programs, i.e. using an internal store of processing equipment to receive or retain programs
- G06F9/44—Arrangements for executing specific programs
- G06F9/451—Execution arrangements for user interfaces
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
- G06F16/90—Details of database functions independent of the retrieved data types
- G06F16/95—Retrieval from the web
- G06F16/957—Browsing optimisation, e.g. caching or content distillation
Landscapes
- Engineering & Computer Science (AREA)
- Theoretical Computer Science (AREA)
- Software Systems (AREA)
- Physics & Mathematics (AREA)
- General Engineering & Computer Science (AREA)
- General Physics & Mathematics (AREA)
- Databases & Information Systems (AREA)
- Human Computer Interaction (AREA)
- Data Mining & Analysis (AREA)
- User Interface Of Digital Computer (AREA)
- Stored Programmes (AREA)
Description
図11は、画面部品を表示するための初期化時の動作を説明する図である。ブラウザには、フレームワーク11という、HTMLを読み込み、解析し、解析内容にしたがって処理を実行するプログラムが読み込まれる。フレームワーク11のHTML読み込み器13は、ウェブページなどに記載されたHTML画面部品タグ10を読み込み、HTML解析器14に渡す。HTML解析器14は、読み込まれたHTML画面部品タグを解析し、解析内容に従った画面を表示するためのプログラムである画面部品の作成器15に画面部品の作成を依頼する。作成された画面部品12は、表示動作時に、機能付きの画面として、ブラウザ上に表示される。
本発明の実施形態では、「画面部品」と「機能部品」という2種類のコンポーネントを定義している。そして、画面部品と機能部品を接続することにより、所定の機能を持った画面を表示することが出来るようになる。
図3及び図4は、初期化時の動作を説明する図である。
図3において、JavaScript(登録商標)によるプログラムされたフレームワーク33がダウンロードした、画面部品タグ及び機能部品タグからなるHTML30を、HTML読み込み器34で読み込み、HTML解析器35でこれを解析する。解析内容に応じて、画面部品作成器36や機能部品作成器38が画面部品や機能部品を作成し、画面に表示する。画面部品作成器36が画面部品を作成する場合には、画面部品定義情報37を参照する。画面部品作成器36で作成された画面部品は、画面部品オブジェクト31として画面表示を行う。画面部品オブジェクト31は、HTML30の画面部品タグに対応して生成される。また、機能部品作成器38は、機能部品を作成する場合には、機能部品定義情報39を参照する。機能部品作成器38によって作成された機能部品は、機能部品オブジェクト32となって、画面部品が表示する画面上で発生したイベントに基づいて所定の処理を施す。機能部品オブジェクト32は、HTML30の機能部品タグに対応して生成される。画面部品オブジェクト31へは、機能部品オブジェクト32の登録が行われる。すなわち、画面部品オブジェクト31が表示する画面のどの部分に機能部品オブジェクト32が提供する機能を付加するかの登録を行う。この登録により、画面部品オブジェクト31と機能部品オブジェクト32が関連付けられ、所定の機能を持った画面の表示を行うことが出来るようになる。
<script src=”rcf.js”></script>
フレームワーク33は、複数のスクリプトのファイルで構成されるかもしれないが、rcf.jsがその他のファイルを自動的に読み込むため、ユーザが記述しなければいけないのは上記のrcf.jsの読込みの指示だけである。HTMLの読込みが終了すると、フレームワーク33の動作が開始する。フレームワーク33は、まず、HTMLの解析を行う。そして、HTML内に記述されているタグに応じて、画面部品や機能部品を作成する。
画面部品の例
<span rcf:id="zip" rcf:type="TextInput" rcf:value="1234567"></span>
機能部品の例
<div rcf:id="limiter" rcf:type="NumeralsOnlyLimiter" rcf:target="zip"></div>
ここで、共通に使われる属性として、次のものがある。
rcf:id
部品の固有IDを示す。ほかの部品からこの部品を指し示したりする場合に利用する。
rcf:type
部品の種類を示す。この種類を示す文字列により、記述されているものがどの部品なのかが決まる。
上記の例では、それぞれの部品は以下のような意味を持つ
画面部品は、”zip”というIDを持つ”TextInput”部品(文字列入力部品)で、初期表示の値は”1234567”である。
HTML解析器35は、それぞれの部品に記述されているrcf:type属性の値に従って、対応する部品を画面部品定義37や機能部品定義39のリポジトリから読み出す。そして、その部品のオブジェクト31、32を作成する。
画面部品の例
<span rcf:id="zip" rcf:type="TextInput" rcf:value="1234567" target=”limiter”></span>
機能部品の例
<div rcf:id="limiter" rcf:type="NumeralsOnlyLimiter"></div>
画面部品と機能部品の登録の向きが逆になるだけで、あとは同じ方法で初期化、及び、動作できるため、今後は最初に示した「機能部品が画面部品を指す」という前提で説明を行う
機能部品が作成されたら、この機能部品オブジェクト32は、対象とする画面部品オブジェクト31に対して自分自身を登録する。これにより、動作時に画面部品オブジェクト31がどの機能部品オブジェクト32に対してイベントを通知すべきかを判断することができる。登録の仕組みは、2種類ある。
了である。
図4は、初期化動作時の処理フローである。
動作時は、下図のような手順で実行される。
機能部品は「数値のみを入力する」だけにとどまらず、さまざまなものが実現できる。具体的な機能部品のプログラミング方法は、当業者によれば容易に理解されるであろう。
・数値のみ入力可、全角文字のみ入力可など
・マスク入力(「平成__年__月__日」など空白部分を入力させる)
・入力値のチェック
・対象部品をドラッグ&ドロップ可能にする
・入力の自動補完(入力内容に対する候補を表示)
・入力値の自動フォーマット(1000と入力したら「¥1,000」と表示させるなど)
・カーソルの自動脱出やフォーカスの自動変更
・その他画面部品のデフォルトの動作のカスタマイズ
ポイントは、ブラウザ内部から発生したイベント、すなわち画面部品が受信したイベントを機能部品につたえ、機能部品がそれもとに画面部品を操作したり改変したりできるよ
うになっていることである。
図6(a)において、ステップS20で、ブラウザ内で、イベントが発生した場合には、ステップS21において、画面部品でイベントを受信する。ステップS22において、受信したイベントに機能が付加されているか、すなわち、当該イベントに対して、所定の機能により、処理を行う必要があるか否かが判断される。ステップS22の判断がNoの場合には、ステップS24に進む。ステップS22の判断がYesの場合には、ステップS23において、機能部品を呼び出し、処理を行って、ステップS24において、イベントに対する動作を行い、処理を終了する。
ステップS25において、イベントを解析し、ステップS26において、テキストフィールドへの入力制限を行う必要があるか否かを判断する。ステップS26の判断がNoの場合には、ステップS28に進む。ステップS26の判断がYesの場合には、ステップS27において、イベントの中身を操作する。たとえば、画面部品の操作などを行う。そして、ステップS28において、イベントを画面部品に返却し、処理を終了する。なお、ステップS26、S27は、テキストフィールドへの入力制限を行う機能を例にとって説明したが、これらのステップは、機能部品が持っている機能の内容によって、機能部品ごとに異なる処理となる。
まず、ステップS30とステップS41の間のループで、画面部品と機能部品を作成する。まず、ステップS31において、HTML文の記述の要素をとってくる。ステップS32において、取ってきた要素が、divか、あるいは、spanかを判断する。ステップS32の判断がNoの場合には、ステップS41に進む。ステップS32の判断がYesであった場合には、ステップS33において、前述のような画面部品、あるいは、機能部品の記述文のtype属性を取得する。ステップS34において、取得したtype属性が画面部品定義に存在するか否かを判断する。ステップS34の判断がYesの場合には、ステップS35において、画面部品を作成する。前述の例では、テキスト入力フィールドであるTextInputの画面部品が作成される。そして、ステップS36において、画面部品を所定の記憶領域(ここでは、「画面部品保管庫」とする)に保存し、ステップS41に進む。ステップS34の判断がNoの場合には、ステップS37において、ステップS33で取得されたtype属性が機能部品定義に存在するか否かを判断する。ステップS37の判断がNoの場合には、ステップS40において、エラー表示してステップS41に進む。ステップS37の判断がYesの場合には、ステップS38において、機能部品を作成する。前述の例では、ここでは、入力文字列を数値のみに限定するNumericalOnlyLimiterが作成される。そして、ステップS39において、機能部品を所定の記憶領域(ここでは、「機能部品保管庫」とする)に保存し、ステップS41に進む。
図8は、全体の動作を示す。まず、ステップS50において、HTML DOMでイベントが発生したことが検出されると、ステップS51において、画面部品がイベントを受信する。次に、ステップS52とステップS54のループで、画面部品に登録されている機能部品の呼び出し動作を行うステップS53を実行する。画面部品に登録されている全ての機能部品の処理が終わると、ループを抜けて、ステップS55において、イベントに対するデフォルトの動作を行い、処理を終了する。
11 フレームワーク
12 画面部品(機能付き)
13 HTML読み込み器
14 HTML解析器
15 画面部品作成器
20 HTML DOM(ブラウザ内部)
21 画面部品
22 イベント解析部
23 画面部品操作部
24 画面操作ライブラリ
30 HTML(画面部品タグ、機能部品タグ)
31 画面部品オブジェクト
32 機能部品オブジェクト
34 HTML読み込み器
35 HTML解析器
36 画面部品作成器
37 画面部品定義
38 機能部品作成器
39 機能部品定義
45 画面部品
46 イベント受信部
47 画面部品操作部
48 機能部品
49 イベント解析部
50 イベント操作部
51 画面部品操作部
52 イベント返却部
Claims (2)
- 表示画面を構成するための表示画面構成装置としてコンピュータを機能させるウェブブラウザであって、
対象のHTML文に記述されている全てのtype属性から、読み出した記述要素が画面部品の記述要素または機能部品の記述要素のtype属性であるかを判断し、該type属性が、画面部品をリポジトリに保持する画面部品定義情報に記述されている場合には画面部品を該画面部品定義情報のリポジトリから読み出し、該type属性が、機能部品をリポジトリに保持する機能部品定義情報に記述されている場合には機能部品を該機能部品定義情報のリポジトリから読み出し、読み出された該画面部品または該機能部品から画面部品オブジェクトあるいは機能部品オブジェクトを生成して記憶領域に保存する手段と、
前記記憶領域に保存された全ての機能部品オブジェクトについて、該機能部品オブジェクトの記述要素に含まれるtarget属性により指定されるIDを有する画面部品オブジェクトが該記憶領域に存在する場合に、該機能部品オブジェクトを該画面部品オブジェクトに登録する手段と、
前記記憶領域に保存された一の画面部品オブジェクトがイベントを受信した場合に、該画面部品オブジェクトに登録されている全ての機能部品オブジェクトの呼び出しを順次行なう手段と、
呼び出された前記機能部品オブジェクトを前記記憶領域から読み出し、前記イベントが各機能部品オブジェクトの対象イベントか否かを判定し、処理対象イベントであると判定された場合にのみ前記一の画面部品オブジェクトの表示内容を前記読み出された機能部品オブジェクトが取得し、前記読み出された機能部品オブジェクトが該イベントに対応する操作を該表示内容に対して行なう手段と、
として前記コンピュータを機能させるウェブブラウザ。 - 対象のHTML文に記述されている全てのtype属性から、読み出した記述要素が画面部品の記述要素または機能部品の記述要素のtype属性であるか判断し、該type属性が、画面部品をリポジトリに保持する画面部品定義情報に記述されている場合には画面部品を該画面部品定義情報のリポジトリから読み出し、該type属性が、機能部品をリポジトリに保持する機能部品定義情報に記述されている場合には機能部品を該機能部品定義情報のリポジトリから読み出し、読み出された該画面部品または該機能部品から画面部品オブジェクトあるいは機能部品オブジェクトを生成して記憶領域に保存する手段と、
前記記憶領域に保存された全ての機能部品オブジェクトについて、該機能部品オブジェクトの記述要素に含まれるtarget属性により指定されるIDを有する画面部品オブジェクトが該記憶領域に存在する場合に、該機能部品オブジェクトを該画面部品オブジェクトに登録する手段と、
前記記憶領域に保存された一の画面部品オブジェクトがイベントを受信した場合に、該画面部品オブジェクトに登録されている全ての機能部品オブジェクトの呼び出しを順次行なう手段と、
呼び出された前記機能部品オブジェクトを前記記憶領域から読み出し、前記イベントが各機能部品オブジェクトの処理対象イベントか否かを判定し、処理対象イベントであると判定された場合にのみ前記一の画面部品オブジェクトの表示内容を前記読み出された機能部品オブジェクトが取得し、前記読み出された機能部品オブジェクトが該イベントに対応する操作を該表示内容に対して行う手段と、
を備えることを特徴とするウェブブラウザ装置。
Priority Applications (2)
Application Number | Priority Date | Filing Date | Title |
---|---|---|---|
JP2007002864A JP4814801B2 (ja) | 2007-01-10 | 2007-01-10 | 表示画面構成装置 |
US11/970,931 US8078987B2 (en) | 2007-01-10 | 2008-01-08 | Display screen generating apparatus |
Applications Claiming Priority (1)
Application Number | Priority Date | Filing Date | Title |
---|---|---|---|
JP2007002864A JP4814801B2 (ja) | 2007-01-10 | 2007-01-10 | 表示画面構成装置 |
Publications (2)
Publication Number | Publication Date |
---|---|
JP2008171151A JP2008171151A (ja) | 2008-07-24 |
JP4814801B2 true JP4814801B2 (ja) | 2011-11-16 |
Family
ID=39669370
Family Applications (1)
Application Number | Title | Priority Date | Filing Date |
---|---|---|---|
JP2007002864A Expired - Fee Related JP4814801B2 (ja) | 2007-01-10 | 2007-01-10 | 表示画面構成装置 |
Country Status (2)
Country | Link |
---|---|
US (1) | US8078987B2 (ja) |
JP (1) | JP4814801B2 (ja) |
Families Citing this family (5)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
JP5312103B2 (ja) * | 2009-03-06 | 2013-10-09 | 三菱電機株式会社 | 画面表示プログラム生成装置及び画面表示システム及びコンピュータプログラム及び画面表示プログラム生成方法 |
JP2011003135A (ja) * | 2009-06-22 | 2011-01-06 | Nec System Technologies Ltd | 画面業務システム、画面業務システム構築方法およびプログラム |
JP6470136B2 (ja) * | 2015-07-15 | 2019-02-13 | オリンパス株式会社 | 画面イメージ生成装置 |
JP6514084B2 (ja) * | 2015-10-05 | 2019-05-15 | 日本電信電話株式会社 | 操作支援システム、操作支援方法、および、操作支援プログラム |
CN106502540B (zh) * | 2016-10-26 | 2020-02-25 | 北京奇虎科技有限公司 | 利用浮窗在主应用界面中进行功能定制的方法及装置 |
Family Cites Families (11)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
JPH04238534A (ja) * | 1991-01-23 | 1992-08-26 | Hitachi Ltd | 項目単位型画面入出力制御方式 |
JP2002024020A (ja) * | 2000-05-01 | 2002-01-25 | Toshiba Corp | 画面制御プログラム、動的表示情報取得プログラム、画面表示トランザクションプログラム、画面コンポーネントインタフェースプログラム、画面プログラム作成方法 |
US6556222B1 (en) * | 2000-06-30 | 2003-04-29 | International Business Machines Corporation | Bezel based input mechanism and user interface for a smart watch |
US6704024B2 (en) * | 2000-08-07 | 2004-03-09 | Zframe, Inc. | Visual content browsing using rasterized representations |
JP2002215394A (ja) | 2000-08-15 | 2002-08-02 | Fujitsu Ltd | Webアプリケーション開発・実行システム及びWebアプリケーション生成装置 |
JP4490026B2 (ja) * | 2002-01-28 | 2010-06-23 | 日立オムロンターミナルソリューションズ株式会社 | カスタマイズ可能な情報処理装置 |
JP3755500B2 (ja) * | 2002-09-06 | 2006-03-15 | ソニー株式会社 | Guiアプリケーション開発支援装置および方法、並びにコンピュータ・プログラム |
JP2004318848A (ja) * | 2003-03-28 | 2004-11-11 | Daiwa Securities Group Inc | 画面自動生成装置、画面自動生成方法、画面自動生成プログラム、記録媒体、実行装置、ファイル編集装置、ファイル編集方法およびファイル編集プログラム |
JP2004342061A (ja) * | 2003-05-16 | 2004-12-02 | Iyo Techno:Kk | 画面とコンポーネント間のリンクを使用したウェブアプリケーションの開発方法および開発支援装置 |
WO2006038779A1 (en) * | 2004-10-01 | 2006-04-13 | Samsung Electronics Co., Ltd. | Device and method for displaying event in wireless terminal |
US20090171910A1 (en) * | 2005-12-01 | 2009-07-02 | Shahriar Sarkeshik | Data exchange system |
-
2007
- 2007-01-10 JP JP2007002864A patent/JP4814801B2/ja not_active Expired - Fee Related
-
2008
- 2008-01-08 US US11/970,931 patent/US8078987B2/en not_active Expired - Fee Related
Also Published As
Publication number | Publication date |
---|---|
US20080184144A1 (en) | 2008-07-31 |
JP2008171151A (ja) | 2008-07-24 |
US8078987B2 (en) | 2011-12-13 |
Similar Documents
Publication | Publication Date | Title |
---|---|---|
US8095565B2 (en) | Metadata driven user interface | |
US8392886B2 (en) | System, program product, and methods to enable visual recording and editing of test automation scenarios for web application | |
US6990654B2 (en) | XML-based graphical user interface application development toolkit | |
US11366676B2 (en) | Embedded user assistance for software applications | |
US10637913B2 (en) | Mechanism for webpage composition | |
Nelson | Getting to know Vue. js | |
JP4814801B2 (ja) | 表示画面構成装置 | |
US20130091418A1 (en) | Cross-browser toolbar and method thereof | |
CN112631580A (zh) | 数据处理方法、装置及计算设备 | |
US7730495B2 (en) | Declaratively defined control actions | |
Chiarelli | Beginning React: Simplify your frontend development workflow and enhance the user experience of your applications with React | |
Rojas | Building Progressive Web Applications with Vue. js: Reliable, Fast, and Engaging Apps with Vue. js | |
Himschoot | Microsoft Blazor | |
US20070046656A1 (en) | Display apparatus, display method, and storage medium storing display program | |
US20080172624A1 (en) | Display screen structuring apparatus | |
Joshi et al. | Angular | |
JP5537330B2 (ja) | 表示画面構成装置 | |
Thangaswamy | VSTO 3.0 for Office 2007 Programming | |
Hajian et al. | An app manifest and installable angular app | |
Van der Westhuizen | Bootstrap for ASP. NET MVC | |
Versluis et al. | Xamarin. Forms Solutions | |
Kromann et al. | Integrating jQuery and PHP | |
KC | Creating a new React based navigation for Frosmo Control Panel (FCP) | |
Obert et al. | Elementary: Fundamental Library Styles | |
Bartlett | Interacting with Web Pages |
Legal Events
Date | Code | Title | Description |
---|---|---|---|
A621 | Written request for application examination |
Free format text: JAPANESE INTERMEDIATE CODE: A621 Effective date: 20081205 |
|
A977 | Report on retrieval |
Free format text: JAPANESE INTERMEDIATE CODE: A971007 Effective date: 20090501 |
|
A131 | Notification of reasons for refusal |
Free format text: JAPANESE INTERMEDIATE CODE: A131 Effective date: 20090602 |
|
A521 | Request for written amendment filed |
Free format text: JAPANESE INTERMEDIATE CODE: A523 Effective date: 20090731 |
|
A131 | Notification of reasons for refusal |
Free format text: JAPANESE INTERMEDIATE CODE: A131 Effective date: 20100511 |
|
A521 | Request for written amendment filed |
Free format text: JAPANESE INTERMEDIATE CODE: A523 Effective date: 20100707 |
|
A02 | Decision of refusal |
Free format text: JAPANESE INTERMEDIATE CODE: A02 Effective date: 20110322 |
|
A521 | Request for written amendment filed |
Free format text: JAPANESE INTERMEDIATE CODE: A523 Effective date: 20110617 |
|
A911 | Transfer to examiner for re-examination before appeal (zenchi) |
Free format text: JAPANESE INTERMEDIATE CODE: A911 Effective date: 20110622 |
|
TRDD | Decision of grant or rejection written | ||
A01 | Written decision to grant a patent or to grant a registration (utility model) |
Free format text: JAPANESE INTERMEDIATE CODE: A01 Effective date: 20110823 |
|
A01 | Written decision to grant a patent or to grant a registration (utility model) |
Free format text: JAPANESE INTERMEDIATE CODE: A01 |
|
A61 | First payment of annual fees (during grant procedure) |
Free format text: JAPANESE INTERMEDIATE CODE: A61 Effective date: 20110826 |
|
R150 | Certificate of patent or registration of utility model |
Ref document number: 4814801 Country of ref document: JP Free format text: JAPANESE INTERMEDIATE CODE: R150 Free format text: JAPANESE INTERMEDIATE CODE: R150 |
|
FPAY | Renewal fee payment (event date is renewal date of database) |
Free format text: PAYMENT UNTIL: 20140902 Year of fee payment: 3 |
|
LAPS | Cancellation because of no payment of annual fees |