SmartUXの画面構造を理解するには

1040 views

画面の大枠について

このガイドでは、使用するための手順を説明します。

これはSmartUX Studioのユーザーインターフェイスを表しており、左ペイン、キャンバス中央ペイン、下ペイン、右ペインの4つのセクションで構成されています。

1. 左のペイン

左ペインについて説明します

①コンポーネント

コンポーネント：このセクションでは、アプリケーション内の既存のコンポーネントを紹介します。
ユーザーがコンポーネントの1つを選択すると、下部ペイン、キャンバス、モデルペインにその特定のコンポーネントの詳細が表示されます。

②UX ウィジェット

UXウィジェットは、フォームデザインを作成するために使用できる画面配置とユーザーエクスペリエンスウィジェットを提供します。

③すべてのファイル

All Files: All Files
“機能でプロジェクトで使用されているすべてのファイルを表示します。
また、ファイルへのアクセスや変更も可能です。

④ビルド・アプリケーション

アプリケーションのビルドを開始]-配置環境内でプロジェクトを構築するためのアプリケーションのビルドダイアログを表示します。

⑤アプリの設定

App Settings -アプリケーション内でプロジェクト関連の設定を行うためのダイアログを開きます。

2. 中央パネル

キャンバスと呼んでいる中央のパネルについてご説明します。

①キャンバス

このスペースでは、UXウィジェットをドラッグ＆ドロップして、アプリケーションのフォームをデザインすることができます。

②テンプレート

テンプレートによるコンポーネントのHTML表現を表示します。

③コンポーネント

このセクションでは、アプリケーションの動作とスタイリングのためのファイルパスを含めることができます。
これはAngularで選択したコンポーネントの.tsファイルに対応します。

④スタイル

ここでAngularコンポーネントのスタイル定義を作成、変更することができます。

⑤ライブ・プレビュー・ログ

ライブプレビューログは、ライブプレビューの記録を表示します。

3.右ペイン

右ペインを説明します。

①モデル

モデルペイン・・・これはMagic xpa Formのコントロールのリストです。

②アウトライン

右側のアウトラインパネルは、キャンバス内のテンプレートに基づくウィジェットのアウトラインをツリー構造で表示します。

③プロパティシート

プロパティシート：選択されたウィジットに関連する全てのプロパティが表示されます。

以上が、SmartUXユーザーインターフェースの簡単な紹介です。

ボタン操作について

以下からはそれぞれのボタンやアイコンの動作について説明いたします。

①アイコン説明

バージョン SmartUXのバージョンと各テンプレートのパスを知ることができます。
コンポーネント各フォームを選択します。選択したフォームを修正いたします。
1. ルーティングを追加します Magicのルートイベント内にてコールされているプログラムに対してSmartUXで定義します。例えばMagic内で以下のルートイベントがあったとします。 QuestionsListに対してのルーティングがMagic側にて設定されています。こちらをSmartUXにも定義する必要があります。ルートタイプにはXPAを選択しパスにはMagicで設定したルート名を設定してください。プログラムには該当のプログラムを選択し保存を行います。
2. Magicフォームで作成したフォームに対しSmartUX上に追加する場合にクリックします。画面を追加(または上書き)するタスクを選択します。使用するコンポーネントテンプレートを選択します。
3. コンポーネント表示のリロードを行います

UXウィジェット

ウィジェットの一覧が表示されています
ウィジェットの検索を行います
ウィジェットを追加したときなどリロードを行います。ウィジェットを追加してもリロードしなければ表示されません。
モデル：Magicフォームにて設定された項目が表示されます。既にマッピングされているものは緑のリンクマークが表示されています。
画面上にてクリックしづらいときはこちらのアウトラインにてウィジェットを選択後プロパティをクリックしてください。左の画面をタグ階層で可視化したものです。
選択したウィジェットのプロパティを設定します

コードを表示

7-1 : テンプレート	フォームに関するタグを表示・修正することができます。
7-2：コンポーネント	タスクに対するtsファイルを表示・修正することができます。
7-3：スタイル	タスクに対するカスケードスタイルシート(CSS)を記述することができます。
7-4：ライブプレビューログ	ライブプレビューに関するログを表示します。

拡張表示プレビューをドラッグアンドドロップを行いやすいように拡張表示されます。
1. キャンバスを再表示 SmartUXエディタ全体を再ロードいたします。
2. ライブプレビューを再起動 ng-serverを再度行います。
3. 全プログラムのメタデータを生成 Magic xpaでフォームに貼り付けた項目をSmartUX用に再度メタデータを作成します
4. SmartUXInputフォルダの生成 Magic xpaでフォームに貼り付けた項目をSmartUX用に再度Inputフォルダを作成します
ライブプレビューを表示します。修正中の画面ではなく起動設定されたプログラムから表示されます。
修正中のフォームを保存します。 CTRL+Sでも保存可能です。

すべてのファイル output\<プロジェクト名>\src フォルダの内容が表示されます。ここでファイルを選択することで、編集することができます。修正にはバックアップを取るなど特に気を付けてください。
アプリケーションのビルドアプリケーションのビルドを行います。ビルド出力先にはパスを設定します。 Optionには–configuration production –base-href=/knowledge/などパラメーターを入れてください。 –base-href=/knowledge/　だと http://XXXX.XXX/knowledge/ となります。ルートにビルドする場合は –configuration production –base-href=/　となります。実際ビルドする場合はMagic側で配備の準備を行い、Web Clientキャッシュを先に生成してください。

アプリの設定バックグラウンドで動いているMagic xpaとの接続情報などを設定します。

項目名	内容
プロトコル	利用するプロトコルを指定します
サーバ	利用するサーバのホスト名を指定します。デバッグ時は”Localhost” で可能ですが、実運用時は実際に使用するホスト名を指定してください
リクエスタ	利用するMagicのリクエスタを入力します
アクティビティモニタのログクライアントシーケンス	クライアント側のログファイルにクライアントの動作内容を記録させ、クライアントがクラッシュした場合に、再起動時にサーバのアクティブモニタにログ内容を送信するかどうかを指定します。
内部ログレベル	クライアントのログレベル。以下の値がサポートされています。 None …… ログを出力しません Request Info…… サーバに送信されるリクエストやその対応を受信してンソールに表示します。Web Clientのクライアント側のロギングを参照してください。 Server …… HTTPリクエストとその応答が記録されます Server Message …… “SERVER”オプションの内容に加え、リクエスト内で送信されたコンテンツとレスポンス内で受信したコンテンツ。暗号化されていないコンテンツを表示するには、SpecialClientSecureMessages = Nも設定する必要があります。 Support …… “SERVER”オプションの内容に加え、.NET、SQLiteゲートウェイ、データソースの変換のメッセージも記録されます。 Gui …… “SUPPORT”オプションの内容に加え、クライアント側のGUI表示用データの概要が記録されます。 Development …… クライアント側の全てのメッセージが記録されます。
内部ログ同期	ログの同期方法を指定します。メッセージ(Message) 書込(Flush)
一般的なエラーの表示	パーティショニングエラーのテキストを含めるかどうかを定義します。
最初のHTTPリクエストのタイムアウト	起動時にMagic xpaエンジンに接続するためのタイムアウトを定義します。クライアントがサーバからHTTPReuestTimeoutの値を受け取るまで、この値がクライアント側のデフォルトのHTTPタイムアウトになります。