LoginSignup
0

More than 5 years have passed since last update.

KitchenSinkのplatform.js(Titaniumの勉強メモ)

Last updated at Posted at 2012-12-26

入門になったら、勉強がなかなか進まなくて、KitchenSinkのサンプルソースを追って勉強しようかと思っています。興味のある方は一緒に勉強しましょう。コミュニケーションの場になればなあと思います。

■ソースのURL:
https://github.com/appcelerator/KitchenSink/blob/master/Resources/main_windows/platform.js

// create table view data object
// ===========================================================================
// TableViewのdataプロパティに渡す配列オブジェクトを定義する。
// ===========================================================================
var data = [
    {title:'XHR', hasChild:true, test:'../examples/xhr.js'},
    {title:'Network', hasChild:true, test:'../examples/network.js'},
    {title:'Common JS', hasChild:true, test:'../examples/commonjs.js'},
    {title:'Logging', hasChild:true, test:'../examples/logging.js'},
    {title:'Application Data', hasChild:true, test:'../examples/app_data.js'},
    {title:'Application Events', hasChild:true, test:'../examples/app_events.js'},
    {title:'Properties API', hasChild:true, test:'../examples/properties.js'},
    {title:'Database', hasChild:true, test:'../examples/database.js'},
    {title:'Platform Data', hasChild:true, test:'../examples/platform.js'},
    {title:'Filesystem', hasChild:true, test:'../examples/filesystem.js'},
    {title:'JS Includes', hasChild:true, test:'../examples/js_include.js'},
    {title:'Set Timeout (timer)', hasChild:true, test:'../examples/set_timeout.js'},
    {title:'Set Interval (timer)', hasChild:true, test:'../examples/set_interval.js'},
    {title:'XML RSS', hasChild:true, test:'../examples/xml_rss.js'},
    {title:'Utils', hasChild:true, test:'../examples/utils.js'},
    {title:'JSON', hasChild:true, test:'../examples/json.js'},
    {title:'JS search', hasChild:true, test:'../examples/search_case_insensitive.js'},
    {title:'Clipboard', hasChild:true, test:'../examples/clipboard.js'},
    {title:'Sockets', hasChild:true, test:'../examples/sockets.js'}
];

// ===========================================================================
// Titanium.Platform.nameにより処理を分ける。
// ===========================================================================
if (Titanium.Platform.name == 'iPhone OS')
{
    data.push({title:'Passing Data (windows)', hasChild:true,
                test:'../examples/custom_properties.js'});
    data.push({title:'Bonjour', hasChild:true, 
                test:'../examples/bonjour.js'});
}

if (Titanium.Platform.osname === 'android') {
    data.push({title: 'Android services', hasChild:true,
                test:'../examples/android_services.js'});
}

// create table view
// ===========================================================================
// TableViewのdata属性を使いTableViewを作成する。
// ===========================================================================
var tableview = Titanium.UI.createTableView({
    data:data
});

// create table view event listener
// ===========================================================================
// TableViewRowの該当Rowがクリックされた時に新たなサンプル画面を開く処理。
// ===========================================================================
tableview.addEventListener('click', function(e)
{
    if (e.rowData.test)
    {
        var win = Titanium.UI.createWindow({
            url:e.rowData.test,
            title:e.rowData.title
        });
        Titanium.UI.currentTab.open(win,{animated:true});
    }
});

// add table view to the window
// ===========================================================================
// 作成したTableViewをcurrentWindowに追加表示する。
// ===========================================================================
Titanium.UI.currentWindow.add(tableview);


サンプルから勉強になった内容:

下記の内容を上記のソースから探すことが出来れば、上記のソースがもう理解できた証だと思います。後はどのように組み合わせて自分のソースの中に入れれば良いかを考えればよいと思います。

  • TableViewのdata属性を使い、TableViewRowを作成する方法。
  • Titanium.Platform.nameにより処理を分ける方法。
  • e.rowData.属性によりTableViewRowからデータを取得する方法。
  • Windowの作成する方法
  • Titanium.UI.currentWindow.addによりTableViewを追加する方法。

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0