2010年7月1日木曜日

Metadata

以下のドキュメントは、英語の原文を日本語へ翻訳したものをRhomobile社の許可のもと、公開しています。
公式なドキュメントはRhomobile社のサイトをご覧ください。
また、この文書は2010/6/30(JST)の情報がもとになっています。
この日本語の翻訳について問題・質問などがある場合、コメントを残してください。それ以外については、本ドキュメント内にある問い合わせ先にお願いします。

The following document (a translation of the English original into Japanese) is published with Rhomobile permission.
If you need official documents, please visit Rhomobile site.
In addition, the following document is based on 2010/June/30 (JST) information.
If you have any question, problem about the Japanese translation, please leave your comment. Except for that, refer contacts in the document.


目次

メタデータの定義

概要(Overview)

ハッシュの配列として定義される子要素を持つように、メタデータはハッシュのハッシュを使って定義されます。各オブジェクト内のキーは任意の文字列が可能ですが、いくつかの予約ラベルとラベルは特定の要素で使用されます。これはいくつかのメタデータの例です:

    row1 = { :label => 'Address 1',
:value => '123 fake street',
:name => 'address1',
:type => 'labeledrow' }

table = { :label => 'Table',
:type => 'table',
:children => [ row1, row1, row1 ] }

view = { :title => 'IUI meta panel',
:type => 'iuipanel',
:children => [table] }


予約ラベル

次のラベルは、メタデータのフレームワークでの使用に予約されています。

  • type
  • children
  • repeatable
  • validation

children

エレメントのchildrenは、ハッシュの配列の定義されます。エレメントのchidrenを指定するには、'children'のキーを追加し、そのエレメントのchildrenを指定すします。

次の例では、childrenとして3つのrow1エレメントを持つテーブルエレメントを示しています:



row1 = { :label => 'Address 1',
:value => '123 fake street',
:name => 'address1',
:type => 'labeledrow' }

table = { :label => 'Table',
:type => 'table',
:children => [ row1, row1, row1 ] }

repeatable

repeatableエレメントは、反復処理するオブジェクトの配列を指定するためにdata bindingを使用します。repeatableエレメントのchildrenは、repeatableハッシュキーにより参照されるオブジェクトの各エレメントに複製されます。data bindingについてのより詳細な情報は、このページのdata bindingセクションを参照してください。

次の例は、2つのchild rowsのテーブルで、一つのrowja

"123 fake street'が値として設定されたもの、もう一つのrowは'321 fake street'が設定されたものです。

  @addresses = [ { :name => "123 fake street" }, { :name => "321 fake street" } ]

row1 = { :label => 'Address 1',
:value => '{{name}}',
:name => 'address1',
:type => 'labeledrow' }

table = { :label => 'Table',
:type => 'table',
:children => [ row1 ],
:repeatable => '{{@addresses}}' }


使用法(Usage):

ソースアダプタ

ソースアダプタでは、メタデータメソッドを実装する必要があります。このメソッドは、メタデータを含むJSON文字列を返します。トップレベルで、それはハッシュとキーで、メタデータとして利用します(または、partialメタデータの場合は、任意のキーになります)


上で説明されたメタデータを利用する簡単な例を示します:

def metadata
row1 = { :label => 'Address 1',
:value => '123 fake street',
:name => 'address1',
:type => 'labeledrow' }

table = { :label => 'Table',
:type => 'table',
:children => [ row1, row1, row1 ] }

view = { :title => 'IUI meta panel',
:type => 'iuipanel',
:children => [table] }

{'index' => view}.to_json
end


より複雑な例です:

  def metadata


@contact = {:label => '{{name}}',
:name => 'contact',
:type => 'labeledrow', # a row which links to another object in a different model
:value => '{{age}}, {{year}}' } # name and phone of the contact object not the account!

@rows = {:type => 'view',
:children => [@contact],
:repeatable => '{{@forms}}'

}

@link = {:label => 'New',
:value => '{{@link1}}',
:type => 'labeledrow'
}

@table = {:label => 'table',
:name => 'table',
:type => 'table',
:class => 'grid',
:children => [@link, @rows]
}

@index = {:title => 'PEOPLE',
:type => 'iuipanel',
:children => [@table]
}

@error = { :label => '{{@errorlabel}}',
:type => 'text',
:name => 'name',
:value => '{{@errors}}'

}

@name = { :label => 'name',
:type => 'textinput',
:name => 'name',
:value => '{{@form/name}}',
:validation => { :validators => [:required] }
}

@age = { :label => 'age',
:type => 'textinput',
:name => 'age',
:value => '{{@form/age}}',
:validation => { :validators => [:required], :min_value => 13 }
}

@year = { :label => 'year',
:type => 'textinput',
:name => 'year',
:value => '{{@form/year}}',
:validation => { :validators => [:required], :max_value => 2010 }
}
@submit = { :name => 'submit',
:value => 'submit',
:type => 'submit'

}

@form = { :name => 'inputform',
:action => '{{@submiturl}}',
:type => 'form',
:children => [@error,@name,@age,@year,@submit]
}


{'indexdata' => @index, 'new' => @form}.to_json
end

クライアント

クライアント上で実行する必要があるのは、build.ymlにrhodes_translator extensionを含めることです。同期した後、アクションに関連したキーのモデルのメタデータをエントリに持つアクションは、Viewの代わりにメタデータでrenderされます。それはもはや、コントローラ内で'require rhodes_translator'を必要としません。

また、Viewの中でメソッドrender_metadataを使い、任意のメタデータをrenderすることができます。メタデータにアクションを指定する必要があります。デフォルトでは、提供されるメタデータはモデルから取り出されますが、上書きも可能です。


例:

<%= render_metadata('indexdata')%>

あるいは

 <%= render_metadata('index', Account.metadata) %>

データバインディング

エレメントがHTMLに変換される前に、データバインディングは発生します。メソッドでのすべてのインスタンス変数は、データバインディングキーで参照することができます。

データバインディングキーは常に文字列内に含まれます。これは、ダブルブラケットエンクロージャを使用していることを示しています:{{databinding path here}}

ハッシュキーを参照、または配列のインデックスを行うのに/演算子が使用されます。オブジェクトへのパス全体を指定する必要がありますが、唯一の例外はrepeatableエレメント内だけです。

例として利用するデータは、次のようになります:

 @data = { :key1 => [ 'array', 'with', 'elements'], :key2 => { :this => "is", :a => "hash" } }


例のデータバインディングキーは、このデータを使用します:


{{@data/key1/0}} will be replaced with 'array'

{{@data/key1/2}} will be replaced with 'elements'

{{@data/key1/5}} will be replaced with an error message


{{@data/key2/this}} will be replaced with 'is'

{{@data/key2/this}} will be replaced with 'hash'


repeatableエレメント内で、ルートノードは繰り返されている要素に置き換えられます。上記のセクションでのrepeatableの例を参照してください。repeatableの中でルートエレメントを参照するには、/をデータバインディング式に付加する必要があります:{{/@data/key1/0}}

入力規則

validationは存在するメタデータへ追加するキーです。以下は、利用可能なvalidationのすべての例です。

:validation => {
:regexp = "^.+$",
:validators = [:required, :number, :currency, :email, :phone],
:min_len = 0,
:max_len = 100,
:min_value = 10,
:max_value = 1000
}

テンプレート

フォーム

データを送信するために使用されるHTMLフォーム

<form></form>


  • Type
    • form
  • Keys
    • name
      • <form>タグのname属性に使用
    • action
      • <form>タグのaction属性に使用
    • method
      • <form>タグのmethod属性に使用
  • Children
    • Childrenは<form>と</form>タグ間で表示されます

Panel

'panel'を設定するdiv classの<div>タグをchildrenに含みます

<div class="panel"></div>


  • Type
    • panel
  • Keys
    • 未使用
  • Children
    • Childrenは<div>と</div>タグの間で表示されます

View

余分なHTMLがないchildrenを含みます

  • Type
    • view
  • Keys
    • 未使用
  • Children
    • Childrenが直接表示する

テーブル

HTMLテーブル

<table></table>


  • Type
    • table
  • Keys
    • class
      • <table>エレメントのclass属性
  • Children
    • Childrenは<table>および</テーブル>タグの間に表示されます

Text

ラベルテキストの表示

<div>

<label></label>
<span></span>
</div>


  • Type
    • text
  • Keys
    • div_class
      • divのclass属性
    • label_class
      • ラベルのclass属性
    • value_class
      • スパンのクラス属性
    • lable
      • ラベルエレメントの値
    • value
      • 内側のdiv要素の値
  • Children
    • Childrenは表示されません。

テキスト入力、パスワード

ラベルのテキスト入力

<div>

<label></label>
<input type="text|password"></input>
</div>


  • Type
    • textinput|password
  • Keys
    • div_class
      • 外側のdivのクラス属性
    • label_class
      • ラベルのclass属性
    • value_class
      • 入力のクラス属性
    • label
      • ラベルエレメントの値
    • value
      • 入力の値の属性
    • name
      • 入力のname属性
    • editable
      • ブール値、有効/無効の選択の変更を有効にします。デフォルトはtrue
  • Children
    • Childrenは表示されません。

テキスト領域

テキスト領域の入力フィールド

<textarea>

</textarea>
  • Type
    • テキストエリア
  • Keys
    • class
      • textareaのclass属性
    • value
      • テキストエリアのvalue属性
    • name
      • テキストエリアのname属性
    • rows
      • textareaのrows属性
    • cols
      • textareaのcols属性
    • editable
      • ブール値。有効/無効の選択の変更を有効にします。デフォルトはtrue
  • Children
    • Childrenはレンダリングされません。

選択

HTMLの選択

<div>

<label></label>
<select>
<option></option>
</select>
</div>


  • Type
    • select
  • Keys
    • size
      • selectのサイズ属性
    • class
      • selectのクラス属性
    • allow_multi
      • ブール値。ドロップダウンで複数選択を許す。デフォルトはfalse
    • editable
      • ブール値。選択の変更を有効/無効にします。デフォルトはtrue
    • div_class
      • 外側のdivのクラス属性
    • label_class
      • ラベルのclass属性
    • label
      • ラベルエレメントの値。
    • value
      • 表示されるデフォルト値
    • values
      • オプションとして提供する文字列の配列
  • Children
    • Childrenはレンダリングされません。

チェックボックス

チェックボックスのフィールド

<div>

<label></label>
<input type="checkbox"></input>
</div>


  • Type
    • チェックボックス
  • Keys
    • div_class
      • 外側のdivのクラス属性
    • label_class
      • labelのclass属性
    • label
      • ラベルエレメントの値
    • name
      • 入力のname属性
    • default_value
      • ブール値。true=チェック済み、false=未チェック。デフォルトはfalse
    • value
      • 文字列値。'true'=チェック済み、その他=unchecked
  • Children
    • Childrenは表示されません

link

アンカータグ

<a href=""></a>


  • Type
    • link
  • Keys
    • url
      • href属性内のURL
    • text
      • リンクが表示するテキスト
  • Children
    • Childrenは表示されません

telephone

アンカータグ。クリックするcall情報

<a href=""></a>


  • Type/0}
    • telephone
  • Keys
    • number
      • callする電話番号
    • text
      • リンクで表示されるテキスト
  • Children
    • Childrenは表示されません。

カスタムテンプレート

アプリケーションのapp/templatesフォルダにerbファイル配置することで、テンプレートを上書きすることができます。これらは、どんなビルトインインテンプレートの使用する前に使用されます。

Rodesアプリへメタデータを追加する

最初のステップはrhodes-translator gemを追加することです:

 [sudo] gem install rhodes-translator


次に、アプリケーションのbuild.ymlのextensionにrhodes_translatorを追加します:

 extensions: ["rhodes_translator"]


最後に、RhoSyncソースアダプタにメタデータメソッドを実装する必要があります。



0 件のコメント: