Image Map コントロールを使用すると、座標 {x, y} およびサイズで識別される領域を使用して背景画像を表示できます。定義された各領域には、表示されたサイズで、定義された座標上に画像を表示できます。各領域は List (グリッド) 内の 1 つのアイテムに対応します。領域が選択されると、領域に関連付けられた既定のアクションが実行されます。
このコントロールは、グリッドコントロールに適用されます。
たとえば、自動車部品で考えてみましょう。
まず、Work With パターンを適用した次のトランザクションを定義することから始めます。
この例を進める前に、このコントロールの仕組みを理解する必要があります。
既に言及しているとおり、このコントロールは座標によって識別される領域を使用して背景画像を表示するものです。座標は、背景画像の左上隅 ({o,o} 座標) で始まり、X 軸は背景画像に対して水平で、右に進むと拡張し、Y 軸は背景画像に対して垂直で、下に行くと拡張します。
したがって、上図に示すように、新しい Transaction オブジェクトを作成するときには、少なくとも次の 4 つの項目属性を定義する必要があります。
- X 座標: 領域の左上隅の x 座標を表します。この例のトランザクションでは、TRNImageMapX という項目属性で、タイプは Numeric である必要があります。
- Y 座標: 領域の左上隅の y 座標を表します。この例のトランザクションでは、TRNImageMapY という項目属性で、タイプは Numeric である必要があります。
- サイズ: 領域のサイズを表します。たとえば、座標が {0,0} でサイズは 100 と定義する場合、領域は、ポイント {0,0} および {100,100} で定義される四角によって表されます。この例のトランザクションでは、TRNImageMapSize という項目属性で、タイプは Numeric である必要があります。
- 画像: x および y 座標とサイズで定義された領域に背景レイアウトとして画像を表示するために使用されます。この例のトランザクションでは、TRNImageMapImage という項目属性で、タイプは Image である必要があります。
注: 項目属性 TRNImageMapInfo は必須ではありません。この例では、領域が選択された場合に、その領域の情報を表示するために使用されます。
Work With パターンを適用したら、グリッドで Image Map コントロールを有効にする必要があります。これを実行するには、List セクションを開き、グリッドを選択してから [ Control Type ] プロパティを Image Map に設定します。
これにより、前の図にあるように、ほかのいくつかのプロパティが有効になります:
Image Map のプロパティ:
Image
|
背景画像の選択に使用されます。
|
Horizontal Coordinate Attribute
|
各領域の左上隅の x 座標を表す項目属性です。
|
Vertical Coordinate Attribute
|
各領域の左上隅の y 座標を表す項目属性です。
|
Size Attribute
|
各領域のサイズを表す項目属性です。
|
Image Map のメソッド (**):
Grid1.SetBackGroundImage(Image)
Grid1 は Image Map グリッドのコントロール名であり、Image は Image データタイプの変数または項目属性です。
例を進めて、プロパティを次のように設定します。
Image
|
carOutline*
|
Horizontal Coordinate Attribute
|
TRNImageMapX
|
Vertical Coordinate Attribute
|
TRNImageMapY
|
Size Attribute
|
TRNImageMapSize
|
* この画像はナレッジベース内に格納されている必要があります。
次に、グリッドのテーブルに追加すると、各領域の背景として画像項目属性が表示されます。
結果は次のようになります:
これで完了です。F5 キーを押します。
表示された画像をタップして、領域の 1 つを選択し、何が起きるか確認します。
このように、領域を選択すると、既定のアクションが実行されます。ここでは [ Section (General) ] が表示されます。
この例では、(トランザクションのレコードとして) 3 つの新しい自動車部品を作成し、 [ Section (General) ] で、唯一表示したい項目属性である TRNImageMapInfo を除くすべての項目属性をレイアウトから削除しました。
座標は、背景画像のサイズに対して相対的です。たとえば、800 x 600 の画像があり、領域の座標が {500, 200} で 1024 x 768 の解像度の場合、その領域の画像は、{500*1024/800, 200*768/600} = {640, 256} に表示されます。
デバイスの解像度より大きな画像は表示されません。たとえば、1024 x 768 の解像度のデバイスで、画像が 2048 x 1536 の場合、表示されません。
GeneXus X Evolution 3 以降、画像内の項目の配置はより簡単になりました。iPhone シミュレーターを実行している際に、画像のどこかをタップすると、タップされた位置の座標が Xcode のコンソールに記録されます。
ユーザーが Image Map でロングタップ操作を実行したときにトリガーされます。
パラメーター:
- &hCoord、&vCoord: ロングタップポイントの水平座標と垂直座標です。これらの座標は画像のサイズに対して相対的です。
例:
Event Grid1.LongTap(&hCoord, &vCoord)
composite
SavePoint(&hCoord, &vCoord)
endcomposite
EndEvent
Android の場合、デバイスのズーム機能は、Android バージョン 2.2 以降でのみ動作します。
 Controls: Maps, Rating, Switch
|