Titanium.X

Top KitchenWork TitAnIDE TitaNative Ti SDK Archives

(仮称)Titanium User i/f Builder Plugin

@d_o_locker(ろっかぁ)


Ti SDK 2.0 対応版開発中です。



2011/01/29 第2弾サンプル KitchenWork XMLソース掲載
2011/01/28 第2弾サンプル KitchenWork 改定(androidである程度安定動作する版)(iOSでは以前より動作しにくくなっている可能性大)
2011/01/03 第2弾サンプル KitchenWork 改定(全機能一覧追加。対応機種色分け、サーチバー)(開発環境との高速同期機能(android 専用))
2011/01/01 第2弾サンプル KitchenWork 改定(XML化を追求、エラーは12/19版より増えた?)(実機上でのJS編集機能(android 専用))
2010/12/21 このページを全面改定 開発手順記載 開発メモアップ
2010/12/19 第2弾サンプル KitchenWork 改定(XML化を若干抑えて少しは動作するように)
2010/12/18 第2弾サンプル KitchenWork アップ
2010/12/16 第1弾サンプル GetStartTUB アップ(1.5&プラグイン&JSS&多言語対応記念)


2010/12/16

GetStartTUB

[Download] [apk for android]

↓ HTMLライクなXMLによる開発

Pages/app.xml

<?xml version="1.0" encoding="utf-8"?>
<Titanium xmlns:js="js" xmlns:on="on">
<Style><![CDATA[

.win { background-color:#fff; }
.label { width:auto; background-color:#fff; color:#999; text-align:center; font-size:20; font-family:'Helvetica Neue'; }

]]></Style>

  <TabGroup id="tabGroup">
    <Tab icon="KS_nav_views.png" id="tab1" js:titleid="nodeText">
      タブ1
      <Window class="win" id="win1" js:titleid="nodeText">
        タブ1
        <Label class="label" id="label1" js:textid="nodeText" on:click="TUB.alert('アラート', '警告'); TUB.notify('通知');">ウィンドウ1です</Label>
      </Window>
    </Tab>
    <Tab icon="KS_nav_ui.png" id="tab2" js:titleid="nodeText">
      タブ2
      <Window class="win" id="win2" js:titleid="nodeText">
        タブ2
        <Label class="label" id="label2" js:textid="nodeText"
         on:click="TUB.alert({title:'アラート', messageid:'警告', buttonNames:[L('了解', 'OK')]}); TUB.notify({message:L('通知', '未翻訳')});">
          ウィンドウ2です
        </Label>
        <Button bottom="40" js:textid="nodeText" js:title="L(nodeText)" href="/sub/sub.js" on:click="TUB.openWindow(e.source);">サブ画面</Button>
      </Window>
    </Tab>
  </TabGroup>

<Script><![CDATA[

Ti.UI.setBackgroundColor('#000');

TUB.byId.tabGroup.open();

]]></Script>
</Titanium>

↓ PluginによりXMLからJavaScriptに変換

Resources/app.js

var TUB = require('lib/tub');

TUB.buildUI(
{ui:"TabGroup", params:{id:"tabGroup"}, children:[
  {ui:"Tab", params:{titleid:"タブ1", id:"tab1", icon:"KS_nav_views.png"}, children:[
    {ui:"Window", params:{titleid:"タブ1", "class":"win", id:"win1"}, children:[
      {ui:"Label", params:{"class":"label", textid:"ウィンドウ1です", id:"label1"}, events:{click:"TUB.alert('アラート', '警告'); TUB.notify('通知');"}}
    ]}
  ]},
  {ui:"Tab", params:{titleid:"タブ2", id:"tab2", icon:"KS_nav_ui.png"}, children:[
    {ui:"Window", params:{titleid:"タブ2", "class":"win", id:"win2"}, children:[
      {ui:"Label", params:{"class":"label", textid:"ウィンドウ2です", id:"label2"}, events:{click:"TUB.alert({title:'アラート', messageid:'警告', buttonNames:[L('了解', 'OK')]}); TUB.notify({message:L('通知', '未翻訳')});"}},
      {ui:"Button", params:{href:"/sub/sub.js", title:L("サブ画面"), textid:"サブ画面", bottom:"40"}, events:{click:"TUB.openWindow(e.source);"}}
    ]}
  ]}
]}
);

Ti.UI.setBackgroundColor('#000');

TUB.byId.tabGroup.open();

↓ XMLからの変換後はJavaScriptのみでの開発と全く同等のビルド

↑ 従来型の create/add によるコード例(比較参考)

Resources/app.js

Ti.UI.setBackgroundColor('#000');

var label1 = Ti.UI.createLabel({width:'auto', color:'#999', textAlign:'center', font:{fontSize:20, fontFamily:'Helvetica Neue'}, textid:"ウィンドウ1です"});
label1.addEventListener('click', function(e) { TUB.alert('アラート', '警告'); TUB.notify('通知'); });

var win1 = Ti.UI.createWindow({titleid:"タブ1", backgroundColor:'#fff'});
win1.add(label1);

var tab1 = Ti.UI.createTab({icon:'KS_nav_views.png', titleid:"タブ1", window:win1});

var label2 = Ti.UI.createLabel({width:'auto', color:'#999', textAlign:'center', font:{fontSize:20, fontFamily:'Helvetica Neue'}, textid:"ウィンドウ2です"});
label2.addEventListener('click', function(e) { TUB.alert({title:'アラート', messageid:'警告', buttonNames:[L('了解', 'OK')]}); TUB.notify({message:L('通知', '未翻訳')}); });

var button = Ti.UI.createButton({bottom:"40", href:"/sub/sub.js", title:L("サブ画面"), textid:"サブ画面"});
button.addEventListener('click', function(e) { TUB.openWindow(e.source); });

var win2 = Ti.UI.createWindow({titleid:"タブ2", backgroundColor:'#fff'});
win2.add(label2);
win2.add(button);

var tab2 = Ti.UI.createTab({icon:'KS_nav_ui.png', titleid:"タブ2", window:win2});

var tabGroup = Ti.UI.createTabGroup();
tabGroup.addTab(tab1);  
tabGroup.addTab(tab2);  
tabGroup.open();


2011/01/28

KitchenWork

[Download] [apk for android] [View Source]


2011/01/28

新規開発


2011/01/28

変換仕様