Kranium少しだけいじった感想

twitterの#titaniumjpをチェックしてたら

Kranium http://kraniumjs.com/ 雰囲気的にはTitaniumにおけるRailsやPlay!みたいだけど、みんなどう思ってるのかな… #titaniumjp
http://twitter.com/petitroto/status/167617471799492608

というtweetを見かけて、気になったので試してみました。

いじった感想を先に

ドキュメントがまだ貧弱なので、色々カンを働かせながらという感じですね。Sass 、LESS、Jade、Backboneとかにインスパイアされて出来たプロダクトみたいなので、これら知識あると意外とすんなり使えるのかなというのが率直な感想です

環境構築

ドキュメントにある通りですがnode.jsな環境が必須。自分は以前にそちらの環境講座すませていたので、

sudo npm install kranium -g

でサクッと完了。念のため以下でバージョンも確認しました

kranium --version

試したサンプル

TitaniumStudioで適当に新規プロジェクトを作成（例：ホームディレクトリ配下にkratestが出来たとして以降話を進めます）。プロジェクト作成終了後に、ターミナル上で

cd ~/tiproject/kratest
kranium init

とすると必要なファイルが出来上がり、ひとまずapp.jsを以下のように入力します

Ti.include("/kranium/lib/kranium.js");
K({
    type: 'tabgroup',
    tabs: [{
        cls: 'myTab',
        window: {
          cls: 'myWindow',
          title: 'Kraniumのテスト',
          children: [{
            type:'label',
            text:'hello',
            top:50,
            cls:'myLabel'
          },
            K.createLabel({
              top: 10,
              height: 40,
              left:10,
              text: "karanium使ってみた "
            })
          ]
        }
      }]
}).open();

見た目の部分はCSSライクなkssというファイルをkssフォルダのapp.kssに作成して以下のように入力します

.myTab { 
    icon: KS_nav_ui.png; 
}
window {
    background-color: #ccc;
    bar-color: #666;
}
.myLabel {
    color: #333;
    font-size: 20;
    font-weight: bold;
    top:50;
}

上記記述すると、以下のような感じになります。（何故かhelloの文字位置が上の方にいかないので、これが結局わからない。。）