update

README.md

@@ -26,4 +26,5 @@
 ## Stage2: 布局组件
 使用布局组件前请先查阅[布局组件API](https://kms.finedevelop.com/pages/viewpage.action?pageId=58494216),了解一下基础布局的使用场景和API.
 应用布局组件的好处是我们只需关心想要什么形式的布局,而无需关系怎么实现,免去了写各种繁杂的样式处理居中,浮动,边距等问题.
-1. [一个图标+文字的组件](./layout/一个图标_文字的组件.md)
+1. [一个图标+文字的组件](./basic/一个图标_文字的组件.md)
+2. [常用表单,文字标签+输入框](./basic/文字标签_输入框.md)

basic/如何定义一个FineUI组件.md

@@ -0,0 +1,92 @@
+# 如何定义一个组件
+在[FineUI开发指南](http://fanruan.design/fineui-doc/index.html#/docs/learn/giud)中已经介绍过了怎么创建一个FineUI组件,获取组件实例,监听和发送事件.这里我们针对插件开发进行更灵活的定义.
+这里我们以一个简单的日期选择控件为例,引用了jquerui控件库.
+
+## 创建一个日期选择框
+首先在组件的render方法中将一段文本和一个输入框插入组件中,然后在组件挂载到dom上之后调用jqueryui的.datepicker方法使之成为一个日期选择框.
+```
+    // 用Jquery创建一个日期选择框
+    var Datepicker = BI.inherit(BI.Widget, {
+        props: {
+            baseCls: "plugin-date-picker",
+            text: ""  // 提供一个text参数来自定义日期选择框前的文字
+        },
+
+        mounted: function () {
+            $("#datepicker").datepicker();
+        },
+
+        render: function () {
+            var datePicker = $("<p>" + this.options.text + "：<input type=\"text\" id=\"datepicker\"></p>");
+            this.element.append(datePicker);
+        }
+    });
+    BI.shortcut("dec.plugin.datepicker", Datepicker);
+```
+
+## 定义并触发事件
+根据jqueryui的api,在日期选择框的onClese回调中向外发送名为"EVENT_SELECT"的事件.携带参数为选择值
+```
+ // 用Jquery创建一个日期选择框
+    var Datepicker = BI.inherit(BI.Widget, {
+        props: {
+            baseCls: "plugin-date-picker",
+            text: ""
+        },
+
+        mounted: function () {
+            var self = this;
+            $("#datepicker").datepicker({
+                onClose: function (selectedDate) {
+                    self.fireEvent(Datepicker.EVENT_SELECT, selectedDate);
+                }
+            });
+        },
+
+        render: function () {
+            var datePicker = $("<p>" + this.options.text + "：<input type=\"text\" id=\"datepicker\"></p>");
+            this.element.append(datePicker);
+        }
+    });
+
+    Datepicker.EVENT_SELECT = "EVENT_SELECT";
+    BI.shortcut("dec.plugin.datepicker", Datepicker);
+```
+## 好了,组件可以拿去用了
+这里使用了bi.vertical布局容纳了我们自定义日期选择框和FineUI中基础控件bi.label.通过监听日期选择框的事件动态的为label赋值.
+```
+    var DatepickerDemo = BI.inherit(BI.Widget, {
+
+        render: function () {
+            var self = this;
+            return {
+                type: "bi.vertical",  // 使用垂直方向布局
+                items: [
+                    {
+                        type: "dec.plugin.datepicker", // 日期选择控件
+                        text: "选择日期",
+                        listeners: [
+                            {
+                                eventName: "EVENT_SELECT",  // 监听事件,并将选择的日期设置到label上
+                                action: function (selectedDate) {
+                                    self.label.setValue(selectedDate);
+                                }
+                            }
+                        ]
+                    }, {
+                        type: "bi.label",  // 一个label组件,以ref的方式获取组件实例.
+                        ref: function (_ref) {
+                            self.label = _ref;
+                        },
+                        text: "日期将在这里显示",
+                        height: 24
+                    }
+                ]
+            };
+        }
+    });
+    BI.shortcut("dec.plugin.datepicker_demo", DatepickerDemo);
+```
+
+## 最终效果预览
+![](../screenshorts/8.gif)

basic/文字标签_输入框.md

@@ -0,0 +1,40 @@
+# 文字标签+输入框
+绘制表单提交数据是常用的业务逻辑.本例实现一个最基础的文字标签+输入框的示例.
+通过查阅[label组件-bi.label](http://fanruan.design/fineui-doc/index.html#/docs/components/label)和[输入框-bi.text_editor](http://fanruan.design/fineui-doc/index.html#/docs/components/textEditor),和[水平垂直居中布局-bi.vertical_adapt](http://fanruan.design/fineui-doc/index.html#/docs/components/layout)布局,我们组件一个水平方向垂直居中的标签+输入框
+## js
+```
+     // 创建一个文字+输入框组件
+    var LabelEditor = BI.inherit(BI.Widget, {
+        props: {
+            baseCls: "plugin-label-editor"
+        },
+
+        render: function () {
+            var self = this;
+            return {
+                type: "bi.vertical_adapt",  //  首先是垂直居中布局容纳两个子元素
+                items: [
+                    {
+                        type: "bi.label",  //  label文字标签
+                        text: "姓名:",
+                        height: 24
+                    }, {
+                        type: "bi.text_editor",  //  输入框
+                        width: 200,
+                        height: 24,
+                        watermark: "请输入内容",
+                        listeners: [
+                            {
+                                eventName: "EVENT_CONFIRM",  //  监听输入框组件的输入完成事件,然后获取输入框的值抛送给外部.
+                                action: function () {
+                                    self.fireEvent("EVENT_CONFIRM", this.getValue());
+                                }
+                            }
+                        ]
+                    }
+                ]
+            };
+        }
+    });
+    BI.shortcut("dec.plugin.label_editor", LabelEditor);
+```