アプリケーションテンプレートを使うことで、デザインに対する細かい設定作業を省くことができます。
例えば、ログイン画面は基本的なデザイン設定が済んでいるので、入力フォームの配置や色味の設定に気をもむ必要がありません。
今回は「Startup Template」を使用してデザインを作ります。

初期設定

1:SmartUXを開く
プログラムを新規作成する手順でSmartUXを開きます。

2:テンプレート選択肢を確認する
テンプレート選択肢の中の”StartUpTemplate”を選択します。

アプリケーションテンプレート適用方法

既存システムへの導入

間違ってメインプログラムの上書きをしますとシステムを破損いたします。
必ず現時点でのバックアップを取ってください。

1:実行モードをバックグラウンドに変更する

Magicを開き、オプション　→　設定　→　動作環境にて実行モードをバックグラウンドにします。

2:開発モードをWebClientにする
メインプログラムのタスク特性　→　開発モード時の事項をWebClientに変更する。

3:モデルを追加する
モデルリポジトリに2つのモデルを追加いたします。場所は任意です。

FilePath	F=項目	A=文字	256
BASE64	F=項目	B=BLOB(ANSI)

4:ユーザーイベントを追加する
メインプログラムのユーザーイベントを2つ追加いたします。1，2と番号固定です

1.GEファイルダウンロード	トリガタイプ N=なし	パラメーター FilePath	強制終了 N=なし
2.GEPDF表示	トリガタイプ N=なし	パラメーター BASE64	強制終了 N=なし

5:変数を追加する
メインプログラムにてA,B,Cの変数を追加いたします。 A,B,Cである必要があります。

A	G.URLパラメータ	A=文字	300
B	G.MenuBlob	B=BLOB(ANSI)
C	G.LoginUserID	A=文字	20

6:SmartUXStudioを開く
「SmartUXStudioで開く」を選択します。

7:確認を許可する
「このプロジェクトのメタデータがありません。SmartUX Studioでプロジェクトを開くには、メタデータが必要です」
と聞かれたら「はい」を選択してください。

8:テンプレートを選択する
スタートアップテンプレートを選択します。

9:※注意※上書きをしない
メインプログラムが上書きされますので、既存システムへの導入には必ず「いいえ」を選択してください。

10:終了
ＯＫのボタンの色が変わったら終了です。

新規システムへの導入

「既存システムへの導入」とほとんど手順が同じです。
新規の場合はもともとのシステムを上書きする心配がないので、注意事項が少なくなります。

1: 新規作成
ファイル → 新規作成をクリックします。

2: 新規作成
任意のフォルダにプロジェクトを構築します。
今回はC:\Userとします。

3: 実行モードを確認
実行モードがバックグラウンドに設定されていることを確認します。
「オプションメニュー＞設定＞動作環境」から確認することができます。

4:プログラムを開く
プログラムをクリックし、メインプログラムを「F5」キーで開きます。

5:WebClientモードにする
CTRL+Pでタスク特性を開き、インターフェースタブを選択し、開発モード時の実行を”W=WebClient”に変更します。

6: SmartUX Studioを開く
CTRL+Web→「SmartUX Studioで開く」を選択します。
メタデータの作成をおこなうので「はい」を選択してください。

7: メインプログラムを上書きを許可する
ブラウザ上にSmartUXが開きます。同時にMagic側で以下の確認が表示されます。
「アプリケーションテンプレートにはメインプログラムが含まれています。現在のメインプログラムを上書きしますか？」
と表示されますので、すぐに“「はい」”を選択してください。

8: Angularの設定を待つ
Angularの設定が行われます。
おわりましたら「OK」ボタンをおして終了させてください。
その後、一度ブラウザとMagic xpa studioを終了させてください。

初期プログラムの確認

まずはアプリケーションテンプレートでの初期プログラムを動かしてみましょう。
ショートカットからMagicプログラムを起動します。

1: SmartUX Studioを開く
Magic側で以下の操作をします。
「Webメニュー＞“SmartUX Studioで開く”」を選択します。

2: プレビューを見る
ブラウザが立ち上がりますのでプレビューアイコンをクリックします。
場合によっては10～20秒かかる場合があります。

3: 別ウィンドウで確認
別ウィンドウにて起動します。

4: 終了する
確認ができたら、SmartUX Studio(ブラウザ)を閉じ、実行エンジンを終了させてください。

ログイン画面から先に進むには
1: フォルダを開く
以下のディレクトリフォルダを開きます。
「C:\プロジェクト作成ディレクトリ \プロジェクト名\output\プロジェクト名\database 」

2: ファイルをコピーする
上記ディレクトリに入っている「sqlite.SQLite」をコピーします。

3: フォルダを開く
ピーしたファイルを以下のディレクトリに貼り付けて上書きます。
「C:\プロジェクト作成ディレクトリ \プロジェクト名」
ログイン用のデータベースが入ったSQLiteデータベースとなります。

4: フォルダを開く
上記の作業の後、以下の情報でログインすることができます。
ID MSJ
PASS Msj0123

プログラム作成へ進む

この後はプログラムを作成し、SmartUXで画面を編集する流れに入ります。
プログラムを追加する方法を以下のページにて解説しています。
新規プログラムを追加するには