tizen.moe

tizen.moe

Fedora 16 64bit に Tizen SDK のインストール -- Rapid Interface Builder(2)

Linux Tizen

昨日の続き。

RIBのページを見る限り、Tizenのwgt出力には未対応のようです。どうも、Tizen Developer Conferenceの資料をみると、"WGT package export"はPlannedになっていて、sourceを見てもzip出力のみの対応に見えます。


とりあえず、スマートな方法は諦めて作ったHTMLのUIをゴリッとTizen SDKに追加してみます。

RIBでUIを作成、ZIPで出力

UIの作成自体は昨日の記事の通り直感的に作成できます。慣れないとHEADERやFOOTERにITEMを載せる方法が難しい感はありますが、Web系プログラムに慣れた方、RADでの開発経験のある方であれば直ぐに使える様になると思います。

取りあえず、UIは適当にいじくって↓のような形にしました。
f:id:moguriso:20120612234812p:plain
出力は右上のExportボタンで行います。
f:id:moguriso:20120612011618p:plain
Saveダイアログが表示され、ZIP形式で出力されます。
f:id:moguriso:20120612235028p:plain

ZIPの解凍、Projectに追加

Tizen SDKを起動して、新規にプロジェクトを作成します。よくわからないので「Tizen Web UI Framework」→「Single Page Application」にしました。
f:id:moguriso:20120612235522p:plain
標準設定では、先程作成したプロジェクトは下記のディレクトリに保存されます。

/home/moguris/workspace/single-rib-test

ディレクトリの構成は
f:id:moguriso:20120612235900p:plain
という感じになっています。

ココに先程作成したZIPの中身を展開します。まず、別のところでdesign.zipを展開します。

$ cp design.zip ~/tmp
$ cd ~/tmp/
$ unzip design.zip

f:id:moguriso:20120613000207p:plain
index.htmlのファイル名が重複するので、適当に（page.htmlみたいに）変更して、Tizenのプロジェクトフォルダに一式コピーします。

Tizen SDKでの読み込み、ページ移動

Tizen SDKのベースはEclipseなので、workspace配下のprojectディレクトリにファイルをコピーするだけでファイルは認識されます。コピーが終ったら、プロジェクトを右クリックして[Refresh]するかF5キーを押して下さい。

f:id:moguriso:20120613000732p:plain

wgtのrebuildをするか確認をうながされるようです。[OK]をクリックすれば自動的にrebuildが実行されました。

HTMLのpreviewで確認すると、RIBで作成したUIが無事認識されていることが分ります。
f:id:moguriso:20120613000917p:plain

このままでは、作ったpage.htmlが出てくることが無いので、index.htmlから遷移出来るようにリンクを貼ります。格好良くHTML5やJS/JQueryで実装します！と言える程の知識が無いので、何も考えずにAタグでリンクを貼って見ました。

<body>
    <div data-role="page">
        <div data-role="header" data-position="fixed">
            <h1>Single-Page Application </h1>
        </div><!-- /header -->

        <div data-role="content">
            <p>
            This is a single page boilerplate template that you can copy to build your first Tizen Web UI Framework page.
            <!-- add start -->
            <a href="./page.html">Go To New UI!</a>
            <!-- add end -->
            </p>
        </div><!-- /content -->

        <div data-role="footer" data-position="fixed">
            <h4>Footer content</h4>
        </div><!-- /footer -->
    </div><!-- /page -->
</body>

f:id:moguriso:20120613002111p:plain
追加したリンクは問題なく表示されました。リンクを押すと。。。
f:id:moguriso:20120613002237p:plain
画面の遷移自体は成功しましたが、どうも期待と違う挙動になりました。


このあたりはHTMLとCSSの知識が必要そうな感が。。。
ひとまず使えるという事実は分かったので深追いしないでTizen DevPhone弄りに戻りたいと思います。