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」を移動します
- Titanium Studioで何でも良いのでビルドしてみる
勝手にインストールされて先ほどのディレクトリから「com.pixate.pxengine-iphone-1.0.2.zip」が消える
サンプルをアプリを作ってみる
- 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; }
サンプルを動かしてみる
とりあえず動いた! (ฅ'ω'ฅ) ヤッタネ!
その他リンク
- iOS Styling Reference
- Pixate Playground for iPad
- Pixate Visualizer (Coming Soon)