デザイン システム ウィザード

開始ウィザードを使用すると、外観と操作感、スタイルがカスタマイズされたアプリケーションを作成できます。さらに、アプリケーションで必要となる既定の機能を定義できます。ナレッジベースに WorkWithPlus を初めて適用する場合は、WorkWithPlus メニュー内の [for Web] -> [デザイン システム ウィザード] と選択し、この開始ウィザードをあらかじめ開いておく必要があります。

開始ウィザードでは、ガイド付きのさまざまなステップを通じて、作成するアプリケーション独自のカスタマイズされた外観と操作感、機能セットを選択します。プロジェクトでの必要性に応じて、テーマ、色、レイアウト、スタイル、機能の組み合わせをいくつでも作成できます。

この開始ウィザードに表示されるリアルタイムプレビューを利用すると、さまざまな設定を試して、それらの設定によってアプリケーションの外観がどのように変化するのかを確認できます。

開始ウィザードを実行するオプションには、基本モードと詳細モードがあります。

[基本設定]:

基本設定では、次の 2 つのステップのみを実行します。

  1. デザインシステムのベースを選択します。
  2. ベースカラーを選択し、「ディスカッション」、「通知およびサブスクリプション」などのモジュールをインポートするかどうかを選択します。

ウィザードは以前と同じように、すべてのオブジェクトをインポートする既定のオプションで実行されますが、より簡素化されています。

[詳細設定]

ステップ 2 で [詳細設定] を選択した場合、完全なウィザードが表示されます。また、[使用中のデザインシステム] を選択した場合、ウィザードは常に詳細モードで開きます。

ウィザードで加えた変更がある場合は、[デザインシステムをインポート] ボタンをクリックすると、インポートされるオブジェクトの名前を示すポップアップウィンドウが表示されます。

これらのオブジェクトのみをインポートすることも、デザインシステムのすべてのオブジェクトを再インポートすることもできます。
このボタンはステップ 2 とステップ 10 の両方で表示されます。

NewDesignSystemWWP14Img05

 

 

ウィザードを詳細モードで実行する場合の各ステップについて、次に詳しく説明します。

ステップ 1 - テーマの選択

このステップでは、アプリケーションで使用される事前定義テーマを選択します。

オプションは次のとおりです:

  • Nagara
  • Nile
  • Amur
  • Hudson
  • Seine
  • Congo
  • Missisippi
  • Parana
  • Danube
  • Purus
  • Arapey
  • Thames
  • Zambezi
  • Yangtze

ステップ 2 - メインカラーのカスタマイズ

このステップでは、アプリケーションのカラーパレットを選択できます。プレビューを利用して、変更の結果をリアルタイムで確認することが可能です。

あらかじめ用意されている定義済みの色を選択することも、独自の色を選択することもできます:

SelectThemeImg06

独自の色を選択する場合は、メニューの「ヘッダーの前景色」を定義できます。

ステップ 3 - セキュリティ

StartupWizardImage10

このステップでは、インポートされるセキュリティを定義します。

オプションは次のとおりです: 

  • [GAM]
  • [レガシー WorkWithPlus 認証]
  • [なし]

[GAM] を選択する場合は、次のセキュリティタイプを設定できます: [認証] または [承認]。

[ログインのスタイル]: ログインページのスタイルを 1 つ選択します。[背景画像を表示] または [画像を左側に表示] を選択した場合、[ログイン用画像] オプションで画像を選択することができます。

さらに、ログイン Web パネルに表示されるロゴを [ログイン用のロゴ] オプションで選択できます。

セキュリティは不要だと選択した場合 ([セキュリティ] のオプションが [なし] の場合)、ログインテンプレートを選択してその外観や操作感を確認するために、[サンプル ログイン ページを含める] チェックボックスが表示されます。

ステップ 4 - メニュースタイルの定義

このステップでは、メニュースタイルのさまざまなエレメントを定義できます。

[メニューバーの配置]

このオプションでは、メニューの向きを定義できます。 

次のオプションから選択します:

  • [縦]
  • [横]

[メニューのロード]

[データベースから(動的)] チェックボックスをオンにした場合は、実行時にメニューを作成できます。つまり、メニューに配置されるアイテムを作成できるトランザクションを使用します。

[データプロバイダーから] チェックボックスをオンにした場合は、WorkWithPlus の以前のバージョンと同様に、データプロバイダーを使用してメニューをロードします。

[スタイル]

このオプションでは、メニューのスタイルを定義できます。

次のオプションから選択します:

  • [シンプル]
  • [マテリアル (最大高)]
  • [マテリアル]

[メニューの背景色]

このオプションでは、メニューの背景色を定義できます。

次のオプションから選択します:

  • [明るい]
  • [暗い]
  • [ベースカラー] ([マテリアル (最大高)] スタイルでのみ使用できます)

[画像メニュー]

このオプションでは、メニューの背景画像を表示するかどうかを定義します。チェックを入れた場合は、表示する画像を定義します。このオプションは [マテリアル (最大高)] スタイルでのみ使用できます。

[検索オプション]

このオプションでは、メニューに検索条件入力ボックスを配置するかどうかを定義します。

[ユーザー情報]

このオプションでは、ユーザー情報を配置するかどうかを選択できます。

[ユーザー写真]

このオプションでは、ユーザー情報にユーザーの写真を配置するかどうかを定義します。

[ヘッダー]

このオプションでは、次のカスタマイズを行うことができます:

  • [ヘッダーバーを含める]
    このオプションでは、ヘッダーバーを表示するかどうかを定義します。
  • [ヘッダーに固定]
    メニュースタイルを [縦] かつ [シンプル]、または [横] に設定していて、ヘッダーバーが含まれている場合にのみ表示されます。

 

ステップ 5 - マスターページのカスタマイズ

このステップでは、マスターページのいくつかのアイテムをカスタマイズできます。

[設定]

このセクションでは、次のカスタマイズを実施できます:

  • [ロゴ]
    このオプションでは、アプリケーションのロゴを変更できます。GeneXus に収録されているアイコンを選択することも、お使いのファイルシステムにあるものをインポートすることもできます。
     
  • [ファビコン]
    このオプションでは、アプリケーションのファビコンを変更できます。
     
  • [Google アナリティクス]
    アプリケーションに Google アナリティクスを導入したい場合は、このオプションを使用して設定できます。
     
  • [パンくずリスト/サブタイトルを含める]
    メニュースタイルに [縦] と [マテリアル] を設定している場合は、パンくずリスト/サブタイトルを含めることができます。
     
  • [タイトル]
    このオプションでは、アプリケーションのタイトルを定義します。

 

  • [通知を含める]
    アプリケーションに通知を設定する場合は、このオプションを選択できます。マスターページにバッジが作成され、アイテムが SDT とともに読み込まれます。

 

  • [ブックマークを含める]
    アプリケーションにブックマークを設定する場合は、このオプションを選択できます。アプリケーション内のページにショートカットを設定して、設定したページに直接アクセスできるようになります。このオプションを選択すると、このオプションの実行に必要なすべての動作が自動的に追加されます。

[画面右上の操作] 

このセクションでは、右上に配置されるアクションをカスタマイズできます。

[表示] フィールドでは、次の 3 つの値を設定できます:

  • [アイコンのみ]
  • [アイコンとユーザー名]
  • [含めない]

このフィールドを [アイコンのみ] または [アイコンとユーザー名] に設定した場合、ユーザー名、ロール名、パスワードアクション、ログアウトアクションを配置するかどうかを定義できます。

[フッター]

このセクションでは、フッターの有無、フッター内部のテキスト、フッターを固定にするかどうかを定義できます。

ステップ 6 - ホームページ

このステップでは、アプリケーションのホームに使用するページを定義します。さまざまなダッシュボードスタイルと、モジュール、バナーなどを備えた何種類ものページが用意されています。

ステップ 7 - 項目属性および背景のスタイル

このステップでは、項目属性および背景のスタイルをカスタマイズします。

[項目属性] 

  • [スタイル]
    このオプションでは、入力ボックスのスタイルを変更できます。次のオプションを使用できます:
    • [長方形]
    • [長方形 (フラット)]
    • [ライン]
       
  • [項目属性の幅]
    このオプションでは、項目属性/変数を実幅と固定幅のどちらで表示するかを定義できます。

 

  • [ラベル位置]
    このオプションでは、入力関連のラベルの位置を定義できます。次のオプションを使用できます:
    • [左]
    • [上]
    • [フローティングラベル]

 

[設定]

  • [間隔 (フィールド内/フィールド間)]
    このオプションでは、フィールドをコンパクトにするかどうかを定義できます。
     
  • [タイトルの位置]
    このオプションでは、タイトルの位置を定義できます。次のオプションを使用できます:
    • [トップに固定]
    • [トップに固定しない]
    • [ページ内]
       
  • [背景のスタイル]
    このオプションでは、アプリケーションの背景色を定義できます。次のオプションを使用できます:
    • [背景なし] 
    • [ライトグレー]
    • [ライトカラー]
    • [ダークグレー]

 

  • [データの背景スタイル]
    このオプションでは、表示されるデータの背景色を定義できます。次のオプションを使用できます:
    • [白]
    • [ダーク]
       
  • [タブスタイル]
    このオプションでは、タブのスタイルを定義できます。次のオプションを使用できます:
    • [標準]
    • [モダン]
  • [大文字のラベルとタイトル]
    フィールドのタイトル、グリッドタイトル、ラベルを大文字で表示するかどうかを指定します。

ステップ 8 - その他のスタイル構成

このステップでは、アプリケーションのその他の側面をカスタマイズできます。

[パネルスタイル]

このセクションでは、すべてのパネルに適用されるスタイルを定義できます。

[アクションのスタイル]

このセクションでは、アクショングループのスタイルを定義できます。

[グリッドスタイル]

このセクションでは、グリッドのスタイルを定義できます。

[実行/終了ボタンのスタイル]

このセクションでは、[実行] ボタンと [キャンセル] ボタンのスタイルを定義できます。

[グリッドオブジェクトのヘッダー]

このセクションでは、グリッドオブジェクトのヘッダーの表示方法を定義できます。

[その他の設定]

このセクションでは、アプリケーションの外観と操作感に関するその他の設定を定義できます。

[メッセージスタイル]

このセクションでは、メッセージコントロールのスタイルを定義できます。 

ステップ 8 - 既定のインスタンス構成

このステップでは、既定のインスタンスの作成方法について、いくつかの側面をカスタマイズします。

[項目の表示]

このセクションでは、View オブジェクトを配置するかどうか、またどのように呼び出すか (AutoLink、[Standard Actions] の [Display] ノード、またはその両方) を変更できます。

さらに、ナレッジベースに AuditPlus がある場合は、View オブジェクト内のトランザクションのレコード履歴を監査できます。 

[エクスポートアクション]

このセクションでは、[Standard Actions] の [Export]、[Export Report]、[Export CSV] を既定で Selection オブジェクトに含めるかどうかを定義します。

[その他の設定]

このセクションでは、Prompt オブジェクトを生成するかどうかを定義します。

[グリッドオブジェクトの設定]

[更新、削除、表示アクション]

このオプションでは、[Standard Actions] の [Update]、[Delete]、[Display] をグリッドの内部または外部に追加するかどうかを定義します。

[グリッドの状態の保存]

このオプションでは、グリッドの状態を保存する場所を定義します。オプションは次のとおりです:

  • [ユーザーのデータベース内]
  • [セッション内]
  • [Do not save]

[グリッド外の既定のフィルタ]

このセクションでは、フィルタに関連する側面を定義します。 

動的フィルタを使用する、標準のフィルタを使用する、またはフィルタなしにすることを指定できます。さらに、タイトルフィルタ、列での並べ替え機能、列の選択機能を配置するかどうかも指定できます。

ステップ 10 - 表示言語と項目名の設定

このステップでは、アプリケーションの言語 (複数可) を定義します。

[言語]

このセクションでは、アプリケーションにインポートされる言語 (複数可) を定義します。

[アプリケーションの項目名のカスタマイズ]

このセクションでは、アプリケーションの項目名を言語ごとにカスタマイズできます。

[トランスレーションタイプ]

このセクションでは、言語を実行時に変更できるようにするかどうかを定義します。

[マスターページ]

実行時のトランスレーションを可能にする場合、オプションを画面にどのように表示するかをカスタマイズできます。

オプションは次のとおりです:

  • [各言語のリンク]
  • [DropDown オプション]
  • [なし]

すべてのステップを完了して [完了] を押すと、次のメッセージが表示されます:

処理を進めると、MasterPage、Theme、画像をはじめとする一連のオブジェクトがインポートされます。この処理には時間がかかる場合があります。

インポート処理が完了した後は、[すべてリビルド] を実行する必要があります。[レガシー WorkWithPlus 認証] を有効にした場合は、まずセキュリティ オブジェクト コードの更新のアクションを実行してから [すべてリビルド] を実行します。


Copyright © 2007-2015 DVelop Software Solutions - www.workwithplus.com