本文へスキップ

Kwik App Design Book: 21 Template


Created Thursday 22 January 2015

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

This is experimental to read a json data and use the values from json for kwik generated layers in lua

page1_data.json

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


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

  • 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

myreplace.lua

--External Codes file to be inserted in page1
myLib.init(page1_json)
myLib.replace(layer)

Kwik

add external library to use myLib, page1_json and page2_json.

page1

add external code myreplace.lua as code_replace
--
myLib.init(page1_json)
myLib.replace(layer)

Add Variable

Add titleVar variable for page1_json.title


we use this variable for dynamic text replacement

Dynamic Text Replacement for title layer



For message layer, add messageVar variable with page1_json.message and use it for dynamic text replacement

Dynamic text repalcement for message layer


Page2

page2 is for tableview and json data has 3 rows for instance.

page2_json.lua

read .json file and returns a lua table

myLibrary.lua

createTable(layer, placeHolder, jsonTableData)

Add External Code in mytable.lua for page2

myLib.createTable(layer, layer.placeHolder, page2_json)
page2_json.lua has been set as a library file

Add External Code 'mytable.lua' in kwik panel

Vector Replacement for row and row_over

myLib.createTable references row and row_over to obtain the properties such as color or height and width. The trick is to make them Vector shapes.

row layer

row_over when user select it

Text Replacement for title

myLib.createTable references title and message layer to obtain the properties such as color or height and width. The trick is to make them Text replacement.

title layer

message layer

mylibrary.lua

widget.newTableView uses the value from placeHolder. In photoshop, change the position of placeHolder layer and publish with Kwik to update the postion of the table.

jsontaTableData is used in myList:insertRow.

onRowRender for the tableView

background image for a row is taken from bacground layer

text and message in a row are created and the properties are taken from layer.title and layer.message respectively

profile_image_url is taken from json and network.download is called to fill row.profile_img_url objet with the downloaded image

When you are editing mylibrary.lua in build folder of your kwik project directly, Please make sure the following setting to be true inf Publish Tab

Publish only pages_<num>.lua …: exports only the page(s) file(s), not exporting external libraries used in the project;

otherwise you will loose the modification of mylibary.lua when publishing