このサイトをビューするために JavaScript を有効化してください。

Altova MobileTogether Designer

[ユーザーがイメージを選択] アクション では、エンドユーザーがデータ ソースにイメージを保存することを選択することのできるソリューションをデザインすることができます。エンドユーザーが選択するイメージは既にギャラリー (フォルダ) に存在するイメージまたは、モバイル デバイスのカメラ アプリケーションを使用してユーザーが撮るイメージです。後者の場合、[ユーザーがイメージを選択] アクションによりカメラ アプリケーションが自動的に開かれ、にユーザーが撮ったイメージを指定されたデータ ソース ノード保存します。(ギャラリーとカメラ) 両方の場合ともイメージは XML ノードに Base64 エンコードイメージとして追加されます。

 

2 番目のアクション [イメージをファイルに保存] は、データ ソース ノードのイメージをイメージ ファイルに (適切なイメージファイル拡張子と共に) 保存します。

 

ファイルの例 UserSelectedImages.mtd には、モバイルデバイスのギャラリーからエンドユーザーがイメージを選択することのできるデザインがあります。 このイメージは、データソースの XML ノードに、 Base64 エンコード文字列として自動的に保存されます。 Base64 エンコードイメージは、イメージとして、デザイナーにより選択された、(また、デザインにより定義された)場所に自動的に保存されます。

 

メモ:イデザインでイメージが表示される場合、メージソースが変更するたびに、 (例えばユーザーの選択により)、 イメージの [再ロード] アクション が新しいイメージを表示するために必要になります。

 

ファイルの例: UserSelectedImages.mtd

デザインファイル UserSelectedmages.mtd は、 マイ ドキュメント  MobileTogether フォルダーにあります: MobileTogetherDesignerExamples\Tutorials\。 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 要素に追加されます。

MTDUserImagesXMLStruc

ノード $PERSISTENT/Root/@ImagePath は、イメージが保存されるフォルダーのパスを保管するために作成されます (下のスクリーンショット参照)。 C:\MobileTogether\UserSelectedImages\ のデフォルトの値として設定されています。イメージが保存されるフォルダーの場所を変更する場合、パスを直接デザイン内のページソースペインで変更する事ができます: ダブルクリックし、名前を与え編集してください。

MTDUserImagesPath2ImageLocation

デザイン (左下のスクリーンショット) は、ページ タイトルを表示するラベルと動的 テーブルにより構成されています。 動的なテーブルには、ノード $XML1/images/image に関連したヘッダー行と繰り返し行があります。これは、 image 各要素に対し行が繰り返されることを意味します。また、各 image 要素が自身の行に作成されることを意味します。右下のスクリーンショットは、シミュレータで実行されたソリューションを表示します。説明は下に述べられています。

MTDUserActionedImagesDes01     Click to expand/collapse

デザインに関して以下の点に注意してください:

 

動的テーブルには (テーブルのコンテキストメニューで追加することのできる) [追加/削除] ボタンがあります。これによりユーザーは、新しい image-行を追加し、 image-行を削除することができます。

image-行には 4 つの列があります: ID; Image Type; Image Preview; および保存されたイメージファイル (の名前)。

新しい image-行が追加されると、イメージのプレースホルダが作成されクリックすることができます(右上のスクリーンショット参照)。

イメージのプレースホルダがクリックされると、 @id 属性を image 要素に追加することができます。

@id 属性の値は、既存のイメージ ID より 1 つ大きく計算されます。これにより各 ID 値の一意性を保つことができます。これにより、各 ID 値の一意性が保障されます。 前に image 要素が存在しない場合、 追加されるイメージは、最初の image 要素となり、 1 の値が要素の @id 属性に割り当てられます。XPath 式 は、コンテキストノードとして、 image 要素とともに定義されます : attribute id {if (exists(preceding-sibling::image)) then max(preceding-sibling::image/@id) + 1 else 1}.

XPath 式は、コンテキストノード max(preceding-sibling::image/@id) + 1 としての image 要素とともに定義されます。

ID 列は、 $XML1/images/image/@id ノードと関連する[ラベル] コントロール を持ちます。(ノードをコントロールにドロップすることで作成された) この関連は、現在の行の ID セルの現在の image 要素の @id 属性の値を表示する効果をもちます。

イメージの種類の列 にはテキスト文字列からファイルタイプの情報を取得する XPath 式付き [編集フィールド] コントロールがあります。XPath 式は、現在のノード(現在の image 要素) を関数 suggested-image-file-extension の引数として提出します。  関数は、ファイルタイプの情報の Base64 エンコード文字列を解析し、ファイルの拡張子を文字列として返します。

Image Preview 列は、 [イメージ] コントロール を含みます。コントロールには、[イメージソースの種類] プロパティがあり、 base64 に設定されています。[イメージ ソース] プロパティは XPath 式 current()に設定されています。現在の image 要素は現在のノードです。イメージソースの種類 の設定は、イメージ要素のコンテンツが(URL ではなく) Base64 テキストとして読み込まれるかを決定します。

[イメージ] コントロール には、 イメージのクリック時 イベントのために定義された複数のアクションがあります

4 番目の列の Saved イメージファイル は、ディスクに保存されたイメージ ファイルに名前を与えます。Altova XPath 拡張子関数 suggested-image-file-extension を使用して、イメージ ファイル拡張子を与えます。

 

イメージのクリック時 イベントのアクション

 

[イメージ] コントロールイメージのクリック時 イベントは、下のスクリーンショットに表示されるアクションに割り当てられました。

MTDUserActionedImagesDes02

現在のノード (image 要素) を指定するIf 条件が空の場合、イメージがクリックされると、新しい id 属性が作成され、現在空の image 要素の子として追加されます。 (ユーザーがテーブル行を追加すると空の image 要素が追加されます。 (上のシミュレーターのスクリーンショットを参照してください)。) id 属性は XPath 式を介して値の計算が割り当てられます: if (exists(preceding-sibling::image)) then max(preceding-sibling::image/@id) + 1 else 1. この式は、既存のイメージ ID よりも 1 つ大きい値を返し、各 ID 値の一意性を保ちます。 イメージが存在しない場合、新しく追加されたイメージには の ID 値のが与えられます。

[ユーザーがイメージを選択] アクション は、モバイルデバイスのフォルダー (ギャラリー) からイメージが選択されることを指定します。これにより、ユーザーは、イメージがクリックされるとイメージを参照することができます。アクションのターゲットノードは Base64 エンコードイメージが保存される場所です。例では、ターゲットノードは、 Image 要素である現在のノードです。

[ユーザーがイメージを選択] アクション には 3 つの条件があります:OK 、キャンセル時、および エラー時。これらについては下で個別に説明されています。

 

OK 時: イメージの再ロード + イメージをロード、ファイルに保存 + ファイルに保存

 

OK 時 の条件は、指定されたデータ ソース ノードへのイメージのインポートに成功すると3つのアクションを実行します (下のスクリーンショット参照): (i) イメージの [再ロード] アクション; (ii) データ ソース ノードからイメージ ファイルへイメージを保存する [ファイルにイメージを保存] アクション; (iii) ソース ツリー (クライアント/サーバー上) のデータをデータ ソース ファイルに保存する [ファイルに保存] アクション

MTDUserActionedImagesDes02OnOK

[再ロード] アクション は、[イメージ] コントロールのために設定されます。これにより、[イメージ] コントロールの イメージ ソース プロパティで指定されたイメージが再ロードされます。 イメージ ソース プロパティの値は、現在のノードに設定されているため、また、現在のノードは、ユーザのにより選択されたイメージのターゲット ノードである Image 要素であるため、現在の行のためのイメージのプレビューのセルは、ユーザーのイメージと共に再ロードされます。

[イメージをファイルに保存] アクション (下のスクリーンショット) は、データ ソース ノードのイメージをイメージ ファイルに保存します。ソース ノード は (image 要素である) 現在のノードに設定されています。バイナリ イメージ ファイルはこのノードの Base64 データから生成されます。

MTDUserActionedImagesDes03

設定オプションは、バイナリのイメージファイルが保存される場所を指定します。 XPath 式は、イメージが保存される場所とイメージのファイル名を生成します。イメージフォルダーへのパスを持つ $PERSISTENT ツリー内のノードを指定します。 @id 属性はファイル名を与え、 Altova XPath 拡張関数 suggested-image-file-extension は、ファイルの拡張子を与えます。

[ファイルに保存] アクション は、サーバー上のデータ ソース ツリーのデータを指定されたデータ ソース ファイルに保存します。

 

キャンセル時: ノードの削除

 

ユーザーがイメージの選択プロセスをキャンセルする場合、 @id ノードは[ノードの削除] アクションから削除されます。注意 : @id ノードは、(イメージのプレースホルダをクリックすることにより) イメージ選択プロセスが開始されると作成されます (上の"ファイルの例" のセクションを参照してください)

MTDUserActionedImagesDes02OnCancel

 

エラー時: メッセージボックス + ノードの削除

 

指定された XML ノードに、イメージを Base64 データとしてインポート中にエラーが発生した場合、 エラー時 条件式に定義されたアクションが実行されます。エラーメッセージが表示され、 @id ノードが削除されます。 @id ノードは、イメージの選択プロセスが開始されると作成されます (上の"ファイルの例" のセクションを参照してください)。

MTDUserActionedImagesDes02OnError

 

(C) 2019 Altova GmbH