intra-mart Accel Platform

Size: px

Start display at page:

Download "intra-mart Accel Platform"

かつかげいしなみ
5 years ago
Views:

1 目次目次 Copyright 0 NTT DATA INTRAMART CORPORATION クイック検索検索 Top

2 UI デザインガイドライン ( PC 版 ). 改訂情報. 禁止事項. はじめに.. 本書の目的.. 対象読者.. 本書の構成. UI 基本方針. 対応環境条件.. クライアント要件.. 画面解像度.. Webブラウザ設定. UIデザイン. UIデザインの流れ. 画面レイアウト. body 部分. 画面遷移. エラー処理. 国際化情報入力項目. HTML / CSSコーディング Tips. 基本的な画面の作り方. 基本的な画面の作り方スクリプト開発編. 基本的な画面の作り方 SAStruts+SJDBC 開発編. 基本的な画面の作り方 TERASOLUNA Global Framework 開発編

改訂情報変更年月日変更内容 0-0-0 初版 0-0-0 第版ツールバーにツールバーに配置可能な文字列の説明を追加ツールバーのタブアイコンの注意を修正画面タイトルの画面キャプチャを貼り換え 0-0-0 第版テーブルのセル内の位置 / 文字寄せ (align) を修正 0--0 第版バリデーションの JSSP Validation と連携する場合

3 改訂情報変更年月日変更内容初版第版ツールバーにツールバーに配置可能な文字列の説明を追加ツールバーのタブアイコンの注意を修正画面タイトルの画面キャプチャを貼り換え第版テーブルのセル内の位置 / 文字寄せ (align) を修正 0--0 第版バリデーションの JSSP Validation と連携する場合にコラムを追加禁止事項は使用許諾によって以下を禁止しています. Copyright を変更削除しないでください. Powered by intra-mart の画像を変更削除しないでくださいはじめに項目本書の目的対象読者本書の構成本書の目的本書ではにおける UI デザインガイドラインを説明します開発者は本書を利用することでと統一された画面開発を行うことができます

4 では UI 基本方針を定めそれに則した UIデザインを定めました UIデザインではで提供するインタフェースを使用した画面開説明しますで提供するインタフェースは UIモジュールとテーマです UIモジュールは画面を構成する部品群です開発者は UIモジュールを利用し intra-mart Acc と同じデザインの画面開発を行えますテーマは画面レイアウトを切り替えるための仕組みです開発者はこの仕組みを利用することにより簡単に画面レイアウトを切り替えられコーディが減りますこれらのインタフェースを利用し UIデザインに則り基本的な画面の作り方を参考に画面開発を行ってください旧バージョンに比べてより早くより簡単にインタフェースの画面開発を行えるでしょうコラム本書の画面キャプチャは全てGoogle Chromeにて表示しています Web ブラウザの違いやバージョンによってグラデーションや影丸み等の見え方が異なりますこれは Web ブラウザにより表示の解釈が異なるためとブラウザによりCSSの対応状況が異なるためです対象読者次の開発者を対象としてますの UI デザインガイドラインを確認したい方で初めてプログラミングを行う開発者本書の構成本書の構成は以下の部構成です UI 基本方針のアプリケーションを作成するときの考え方を説明します UI デザイン UI デザインの流れに沿って部品の配置から画面遷移のルールなど説明します基本的な画面の作り方実際の画面のサンプルを使用して説明します注意 UI デザインはスクリプト開発を用いて説明します外部ドキュメントへのリンクは全てスクリプト開発用となりますので SAStruts+SJDBC で開発している場合は適宜読み替えてください UI 基本方針におけるUI 基本方針は以下の通りです使用するユーザの目線を忘れないこと操作方法が分かりやすく迷わないこと同じ動きをするものは操作方法が統一されていること画面デザインが全体で統一されていることコラムユーザにとって使いやすさや見た目と動きがアプリケーションへの評価となります対応環境条件項目クライアント要件画面解像度 Web ブラウザ設定クライアント要件対応する OS ブラウザはリリースノートのクライアント要件を参照してください最新の情報が確認できます注意

5 上記リリースノートは最新のバージョンです古いバージョンのクライアント要件は以下を手順で参照してください. Products Information Site を表示します. 旧アップデート版リリースノート / 公開ソースダウンロードの該当バージョンをクリックします. リリースノートをクリックします. システム要件をクリックします. クライアント要件を確認しますコラム本書の画面キャプチャは全てGoogle Chromeにて表示しています Web ブラウザの違いやバージョンによってグラデーションや影丸み等の見え方が異なりますこれは Web ブラウザにより表示の解釈が異なるためとブラウザによりCSSの対応状況が異なるためです画面解像度対応する画面の解像度は以下の通りですは 0 x を基準とします Web ブラウザ設定 IE は文字サイズを中とします表示倍率 ( ズーム ) は 00% とします UI デザイン本章より UI デザインの流れにそった画面作成を説明します目次は以下のとおりです UI デザインの流れ UI デザインの流れを簡単に説明します注意スクリプト開発にて説明します外部ドキュメントへのリンクは全てスクリプト開発用となりますので SAStruts+SJDBC で開発している場合は適宜読み替えてください画面レイアウトを指定します基本的な画面レイアウトの方法を確認しますテーマを利用し画面構成のパーツを組み合わせた画面レイアウトを行います body 部分を作成しますまずは UIモジュールにどんな部品があるかを確認します初めに画面タイトルを作成します戻るやイベントを配置するツールバーを作成しますコンテンツエリアを作成します見出しにて画面をセクションごとに分けますテーブルにて表のルールを確認し配置します入力フォームにて部品ごとのルールを確認し配置しますボタンにて種類や画面ごとのルールを確認し配置します処理リンク / 処理アイコンにての種類やルールを確認し配置しますアラートとコンファームの表示方法やルールを確認表示します作成した画面を画面遷移の規約を確認し実装しますエラー処理を確認します入力項目の国際化を行う場合は国際化情報入力項目を確認します画面レイアウト本章では画面レイアウトの方法について説明しますではテーマを利用して画面レイアウトの大枠 ( ヘッダフッタの有無など ) を作成しますテーマを利用すると開発者が作成するのは HTML の要素の body 部分だけです head header body footer をそれぞれコーディングする必要はありません注意本章はテーマを利用して画面レイアウトを行う方法を説明します body 部分にコンテンツを配置する説明は body 部分にて説明します

コラム本書の画面キャプチャは標準テーマ ( 青 ) を用いています画面レイアウトの目次は以下の通りです基本的な画面レイアウト本章では全ての構成要素を含んだ画面レイアウトを用いて画面構成を説明します構成要素の組み合わせによる画面レイアウトの方法はテーマを使って画面レイアウトを行うで説明します項目基本的な画面構成つの構成要素つのパーツ名基本的な構成要素の実装例

6 コラム本書の画面キャプチャは標準テーマ ( 青 ) を用いています画面レイアウトの目次は以下の通りです基本的な画面レイアウト本章では全ての構成要素を含んだ画面レイアウトを用いて画面構成を説明します構成要素の組み合わせによる画面レイアウトの方法はテーマを使って画面レイアウトを行うで説明します項目基本的な画面構成つの構成要素つのパーツ名基本的な構成要素の実装例基本的な画面構成基本的な画面はつの構成要素が含まれますつの構成要素つのパーツ名つの構成要素は本書ではつのパーツに分類しますパーツ名の詳細はテーマからみた画面のつのパーツにて行います No 場所 HTML 要素パーツ名配置内容ヘッダー <body> 配下の <header> head メニュー My Menu 画面タイトル <body> body 画面タイトルツールバー <body> body 処理アイコン処理リンク ( アイコンのみアイコン+リンクリンクのみ ) コンテンツエリア <body> body 入力フォーム一覧ボタン等フッター <body> 配下の <footer> footer コピーライトヘッド情報 <head> head 文書のヘッダ情報です画面上に表示されません HTML 構造は以下の通り出力されます

7 0 <html> <head> ヘッド情報 </head> <body> <header> ヘッダー </header> <div> ツールバーコンテンツエリア <footer> フッタ </footer> </body> </html> 注意基本的な構成要素の実装例で触れますが開発者はのヘッダーのフッターをコーディングする必要はありません html タグや body タグ等のタグも不要ですテーマを使っイアウトを行うで詳しく説明します基本的な構成要素の実装例実際にでは以下のようにコーディングしますのヘッダーのフッターのヘッダ情報 html タグや body タグはテーマが自動的に生成します注意テーマの機能を使用してヘッダーやフッターの有無をレイアウト指定できますテーマを使って画面レイアウトを行うで詳しく説明します HTML 実装例  <imart type="head"> <title> 画面名 </title> <script> function hoge(){ dosomething(); </script> </imart>  <div class="imui-title"> <h> 画面タイトル </h>  <div class="imui-toolbar-wrap"> <div class="imui-toolbar-inner">  <ul class="imui-list-toolbar">  <li><a href="#" class="imui-toolbar-icon" title=" 戻る "><span class="im-ui-icon-common--back"></span></a></li> </ul>  <ul class="imui-list-toolbar-utility"> <li><a href="#" class="imui-toolbar-icon" title=" 最新情報 "><span class="im-ui-icon-common--refresh"></span></a></li> </ul>  <div class="imui-form-container">

8 JavaScript 実装例 function init(request) { dosomething(); コーディング内容 No 場所配置内容ヘッダーテーマが自動的に生成します明示的にコーディングする必要はありません画面タイトル <h> に画面タイトルを入力しますツールバーツールバーを参照してくださいコンテンツエリア body 部分を参照してください UI モジュールや独自に用意した表などのコンポーネントを配置しますフッターテーマが自動的に生成します明示的にコーディングする必要はありませんヘッド情報テーマが自動的に生成します画面上表示されていませんが head タグが出力されています title タグに画面名を記述してください必要に応じて script link タグなどを記述してくださいコラムコンテンツエリアは div 要素内に記述します div に設定すべき class 属性は imui-form-container を含めつ用意しています次の項固定レイアウト ( カラム ) にて説明します基本的な画面レイアウト別実装例以下に基本的な画面レイアウト別の実装例を示します項目固定レイアウト (カラム) 左右に分割するレイアウト ( カラム ) 固定レイアウト ( カラム ) コンテンツエリアの一番外側の div の class 属性の説明です一番外側の div の class 属性に imui-form-container imui-form-container-narrow imui-form-container-wide のいずれかのコンテナクラスを指定します <div class="imui-form-container">... 指定した class により枠の幅 (%) が変わります ( サンプル画像では style=height:00px を指定 ) imui form container imui form container narrow imui form container wide width:% width:0% width:0% コラム imui-form-container imui-form-container-narrow imui-form-container-wide は UI モジュールのつです別ドキュメントの CSS Module List のコンテナで説明しています左右に分割するレイアウト (カラム) コンテンツエリアを左右に分割したい場合の実装例です Twitter の Bootstrap を利用します実装例

9 0 <div class="container-fluid"> <div class="row-fluid"> <div class="span" style="height:00px;"> <div>sidebar content <div class="span0" style="height:00px;"> <div>body content 画面テーマを使って画面レイアウトを行う基本的な画面レイアウトで触れたとおり開発者はヘッダーフッター等のコーディングする必要がありませんが提供するインタフェーステーマを利用して作成しますテーマを利用すると開発者が作成するのは body 部分だけです開発者はテーマを利用することで共通部分に修正が入った時の手間や記述ミスによる不具合を避けることができます本章ではテーマを使って画面レイアウトを行う方法を説明しますさらに構成要素の組み合わせ方についても説明します項目テーマとはテーマからみた画面のつのパーツコラム標準テーマ ( 青 ) を用いて説明しますテーマとはテーマとは以下を指します画面レイアウトやスタイルを切り替える仕組みその構成ファイル群本書ではテーマを利用して画面レイアウトを指定する方法を説明をします注意本ドキュメントではテーマを利用した画面レイアウトの方法を説明しますテーマの仕組みを知りたいテーマの色を変更したいロゴを変更したい場合は以下の別ドキュメントを参照してください標準テーマカスタマイズセットアップガイド標準テーマカスタマイズ操作ガイドテーマの仕組みの詳細は以下の別ドキュメントを参照してくださいテーマ仕様書テーマからみた画面のつのパーツまずテーマからみた画面の考え方を説明します基本的な画面レイアウトではつの構成要素つのパーツとして説明しましたこのつのパーツ ( head header body footer ) はテーマの仕組みから分類しています

10 No 場所パーツ名ヘッダー header 画面タイトル body ツールバー body コンテンツエリア body フッター footer ヘッド情報 head コラムテーマを使った画面レイアウトの組み合わせ方法はパーツ名で説明します画面レイアウトの指定方法本項ではテーマを利用した画面レイアウトの方法を説明しますテーマを利用すると画面によって header を表示しない作成した画面だけを表示したいなど組み合わせることが可能ですコラムテーマの画面レイアウトやスタイルを切り替える仕組みの中の PageBuilder を使い画面レイアウトの指定します詳細はテーマ仕様書の PageBuilder を参照してください項目画面を構成するつのパーツパーツ組合せの種類 PageBuilder で実装可能な画面レイアウトの種類 PageBuilderを利用した画面レイアウトのつの指定方法適用順位画面を構成するつのパーツテーマからみた画面のつのパーツに示したとおりの画面レイアウトはテーマの観点から head header body footer のつのパーツに分類されます 0

11 このつのパーツは標準テーマ標準 ( シンプル ) テーマにおいては以下の通り HTML 要素として出力しますパーツ名 HTML 要素備考 head head タグ画面上には表示されません header body タグ内の header タグ標準テーマにおいてはグローバルナビ等が表示されます body body タグ内の div.imui-container タグ開発者が作成した画面タイトルツールバーやコンテンツが表示されます footer body タグ内の footer タグ標準テーマにおいてはコピーライト等が表示されます HTML ソースは以下の通り出力されます 0 <html> <head> ヘッド情報 </head> <body> <header> ヘッダー </header> <div class="imui-container"> 画面タイトルツールバーコンテンツエリア <footer> フッタ </footer> </body> </html> パーツ組合せの種類つのパーツの組合せの種類を説明します組合せの種類は以下つです head header body footer ヘッダーフッタ表示あり head body footer ヘッダー表示なしフッタ表示あり head body ヘッダーフッタ表示なし body ヘッダーフッタ表示なしテーマ適用無しヘッダーフッタ表示なしこれらのパーツの組合せは PageBuilder にて実装を行います PageBuilder で実装可能な画面レイアウトの種類 PageBuilder で実装可能な画面レイアウトの種類を説明します ( パーツの組み合わせ方のうち head body の組み合わせがパターンあります ). HeadWithFooterThemeBuilder head body footer を含んだ HTML を生成します header ( メニューやユーティリティ ) を表示したくないが footer は表示したい場合に使用します body は <div id= imui-container > で囲まれて出力されます. HeadWithContainerThemeBuilder head body を含んだ HTML を生成します header ( メニューやユーティリティ ) footer を表示したくないが CSS やクライアントサイド JavaScript は使用したい場合に使用します主に向けに作成した画面を表示するために使用することを想定しています body は <div id= imui-container > で囲まれて出力されます. HeadOnlyThemeBuilder head body を含んだ HTML を生成します header ( メニューやユーティリティ ) footer を表示したくないが CSS やクライアントサイド JavaScript は使用したい場合に使用します主に iwp. 以前のシステム向けに作成した画面を表示するために使用することを想定しています body は指定された URL の HTML そのものが出力されます. BodyOnlyThemeBuilder DOCTYPE htmlタグ body を含んだ HTML を生成します header ( メニューやユーティリティ ) footer を表示せず CSS やクライアントサイド JavaScript も使用しない場合に使用します body は指定された URL の HTML そのものが出力されます. NoThemeBuilder 指定された URL の HTML をそのまま返しますテーマを一切使用せず自分で作成した HTML をそのまま出力したい場合に使用します body は指定された URL の HTML そのものが出力されます. FullThemeBuilder head header body footer のすべてを含んだ HTML を生成します body は <div id= imui-container > で囲まれて出力されます基本はこれを使用します

12 注意パーツの組み合わせ方のうち head body を含んだ HTML を生成する実装は HeadWithContainerThemeBuilder と HeadOnlyThemeBuilder のつありますつの違いは HeadWithContainerThemeBuilder は bodyを <div id= imui-container > で囲んで出力しますが HeadOnlyThemeBuilder は出力されませんの UI モジュールを利用する場合は HeadWithContainerThemeBuilder を指定してくださいコラム FullThemeBuilder は基本的な画面レイアウトの説明で使用した全ての構成を含むレイアウトです PageBuilder を利用した画面レイアウトのつの指定方法 PageBuilder を利用した画面レイアウトの指定方法はつあります設定ファイルに指定する方法パーツの組み合わせ方を静的に決定する場合リクエストへ属性 / パラメータで指定する方法パーツの組み合わせ方を動的に決定する場合や forward する場合以下つの指定方法がありますリクエストに属性として指定する方法リクエストパラメータを指定する方法適用順位画面レイアウトのつの指定方法には適用順位があります設定ファイルパラメータ属性の適用は以下の順に検索し最初に合致した PageBuilder を使用します設定ファイルに記述したものより属性に指定したものの方が優先されます. 属性. パラメータ. 設定ファイル設定ファイルに指定する方法パーツの組み合わせ方を静的に決定する場合設定ファイルに記述します手順は以下の通りです. 設定ファイルを配置する. 設定ファイルの内容を指定する設定ファイルは WEB-INF/conf 配下の PageBuilder の実装毎のフォルダに配置しますファイル名は任意です適用したい PageBuilder HeadWithFooterThemeBuilder 指定する値 WEB-INF/conf/theme-head-with-footer-path-config HeadWithContainerThemeBuilder WEB-INF/conf/theme-head-with-container-path-config HeadOnlyThemeBuilder BodyOnlyThemeBuilder NoThemeBuilder FullThemeBuilder WEB-INF/conf/theme-head-only-path-config WEB-INF/conf/theme-body-only-path-config WEB-INF/conf/theme-no-theme-path-config なし注意それぞれの設定ファイルは異なる XML Schema で定義されていますいずれかの設定ファイルを別のフォルダにコピーしても動作しないので注意してください設定ファイルに指定する例設定ファイルで指定する方法の例としてへのリクエストを head body footer を含んだ HTML としたい場合を取り上げますこの場合使用する PageBuilder は HeadWithFooterThemeBuilder になります HeadWithFooterThemeBuilder の設定ファイルは以下のようになります <?xml version=".0" encoding="utf-"?> <theme-head-with-footer-path-config xmlns=" <path>/sample/page</path> </theme-head-only-path-config> path の中にコンテキストパス以下のパスを / から記述します

13 別の例としてへのリクエストを異なるビルダーモジュールで表示する場合を取り上場合正規表現を利用して path を表現します path 要素に regex 属性を true として追加することで正規表現として扱われます <?xml version=".0" encoding="utf-"?> <theme-head-with-container-path-config xmlns=" <path regex="true">/example/[^/]+?</path> </theme-head-only-path-config> <?xml version=".0" encoding="utf-"?> <theme-head-with-footer-path-config xmlns=" <path regex="true">/example/[^/]+?/[^/]+?</path> </theme-head-only-path-config> リクエストへ属性 / パラメータで指定する方法パーツの組み合わせ方を動的に決定する場合や forward する場合リクエストへ属性またはパラメータを指定します forward を行うと PageBuilder が処理対象とする URL は forward 前の URL となります forward 後のページに対して forward 前の PageBuilder とは別の PageBuilder を指定したい場合リクエストにパラメータを指定することで PageBuilder を切り替えることができます指定するキー imui-theme-builder-module 適用したい PageBuilder HeadWithFooterThemeBuilder 指定する値 headwithfooter HeadWithContainerThemeBuilder headwithcontainer HeadOnlyThemeBuilder BodyOnlyThemeBuilder NoThemeBuilder headonly bodyonly notheme 上記の値をリクエストのパラメータまたは属性として指定することで PageBuilder が切り替わりますリクエストに属性として指定する例 function init(request) { request.setattribute("imui-theme-builder-module", "headwithfooter"); forward("somewhere"); リクエストパラメータとして指定する例 <form name="form" action="sample/page"> <input type="hidden" name="imui-theme-builder-module" value="headwithfooter"> <input type="submit" value="submit"/> </form> 画面レイアウトの作成ルール項目作成ルールテーマで指定してあるので変更できないもの指定しなくてはならないものタイトルタグ <title></title> 任意で指定するもの head タグにスクリプトを記述したい body タグの onload 属性にJavaScriptを記述したい作成ルール. html body head を書いてはいけません. title を書きましょう. <imart type= head > を使って script link を書きましょう. <body onload= func > は $(document).ready(func) に置き換えましょうテーマで指定してあるので変更できないもの

14 以下はテーマで指定してあるため変更できません DOCTYPE <!DOCTYPE html> charset <meta charset= UTF- > base <base href= target= _self /> ホスト名などはシステムによって異なります favicon <link rel= icon href= favicon.ico type= image/x-icon /> <link rel= Shortcut Icon type= img/x-icon href= favicon.ico /> 必須の CSS テーマ固有の CSS theme.css 後述の UI コンポーネント固有の CSS imui.css Twitter Bootstrap の CSS bootstrap.css 必須の JavaScript ライブラリ jquery jqueryui jquery jqueryui Plugin 後述の UI コンポーネントが定義してある JavaScript imui.js 画面遷移のユーティリティが定義してある JavaScript imui-form-util.js im_json.js im_window.js メニュー制御で使用します html.js IE で intra-mart にアクセスした際に読み込まれますこのライブラリを読み込むことによって HTML で追加されたタグを利用することができるようになります指定しなくてはならないものタイトルタグ <title></title> すべての画面に説明的なタイトルを記述しなければなりませんタイトルに指定する内容はアプリケーション名画面名操作対象などから構築しますこれらを詳細なものから広範なものへイフン ) でつなげることを推奨しますスケジュールの参照画面を例にとるとリソース名例アプリケーション名スケジューラ画面名操作対象名予定の参照対象の予定のタイトルのようになり title タグは以下のようになります <title> 打ち合わせ - 予定の参照 - スケジューラ </title> titleタグに指定した文字列は以下のような用途に使われますブラウザのお気に入り ( ブックマーク ) へ登録する際の名前の初期値ブラウザウィンドウまたはタブの名前ユーザがお気に入りに登録することを考慮するとユーザごとに一意なタイトルをを記述することを推奨しますタイトルが一意になることでお気に入りの中で重複しなくなるためです任意で指定するもの独自で追加したい CSS や JavaScript 独自 CSS <link rel= stylesheet type= text/css href= somewhere/cssfile > ページ独自の css ファイルへの参照を記述する独自 JavaScript <script src= somewhere/csjs.js > ページ独自のクライアント JavaScript ファイルへの参照を記述するただしこれらのタグを head タグに直接記述することはできませんこれらのタグを記述したい場合は <imart type= head > タグの中に追記したいタグを記述します <imart type= head > 述した内容が head タグの必須のスクリプトの後に追加されます

15 0 <imart type="head"> <link rel="stylesheet" href="sample.css" type="text/css" /> <style type="text/css">.sample { background-color: black; </style> <script type="text/javascript" src="sample.js"></script> <script type="text/javascript"> function dosomething() { var foo='foo'; somefunction(foo); </script> </imart> コラムテーマおよびUIコンポーネントは jqueryを利用しています prototype.js を利用したい場合 <imart type= head > タグの中で prototype.js を読み込んでください UIコンポーネントは (function($){...)(jquery) のように無名関数として実装しているので $ 関数の競合は発生しません head タグにスクリプトを記述したい head タグに画面固有のスクリプトや CSS を記述したい場合は <imart type= head ></imart> タグの中に記述します下記の HTML 実装例を参考にしてください  <imart type="head"> <title> 画面名 </title> <script> function hoge(){ dosomething(); </script> </imart>  <div class="imui-title"> <h> 画面タイトル </h>  <div class="imui-toolbar-wrap"> <div class="imui-toolbar-inner">  <ul class="imui-list-toolbar">  <li><a href="#" class="imui-toolbar-icon" title=" 戻る "><span class="im-ui-icon-common--back"></span></a></li> </ul>  <ul class="imui-list-toolbar-utility"> <li><a href="#" class="imui-toolbar-icon" title=" 最新情報 "><span class="im-ui-icon-common--refresh"></span></a></li> </ul>  <div class="imui-form-container">  body タグの onload 属性に JavaScript を記述したい body タグの onload 属性に JavaScript を記述したい場合 jquery の機能を利用して実行するようにしてください jquery(document).ready(function() { dosomething(); ); body 部分本章では body 部分の作成について説明します

画面を構成するつのパーツで説明したとおり body 部分には以下を配置します画面タイトルツールバーコンテンツエリアこれらはで提供する UIモジュールを使って配置してください従来よりも効率よく画面開発を行えます本章では全体で利用する UI モジュールを説明のあと画面に配置する順番に説明します UI モジュール UI モジュールは PC 向けの画面を効率的に作成するためのモジュールです

16 画面を構成するつのパーツで説明したとおり body 部分には以下を配置します画面タイトルツールバーコンテンツエリアこれらはで提供する UIモジュールを使って配置してください従来よりも効率よく画面開発を行えます本章では全体で利用する UI モジュールを説明のあと画面に配置する順番に説明します UI モジュール UI モジュールは PC 向けの画面を効率的に作成するためのモジュールです開発者は UI モジュールを利用することで効率的にかつ統一したデザインの PC 向け画面開発を行うことができま mart Accel Platform における UI モジュールは以下を示します jquery UI jquery UI は jquery のプラグインとして稼働する PC 用ライブラリです jquery UI を利用すると開発者はインタフェースを意識しなくても PC 用に最適化された Web 画面を作ることが可能になります UI モジュールをインストールすると jquery UI を利用する環境が整いますので開発者は改めて jquery UI をインストールする必要はありません jquery UI の詳細については下記サイトを参照してください UI コンポーネント jquery UI を拡張したプラグインを利用した入力部品ですスクリプト開発向けタグライブラリの PC 版 UI コンポーネントを参照してください CSS モジュール全体で統一されたデザインの CSS を提供します詳細は CSS Module List を参照してくださいツールバーや表見出しなどを用意しています CSS Sprite アイコンを CSS Sprite として提供します詳細は CSS Sprite Image List の PC 向けを参照してください画面タイトル画面タイトルを指定しましょう H タグを使用します画面タイトルの HTML ソース <div class="imui-title"> <h> 画面タイトル </h> コラム CSS Module List の見出しでも HTML ソースを中心に情報公開を行っています h h の見出しを用意していますツールバーツールバーは画面を操作する処理リンクを配置します本章では画面タイトル下に配置するツールバーについて説明します

項目ツールバーの構成ツールバー実装例配置内容 HTML コーディング指定内容まとめ処理リンク / 処理アイコン配置方法まとめアイコンアイコン + 文字リンク文字リンクタブアイコン文字列区切り線処理リンクや表示切替など表示画面に対して操作を行う場合ツールバーを利用しましょう以下点を説明します. ツールバーの構成.

Module List のツールバーでも HTML ソースを中心に情報公開を行っています記述レベルは本書が詳細にわたっていますツールバーの構成ツールバーは複数の div で構成されます処理リンク処理アイコンはツールバー左右いずれかに配置しますツールバーの基本構成は以下のとおりです HTML ソース 0 <div class="imui-toolbar-wrap">[] <div

17 項目ツールバーの構成ツールバー実装例配置内容 HTML コーディング指定内容まとめ処理リンク / 処理アイコン配置方法まとめアイコンアイコン + 文字リンク文字リンクタブアイコン文字列区切り線処理リンクや表示切替など表示画面に対して操作を行う場合ツールバーを利用しましょう以下点を説明します. ツールバーの構成. 処理リンクの配置方法注意全機能でツールバーを必須ではありません配置するアイコンがつもない場合は不要です注意ではアイコンを CSS Sprite としてを用意しています CSS Sprite は UI モジュールのつです処理リンクや処理アイコンとして利用してくださいアストは CSS Sprite Image List の PC 向けを参照してくださいコラム CSS Module List のツールバーでも HTML ソースを中心に情報公開を行っています記述レベルは本書が詳細にわたっていますツールバーの構成ツールバーは複数の div で構成されます処理リンク処理アイコンはツールバー左右いずれかに配置しますツールバーの基本構成は以下のとおりです HTML ソース 0 <div class="imui-toolbar-wrap">[] <div class="imui-toolbar-inner">[] <ul class="imui-list-toolbar">[] <li><a href="#" class="imui-toolbar-icon" title=" 戻る "><span class="im-ui-icon-common--back"></span></a></li>[-] </ul> <ul class="imui-list-toolbar-utility">[] <li><a href="#" class="imui-toolbar-icon" title=" 最新情報 "><span class="im-ui-icon-common--refresh"></span></a></li>[-] </ul> Class 名配置先備考 imui-toolbar-wrap 外枠 imui-toolbar-inner 内枠 [] の中に配置 imui-list-toolbar ツールバー左側 [] の中に配置 imui-list-toolbar-icon 処理リンクまたは処理アイコン [] [] の中に配置 [-] [-] に CSS Sprite のクラスを指定しアイコン表示 imui-list-toolbar-utility ツールバー右側 [] の中に配置ツールバー実装例

18 配置内容名称場所構成用途 a 戻る左側の最左アイコン+ツールチップ前のページへ戻る b 区切り線任意区切り線区切り線として利用 c 処理リンク左側の中アイコン+ 文字リンク設定の処理リンクに利用 d タブアイコン左側の中アイコン+ツールチップタブ切替に利用 e 文字列左側の中文字列文字列表示に利用 f 最新表示右側の最右アイコン+ツールチップ ( 最新表示 ) 再表示 HTML コーディング上記を HTML コーディングすると以下のようになります <div class="imui-toolbar-wrap"> <div class="imui-toolbar-inner">  <ul class="imui-list-toolbar">  <li><a href="#" class="imui-toolbar-icon" title=" 戻る "><span class="im-ui-icon-common--back"></span></a></li>  <li class="icon-split"></li>  <li><a href="#" class="imui-toolbar-icon"><span class="im-ui-icon-common--settings mr-"></span> 設定 </a></li>  <li class="icon-split"></li>  <li><a href="#" class="imui-toolbar-tab"><span class="im-ui-icon-common--star"></span></a></li>  <li><a href="#" class="imui-toolbar-tab"><span class="im-ui-icon-common--search"></span></a></li>  <li><a href="#" class="imui-toolbar-tab"><span class="im-ui-icon-common--question"></span></a></li>  <li class="icon-split"></li>  <li class="imui-toolbar-text-only"> 文字列 </li>  <li><span class="imui-toolbar-text-only"> 文字列 </span></li>  <li class="icon-split"></li> </ul>  <ul class="imui-list-toolbar-utility">  <li><a href="#" class="imui-toolbar-icon" title=" 最新情報 "><span class="im-ui-icon-common--refresh"></span></a></li> </ul> 指定内容まとめ上記の指定内容をまとめると以下のようになります名称 <li> の class <a> の class <a> の title <span> の class 表示されるアイコン a 戻る imui-toolbar-icon 戻る im-ui-icon-common--back b 区切り線 icon-split c 処理リンク imui-toolbar-icon im-ui-icon-common--settings mr- [] b 区切り線 icon-split

19 名称 <li> の class <a> の class <a> の title <span> の class 表示されるアイコン d タブアイコン imui-toolbar-tab 各機能で指定 im-ui-icon-common--star im-ui-icon-common--search im-ui-icon-common--question b 区切り線 icon-split f 文字列 imui-toolbar-text-only [] imui-toolbar-text-only [] b 区切り線 icon-split e 最新表示 imui-toolbar-icon 最新表示 im-ui-icon-common--refresh [] アイコン+ 文字リンクの処理リンクはアイコンと文字リンクの間隔が狭くなってしまうため mr- クラスを指定します [] liタグ spanタグどちらかに imui-toolbar-text-only クラスを指定します [] liタグ spanタグどちらかに imui-toolbar-text-only クラスを指定します処理リンク / 処理アイコン配置方法まとめ処理リンク / 処理アイコンの配置の表現は以下の通りありますアイコンアイコン+ 文字リンク文字リンクタブアイコン文字列区切り線注意ツールバーは解像度 0 x で表示した際に行で収まるようにしてくださいダイアログの場合指定したウィンドウサイズで行で収まるようにしてください表示したい処理リンクが行で収まらない場合は以下の対応をしてください. 文字数を再考慮し収まるようにしてください. アイコンのみの表示とし文字はツールチップで表示してください注意本章ではツールバーに配置する場合の説明です汎用的な使用方法は処理リンク / 処理アイコンを参照してくださいアイコン以下のとおり HTML コーディングを行います <li><a href="aa" class="imui-toolbar-icon" title="bb"><span class="cc"></span></a></li> AA BB 遷移先を指定ツールチップの表示内容 CC CSS Sprite の class 指定注意アイコンのみの表示の場合ツールチップを指定しましょうアイコン + 文字リンク以下のとおり HTML コーディングを行います <li><a href="aa" class="imui-toolbar-icon"><span class="bb mr-"></span>cc</a></li> AA BB 遷移先を指定 CSS Sprite の class 指定 CC 文字リンクの表示内容文字リンク以下のとおり HTML コーディングを行います <li><a href="aa" class="imui-toolbar-icon">bb</a></li>

20 AA 遷移先を指定 BB 文字リンクの表示内容タブアイコン以下のとおり HTML コーディングを行います <li><a href="aa" class="imui-toolbar-tab" title="bb"><span class="cc"></span></a></li> AA BB 遷移先を指定ツールチップの表示内容 CC CSS Sprite の class 指定注意タブアイコンは以下つの class を用意しています未選択時用.imui-toolbar-tab マウスホバーするとアイコン下に薄いテーマカラーの下線が入ります active 時用.imui-list-toolbar-tab-selected アイコン下に濃いテーマカラーの下線が入ります使用方法では class の切り替えを行いません開発者にてクリックしたアイコンの a タグの class 属性に.imui-list-toolbar-tab-selected が addclass されるようプログラミングを行ってください文字列以下のとおり HTML コーディングを行います記述方法は通りあります <li class="imui-toolbar-text-only">aa</li> <li><span class="imui-toolbar-text-only">aa</span></li> AA 文字列を指定区切り線以下のとおり HTML コーディングを行います <li class="icon-split"></li> コンテンツエリアコンテンツエリアには入力フォームや一覧表などのコンテンツを配置します基本ルールは以下のとおりですコンテンツエリア内でコンテンツの塊ごとに div で囲みますコンテンツの内容に応じて見出しを配置しますコンテンツの内容に応じて構造化を意識して要素を配置しますコンテンツ配置に UIモジュールを利用しますコンテンツエリアは以下の順番に説明します見出し見出し <h> は画面タイトルやダイアログウィンドウのタイトルで使用していますコンテンツエリアでは <h> <h> を使って見出しをつけましょうで提供する以下の見出し <h> <h> は CSS Module List の見出しを参照してください. <div class= imui-chapter-title ><h> 見出しレベル</h>. <div class= imui-section-title ><h> 見出しレベル</h>. <div class= imui-subsection-title ><h> 見出しレベル</h>. <div class= imui-paragraph-title ><h> 見出しレベル</h>. <div class= imui-subparagraph-title ><h> 見出しレベル</h> テーブル 0

では UI モジュールとしてテーブルを用意しています下記以外の表を含め詳細は別ドキュメントの CSS Module List のテーブルを参照してください項目入力フォームのテーブル一覧テーブル検索条件 / 詳細検索セル内の位置 / 文字寄せ (align) 横並びの表縦並びの表文字寄せの CSS クラス名サイズ指定方法 HTML で table を記述する場合 ( スクロール無 )

21 では UI モジュールとしてテーブルを用意しています下記以外の表を含め詳細は別ドキュメントの CSS Module List のテーブルを参照してください項目入力フォームのテーブル一覧テーブル検索条件 / 詳細検索セル内の位置 / 文字寄せ (align) 横並びの表縦並びの表文字寄せの CSS クラス名サイズ指定方法 HTML で table を記述する場合 ( スクロール無 ) HTML で table を記述する場合 ( スクロール有 ) imuilisttable を使わない場合のソート順ソートキー指定例入力フォームのテーブル入力や選択項目がある場合は入力フォーム用テーブル table.imui-form を使用します詳細は別ドキュメントの CSS Module List の入力フォーム用テーブル table.imui-form を参照してください 0 <table class="imui-form"> <tr> <th><label> 項目 </label></th> <td><input type="text" name="item" /></td> </tr> <tr> <th><label> 項目 </label></th> <td><input type="text" name="item" /></td> </tr> </table> 項目名となる th の中には直接文字列を指定せず label の中に文字列を指定します一覧テーブル一覧画面などで使用するテーブルは imuilisttable を使います imuilisttable はページャーのや表示件数を表示カラムのソートなどの機能を備えています詳細は別ドキュメントの PC 版 UIコンポーネント imuilisttable を参照してください検索条件 / 詳細検索検索条件の指定を行う場合は検索条件用テーブル table.imui-form-search-condition を使用します詳細は別ドキュメントの CSS Module List の検索条件用テーブル table.imui-form-search-condition を参照してください

22 0 <table class="imui-form-search-condition"> <tr> <th><label> 項目 </label></th> <td><input type="text" name="item" /></td> </tr> <tr> <th><label> 項目 </label></th> <td><input type="text" name="item" /></td> </tr> </table> 項目名となる th の中には直接文字列を指定せず label の中に文字列を指定しますセル内の位置 / 文字寄せ (align) 横並びの表横並びの表は行目 : 項目行目以降 : データ入力フォーム部品処理アイコン処理リンクとなります文字の寄せは以下のとおりとします種類項目 ( 行 ) データ : 数値データ : 文字列データ : 処理アイコンデータ : 処理リンクデータ : 日付 / 日時データ : 区分 / コードチェックボックスラジオボタンアイコン ( 状態表示など ) 縦並びの表文字寄せ左寄せ右寄せ左寄せ中央寄せ中央寄せ左寄せ中央寄せ中央寄せ中央寄せ中央寄せ縦並びの表は列目 : 項目列目 : データ入力フォーム部品処理アイコン処理リンクとなります文字の寄せは以下のとおりとします種類項目 ( 列 ) 文字寄せ左寄せデータ : 数値右寄せ [] データ : 文字列データ : 処理アイコンデータ : 処理リンクデータ : 日付 / 日時データ : 区分 / コードチェックボックスラジオボタン左寄せ左寄せ左寄せ左寄せ左寄せ左寄せ左寄せアイコン ( 状態表示など ) 文字寄せの CSS クラス名左寄せ文字寄せを指定するには以下の CSS クラスを指定してください文字寄せ class 左寄せ不要 [] 中央寄せ align-c 右寄せ align-r [] ただし数値とその他の入力フォームラベルなどが左右に極端に離れてしまう場合数値の入力フォーム幅を小さくするなどし視線の移動が少なくなるように注意してください [] CSS の継承により左寄せにならない場合 align-l を指定してくださいコラム align-c align-r align-l はそれぞれ UI コンポーネントの CSS モジュールです

23 詳細は以下を参照してください CSS Module List の文字寄せ ( 左 ).align-l CSS Module List の文字寄せ ( 中央 ).align-c CSS Module List の文字寄せ ( 右 ).align-r サイズ指定方法テーブルのサイズ指定の方法は以下とします HTML で table を記述する場合 ( スクロール無 ). table. th. td a. width 指定不要です ( スタイルシートに指定があるため ) b. imui-form-container で囲みますまたは Bootstrap を使用します a. width はスタイルシートで準備されたクラスを使用します wd- wd-0 wd-px wd-px があります wd- は width:%!important; wd-0 は width:0%!important; が指定されますまたは Bootstrap を使用します a. 基本的にサイズを指定しませんコラム Bootstrap について Bootstrap の詳細は別サイト Bootstrap を参照してくださいテーブル全体で Bootstrap を使用する場合は該当のクラスを指定します HTML で table を記述する場合 ( スクロール有 ) つのテーブルを上下または左右に配置してスクロールを表示させるため td の width の幅を指定する必要があります px を指定しないと線のずれが発生するため style= width: 0px を指定してくださいコラム HTML の廃止タグ th 要素は HTML では abbr 属性 align 属性 axis 属性 char 属性 charoff 属性 height 属性 nowrap 属性 valign 属性 width 属性が廃止されています td 要素は HTML では abbr 属性 align 属性 axis 属性 char 属性 charoff 属性 height 属性 nowrap 属性 scope 属性 valign 属性 width 属性が廃止されてい imuilisttable を使わない場合のソート順テーブルのソートについて説明します以下は基本ルールとなります画面のユーザビリティが低下する場合は各画面にて仕様を決定してくださいまた画面仕様により機能単位で決定する場合は画面間の差異が発生しないよう注意しましょう一覧テーブルに複数列存在する場合はソートキーを第ソートキーまで指定しましょう初期表示のソートキーは画面表示の基準となります従って以下を実行時に初期表示と同じソートとなります検索ボタンを押下した場合最新表示アイコンを押下した場合ソートの順番は昇順から降順になります未ソート例を押下した場合昇順になりますコラム imuilisttable のソートについては別ドキュメントの PC 版 UI コンポーネント imuilisttable を参照してくださいソートキー指定例例 : ソートを実行した場合直前の第ソートキーが第ソートキーになります初期表示第ソートキー : ユーザ名昇順第ソートキー : ユーザコード昇順住所をクリック第ソートキー : 住所昇順第ソートキー : ユーザ名昇順電話番号をクリック第ソートキー : 電話番号昇順第ソートキー : 住所昇順例 : 第 X ソートキーを固定キーにします ( 以下更新日時は一覧表には非表示 ) 初期表示第ソートキー : ユーザ名昇順第ソートキー : 更新日時降順住所をクリック第ソートキー : 住所昇順第ソートキー : 更新日時降順電話番号をクリック第ソートキー : 電話番号昇順第ソートキー : 更新日時降順入力フォーム

24 本章では入力フォームの部品 ( テキストボックスやセレクトボックスなど ) について説明します項目入力フォーム全体 HTML コーディング実装例コンテナの違い入力フォーム部品入力フォーム部品の基本ルールテキストボックス (imuitextbox) パスワード(imuiPassword) テキストエリア (imuitextarea) チェックボックス (imuicheckbox) ラジオボタン(imuiRadio) セレクトボックス (imuiselect) 入力ヒント ( placeholder ) の表示 Tab キーによる移動順序 ( tabindex ) 文字寄せ ( align ) 必須入力の表記方法入力フォーム全体以下を推奨します登録 / 更新 / 参照画面 / 一覧画面は以下のコンテナいずれかで囲みます imui form container imui form container narrow imui form container wide HTML コーディング実装例 <div class="imui-form-container"> ここに表や入力フォームなどが配置されますコンテナの違い指定した class により枠の幅 (%) が変わります ( サンプル画像では style=height:00px を指定 ) imui form container imui form container narrow imui form container wide width:% width:0% width:0% コラム imui-form-container imui-form-container-narrow imui-form-container-wide は UI モジュールのつです別ドキュメントの CSS Module List のコンテナで説明しています入力フォーム部品本章で説明する部品一覧は以下の通りです名称 imart タグ生成される HTML タグ placeholder 属性 [] テキストボックス imuitextbox <input type= text /> パスワード imuipassword <input type= password /> テキストエリア imuitextarea <textarea></textarea> チェックボックス imuicheckbox <input type= checkbox /> - ラジオボタン imuiradio <input type= radio /> - セレクトボックス imuiselect <select></select> - [] [] placeholder は入力ヒント ( placeholder ) の表示を参照してください [] list の番目に入力ヒント ( placeholder ) を体言止めで記述します ( 例 : ロケールを選択 ) 注意上記以外に imuimultidragbox や imuirichtextbox などの入力フォーム部品も用意しています

25 スクリプト開発向けタグライブラリの PC 版 UI コンポーネントを参照してください入力フォーム部品の基本ルール入力フォーム部品の基本的な記述方法と基本ルールを説明します詳細はスクリプト開発向けタグライブラリのPC 版 UIコンポーネントを参照してくださいテキストボックス (imuitextbox) パスワード(imuiPassword) 外観と基本的な HTML ソース imuitextbox <imart type="imuitextbox" value=" テキストボックス " /> imuipassword <imart type="imuipassword" value="password" /> 注意詳細はスクリプト開発向けタグライブラリの PC 版 UI コンポーネントの imuitextbox imuipassword を参照してください共通ルール autofocus 属性は任意指定です画面表示時に番最初に入力してほしい部品に指定します例 : ログイン画面でユーザコードのテキストボックスに autofocus を指定します検索画面で検索文字列のテキストボックスに autofocus を指定します横幅の指定方法は以下の通りです style= width:000px; で指定します (000 は該当のサイズを指定してください ) size 属性は使用しません size 属性はブラウザによる表示の差異が発生します ( 表示フォントにも依存します ) maxlength 属性を指定します ( 一般ユーザのユーザビリティ向上の為に指定します ) class を指定せずに自動で角丸デザインが適用されます入力不可の場合 () readonly 属性を指定します例 : フローティングカレンダーからテキストボックスに入力します ( 直接編集は不可です ) 入力不可の場合 () readonly 属性を指定し class= imui-text-readonly を指定します (class= imui-text-readonly は線なし背景なしになります ) 例 : 登録画面で入力可能だった項目を参照画面編集画面で表示します入力不可の場合 () disabled 属性を指定します例 : ラジオボタンの選択値により入力制御をしますコラム上記の入力不可は imuitextbox imuipassword input type= text input type= password をそのまま利用する方法ですこれ以外に label タグと input type= hidden を組み合わせて入力不可にする方法もありますどちらの方法を採用しても問題ありませんが画面単位での統一を図るようにしてくださいテキストエリア (imuitextarea) 外観と基本的な HTML ソース <imart type="imuitextarea" value=" テキストエリア " /> 注意詳細はスクリプト開発向けタグライブラリの PC 版 UI コンポーネントの imuitextarea を参照してください共通ルール縦幅横幅の指定方法 style= width: 000px; height: 000px; で指定 (000 は該当のサイズを指定してください ) cols 属性 rows 属性は使用しません ( テキストボックスと合わせます )

class を指定せずに自動で角丸デザインが適用されます入力不可の場合テキストボックスに準拠します (class= imui-text-readonly は線なし背景なしになります ) チェックボックス (imuicheckbox) ラジオボタン (imuiradio) 外観と基本的な HTML ソース imuicheckbox <imart type="imuicheckbox"

26 class を指定せずに自動で角丸デザインが適用されます入力不可の場合テキストボックスに準拠します (class= imui-text-readonly は線なし背景なしになります ) チェックボックス (imuicheckbox) ラジオボタン (imuiradio) 外観と基本的な HTML ソース imuicheckbox <imart type="imuicheckbox" label=" ラベル " /> imuiradio <imart type="imuiradio" name="radio" label=" ラベル " /> <imart type="imuiradio" name="radio" label=" ラベル " /> <imart type="imuiradio" name="radio" label=" ラベル " /> 注意詳細はスクリプト開発向けタグライブラリの PC 版 UI コンポーネントの imuicheckbox imuiradio を参照してください共通ルール配置する際にスペースや HTML タグによる空白の調整は不要です CSS で margin: px px 0px 0px; を指定しています選択不可の場合テキストボックスに準拠しますセレクトボックス (imuiselect) 外観と基本的なソースサーバサイド JavaScript

27 0 0 0 var samplelist = [ { type: "group", label: " グループラベル ", list: [ { label: " ラベル ", value: "value", { label: " ラベル ", value: "value", { label: " ラベル ", value: "value" ], { label: " ラベル ", value: "value", { label: " ラベル ", value: "value", { label: " ラベル ", value: "value" ]; HTML ソース <imart type="imuiselect" list=samplelist /> 注意詳細はスクリプト開発向けタグライブラリの PC 版 UI コンポーネントの imuiselect を参照してくださいルール入力ヒントを記述しましょう表示方法 : optgroup(type: group ) を使用しリストの行目に表示します体言止めにしてください ( 例 : ロケールを選択 ) imuiselect をクリックしリストを表示すると optgroup が表示されます表示方法 : imuiselect の右側または近くにラベルで表示します基本的に体言止めとします ( 例 : ロケールを選択 ) ユーザビリティを考慮し敬体表示も可とします ( 例 : ロケールを選択してください ) 項目名で完結している場合は不要ですリストを生成する際のデータはソート順を指定して取得してください

28 入力ヒント ( placeholder ) の表示テキストボックスやテキストエリアの入力ヒント ( placeholder ) について説明しますソース例 <imart type="imuitextbox" placeholder=" ユーザ氏名ユーザカナを入力してください " /> 画面ルール placeholder ( プレースホルダー ) はテキストボックステキストエリアの入力欄に初期値として表示される文字列です入力ヒントや操作ヒントとして使用します placeholder が非表示の状態で入力内容がわからない場合は項目名の表示やラベルでヒントを明示してください placeholder の未対応のブラウザもあります width を placeholder に合わせる必要はありません入力桁数や画面デザイン ( 全体のテキストボックスの横幅 ) を考慮してください入力項目にラベルが無い画面の構成上ラベルが付けられない場合のヒント入力 OK: ユーザコードユーザ名を入力してください入力項目のラベルを見ても入力値が想像しづらい場合のヒント文章の場合は敬体 ( です / ます ) を推奨します入力 OK: 画面上に表示される名前ですスペース区切りで単語を複数指定できますユーザに入力フォーマットを指示する場合入力 OK: ( ハイフン不要 ) 000/0/0 YYYY/MM/DD( 例 : 0/0/0 ) 入力 NG: YYYY-mm-dd ( エンドユーザが利用する画面では専門用語は避けてください ) コラム xx して下さい ( 実質動詞 ) ではなく xx してください ( 補助動詞 ) と平仮名で記述します Tab キーによる移動順序 ( tabindex ) Tab キーによるフォーカスの移動順序を tabindex 属性について説明します基本的には tabindex の指定は不要です (Tab キーで移動は左上から右下に流れるため ) ただし画面の構造上フォーカス移動の順番を指定したい場合は tabindex を指定してください tab キーによる移動でフォーカスをあてたくない部品は tabindex= - を指定してください文字寄せ ( align ) 対象 : テキストボックステキストエリア文字の寄せは以下のとおりとします種類文字寄せ数値文字列日付 / 日時右寄せ左寄せ左寄せ区分 / コード左寄せ文字寄せを指定するには以下の CSS クラスを指定してください文字寄せ class 左寄せ不要 [] 中央寄せ align-c 右寄せ align-r [] CSS の継承により左寄せにならない場合 align-l を指定してくださいコラム align-c align-r align-l はそれぞれ UIコンポーネントのCSSモジュールです詳細は以下を参照してください CSS Module List の文字寄せ ( 左 ).align-l CSS Module List の文字寄せ ( 中央 ).align-c CSS Module List の文字寄せ ( 右 ).align-r 必須入力の表記方法入力項目が必須入力かどうか判別できるようにしましょう以下のように HTML に記述します HTML

29 0 <table class="imui-form"> <tbody> <tr> <th><label class="imui-required"> 必須項目 </label></th> <td><input type="text" name="item"></td> </tr> <tr> <th><label> 項目 </label></th> <td><input type="text" name="item"></td> </tr> </tbody> </table> 画面上には必須項目 * と表示されますコラムでは CSS クラスを用意しています以下が有効になります.imui-required: after { color: #e00; content: " *"; コラム CSS Module List の必須入力記号 label.imui-required にて同じ情報を公開していますボタン本章ではボタンの配置サイズについて説明します項目 imuibutton と CSS クラスでボタン作成ボタンのサイズ種類と CSS クラスボタン配置登録画面編集画面処理ボタン ( 登録 / 更新 / 削除ボタン ) 入力補助呼出しダイアログ検索画面 ( 検索条件エリア ) imuibutton と CSS クラスでボタン作成では UIコンポーネントとして imuibutton を用意していますまた CSSモジュールとしてボタンの複数サイズ用意しています本章では基本的なボタンの記述方法を説明します詳細は以下を参照してくださいスクリプト開発向けタグライブラリのPC 版 UIコンポーネントの imuibutton CSS Module List のボタン HTML 実装例 <imart type="imuibutton" value=" ボタン " class="imui-medium-button" /> 画面上には以下のように表示されますボタンのサイズ種類と CSS クラスボタンのサイズは種類用意しています以下にボタンの種類と CSS のクラスを下記にまとめますボタンの種類 class 画面上の表示

30 ボタンの種類 class 画面上の表示大 imui-large-button 中 imui-medium-button 小 imui-small-button 通常 imui-button コラムボタンは imuibutton の使用を推奨しますしかしやむをえず HTML タグの input タグ button タグを使用する場合上記の CSS クラスを使用してくださいの統一されたデザインのボタンを配置できますコラム CSS クラスの詳細は CSS Module List のボタンを参照してくださいボタン配置配置する順番は左から重要度頻度などが高いものから配置します登録画面編集画面処理ボタン ( 登録 / 更新 / 削除ボタン ) ボタンサイズボタンサイズの基本は大としますボタン配置画面下部の中央配置とします CSS Module List のボタン配置エリア.imui-operation-parts と組み合わせると簡単に配置できます下記の HTML ソースを参照してください <div class="imui-operation-parts"> <imart type="imuibutton" value=" 登録 " class="imui-large-button"> <div class="imui-operation-parts"> <imart type="imuibutton" value=" 更新 " class="imui-large-button"> <imart type="imuibutton" value=" 削除 " class="imui-large-button"> 入力補助呼出し連続登録が可能な登録画面は左から登録ボタン連続登録ボタンとします編集画面の配置順番は左から更新ボタン削除ボタンとします本章はボタンについての説明ですが本項に関しては関連する文字リンクなどもあわせて説明します入力補助画面を呼出し方法ボタン文字リンクアイコンアイコン + 文字リンクいずれかを使用しますボタンの場合ダイアログボタンサイズの基本は通常とします配置はテキストボックス等入力フォーム部品右隣とします文字リンクの場合配置はテキストボックス等入力フォーム部品右隣としますアイコンの場合配置はテキストボックス等入力フォーム部品右隣としますアイコンのみの処理ボタンの場合 title 属性を必ず指定します ( ユーザビリティ向上のため画像のみに意味を持たせないようにしてください ) アイコン + 文字リンクの場合配置はテキストボックス等入力フォーム部品右隣とします左からアイコン文字リンクの順に並べます処理ボタンボタンサイズボタンサイズの基本は中としますボタン配置配置は右下配置とします入力補助呼出し 0

31 登録画面に従います検索画面 ( 検索条件エリア ) 簡単検索ボタンサイズボタンサイズの基本は通常としますボタン配置配置はテキストボックス等入力フォーム部品右隣とします詳細検索ボタンサイズボタンサイズの基本は中としますボタン配置配置は右下配置とします処理リンク / 処理アイコン本章では処理リンク / 処理アイコンについて説明しますツールバーの処理リンク / 処理アイコン配置方法まとめではツールバーに関してのみ記述しています本章では汎用的に使用する処理リンク / 処理アイコンを説明します項目配置ルール処理アイコンの表現方法と実装例アイコンアイコン+ 文字リンク文字リンク文字リンクの CSS クラス配置ルール処理アイコン / 処理リンクは一覧テーブルの処理アイコン群一覧テーブルのセル入力フォーム等に使用します配置の優先度は左から重要度頻度などが高いものから順番に配置します処理アイコン / 処理リンクの周りは誤ってクリックしないよう空白を設けましょう反対の意味の処理アイコン / 処理リンクを配置する場合処理アイコン / 処理リンクのサイズを十分とってください処理アイコン / 処理リンクの周りに空白をおくようにします px x px のアイコンは小さいためユーザによりわかりづらかったり誤った操作が発生することがありますよってアイコン + 文字リンクを推奨します処理アイコン / 処理リンクの隙間を 0px 以上開けてください処理アイコンの表現方法と実装例処理リンク / 処理アイコンの配置の表現は以下の通りあります表現方法アイコンアイコン + 文字リンク文字リンク以下は処理リンク / 処理アイコンをつ並べた場合とつ並べた場合の実装例です ml- ml-0 は空白を設けるための調整用です必要に応じて使用します複数配置する場合や一覧表の左上に配置する場合は CSS Module List の操作リストエリア.imui-operation-list の中に <ul> を使って記述しますアイコン以下のとおり HTML コーディングを行いますつの場合 <a href="aa" title="bb"><span class="cc"></span></a> つの場合 <div class="imui-operation-list"> <ul> <li><a href="aa" class="ml-" title="bb"><span class="cc"></span></a></li> <li><a href="aa" class="ml-0" title="bb"><span class="cc"></span></a></li> </ul>

32 AA 遷移先を指定 BB ツールチップの表示内容 CC CSS Sprite の class 指定注意アイコンのみの表示の場合ツールチップを指定しましょう国によって記号やジェスチャの考え方が異なるため誤解を招かないための対策としてくださいアイコン + 文字リンク以下のとおり HTML コーディングを行いますつの場合 <a href="aa" class="mr-"><span class="bb mr-"></span>cc</a> つの場合 <div class="imui-operation-list"> <ul> <li><a href="aa" class="ml-"><span class="bb mr-"></span>cc</a></li> <li><a href="aa" class="ml-0"><span class="bb mr-"></span>cc</a></li> </ul> AA BB 遷移先を指定 CSS Sprite の class 指定 CC 文字リンクの表示内容文字リンク以下のとおり HTML コーディングを行いますつの場合 <a href="aa">bb</a> つの場合 <div class="imui-operation-list"> <ul> <li><a href="aa" class="ml-">bb</a></li> <li><a href="aa" class="ml-0">bb</a></li> </ul> AA 遷移先を指定 BB 文字リンクの表示内容文字リンクの CSS クラスは文字リンクを種類用意しています通常 a タグを指定すると自動で青字 (hover で+ 下線 ) となりますよって通常の文字リンクにおいては CSS クラスの指定は不要になりますただし表現箇所により黒字青字をあえて指定する場合は下記を指定してください ( 例 : メニューでグラデーションがあるので文字色不要 class= imui-unaccented を指定してください ) 種類 class 指定なし class= imui-accent class= imui-unaccented デフォルト青字青字黒字訪問済青字青字黒字未訪問青字青字黒字マウスオーバ淡青字 + 下線淡青字 + 下線濃灰色字 + 下線アクティブ淡青字 + 下線淡青字 + 下線濃灰色字 + 下線コラムツールバーでは文字リンクは黒字になります青字にしたい場合は a タグに class= imui-accent を指定します <a href="aa" class="imui-accent">bb</a> 以下の外部ドキュメントにて情報公開しています CSS Module List の文字リンク ( 標準色 ) a.imui-accent

33 CSS Module List の文字リンク ( 黒文字 ) a.imui-unaccented エンターキー押下時のフォームの動作本章ではサブミットについて説明します項目 form のサブミット方法エンターキー押下時にサブミットさせる form のサブミット方法 form のサブミットを行うにはいくつかの方法がありますがでは以下の方法でサブミットします imuibutton または input type= button を配置します click イベントで form.submit() を実行します imuiajaxsend を実行します imuiajaxsubmit を実行します input type= submit はお勧めしません理由は以下の通りですエンターキー押下でサブミットされる imuiconfirm を呼び出そうとしてもサブミットが先に実行されてしまい確認ダイアログが表示されないもし input type= submit を利用する際には以下のとおり onsubmit 属性で return false; を記述してください <form onsubmit="return false;">... </form> エンターキー押下時にサブミットさせる検索画面などでエンターキー押下時にサブミットさせたいときは input type= submit を利用しましょうただし form のサブミット方法で注意書きした通り imuiconfirm を呼び出そうイアログが表示されないことに注意してください <form> <input type="submit"/> </form> アラートとコンファーム本章はアラートとコンファームについて説明します項目実装方法 imuialert imuiconfirm と messagedialog の違いボタン配置ダイアログのタイトル表示アイコンメッセージルールコンファームの画面例注意ではデザイン統一のために基本的に window.alert と window.confirm を利用しません実装方法 window.alert() にあたる警告ダイアログはクライアントサイド JavaScript の imuialert を使用します window.confirm() にあたる確認ダイアログはクライアントサイド JavaScript の imuiconfirm を使用しますその他はクライアントサイド JavaScript の imuimessagedialog を使用します

34 imuialert imuiconfirm と messagedialog の違い imuialert imuiconfirm と messagedialog の違いは以下の通りです UIコンポーネント名 imuialert imuiconfirm messagedialog アイコンの変更不可不可可能ボタンのラベル変更不可不可可能ボタンの数変更不可不可可能ボタンの数一つ二つ任意 imuialert は警告メッセージを表示したい時に使用します決定ボタンを表示します imuiconfirm は確認メッセージを行いたい時に使用します決定ボタンと取り消しボタンを表示します messagedialog は上記の UI コンポーネントで表現できないメッセージを表示する時に使用しますボタン配置 imuialert imuiconfirm の場合ボタンの配置は変更できません messagedialog の場合決定決定取り消しのボタンを配置しますただし画面の内容に対しボタン名が合わない場合は入力確定登録など変更しますボタン名は機能内で統一しますダイアログのタイトル入力エラー登録確認のように体言止めで設定します表示アイコン imuialert imuiconfirm の場合以下のアイコンが表示されます変更はできません表示アイコン UIコンポーネント名メッセージ例 imuialert imuiconfirm 削除対象の XXX を選択してください登録しますよろしいですかコラム詳細はクライアントサイド JavaScript の以下を参照してください imuialert imuiconfirm messagedialog の場合アイコンは CSS Sprite の class を指定しますアイコンとメッセージの関連付けは以下で統一します表示アイコン意味処理を続行できない失敗エラーなどユーザ操作により処理を続行できる警告などメッセージ例処理に失敗しました登録できませんでした削除対象の XXX を選択してください正常成功など処理が正常に終了処理に成功しました登録しました確認などユーザ操作の続行を確認登録しますよろしいですか CSS Sprite の指定方法 span タグの class 属性に CSS Sprite の class 名を指定します <span class="css Sprite の class 名 "></span> が提供するアイコンリストは CSS Sprite Image List の PC 向けを参照してくださいアイコンサイズは pxを用意しています画面によりサイズを選んでくださいメッセージ性を伝えるために px または px をおすすめします以下に表示アイコンに対して該当の CSS Sprite の class 名 ( px ) をまとめました

35 表示アイコン CSS Sprite の class 名 im-ui-icon-common--error im-ui-icon-common--warning im-ui-icon-common--confirmation im-ui-icon-common--question コラム imuimessagedialog の詳細はクライアントサイド JavaScript の imuimessagedialog を参照してくださいメッセージルールメッセージの文章は敬体ですますで文章を記載します画面遷移本章では画面遷移について説明します項目作成ルール画面遷移パターン ( 基本編 ) 新規登録画面更新画面削除画面編集画面で削除一覧画面で削除注意事項画面遷移パターン ( 応用編 ) 新規登録画面 ( 確認画面有 ) 編集画面 ( 確認画面有 ) 参照画面 ( 例外 ) 画面遷移データ保持検索条件ページ番号ページ件数ソート順登録画面 / 編集画面例外的処置作成ルール以下はの画面遷移の基本ルールですは参照画面を用意しませんデータの参照は更新画面で行います画面遷移図のは処理確認のコンファームですトランザクションが発生する場所では表示することを推奨しますただし連続登録をする場合などユーザビリティが低下する箇所はコンファーム不要とします新規登録画面 / 更新画面の呼び出しは画面遷移 / ダイアログウィンドウどちらでも可能ですただし各要件での統一をしてください画面遷移パターン ( 基本編 ) 画面遷移で基本的なものを画面種類ごとに説明しますコラム画面遷移図のは処理確認のコンファームですコンファームの詳細はアラートとコンファームを参照してください新規登録画面新規登録画面から画面遷移するパターンは以下のようになります

アイコン一覧表の編集列文字リンク戻るアイコン削除ボタン一覧表の任意列ツールバー画面下部中央一覧画面で削除配置内容削除アイコン配置場所一覧表の削除列一括削除リンク一覧表の左上注意事項削除方法は

36 配置内容配置場所新規登録リンクツールバー戻るアイコン登録ボタンツールバー画面下部中央更新画面更新画面画面から画面遷移するパターンは以下のようになります配置内容配置場所編集アイコン一覧表の編集列文字リンク戻るアイコン更新ボタン一覧表の任意列ツールバー画面下部中央削除画面編集画面と削除画面でそれぞれの画面遷移するパターンは以下のようになります編集画面で削除配置内容配置場所編集アイコン一覧表の編集列文字リンク戻るアイコン削除ボタン一覧表の任意列ツールバー画面下部中央一覧画面で削除配置内容削除アイコン配置場所一覧表の削除列一括削除リンク一覧表の左上注意事項削除方法はユーザビリティ考慮してどちらか一方でも双方配置も可能ですただし利用ユーザの単位や機能のまとまりを考慮してくださいマスタ画面 A では編集画面で削除マスタ画面 B では一覧で削除だとユーザに違和感を与えます画面遷移パターン ( 応用編 )

業務システムの利用方法を考慮した場合下記確認画面を挟む画面遷移を選択することも考慮します確認画面を挟む事で一度ユーザに入力内容を考えさせることも可能です新規登録画面 ( 確認画面有 ) 確認ダイアログがある場合の新規登録画面からの画面遷移は以下のようになります編集画面 ( 確認画面有 ) 確認ダイアログがある場合の編集画面からの画面遷移は以下のようになります参照画面 ( 例外 )

37 業務システムの利用方法を考慮した場合下記確認画面を挟む画面遷移を選択することも考慮します確認画面を挟む事で一度ユーザに入力内容を考えさせることも可能です新規登録画面 ( 確認画面有 ) 確認ダイアログがある場合の新規登録画面からの画面遷移は以下のようになります編集画面 ( 確認画面有 ) 確認ダイアログがある場合の編集画面からの画面遷移は以下のようになります参照画面 ( 例外 ) の基本ルールでは参照画面を用意しませんしかし各機能内で用意する時は下記遷移方法とします画面遷移データ保持画面遷移時にデータ保持は次画面まで保持とします詳細は以下のとおりとします検索条件一覧画面から遷移した画面で戻るクリック時保持した状態を表示します登録 / 更新 / 削除ボタンクリック後一覧画面が表示された時初期表示としますページ番号ページ件数ソート順一覧画面から遷移した画面で戻るクリック時保持した状態を表示します登録 / 更新 / 削除ボタンクリック後一覧画面が表示された時初期表示としますページャの操作時はページ件数ソート順を保持します登録画面 / 編集画面確認画面を設けた場合確認画面から戻った時保持した状態を表示します登録 / 更新 / 削除ボタンクリック後一覧画面が表示された時初期表示とします例外的処置ユーザビリティが低下する場合はデータ保持をしてください例 : 一覧で searchitem の入ったデータを一括削除したい searchitem 検索ページ上全選択削除を繰り返します searchitem 検索の後ページ上全選択削除を繰り返しますエラー処理バリデーション jquery Validation を利用したクライアント側でのバリデーションをかけることができますバリデーションをかける場合通常はクライアント側とサーバ側の両方にバリデーションを実装します

38 Jssp Validator と連携するとサーバ側に設定ファイルを書くだけでサーバ側とクライアント側の両方に共通なバリデーションをかけられることになりますなおクライアント側だけで完結させることも可能ですこの場合は jquery Validation の記述方法に則ったルールメッセージをクライアント側で実装することになります注意 Jssp Validator はスクリプト開発モデルのみで利用できます項目前提 JSSP Validation と連携する場合実装例バリデーション設定ファイルの記述 imuivalidationrule タグの記述 imuivalidation 関数の記述クライアント側だけで完結させる場合実装例必須チェックに該当した場合最小長さチェックに該当した場合バリデーションをリセットする方法前提バリデーションは jquery Validation Plugin を利用しますライブラリは自動的に読み込まれませんバリデーションを利用する際は以下のような実装を行ってください <imart type="head"> <script src="ui/libs/jquery-validation-..0/jquery.validate.js"></script> </imart> JSSP Validation と連携する場合 Jssp Validator の設定ファイルをクライアント側に読み込み jquery Validation Plugin の設定に変換することでサーバ側とクライアント側とでバリデーションのルールを共有することができま共有するにはバリデーション設定ファイルの記述 imuivalidationrule タグの記述 imuivalidate 関数の呼び出しが必要です注意 JSSP Validationに独自に追加したバリデーションルールはクライアント側で共有することができませんクライアント側で同じバリデーションを行いたい場合はクライアント側でも同様のルールを定義してくださいクライアント側のカスタムバリデーションについてはクライアントサイド JavaScript の imuiaddvalidationrule を参照してください実装例以下のような HTML を例に取り user_cd に対して user_cd バリデーションをかけます <div class="imui-form-container"> <form id="sampleform" name="sampleform"> <input type="text" name="user_cd"/> <input type="button" id="validate-button" value="validate"/> </form> バリデーション設定ファイルの記述項目 user_cd に対して usercd バリデーションをかけるというバリデーション設定ファイルを作成しますバリデーション設定ファイルとして以下のようなファイルを WEB-INF/jssp/src/validator/sample.js として保存します設定ファイルの内容の詳細はバリデーションルールを参照してください var init = { 'user_cd': { caption: 'user_cd', usercd: true コラム JSSP Validator の file mimetype ルールはクライアントサイド JavaScript バリデーション ( imuivalidate ) では動作しませんので注意してください imuivalidationrule タグの記述

39 imuivalidationrule 上記で作成したバリデーション設定ファイルを読み込むために imuivalidationrule タグを HTML に追記します imuivalidationrule タグの rule 属性にバリデーション設定ファイルのパスを指定しますまた後述の imuivalidate 関数の引数となる rulesname, messagesname 属性も指定します 0 <imart type="head"> <script src="ui/libs/jquery-validation-..0/jquery.validate.js"></script> <imart type="imuivalidationrule" rule="validator/sample#init" rulesname="rules" messagesname="messages"></imart> </imart> <div class="imui-form-container"> <form id="sampleform" name="sampleform"> <input type="text" name="user_cd"/> <input type="button" id="validate-button" value="validate"/> </form> コラム imuivalidationrule タグは script タグを出力するので script タグの内部に書いてはいけません imuivalidation 関数の記述バリデーションを実行するため imuivalidate 関数の呼び出しを追記します imuivalidate 関数の引数に form の id imuivalidationrule タグの rulesname messagesname に指定した値のつを指定します 0 <imart type="head"> <script src="ui/libs/jquery-validation-..0/jquery.validate.js"></script> <imart type="imuivalidationrule" rule="validator/sample#init" rulesname="rules" messagesname="messages"></imart> <script type="text/javascript"> jquery(document).ready(function() { jquery('#validate-button').click(function() { imuivalidate('#sampleform', rules, messages); ); ); </script> </imart> <div class="imui-form-container"> <form id="sampleform" name="sampleform"> <input type="text" name="user_cd"/> <input type="button" id="validate-button" value="validate"/> </form> テキストボックスにひらがなを入力し validate ボタンをクリックするとエラーが表示されますクライアント側だけで完結させる場合クライアント側だけで完結させる場合 jquery Validation Plugin のルールメッセージの指定の仕方に則って実装します使用できるバリデーションルールはバリデーション設定ファイルと同様です実装例バリデーションのルールとバリデーションの結果チェックにかかった場合のメッセージを指定します指定しない場合メッセージは英語で表示されます

40 0 var rules = { user_cd: { required: true, minlength:, ; var messages = { user_cd: { required: ' 必須です ', minlength: ' 少なくとも文字必要です ' ; imuivalidate( '#account', // 送信するフォームのID rules, // バリデーションルール messages // バリデーションメッセージ ); 上記のように指定した場合 user_cd のバリデーションルールに該当した際に同じキーのメッセージが表示されます必須チェックに該当した場合最小長さチェックに該当した場合バリデーションをリセットする方法 imuivalidate を実行すると対象フォームに対し常にチェックをかけるようになるため一度投稿処理をしてからでも画面を再読込みしない限り常にチェックがかかりますこの動作を変える必要がある場合 imuiresetform メソッドでチェックをかけた form を初期化してください... // バリデーションチェック if (imuivalidate('#form', rules, messages)) { // バリデーションチェックに成功したら投稿処理 dosomething(); // バリデーションのリセット imuiresetform('#form');... 汎用メッセージ画面アプリケーション内で発生したエラーによっては回復不能な場合がありますこのような場合に表示する画面とその画面に遷移するための API を提供します項目 API 実装例汎用エラー画面表示後の戻り先画面汎用エラー画面の戻るボタンを表示する場合エラー画面の戻るボタンを表示しない場合 API 表示できるメッセージ表示画面の種類その画面に遷移するための API は以下のとおりですエラー Transfer.toErrorPage 警告 Transfer.toWarningPage インフォメーション Transfer.toInformationPage メッセージ表示画面に表示できるのは以下つですタイトルメッセージ詳細なエラーメッセージまたメッセージ表示画面表示後の遷移先を指定することも可能です 0

41 遷移先 URL 遷移先 URL のラベルを指定すると画面遷移のボタンが表示されます遷移先 URL へ引き渡すパラメータを指定するとそのパラメータが遷移先に引き渡されますメッセージ表示画面へはリダイレクトを利用して遷移します実装例エラー画面へ遷移するための例を示しますパラメータの詳細は API リファレンスを参照してください 0 function error(request) { Transfer.toErrorPage({ title: ' タイトル ', message: ' メッセージ ', detail: [' 詳細メッセージ ', ' 詳細メッセージ '], returnurl: '/login', // 戻り先 URL returnurllabel: ' ログイン画面へ戻る ', parameter: { key: 'value', list: ['','',''] ); コラム上記パラメータのメッセージは多言語対応していません多言語対応したい場合は MessageManager から取得したメッセージをセットしてくださいコラムテーマを適用させたくない場合には API を呼び出す前に request.setattribute( imui-theme-builder-module, notheme ) を実行しテーマを適用しないようにしてください汎用エラー画面表示後の戻り先画面汎用メッセージ画面の仕組みで表示したエラー画面の戻り先を説明します注意本章は基本ルールです個別の機能の事情で従うのが無理な場合は従う必要はありませんただし機能内での統一性は担保してください汎用エラー画面の戻るボタンを表示する場合 ( 例 ) メニュー一覧画面登録/ 更新画面の様な画面遷移登録/ 更新画面でエラーが発生し汎用エラー画面に遷移した場合エラーが発生した画面の遷移元に戻る ( 一覧画面 ) 遷移元が複数階層ある場合は ( 可能であれば ) エラーが発生した画面に一番近い遷移元に遷移しますエラー画面の戻るボタンを表示しない場合 ( 例 ) メニュー一覧画面登録/ 更新画面の様な画面遷移一覧画面でエラーが発生し汎用エラー画面に遷移した場合戻るボタンを表示しません Ajax のエラー処理 Ajax の通信先で回復不能なエラーが発生した場合エラー画面へ遷移したい場合がありますここではこのような場合にエラー画面へ遷移するための仕組みと実装方法を説明します

42 項目エラー画面へ遷移するための仕組み実装方法独自のエラー処理をしながらエラー画面へ遷移したいエラー画面へ遷移するための仕組みサーバ側で例外が発生すると httpxxx.jsp(http00.jsp, http0.jsp など ) が呼び出されます Ajax のリクエストの場合 httpxxx.jsp のレスポンスは Ajax 内で閉じるため画面にエラーが表示されません Ajax のリクエストでもエラー画面に遷移するため以下のような仕組みを実装しています. Ajax のリクエストを送る際に HTTP Header へ x-jp-co-intra-mart-ajax-request-from-imui-form-util = true をセットする. サーバで例外が発生した際 httpxxx.jsp は HTTP Header へ x-jp-co-intra-mart-ajax-request-to-imui-form-util = true をセットしエラー情報を JSON としてレスポンスを返す. $.ajax の error: で x-jp-co-intra-mart-ajax-request-to-imui-form-util が HTTP Header に存在する場合エラー情報をパースしエラー情報を Form にセットして元の画面 (httpxxx ミットする. 画面にサーバで発生した例外が表示される実装方法 jquery.ajax の headers, error に以下のように指定します $.ajax({..., headers: { 'x-jp-co-intra-mart-ajax-request-from-imui-form-util': 'true', error: imuitransitiontoerrorpage,... ); このように実装することでサーバで例外が発生した際にエラー画面へ遷移させることができます独自のエラー処理をしながらエラー画面へ遷移したい上記サンプルではエラー画面へ遷移するだけで他の処理はしません独自の処理を追加したい場合は以下のように実装することができます 0 $.ajax({..., headers: { 'x-jp-co-intra-mart-ajax-request-from-imui-form-util': 'true', error: function(xmlhttprequest, textstatus, errorthrown) { // // 独自の処理を実行 // imuitransitiontoerrorpage(jqxhr, textstatus, errorthrown);,... ); 国際化情報入力項目本章では国際化入力について記載します項目国際化情報の入力登録更新について入力項目の表示に関して国際化入力項目の仕様入力項目が全て必須かつ項目数が少ない場合入力項目が一部必須または項目数が多い場合画面からの入力および登録更新処理に関してバリデーションチェック実装例 validator.js ( サーバサイド JavaScript ) page.js( サーバサイド JavaScript ) page.html ( クライアントサイド JavaScript HTML) ajax.js ( サーバサイド JavaScript )

国際化情報の入力登録更新についてここでは入力登録更新する場合の国際化情報についてを説明しますでもこの処理例を利用しています入力項目の表示に関して国際化入力項目の仕様国際化入力項目が必須入力の場合標準表示名とシステムにインストールしているロケール分の入力項目を用意します例 : 日本語ロケール英語ロケールに対応する場合標準表示名日本語英語のつの入力項目が表示されます

43 国際化情報の入力登録更新についてここでは入力登録更新する場合の国際化情報についてを説明しますでもこの処理例を利用しています入力項目の表示に関して国際化入力項目の仕様国際化入力項目が必須入力の場合標準表示名とシステムにインストールしているロケール分の入力項目を用意します例 : 日本語ロケール英語ロケールに対応する場合標準表示名日本語英語のつの入力項目が表示されます項目の表示順標準表示名テナントのデフォルトロケールその他のロケールの順番に表示しますテナントのデフォルトロケール以外の並び順は SystemLocale#getLocaleInfos() が返した順になりますテナントのデフォルトロケールが設定されていない場合はシステムデフォルトのロケールになります標準表示名を必須項目とします各ロケールは任意入力項目とします各ロケールが未入力の場合標準表示名が有効になります入力項目が全て必須かつ項目数が少ない場合標準表示名とシステムにインストールしているロケール分入力項目をすべて表示しますデフォルトロケール以外の言語ロケールをあらかじめ隠しておくなどの処理は一切しません入力項目が一部必須または項目数が多い場合標準表示名のみ表示しサーバ側のロジックで各ロケールに何を登録するか決定しますコラム国際化情報の対応を行う場合は表示する文字列をプロパティファイルで管理します入力項目と同様に標準表示名とロケール毎に管理します詳細はスクリプト開発モデルプングガイドの多言語対応を参照してください画面からの入力および登録更新処理に関して国際化入力項目が必須入力の場合標準表示名は必須入力各ロケールは任意入力とします任意入力の項目に何も入力されなかった場合は標準表示名の項目値と同じ値が入力されたものとみなします登録更新時任意項目が未入力の場合標準表示名より該当する項目の内容をコピーしますコピー処理はサーバサイド JavaScript 側で行います API 内部でコピーは行ってはなりません任意入力の国際化入力項目値を補完はサーバサイド JavaScript 側で行いますバリデーションチェック国際化入力項目等動的に変化する項目に関してはクライアントサイド JavaScript とサーバサイド JavaScript で独自チェックしますそれ以外の固定的な項目は通常どおり JS Validation を利用したチェックをします実装例 validator.js ( サーバサイド JavaScript ) バリデーションルールを記述します国際化入力項目は required = true に設定しておきます

44 0 var init = { dataid : { caption: MessageManager.getMessage("CAP.UI.DEFAULT.LABEL"), required: true, maxlength:, dataname : { caption: MessageManager.getMessage("CAP.UI.FACILITY.CATEGORY.NAME"), maxlength: ; page.js( サーバサイド JavaScript ) テナントデフォルト言語またはシステムデフォルト言語が上に来るように調整します 0 0 var $result = {; function init(request) { getlocaleinfo($result); function getlocaleinfo(obj) { var tenantinfomanager = new TenantInfoManager(); obj.defaultlocaleid = tenantinfomanager.gettenantinfo(true).data.locale; if (isblank(obj.defaultlocaleid)) { obj.defaultlocaleid = SystemLocale.getDefaultLocaleInfo().data.locale; obj.locales = []; var localeinfos = SystemLocale.getLocaleInfos().data; for (var i = 0; i < localeinfos.length; i++) { if (obj.defaultlocaleid == localeinfos[i].locale) obj.locales.push({ id:localeinfos[i].locale, name:localeinfos[i].displayname ); for (var i = 0; i < localeinfos.length; i++) { if (obj.defaultlocaleid!= localeinfos[i].locale) obj.locales.push({ id:localeinfos[i].locale, name:localeinfos[i].displayname ); page.html ( クライアントサイド JavaScript HTML) バリデーションルールメッセージの読み込みと動的バリデーションの設定をしますサーバ側に国際化項目を送る場合はベースとなる値 ( デフォルト言語 ) と全言語分を個別で送りますこれによりデフォルト言語の必須と長さを自動でチェックできます <imart type="head"> <script src="ui/libs/jquery-validation-..0/jquery.validate.js"></script> <imart type="imuivalidationrule" rule="sample/validator#init" rulesname="validaterules" messagesname="validatemessages" /> <script type="text/javascript"> jquery(function() { // 生成されたテキストボックスに name 属性を付与します jquery("#input_form [name=datanames] input").each(function() { var newname = "dataname_" + jquery(this).attr("locale"); var caption = jquery(this).parent().prev().text(); jquery(this).attr("name", newname); // 付与した name 属性に対するバリデーションを追加します validaterules[newname] = {caption:caption, caption :caption,maxlength: ; ); jquery("#submit-button").click(function() { // クライアントサイドのバリデーションチェックを行います if (imuivalidate("#input_form", validaterules, validatemessages)) { var names = {; jquery("#input_form [name=datanames] input").each(function() { names[jquery(this).attr("locale")] = jquery(this).val(); ); jquery.ajax({ type: "POST", url: "sample/ajax", datatype: "json", data: { dataid: jquery("#input_form [name=dataid]").val(),

45 dataid: jquery("#input_form [name=dataid]").val(), dataname: jquery("#input_form [name=datanames] input:first").val(), datanames: ImJson.toJSONString(names), success: function(result) { if (result.error) { imuishowerrormessage(result.errormessage, result.detailmessages); return; else { imuishowsuccessmessage(result.successmessage);, error: function(request, textstatus, errorthrown) { imuishowerrormessage(request.statustext + "(" + request.status + ")", ""); ); ); ); </script> </imart> <form id="input_form" onsubmit="return false;" class="imui-form-container"> <table class="imui-form"> <tbody> <tr> <th class="wd-0"><label><imart type="message" id="cap.ui.facility.category.name" escapexml="true" escapejs="false" /></label></th> <td> <table class="imui-form" > <tbody> <tr> <th class="wd-0"><label class="imui-required" data-locale="<imart type="string" value=$bind.defaultlocaleid escapexml="true" escapejs="false" />"><imart type="message" id=" <td><imart type="imuitextbox" name="dataid" style="width: 00px;"/></td> </tr> <tr> <td colspan=""><imart type="message" id="cap.ui.description.locale.setting" escapexml="true" escapejs="false" /></td> </tr> </tbody> </table> <table class="imui-form" name="datanames"> <tbody> <imart type="repeat" list=$result.locales item="record"> <tr> <th class="wd-0"><label><imart type="string" value=record.name /></label></th> <td><imart type="imuitextbox" locale=record.id style="width: 00px;" /></td> </tr> </imart> </tbody> </table> </td> </tr> </tbody> </table> <div class="imui-operation-parts"> <imart type="imuibutton" id="submit-button" value="%cap.ui.act.registration" class="imui-large-button" /> </form> ajax.js ( サーバサイド JavaScript )

47 /** request sample/validator#init handleerrors */ function init(request) { // 国際化項目のみ追加チェック ( 必須チェック済なので長さチェックのみ ) var datanames = isblank(request.datanames)? { : ImJson.parseJSON(request.dataNames); for (var localeid in datanames) { var dataname = datanames[localeid]; var result = {; if (isstring(dataname) && dataname.length > ) { // バリデーションエラー result = { error: true, successmessage: "", errormessage: MessageManager.getMessage('MSG.E.IWP.ASYNC.TASKQUE.ADD.SERIESQUEUE.INPUT'), detailmessages: MessageManager.getMessage("MSG.W.IWP.JSSP.VALIDATION.MAXLENGTH", MessageManager.getMessage("CAP.UI.FACILITY.CATEGORY.NAM ; sendjsonstring(result, result.errormessage, result.detailmessages); return; result.error = false; sendjsonstring(result, MessageManager.getMessage('CAP.UI.SUCCESS.MESSAGE')); function handleerrors(request, validationerrors) { let result = { error: true, successmessage: '', errormessage: MessageManager.getMessage('MSG.E.IWP.ASYNC.TASKQUE.ADD.SERIESQUEUE.INPUT'), detailmessages: validationerrors.getmessages() ; sendjsonstring(result, result.errormessage, result.detailmessages); function sendjsonstring(result, message, detailmessages) { message = (message == null)? '' : message; detailmessages = (detailmessages == null)? '' : detailmessages; var response = Web.getHTTPResponse(); response.setcontenttype('application/json; charset=utf-'); response.sendmessagebodystring(imjson.tojsonstring({ error: result.error, successmessage: result.error? '' : message, errormessage: result.error? message : '', detailmessages: result.error? detailmessages : '' )); HTML / CSS コーディング Tips 本章では HTML/CSS コーディングの Tips を記載します

48 項目ブロック要素を横に並べたい div を横に並べたい対処方法実装例文字リンクを青字 / 黒字にしたい仕様対処方法実装例オペレーションボックスにタイトルバー / ツールバーを配置したい対処方法実装例 imuidialog にツールバーを配置したい対処方法テーマカラーを border 背景色とし使用したい対処方法実装例画面にページの説明文を配置したい対処方法実装例補足ブロック要素を横に並べたい div を横に並べたい対処方法親要素に clearfix のクラス子要素に float 用のクラスを指定してください実装例 HTML <div class="imui-box-operation cf ()"> <div class="float-l ()pl-0 ()"> <imart type="imuitextbox"/> <imart type="imuibutton" value=" 検索 "/> <imart type="imuibutton" value=" クリア "/> () cf clearfix クラス各ブラウザでブロック要素の回り込みを解除 () float-l float 用クラス float:left が入ります右に配置する場合は float-r クラスを指定 () pl-0 assist クラス padding-left:0px が入る..HTML コーディングでは子要素つめに float: left を入れると clear するまで継承されるが画面開発では各子要素に入れるようにしてください..pl-0 が正しくとられなかったり div がす文字リンクを青字 / 黒字にしたい仕様以下は青字 ( マウスオーバー時淡青字 + 下線 ) になります a タグ class 指定なし以下のテーブル imui-table-box imui-table table imui-table-calendar imui-table-sort imui-table-mixed imui-table-inner imui-form imui-form-search-condition 以下のテーブルの td imui-table-sort

49 以下は黒字 ( マウスオーバー時濃灰色字 + 下線 ) になります * ツールバーの文字リンク対処方法黒字の文字リンクをあえて青字にしたい場合 <a class= imui-accent > を指定してください青字の文字リンクをあえて黒字にしたい場合 <a class= imui-unaccented > を指定してくださいコラム以下の外部ドキュメントにて情報公開しています CSS Module List の文字リンク ( 標準色 ) a.imui-accent CSS Module List の文字リンク ( 黒文字 ) a.imui-unaccented 実装例 HTML <a class="imui-accent"> 強制青字 </a> <a class="imui-unaccent"> 強制黒字 </a> オペレーションボックスにタイトルバー / ツールバーを配置したい対処方法 CSS Module List の補足ボックスツールボックス.imui-box-toolbox を用意しています以下に実装例を示します詳細は CSS Module List の補足ボックスツールボックス.imui-box-toolbox を参照してください実装例構造 HTML を簡単に表すと以下のようになります <div> ツールボックス <div> タイトルバー <div> ツールバー <div> コンテンツ HTML

50 0 <div class="imui-box-toolbox () mt-0"> <div class="imui-box-title () imui-box-toolbox-look ()"> <h> これは H</h> <div class="imui-toolbar-wrap"> <div class="imui-box-toolbar-inner"> <ul class="imui-list-box-toolbar"> ( 中略 ) </ul> <div class="imui-box-toolbox-content">  <imart type="imuitextbox" class="wd-px" placeholder=" ユーザ氏名ユーザカナを入力してください " autofocus></imart> <imart type="imuibutton" value=" 検索 " class="imui-button"></imart> <imart type="imuibutton" value=" クリア " class="imui-button"></imart> 追加したスタイル. ツールボックス (imui-box-operation と同じ枠線 ) imui-box-toolbox. タイトルバー (h, h は同じ見た目 imui-chapter-title.h 使用時は imui-box-title.h を使用 ) imui-box-title, imui-box-title.h, imui-box-title.h. タイトルバー / ツールバー上部角丸効果 (() にフィットさせる ) imui-box-toolbox-look. コンテンツ imui-box-toolbox-content. ツールバー imui-toolbar-wrap, imui-box-toolbar-inner, imui-list-box-toolbar imuidialog にツールバーを配置したい imuidialog に属性を用意しています以下に実装例を示します詳細は imuidialog を参照してください対処方法 imuidialog の toolbarleft 属性 toolbarright 属性をご利用ください詳細は API リスト imuidialog をご確認くださいテーマカラーを border 背景色とし使用したいテーマカラーを border 背景色を指定する場合色情報のみ CSS Module として提供しています以下の CSS をご利用くださいテーマカラーを指定するプロパティ指定するクラス名 border の色指定 imui-theme-border-color 同じ情報を CSS Module List のテーマカラー線色.imui-theme-border-color にて公開しています対処方法同じ HTML 要素に以下を指定します class= imui-theme-border-color 線の位置と線の太さを指定します ( class 属性 style 属性どちらで指定も可 ) 実装例 left-border に 00px の実線を引く場合 CSS width と style を必ず入れてください 0

51 .new_class { border-left-width: 00px; border-left-style: solid;... HTML <div class="new_class imui-theme-border-color"> 左側に 00px の実線が表示されます色は薄いテーマカラーですコラム色を変更することはできません left-border に px の実線を引く場合 CSS width と style を必ず入れてください.new_class { border-left-width: px; border-left-style: solid;... HTML <div class="new_class imui-theme-border-color"> 左側に px の実線が表示されます色は薄いテーマカラーですコラム色を変更することはできません画面にページの説明文を配置したい対処方法画面の操作内容や凡例などを画面上に表示したい場合ページの説明文を配置します以下にアイコンと組み合わせた実装例をつ示しますその他は別ドキュメントの CSS Module List の CSS Module List の補足ボックス.imui-box-supplementation を参照してください実装例 HTML <div class="imui-box-supplementation"> <span class="im-ui-icon-common--information float-l"></span> <p class="imui-pgh-section" style="padding-left:0px;"> アイコンを組み合わせることも可能です <br> アイコンは任意の画像を指定します </p> 補足実装例の表示アイコンはインフォメーション用ですその他のアイコンを使用したい場合はアラートとコンファームの表示アイコンを参照してください表示アイコン意味入力フォームの上部に情報を表示するインフォメーション

配置についてセクションを全体説明する場合はセクション表題 ( h など ) の下に説明文を記載します基本的な画面の作り方基本的な画面の作り方スクリプト開発編登録画面項目作成ガイド補足事項実装サンプル画面レイアウト HTML / サーバサイド JavaScript 作成ガイド登録画面の基本的な作成ガイドについて記載します詳細は以下リンク先を参照してください

52 配置についてセクションを全体説明する場合はセクション表題 ( h など ) の下に説明文を記載します基本的な画面の作り方基本的な画面の作り方スクリプト開発編登録画面項目作成ガイド補足事項実装サンプル画面レイアウト HTML / サーバサイド JavaScript 作成ガイド登録画面の基本的な作成ガイドについて記載します詳細は以下リンク先を参照してください画面タイトルツールバー見出しテーブル入力フォームボタン処理リンク / 処理アイコン画面遷移アラートとコンファーム実装サンプルは基本的な画面レイアウトを使用しています詳細は以下リンク先を参照してください画面レイアウト補足事項見出し ( h h ) は必要に応じて配置します必須部品ではありませんボタンラベルは基本的に登録としますユーザビリティを考慮して作成などにする変更する場合関係画面の統一を図ってください同じデータの更新画面が存在する場合はレイアウトの差異は最小限にしましょう実装サンプル画面レイアウト

53 HTML / サーバサイド JavaScript

54 <imart type="head"> <title> 新規登録画面 </title> </imart>  <div class="imui-title"> <h> 新規登録画面 </h>  <div class="imui-toolbar-wrap"> <div class="imui-toolbar-inner"> <ul class="imui-list-toolbar">  <li><a href="#" class="imui-toolbar-icon" title=" 戻る "><span class="im-ui-icon-common--back"></span></a></li> </ul>  <div class="imui-form-container-narrow">  <div class="imui-chapter-title"> <h> 入力フォームのタイトル ( 必要に応じて配置 )</h> <form id="form" method="post" class="target_form mt-0" action="hoge/register" onsubmit="return false;"> <table class="imui-form"> <tr> <th><label> 項目名 </label></th> <td><imart type="imuitextbox" id="textbox" name="textbox" style="width: 00px;" /></td> </tr> <tr> <th><label> 項目名 </label></th> <td><imart type="imuipassword" id="password" name="password" style="width: 00px;" /></td> </tr> <tr> <th><label> 項目名 </label></th> <td><imart type="imuitextarea" id="textarea" name="textarea" width="0px" height="0px" /></td> </tr> <tr> <th><label> 項目名 </label></th> <td> <imart type="imuicheckbox" id="checkbox_" name="checkbox" label=" チェック " /> <imart type="imuicheckbox" id="checkbox_" name="checkbox" label=" チェック " /> <imart type="imuicheckbox" id="checkbox_" name="checkbox" label=" チェック " /> </td> </tr> <tr> <th><label> 項目名 </label></th> <td> <imart type="imuiradio" id="radio_" name="radio" label=" ラジオ " /> <imart type="imuiradio" id="radio_" name="radio" label=" ラジオ " /> <imart type="imuiradio" id="radio_" name="radio" label=" ラジオ " /> </td> </tr> <tr> <th><label> 項目名 </label></th> <td> <imart type="imuiselect" id="inputitem" name="inputitem" width="00px" /> </td> </tr> </table> <div class="imui-operation-parts"> <imart type="imuibutton" value=" 登録 " id="register-button" class="imui-large-button" /> </form> 更新画面項目作成ガイド補足事項実装サンプル画面レイアウト HTML / サーバサイド JavaScript 作成ガイド

55 更新画面の基本的な作成ガイドについて記載します詳細は以下リンク先を参照してください画面タイトルツールバー見出しテーブル入力フォームボタン処理リンク / 処理アイコン画面遷移アラートとコンファーム実装サンプルは基本的な画面レイアウトを使用しています詳細は以下リンク先を参照してください画面レイアウト補足事項見出し (h h) は必要に応じて配置します必須部品ではありません更新画面で更新 / 削除を行えるようにする場合は画面下部に左から更新ボタン削除ボタンの順番に配置しますボタンラベルは基本的に更新削除としますユーザビリティを考慮して保存などにする場合関係画面の統一を図ってください同じデータの登録画面が存在する場合はレイアウトの差異は最小限にしましょう実装サンプル画面レイアウト HTML / サーバサイド JavaScript

57 <imart type="head"> <title> 更新 / 削除画面 </title> </imart>  <div class="imui-title"> <h> 更新 / 削除画面 </h>  <div class="imui-toolbar-wrap"> <div class="imui-toolbar-inner"> <ul class="imui-list-toolbar">  <li><a href="#" class="imui-toolbar-icon" title=" 戻る "><span class="im-ui-icon-common--back"></span></a></li> </ul>  <div class="imui-form-container-narrow">  <div class="imui-chapter-title"> <h> 入力フォームのタイトル ( 必要に応じて配置 )</h> <form id="form" method="post" class="target_form mt-0" action="hoge/update_delete" onsubmit="return false;"> <table class="imui-form"> <tr> <th><label> 項目名 </label></th> <td><imart type="imuitextbox" id="textbox" name="textbox" style="width: 00px;" /></td> </tr> <tr> <th><label> 項目名 </label></th> <td><imart type="imuipassword" id="password" name="password" style="width: 00px;" /></td> </tr> <tr> <th><label> 項目名 </label></th> <td><imart type="imuitextarea" id="textarea" name="textarea" width="0px" height="0px" /></td> </tr> <tr> <th><label> 項目名 </label></th> <td> <imart type="imuicheckbox" id="checkbox_" name="checkbox" label=" チェック " /> <imart type="imuicheckbox" id="checkbox_" name="checkbox" label=" チェック " /> <imart type="imuicheckbox" id="checkbox_" name="checkbox" label=" チェック " /> </td> </tr> <tr> <th><label> 項目名 </label></th> <td> <imart type="imuiradio" id="radio_" name="radio" label=" ラジオ " /> <imart type="imuiradio" id="radio_" name="radio" label=" ラジオ " /> <imart type="imuiradio" id="radio_" name="radio" label=" ラジオ " /> </td> </tr> <tr> <th><label> 項目名 </label></th> <td> <imart type="imuiselect" id="inputitem" name="inputitem" width="00px" /> </td> </tr> </table> <div class="imui-operation-parts"> <imart type="imuibutton" value=" 更新 " id="update-button" class="imui-large-button" /> <imart type="imuibutton" value=" 削除 " id="delete-button" class="imui-large-button" /> </form> 一覧画面項目作成ガイド実装サンプル画面レイアウト HTML / クライアントサイド JavaScript サーバサイド JavaScript 実装サンプル画面レイアウト

58 HTML / クライアントサイド JavaScript サーバサイド JavaScript 作成ガイド一覧画面の基本的な作成ガイドについて記載します詳細は以下リンク先を参照してください画面タイトルツールバー見出しテーブル入力フォームボタン処理リンク / 処理アイコン画面遷移アラートとコンファーム実装サンプルは基本的な画面レイアウトを使用しています詳細は以下リンク先を参照してください画面レイアウト実装サンプル画面レイアウト HTML / クライアントサイド JavaScript

60  <imart type="head"> <title> 一覧画面 </title> </imart>  <div class="imui-title"> <h> 一覧画面 </h>  <div class="imui-toolbar-wrap"> <div class="imui-toolbar-inner">  <ul class="imui-list-toolbar">  <li><a class="imui-toolbar-icon" title=" 戻る "><span class="im-ui-icon-common--back"></span></a></li>  <li class="icon-split"></li>  <li><a class="imui-toolbar-icon imui-unaccented"><span class="im-ui-icon-common--settings mr-"></span> 設定 </a></li>  <li class="icon-split"></li>  <li><a class="imui-toolbar-tab"><span class="im-ui-icon-common--star"></span></a></li>  <li><a class="imui-list-toolbar-tab-selected"><span class="im-ui-icon-common--search"></span></a></li>  <li><a class="imui-toolbar-tab"><span class="im-ui-icon-common--question"></span></a></li>  <li class="icon-split"></li> </ul>  <ul class="imui-list-box-toolbar-utility"> <li><a class="imui-toolbar-icon" title=" 最新情報 "><span class="im-ui-icon-common--refresh"></span></a></li> </ul>  <div class="imui-form-container-wide"> <div class="imui-box-operation cf"> <div class="pr-0 float-l"> <imart type="imuiselect" id="search-list" list=$bind.selectbox /> <div class="float-l"> <imart type="imuitextbox" id="search-text" maxlength="0" placeholder=" 検索条件の入力 " style="width:0px"/> <imart type="imuibutton" value=" 検索 " id="submit" class="imui-button" /> <imart type="imuibutton" value=" クリア " id="clear" class="imui-button" /> <a id="on-delete-row" class="imui-unaccented" ><span class="im-ui-icon-common--trashbox mr-"></span> チェックした項目を削除 </a> <imart type="imuilisttable" data=$bind.listtable id="listtable" multiselect="true" viewrecords="true" height="00"> <pager rownum="0" rowlist=",,0" /> <cols> <col name="col" caption=" 名前 " /> <col name="col" caption=" カナ " > <showlink baselinkurl="sample" showaction="/listtable"/> </col> <col name="col" caption=" ローマ字 " /> </cols> </imart> <script> $(function(){ $('#on-delete-row').on('click',function(){ imuiconfirm(' 選択したデータを削除しますよろしいですか?','',function(){ // 削除処理 ) ) $('#submit').on('click',function(){ // 検索ボタン押下時の処理 ) $('#clear').on('click',function(){ // クリアボタン押下時の処理 ); ) </script> サーバサイド JavaScript 0

61 0 0 0 let $bind = {; function init(request) { $bind.listtable = [ {"col":" 上田辰男 ", "col":" ウエダタツオ ", "col":"ueda tatsuo", {"col":" 青柳辰巳 ", "col":" アオヤギタツミ ", "col":"aoyagi tatsumi", {"col":" 林政義 ", "col":" ハヤシマサヨシ ", "col":"hayashi masayoshi", {"col":" 円山益男 ", "col":" マルヤママスオ ", "col":"maruyama masuo", {"col":" 関根千香 ", "col":" セキネチカ ", "col":"sekine chika", {"col":" 寺田雅彦 ", "col":" テラダマサヒコ ", "col":"terada masahiko", {"col":" 吉川一哉 ", "col":" ヨシカワカズヤ ", "col":"yoshikawa kazuya", {"col":" 大磯博文 ", "col":" オオイソヒロフミ ", "col":"ohiso hirohumi", {"col":" 萩本順子 ", "col":" ハギモトジュンコ ", "col":"hagimoto jyunko", {"col":" 生田一哉 ", "col":" イクタカズヤ ", "col":"ikuta kazuya", {"col":" 片山聡 ", "col":" カタヤマサトシ ", "col":"katayama satoshi" ]; $bind.selectbox = [ { type : "group", label : " 列検索 ", list : [ { label : " 名前 ", value :, selected : true, { label : " カナ ", value :, { label : " ローマ字 ", value : ] ]; 実装サンプル画面レイアウト

62 HTML / クライアントサイド JavaScript

63  <imart type="head"> <title> 一覧画面 </title> </imart>  <div class="imui-title"> <h> 一覧画面 </h>  <div class="imui-toolbar-wrap"> <div class="imui-toolbar-inner">  <ul class="imui-list-toolbar">  <li><a class="imui-toolbar-icon" title=" 戻る "><span class="im-ui-icon-common--back"></span></a></li>  <li class="icon-split"></li>  <li><a class="imui-toolbar-icon imui-unaccented"><span class="im-ui-icon-common--settings mr-"></span> 設定 </a></li>  <li class="icon-split"></li>  <li><a class="imui-toolbar-tab"><span class="im-ui-icon-common--star"></span></a></li>  <li><a class="imui-list-toolbar-tab-selected"><span class="im-ui-icon-common--search"></span></a></li>  <li><a class="imui-toolbar-tab"><span class="im-ui-icon-common--question"></span></a></li>  <li class="icon-split"></li> </ul>  <ul class="imui-list-box-toolbar-utility"> <li><a class="imui-toolbar-icon" title=" 最新情報 "><span class="im-ui-icon-common--refresh"></span></a></li> </ul>  <div class="imui-form-container-wide"> <div class="imui-box-operation cf"> <div class="pr-0 float-l"> <imart type="imuiselect" id="search-list" list=$bind.selectbox /> <div class="float-l"> <imart type="imuitextbox" id="search-text" maxlength="0" placeholder=" 検索条件の入力 " style="width:0px"/> <imart type="imuibutton" value=" 検索 " id="submit" class="imui-button" /> <imart type="imuibutton" value=" クリア " id="clear" class="imui-button" /> <imart type="imuilisttable" data=$bind.listtable id="listtable" viewrecords="true" oncellselect="oncellselect" height="00"> <pager rownum="0" rowlist=",,0" /> <cols> <col name="col0" caption=" 編集 " sortable="false" width="" align="center" oncellattr="oncellattr" > <showicon iconclass="im-ui-icon-common--update" /> </col> <col name="col" caption=" 名前 " /> <col name="col" caption=" カナ " /> <col name="col" caption=" ローマ字 " /> <col name="col0" caption=" 削除 " sortable="false" width="" align="center" oncellattr="oncellattr" > <showicon iconclass="im-ui-icon-common--ng" /> </col> </cols> </imart> <script> $(function(){ oncellselect = function(rowid,icol,cellcontent,e){ if($(cellcontent).hasclass('im-ui-icon-common--ng')){ imuiconfirm(' 削除しますよろしいですか?','',function(){ // 削除処理 ) if($(cellcontent).hasclass('im-ui-icon-common--update')){ // 編集処理 $('#submit').on('click',function(){ // 検索ボタン押下時の処理 ) $('#clear').on('click',function(){ // クリアボタン押下時の処理 );

64 0 ); ) function oncellattr(){ return 'style="min-width:0px;"' </script> サーバサイド JavaScript let $bind = {; function init(request) { $bind.listtable = [ {"col0":"", "col":" 上田辰男 ", "col":" ウエダタツオ ", "col":"ueda tatsuo", {"col0":"", "col":" 青柳辰巳 ", "col":" アオヤギタツミ ", "col":"aoyagi tatsumi", {"col0":"", "col":" 林政義 ", "col":" ハヤシマサヨシ ", "col":"hayashi masayoshi", {"col0":"", "col":" 円山益男 ", "col":" マルヤママスオ ", "col":"maruyama masuo", {"col0":"", "col":" 関根千香 ", "col":" セキネチカ ", "col":"sekine chika", {"col0":"", "col":" 寺田雅彦 ", "col":" テラダマサヒコ ", "col":"terada masahiko", {"col0":"", "col":" 吉川一哉 ", "col":" ヨシカワカズヤ ", "col":"yoshikawa kazuya", {"col0":"", "col":" 大磯博文 ", "col":" オオイソヒロフミ ", "col":"ohiso hirohumi", {"col0":"", "col":" 萩本順子 ", "col":" ハギモトジュンコ ", "col":"hagimoto jyunko", {"col0":"", "col":" 生田一哉 ", "col":" イクタカズヤ ", "col":"ikuta kazuya", {"col0":"", "col":" 片山聡 ", "col":" カタヤマサトシ ", "col":"katayama satoshi" ]; $bind.selectbox = [ { type : "group", label : " 列検索 ", list : [ { label : " 名前 ", value :, selected : true, { label : " カナ ", value :, { label : " ローマ字 ", value : ] ]; 画面遷移項目画面遷移がある場合 ( 登録更新など ) の実装例画面遷移あり HTML ( ヘッド情報 ) 画面遷移あり HTML ( 画面タイトル / ツールバー / コンテンツエリア ) 画面遷移ありサーバサイドJavaScript 画面遷移がない場合の実装例画面遷移なし HTML( ヘッド情報 ) 画面遷移なし HTML ( 画面タイトル / ツールバー / コンテンツエリア ) 画面遷移なしサーバサイドJavaScript Ajax 通信の利用方法 parameter について Ajax 実装例画面遷移がある場合 ( 登録更新など ) の実装例画面遷移がある場合の概要と実装方法についての説明です処理の流れ Form の度押し防止 imuidisableonsubmit ( セレクタ ) バリデーションチェック imuivalidate 確認ダイアログ表示 imuiconfirm Ajax でのデータ送信と画面遷移 imuiajaxsubmit 画面遷移あり HTML ( ヘッド情報 )

66 0 0 0 <imart type="head"> <title> 新規登録画面 </title>  <script src="ui/libs/jquery-validation-..0/jquery.validate.js"></script> <script src="ui/js/imui-form-util.js"></script> <imart type="imuivalidationrule" rule="foo/bar#hoge" rulesname="rules" messagesname="messages" /> <script type="text/javascript"> (function($) { $(document).ready(function() { // Form の度押し防止 imuidisableonsubmit('#form'); // 参照画面へ引き渡すキーの配列生成 var optionaldata = ['user_cd']; // 登録ボタンクリック $('#register-button').click(function() { // バリデーションチェック if (imuivalidate('#form', rules, messages)) { // 確認ダイアログ表示 imuiconfirm( '<imart type="string" value=$data.dialogmessages.message escapejs="true" />', // メッセージ '<imart type="string" value=$data.dialogmessages.title escapejs="true" />', // タイトル function() { // OK クリック時のコールバック関数 // Ajax でのデータ送信と次画面への遷移 imuiajaxsubmit('#form', 'POST', 'json', 'reference/list/views/list'); ); ); ); )(jquery); </script> </imart> 画面遷移あり HTML ( 画面タイトル / ツールバー / コンテンツエリア ) 登録画面の実装サンプルを参照してくださいまたは更新画面の実装サンプルを参照してくださいコラム imuivalidate を利用するときは <input type= submit /> ではなく <input type= button /> を利用してください画面遷移ありサーバサイド JavaScript

67 0 /** * 初期化処理 * * foo/bar_validation#init handleerrors */ function init(request) { // 初期化の際の処理 function handleerrors() { // 入力チェックに失敗した際の処理コラム画面遷移が不要な Ajax 通信する処理には imuiajaxsubmit を利用しますバリデーションチェックについて実装例の中でバリデーションチェック ( 送信値チェック ) をしています送信値が規定のルールに反する場合は確認ダイアログを表示せず処理を中断しルールに反している入力箇所にエラーの旨を表示します詳しくは Jssp Validator を参照してください Ajax について Ajax の呼び出し先を参照してください登録更新画面について基本的な画面の作成方法があります詳しくは登録画面を参照してくださいまたは更新画面を参照してください画面遷移がない場合の実装例画面遷移がない場合の概要と実装方法についての説明です処理の流れ Form の度押し防止 imuidisableonsubmit ( セレクタ ) バリデーションチェック imuivalidate 確認ダイアログ表示 imuiconfirm Ajaxでのデータ送信 imuiajaxsend 画面遷移なし HTML( ヘッド情報 ) <imart type="head"> <title> 更新 / 削除画面 </title>  <script src="ui/libs/jquery-validation-..0/jquery.validate.js"></script> <script src="ui/js/imui-form-util.js"></script> <imart type="imuivalidationrule" rule="foo/bar#hoge" rulesname="rules" messagesname="messages" /> <script type="text/javascript"> (function($) { $(document).ready(function() { // Form の度押し防止 imuidisableonsubmit('#form'); // 参照画面へ引き渡すキーの配列生成 var optionaldata = ['user_cd']; // 更新ボタンクリック $('#update-button').click(function() { // バリデーションチェック if (imuivalidate('#form', rules, messages)) { // 確認ダイアログ表示 imuiconfirm( '<imart type="string" value=$data.dialogmessages.message escapejs="true" />', // メッセージ '<imart type="string" value=$data.dialogmessages.title escapejs="true" />', // タイトル function() { // OK クリック時のコールバック関数 // Ajax でのデータ送信 imuiajaxsend('#form', 'POST', 'json'); ); ); ); )(jquery); </script> </imart> 画面遷移なし HTML ( 画面タイトル / ツールバー / コンテンツエリア )

68 登録画面の実装サンプルを参照してくださいまたは更新画面の実装サンプルを参照してください画面遷移なしサーバサイド JavaScript 0 /** * 初期化処理 * * foo/bar_validation#init handleerrors */ function init(request) { // 初期化の際にしたい処理 function handleerrors() { // 入力チェックに失敗した際にしたい処理コラム画面遷移が必要な Ajax 通信をする場合は imuiajaxsend を利用しますバリデーションチェックについて実装例の中でバリデーションチェック ( 送信値チェック ) をしています送信値が規定のルールに反する場合は確認ダイアログを表示せず処理を中断しルールに反してい所にエラーの旨を表示します詳しくは Jssp Validator を参照してください Ajax について Ajax の呼び出し先を参照してください登録更新画面について基本的な画面の作成方法があります詳しくは登録画面を参照してくださいまたは更新画面を参照してください Ajax 通信の利用方法 imuiajaxsend, imuiajaxsubmit を使用して Ajax 通信をする場合呼び出し先のページでは処理成功時のメッセージ処理失敗時のメッセージ処理成功後に遷移するページへ引き渡すパラすことができます属性名説明型必須 error 処理が成功した場合 true 失敗した場合 false を指定します boolean o successmessage 処理成功時のメッセージ error: true の場合表示されます String errormessage 処理失敗時のメッセージ error: false の場合表示されます String detailmessages 処理失敗時の詳細なメッセージ error: false の場合表示されます String/String[] parameter 処理成功後に遷移するページへ引き渡すパラメータ Object parameter についてオブジェクトのキーを input タグの name 属性に値を value 属性にセットして submit します値に配列を指定することが可能ですただし次元配列のみサポートします parameter の指定方法と次画面での取得例は以下のようになります parameter の指定 parameter: { key: 'value', key: 'value', array: [ 'array', 'array', 'array' ] 次画面での取得 function init(request) { var v = request.key; // 'value' var v = request.key; // 'value' var a = request.getparametervalues('array'); // ['array', 'array', 'array']... となります Ajax 実装例

69 Ajax function init(request) {... response.setcontenttype('application/json; charset=utf-');... var resultobject = SomeAPI.doSomething(); if (resultobject.error) { // 処理が失敗した場合 response.sendmessagebodystring( ImJson.toJSONString({ error: resultobject.error, errormessage: resultobject.message, detailmessages: [' 管理者にお問い合わせください ', ' 連絡先 :admin@xxx.xxx.xxx'] ) ); // 処理が成功した場合 response.sendmessagebodystring( ImJson.toJSONString({ error: false, errormessage: '', successmessage: ' 登録しました ', parameter:{ param: 'value', param: 'value', array: ['array', 'array', 'array'] ) ); 基本的な画面の作り方 SAStruts+SJDBC 開発編登録画面項目作成ガイド補足事項実装サンプル画面レイアウト JSP 作成ガイド登録画面の基本的な作成ガイドについて記載します詳細は以下リンク先を参照してくださいただし以下リンク先はスクリプト開発にて説明ています画面タイトルツールバー見出しテーブル入力フォームボタン処理リンク / 処理アイコン画面遷移アラートとコンファーム実装サンプルは基本的な画面レイアウトを使用しています詳細は以下リンク先を参照してください

70 画面レイアウト補足事項見出し ( h h ) は必要に応じて配置します必須部品ではありませんボタンラベルは基本的に登録としますユーザビリティを考慮して作成などにする変更する場合関係画面の統一を図ってください同じデータの更新画面が存在する場合はレイアウトの差異は最小限にしましょう実装サンプル画面レイアウト JSP 0

71 <%@ page language="java" contenttype="text/html; charset=utf-" pageencoding="utf-"%> <%@ taglib prefix="c" uri=" <%@ taglib prefix="imui" uri="  <imui:head> <title> 新規登録画面 </title> </imui:head>  <div class="imui-title"> <h> 新規登録画面 </h>  <div class="imui-toolbar-wrap"> <div class="imui-toolbar-inner"> <ul class="imui-list-toolbar">  <li><a href="#" class="imui-toolbar-icon" title=" 戻る "><span class="im-ui-icon-common--back"></span></a></li> </ul>  <div class="imui-form-container-narrow">  <div class="imui-chapter-title"> <h> 入力フォームのタイトル ( 必要に応じて配置 )</h> <form id="form" method="post" class="target_form mt-0" action="hoge/register" onsubmit="return false;"> <table class="imui-form"> <tr> <th><label> 項目名 </label></th> <td><imui:textbox id="textbox" name="textbox" style="width: 00px;" /></td> </tr> <tr> <th><label> 項目名 </label></th> <td><imui:password id="password" name="password" style="width: 00px;" /></td> </tr> <tr> <th><label> 項目名 </label></th> <td><imui:textarea id="textarea" name="textarea" width="0px" height="0px" /></td> </tr> <tr> <th><label> 項目名 </label></th> <td> <imui:checkbox id="checkbox_" name="checkbox" label=" チェック " /> <imui:checkbox id="checkbox_" name="checkbox" label=" チェック " /> <imui:checkbox id="checkbox_" name="checkbox" label=" チェック " /> </td> </tr> <tr> <th><label> 項目名 </label></th> <td> <imui:radio id="radio_" name="radio" label=" ラジオ " /> <imui:radio id="radio_" name="radio" label=" ラジオ " /> <imui:radio id="radio_" name="radio" label=" ラジオ " /> </td> </tr> <tr> <th><label> 項目名 </label></th> <td> <imui:select id="inputitem" name="inputitem" width="00px" /> </td> </tr> </table> <div class="imui-operation-parts"> <imui:button value=" 登録 " id="register-button" class="imui-large-button" /> </form> 更新画面項目作成ガイド補足事項実装サンプル画面レイアウト JSP

72 作成ガイド更新画面の基本的な作成ガイドについて記載します詳細は以下リンク先を参照してくださいただし以下リンク先はスクリプト開発にて説明ています画面タイトルツールバー見出しテーブル入力フォームボタン処理リンク / 処理アイコン画面遷移アラートとコンファーム実装サンプルは基本的な画面レイアウトを使用しています詳細は以下リンク先を参照してください画面レイアウト補足事項見出し ( h h ) は必要に応じて配置します必須部品ではありません更新画面で更新 / 削除を行えるようにする場合は画面下部に左から更新ボタン削除ボタンの順番に配置しますボタンラベルは基本的に更新削除としますユーザビリティを考慮して保存などにする場合関係画面の統一を図ってください同じデータの登録画面が存在する場合はレイアウトの差異は最小限にしましょう実装サンプル画面レイアウト JSP

74 <%@ page language="java" contenttype="text/html; charset=utf-" pageencoding="utf-"%> <%@ taglib prefix="c" uri=" <%@ taglib prefix="imui" uri="  <imui:head> <title> 更新 / 削除画面 </title> </imui:head>  <div class="imui-title"> <h> 更新 / 削除画面 </h>  <div class="imui-toolbar-wrap"> <div class="imui-toolbar-inner"> <ul class="imui-list-toolbar">  <li><a href="#" class="imui-toolbar-icon" title=" 戻る "><span class="im-ui-icon-common--back"></span></a></li> </ul>  <div class="imui-form-container-narrow">  <div class="imui-chapter-title"> <h> 入力フォームのタイトル ( 必要に応じて配置 )</h> <form id="form" method="post" class="target_form mt-0" action="hoge/update_delete" onsubmit="return false;"> <table class="imui-form"> <tr> <th><label> 項目名 </label></th> <td><imui:textbox id="textbox" name="textbox" style="width: 00px;" /></td> </tr> <tr> <th><label> 項目名 </label></th> <td><imui:password id="password" name="password" style="width: 00px;" /></td> </tr> <tr> <th><label> 項目名 </label></th> <td><imui:textarea id="textarea" name="textarea" width="0px" height="0px" /></td> </tr> <tr> <th><label> 項目名 </label></th> <td> <imui:checkbox id="checkbox_" name="checkbox" label=" チェック " /> <imui:checkbox id="checkbox_" name="checkbox" label=" チェック " /> <imui:checkbox id="checkbox_" name="checkbox" label=" チェック " /> </td> </tr> <tr> <th><label> 項目名 </label></th> <td> <imui:radio id="radio_" name="radio" label=" ラジオ " /> <imui:radio id="radio_" name="radio" label=" ラジオ " /> <imui:radio id="radio_" name="radio" label=" ラジオ " /> </td> </tr> <tr> <th><label> 項目名 </label></th> <td> <imui:select id="inputitem" name="inputitem" width="00px" /> </td> </tr> </table> <div class="imui-operation-parts"> <imui:button value=" 更新 " id="update-button" class="imui-large-button" /> <imui:button value=" 削除 " id="delete-button" class="imui-large-button" /> </form> 一覧画面項目作成ガイド実装サンプル画面レイアウト

75 JSP 実装サンプル画面レイアウト JSP 作成ガイド一覧画面の基本的な作成ガイドについて記載します詳細は以下リンク先を参照してくださいただし以下リンク先はスクリプト開発にて説明ています画面タイトルツールバー見出しテーブル入力フォームボタン処理リンク / 処理アイコン画面遷移アラートとコンファーム実装サンプルは基本的な画面レイアウトを使用しています詳細は以下リンク先を参照してください画面レイアウト実装サンプル画面レイアウト JSP

77 <%@ page language="java" contenttype="text/html; charset=utf-" pageencoding="utf-"%> <%@ page import="java.util.list"%> <%@ page import="java.util.arraylist"%> <%@ page import="java.util.map"%> <%@ page import="java.util.hashmap"%> <%@ taglib prefix="imui" uri=" <%! List<Map<String, Object>> selectbox = new ArrayList<Map<String, Object>>(); { List<Map<String, Object>> selectboxoption = new ArrayList<Map<String, Object>>(); Map<String, Object> optgrp = new HashMap<String, Object>(); optgrp.put("type", "group"); optgrp.put("label", " 行検索 "); List<Map<String, Object>> optlist = new ArrayList<Map<String, Object>>(); Map<String, Object> option = new HashMap<String, Object>(); option.put("label", " 名前 "); option.put("value",""); optlist.add(option); option = new HashMap<String, Object>(); option.put("label", " カナ "); option.put("value",""); optlist.add(option); option = new HashMap<String, Object>(); option.put("label", " ローマ字 "); option.put("value",""); optlist.add(option); optgrp.put("list", optlist); selectbox.add(optgrp); Map<String, Object> createvaluemap(object... objarray) { Map<String, Object> map = new HashMap<String, Object>(); int size = objarray.length; for (int i = 0; i < size; i++) { if ((i + ) % == ) { map.put(objarray[i].tostring(), objarray[i + ]); return map; %> <% // リストテーブルデータ List<Map<String, Object>> listtable = new ArrayList<Map<String, Object>>(); listtable.add(createvaluemap("col"," 上田辰男 ", "col"," ウエダタツオ ", "col","ueda tatsuo")); listtable.add(createvaluemap("col"," 青柳辰巳 ", "col"," アオヤギタツミ ", "col","aoyagi tatsumi")); listtable.add(createvaluemap("col"," 林政義 ", "col"," ハヤシマサヨシ ", "col","hayashi masayoshi")); listtable.add(createvaluemap("col"," 円山益男 ", "col"," マルヤママスオ ", "col","maruyama masuo")); listtable.add(createvaluemap("col"," 関根千香 ", "col"," セキネチカ ", "col","sekine chika")); listtable.add(createvaluemap("col"," 寺田雅彦 ", "col"," テラダマサヒコ ", "col","terada masahiko")); listtable.add(createvaluemap("col"," 吉川一哉 ", "col"," ヨシカワカズヤ ", "col","yoshikawa kazuya")); listtable.add(createvaluemap("col"," 大磯博文 ", "col"," オオイソヒロフミ ", "col","ohiso hirohumi")); listtable.add(createvaluemap("col"," 萩本順子 ", "col"," ハギモトジュンコ ", "col","hagimoto jyunko")); listtable.add(createvaluemap("col"," 生田一哉 ", "col"," イクタカズヤ ", "col","ikuta kazuya")); listtable.add(createvaluemap("col"," 片山聡 ", "col"," カタヤマサトシ ", "col","katayama satoshi")); %>  <imui:head> <title> 一覧画面 </title> </imui:head>  <div class="imui-title"> <h> 一覧画面 </h>  <div class="imui-toolbar-wrap"> <div class="imui-toolbar-inner">  <ul class="imui-list-toolbar">  <li><a class="imui-toolbar-icon" title=" 戻る "><span class="im-ui-icon-common--back"></span></a></li>  <li class="icon-split"></li>  <li><a class="imui-toolbar-icon imui-unaccented"><span class="im-ui-icon-common--settings mr-"></span> 設定 </a></li>  <li class="icon-split"></li>

78 <li class="icon-split"></li>  <li><a class="imui-toolbar-tab"><span class="im-ui-icon-common--star"></span></a></li>  <li><a class="imui-list-toolbar-tab-selected"><span class="im-ui-icon-common--search"></span></a></li>  <li><a class="imui-toolbar-tab"><span class="im-ui-icon-common--question"></span></a></li>  <li class="icon-split"></li> </ul>  <ul class="imui-list-box-toolbar-utility"> <li><a class="imui-toolbar-icon" title=" 最新情報 "><span class="im-ui-icon-common--refresh"></span></a></li> </ul>  <div class="imui-form-container-wide"> <div class="imui-box-operation cf"> <div class="pr-0 float-l"> <imui:select id="search-list" list="<%= selectbox %>" /> <div class="float-l"> <imui:textbox id="search-text" maxlength="0" placeholder=" 検索条件の入力 " style="width:0px"/> <imui:button value=" 検索 " id="submit" class="imui-button" /> <imui:button value=" クリア " id="clear" class="imui-button" /> <a id="on-delete-row" class="imui-unaccented" ><span class="im-ui-icon-common--trashbox mr-"></span> チェックした項目を削除 </a> <imui:listtable data="<%= listtable %>" id="listtable" multiselect="true" viewrecords="true" height="00"> <pager rownum="0" rowlist=",,0" /> <cols> <col name="col" caption=" 名前 " /> <col name="col" caption=" カナ " > <showlink baselinkurl="sample" showaction="/listtable"/> </col> <col name="col" caption=" ローマ字 " /> </cols> </imui:listtable> <script> $(function(){ $('#on-delete-row').on('click',function(){ imuiconfirm(' 選択したデータを削除しますよろしいですか?','',function(){ // 削除処理 ) ) $('#submit').on('click',function(){ // 検索ボタン押下時の処理 ) $('#clear').on('click',function(){ // クリアボタン押下時の処理 ); ) </script> 実装サンプル画面レイアウト

79 JSP

80 <%@ page language="java" contenttype="text/html; charset=utf-" pageencoding="utf-"%> <%@ page import="java.util.list"%> <%@ page import="java.util.arraylist"%> <%@ page import="java.util.map"%> <%@ page import="java.util.hashmap"%> <%@ taglib prefix="imui" uri=" <%! List<Map<String, Object>> selectbox = new ArrayList<Map<String, Object>>(); { List<Map<String, Object>> selectboxoption = new ArrayList<Map<String, Object>>(); Map<String, Object> optgrp = new HashMap<String, Object>(); optgrp.put("type", "group"); optgrp.put("label", " 行検索 "); List<Map<String, Object>> optlist = new ArrayList<Map<String, Object>>(); Map<String, Object> option = new HashMap<String, Object>(); option.put("label", " 名前 "); option.put("value",""); optlist.add(option); option = new HashMap<String, Object>(); option.put("label", " カナ "); option.put("value",""); optlist.add(option); option = new HashMap<String, Object>(); option.put("label", " ローマ字 "); option.put("value",""); optlist.add(option); optgrp.put("list", optlist); selectbox.add(optgrp); Map<String, Object> createvaluemap(object... objarray) { Map<String, Object> map = new HashMap<String, Object>(); int size = objarray.length; for (int i = 0; i < size; i++) { if ((i + ) % == ) { map.put(objarray[i].tostring(), objarray[i + ]); return map; %> <% // リストテーブルデータ List<Map<String, Object>> listtable = new ArrayList<Map<String, Object>>(); listtable.add(createvaluemap("col0","","col"," 上田辰男 ", "col"," ウエダタツオ ", "col","ueda tatsuo")); listtable.add(createvaluemap("col0","","col"," 青柳辰巳 ", "col"," アオヤギタツミ ", "col","aoyagi tatsumi")); listtable.add(createvaluemap("col0","","col"," 林政義 ", "col"," ハヤシマサヨシ ", "col","hayashi masayoshi")); listtable.add(createvaluemap("col0","","col"," 円山益男 ", "col"," マルヤママスオ ", "col","maruyama masuo")); listtable.add(createvaluemap("col0","","col"," 関根千香 ", "col"," セキネチカ ", "col","sekine chika")); listtable.add(createvaluemap("col0","","col"," 寺田雅彦 ", "col"," テラダマサヒコ ", "col","terada masahiko")); listtable.add(createvaluemap("col0","","col"," 吉川一哉 ", "col"," ヨシカワカズヤ ", "col","yoshikawa kazuya")); listtable.add(createvaluemap("col0","","col"," 大磯博文 ", "col"," オオイソヒロフミ ", "col","ohiso hirohumi")); listtable.add(createvaluemap("col0","","col"," 萩本順子 ", "col"," ハギモトジュンコ ", "col","hagimoto jyunko")); listtable.add(createvaluemap("col0","","col"," 生田一哉 ", "col"," イクタカズヤ ", "col","ikuta kazuya")); listtable.add(createvaluemap("col0","","col"," 片山聡 ", "col"," カタヤマサトシ ", "col","katayama satoshi")); %>  <imui:head> <title> 一覧画面 </title> </imui:head>  <div class="imui-title"> <h> 一覧画面 </h>  <div class="imui-toolbar-wrap"> <div class="imui-toolbar-inner">  <ul class="imui-list-toolbar">  <li><a class="imui-toolbar-icon" title=" 戻る "><span class="im-ui-icon-common--back"></span></a></li>  <li class="icon-split"></li>  <li><a class="imui-toolbar-icon imui-unaccented"><span class="im-ui-icon-common--settings mr-"></span> 設定 </a></li>  <li class="icon-split"></li>  0

81  <li><a class="imui-toolbar-tab"><span class="im-ui-icon-common--star"></span></a></li>  <li><a class="imui-list-toolbar-tab-selected"><span class="im-ui-icon-common--search"></span></a></li>  <li><a class="imui-toolbar-tab"><span class="im-ui-icon-common--question"></span></a></li>  <li class="icon-split"></li> </ul>  <ul class="imui-list-box-toolbar-utility"> <li><a class="imui-toolbar-icon" title=" 最新情報 "><span class="im-ui-icon-common--refresh"></span></a></li> </ul>  <div class="imui-form-container-wide"> <div class="imui-box-operation cf"> <div class="pr-0 float-l"> <imui:select id="search-list" list="<%= selectbox %>" /> <div class="float-l"> <imui:textbox id="search-text" maxlength="0" placeholder=" 検索条件の入力 " style="width:0px"/> <imui:button value=" 検索 " id="submit" class="imui-button" /> <imui:button value=" クリア " id="clear" class="imui-button" /> <imui:listtable data="<%= listtable %>" id="listtable" viewrecords="true" oncellselect="oncellselect" height="00"> <pager rownum="0" rowlist=",,0" /> <cols> <col name="col0" caption=" 編集 " sortable="false" width="" align="center" oncellattr="oncellattr" > <showicon iconclass="im-ui-icon-common--update" /> </col> <col name="col" caption=" 名前 " /> <col name="col" caption=" カナ " /> <col name="col" caption=" ローマ字 " /> <col name="col0" caption=" 削除 " sortable="false" width="" align="center" oncellattr="oncellattr" > <showicon iconclass="im-ui-icon-common--ng" /> </col> </cols> </imui:listtable> <script> $(function(){ oncellselect = function(rowid,icol,cellcontent,e){ if($(cellcontent).hasclass('im-ui-icon-common--ng')){ imuiconfirm(' 削除しますよろしいですか?','',function(){ // 削除処理 ) if($(cellcontent).hasclass('im-ui-icon-common--update')){ // 編集処理 $('#submit').on('click',function(){ // 検索ボタン押下時の処理 ) $('#clear').on('click',function(){ // クリアボタン押下時の処理 ); ) function oncellattr(){ return 'style="min-width:0px;"' </script> 画面遷移項目画面遷移がある場合 ( 登録更新など ) の実装例画面遷移あり JSP ( ヘッド情報 ) 画面遷移あり JSP ( 画面タイトル / ツールバー / コンテンツエリア ) 画面遷移がない場合の実装例画面遷移なし JSP ( ヘッダー / フッター ) 画面遷移なし JSP ( 画面タイトル / ツールバー / コンテンツエリア ) Ajax 通信の利用方法 parameter について Ajax 実装例

82 画面遷移がある場合 ( 登録更新など ) の実装例画面遷移がある場合の概要と実装方法についての説明です処理の流れ Form の度押し防止 imuidisableonsubmit ( セレクタ ) バリデーションチェック imuivalidate 確認ダイアログ表示 imuiconfirm Ajax でのデータ送信と画面遷移 imuiajaxsubmit 画面遷移あり JSP ( ヘッド情報 )

83 <%@ page language="java" contenttype="text/html; charset=utf-" pageencoding="utf-"%> <%@ taglib prefix="c" uri=" <%@ taglib prefix="imui" uri=" <!DOCTYPE HTML PUBLIC "-//WC//DTD HTML.0 Transitional//EN"> <imui:head> <title> 新規登録画面 </title>  <script src="ui/libs/jquery-validation-..0/jquery.validate.js"></script> <script type="text/javascript"> var rules = { textbox: { required:true, maxlength:0, textarea: { required:true ; var messages = { textbox: { required:" タイトルは必須です ", maxlength:" タイトルは 0 文字以内で入力してください ", textarea: { required:" テキストエリアは必須です " ; (function($) { $(document).ready(function() { // Form の度押し防止 imuidisableonsubmit('#form'); // 参照画面へ引き渡すキーの配列生成 var optionaldata = ['user_cd']; // 登録ボタンクリック $('#register-button').click(function() { // バリデーションチェック if (imuivalidate('#form', rules, messages)) { // 確認ダイアログ表示 imuiconfirm( '<c:out value="message" />', // メッセージ '<c:out value="title" />', // タイトル function() { // OK クリック時のコールバック関数 // Ajax でのデータ送信と次画面への遷移 imuiajaxsubmit('#form', 'POST', 'json', 'reference/list/views/list'); ); ); ); )(jquery); </script> </imui:head> 画面遷移あり JSP ( 画面タイトル / ツールバー / コンテンツエリア ) 登録画面の実装サンプルを参照してくださいまたは更新画面の実装サンプルを参照してくださいコラム imuivalidate を利用するときは <input type= submit /> ではなく <input type= button /> を利用してください画面遷移がない場合の実装例画面遷移がない場合の概要と実装方法についての説明です処理の流れ Form の度押し防止 imuidisableonsubmit ( セレクタ ) バリデーションチェック imuivalidate 確認ダイアログ表示 imuiconfirm Ajaxでのデータ送信 imuiajaxsend 画面遷移なし JSP ( ヘッダー / フッター )

85 <imui:head> <title> 更新 / 削除画面 </title>  <script src="ui/libs/jquery-validation-..0/jquery.validate.js"></script> <script type="text/javascript"> var rules = { textbox: { required:true, maxlength:0, textarea: { required:true ; var messages = { textbox: { required:" タイトルは必須です ", maxlength:" タイトルは 0 文字以内で入力してください ", textarea: { required:" テキストエリアは必須です " ; (function($) { $(document).ready(function() { // Form の度押し防止 imuidisableonsubmit('#form'); // 参照画面へ引き渡すキーの配列生成 var optionaldata = ['user_cd']; // 更新ボタンクリック $('#update-button').click(function() { // バリデーションチェック if (imuivalidate('#form', rules, messages)) { // 確認ダイアログ表示 imuiconfirm( '<c:out value="message" />', // メッセージ '<c:out value="title" />', // タイトル function() { // OK クリック時のコールバック関数 // Ajax でのデータ送信 imuiajaxsend('#form', 'POST', 'json'); ); ); ); )(jquery); </script> </imui:head> 画面遷移なし JSP ( 画面タイトル / ツールバー / コンテンツエリア ) 登録画面の実装サンプルを参照してくださいまたは更新画面の実装サンプルを参照してください Ajax 通信の利用方法 imuiajaxsend, imuiajaxsubmit を使用して Ajax 通信をする場合呼び出し先のページでは処理成功時のメッセージ処理失敗時のメッセージ処理成功後に遷移するページへ引き渡すパラすことができます属性名説明型必須 error 処理が成功した場合 true 失敗した場合 false を指定します boolean o successmessage 処理成功時のメッセージ error: true の場合表示されます String errormessage 処理失敗時のメッセージ error: false の場合表示されます String detailmessages 処理失敗時の詳細なメッセージ error: false の場合表示されます String/String[] parameter 処理成功後に遷移するページへ引き渡すパラメータ Object parameter についてオブジェクトのキーを input タグの name 属性に値を value 属性にセットして submit します値に配列を指定することが可能ですただし次元配列のみサポートします parameter の指定方法と次画面での取得例は以下のようになります

86 parameter の指定 Map<String, Object> parameter = new HashMap<String, Object>(); ArrayList<String> arraylist = new ArrayList<String>(); arraylist.add("array"); arraylist.add("array"); arraylist.add("array"); parameter.put("param", "value"); parameter.put("param", "value"); parameter.put("array", arraylist); 次画面での取得 0 public class TestAction { public String param; public String param; public ArrayList<String> public String index(){ return "/sa/hello/output.jsp"; となります Ajax 実装例非同期で返却するレスポンスオブジェクトを定義します 0 package sample.sastruts.dto.samplesp; public class MyAjaxResponse { public String result; public boolean error; public String errormessage; public String successmessage; public String[] detailmessages; public Map<String, Object> parameter; アクションクラスでは上記レスポンスオブジェクトに対して値をセットし JSON 文字列に変換します変換した結果の文字列をプロパティにセットします

87 0 0 0 public String = false) public String ajax() { MyAjaxResponse responseobject = new MyAjaxResponse(); try { Map<String, Object> parameter = new HashMap<String, Object>(); ArrayList<String> arraylist = new ArrayList<String>(); arraylist.add("array"); arraylist.add("array"); arraylist.add("array"); parameter.put("param", "value"); parameter.put("param", "value"); parameter.put("array", arraylist); // 成功時 responseobject.result = "success"; responseobject.error = false; responseobject.successmessage = " 登録が完了しました "; responseobject.parameter = parameter; catch (Exception e) { responseobject.error = true; responseobject.errormessage = " データ登録時にエラーが発生しました "; responseobject.detailmessages = new String[] { " 管理者にお問い合わせください " ; // レスポンスオブジェクトを JSON 文字列に変換 ajaxresponse = JSON.encode(responseObject); return "sample/ajaxresponse.jsp"; アクションクラスで生成した JSON 文字列をクライアントに application/json として返します上記 ajax メソッドの返却値 sample/ajaxresponse.jsp に相当します <%@ page language="java" contenttype="application/json; charset=utf-" pageencoding="utf-" %> ${ajaxresponse 基本的な画面の作り方 TERASOLUNA Global Framework 開発編登録画面項目作成ガイド補足事項実装サンプル画面レイアウト JSP 作成ガイド登録画面の基本的な作成ガイドについて記載します詳細は以下リンク先を参照してくださいただし以下リンク先はスクリプト開発にて説明ています画面タイトルツールバー見出しテーブル入力フォームボタン処理リンク / 処理アイコン

88 画面遷移アラートとコンファーム実装サンプルは基本的な画面レイアウトを使用しています詳細は以下リンク先を参照してください画面レイアウト補足事項見出し ( h h ) は必要に応じて配置します必須部品ではありませんボタンラベルは基本的に登録としますユーザビリティを考慮して作成などにする変更する場合関係画面の統一を図ってください同じデータの更新画面が存在する場合はレイアウトの差異は最小限にしましょう実装サンプル画面レイアウト JSP

90 <%@ page language="java" contenttype="text/html; charset=utf-" pageencoding="utf-"%> <%@ taglib prefix="c" uri=" <%@ taglib prefix="imui" uri="  <imui:head> <title> 新規登録画面 </title> </imui:head>  <div class="imui-title"> <h> 新規登録画面 </h>  <div class="imui-toolbar-wrap"> <div class="imui-toolbar-inner"> <ul class="imui-list-toolbar">  <li><a href="#" class="imui-toolbar-icon" title=" 戻る "><span class="im-ui-icon-common--back"></span></a></li> </ul>  <div class="imui-form-container-narrow">  <div class="imui-chapter-title"> <h> 入力フォームのタイトル ( 必要に応じて配置 )</h> <form id="form" method="post" class="target_form mt-0" action="example/tgfw/register" onsubmit="return false;"> <table class="imui-form"> <tr> <th><label> 項目名 </label></th> <td><imui:textbox id="textbox" name="textbox" style="width: 00px;" /></td> </tr> <tr> <th><label> 項目名 </label></th> <td><imui:password id="password" name="password" style="width: 00px;" /></td> </tr> <tr> <th><label> 項目名 </label></th> <td><imui:textarea id="textarea" name="textarea" width="0px" height="0px" /></td> </tr> <tr> <th><label> 項目名 </label></th> <td> <imui:checkbox id="checkbox_" name="checkbox" label=" チェック " /> <imui:checkbox id="checkbox_" name="checkbox" label=" チェック " /> <imui:checkbox id="checkbox_" name="checkbox" label=" チェック " /> </td> </tr> <tr> <th><label> 項目名 </label></th> <td> <imui:radio id="radio_" name="radio" label=" ラジオ " /> <imui:radio id="radio_" name="radio" label=" ラジオ " /> <imui:radio id="radio_" name="radio" label=" ラジオ " /> </td> </tr> <tr> <th><label> 項目名 </label></th> <td> <imui:select id="inputitem" name="inputitem" width="00px" /> </td> </tr> </table> <div class="imui-operation-parts"> <imui:button value=" 登録 " id="register-button" class="imui-large-button" /> </form> 更新画面項目作成ガイド補足事項実装サンプル画面レイアウト JSP 0

作成ガイド更新画面の基本的な作成ガイドについて記載します詳細は以下リンク先を参照してくださいただし以下リンク先はスクリプト開発にて説明ています画面タイトルツールバー見出しテーブル入力フォームボタン処理リンク / 処理アイコン画面遷移アラートとコンファーム実装サンプルは基本的な画面レイアウトを使用しています詳細は以下リンク先を参照してください画面レイアウト補足事項見出し ( h

91 作成ガイド更新画面の基本的な作成ガイドについて記載します詳細は以下リンク先を参照してくださいただし以下リンク先はスクリプト開発にて説明ています画面タイトルツールバー見出しテーブル入力フォームボタン処理リンク / 処理アイコン画面遷移アラートとコンファーム実装サンプルは基本的な画面レイアウトを使用しています詳細は以下リンク先を参照してください画面レイアウト補足事項見出し ( h h ) は必要に応じて配置します必須部品ではありません更新画面で更新 / 削除を行えるようにする場合は画面下部に左から更新ボタン削除ボタンの順番に配置しますボタンラベルは基本的に更新削除としますユーザビリティを考慮して保存などにする場合関係画面の統一を図ってください同じデータの登録画面が存在する場合はレイアウトの差異は最小限にしましょう実装サンプル画面レイアウト JSP

93 <%@ page language="java" contenttype="text/html; charset=utf-" pageencoding="utf-"%> <%@ taglib prefix="c" uri=" <%@ taglib prefix="imui" uri="  <imui:head> <title> 更新 / 削除画面 </title> </imui:head>  <div class="imui-title"> <h> 更新 / 削除画面 </h>  <div class="imui-toolbar-wrap"> <div class="imui-toolbar-inner"> <ul class="imui-list-toolbar">  <li><a href="#" class="imui-toolbar-icon" title=" 戻る "><span class="im-ui-icon-common--back"></span></a></li> </ul>  <div class="imui-form-container-narrow">  <div class="imui-chapter-title"> <h> 入力フォームのタイトル ( 必要に応じて配置 )</h> <form id="form" method="post" class="target_form mt-0" action="example/tgfw/update_delete" onsubmit="return false;"> <table class="imui-form"> <tr> <th><label> 項目名 </label></th> <td><imui:textbox id="textbox" name="textbox" style="width: 00px;" /></td> </tr> <tr> <th><label> 項目名 </label></th> <td><imui:password id="password" name="password" style="width: 00px;" /></td> </tr> <tr> <th><label> 項目名 </label></th> <td><imui:textarea id="textarea" name="textarea" width="0px" height="0px" /></td> </tr> <tr> <th><label> 項目名 </label></th> <td> <imui:checkbox id="checkbox_" name="checkbox" label=" チェック " /> <imui:checkbox id="checkbox_" name="checkbox" label=" チェック " /> <imui:checkbox id="checkbox_" name="checkbox" label=" チェック " /> </td> </tr> <tr> <th><label> 項目名 </label></th> <td> <imui:radio id="radio_" name="radio" label=" ラジオ " /> <imui:radio id="radio_" name="radio" label=" ラジオ " /> <imui:radio id="radio_" name="radio" label=" ラジオ " /> </td> </tr> <tr> <th><label> 項目名 </label></th> <td> <imui:select id="inputitem" name="inputitem" width="00px" /> </td> </tr> </table> <div class="imui-operation-parts"> <imui:button value=" 更新 " id="update-button" class="imui-large-button" /> <imui:button value=" 削除 " id="delete-button" class="imui-large-button" /> </form> 一覧画面項目作成ガイド実装サンプル画面レイアウト

94 JSP 実装サンプル画面レイアウト JSP 作成ガイド一覧画面の基本的な作成ガイドについて記載します詳細は以下リンク先を参照してくださいただし以下リンク先はスクリプト開発にて説明ています画面タイトルツールバー見出しテーブル入力フォームボタン処理リンク / 処理アイコン画面遷移アラートとコンファーム実装サンプルは基本的な画面レイアウトを使用しています詳細は以下リンク先を参照してください画面レイアウト実装サンプル画面レイアウト JSP

96 <%@ page language="java" contenttype="text/html; charset=utf-" pageencoding="utf-"%> <%@ page import="java.util.list"%> <%@ page import="java.util.arraylist"%> <%@ page import="java.util.map"%> <%@ page import="java.util.hashmap"%> <%@ taglib prefix="imui" uri=" <%! List<Map<String, Object>> selectbox = new ArrayList<Map<String, Object>>(); { List<Map<String, Object>> selectboxoption = new ArrayList<Map<String, Object>>(); Map<String, Object> optgrp = new HashMap<String, Object>(); optgrp.put("type", "group"); optgrp.put("label", " 行検索 "); List<Map<String, Object>> optlist = new ArrayList<Map<String, Object>>(); Map<String, Object> option = new HashMap<String, Object>(); option.put("label", " 名前 "); option.put("value",""); optlist.add(option); option = new HashMap<String, Object>(); option.put("label", " カナ "); option.put("value",""); optlist.add(option); option = new HashMap<String, Object>(); option.put("label", " ローマ字 "); option.put("value",""); optlist.add(option); optgrp.put("list", optlist); selectbox.add(optgrp); Map<String, Object> createvaluemap(object... objarray) { Map<String, Object> map = new HashMap<String, Object>(); int size = objarray.length; for (int i = 0; i < size; i++) { if ((i + ) % == ) { map.put(objarray[i].tostring(), objarray[i + ]); return map; %> <% // リストテーブルデータ List<Map<String, Object>> listtable = new ArrayList<Map<String, Object>>(); listtable.add(createvaluemap("col"," 上田辰男 ", "col"," ウエダタツオ ", "col","ueda tatsuo")); listtable.add(createvaluemap("col"," 青柳辰巳 ", "col"," アオヤギタツミ ", "col","aoyagi tatsumi")); listtable.add(createvaluemap("col"," 林政義 ", "col"," ハヤシマサヨシ ", "col","hayashi masayoshi")); listtable.add(createvaluemap("col"," 円山益男 ", "col"," マルヤママスオ ", "col","maruyama masuo")); listtable.add(createvaluemap("col"," 関根千香 ", "col"," セキネチカ ", "col","sekine chika")); listtable.add(createvaluemap("col"," 寺田雅彦 ", "col"," テラダマサヒコ ", "col","terada masahiko")); listtable.add(createvaluemap("col"," 吉川一哉 ", "col"," ヨシカワカズヤ ", "col","yoshikawa kazuya")); listtable.add(createvaluemap("col"," 大磯博文 ", "col"," オオイソヒロフミ ", "col","ohiso hirohumi")); listtable.add(createvaluemap("col"," 萩本順子 ", "col"," ハギモトジュンコ ", "col","hagimoto jyunko")); listtable.add(createvaluemap("col"," 生田一哉 ", "col"," イクタカズヤ ", "col","ikuta kazuya")); listtable.add(createvaluemap("col"," 片山聡 ", "col"," カタヤマサトシ ", "col","katayama satoshi")); %>  <imui:head> <title> 一覧画面 </title> </imui:head>  <div class="imui-title"> <h> 一覧画面 </h>  <div class="imui-toolbar-wrap"> <div class="imui-toolbar-inner">  <ul class="imui-list-toolbar">  <li><a class="imui-toolbar-icon" title=" 戻る "><span class="im-ui-icon-common--back"></span></a></li>  <li class="icon-split"></li>  <li><a class="imui-toolbar-icon imui-unaccented"><span class="im-ui-icon-common--settings mr-"></span> 設定 </a></li>  <li class="icon-split"></li>

97 <li class="icon-split"></li>  <li><a class="imui-toolbar-tab"><span class="im-ui-icon-common--star"></span></a></li>  <li><a class="imui-list-toolbar-tab-selected"><span class="im-ui-icon-common--search"></span></a></li>  <li><a class="imui-toolbar-tab"><span class="im-ui-icon-common--question"></span></a></li>  <li class="icon-split"></li> </ul>  <ul class="imui-list-box-toolbar-utility"> <li><a class="imui-toolbar-icon" title=" 最新情報 "><span class="im-ui-icon-common--refresh"></span></a></li> </ul>  <div class="imui-form-container-wide"> <div class="imui-box-operation cf"> <div class="pr-0 float-l"> <imui:select id="search-list" list="<%= selectbox %>" /> <div class="float-l"> <imui:textbox id="search-text" maxlength="0" placeholder=" 検索条件の入力 " style="width:0px"/> <imui:button value=" 検索 " id="submit" class="imui-button" /> <imui:button value=" クリア " id="clear" class="imui-button" /> <a id="on-delete-row" class="imui-unaccented" ><span class="im-ui-icon-common--trashbox mr-"></span> チェックした項目を削除 </a> <imui:listtable data="<%= listtable %>" id="listtable" multiselect="true" viewrecords="true" height="00"> <pager rownum="0" rowlist=",,0" /> <cols> <col name="col" caption=" 名前 " /> <col name="col" caption=" カナ " > <showlink baselinkurl="sample" showaction="/listtable"/> </col> <col name="col" caption=" ローマ字 " /> </cols> </imui:listtable> <script> $(function(){ $('#on-delete-row').on('click',function(){ imuiconfirm(' 選択したデータを削除しますよろしいですか?','',function(){ // 削除処理 ) ) $('#submit').on('click',function(){ // 検索ボタン押下時の処理 ) $('#clear').on('click',function(){ // クリアボタン押下時の処理 ); ) </script> 実装サンプル画面レイアウト

98 JSP

すべて見る

intra-mart Accel Platform — UIデザインガイドライン（PC版）第5版

intra-mart Accel Platform — UIデザインガイドライン（PC版）第5版 Copyright 0 NTT DATA INTRAMART CORPORATION Top UI デザインガイドライン ( PC 版 ). 改訂情報. 禁止事項. はじめに.. 本書の目的.. 対象読者.. 本書の構成. UI 基本方針. 対応環境条件.. クライアント要件.. 画面解像度.. Webブラウザ設定 6. UIデザイン 6.. UIデザインの流れ 6.. 画面レイアウト 6.. body