ITごはん

ITを活用したい人、ITで何か作りたい人、そんなITでごはんを食べる人のためのブログ

【Titanium/Alloy】Alloyドキュメント Alloy XML Markup意訳

Alloy XML Markup

  • Introduction
  • Collection Element
  • Model Element
  • Module Attribute
  • Module Element
  • Require Element
  • Including Views
  • Importing Widgets
  • Passing Arguments
  • Binding Events
  • Adding Children Views
  • Widget Element
  • Namespace
  • Conditional Code
  • Property Mapping
  • Proxy Properties
  • Android ActionBar Attributes in the Menu Element
  • iOS Navigation Button Shorthand
  • iOS System Button Shorthand
  • Event Handling
  • Data Binding
  • Nonstandard Syntax

Introduction

In Alloy, the XML markup abstracts the Titanium SDK UI components, so you do not need to code the creation and setup of these components using JavaScript and the Titanium SDK API. All view files must be placed in the app/views folder of your project with the '.xml' file extension. During code compilation, Alloy looks for these markup files in this specific location to transform them into Titanium code, which can be executed by Studio and the CLI.

AlloyではXMLマークアップでTitanium SDK UIコンポーネントを抽象化しています。 そのため、JavaScriptとTitanium SDK APIを使ったコンポーネント生成のコードを書く必要がありません。 全てのViewファイルは、あなたのプロジェクトのapp/viewsフォルダにxml拡張子で置く必要があります。 コードをコンパイルする際に、AlloyマークアップファイルをTitaniumコードに変換するために、このフォルダを探しにいきます。 これはTitanium StudioやCLIによって実行されます。

The following code is an example of a view file: 以下のコードはviewファイルのサンプルです。

app/views/index.xml

<Alloy>
    <Window class="container">
        <Label id="label" onClick="doClick">Hello, World</Label>
    </Window>
</Alloy>

The Alloy tag is the root element for the XML markup and is required in all views. The Window element defines an instance of the Ti.UI.Window object and within that window instance is the Label element, which defines an instance of a Ti.UI.Label object. Almost all of the Alloy XML tags are the class names of the Titanium UI components without the preceding namespace. Exceptions to this rule are listed in the Element table below.

Alloyタグは全てのビューのルート要素に必要です。Window要素はTi.UI.Window オブジェクトのインスタンスを定義しています。そして、そのwindowインスタンスの中には、 Ti.UI.LabelオブジェクトのインスTンスを定義しているLabel要素があります。 AlloyXMLタグのほとんど全てのはTitanium UIコンポーネントのクラス名から前のネームスペースを除いたおのです。 例外は以下の要素一覧であげています。

Within a controller, a UI component can be referenced if its ID attribute is defined. For instance, the Label component in the above example has its ID defined as 'label' and can be referenced in the controller using $.label.

そのID属性が定義されている場合、コントローラの中でUIコンポーネントは参照できます。例えば、上記の例のLabelコンポーネントはIDとして'label'が定義されているので、$.labelを使用して、参照することができます。

If the top-level UI component does not have an ID defined, it can be referenced using the name of the view-controller prefixed with a dollar sign and period ('$.'). For instance, the Window element in the above example can be referenced in the controller using $.index.

もし、トップレベルのUIコンポーネントのIDが定義されていない場合、ビュー-コントローラ名と$.を使って参照することが出来ます。 例えば、上記例のWindow要素は$.indexを使って参照できます。

The following code is how you would traditionally code the markup example using the Titanium SDK: 以下のコードは上記のマークアップ例を、Titanium SDKを使った従来のコードで書いたものです。

Resources/app.js

var win = Ti.UI.createWindow();
var label = Ti.UI.createLabel({text: 'Hello, World'});
label.addEventListener('click', doClick);
win.add(label);

In the previous example, the win.open call and implementation of the doClick callback are missing. In Alloy, your JavaScript code and Titanium API calls need to be placed in the associated controller file to the view. For this example, the code would need be placed in app/controllers/index.js. さきほどの例では、win.openの呼び出しとdoClickコールバックの実装は不足していました。 Alloyにおいては、JavaScriptコードとTitanium APIの呼び出しはそのビューに関連するコントローラーに書く必要があります。例えば、それらのコードはapp/controller/index.jsに置くべきです。

The following table lists the attributes for the UI components: 以下の表はUIコンポーネントの属性をあげています。

Attribute属性 Description説明
id Identifies UI elements in the controller (prefixed with '$.') and style sheet (prefixed with '#'). IDs should be unique per view but are not global, so multiple views can have components with the same ID.コントローラーとスタイルシートで使用するID名。コントローラーでは'$'接頭辞、スタイルシートでは'#'接頭辞で使用します。IDは一つのビューでユニークである必要があります(グローバル変数も含めてユニーク)。そして、マルチプルビューでは同じID名を持つことができます。
class Applies additional styles (prefixed with '.' in the TSS file). Overwrites the element style but not the id style.装飾的なスタイルを適用します。(TSSファイルでは'.'接頭辞で使用)idで定義されいるスタイル以外の、スタイルを上書きします。
autoStyle Enables the autostyle feature for dynamic styling when adding or removing classes (since Alloy 1.2.0). See Dynamic Styles: Autostyle for more details.クラスを追加・削除による動的なスタイル指定のためのオートスタイル機能を許可します。(Alloy1.2.0以降)オートスタイルのより詳細な情報は、Dynamic Stylesを参照してください。
formFactor Acts as a compiler directive for size-specific view components. Value can either be handheld or tablet. See Conditional Code for more details.サイズ指定のビューコンポーネントのために直接的にコンパイラの機能を果たします。取りうる値はhandheldかtabletです。より詳細な情報はConditional Codeを参照下さい。
if Use a custom query to apply additional styles to the element (since Alloy 1.4.0). See Alloy Styles and Themes: Custom Query Styles for more details.要素に追加的なスタイルを適用するためのカスタムクエリを使って下さい。(Alloy 1.4.0以降)カスタムクエリスタイルより詳細な情報はAlloy Styles and Themesを見て下さい。
module Requires in a CommonJS module (since Alloy 1.2.0). Note that the XML element must be named after a create method in the module. See Module Attribute for more details.CommonJSモジュールを呼び出します。(Alloy 1.2.0以降)留意すべきは、モジュールの中でcreateで名付けられた名前を使う必要があります。より詳細な情報はModule Attributeを見て下さい。
ns Overrides the default Titanium.UI namespace. See Namespace for more details.デフォルトのTitanium.UIネームスペースをオーバーライドします。より詳細な情報はNamespaceを見て下さい。
platform Switches the namespace based on the platform and acts as a compiler directive for platform-specific view components. Values can be any combination of platforms. See Conditional Code and Namespace for more details.プラットフォーム毎のネームスペースを切り替えます。プラットフォーム指定のビューコンポーネントのために直接的にコンパイラの役目を果たします。取りうる値はプラットフォームの組み合わせです。より詳細な情報はConditional Code and Namespaceを見て下さい。
properties Assigns values to UI object properties. See Property Mapping for more details.UIオブジェクトプロパティを割り当てます。より詳細な情報はProperty Mappingを見て下さい。
events Assigns callbacks to UI object events. See Event Handling for more details.コールバックをUIオブジェクトのイベントに割り当てます。より詳細な情報はEvent Handling を見て下さい。

The following table lists the special XML elements besides the Titanium UI components: 以下の表にTitnaium UIコンポーネントに外れる特別なXML要素をあげます。

|Element要素|Description説明| |:--|:--| |Alloy|Root element for all view XML files. Required in all views.全てのビューXMLファイルのルート要素。全てのビューで必須です。| |Collection|Creates a singleton or instance of the specified collection. See the Collection Element for more details.シングルトンまたは指定したコレクションのインスタンスの作成します。より詳細な情報はCollection Elementを見て下さい。| |Model|Creates a singleton or instance of the specified model. See the Model Element for more details.シングルトンまたは指定したモデルのインスタンスの作成します。より詳細な情報はModel Elementを見て下さい。| |Module|Imports a module view inside this view (since Alloy 1.2.0). See the Module Element for more details.ビューの中にビューのモジュールをインポートします。(since Alloy 1.2.0).より詳細な情報はModule Elementを見て下さい。| |Require|Imports a widget or includes another view inside this view. See the Require Element for more details.ビューの中にwidgetや別のビューをインポートします。より詳細な情報はRequire Elementを見て下さい。| |Widget|Imports a widget inside this view. Same as the Require Element with the type specified to 'widget'. See Widget Element for more details. ビューの中にwidgetをインポートします。Require要素のタイプを'widget'とした場合と同じです。より詳細な情報はWidget Elementを見て下さい。|

index.xml is a special case that only accepts the following view components as direct children of the Alloy tag: index.xmlは特別にAlloyタグの直接の子要素として、以下のビューコンポーネントを許可します。

  • Ti.UI.Window or
  • Ti.UI.TabGroup or
  • Ti.UI.iOS.NavigationWindow or (since Alloy 1.2.2)
  • Ti.UI.iPad.SplitWindow or

Other views do not have any format restrictions. 別のビューはフォーマットの制約がありません。