Add embedded example for android

doric-android/app/src/main/AndroidManifest.xml

@@ -32,6 +32,9 @@
         <activity
             android:name=".DoricPanelListActivity"
             android:theme="@style/Theme.Design.Light.NoActionBar" />
+        <activity
+            android:name=".DoricEmbeddedActivity"
+            android:theme="@style/Theme.Design.Light.NoActionBar" />
     </application>
 
     <uses-permission android:name="android.permission.INTERNET" />

doric-android/app/src/main/java/pub/doric/demo/DoricEmbeddedActivity.java

@@ -0,0 +1,107 @@
+package pub.doric.demo;
+
+import android.annotation.SuppressLint;
+import android.graphics.Color;
+import android.os.Bundle;
+import android.view.ViewGroup;
+
+import com.github.pengfeizhou.jscore.JSONBuilder;
+
+import androidx.annotation.NonNull;
+import androidx.annotation.Nullable;
+import androidx.appcompat.app.AppCompatActivity;
+import androidx.recyclerview.widget.RecyclerView;
+import androidx.recyclerview.widget.StaggeredGridLayoutManager;
+import pub.doric.DoricPanel;
+import pub.doric.DoricSingleton;
+import pub.doric.async.AsyncResult;
+import pub.doric.utils.DoricLog;
+
+public class DoricEmbeddedActivity extends AppCompatActivity {
+    @Override
+    protected void onCreate(@Nullable Bundle savedInstanceState) {
+        super.onCreate(savedInstanceState);
+        setContentView(R.layout.activity_doric_panel_list);
+
+        RecyclerView recyclerView = findViewById(R.id.doric_panel_rv);
+        recyclerView.setBackgroundColor(Color.WHITE);
+        recyclerView.setLayoutManager(new StaggeredGridLayoutManager(
+                2,
+                StaggeredGridLayoutManager.VERTICAL));
+        recyclerView.setNestedScrollingEnabled(true);
+        recyclerView.setAdapter(new MyAdapter());
+    }
+
+    private static class DoricHolder extends RecyclerView.ViewHolder {
+        private final DoricPanel panel;
+
+        public DoricHolder(@NonNull DoricPanel panel) {
+            super(panel);
+            this.panel = panel;
+        }
+    }
+
+    private static class MyAdapter extends RecyclerView.Adapter<RecyclerView.ViewHolder> {
+        @NonNull
+        @Override
+        public RecyclerView.ViewHolder onCreateViewHolder(@NonNull ViewGroup parent, int viewType) {
+            final DoricPanel doricPanel = new DoricPanel(parent.getContext());
+            doricPanel.setLayoutParams(new ViewGroup.LayoutParams(
+                    ViewGroup.LayoutParams.MATCH_PARENT,
+                    ViewGroup.LayoutParams.WRAP_CONTENT));
+            doricPanel.setMinimumHeight(100);
+            final String source;
+            final String alias;
+            if (viewType == 0) {
+                source = "assets://src/CellModule1Demo.js";
+                alias = "CellModule1Demo.js";
+            } else {
+                source = "assets://src/CellModule2Demo.js";
+                alias = "CellModule2Demo.js";
+            }
+
+            DoricSingleton.getInstance().getJSLoaderManager().loadJSBundle(source).setCallback(new AsyncResult.Callback<String>() {
+                @Override
+                public void onResult(String result) {
+                    doricPanel.config(result, alias, "{}");
+                    doricPanel.getDoricContext().getRootNode().setReusable(true);
+                }
+
+                @Override
+                public void onError(Throwable t) {
+                    DoricLog.e("Doric load JS error:" + t.getLocalizedMessage());
+                }
+
+                @Override
+                public void onFinish() {
+
+                }
+            });
+            return new DoricHolder(doricPanel);
+        }
+
+        @Override
+        public int getItemViewType(int position) {
+            return position % 2 == 0 ? 0 : 1;
+        }
+
+        @SuppressLint("SetTextI18n")
+        @Override
+        public void onBindViewHolder(@NonNull RecyclerView.ViewHolder holder, @SuppressLint("RecyclerView") final int position) {
+            if (holder instanceof DoricHolder) {
+                ((DoricHolder) holder).panel.getDoricContext().callEntity("setData", new JSONBuilder()
+                        .put("imageUrl", (holder.getItemViewType() == 0)
+                                ? "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fc-ssl.duitang.com%2Fuploads%2Fblog%2F202107%2F09%2F20210709142454_dc8dc.thumb.1000_0.jpeg&refer=http%3A%2F%2Fc-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1660279617&t=8caf9c88dbeb00c6436f76e90c54eecc"
+                                : "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fc-ssl.duitang.com%2Fuploads%2Fitem%2F202005%2F02%2F20200502185802_FuFU2.thumb.1000_0.jpeg&refer=http%3A%2F%2Fc-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1660279617&t=77131edf568efeda32c3a6513412f324")
+                        .put("title", "" + (position + 1))
+                        .put("content", "第" + (position + 1) + "\n" + "++++++++可填充内容++++++++" + ((holder.getItemViewType() == 0) ? "\n+++再加一行+++" : ""))
+                        .toJSONObject());
+            }
+        }
+
+        @Override
+        public int getItemCount() {
+            return 1000;
+        }
+    }
+}

doric-android/app/src/main/java/pub/doric/demo/MainActivity.java

@@ -124,6 +124,15 @@ public class MainActivity extends AppCompatActivity {
                         tv.getContext().startActivity(intent);
                     }
                 });
+            } else if (position == 2) {
+                tv.setText("Embedded Example");
+                tv.setOnClickListener(new View.OnClickListener() {
+                    @Override
+                    public void onClick(View v) {
+                        Intent intent = new Intent(tv.getContext(), DoricEmbeddedActivity.class);
+                        tv.getContext().startActivity(intent);
+                    }
+                });
             }else {
                 tv.setText(data[position - 2]);
                 tv.setOnClickListener(new View.OnClickListener() {
@@ -141,7 +150,7 @@ public class MainActivity extends AppCompatActivity {
 
         @Override
         public int getItemCount() {
-            return data.length + 2;
+            return data.length + 3;
         }
     }
 }

doric-android/doric/src/main/java/pub/doric/shader/SuperNode.java

@@ -161,4 +161,8 @@ public abstract class SuperNode<V extends View> extends ViewNode<V> {
             }
         }
     }
+
+    public void setReusable(boolean reusable) {
+        this.mReusable = reusable;
+    }
 }

doric-demo/src/CellModule1Demo.tsx

@@ -0,0 +1,91 @@
+import {
+  Panel,
+  Group,
+  jsx,
+  VLayout,
+  Image,
+  Text,
+  layoutConfig,
+  HLayout,
+  Gravity,
+  Color,
+  createRef,
+} from "doric";
+
+@Entry
+export class Cell1 extends Panel {
+  imageRef = createRef<Image>();
+  titleRef = createRef<Text>();
+  contentRef = createRef<Text>();
+  data?: { imageUrl: string; title: string; content: string };
+
+  build(root: Group) {
+    <VLayout parent={root} layoutConfig={layoutConfig().most()} space={20}>
+      <Text
+        layoutConfig={layoutConfig().mostWidth().justHeight()}
+        textSize={16}
+        height={30}
+        textAlignment={Gravity.Center}
+        textColor={Color.WHITE}
+        backgroundColor={Color.parse("#1abc9c")}
+      >
+        模块1样式
+      </Text>
+      <HLayout
+        layoutConfig={layoutConfig().mostWidth().fitHeight()}
+        padding={{ left: 15, right: 15, bottom: 15 }}
+      >
+        <Image
+          ref={this.imageRef}
+          layoutConfig={layoutConfig().just()}
+          width={80}
+          height={80}
+          imageUrl="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fc-ssl.duitang.com%2Fuploads%2Fitem%2F202105%2F29%2F20210529001057_aSeLB.thumb.1000_0.jpeg&refer=http%3A%2F%2Fc-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1660279617&t=58adafcc2e68fd90e83991ebcec99b50"
+        />
+        <VLayout
+          layoutConfig={layoutConfig()
+            .fitHeight()
+            .configWeight(1)
+            .configMargin({ left: 20 })}
+          space={10}
+        >
+          <Text
+            ref={this.titleRef}
+            layoutConfig={layoutConfig().fitHeight().mostWidth()}
+            textSize={20}
+            textAlignment={Gravity.Left}
+          >
+            标题文本
+          </Text>
+          <Text
+            ref={this.contentRef}
+            layoutConfig={layoutConfig().fitHeight().mostWidth()}
+            maxLines={0}
+            textSize={12}
+            textAlignment={Gravity.Left}
+          >
+            这是一段多行的文本 这是一段多行的文本 这是一段多行的文本
+            这是一段多行的文本 这是一段多行的文本 这是一段多行的文本
+          </Text>
+        </VLayout>
+      </HLayout>
+    </VLayout>;
+    if (this.data) {
+      this.setData(this.data);
+    }
+  }
+  //从客户端直接调用方法
+  setData(data: { imageUrl: string; title: string; content: string }) {
+    this.data = data;
+    if (
+      this.imageRef.current &&
+      this.titleRef.current &&
+      this.contentRef.current
+    ) {
+      const { imageUrl, title, content } = data;
+      this.imageRef.current.imageUrl = imageUrl;
+      this.titleRef.current.text = title;
+      this.contentRef.current.text = content;
+    }
+  }
+}

doric-demo/src/CellModule2Demo.tsx

@@ -0,0 +1,92 @@
+import {
+  Panel,
+  Group,
+  jsx,
+  VLayout,
+  Image,
+  Text,
+  layoutConfig,
+  HLayout,
+  Gravity,
+  Color,
+  createRef,
+} from "doric";
+
+@Entry
+export class Cell2 extends Panel {
+  imageRef = createRef<Image>();
+  titleRef = createRef<Text>();
+  contentRef = createRef<Text>();
+
+  data?: { imageUrl: string; title: string; content: string };
+
+  build(root: Group) {
+    <VLayout parent={root} layoutConfig={layoutConfig().most()} space={20}>
+      <Text
+        layoutConfig={layoutConfig().mostWidth().justHeight()}
+        textSize={16}
+        height={30}
+        textAlignment={Gravity.Center}
+        textColor={Color.WHITE}
+        backgroundColor={Color.parse("#f1c40f")}
+      >
+        模块2样式
+      </Text>
+      <HLayout
+        layoutConfig={layoutConfig().mostWidth().fitHeight()}
+        padding={{ left: 15, right: 15, bottom: 15 }}
+      >
+        <VLayout
+          layoutConfig={layoutConfig()
+            .fitHeight()
+            .configWeight(1)
+            .configMargin({ right: 20 })}
+          space={10}
+        >
+          <Text
+            ref={this.titleRef}
+            layoutConfig={layoutConfig().fitHeight().mostWidth()}
+            textSize={20}
+            textAlignment={Gravity.Left}
+          >
+            标题文本
+          </Text>
+          <Text
+            ref={this.contentRef}
+            layoutConfig={layoutConfig().fitHeight().mostWidth()}
+            maxLines={0}
+            textSize={12}
+            textAlignment={Gravity.Left}
+          >
+            这是一段多行的文本 这是一段多行的文本 这是一段多行的文本
+            这是一段多行的文本 这是一段多行的文本 这是一段多行的文本
+          </Text>
+        </VLayout>
+        <Image
+          ref={this.imageRef}
+          layoutConfig={layoutConfig().just()}
+          width={80}
+          height={80}
+          imageUrl="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fc-ssl.duitang.com%2Fuploads%2Fitem%2F202009%2F23%2F20200923185609_rQUdj.thumb.1000_0.jpeg&refer=http%3A%2F%2Fc-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1660279617&t=5084c8fff0c25f8cf5e158867e57c126"
+        />
+      </HLayout>
+    </VLayout>;
+    if (this.data) {
+      this.setData(this.data);
+    }
+  }
+  //从客户端直接调用方法
+  setData(data: { imageUrl: string; title: string; content: string }) {
+    this.data = data;
+    if (
+      this.imageRef.current &&
+      this.titleRef.current &&
+      this.contentRef.current
+    ) {
+      const { imageUrl, title, content } = data;
+      this.imageRef.current.imageUrl = imageUrl;
+      this.titleRef.current.text = title;
+      this.contentRef.current.text = content;
+    }
+  }
+}