[ユーザーがイメージを選択] アクション では、エンドユーザーがデータ ソースにイメージを保存することを選択することのできるソリューションをデザインすることができます。エンドユーザーが選択するイメージは既にギャラリー (フォルダ) に存在するイメージまたは、モバイル デバイスのカメラ アプリケーションを使用してユーザーが撮るイメージです。後者の場合、[ユーザーがイメージを選択] アクションによりカメラ アプリケーションが自動的に開かれ、にユーザーが撮ったイメージを指定されたデータ ソース ノード保存します。(ギャラリーとカメラ) 両方の場合ともイメージは XML ノードに Base64 エンコードイメージとして追加されます。
2 番目のアクション [イメージをファイルに保存] は、データ ソース ノードのイメージをイメージ ファイルに (適切なイメージファイル拡張子と共に) 保存します。
ファイルの例 UserSelectedImages.mtd には、モバイルデバイスのギャラリーからエンドユーザーがイメージを選択することのできるデザインがあります。このイメージは、データソースの XML ノードに、 Base64 エンコード文字列として自動的に保存されます。Base64 エンコードイメージは、イメージとして、デザイナーにより選択された、(また、デザインにより定義された)場所に自動的に保存されます。
| メモ: | イデザインでイメージが表示される場合、メージソースが変更するたびに、 (例えばユーザーの選択により)、 イメージの [再ロード] アクション が新しいイメージを表示するために必要になります。 |
Example file: UserSelectedImages.mtd
デザインファイル UserSelectedmages.mtd は、 ***マイドキュメント MobileTogetherフォルダーにあります: MobileTogetherDesignerExamples\Tutorials\Images.MobileTogether Designer でこのファイルを開くことができ、シミュレータ [F5] を実行してデザインの定義を確認することができます。以下を行ってください:
•このフォルダーはユーザーが選択するイメージが保存される場所とデザインで定義されているため、フォルダー C:\MobileTogether\UserSelectedImages を作成します。または、他の場所をイメージのクリック時 イベントの イメージをファイルにロード/保管アクション アクションの保存場所として定義することもできます。
•MobileTogether Server 設定ページ で、 サーバー側ソリューション作業ディレクトリ をデザインのデフォルトファイル UserSelectedImages.xml の祖先ディレクトリとして設定します。これにより、デフォルトファイルが イメージのクリック時 イベントの [ファイルへ保存] アクションがトリガーされると更新されます。作業ディレクトリがデザインで参照されるすべてのファイルのベースとなるため、作業ディレクトリを C:\MobileTogether と設定し、デフォルトファイルを保存することを奨励します。このような方法で、イメージフォルダーとデフォルトフォルダーが C:\MobileTogether の同じベース URI で相対します。
デザインは、(チュートリアル フォルダーにもある) UserSelectedImages.xml と呼ばれる XML ファイルの単一のデータソースがあります。XML ドキュメントの構成は、下のスクリーンショットに表示されています。 Images 要素は複数の image 子要素を持つことができます。各、 image 要素は、 id 属性を持ち、 image 要素のコンテンツは、ユーザーにより選択されるイメージの Base64 エンコードとなります。ユーザーにより選択されたすべての新しいイメージは、自動的に image 要素に追加されます。
ノード $PERSISTENT/Root/@ImagePath は、イメージが保存されるフォルダーのパスを保管するために作成されます (下のスクリーンショット参照)。C:\MobileTogether\UserSelectedImages\ のデフォルトの値として設定されています。イメージが保存されるフォルダーの場所を変更する場合、パスを直接デザイン内のページソースペインで変更する事ができます:
デザインはページタイトルと動的なテーブルを表示するラベルから構成されています (左下のスクリーンショット) 。動的なテーブルには、ノード $XML1/images/image に関連したヘッダー行と繰り返し行があります。これは、 image 各要素に対し行が繰り返されることを意味します。また、各 image 要素が自身の行に作成されることを意味します。右下のスクリーンショットは、シミュレータで実行されたソリューションを表示します。説明は下に述べられています。
デザインに関して以下の点に注意してください:
•動的テーブルには (テーブルのコンテキストメニューで追加することのできる) [追加/削除] ボタンがあります。これによりユーザーは、新しい image-行を追加し、 image-行を削除することができます。
•各 image-行には 4 つの列があります: ID; Image Type; Image Preview; および保存されたイメージファイル (の名前)。
•新しい image-行が追加されると、イメージのプレースホルダが作成されクリックすることができます(右上のスクリーンショット参照)。
•イメージのプレースホルダがクリックされると、 @id 属性を image 要素に追加することができます。
•@id 属性の値は既存のイメージ ID よりも常大きくなるように計算されます。各 ID 値の一意性を保証します。前に image 要素が存在しない場合、 追加されるイメージは、最初の image 要素となり、 1 の値が要素の @id 属性に割り当てられます。Xpath 式をimage 要素を使用してコンテキストノードとして定義されます: attribute id {if (exists(preceding-sibling::image)) then max(preceding-sibling::image/@id) + 1 else 1}.
•ID 列は、 $XML1/images/image/@id ノードと関連する[ラベル] コントロール を持ちます。(ノードをコントロールにドロップすることで作成された) この関連は、現在の行の ID セルの現在の image 要素の @id 属性の値を表示する効果をもちます。
•イメージの種類の列 にはテキスト文字列からファイルタイプの情報を取得する XPath 式付き [編集フィールド] コントロールがあります。 XPath 式は、現在のノード(現在の image 要素) を関数 suggested-image-file-extension の引数として提出します。 関数は、ファイルタイプの情報の Base64 エンコード文字列を解析し、ファイルの拡張子を文字列として返します。
•イメージプレビュー 列にはイメージコントロールが含まれています。コントロールには、[イメージソースの種類] プロパティがあり、 base64 に設定されています。[イメージ ソース] プロパティは XPath 式 current()に設定されています。現在の image 要素は現在のノードです。イメージソースの種類 の設定は、イメージ要素のコンテンツが(URL ではなく) Base64 テキストとして読み込まれるかを決定します。
•[イメージ] コントロール には、 イメージのクリック時 イベントのために定義された複数のアクションがあります。これらに関する詳細を以下に記します。
•4 番目の列の Saved イメージファイル は、ディスクに保存されたイメージ ファイルに名前を与えます。Altova XPath 拡張子関数 suggested-image-file-extension を使用して、イメージ ファイル拡張子を与えます。
イメージのクリック時 イベントのアクション
•The [イメージ] コントロール の イメージのクリック時 イベントは、下のスクリーンショットに表示されるアクションに割り当てられました。
•現在のノード (image 要素) を指定するIf 条件が空の場合、イメージがクリックされると、新しい id 属性が作成され、現在空の image 要素の子として追加されます。 (ユーザーがテーブル行を追加すると空の image 要素が追加されます。 (上のシミュレーターのスクリーンショットを参照してください)。) id 属性は XPath 式を介して値の計算が割り当てられます: if (exists(preceding-sibling::image)) then max(preceding-sibling::image/@id) + 1 else 1. この式は、既存のイメージ ID よりも 1 つ大きい値を返し、各 ID 値の一意性を保ちます。イメージが存在しない場合、新しく追加されたイメージには 1 の ID 値が与えられます。
•[ユーザーがイメージを選択] アクション は、モバイルデバイスのフォルダー (ギャラリー) からイメージが選択されることを指定します。これにより、ユーザーは、イメージがクリックされるとイメージを参照することができます。アクションのターゲットノードは Base64 エンコードイメージが保存される場所です。例では、ターゲットノードは、 Image 要素である現在のノードです。
•[ユーザーがイメージを選択] アクション には 3 つの条件があります: OK 時 、キャンセル時、および エラー時。
OK 時: イメージの再ロード + イメージをロード、ファイルに保存 + ファイルに保存
•OK 時 の条件は、指定されたデータ ソース ノードへのイメージのインポートに成功すると3つのアクションを実行します (下のスクリーンショット参照): (i) イメージの [再ロード] アクション (ii) データ ソース ノードからイメージ ファイルへイメージを保存する [ファイルにイメージを保存] アクション (iii) ソース ツリー (クライアント/サーバー上) のデータをデータ ソース ファイルに保存する [ファイルに保存] アクション 。
•A [再ロード] アクション は、[イメージ] コントロールのために設定されます。これにより、 [イメージ] コントロールの イメージ ソース プロパティで指定されたイメージが再ロードされます。 イメージ ソースプロパティの値は、現在のノードに設定されているため、また、現在のノードは、ユーザのにより選択されたイメージのターゲット ノードである Image 要素であるため、現在の行のためのイメージのプレビューのセルは、ユーザーのイメージと共に再ロードされます。
•[イメージをファイルに保存] アクション (下のスクリーンショット) は、データ ソース ノードのイメージをイメージ ファイルに保存します。ソース ノード は (image 要素である) 現在のノードに設定されています。バイナリ イメージ ファイルはこのノードの Base64 データから生成されます。
•設定オプションは、バイナリのイメージファイルが保存される場所を指定します。XPath 式は、イメージが保存される場所とイメージのファイル名を生成します。成します。イメージフォルダーへのパスを持つ $PERSISTENT ツリー内のノードを指定します。 @id 属性はファイル名を与え、 Altova XPath 拡張関数suggested-image-file-extension は、ファイルの拡張子を与えます。
•[ファイルに保存] アクション は、サーバー上のデータ ソース ツリーのデータを指定されたデータ ソース ファイルに保存します。
キャンセル時: 削除ノード
ユーザーがイメージの選択プロセスをキャンセルする場合、 @id ノードは[ノードの削除] アクションから削除されます。留意点: イメージプレースホルダをクリックすることにより@id ノードは、イメージの選択プロセスが開始されると作成されます (上の"ファイルの例" のセクションを参照してください)。
エラー時: メッセージボックス + ノードの削除
指定された XML ノードに、イメージを Base64 データとしてインポート中にエラーが発生した場合、 エラー時 条件式に定義されたアクションが実行されます。エラーメッセージが表示され、 @id ノードが削除されます。@id ノードは、イメージの選択プロセスが開始されると作成されます (上の"ファイルの例" のセクションを参照してください)。
