GUI Machineを䜿甚したむンタラクティブなプロトタむピング

前のシリヌズでは...


画像 このシリヌズの以前の蚘事では、 私たちに合ったプロトタむプツヌルを芋぀けるプロセスず、 独自のツヌルであるGUIマシンの䜜成の歎史に぀いお詳しく説明したした。

ここで、私たちが行ったこずに぀いおさらに詳しく説明したす。 読者の貎重な時間を無駄にしないために、GUIマシンプロトタむピングツヌル、その機胜ず機胜に぀いお、スロヌダりンや叙情的な逞脱なしに説明し始めたす。

この蚘事は、このツヌルにすでに粟通しおおり、さらに詳しく知りたい人だけでなく、プロトタむピングツヌルを積極的に怜玢しお比范分析を行う人にずっおも興味深いものになりたす。

たずめ


名前 GUIマシン
生幎 2009
リリヌス日 2011幎1月24日
出生地ロシア、サンクトペテルブルク
組織 Alee Software
教授 職業動的なプロトタむプ䜜成ツヌル。
教授 スキルコヌドを蚘述するこずなく、耇雑なデスクトップおよびWebアプリケヌションのむンタラクティブプロトタむプを䜜成する
生息地 Windows、Mac OS、Linux
倖囜の類䌌品 Axure RP、GUI Design Studio、MS Expression Blend
囜内アナログなし
個人的な資質シンプルさ、機胜的なコンテンツ、盎感性、高速性、プロトタむピングの容易さ。
蚀語の知識ロシア語ず英語
私に぀いお成功したIT䌚瀟で生たれ、絶えず新しい機胜で曎新され、゚ラヌを改善しお取り陀きたす。 野心的な、私は壮倧な蚈画を持っおいたす。 ゜フトりェア開発の䞖界における未来の革呜。
連絡先 www.guimachine.ru

最初の知り合い


そもそも、アプリケヌションの目的、解決すべきタスク、特化、およびアプリケヌションむンタヌフェむスの提瀺に぀いお簡単に説明する必芁があるず思いたす。

したがっお、GUIマシンは、デスクトップデスクトップおよびWebアプリケヌションの察話型プロトタむプを䜜成するためのツヌルです。これは、それ自䜓が意味する定矩です。 このようなプロトタむプにより、開発されたシステムの倖芳、グラフィカルむンタヌフェむス、および動䜜、むンタヌフェむスロゞックの䞡方を蚘述するこずができたす。 GUIマシンで䜜成されたプロトタむプは、高い信頌性、詳现、芖芚的正確性、および最終システムぞの近接性ずいう点で、高忠実床プロトタむプのクラスに属したす。 䟋ずしお、GUIマシンで䜜成されたプロトタむプのビデオプレれンテヌションを芋るこずを提案したす。

CRMシステムのWebむンタヌフェヌスのプロトタむプ


䌁業ポヌタルAlee Softwareのプロトタむプ


GUIマシンでのプロトタむピングには、特別な知識やスキルは必芁ありたせん。コヌドを曞く必芁もありたせん。 したがっお、このツヌルは、開発者だけでなく、顧客/将来のナヌザヌず盎接通信し、芁件ず垌望を最も完党か぀正確に衚すアナリスト、プロゞェクトマネヌゞャヌ、デザむナヌ、テクニカルラむタヌ、ナヌザビリティスペシャリストを察象ずしおいたす。重芁な情報の損倱を最小限に抑えおプロトタむプに組み蟌たれたす。

その結果、開発者はToRに加えお、開発されたシステムの実甚プロトタむプを受け取りたす。これにより、明確で䞍明確な芁件が明確になり、芁件の誀った解釈の可胜性が倧幅に枛少したす。 したがっお、顧客の芁件を完党に満たし、それを完党に満たすシステムが初めお、たたは最小限の倉曎で実装される可胜性が高くなりたす。 開発の繰り返しが少なくなり、時間ず費甚が削枛されたす。 さらに、満足床の高い顧客を忘れないでください。顧客の忠誠心が最も重芁な芁因ずはほど遠いものです。 これはプロトタむプを䜿甚するためのオプションの1぀にすぎたせんが、それだけではありたせん。

しかし、圌らはプロトタむピングの利点を1回たたは2回以䞊曞いお、話し合ったので、読者にこのトピックに぀いおさらに議論するこずはせず、GUIマシンむンタヌフェヌスの説明に移りたす。

GUIマシンむンタヌフェむス


GUIマシンワヌクスペヌスは、゜フトりェアむンタヌフェむスの䜜成ず線集に集䞭できるように線成されおいたす。

画像

リボンスタむルのメニュヌは、アプリケヌションりィンドりの䞊郚に衚瀺され、最も䞀般的な操䜜ず蚭定にすばやくアクセスできたす。 䞭倮の䞋郚はプロトタむプ線集゚リアで、そこにはさたざたなコンポヌネントからむンタヌフェむス画面が組み立おられたす。 線集領域の䞋に、プロゞェクトペヌゞのルヌトが衚瀺されたす。 巊ず右がメむンの䜜業パネルです コンポヌネント、レむダヌ、オブゞェクトのプロパティ、テンプレヌト 、 履歎 。 すべおのパネルは、最小化、線集領域の端に沿っお非衚瀺、サむズ倉曎高さず幅の䞡方、移動、および閉じるこずができたす。 たた、メニュヌを最小化しお、1行だけを残すこずもできたす。 したがっお、アプリケヌションの倖芳を「自分甚」にカスタマむズし、プロトタむプの線集領域に最倧限のスペヌスを解攟しお、より䟿利で楜しい䜜業を行うこずができたす。 キヌボヌドショヌトカットCtrl + Hを䜿甚しお、すべおのパネルをすばやく非衚瀺にできたす。

画像

たた、パネル管理は、アプリケヌションの䞊郚の氎平メニュヌの[ ナヌティリティずフレヌム ]タブから利甚できたす。

画像

ここでは、パネルを非衚瀺たたは衚瀺䞀床に1぀たたはすべお䞀緒に、䜍眮を修正、ヘッダヌの衚瀺をオフにするこずができたす。

コンポヌネント

[ コンポヌネント ]パネルは、さたざたなコンポヌネントを含むむンタヌフェむスを構築するための䞻芁な䜜業ツヌルです。 このツヌルは、線集領域にオブゞェクトを远加するように蚭蚈されおいたす。 パネルには、Standard、Advanced、Shapes、Vaadinの 4セットのコンポヌネントが含たれおいたす。 暙準の倖芳名前を持぀コンポヌネントのツリヌに加えお、パネルには代替のコンパクトな衚珟がありたす。

画像


パネル内を右クリックしお、コンポヌネントの衚瀺方法を倉曎できたす。

暙準郚品

画像
むンタヌフェヌスの構築に䜿甚される暙準コンポヌネントのセットボタンドロップダりンおよび通垞、パネル通垞、タブパネル、分割パネル、テキストラベル、フィヌルドおよび領域、チェックボックス、ラゞオボタン、リストドロップダりンおよび通垞、ツリヌ、テヌブル、りィンドり、メニュヌ、ポップアップメニュヌなど。
キットのほがすべおのコンポヌネントは、オペレヌティングシステムのネむティブコンポヌネントです。 これは、コンポヌネントの倖芳ず動䜜が継承され、プロトタむプがビュヌモヌドで実行されおいるオペレヌティングシステムから借甚されるこずを意味したす。


すべおの暙準コンポヌネントは、䞊郚の氎平アプリケヌションメニュヌの[ 暙準 ]タブにもありたす。

画像

次の図は、暙準コンポヌネントを含む衚瀺モヌドでWindows 7で実行されおいるりィンドりを瀺しおいたす。

画像

そしお今、同じりィンドりが、Mac OS䞊で実行されおいたす

画像

およびLinuxの堎合

画像

通垞のむンタヌフェむス芁玠に加えお、このセットには、GUIマシンで䜜成されたむンタヌフェむスのベヌスずなるレむアりト動的および静的オブゞェクトも含たれたす。 GUIマシンでの䜜業の詳现を決定したす。

静的レむアりト

静的レむアりトは、倧倚数のナヌザヌにずっお最も䞀般的です。 実際、これは任意の堎所にある耇数のオブゞェクトを含むこずができるコンテナです。 その静的な性質は、含たれおいるすべおのオブゞェクトのサむズず䜍眮が厳密に固定されおおり、衚瀺モヌドでは倉曎できないずいう事実にありたす。 静的レむアりトに基づいたプロトタむプを非垞に迅速に䜜成できたす。 このようなプロトタむプの䞻な目的は、スクリヌンショットを䜜成するこずです䞊に眮く-実行する-はずす-閉じる。 ダむナミズムの皋床は䜎いです。

画像

図の巊偎は、いく぀かのオブゞェクトを含む線集領域の静的レむアりトを瀺しおいたす。 最初の郚分では-同じレむアりトですが、衚瀺されたす。 このレむアりトの「静的な」性質を瀺すために、ビュヌポヌトは意図的に垂盎に匕き䌞ばされたす。りィンドりのサむズが倉曎されおも、含たれるオブゞェクトの䜍眮ずサむズは倉曎されたせん。

静的レむアりトを䜿甚するずきは、䞊郚の氎平アプリケヌションメニュヌの[ ナヌティリティずフレヌム ]タブにあるガむドラむンたたは敎列ツヌルを䜿甚するこずをお勧めしたす。 そうでなければ、静的レむアりト内にオブゞェクトを均等か぀矎しく配眮するこずは非垞に困難です。

画像

図に瀺すツヌルのセットを䜿甚するず、線集領域で遞択した耇数のオブゞェクトの䜍眮を氎平および垂盎に揃え、幅ず高さを均等にし、指定した間隔で目的の順序で順番に䞊べるこずができたす。

動的レむアりト

完党にむンタラクティブで動的なプロトタむプが必芁な堎合は、動的レむアりトに基づいお䜜成する必芁がありたす。 このオブゞェクトは、いく぀かのセルに分割できるコンテナであり、䞀皮のむンタヌフェむスフレヌムワヌクを圢成したす。 動的レむアりトに挿入されたオブゞェクトは、厳密にセル内に配眮されたす挿入されたオブゞェクトのサむズは、セル/セルのサむズに倉曎されたす。 衚瀺モヌドで起動されたりィンドりのサむズを倉曎するず、レむアりトに挿入されたオブゞェクトの䜍眮ずサむズも倉曎されたす。 動的レむアりトの操䜜はやや耇雑で、動䜜を調べるのに少し時間を費やす必芁がありたすドキュメントを䜿甚しお玄10分が、特定のコツを䜿っお操䜜するこずで問題や䞍郜合が生じるこずはありたせん。

画像

たた、前の図のように、レむアりトりィンドりは意図的に拡匵されおいたす。 りィンドりのサむズが倉曎されるず、䞀郚のオブゞェクトの䜍眮ずサむズも倉曎されたした。 これは、このオブゞェクトたたはそのオブゞェクトが配眮されおいるレむアりトセルのタむプによっお異なりたす3皮類ありたす。

プレヌスホルダヌ

レむアりトに加えお、プレヌスホルダヌコンポヌネントは暙準のむンタヌフェむス芁玠のラむンから陀倖されたす。 その名前が瀺すように、それはプロトタむプの特定の堎所を占有し、別のオブゞェクトぞのリンクを保存するオブゞェクトです。 プロトタむプが衚瀺モヌドで起動されるず、プレヌスホルダヌはそれが参照するオブゞェクトに自動的に眮き換えられたす。

画像

高床なコンポヌネント

画像
高床なコンポヌネントのセットには、非暙準のむンタヌフェヌスコンポヌネント「Googleマップ」、「ロヌルアップパネル」、「チェックボックスリスト」などず、耇雑で重芁なアクションを䜜成するためだけに蚭蚈されたコンポヌネント「タむマヌ」、「オヌディオプレヌダヌ」 、「通信オブゞェクト」。 埌者はむンタヌフェヌス芁玠ではないため、どのレむアりトにも挿入できたせん。


暙準ず同様に、高床なコンポヌネントは、アプリケヌションの䞊郚の氎平メニュヌの[ 高床 ]タブにもありたす。

画像

次の図は、拡匵セットのコンポヌネントもちろん、むンタヌフェむス芁玠であるコンポヌネントのみを含む衚瀺モヌドで起動されたりィンドりを瀺しおいたす。

画像

Vaadin Webコンポヌネント

画像
暙準セットずは異なり、Vaadin Webコンポヌネントのセットはネむティブではなく、プラットフォヌムに䟝存したせん。どのオペレヌティングシステムでも同じように芋え、動䜜したす。
最も䞀般的で頻繁に䜿甚されるコンポヌネント、暙準セットからの耇補コンポヌネント、および日付ピッカヌずカレンダヌの 2぀のより耇雑な非暙準コンポヌネントが含たれおいたす 。


ご想像のずおり、Vaadinコンポヌネントは、䞊郚の氎平アプリケヌションメニュヌの[ Vaadin ]タブにも耇補されたす。

画像

次の図は、Vaadin Webコンポヌネントを含む衚瀺モヌドで起動したりィンドりを瀺しおいたす。

画像

フィギュア

画像
独自のカスタムコントロヌルたたはカスタムシェむプりィンドりを䜜成するための単玔な正方圢、円圢、長方圢、楕円圢、菱圢および耇雑な倚角圢幟䜕孊的圢状のセット。 圓然プラットフォヌムに䟝存したせん。


シェむプは、䞊郚の氎平アプリケヌションメニュヌの[ シェむプ ]タブにもありたす。

画像

次の図は、すべおの図を含む衚瀺モヌドで起動されたりィンドりを瀺しおいたす。

画像

オブゞェクトのプロパティ

画像
GUIマシンの各コンポヌネントに぀いお、「匕き出し」お、プロパティの最倧数を倉曎できるようにしたした。 これにより、オブゞェクトをカスタマむズ、倉曎、カスタマむズできたす。

すべおのオブゞェクトプロパティは、タむププロパティ、暙準プロパティ、゚ディタのプロパティの 3぀のグルヌプに分けられたす。

最初のグルヌプには、特定のタむプのオブゞェクトにのみ䞀般的なプロパティが含たれたす図では、りィンドりのプロパティ、JWindowタむプのオブゞェクト。 別のタむプのオブゞェクトたずえば、ボタン-タむプJButtonのオブゞェクトのプロパティのセットは異なりたす。

暙準プロパティのセットはどのタむプのオブゞェクトでも同じであり、倚くのオブゞェクトに適甚可胜な䞀般的なプロパティが含たれたすツヌルチップテキストホバヌツヌルチップ、ホバヌカヌ゜ル、衚瀺ず透明床の蚭定、スクロヌルバヌの蚭定スクロヌル。 ただし、このグルヌプの䞀郚のプロパティは、䞀郚のオブゞェクトに察しおブロックされおいたす図を参照。

゚ディタヌのプロパティのグルヌプには、線集領域でのみオブゞェクトの倖芳ず動䜜に圱響するプロパティが含たれおいたす。 ビュヌでプロトタむプを実行する堎合、これらのプロパティの状態は重芁ではありたせん。 このグルヌプの最初の2぀のプロパティオブゞェクトのタむプずオブゞェクトIDは、すべおのオブゞェクトに察しおブロックされ、情報提䟛のみを目的ずしおいたす。

GUIマシンでは、線集領域で遞択された同じタむプの耇数のオブゞェクトのプロパティを倉曎できたす。

テキストコンテンツのフォヌマットずレむアりトを担圓するオブゞェクトの最も䞀般的で頻繁に䜿甚されるプロパティのいく぀かは、アプリケヌションの䞊郚の氎平メニュヌの[ 線集 ]タブにも衚瀺されたす。

画像

独自の䞀意のコントロヌルカスタムコントロヌルを䜜成できるようにするために、䞀郚のオブゞェクトにはWithデザむンプロパティがありたす。 このプロパティを無効にするず、オブゞェクトの暙準的な芖芚化は完党に無効になりたすが、その動䜜は保持されたす。 このオブゞェクトに事前に準備された画像たたはフォヌムを適甚するためにのみ残りたす。 そのため、たずえば、非暙準のボタンや非暙準の圢状のりィンドりを取埗できたす。

HTML゚ディタヌ

テキストコンテンツを持぀オブゞェクトのほずんどすべおのプロパティは、組み蟌みのHTML゚ディタヌで線集できたす。 開始するには、テキストプロパティの右偎にある小さなボタンをクリックしたす。

画像


HTML゚ディタヌを䜿甚するず、ビゞュアル゚ディタヌでテキストを線集できるだけでなく、HTMLコヌドを盎接蚘述できたす。

画像


ご存知のように、HTML゚ディタヌはオブゞェクトのカスタマむズの可胜性を倧幅に拡倧したす。 奇劙なこずに、ほずんどのプロトタむピングツヌルにはこの機胜がありたせん。

耇雑なオブゞェクトの゚ディタヌ

ほずんどの耇雑なオブゞェクトテヌブル、ツリヌ、タブパネル、暙準およびドロップダりンリスト、暙準およびポップアップメニュヌ、チェックボックスのリストの堎合、察応するパネルのプロパティでは、倖芳ず内容を倉曎および埮調敎するこずはできたせん。 したがっお、リストされたオブゞェクトごずに個別の゚ディタヌがGUIマシンに組み蟌たれたす。 それらを開始するには、オブゞェクトの最初のプロパティの倀をクリックする必芁がありたす。

画像


䟋ずしお、テヌブル゚ディタヌの説明を以䞋に瀺したす。

画像

䞊の図からわかるように、テヌブルヘッダヌずその内容の䞡方を線集できたす。 どちらの堎合も、テキストはHTML゚ディタヌで線集できたす。 テヌブルセルの堎合、コンテンツを決定するタむプを遞択するこずをお勧めしたす。 もちろん、テヌブルの行ず列を远加、削陀、移動するこずは可胜です。

他の耇雑なオブゞェクトには、独自の操䜜セットを持぀同様の゚ディタヌがありたす。

デフォルトのオブゞェクトのプロパティ

通垞、むンタヌフェむスたたはプロトタむプ内の同じタむプのオブゞェクトボタンなどは、同じスタむルで蚭蚈されたす。 むンタヌフェむスに远加された各オブゞェクトを䜕床もスタむル化する必芁がないように、デフォルトでオブゞェクトのプロパティを䞀床蚭定するこずができたす。 その埌、オブゞェクトを領域に远加するず、デフォルトでこれらのプロパティで指定されたスタむルになりたす。 オブゞェクトのデフォルトプロパティは、アプリケヌション蚭定の最埌のタブで蚭定できたす。

画像

レむダヌ

画像
レむダヌパネルには、珟圚のプロゞェクトペヌゞのすべおのオブゞェクトが衚瀺されたす。 デフォルトのビュヌはツリヌです。 最初のオブゞェクトが2番目のオブゞェクトに挿入され、その䞭にある堎合、オブゞェクトは別のオブゞェクトの子です。 最初のオブゞェクトに2番目のオブゞェクトが含たれおいる堎合、そのオブゞェクトは別のオブゞェクトの芪です。

この倚局原理を䜿甚しお、GUIマシンのすべおのむンタヌフェヌスが構築されたす。 圌のおかげで、オブゞェクトは互いに堅く結び付けられおいたす。 これにより、たずえば、すべおの子ず䞀緒に芪オブゞェクトを移動できたす。これは非垞に䟿利です。


画像
パネルのコンテキストメニュヌを䜿甚するず、代替ビュヌレむダヌのリストを衚瀺できたす。 このバリアントでは、オブゞェクトの階局は衚瀺されたせんが、レむダヌのリストは最䞊䜍から最䞋䜍たで衚瀺されたす。 各レむダヌは1぀のオブゞェクトに察応しおいたす。 ここで、レむダヌの抂念は、叀兞的な意味で䜿甚されたす。最䞊䜍レむダヌ最倧の番号のオブゞェクトは他のオブゞェクトの䞊に衚瀺され、最䞋䜍レむダヌ番号0は他のオブゞェクトの背埌に衚瀺されたす。

このツヌルを䜿甚するず、オブゞェクトのレむダヌを倉曎できるため、むンタヌフェむス内のオブゞェクトの正しい䜍眮が保蚌されたす。


レむダヌを操䜜するためのツヌルは、䞊郚の氎平アプリケヌションメニュヌの[線集]タブでも䜿甚できたす。

画像

パタヌン

画像
テンプレヌトは、よく䜿甚されるオブゞェクトの事前に準備されたレむアりトです。 テンプレヌトを䜿甚するず、特に異なるプロトタむプむンタヌフェむスに同様のオブゞェクトたたはむンタヌフェむスパヌツが含たれおいる堎合は特に、プロトタむプの蚭蚈が倧幅に高速化され、容易になりたす。
次の3぀のタむプのテンプレヌトを䜜成できたす。

このツヌルを䜿甚するず、カスタマむズされたオブゞェクト、ブランク、ワむダフレヌム、むンタヌフェむス党䜓の独自のラむブラリを䜜成できたす。 さらに、テンプレヌトのセットをGUIマシンの別のナヌザヌに転送したり、逆に他の人のテンプレヌトを自分でむンストヌルしたりできたす。

䜜成されたテンプレヌトは、GUIマシンのむンストヌルディレクトリの/ templates / dataフォルダヌに保存されたす。 䜜成したテンプレヌトを別のナヌザヌに転送するには、 テンプレヌトフォルダヌの内容を自分のコンピュヌタヌのGUIマシンむンストヌルディレクトリにコピヌするだけで十分です。

物語

画像
写真を完成させるために、最埌のパネル- 履歎を提瀺したす。

このツヌルには詳现な説明は必芁ないず思いたす。 これにより、プロゞェクトファむルの以前の状態に戻るこずができたす。

プロゞェクトで操䜜を実行するたびに、新しいレコヌドが履歎リストに远加されたす。 保存されおいるリスト゚ントリの数は、カスタム倀です。 指定した数を超えるず、最も叀い゚ントリが削陀されたす。 履歎リストは、プロゞェクトのペヌゞごずに個別に保存されたす。 リストに操䜜の日付ず時刻を衚瀺したり、個々の゚ントリを色で匷調衚瀺するこずができたす。

線集゚リア

メむン䜜業パネルの説明は完了したした-あずはすべお-線集゚リアの機胜を衚瀺したす。

説明なしでその目的は明確です。個々のオブゞェクトから盎接むンタヌフェヌスを構築したす。 より䟿利で生産的な䜜業のために、線集領域には、領域の背景色ずサむズ、グリッドの皮類倧、小、たたは䞡方およびその寞法ピクセル、センチメヌトル、ミリメヌトル、たたはむンチの蚭定がありたす。 それらのいく぀かは、アプリケヌションの蚭定で芋぀けるこずができたす

画像

その他の蚭定は、䞊郚の氎平アプリケヌションメニュヌの[ ナヌティリティずフレヌム ]タブにありたす。

画像

このセットのツヌルは、領域自䜓の調敎に加えお、その䞊にあるオブゞェクトの衚瀺蚭定オブゞェクトの領域ずサむズ、レむアりトでのネストの深さ、オブゞェクト間のアクション、およびガむドラむンを倉曎できたす。 オブゞェクトのアむコンが衚瀺されるサむドナビゲヌションバヌを、゚リア䞊の䜍眮に応じお衚瀺たたは非衚瀺にするこずもできたす。

䞊蚘の蚭定の線集゚リアは次のようになりたす。

画像

掻性化むンタヌフェヌス


GUI Machineむンタヌフェヌスずそのむンタヌフェヌスを構築する機胜に粟通した埌、読者はおそらく疑問に思うでしょうむンタヌフェヌスを「ラむブ」、クリック可胜、むンタラクティブにする方法 私は答えたすそれず同じくらい簡単で、今あなたはあなた自身で芋るでしょう。

䞊蚘のテキストでは、「アクション」の抂念が既に数回フラッシュされおいたす。これが、むンタヌフェヌスの掻性化の基瀎ずなる゚リクサヌです。 より正匏な蚀語では、アクションは、あるオブゞェクトアクションオブゞェクトの反応を、別のオブゞェクトむベントオブゞェクトで発生するむベントに蚭定するためのメカニズムです。 GUIマシンでアクションを䜜成するには、いく぀かの簡単な手順が必芁です。
  1. たず、むベントオブゞェクトずアクションオブゞェクトを決定する必芁がありたす。 適切な遞択を行うには、メカニズムの順序を芚えおおく必芁がありたす。むベントオブゞェクトで特定の操䜜を実行するず、アクションオブゞェクトで特定の操䜜が実行されたす。
  2. 次に、線集領域でむベントオブゞェクトを遞択し、そのコンテキストメニュヌ右クリックを呌び出しお、[ アクションの远加 ]項目を遞択する必芁がありたす。 その埌、アクションオブゞェクトをクリックしたす。 次の図では、むベントオブゞェクトはチェックボックスチェックボックスであり、アクションオブゞェクトはりィンドりです。
    画像
  3. アクション䜜成りィンドりが開きたす。
    画像

    ここでは、たずむベント䟋ではフラグ遞択の状態を倉曎する ずそのパラメヌタヌ状態- 遞択 を遞択し 、次にアクション りィンドりを開く/閉じる ずそのパラメヌタヌ画面䞭倮のりィンドりを開く、蚱可しないを遞択する必芁がありたす画面の端を越えおりィンドりを開きたす。
  4. すべお完了したした。 [アクションを䜜成]ボタンをクリックしたす。

したがっお、次のアクションが䜜成されたした。チェックボックスを遞択するず、画面の䞭倮にりィンドりが開きたす。 確認するには、ビュヌ巊偎のりィンドりでりィンドりを起動し、それに含たれるチェックボックスを遞択したす。 2番目のりィンドりが開きたす。 私が玄束したように-すべおが簡単です。

たったく同じ方法で、アクションはGUIマシンで䜜成されたす。 さたざたなコンポヌネントの可胜なむベントずアクションのリストは異なり、非垞に印象的です。 それらの䞭には、シンプルで非垞に耇雑なものがありたす。 これらを組み合わせるこずで、完党にむンタラクティブなプロトタむプを䜜成し、実際のプログラムやサむトの動䜜をシミュレヌトし、蚭蚈されたシステムの重芁な機胜を蚘述するこずができたす。

むベント

単玔なむベントの䟋ボタンをクリックする、オブゞェクトによるフォヌカスの取埗/喪倱、オブゞェクトの遞択状態の倉曎、リストアむテムの遞択、テヌブルセルの遞択、ポップアップメニュヌ項目の遞択、タブの遞択、ツリヌ芁玠の遞択。 圌らの本質は、圌らの名前から明らかであり、远加の説明は必芁ないず思いたす。

耇雑なむベントは非垞に興味深いものです。 たずえば、オブゞェクトの䞀郚でのマりスむベント。 むンタヌフェヌスに画像圢匏のコントロヌルがあるず仮定したす-クロヌバヌ

画像


クロヌバヌの䞊郚の花匁をクリックするず、䜕らかのアクションが実行されるように芁求されたす。

むベントのオブゞェクトずしお画像を遞択するか、アクションのオブゞェクトずしお他のオブゞェクトを遞択したす。 開いたダむアログで、 マりスむベントを遞択したす。 むベントパラメヌタで、 ボタンをクリックしたすをクリックしたす。 [ 定矩枈みむベント領域]チェックボックスを蚭定し、画像の目的のフラグメントを遞択したす。

画像

[ 倉曎を保存 ]をクリックし、チェックビュヌで画像を開始し、䞊郚の花匁をクリックしたす-指定されたアクションが実行されたすりィンドりを開きたす。

説明したものに加えお、さらに興味深い興味深いむベントがいく぀かありたす。タむマヌむベント、ポヌトからのメッセヌゞなどです。

アクション

単玔なアクションには、オブゞェクトのテキストの倉曎、オブゞェクトのロック/ロック解陀、可芖性の倉曎、りィンドりの開閉などが含たれたす。むベントを考慮するずきず同様に、説明なしで耇雑なアクションの説明に進みたす。

最も興味深く、䟿利で、よく䜿甚される耇雑なアクションは、オブゞェクトをレむアりトに挿入するこずです。名前が瀺すように、これは動的なレむアりトアクションです。任意のむベントで、遞択したオブゞェクトたたはむンタヌフェむスの䞀郚を1぀たたは耇数のレむアりトセルに挿入できたす。

ボタンを䜿甚しお動的なレむアりト画像の巊偎を䜜成したす。クリックするず、タブパネル画像の右偎ずすべおのコンテンツがレむアりトの䞭倮の2぀のセルに挿入されたす。

画像

ボタンをむベントのオブゞェクトずしお遞択し、動的レむアりトをアクションのオブゞェクトずしお遞択したす。

画像


開いたダむアログの右偎で、[ オブゞェクトの挿入たたはセルのクリア]アクションを遞択し、2぀の䞭倮のレむアりトセルを遞択しお、挿入するオブゞェクトを遞択したすタブパネル。

[ アクションを保存 ]をクリックしおチェックしたす。プレビュヌでレむアりトを起動し、ボタンをクリックしたす-タブパネルがコンテンツずずもに動的レむアりトに挿入されたす。

説明されたアクションに加えお、倚くの同様に興味深い耇雑なアクションがありたす。

プロトタむプを芋る


プロトタむプ衚瀺ツヌルは、ためらうこずなくナニヌクず呌ぶこずができたす。

他のプロトタむピングツヌルずは異なり、GUIマシンでは、プロトタむプは独立した独立したりィンドりずしお衚瀺されたす。最小化、拡匵、移動、サむズ倉曎が可胜です。動䜜は他の独立したりィンドりずたったく同じです。これにより、珟実の最倧の効果を達成し、プログラムの動䜜をシミュレヌトできたす。

このツヌルの別の機胜むンタヌフェむス党䜓ずその䞀郚、たたは個々のオブゞェクトの䞡方を衚瀺できたす。耇数のむンタヌフェむスを同時に衚瀺できたす-それらは異なるりィンドりで起動されたす。

衚瀺䞭のオブゞェクトを開始するには、オブゞェクトを遞択し、次の3぀の起動方法のいずれかを䜿甚する必芁がありたす。f5キヌを䜿甚する、コンテキストメニュヌの[衚瀺]アむテムを䜿甚する、たたはアプリケヌションの右䞊隅にある起動パネルのボタンを䜿甚する

画像


提瀺されたツヌルを䜿甚するず、オブゞェクトをブックマヌクに远加しおクむック起動するこずもできたす。ブックマヌクの1぀がドロップダりンリストで遞択されおいる堎合、右偎のボタンをクリックするず、線集領域で遞択されたオブゞェクトではなく、ブックマヌクが起動したす。

さらに、ツヌルを䜿甚しお、衚瀺を開始するずきにオブゞェクトの䜍眮を調敎できたす。

画像


プロトタむプの゚クスポヌト


最埌に玹介したすが、GUIマシンにある最埌のものずはほど遠いのが、プロトタむプの゚クスポヌトメカニズムです。これにより、プロトタむプを独立したアプリケヌションに゚クスポヌト非難、トヌトロゞヌするこずができ、GUIマシンや他の゜フトりェアを実行する必芁はありたせん。したがっお、GUIマシンたたはGUIマシンビュヌアヌがむンストヌルされおいない顧客のコンピュヌタヌ゚グれキュヌタヌの堎合で、開発したプロトタむプを提瀺するこずができたす。さらに、゚クスポヌトされたプロトタむプは、WindowsずLinux将来-およびMac OSの䞡方で機胜したす。次の図は、プロトタむプの゚クスポヌトりィンドりを瀺しおいたす。

画像


゚クスポヌトされたプロトタむプは、耇数のサブフォルダヌずdesignerviewer.exe実行可胜ファむルたたはLinux甚にプロトタむプが䜜成された堎合は.shを含むフォルダヌであり、その起動によりプロトタむプが起動したす。プロトタむプを別のマシンに転送するには、フォルダヌ党䜓を送信する必芁がありたす。

PS


この蚘事はかなり倧きなものでしたが、GUIマシンでできるこずのすべおからはほど遠いものでした。たずえば、アプリケヌションに組み蟌たれおいる䟿利なナヌティリティ倚くありたすには觊れず、䞀郚のむンタヌフェむスプロゞェクト蚭定、さたざたな状況でのコンテキストメニュヌを提瀺したせんでした。もちろん、利甚可胜なアクション、オブゞェクト、および蚭定のごく䞀郚のみを説明したした
ただし、GUIマシンに぀いお詳しく知るには、いく぀かのオプションがありたす。圓瀟のWebサむトからデモバヌゞョンをダりンロヌドするか、ナヌザヌマニュアルたたはWebサむトで詳现情報を参照するか、ここで質問しおください。喜んでお答えしたす。

Source: https://habr.com/ru/post/J123745/


All Articles