公式なドキュメントはRhomobile社のサイトをご覧ください。
また、この文書は2010/7/6(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/July/6 (JST) information.
If you have any question, problem about the Japanese translation, please leave your comment. Except for that, refer contacts in the document.
BlackBerryのHTMLとCSS
BlackBerryのブラウザのバージョン4.2 - ネイティブBlackBerryのアプリケーションに利用できるバージョン - は現代のCSSに非常に限定的なサポートをしています。特に注意すべきは、(floatのあるdivのような)標準ビューに使われるいくつかの重要なスタイルがBlackBerryのブラウザではサポートされません。
その他のサポートされるデバイスの最新のブラウザにある機能の利点を活用するには、BlackBerryの現代的なCSSのスタイルの限定的なサポートを軽減する構造を持つ代替ビューのファイルを提供することです。代わりに、RhodesアプリケーションがBlackBerryデバイスで動作するときは、テーブルベースのビューのファイルが読み込まれます。
プロフィールは、標準対応するようにBlackBerryのカスタマイズビューは同じディレクトリありまり、'.bb.erb'のように標準のerb拡張子が置き換わって標準のビューファイルと区別することができます。実行時の読み込みために、これらのビューのファイルは、標準的な対応と同じ名前を持つ必要があります。
他のプラットフォームと同様に、BlackBerryのスタイルシートのデフォルトのスタイルをpageTitle、Toolbarとcontent divに見つけることができます。
BlackBerryビューに追加のスタイルを含めたい場合、the BlackBerry Browser Version 4.2 Content Developer Guideを参照してください。
中身 |
HTMLの構造
pageTitle（<div id="pageTitle">）
pageTitle divはh1タグに包まれた現在のページのタイトルを含んでいます。ページタイトルは、各アプリケーションビューの上部に表示されます。
<div id="pageTitle">
<h1>Things</h1>
</div>
toolbar（<div id="toolbar">）
ツールバーのdiv要素は、ユーザーがアクションを実行するとアプリケーションを介して移動できるように対話的要素が含まれています。BlackBerryで、これらの要素はインラインリンクの一連としてスタイルされます。
<div id="toolbar">
<%= link_to "Back", :action => :index %>
<%= link_to "Edit", :action => :edit, :id => @uiformdemo.object %>
</div>
ツールバーのdivがpageTitle部のすぐ下に表示されます。
Content（<div id="content">）
標準的なスマートフォンでのように、リスト、フォーム、および他のコンテンツは、生成されたスタイルシートに含まれるスタイルを使用するために、コンテンツdivの中に配置されなければなりません。
リスト
項目とリンクの簡単なリストが、BlackBerryで表示できます。
- <%= url_for :controller => :Product %>
- <%= url_for :controller => :Inventory %>
- <%= url_for :controller => :Location %>
- <%= url_for :controller => :Purchase %>
例は、生成されたアプリケーションとモデルのインデックスファイルで見つけることができます。
テーブル
コンテナの正確なアライメントを必要とするすべてのコンテンツは、テーブルに配置する必要があります。
BlackBerryのブラウザ4.2は、CSSを通してテーブルのデータセルの幅を定義をサポートしていません。フォーム全体を均等間隔の列を維持したい場合は、手動ですべての行に1つの列の幅を定義する必要があります。通常、ラベルを含むセルの幅を125（width="125"）に設定し、ユーザの入力を可能な幅を損なうことなく、説明のラベルの幅を提供します。
定義された幅を持つテーブルの例は、生成されたモデルnew.bb.erbファイルで見つけることができます。幅がない定義されてテーブルの例は、生成されたモデルshow.bb.erbファイルで見ることができます。
フォーム
BlackBerryのカスタム"New"フォームの作成
ビューの"content" divの中の1つまたは複数のテーブルに整理されたフォームフィールドにより、ネイティブスタイルのフォームを作成することができます。
- <divのid="content">タグ内にフォームタグを配置します。フォームは、現在のコントローラの"create"アクションへすｂみつるpostメソッドを使用してください。
<form method="POST" action="<%= url_for :action => :create %>">
</form> - フォーム内に<table>タグを追加します。複数のグループにフィールドを分割するために、上記のように各グループに1つの<table>タグを配置します。
注：フィールドのグループにラベルを追加するには、これらのフィールドを含むテーブルの直前の<h2 class="groupTitle">タグの中にラベルを配置します。 - 各入力フィールド/フィールドのラベルの<table>タグ内に<tr>タグを追加します。BlackBerryの適切なスタイルをアクセスするために、追加するシンタックスが以下の例に見つけるでしょう。
注：各チェックボックスとラジオボタンは、その行の内側に含まれている必要があります。書式のさらなる議論はこのドキュメントの後半で見つけることができます。 - "submit"ボタンを配置するのは、最後の閉じ</table>の直後で閉じ</form>の上です。注：ボタンは、<tr>タグ内に含まするべきではありません。
<input type="submit" value="Create" />
BlackBerryのカスタム"Edit"フォームの作成
ビューの"content" divの中の1つまたは複数のテーブルにフォームフィールドを配置することで、ネイティブスタイルのフォームを作成することができます。
- <div id="content">タグ内にformタグを配置します。フォームは、現在のコントローラの"create"または"update"アクションへsubmitするPOSTメソッドを使用してください。
<form method="POST" action="<%= url_for :action => : update %>">
</form> - フォーム内に<table>タグを追加します。フィールドを複数の分けるには、上記のように各グループに1つ<table>タグを配置します。
注：フィールドのグループにラベルを追加するには、フィールドを含むテーブルの直前の<h2 class="groupTitle">タグの中にラベルを配置します。 - 編集フォームを作成するときに、それが編集中のオブジェクトのIDを含む隠しフィールドを含める必要があります。
<input type="hidden" name="id" value="<%= @model_name.object %>"/>
- 各入力フィールド/フィールドラベルの<table>タグに<tr>タグを追加します。BlackBerryの適切なスタイルをアクセスするために、以下の例にあるシンタックスを付け加える必要があります。
注：各チェックボックスとラジオボタンは、その行の内側に含まれている必要があります。書式のさらなる議論はこのドキュメントの後半で見つけることができます。 - "submit"ボタンは、最後の閉じ</table>タグの直後で閉じ</form>タグの直前に配置します。注：ボタンは、<tr>タグ内に含まするべきではありません。
<input type="submit" value="Update" />
フォームエレメント
各フォームエレメントは、完全なテーブルの行を取ります。注：各チェックボックスとラジオボタンは、そのリスト項目内に含まれる必要があります。
BlackBerryのブラウザ4.2は、CSSを通してテーブルのデータセルの幅定義をサポートしていません。フォーム全体を均等間隔の列を維持したい場合は、手動ですべての行に1つの列の幅を定義する必要があります。通常、ラベルを含むセルの幅を125（width="125"）に設定すると、ユーザの入力が可能なスペース損なうことなく、説明のラベルに十分な幅を提供します。
テキストフィールド
<tr>
<td width="125">Textbox1: </td>
<td><input type="text" name="uiformdemo[textbox1]"/></td>
</tr>
チェックボックス/スイッチ
<tr>
<td width="125">Checkbox1: </td>
<td><input type="text" name="uiformdemo[checkbox1]"/></td>
</tr>
ラジオボタン
<h2 class="groupTitle">Radio Button</h2>
<table>
<tr>
<td width="125">Radiobutton1: </td>
<td><input type="text" name="uiformdemo[radiobutton]" value="radiobutton1" /></td>
</tr>
<tr>
<td width="125">Radiobutton2: </td>
<td><input type="text" name="uiformdemo[radiobutton]" value="radiobutton2" /></td>
</tr>
<tr>
<td width="125">Radiobutton3: </td>
<td><input type="text" name="uiformdemo[radiobutton]" value="radiobutton3" /></td>
</tr>
</table>
選択ボックス
<h2 class="groupTitle">Select Box</h2>
<table>
<tr>
<td width="125">Select device</td>
<td>
<select name="uiformdemo[selectbox]">
<option selected>Please select</option>
<option value="apple">iPhone</option>
<option value="android">Android</option>
<option value="blackberry">BlackBerry</option>
<option value="winmo">Windows Mobile</option>
</select>
</td>
</tr>
</table>
テキストエリア
各textareaタグは、行と列の数の属性を含める必要があります。行と列の推奨値は下記にあります。また、それぞれのtextareaタグは<textarea>と</textarea>の両方が必要であり、self-closingタグはアプリケーションで正しく表示されません。
<tr>
<td width="125">Textarea: </td>
<td><textarea name="uiformdemo[textarea]" rows="5" cols="30"></textarea></td>
</tr>
ボタン
フォームの送信に関わるボタンは、inputタグ、type="submit"として作成する必要があります。ボタンは、最後の閉じ</table>タグと閉じ</form>タグの間に配置されますが、<label>,<tr>,<TD>タグの中にあってはいけません。
フォームに関連するアクションを実行するためにリンクは使われますが、フォームの送信に関連しないsubmit（例えば、削除、キャンセル）は代わりにツールバーの上部配置する必要があります。
<input type="submit" class="standardButton" value="Create"/>
<button>エレメントは、BlackBerryのプラットフォームでサポートされていません。
投稿
0 件のコメント:
コメントを投稿