titanium 入门 2 alloy v.s. Titanium SDK

发布时间: 2014-12-24 09:31:00

很多时候,我们做页面布局,事件绑定,可以用alloy, 也可以用titanium SDK来实现,例如:

Titanium SDK Component

Alloy Component

Titanium.UI.* Objects

  • XML element. Remove the namespace. For some elements, you may need to assign the ns attribute. For more information, refer to Alloy XML Markup: Namespace.

    <!-- Creates a button -->
    <Button />
  • TSS element. Remove the namespace. If the object belongs to another namespace besides Titanium.UI and is not implicitly assigned a namespace by Alloy, you cannot create a style based on the element name. Instead, create a style based on a selector (XML class attribute) or id (XML id attribute). For a list of objects that Alloy implicitly assigns a namespace, refer to Alloy XML Markup: Namespace.

    // Does not create a button. Used to style all Button objects in the associated view.
    "Button" :{
    // Button attributes

Titanium Object properties

text: "Foobar" ,
top: 0 ,
width: Ti.UI.SIZE
  • XML attribute if the property can be expressed as a string, number or Titanium SDK constant. Some properties that take Titanium objects can be expressed inline using XML tags. For more information, refer to Alloy XML Markup: Property Mapping.

    <Button title= "Foobar" top= "0" width= "Ti.UI.SIZE" />
  • TSS attribute if the property can be directly expressed as a string, number, Titanium SDK constant, dictionary or array. Indirectly, you can assign a method or value to the Alloy Globals or CFG namespace and reference it in the TSS file. For more information, refer to Alloy Styles and Themes.

    "Button" :{
    title: "Foobar" ,
    top: 0 ,
    width: Ti.UI.SIZE

Titanium Object methods

var button = Titanium.UI.createButton();
button.setTitle( 'Push Me!' );

Use in the controller code. You need to define the id attribute of the object in the XML markup, so the object can be referenced in the controller.

// Need to give the object an ID, for example, <Button id="button" />
$.button.setTitle( 'Push Me!' );

Titanium Object events

var button = Titanium.UI.createButton();
button.addEventListener( 'click' , doClick);


XML attribute to bind a callback in the associated controller. Capitalize the first character of the event name and append 'on' to the beginning of the name.

<!-- doClick needs to be declared in the associated controller -->
<Button onClick= "doClick" />