ユーザーエクスペリエンス

ユーザー体験を改善するために、Z アンド I Web クライアント (ZIEWeb-Client) エミュレーターにはいくつかの UI 変更が含まれており、より応答性とユーザーフレンドリーなものになりました。

UX 更新の一部を以下に示します。

  • 設定ベースモデルの場合、ログインページに「ユーザー情報を保存」オプションと無効なログイン試行に対する適切なエラーメッセージが表示されるようになりました。
  • ダッシュボードに、使用可能なアクティブセッションのリストが表示されます。
  • 設定パネルに検索バーが追加されました。
  • リボンバーは全画面モードで使用できます。
  • プロパティパネルには、検索バーとヘルプリンクが含まれています。
  • カラーリマップ機能が更新され、デフォルトの色にリセットするために使用できるリセットボタンが追加されました。

カラーリマップ機能が更新され、色の 16 進数値を表示する 16進数コードフィールドが追加されました。

タッチパッドのサポート

ZIEWeb-Client ユーザーのタッチ対応デバイスのサポート。 ユーザーは、システムのタッチキーパッドを操作したり、グリーンスクリーンでタップイベントを使用したりできます。

機能の改善

a) ファイルの自動更新

ZIEWeb-Client の自動更新機能を使用すると、アプリケーションを実行するために、ビルドをデプロイするたびに手動でコンテキストルートを変更したり、ブラウザ履歴をクリアしたりする必要はありません。

  • ユーザーが新規ビルドをデプロイすると、アプリケーションによってクライアントサイドの Java スクリプトファイルと CSS ファイルが自動的に更新されます。
  • ユーザーは、新機能を含む新規ビルドの変更を取得します。
  • ブラウザのキャッシュをクリアする必要はありません。
b) カスタム UI

この機能の目的は、ZIEWeb-Client の UI をカスタマイズするオプションを提供することです。

  • ユーザーは、カスタムテンプレートを指定することにより、ZIEWeb クライアント Web ページの UI 設計をカスタマイズできます。
  • テンプレート URL (パラメータ名) を指定する必要があり、値はweb.propertiesファイルにカスタムテンプレートの指定されたフルパスです。

例:

templateURL=C:/Users/admin/Documents/UI.jsp

  • ファイルが利用できない場合、デフォルトの ZIEWeb-Client ページが表示されます。

  • このサンプルカスタムテンプレートを使用することで、ユーザーはログインページのロゴバー、パネル、背景色、画像をカスタマイズできます。ユーザーは、3270 と 5250 アイコンの画像を変更し、設定パネルの下でプロパティーを無効にすることもできます。

template.jsp のサンプルコード:

メモ: 以下のコードブロックをそのままコピーし、 'customtemplate.jsp'ファイルを作成して使用します。
<%@ページ contentType="text/html; charset=utf-8"%> <%@ページ言語 =「Java」%> <メタ http-equiv="Content-Type" content="text/html; charset=ISO-8859-1> <メタ http-equiv="X-UA-Compatible" content= "IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <div id="cust_container" style="表示:none"><!-- この行変更しないでください。 --> <!-- 以下に提供されている各 ID のサンプル構文は、コメントにするか、使用されない場合は削除できます --> <!-- 設定パネルでプロパティを無効にするには、以下の構文で次の ID を使用します--> <!-- Print/copy/paste- の場合, Key Remap- key_div_remove, Color Remap- color_div_remove, Print Screen- PrintScreen_div_remove, , Cursor- CursorStyle_div_remove, Preferences- Push_Settings_div_remove --> <Input Type="HIDDEN" id='color_div_remove'> <!-- デフォルトイメージを置換するには、以下の構文で次の ID を使用します--> <!--デプロイ先の下に HTTP サーバーの場所 --> <!-- 3270 の場合 icon-img_3270, 5250 icon-img_5250, 3270 非アクティブ icon-img_3270_disable, 5250 非アクティブ icon-img_5250_disable --> <!-- ログインパネルの製品ロゴの場合- cust_myModal_logo、ナビ・バーの IBM ロゴ- cust_logo--> <img id="img_3270" src="ht tp://localhost/zieweb/imagesfol/sample1.svg"> <!-- 背景色を変更する場合、以下の構文では次の ID を使用します ログインページ--> <!-- ログインページOuter- cust_login,login page Inner- cust_login_inner, Nav bar- cust_nav_background --> <div id="cust_login" style="background-color:#ECECEC;"></div> <!-- ナビバーの製品名を変更する場合--> <p id="cust_product_name"> <!-- ここに製品名を追加できます --> </p> <!-- パネルの情報--> <div id="cust_abt_header"> <!-- ここにイメージまたは任意その他のコンテンツを [情報] パネルのヘッダー部分に追加できます --> </div> <div class="row" id="cust_abt_body> <!-- ここで、イメージまたはその他のコンテンツを既存の組織に追加できます。詳細はパネルについて --> </div> <p id="cust_abt_top> <!-- バージョン情報の上部に任意のコンテンツを追加できます --> </p> <p id="cust_abt_bottom"> <!-- バージョン情報の下部に任意のコンテンツを追加できます --> </p> <!-- [情報] パネルの終了--> <div id="home_last" class="row"> <!--ログインとホームページの下部に、画像やその他のコンテンツを追加できます --> </div> </div><!-- この行は変更しないでください。 -->

PF キーの外部での処理

a) この機能を有効にするための前提条件:

この機能を有効にするには、Admin Console (ZIEWeb 2.1 から適用) を使用するか、ZIEWeb の発行ディレクトリまたは非公開ディレクトリにあるweb.propertiesファイルの「テンプレートURL」パラメータを使用して、カスタムテンプレートへのパスを設定する必要があります。

b) この機能を有効にするステップ:

  • ZIEWeb クライアントでこの機能を有効にするには、管理者は'isHandleKeyExternaly'パラメータを True に設定する必要があります (この機能を無効にするには、カスタムテンプレートでこのパラメータを False に設定します)。

  • カスタムコードを使用して外部からホストファンクションキーを処理するには、パラメーターが含まれる'handledKeyExternally'を使用します。

    keyPressed:現在の画面のホストファンクションキーの値を提供します。

    data:現在の画面の「text, startRow, startCol」を保持する配列。

    TEXT_PLANE:現在の画面データを保持する配列。

    sessionName:キーが押されたとき、現在のセッション名を保持します。

  • これらのメソッドにアクセスするには、カスタムテンプレートで<script></script>タグを使用するか、外部 JavaScript の場合は「isHandleKeyExternaly」パラメータと「handlesKeyExternally(keyPressed, data, TEXT_PLANE,セッション名)」関数を呼び出します。 スクリプトファイルが ZIEWeb 公開ディレクトリー内に配置され、カスタムテンプレートで設定されます。

    例:

    <script src="http://localhost/hod/externalscript.js"></script>

    場所,

    localhostは「アプリケーションサーバーの場所」で置換できます,

    ZIEWeb は「ZIEWeb サーバーの別名」で置換できます。

    Externalscript.jsは、ホストファンクションキーを処理するカスタムスクリプトファイルの名前に置き換えることができます。

設定サーバーベースのモデル、Microsoft 認証でログイン

はじめに:

ZIEWeb で、ユーザーは、構成サーバーベースモデルの「Windows ユーザー名を使用して Z and I Emulator for Web に自動的にログオン」を選択して、Windows 資格情報でログインオプションを有効にできます。ZIEWeb クライアントで同じオプションを有効にすることで、ユーザーは Microsoft 資格情報でサーバーベースモデルの設定ページにログインできます。

DW for ZIE for Web クライアントで設定サーバーベースモデルの作成:

展開ウィザードで設定サーバーベースモデルを選択し、 「ユーザーが Z and I エミュレーター for Web に Windows ユーザー名を使用して自動的にログオン」オプションを有効にします。



次の [ログオンタイプ] オプションのいずれかを選択し、[次へ] をクリックします。

  • Windows ドメインのユーザー: これはオプションです。必要に応じて、ダミーの値を入力します。
  • ユーザー ID を作成しますか?
    • はい- ユーザーを作成するグループ名を入力します。
    • いいえ- ユーザーが既に存在する場合は、このオプションを選択します。


以下のステップに従ってZIEWeb クライアントを設定します:

  1. Microsoft 資格情報を使用して、Microsoft Azure AD に ZIEWeb クライアントアプリケーションを登録します。
  2. 登録後、ClientID と RedirectURL を取得し、ZIEWeb クライアントビルドで設定します (EAR/WAR - web.xml ファイルでクライアント ID と RedirectURL を更新する必要があります)。
  3. 設定が完了したら、ZIEWeb クライアントでConfig サーバーベースモデルを起動します。
  4. 設定サーバーベースモデルの起動中に、Microsoft 認証がポップアップします。ここで、ユーザーはログインするために MS 資格情報を提供する必要があります。
  5. ログインが成功すると、設定サーバーベースのモデルページが表示されます。
  6. 初めてログインしたとき、ユーザーは上記のグループの下に MS mail ID の前半分の名前で作成されます。
  7. メール ID 名の部分にドット (.) とハイフン (-) 以外が含まれる場合、特殊文字はハイフン (-) で置換されます。
Note:
  • ユーザーが ClientID と RedirectURL を使用してアプリケーションを設定しない場合、MS 認証は失敗し、正しく完了していない/資格情報が正しくありませんのような警告メッセージがポップアップします。
  • ZIEWeb クライアントの起動中に、上記のグループのユーザーを確認します。ユーザーが既に存在する場合、ページが起動します。
  • ユーザーが言及されたグループに存在しない場合、新規ユーザーを言及されたグループに作成します。
  • ZIEWeb ユーザー/グループウィンドウのユーザーの作成中に、「アカウントの作成をユーザーに許可する」チェックボックスが選択されているかどうかを確認します。
  • 「アカウントの作成をユーザーに許可する」にチェックマークを付けた場合、指定されたグループにユーザーが作成されます。
  • ユーザーにアカウントの作成を許可するチェックボックスがクリアされている場合、ZIEWeb クライアントページと認証の例外に関する警告メッセージが表示されます。
  • 指定されたグループが ZIEWeb ユーザー/グループに存在しない場合、ZIEWeb クライアントページでは、グループが存在しませんという例外に対する警告メッセージが表示されます。
  • 実行ユーザーがいずれかのグループに存在する場合のみ、このオプションを使用します。
ユーザーが存在する場合、ZIEWeb クライアントページが起動します。存在しない場合、ページがポップアップし、ユーザーが存在しないという例外に対する警告メッセージが表示されます。

制限:

非公開ディレクトリの Web.properties のPrintSessionの PrintedFileLocal またはカスタム UI のテンプレートURL のパスを追加するときに、1 つのバックスラッシュの代わりに 2 つのバックスラッシュを使用します。

例: D:\フォルダ名\FileName.jsp の代わりに D:\フォルダ名\FileName.jsp