diff --git a/Android/doric/src/main/java/com/github/penfeizhou/doric/shader/TextNode.java b/Android/doric/src/main/java/com/github/penfeizhou/doric/shader/TextNode.java
index f6e55430..5d31b856 100644
--- a/Android/doric/src/main/java/com/github/penfeizhou/doric/shader/TextNode.java
+++ b/Android/doric/src/main/java/com/github/penfeizhou/doric/shader/TextNode.java
@@ -1,5 +1,6 @@
 package com.github.penfeizhou.doric.shader;
 
+import android.util.TypedValue;
 import android.widget.TextView;
 
 import com.github.penfeizhou.doric.DoricContext;
@@ -29,6 +30,12 @@ public class TextNode extends ViewNode<TextView> {
             case "text":
                 view.setText(prop.asString().toString());
                 break;
+            case "textSize":
+                view.setTextSize(TypedValue.COMPLEX_UNIT_DIP, prop.asNumber().toFloat());
+                break;
+            case "textColor":
+                view.setTextColor(prop.asNumber().toInt());
+                break;
             default:
                 super.blend(view, name, prop);
                 break;
diff --git a/Android/doric/src/main/java/com/github/penfeizhou/doric/shader/ViewNode.java b/Android/doric/src/main/java/com/github/penfeizhou/doric/shader/ViewNode.java
index c6b6c4cf..74d3b1c0 100644
--- a/Android/doric/src/main/java/com/github/penfeizhou/doric/shader/ViewNode.java
+++ b/Android/doric/src/main/java/com/github/penfeizhou/doric/shader/ViewNode.java
@@ -78,6 +78,15 @@ public abstract class ViewNode<T extends View> extends DoricComponent {
             case "bgColor":
                 view.setBackgroundColor(prop.asNumber().toInt());
                 break;
+            case "onClick":
+                final String functionId = prop.asString().value();
+                view.setOnClickListener(new View.OnClickListener() {
+                    @Override
+                    public void onClick(View v) {
+                        callJSResponse(functionId);
+                    }
+                });
+                break;
             default:
                 break;
         }
@@ -100,7 +109,7 @@ public abstract class ViewNode<T extends View> extends DoricComponent {
         }
     }
 
-    public void callJSRespone(String funcId, Object... args) {
+    public void callJSResponse(String funcId, Object... args) {
         final Object[] nArgs = new Object[args.length + 2];
         nArgs[0] = ids.toArray(new String[0]);
         nArgs[1] = funcId;
diff --git a/Android/doric/src/main/java/com/github/penfeizhou/doric/utils/DoricUtils.java b/Android/doric/src/main/java/com/github/penfeizhou/doric/utils/DoricUtils.java
index c8c3c3a2..2ac78b02 100644
--- a/Android/doric/src/main/java/com/github/penfeizhou/doric/utils/DoricUtils.java
+++ b/Android/doric/src/main/java/com/github/penfeizhou/doric/utils/DoricUtils.java
@@ -14,6 +14,7 @@ import com.github.pengfeizhou.jscore.JSONBuilder;
 import com.github.pengfeizhou.jscore.JSValue;
 import com.github.pengfeizhou.jscore.JavaValue;
 
+import org.json.JSONArray;
 import org.json.JSONObject;
 
 import java.io.IOException;
@@ -69,6 +70,12 @@ public class DoricUtils {
             return new JavaValue((Boolean) arg);
         } else if (arg instanceof JavaValue) {
             return (JavaValue) arg;
+        } else if (arg instanceof Object[]) {
+            JSONArray jsonArray = new JSONArray();
+            for (Object o : (Object[]) arg) {
+                jsonArray.put(o);
+            }
+            return new JavaValue(jsonArray);
         } else {
             return new JavaValue(String.valueOf(arg));
         }
diff --git a/js-framework/demo.ts b/js-framework/demo.ts
index 7b27fc0e..9c6f7caa 100644
--- a/js-framework/demo.ts
+++ b/js-framework/demo.ts
@@ -5,16 +5,31 @@ import { Group } from "./src/ui/view";
 
 @Entry
 export class MyPage extends Panel {
-    text?: Text
+    state = {
+        count: 0
+    }
+
     build(rootView: Group): void {
-        this.text = new Text
-        this.text.text = "hello"
-        this.text.width = 50
-        this.text.height = 50
-        this.text.y = 100
-        rootView.children.push(this.text)
+        const numberView = new Text
+        numberView.width = 100
+        numberView.height = 200
+        numberView.top = 50
+        numberView.text = this.state.count.toString()
+        numberView.textSize = 40
+        numberView.centerX = rootView.width / 2
+        rootView.addChild(numberView)
+        const click = new Text
+        click.width = click.height = 100
+        click.textSize = 20
+        click.text = '点击计数'
+        click.onClick = () => {
+            this.state.count++
+            numberView.text = this.state.count.toString()
+        }
+        click.centerX = rootView.width / 2
+        click.top = numberView.bottom + 20
+        rootView.addChild(click)
         rootView.bgColor = Color.safeParse('#00ff00')
-        log('build view:', JSON.stringify(rootView.toModel()))
     }
 
     @NativeCall
@@ -22,29 +37,5 @@ export class MyPage extends Panel {
         log("Hello.HEGO")
         logw("Hello.HEGO")
         loge("Hello.HEGO")
-
-        context.demo.testPromise(true).then((r) => {
-            log('resolve', r)
-        }, (e) => {
-            log('reject', e)
-        })
-
-        context.demo.testPromise(false).then((r) => {
-            log('resolve', r)
-        }, (e) => {
-            log('reject', e)
-        })
-
-        setTimeout(function () {
-            log('settimeout')
-        }, 1000)
-
-        setInterval(() => {
-            log('setInterval')
-            if (this.text) {
-                this.text.y += 10
-            }
-            log('build view:', JSON.stringify(this.getRootView().toModel()))
-        }, 1000)
     }
 }
\ No newline at end of file
diff --git a/js-framework/src/ui/panel.ts b/js-framework/src/ui/panel.ts
index 654e30a2..af056a71 100644
--- a/js-framework/src/ui/panel.ts
+++ b/js-framework/src/ui/panel.ts
@@ -36,7 +36,6 @@ export abstract class Panel {
 
     @NativeCall
     private __init__(frame: Frame, data: any) {
-        log('__init__:', frame, data)
         this.__data__ = data
         this.__root__.width = frame.width
         this.__root__.height = frame.height
diff --git a/js-framework/src/ui/state.ts b/js-framework/src/ui/state.ts
index e69de29b..f2497413 100644
--- a/js-framework/src/ui/state.ts
+++ b/js-framework/src/ui/state.ts
@@ -0,0 +1,30 @@
+function from(obj: Object) {
+    return new Proxy(obj, {
+        set: (target, prop, value, receiver) => {
+            return Reflect.set(target, prop, value, receiver)
+        }
+    })
+}
+class Wrapper {
+    val: any
+    constructor(val: any) {
+        this.val = val
+    }
+    toVal(): any {
+        return this.val
+    }
+}
+export class State {
+    static of<T extends Object>(obj: T): T {
+        return new Proxy(obj, {
+            get: (target, prop) => {
+                const ret = Reflect.get(target, prop)
+                if (ret instanceof Object) {
+                    return State.of(ret)
+                } else {
+                    return new Wrapper(ret)
+                }
+            }
+        })
+    }
+}
\ No newline at end of file
diff --git a/js-framework/src/ui/view.ts b/js-framework/src/ui/view.ts
index e37bf41a..7019bb29 100644
--- a/js-framework/src/ui/view.ts
+++ b/js-framework/src/ui/view.ts
@@ -58,12 +58,12 @@ export abstract class View implements Modeling {
 
     constructor() {
         return new Proxy(this, {
-            get: (target, p) => {
-                return Reflect.get(target, p)
+            get: (target, p, receiver) => {
+                return Reflect.get(target, p, receiver)
             },
             set: (target, p, v, receiver) => {
-                const oldV = Reflect.get(target, p)
-                const ret = Reflect.set(target, p, v)
+                const oldV = Reflect.get(target, p, receiver)
+                const ret = Reflect.set(target, p, v, receiver)
                 if (Reflect.getMetadata(p, target)) {
                     receiver.onPropertyChanged(p.toString(), oldV, v)
                 }
@@ -101,6 +101,22 @@ export abstract class View implements Modeling {
     set bottom(v: number) {
         this.y = v - this.height
     }
+
+    get centerX() {
+        return this.x + this.width / 2
+    }
+
+    get centerY() {
+        return this.y + this.height / 2
+    }
+
+    set centerX(v: number) {
+        this.x = v - this.width / 2
+    }
+
+    set centerY(v: number) {
+        this.y = v - this.height / 2
+    }
     /** Anchor end*/
 
     __dirty_props__: { [index: string]: Model | undefined } = {}
@@ -212,6 +228,9 @@ export abstract class Group extends View {
         }
     })
 
+    addChild(view: View) {
+        this.children.push(view)
+    }
     clean() {
         this.children.forEach(e => { e.clean() })
         super.clean()
@@ -232,7 +251,6 @@ export abstract class Group extends View {
     }
 
     onChildPropertyChanged(child: View, propKey: string, oldV: Model, newV: Model) {
-        loge('onChildPropertyChanged:' + (this.children.indexOf(child)))
         this.getDirtyChildrenModel()[this.children.indexOf(child)] = child.nativeViewModel
     }
 }
@@ -270,6 +288,9 @@ export class Text extends View {
 
     @Property
     maxLines?: number
+
+    @Property
+    onClick?: Function
 }
 
 export class Image extends View {