创建界面：table 和 json

触动精灵提供了两种创建界面的方式，较早阶段使用 json, 缺点是返回值无法直接与指定控件 ID 比较，使得脚本逻辑十分复杂，因此本手册涉及到 UI 的示例代码均为推荐使用的 table 方式。

创建一个界面，需要包含 style 与 pages 两个主键。 style 表示界面样式，需要设定全局属性；pages 数组则包含了界面上的控件。

需要在 UI 中使用动态数据的时候，建议使用 table 的方式来进行构造，这样使用变量的时候可以更加顺手，例如：

local ts = require("ts")
local cjson = ts.json
w,h = getScreenSize();
MyTable = {
    ["style"]  = "default",    
    ["width"] = w,          
    ["height"] = h,            
    ["cancelname"] = "取消",  
    ["okname"] = "开始", 
    ["title"] = "居中自定义字号",
    ["titlealign"] = "center",
    ["align"] = "center",
    ["titlesize"] = 12,  
    ["titles"] = "第一页,标签页,新增属性,左右滑动,切换页面", 
    ["pagetype"]= "multi",  
    ["selpage"] = 1,   
    ["orient"] = 0, 
    ["btnbkcolor"] = "255,255,255",         
    ["bgcolor"] = "255,255,255",
    ["pagenumtype"] = "tab", 
    ["config"] = "showuiTest1.txt",  
    ["timer"] = 99,  
    ["rettype"] = "table",   
    pages            =
    {
        {
            {
                ["type"] = "Label", 
                ["text"] = "上线日期：",        
                ["size"] = 12, 
                ["align"] = "left",          
                ["valign"] = "top", 
                ["color"] = "0,0,0",           
                ["width"] = -1,
                ["nowrap"] = 1,--下个控件不换行
            },
            {
                ["type"] = "Edit",               
                ["id"] = "edit1",                  
                ["prompt"] = "年",  
                ["text"] = "2014",     
                ["kbtype"] = "number",  
                ["color"] = "0,0,0",   
                ["size"] = 12,           
                ["align"] = "center",           
                ["valign"] = "top",   
                ["width"] = 180,
                ["nowrap"] = 1,--下个控件不换行
            },
                {
                ["type"] = "Label", 
                ["text"] = "年",        
                ["size"] = 12, 
                ["align"] = "left",          
                ["valign"] = "top", 
                ["color"] = "0,0,0",           
                ["width"] = -1,
                ["nowrap"] = 1,--下个控件不换行
            },
            {
                ["type"] = "Edit",               
                ["id"] = "edit2",                  
                ["prompt"] = "月",  
                ["text"] = "5",     
                ["kbtype"] = "number",  
                ["color"] = "0,0,0",   
                ["size"] = 12,           
                ["align"] = "center",--输入框文字水平对齐方式           
                ["valign"] = "top", --输入框垂直对齐方式  
                ["width"] = 120,
                ["nowrap"] = 1,--下个控件不换行
            },
            {
                ["type"] = "Label",            
                ["text"] = "月",        
                ["size"] = 12,                 
                ["align"] = "left",           
                ["valign"] = "top", 
                ["color"] = "0,0,0",    
                ["width"] = -1,
                ["nowrap"] = 1,--下个控件不换行
            },
                {
                ["type"] = "Edit",               
                ["id"] = "edit3",                  
                ["prompt"] = "日",  
                ["text"] = "1",     
                ["kbtype"] = "number",  
                ["color"] = "0,0,0",   
                ["size"] = 12,           
                ["align"] = "center",           
                ["valign"] = "top",   
                ["width"] = 120,
                ["nowrap"] = 1,--下个控件不换行
            },
            {
                ["type"] = "Label",        
                ["text"] = "日",        
                ["size"] = 12,                  
                ["align"] = "left",           
                ["valign"] = "top", 
                ["color"] = "0,0,0",           
                ["width"] = -1,
                --["nowrap"] = 1,
            },      
        }
    }   
}
local MyJsonString = cjson.encode(MyTable);
UIret,values = showUI(MyJsonString)
if UIret == 1 then
    local year =  values.year
    local month =  values.month
    local day =  values.day
    dialog("上线日期："..year.."年"..month.."月"..day.."日")
end

table 格式的代码也可以向下面这样写，大括号中的任何一个属性前后顺序都可以打乱。

local ts = require("ts")
local cjson = ts.json
w,h = getScreenSize();
MyTable = {["style"]  = "default",["width"] = w,["height"] = h,["cancelname"] = "取消",["okname"] = "开始",["title"] = "居中自定义字号",["titlealign"] = "center",["align"] = "center",["titlesize"] = 12,["titles"] = "第一页,标签页,新增属性,左右滑动,切换页面",["pagetype"]= "multi",["selpage"] = 1,["orient"] = 0,["btnbkcolor"] = "255,255,255",["bgcolor"] = "255,255,255",["pagenumtype"] = "tab",["config"] = "showuiTest1.txt",["timer"] = 99,["rettype"] = "table",
    pages ={{
            {["type"] = "Label",["text"] = "上线日期：",["size"] = 12,["align"] = "left",["valign"] = "top",["color"] = "0,0,0",["width"] = -1,["nowrap"] = 1,},
            {["type"] = "Edit",["id"] = "year",["prompt"] = "年",["text"] = "2014",["kbtype"] = "number",["color"] = "0,0,0",["size"] = 12,["align"] = "center",["valign"] = "top",["width"] = 180,["nowrap"] = 1,},
            {["type"] = "Label",["text"] = "年",["size"] = 12,["align"] = "left",["valign"] = "top",["color"] = "0,0,0",["width"] = -1,["nowrap"] = 1,},
            {["type"] = "Edit",["id"] = "month",["prompt"] = "月",["text"] = "5",["kbtype"] = "number",["color"] = "0,0,0",["size"] = 12,["align"] = "center",["valign"] = "top",["width"] = 120,["nowrap"] = 1,},
            {["type"] = "Label",["text"] = "月",["size"] = 12,["align"] = "left",["valign"] = "top",["color"] = "0,0,0",["width"] = -1,["nowrap"] = 1,},
            {["type"] = "Edit",["id"] = "day",["prompt"] = "日",["text"] = "1",["kbtype"] = "number",["color"] = "0,0,0",["size"] = 12,["align"] = "center",["valign"] = "top",["width"] = 120,["nowrap"] = 1,},
            {["type"] = "Label",["text"] = "日",["size"] = 12,["align"] = "left",["valign"] = "top",["color"] = "0,0,0",["width"] = -1,},
        }
    }   
}
local MyJsonString = cjson.encode(MyTable);
UIret,values = showUI(MyJsonString)
if UIret == 1 then
    local year =  values.year
    local month =  values.month
    local day =  values.day
    dialog("上线日期："..year.."年"..month.."月"..day.."日")
end

• 以上实例中将 table 转为 JSON 需要借助 ts.so 扩展库实现。
• 最下面返回值的数量应与代码中的非标签空间总数数量保持一致，否则会造成后面的非标签控件返回值无效。
• 更多用法可以参考这里：一个包含所有控件的 UI 实例

什么是 json

json 就是一串字符串，在该函数中，我们用它来创建界面上的一系列会使用特定的符号标注的元素：

{} 双括号表示对象

[] 中括号表示数组

"" 双引号内是属性或值

： 冒号表示后者是前者的值

所以 {"name": "Michael"} 可以理解为是一个包含 name 为 Michael 的对象，而 [{"name": "Michael"},{"name": "Jerry"}] 就表示包含两个对象的数组。

当然了，你也可以使用 {"name":["Michael", "Jerry"]} 来简化上面一部分，这是一个拥有 name 数组的对象。

不管是键或 string 的值都要用双引号引起来，所以上面的代码就是 {"name": "json"}。

json 调用示例

为了便于 json 的书写，我们通常使用可读性较强的形式；但是为了便于脚本的调用，我们需要将 json 进行压缩与转义。将上文中的 json 进行转义后，作为字符串放进 showUI 函数的参数 ui_json 中，例如：

--[[ret, input_1, input_2, ... = showUI("");]]
ret, input_1, input_2, input_3 = showUI("{\"style\":"
.."\"default\",\"views\":[{\"type\":\"Label\",\"text\":"
.."\"settings\",\"size\":25,\"align\":\"center\",\"color\":"
.."\"0,0,255\"},{\"type\":\"RadioGroup\",\"list\":"
.."\"option1,option2,option3,option4,option5,option6,option7\","
.."\"select\":\"1\"},{\"type\":\"Edit\",\"prompt\":\"Test\","
.."\"text\":\"Custom Text\",\"size\":15,\"align\":\"left\","
.."\"color\":\"255,0,0\"},{\"type\":\"CheckBoxGroup\",\"list\":"
.."\"option1,option2,option3,option4,option5,option6,option7\","
.."\"select\":\"3@5\"}]}");

json 在线校验格式化、压缩转义工具：http://www.bejson.com/

上面的代码看起来有些乱，可能会让新手无所适从，我们换一种形式来写：

w,h = getScreenSize();--此段代码仅供演示用，不可复制粘贴直接运行
MyJsonString = [[
{
  "style": "default",
  "width": ]]..w..[[,
  "height": ]]..h..[[,
  "config": "save_111.dat",
  "timer": 10,
  "views": [
    {
      "type": "Label",
      "text": "设置",
      "size": 25,
      "align": "center",
      "color": "0,0,255"
    },
    {
      "type": "RadioGroup",
      "list": "选项 1,选项 2,选项 3,选项 4,选项 5,选项 6,选项 7",
      "select": "1"
    },
    {
      "type": "Edit",
      "prompt": "测试三下",
      "text": "默认值",
      "size": 15,
      "align": "left",
      "color": "255,0,0"
    },
    {
      "type": "CheckBoxGroup",
      "list": "选项 1,选项 2,选项 3,选项 4,选项 5,选项 6,选项 7",
      "select": "3@5"
    }
  ]
}
]]
ret, input1, input2, input3 = showUI(MyJsonString);
if ret == 1 then
    dialog("单选框:"..input1.."\r\n当行文本框:"..input2.."\r\n多选框:"..input3)
end

在上面的例子中可以看到"width"和"height"的值我们使用了变量 w,h 这两个变量具体数值由 getScreenSize() 函数提供，这样我们实现了 UI 界面自动适应屏幕大小。

json 格式的 UI 在调用返回值时十分繁琐，首先我们要设计一个界面，并生成一段 json 字符串，再进行压缩转义。遇到返回值较多的时候，只能挨个数有返回值的控件的顺序。