view id list

Android/app/src/main/res/layout/activity_main.xml

@@ -1,22 +1,12 @@
 <?xml version="1.0" encoding="utf-8"?>
 <android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
-    xmlns:app="http://schemas.android.com/apk/res-auto"
     xmlns:tools="http://schemas.android.com/tools"
     android:layout_width="match_parent"
     android:layout_height="match_parent"
     tools:context="com.github.penfeizhou.doricdemo.MainActivity">
 
-    <TextView
-        android:layout_width="wrap_content"
-        android:layout_height="wrap_content"
-        android:text="Hello World!"
-        app:layout_constraintBottom_toBottomOf="parent"
-        app:layout_constraintLeft_toLeftOf="parent"
-        app:layout_constraintRight_toRightOf="parent"
-        app:layout_constraintTop_toTopOf="parent" />
-
     <FrameLayout
         android:id="@+id/root"
         android:layout_width="match_parent"
-        android:layout_height="match_parent"></FrameLayout>
+        android:layout_height="match_parent" />
 </android.support.constraint.ConstraintLayout>

Android/doric/src/main/java/com/github/penfeizhou/doric/plugin/ShaderPlugin.java

@@ -30,7 +30,7 @@ public class ShaderPlugin extends DoricJavaPlugin {
                 @Override
                 public Object call() throws Exception {
                     RootNode rootNode = getDoricContext().getRootNode();
-                    rootNode.blend(jsObject.getProperty("props").asObject());
+                    rootNode.render(jsObject.getProperty("props").asObject());
                     return null;
                 }
             }, ThreadMode.UI);

Android/doric/src/main/java/com/github/penfeizhou/doric/shader/GroupNode.java

@@ -1,6 +1,7 @@
 package com.github.penfeizhou.doric.shader;
 
 import android.util.SparseArray;
+import android.view.View;
 import android.view.ViewGroup;
 
 import com.github.penfeizhou.doric.DoricContext;
@@ -25,8 +26,8 @@ public abstract class GroupNode<F extends ViewGroup> extends ViewNode<F> {
     }
 
     @Override
-    public void blend(JSObject jsObject) {
+    public void blend(JSObject jsObject, ViewGroup.LayoutParams layoutParams) {
-        super.blend(jsObject);
+        super.blend(jsObject, layoutParams);
         JSArray jsArray = jsObject.getProperty("children").asArray();
         int i;
         for (i = 0; i < jsArray.size(); i++) {
@@ -41,15 +42,19 @@ public abstract class GroupNode<F extends ViewGroup> extends ViewNode<F> {
             if (child == null) {
                 child = ViewNode.create(getDoricContext(), type);
                 child.index = i;
-                child.ids.addAll(this.ids);
+                child.mParent = this;
-                child.ids.add(id);
+                child.mId = id;
                 mChildrenNode.put(id, child);
             } else if (i != child.index) {
                 mIndexInfo.remove(i);
                 child.index = i;
                 mView.removeView(child.mView);
             }
-            child.blend(childObj.getProperty("props").asObject());
+            ViewGroup.LayoutParams params = child.getLayoutParams();
+            if (params == null) {
+                params = generateDefaultLayoutParams();
+            }
+            child.blend(childObj.getProperty("props").asObject(), params);
             if (mIndexInfo.get(i) == null) {
                 mView.addView(child.mView, i);
                 mIndexInfo.put(i, child);
@@ -63,4 +68,8 @@ public abstract class GroupNode<F extends ViewGroup> extends ViewNode<F> {
             }
         }
     }
+
+    protected ViewGroup.LayoutParams generateDefaultLayoutParams() {
+        return new ViewGroup.LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT, ViewGroup.LayoutParams.WRAP_CONTENT);
+    }
 }

Android/doric/src/main/java/com/github/penfeizhou/doric/shader/LinearNode.java

@@ -1,6 +1,7 @@
 package com.github.penfeizhou.doric.shader;
 
 import android.graphics.drawable.ShapeDrawable;
+import android.view.ViewGroup;
 import android.widget.LinearLayout;
 
 import com.github.penfeizhou.doric.DoricContext;
@@ -24,7 +25,7 @@ public class LinearNode extends GroupNode<LinearLayout> {
     }
 
     @Override
-    protected void blend(LinearLayout view, String name, JSValue prop) {
+    protected void blend(LinearLayout view, ViewGroup.LayoutParams params, String name, JSValue prop) {
         switch (name) {
             case "space":
                 ShapeDrawable shapeDrawable;
@@ -47,7 +48,7 @@ public class LinearNode extends GroupNode<LinearLayout> {
                 view.setGravity(prop.asNumber().toInt());
                 break;
             default:
-                super.blend(view, name, prop);
+                super.blend(view, params, name, prop);
                 break;
         }
     }

Android/doric/src/main/java/com/github/penfeizhou/doric/shader/RootNode.java

@@ -25,4 +25,8 @@ public class RootNode extends GroupNode<FrameLayout> {
     public void setRootView(FrameLayout rootView) {
         this.mView = rootView;
     }
+
+    public void render(JSObject props) {
+        blend(props, mView.getLayoutParams());
+    }
 }

Android/doric/src/main/java/com/github/penfeizhou/doric/shader/StackNode.java

@@ -1,5 +1,6 @@
 package com.github.penfeizhou.doric.shader;
 
+import android.view.ViewGroup;
 import android.widget.FrameLayout;
 
 import com.github.penfeizhou.doric.DoricContext;
@@ -24,13 +25,13 @@ public class StackNode extends GroupNode<FrameLayout> {
     }
 
     @Override
-    protected void blend(FrameLayout view, String name, JSValue prop) {
+    protected void blend(FrameLayout view, ViewGroup.LayoutParams layoutParams, String name, JSValue prop) {
         switch (name) {
             case "gravity":
                 view.setForegroundGravity(prop.asNumber().toInt());
                 break;
             default:
-                super.blend(view, name, prop);
+                super.blend(view, layoutParams, name, prop);
         }
     }
 }

Android/doric/src/main/java/com/github/penfeizhou/doric/shader/TextNode.java

@@ -1,6 +1,7 @@
 package com.github.penfeizhou.doric.shader;
 
 import android.util.TypedValue;
+import android.view.ViewGroup;
 import android.widget.TextView;
 
 import com.github.penfeizhou.doric.DoricContext;
@@ -25,7 +26,7 @@ public class TextNode extends ViewNode<TextView> {
     }
 
     @Override
-    protected void blend(TextView view, String name, JSValue prop) {
+    protected void blend(TextView view, ViewGroup.LayoutParams params, String name, JSValue prop) {
         switch (name) {
             case "text":
                 view.setText(prop.asString().toString());
@@ -37,7 +38,7 @@ public class TextNode extends ViewNode<TextView> {
                 view.setTextColor(prop.asNumber().toInt());
                 break;
             default:
-                super.blend(view, name, prop);
+                super.blend(view, params, name, prop);
                 break;
         }
     }

Android/doric/src/main/java/com/github/penfeizhou/doric/shader/ViewNode.java

@@ -3,6 +3,8 @@ package com.github.penfeizhou.doric.shader;
 import android.content.Context;
 import android.view.View;
 import android.view.ViewGroup;
+import android.widget.FrameLayout;
+import android.widget.LinearLayout;
 
 import com.github.penfeizhou.doric.DoricContext;
 import com.github.penfeizhou.doric.DoricRegistry;
@@ -13,7 +15,7 @@ import com.github.penfeizhou.doric.utils.DoricUtils;
 import com.github.pengfeizhou.jscore.JSObject;
 import com.github.pengfeizhou.jscore.JSValue;
 
-import java.util.ArrayList;
+import java.util.LinkedList;
 
 /**
  * @Description: Render
@@ -23,8 +25,8 @@ import java.util.ArrayList;
 public abstract class ViewNode<T extends View> extends DoricComponent {
     protected T mView;
     int index;
-
+    ViewNode<ViewGroup> mParent;
-    ArrayList<String> ids = new ArrayList<>();
+    String mId;
 
     public ViewNode(DoricContext doricContext) {
         super(doricContext);
@@ -40,47 +42,42 @@ public abstract class ViewNode<T extends View> extends DoricComponent {
 
     public abstract T build(JSObject jsObject);
 
-    void blend(JSObject jsObject) {
+    void blend(JSObject jsObject, ViewGroup.LayoutParams layoutParams) {
         if (mView == null) {
             mView = build(jsObject);
         }
-        if (mView.getLayoutParams() == null) {
-            mView.setLayoutParams(new ViewGroup.MarginLayoutParams(
-                    ViewGroup.LayoutParams.WRAP_CONTENT,
-                    ViewGroup.LayoutParams.WRAP_CONTENT));
-        }
         for (String prop : jsObject.propertySet()) {
-            blend(mView, prop, jsObject.getProperty(prop));
+            blend(mView, layoutParams, prop, jsObject.getProperty(prop));
         }
-        mView.setLayoutParams(mView.getLayoutParams());
+        mView.setLayoutParams(layoutParams);
     }
 
-    protected void blend(T view, String name, JSValue prop) {
+    protected void blend(T view, ViewGroup.LayoutParams layoutParams, String name, JSValue prop) {
         switch (name) {
             case "width":
                 if (prop.asNumber().toInt() < 0) {
-                    view.getLayoutParams().width = prop.asNumber().toInt();
+                    layoutParams.width = prop.asNumber().toInt();
                 } else {
-                    view.getLayoutParams().width = DoricUtils.dp2px(prop.asNumber().toFloat());
+                    layoutParams.width = DoricUtils.dp2px(prop.asNumber().toFloat());
                 }
                 break;
             case "height":
                 if (prop.asNumber().toInt() < 0) {
-                    view.getLayoutParams().height = prop.asNumber().toInt();
+                    layoutParams.height = prop.asNumber().toInt();
                 } else {
-                    view.getLayoutParams().height = DoricUtils.dp2px(prop.asNumber().toFloat());
+                    layoutParams.height = DoricUtils.dp2px(prop.asNumber().toFloat());
                 }
                 break;
             case "x":
-                if (view.getLayoutParams() instanceof ViewGroup.MarginLayoutParams) {
+                if (layoutParams instanceof ViewGroup.MarginLayoutParams) {
                     float x = prop.asNumber().toFloat();
-                    ((ViewGroup.MarginLayoutParams) mView.getLayoutParams()).leftMargin = DoricUtils.dp2px(x);
+                    ((ViewGroup.MarginLayoutParams) layoutParams).leftMargin = DoricUtils.dp2px(x);
                 }
                 break;
             case "y":
-                if (view.getLayoutParams() instanceof ViewGroup.MarginLayoutParams) {
+                if (layoutParams instanceof ViewGroup.MarginLayoutParams) {
                     float y = prop.asNumber().toFloat();
-                    ((ViewGroup.MarginLayoutParams) mView.getLayoutParams()).topMargin = DoricUtils.dp2px(y);
+                    ((ViewGroup.MarginLayoutParams) layoutParams).topMargin = DoricUtils.dp2px(y);
                 }
                 break;
             case "bgColor":
@@ -95,31 +92,36 @@ public abstract class ViewNode<T extends View> extends DoricComponent {
                     }
                 });
                 break;
+            case "layoutConfig":
+                JSObject layoutConfig = prop.asObject();
+                JSValue jsValue = layoutConfig.getProperty("alignment");
+                if (jsValue.isNumber()) {
+                    if (layoutParams instanceof LinearLayout.LayoutParams) {
+                        ((LinearLayout.LayoutParams) layoutParams).gravity = jsValue.asNumber().toInt();
+                    } else if (layoutParams instanceof FrameLayout.LayoutParams) {
+                        ((FrameLayout.LayoutParams) layoutParams).gravity = jsValue.asNumber().toInt();
+                    }
+                }
+                break;
             default:
                 break;
         }
     }
 
-    public String getId() {
+    String[] getIdList() {
-        return ids.get(ids.size() - 1);
+        LinkedList<String> ids = new LinkedList<>();
-    }
+        ViewNode viewNode = this;
+        do {
+            ids.push(viewNode.mId);
+            viewNode = viewNode.mParent;
+        } while (viewNode != null && !(viewNode instanceof RootNode));
 
-    public void setFrame(ViewGroup.LayoutParams layoutParams, JSObject jsObject) {
+        return ids.toArray(new String[0]);
-        float width = jsObject.getProperty("width").asNumber().toFloat();
-        float height = jsObject.getProperty("height").asNumber().toFloat();
-        layoutParams.width = DoricUtils.dp2px(width);
-        layoutParams.height = DoricUtils.dp2px(height);
-        if (layoutParams instanceof ViewGroup.MarginLayoutParams) {
-            float x = jsObject.getProperty("x").asNumber().toFloat();
-            float y = jsObject.getProperty("y").asNumber().toFloat();
-            ((ViewGroup.MarginLayoutParams) layoutParams).leftMargin = DoricUtils.dp2px(x);
-            ((ViewGroup.MarginLayoutParams) layoutParams).topMargin = DoricUtils.dp2px(y);
-        }
     }
 
     public void callJSResponse(String funcId, Object... args) {
         final Object[] nArgs = new Object[args.length + 2];
-        nArgs[0] = ids.toArray(new String[0]);
+        nArgs[0] = getIdList();
         nArgs[1] = funcId;
         if (args.length > 0) {
             System.arraycopy(args, 0, nArgs, 2, args.length);
@@ -132,4 +134,15 @@ public abstract class ViewNode<T extends View> extends DoricComponent {
         DoricMetaInfo<ViewNode> clz = registry.acquireViewNodeInfo(type);
         return clz.createInstance(doricContext);
     }
+
+    public ViewGroup.LayoutParams getLayoutParams() {
+        if (mView != null) {
+            return mView.getLayoutParams();
+        }
+        return null;
+    }
+
+    public String getId() {
+        return mId;
+    }
 }

js-framework/demo.ts

@@ -23,6 +23,11 @@ export class MyPage extends Panel {
             state.set(state.get() + 1)
         }
         click.top = numberView.bottom + 20
+
+        click.layoutConfig = {
+            alignment: new Gravity().centerX()
+        }
+
         rootView.addChild(click)
 
         const vlayout = new VLayout

js-framework/src/ui/view.ts

@@ -182,7 +182,7 @@ export abstract class View implements Modeling {
     }
 
     @Property
-    config?: Config
+    layoutConfig?: Config
 
     @Property
     onClick?: Function

js-framework/src/util/types.ts

@@ -4,11 +4,17 @@ export interface Modeling {
 export function obj2Model(obj: Model): Model {
     if (obj instanceof Array) {
         return obj.map(e => obj2Model(e)) as Model
-    } else if (obj instanceof Object
+    } else if (obj instanceof Object) {
-        && Reflect.has(obj, 'toModel')
+        if (Reflect.has(obj, 'toModel') && Reflect.get(obj, 'toModel') instanceof Function) {
-        && Reflect.get(obj, 'toModel') instanceof Function) {
             obj = Reflect.apply(Reflect.get(obj, 'toModel'), obj, [])
             return obj
+        } else {
+            for (let key in obj) {
+                const val = Reflect.get(obj, key)
+                Reflect.set(obj, key, obj2Model(val))
+            }
+            return obj
+        }
     } else {
         return obj
     }

js-framework/src/vm/viewmodel.ts

@@ -0,0 +1,11 @@
+export class ViewModel<T extends Object> {
+    data: T
+    constructor(obj: T) {
+        this.data = new Proxy(obj, {
+            get: () => {
+
+            }
+        })
+    }
+
+}