本文へスキップ

Kwik App Design Book: 21 Template


Created Thursday 22 January 2015

http://www.kwiksher.com/tutorials/Multi/Template_Sample.zip

以下のjsonファイルの内容をKwikのExternal Codeをつかって表示します。

page1_data.json

{
"profile_img_url": "https://pbs.twimg.com/profile_images/477558179455172608/LUlq-2Mj.png",
"message": "Hello1",
"title": "Sample1"
}

Kwikのプロジェクトを新規作成して、プロジェクトフォルダのビルドフォルダの直下に page1_data.jsonを配置します。

下記のpage1_json.luaは、上記のpage1_data.jsonを読み込んで、Luaのテーブルデータに変換する外部ライブラリです。

page1_json.lua

local json = require("json")

function jsonFile(file)
local f,err = io.open(file, "r")
if f==nil then
return f,err
else
local content = f:read("*all")
f:close()
return content
end
end

return json.decode(jsonFile("page1_data.json"))

下記のmyLibrary.luaは、jsonのprofile_image_urlの文字列から、画像をネットワークでダウンロードして、表示する replace()関数を含んでいます。

myLibrary.lua

  • init(json)
  • replace(layer)

init() reads json data and replace() finds "image_url" and make a call to network.requeset to download the image and fill the image to the target object

下記のファイルは、Kwikのページ1に挿入する外部コードです。init()とreplace()の2行のコードを含んでいます。

myreplace.lua

myLib.init(page1_json)
myLib.replace(layer)

Kwik

予め jsonファイルを読み込む下記のluaファイルを外部ライブラリとして登録します。
名前    ファイル名
myLib myLibrary.lua
page1_json page1_json.lua
page2_json page2_json.lua


page1

profile_image_urlから画像ファイルをダウンロードして表示するために、外部コード myreplace.lua をページ1に挿入します

Add Variable

Kwikのレイヤーで title, message, profile_img_urlのレイヤーを作成します。
jsonのtitle文字列を受け取るための変数として、titleVarを作成します。

titlevarの値(Value)は、page1_json.titleとなります。

この変数をtitleレイヤーに動的なテキストの置換で設定します。

Dynamic Text Replacement for title layer

titleレイヤーを選択して、レイヤーの置換(Layer Replacement)から動的テキストの置換を選択します。

関連付ける変数名にtitleVarを指定します。

同様にmessageレイヤーの設定として、messageVar 変数を作成して page1_json.messageを割り当てます。

動的テキストの置換でmessageレイヤーにmessageVarを関連付けます。


Page2

ページ2では、下記の3つの配列からなるjsonデータを利用して、リスト(TableView)を作成します。

page2_json.lua

jsonを読み込んでluaのテーブルデータにするファイル

myLibrary.lua

createTable(layer, placeHolder, jsonTableData)

Add External Code in mytable.lua for page2

myLib.createTable(layer, layer.placeHolder, page2_json)
page2_json.luaやKwikからのlayer情報をもとにリストを作成する

外部コードを追加しておく 'mytable.lua'

Vector Replacement for row and row_over

myLib.createTableの中では、row と row_overレイヤーの情報を参照します。rowとrow_overレイヤーはベクタ置換しておくことで、色や縦、幅の情報が設定されます。

row layer

row_over when user select it

Text Replacement for title

myLib.createTableの中では、titleとmessageレイヤーの情報を参照します。titleとmessageレイヤーはテキスト置換しておくことで、色や縦、幅の情報が設定されます

title layer

message layer

mylibrary.lua

myLib.createTableの中のwidget.newTableViewは、placeHolderレイヤーの値を利用しています。

onRowRender for the tableView

各行のbackground image は bacgroundレイヤーを参照しています。

text とmessage は、layer.title and layer.messageを参照しています。

profile_image_urlでは、row.profile_img_urlの画像をネットワークから取得した画像で入れ替えます。

Kwikのプロジェクトフォルダ配下のbuild/フォルダのmylibrary.luaを直接編集する場合は、Kwikの設定の出力タブを開き、「pages_<num>.luaのみを出力 main.luaなどを出力しない」 の項目にチェックを入れてください。