UI DesignerでGUIを作成
UI デザイナーツールキットから定義済みのオブジェクトを使用してグラフィカルユーザーインターフェースを作成します。
-
リボン上を選択します。
UI デザイナーが新しいウィンドウで表示されます。
-
ウィジェットボックスからダイアログにオブジェクトをドラッグしてGUIデザインを作成します。
次の例では、リストボックス、スライダー、ラジオボタン、プッシュボタン、ラベルのあるシンプルなGUIを示しています。
-
デザインに応じて、各オブジェクトの位置、名前、プロパティを変更します。
- 位置を調整するには、オブジェクトを選択し、マウスまたは矢印キーで移動します。
- プロパティを変更するには、オブジェクトを選択し、プロパティエディターで必要なプロパティを変更します。
また、オブジェクトを右クリックし、コンテキストメニューから多くのプロパティを定義することもできます。
-
UI デザイナーリボンから、Previewボタンを選択します。
グラフィカルユーザーインターフェースデザインのプレビューが表示されます。デザインを確認し、プレビューウィンドウを閉じます。
-
デザインを保存し、保存するファイル形式を指定してください：
名前を付けて保存 説明 *.ui デザインをUI デザイナーファイルとして保存します。UI デザイナーで引き続きデザイン作業を行う場合は、このファイル形式を使用してください。 *.oml デザインを OpenMatrix Language ファイルとして保存します。このフォーマットを使って、コードのスケルトンを生成してください。 注: デザインをコードとして保存すると、それをUI デザイナーに再びロードすることはできません。UI デザイナーで開くことができるデザインの作業バージョンを保持したい場合は、コードとして保存する前に.ui形式でバージョンを保存してください。上記の設計例を .oml ファイルとして保存すると、以下のコードが生成されます：% Auto-generated code by UI Designer %----------------------------------- % Callback functions: %----------------------------------- function slider_callback(handle, callstate) % Add callback implementation: [slider] end function radioButton_callback(handle, callstate) % Add callback implementation: [radioButton] end function radioButton_2_callback(handle, callstate) % Add callback implementation: [radioButton_2] end function pushButton_callback(handle, callstate) % Add callback implementation: [pushButton] end function popupMenu_callback(handle, callstate) % Add callback implementation: [popupMenu] end %----------------------------------- % GUI elements: %----------------------------------- Dialog = figure('units', 'pixels', 'position', [0 0 410 310] ... , 'numbertitle','off', 'name','Dialog'); undock(Dialog); slider = uicontrol('parent', Dialog, 'style','slider' ... , 'callback','slider_callback', 'interruptible','off' ... , 'units','normalized', 'position',[0.25 0.50 0.21 0.07] ... , 'enable','on', 'max', 99 , 'min', 0 , 'orient','horizontal' ... , 'value', 0 , 'sliderstep', [1 10] ... , 'callbackdelay',0.000000, 'tag','slider', 'userdata',[], 'tooltipstring','', 'visible','on'); text = uicontrol('parent', Dialog, 'style','text' ... , 'units','normalized', 'position',[0.07 0.47 0.15 0.10] ... , 'fontname','MS Shell Dlg', 'fontangle','regular', 'fontweight','normal', 'fontsize',7.80 ... , 'enable','on', 'string','Fast' ... , 'horizontalalignment','left' ... , 'verticalalignment','middle', 'foregroundcolor', [20 20 20], 'backgroundcolor', [246 246 246] ... , 'tag','text', 'userdata',[], 'tooltipstring','', 'visible','on'); text_2 = uicontrol('parent', Dialog, 'style','text' ... , 'units','normalized', 'position',[0.47 0.47 0.15 0.10] ... , 'fontname','MS Shell Dlg', 'fontangle','regular', 'fontweight','normal', 'fontsize',7.80 ... , 'enable','on', 'string','Detailed' ... , 'horizontalalignment','left' ... , 'verticalalignment','middle', 'foregroundcolor', [20 20 20], 'backgroundcolor', [246 246 246] ... , 'tag','text_2', 'userdata',[], 'tooltipstring','', 'visible','on'); radioButton = uicontrol('parent', Dialog, 'style','radiobutton' ... , 'callback','radioButton_callback', 'interruptible','off' ... , 'units','normalized', 'position',[0.05 0.67 0.25 0.10] ... , 'fontname','MS Shell Dlg', 'fontangle','regular', 'fontweight','normal', 'fontsize',7.80 ... , 'enable','on', 'string','Create Log File', 'value', 0 , 'foregroundcolor', [20 20 20] ... , 'tag','radioButton', 'userdata',[], 'tooltipstring','', 'visible','on'); radioButton_2 = uicontrol('parent', Dialog, 'style','radiobutton' ... , 'callback','radioButton_2_callback', 'interruptible','off' ... , 'units','normalized', 'position',[0.05 0.77 0.38 0.10] ... , 'fontname','MS Shell Dlg', 'fontangle','regular', 'fontweight','normal', 'fontsize',7.80 ... , 'enable','on', 'string','Generate Animation', 'value', 0 , 'foregroundcolor', [20 20 20] ... , 'tag','radioButton_2', 'userdata',[], 'tooltipstring','', 'visible','on'); pushButton = uicontrol('parent', Dialog, 'style','pushbutton' ... , 'callback','pushButton_callback', 'interruptible','off' ... , 'units','normalized', 'position',[0.53 0.77 0.25 0.10] ... , 'fontname','MS Shell Dlg', 'fontangle','regular', 'fontweight','normal', 'fontsize',7.80 ... , 'enable','on', 'string','Run', 'value', 0 ... , 'foregroundcolor', [0 0 0] ... , 'backgroundimage','' ... , 'backgroundcolor',[246,246,246], 'tag','pushButton', 'userdata',[], 'tooltipstring','', 'visible','on'); popupMenu = uicontrol('parent', Dialog, 'style','popupmenu' ... , 'callback','popupMenu_callback', 'interruptible','off' ... , 'units','normalized', 'position',[0.03 0.17 0.25 0.10] ... , 'fontname','MS Shell Dlg', 'fontangle','regular', 'fontweight','normal', 'fontsize',7.80 ... , 'enable','on', 'value', 1 , 'string', {'Model' } ... , 'foregroundcolor', [20 20 20], 'backgroundcolor', [255 255 255] ... , 'tag','popupMenu', 'userdata',[], 'tooltipstring','', 'visible','on'); - Composeウィンドウに戻り、デザインと共に .oml ファイルをロードします。
-
ファイルを実行してください。
UI デザイナーで保存したコードファイルに基づいてGUIを作成します。
