Titanium Alloyはじめました（３）-ボタンを作ってみる

前回は、自動生成されたコードを見ましたので、今回は少し変更してみたいと思います。

ボタンを作ってみる

今回は、ここのBinding Eventsを参考にボタンを作って押すとアラートが出るようにしてみます。

まずは、views/index.xmlを変更します。

• views/index.xml

<Alloy>
    <Window class="container">
        <Label id="label" onClick="doClick">Hello, World</Label>
        <Button id="button">Click me!</Button>
    </Window>
</Alloy>

４行目を追加しました。<Label>と同じ感じで定義します。これでボタンができます。次にこのボタンの装飾を定義します。

• styles/index.tss

".container": {
    backgroundColor:"white"
},
"#label": {
    width: Ti.UI.SIZE,
    height: Ti.UI.SIZE,
    color: "#000"
},
"#button": {
    width: Ti.UI.SIZE,
    height: Ti.UI.SIZE,
    top: 50   
}

下から５行を追加しました。Ti.UI.SIZEとするとなるべく小さくなるように自動生成してくれます。最後にコントローラ部分です。

• controllers/index.js

function doClick(e) {  
    alert($.label.text);
}

$.button.addEventListener('click', function(e){
    alert("Clicked me!");
});

$.index.open();

ボタンが押されたときの動作をおなじみのaddEventListener()で定義します。

動作確認

では、実行してみましょう。

うまく動きました。Alloyを使わないTitaniumのときは、これらの処理をごちゃまぜで書きましたが、Alloyを適用するとコンポーネント定義と装飾と動作の部分を分けて書くことができ、見やすくなりました。

この記事は、学びながら作成していますので、網羅的かつ正確な情報を提供するものではありません。