なぜテンプレートを使った方がいいのか

テンプレートのメリット

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

テンプレートを設置する場所

1:場所の確認

お使いのxpaではどの場所(パス)にテンプレートがあるのか確認します。
xpaで動作環境を開きます。
オプション→設定→動作環境

動作環境

2:テンプレートパスを確認する

外部参照タブから「SmartUXアプリケーションのテンプレートパス」を確認し、パスをコピーします。。

CSS編集画面

3:ウィジェット表示の有効化／無効化

エクスプローラーを開きコピーしたパスを貼り付けます。

4:展開する

開いたパスの場所にダウンロードしたテンプレートを貼り付ける、または解凍して展開します。

表示ボタン

5:SmartUXを開く

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

6:テンプレート選択肢を確認する

テンプレート選択肢の中に追加したテンプレートが表示されます。

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

既存システムへの導入

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

こちらからスタートアップテンプレートをダウンロードします。

ダウンロード後以下のディレクトリに展開します。
(Magic xpa 4Plusインストールフォルダ)SmartUXTemplatesバージョン別Application

1:実行モードをバックグラウンド

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

2:開発モードをWebClientにする

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

3:モデルを追加する

モデルリポジトリに2つのモデルを追加いたします。場所は任意です。
FilePathF=項目A=文字256BASE64F=項目B=BLOB(ANSI)

4:ユーザーイベントを追加する

メインプログラムのユーザーイベントを2つ追加いたします。1，2と番号固定です。
1.GEファイルダウンロードトリガタイプ N=なしパラメーター FilePath強制終了 N=なし2.GEPDF表示トリガタイプ N=なしパラメーター BASE64強制終了 N=なし

5:変数を追加する

メインプログラムにてA,B,Cの変数を追加いたします。
A,B,Cである必要があります。
AG.URLParameterA=文字300BG.MenuBlobB=BLOB(ANSI) CG.LoginUserIDA=文字20

6:SmartUXStudioを開く

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

新規システムへの導入

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

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で画面を編集する流れに入ります。
プログラムを追加する方法を以下のページにて解説しています。
新規プログラムを追加するには