fix: bug of ui.Widget; add: sample for ui.Widget

app/src/main/assets/sample/界面控件/自定义控件-使用配置勾选框.js

@@ -0,0 +1,18 @@
+"ui";
+
+var PrefCheckBox = require('./自定义控件-模块-配置勾选框.js');
+
+ui.layout(
+    <vertical>
+        <pref-checkbox id="perf1" text="配置1"/>
+        <pref-checkbox id="perf2" text="配置2"/>
+        <button id="btn" text="获取配置"/>
+    </vertical>
+);
+
+ui.btn.on("click", function(){
+    toast("配置1为" + PrefCheckBox.getPref().get("perf1"));
+    toast("配置2为" + PrefCheckBox.getPref().get("perf2"));
+});
+
+

app/src/main/assets/sample/界面控件/自定义控件-布局模板.js

@@ -0,0 +1,41 @@
+"ui";
+
+var InputLayout = (function() {
+    //继承至ui.Widget
+    util.extend(InputLayout, ui.Widget);
+
+    function InputLayout() {
+        ui.Widget.call(this);
+        this.defineAttr("hint", (view, attr, value, defineSetter)=>{
+            view._hint.setText(value);
+        });
+        this.defineAttr("text", (view, attr, value, defineSetter)=>{
+             view._input.setText(value);
+         });
+    }
+    InputLayout.prototype.render = function() {
+        return (
+            <vertical>
+                <text id="_hint" textSize="16sp" margin="4" textColor="gray"/>
+                <input id="_input" margin="0 16"/>
+            </vertical>
+        );
+    }
+    InputLayout.prototype.getInput = function() {
+        return this.view._input.getText();
+    };
+    ui.registerWidget("input-layout", InputLayout);
+    return InputLayout;
+})();
+
+ui.layout(
+    <vertical>
+        <input-layout id="name" hint="请输入名字"/>
+        <input-layout id="age" hint="请输入年龄" text="18"/>
+        <button id="ok" text="确认"/>
+    </vertical>
+);
+
+ui.ok.on("click", function(){
+    toast("名字是：" + ui.name.widget.getInput() + ", 年龄是：" + ui.age.widget.getInput());
+});

app/src/main/assets/sample/界面控件/自定义控件-带颜色按钮.js

@@ -2,7 +2,7 @@
 
 var ColoredButton = (function() {
     //继承至ui.Widget
-    util.extends(ColoredButton, ui.Widget);
+    util.extend(ColoredButton, ui.Widget);
 
     function ColoredButton() {
         //调用父类构造函数

app/src/main/assets/sample/界面控件/自定义控件-模块-配置勾选框.js

@@ -1,9 +1,8 @@
-"ui";
 
 //这个自定义控件是一个勾选框checkbox，能够保存自己的勾选状态，在脚本重新启动时能恢复状态
 var PrefCheckBox = (function() {
     //继承至ui.Widget
-    util.extends(PrefCheckBox, ui.Widget);
+    util.extend(PrefCheckBox, ui.Widget);
 
     function PrefCheckBox() {
         //调用父类构造函数
@@ -16,21 +15,28 @@ var PrefCheckBox = (function() {
             <checkbox />
         );
     }
-    PrefCheckBox.prototype.onViewCreated = function(view) {
+    PrefCheckBox.prototype.onFinishInflation = function(view) {
         view.setChecked(PrefCheckBox.getPref().get(this.getKey(), false));
         view.on("check", (checked) => {
             PrefCheckBox.getPref().put(this.getKey(), checked);
         });
     }
     PrefCheckBox.prototype.getKey = function() {
-        return this.key || view.attr("id").replace("@+id/", "");
+        if(this.key){
+            return this.key;
+        }
+        let id = this.view.attr("id");
+        if(!id){
+            throw new Error("should set a id or key to the checkbox");
+        }
+        return id.replace("@+id/", "");
     }
     PrefCheckBox.setPref = function(pref) {
         PrefCheckBox._pref = pref;
     }
     PrefCheckBox.getPref = function(){
         if(!PrefCheckBox._pref){
-            PrefCheckBox._pref = storages.create("pref_pref");
+            PrefCheckBox._pref = storages.create("pref");
         }
         return PrefCheckBox._pref;
     }
@@ -38,17 +44,4 @@ var PrefCheckBox = (function() {
     return PrefCheckBox;
 })();
 
-ui.layout(
-    <vertical>
-        <pref-checkbox id="perf1" text="配置1"/>
-        <pref-checkbox id="perf2" text="配置2"/>
-        <button id="btn" text="获取配置"/>
-    </vertical>
-);
-
-ui.btn.on("click", function(){
-    toast("配置1为" + PrefCheckBox.getPref().get("perf1"));
-    toast("配置2为" + PrefCheckBox.getPref().get("perf2"));
-});
-
-
+module.exports = PrefCheckBox;