Titanium Mobile に Pixate Betaを導入してサンプルを動してみた

さいしょに

先走って Pixate Engine Professional for iOS を購入してしまったものです。
先日、Titanium Mobile用のBeta版をリリースしたとお知らせが着たので導入してみました。

準備

自分のメールアドレス・シリアル
com.pixate.pxengine-iphone-1.0.2.zip

zipファイルとドキュメントは「Pixate/Frameworks/Titanium (Beta)/」内にありました

モジュールのインストール

/Users/【ユーザー名】/Library/Application Support/Titanium/ に「com.pixate.pxengine-iphone-1.0.2.zip」を移動します

f:id:tuki0918:20130202230342p:plain

Titanium Studioで何でも良いのでビルドしてみる

f:id:tuki0918:20130202230607p:plain
勝手にインストールされて先ほどのディレクトリから「com.pixate.pxengine-iphone-1.0.2.zip」が消える

サンプルをアプリを作ってみる

f:id:tuki0918:20130202231406p:plain

Titanium SDK: を「3.0.0.GA」以上にする
Modules の「＋」からモジュールを追加する

# tiapp.xml

<ti:app xmlns:ti="http://ti.appcelerator.org">
略...
↓↓↓ 以下を追加 ↓↓↓
    <ios>
        <plist>
            <dict>
                <key>PXuser</key>
                <string>【 LICENSE USERNAME 】</string>
                <key>PXkey</key>
                <string>【 LICENSE KEY 】</string>
            </dict>
        </plist>
    </ios>
</ti:app>

# app.js

var win = Ti.UI.createWindow();

var label = Ti.UI.createLabel({
    text:String.format(L('welcome'),'Titanium'),
    height:'auto',
    width:'auto',
    styleCSS:'background-color: blue; color:white;'
});
win.add(label);

var button1 = Ti.UI.createButton({
    title:'I am a Button 1',
    width:200,
    height:40,
    top:60,
    styleId:'myButton',
    styleClass:'myButtons'
});
win.add(button1);

var button2 = Ti.UI.createButton({
    title:'I am a Button 2',
    width:200,
    height:40,
    top:110,
    styleId:'myButton2',
    styleClass:'myButtons'
});
win.add(button2);

win.open();

# default.css

#myLabel {
    color: blue;
    background-color: linear-gradient(gray,yellow);
}

#myButton {
    background-color: linear-gradient(red,green);
    border-radius: 20;
    color: white;
}

#myButton2 {
    background-color: linear-gradient(red,white);
    border-radius: 20;
    color: white;
}

#myButton2:highlighted {
    background-color: linear-gradient(blue,yellow);
    border-radius: 20;
    color: red;
}