構築を行う前にこちらの記事をご一読ください。

 

最終的にはテキスト入力フォームと数字入力フォームそ設置し、ボタンを押下するとメッセージが表示されます。

Magic側

プログラムの作成

新規プログラムを追加、メニューから起動できるようにします。

準備

1.一番下のプログラムにカーソルを合わせて「F4」キーを押してプログラムを追加します

2.「F5」キーで開くとタスク特性windowが拓くので、汎用タブを選択しタスクタイプを”W=Web Client”に設定します。

3.インタフェースタブを選択しルート名に「プログラム名(今回はSample01)」を設定します。

4.データタブを選択してください。
サンプルプログラムなので、トランザクションモードは「なし」を選択してください。
「OK」を押して確定させます。

5.メインプログラムを「F5」キーで開きます

6.CTRL+Pでタスク特性を開き、インターフェースタブを選択し、開発モード時の実行を”W=WebClient”に変更します。
7.Web→「SmartUX Studioで開く」を選択します
8.メタデータの作成をおこなうので「はい」を選択してください

サンプルプログラム

1.データビューにて3つの変数を追加します

名前	形式	説明
V=変数 文字型	A＝文字　20文字
V=変数 数値型	N＝数値　10桁
V=変数 ボタン	A＝文字	20文字 代入部分に「ボタン」という文字を代入します

2.3つめの「ボタン」に関してはWeb Client形式で“P=プッシュボタン”を選択します

3.フォームタブを選択し、「プログラム名」を選択後F5キーを押します

4.コントロールをフォームに配置します

「項目」のタブから作成した変数を選び、ドラック＆ドロップでフォーム枠内に配置します
5.コントロール名を以下に変更してください。
※コントロール名にダブルバイトは使用できませんので日本語が入るとエラーが起こります

• 文字型＝V_MOZI
• 数字型＝V_SUUZI
• ボタン＝V_BUTTON

6.ボタンをクリックすると動くようにするため、ロジックにてクリックイベントを追加します。
「内部イベント」→「クリック」を追加します

V_BUTTONにコントロールクリック時に警告を出すように設定します。
サンプルプログラムでは以上で終わりです。

MainRoutingプログラム

1.MainRoutingプログラムにてルーティングを設定します
MainRoutingをF5キーにて開きます。

2.「イベント、ルート」の中に「コール、プログラム」でプログラムを呼び出している部分を探します。

3.行を追加し「コール、プログラム」で作成したプログラムを記述します
ルート名に追加したいプログラム名が設定されていることを確認して下さい。

※コールする場所の順番は特にありませんが、Loginよりも上部に記述してください。
ログインのルート名「**」は「なんでも」という意味があります。

MainRoutingプログラムでは以上で終わりです。

メニューへの追加

サイドメニューにページを追加する方法を説明します。

1.メニューリポジトリを開きます
2.2行目「Menu」の詳細を表示していくと、メニューの階層ごとに表示されます

ユーザーメニュー「スタートアップ」は一番上の階層です。
今回は「スタートアップ」の下階層に設置します

「スタートアップ」の詳細を開くと、すでに設置されている下階層メニューがあります。
今回は一番下にメニューを設置するため行を追加します。
タイプはプログラムを設定、ユーザメニュー名にはメニューで表示させたい文字を記入します。
パラメータのプログラムで詳細を開くとプログラムを選択します。

以上でMagic側の設定を終わります。

SmartUX側

1.MagicからSmartUXを開きます。

2.SmartUXが開くと拡張表示をクリックします
コードを表示もクリックします

3.コンポーネントの左側ボタンをクリックし、ルート追加画面を開きます

1. XPAをチェック
2. パスにはルート名で設定した名前を入力
3. プログラムの選択ボタンから、追加したいプログラムを選択
4. ルート保存ボタンで決定する

4.コンポーネント中央のボタンを押下して「プログラムの追加」画面を開きます
プログラムを選び、次へボタンを押下します

5.テンプレートを「Blank Template」を選択します

ページが表示されると、コンテナが見えるようになります。
6.データモデルの設定します。
コンテナに追加したプログラムのFormを設定します。

7.コンテナの中に行を追加し、3つのコンテナを配置します。
以下の状態になります。
※もしウィジェットが表示されていない場合はリロードボタンをクリックしてください。

8.「行」をドラック＆ドロップします

9.「カラム」1つ目をドラック＆ドロップします

10.「カラム」2つ目を1つ目の下にドラック＆ドロップする

11.次にカラムの中に入力とボタンを配置します。
左と中央のカラム内に入力をドラック＆ドロップします

12.右のカラム内にボタンをドラック＆ドロップします

13.配置した入力フォームとボタンにデータをマッピングします。

Dataの歯車マークを押下します。

• 左の入力フォームには「V_MOZI」
• 中央の入力フォームには「V_SUUZI」
• ボタンには「V_BUTTON」

をマッピングします。

14.ボタンの場合はMagicで設定した代入文字「ボタン」を表示させたいと考えています。
その場合「ラベル＆アイコン」のLabelの歯車マークを押下し以下を選択します。
「V_BUTTON」の「mg.getValue」を選択します。

データマッピングを選択します。

以上で画面の設定を終わります

プレビュー

1.早速動かしてみましょう。ライブビューアイコンをクリックします

2.新しいタブで表示します

3.以下の画面が表示されていたらうまくいきました

以上で終了です。