From 1b23dbd653b168d36d182a310a76619497fae999 Mon Sep 17 00:00:00 2001 From: "pengfei.zhou" Date: Tue, 19 Nov 2019 21:22:26 +0800 Subject: [PATCH] feat:add LayoutDemo --- .../java/pub/doric/demo/DemoActivity.java | 2 +- .../java/pub/doric/demo/MainActivity.java | 49 +- demo/index.ts | 1 + demo/src/LayoutDemo.ts | 464 ++++++++++++++++++ iOS/Example/Example.xcodeproj/project.pbxproj | 10 +- .../xcshareddata/xcschemes/Example.xcscheme | 28 +- js-framework/src/ui/view.ts | 8 + 7 files changed, 538 insertions(+), 24 deletions(-) create mode 100644 demo/src/LayoutDemo.ts diff --git a/Android/app/src/main/java/pub/doric/demo/DemoActivity.java b/Android/app/src/main/java/pub/doric/demo/DemoActivity.java index 8aa99201..ca7e91f4 100644 --- a/Android/app/src/main/java/pub/doric/demo/DemoActivity.java +++ b/Android/app/src/main/java/pub/doric/demo/DemoActivity.java @@ -53,7 +53,7 @@ public class DemoActivity extends AppCompatActivity { FrameLayout frameLayout = new FrameLayout(this); addContentView(frameLayout, new ViewGroup.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.MATCH_PARENT)); - doricContext = DoricContext.create(this, DoricUtils.readAssetFile("demo/" + source), "test"); + doricContext = DoricContext.create(this, DoricUtils.readAssetFile("demo/" + source), source); doricContext.init(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.MATCH_PARENT); doricContext.getRootNode().setRootView(frameLayout); } diff --git a/Android/app/src/main/java/pub/doric/demo/MainActivity.java b/Android/app/src/main/java/pub/doric/demo/MainActivity.java index e2fa9ace..17db4e70 100644 --- a/Android/app/src/main/java/pub/doric/demo/MainActivity.java +++ b/Android/app/src/main/java/pub/doric/demo/MainActivity.java @@ -28,15 +28,24 @@ import androidx.appcompat.app.AppCompatActivity; import androidx.recyclerview.widget.LinearLayoutManager; import androidx.recyclerview.widget.RecyclerView; +import org.greenrobot.eventbus.EventBus; +import org.greenrobot.eventbus.Subscribe; +import org.greenrobot.eventbus.ThreadMode; + import java.io.IOException; import java.util.ArrayList; import java.util.List; import java.util.function.Predicate; +import pub.doric.DoricDriver; +import pub.doric.dev.DevPanel; +import pub.doric.dev.event.EnterDebugEvent; +import pub.doric.dev.event.QuitDebugEvent; +import pub.doric.engine.ChangeEngineCallback; import pub.doric.utils.DoricUtils; public class MainActivity extends AppCompatActivity { - + private DevPanel devPanel = new DevPanel(); @Override protected void onCreate(Bundle savedInstanceState) { @@ -48,6 +57,7 @@ public class MainActivity extends AppCompatActivity { try { String[] demos = getAssets().list("demo"); List ret = new ArrayList<>(); + ret.add("Debug Kit"); for (String str : demos) { if (str.endsWith("js")) { ret.add(str); @@ -59,7 +69,38 @@ public class MainActivity extends AppCompatActivity { } } - public static class MyAdapter extends RecyclerView.Adapter { + @Override + public void onAttachedToWindow() { + super.onAttachedToWindow(); + + EventBus.getDefault().register(this); + } + + @Override + protected void onDestroy() { + super.onDestroy(); + EventBus.getDefault().unregister(this); + } + + @Subscribe(threadMode = ThreadMode.MAIN) + public void onEnterDebugEvent(EnterDebugEvent enterDebugEvent) { + DoricDriver.getInstance().changeJSEngine(false, new ChangeEngineCallback() { + @Override + public void changed() { + } + }); + } + + @Subscribe(threadMode = ThreadMode.MAIN) + public void onQuitDebugEvent(QuitDebugEvent quitDebugEvent) { + DoricDriver.getInstance().changeJSEngine(true, new ChangeEngineCallback() { + @Override + public void changed() { + } + }); + } + + public class MyAdapter extends RecyclerView.Adapter { private final String[] data; @@ -91,6 +132,10 @@ public class MainActivity extends AppCompatActivity { tv.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View v) { + if (position == 0) { + devPanel.show(getSupportFragmentManager(), "DevPanel"); + return; + } Intent intent = new Intent(tv.getContext(), DemoActivity.class); intent.putExtra("source", data[position]); tv.getContext().startActivity(intent); diff --git a/demo/index.ts b/demo/index.ts index 158cd4e3..ef40e3af 100644 --- a/demo/index.ts +++ b/demo/index.ts @@ -4,4 +4,5 @@ export default [ 'src/ListDemo', 'src/ScrollerDemo', 'src/SliderDemo', + 'src/LayoutDemo', ] \ No newline at end of file diff --git a/demo/src/LayoutDemo.ts b/demo/src/LayoutDemo.ts new file mode 100644 index 00000000..4ff2e8a1 --- /dev/null +++ b/demo/src/LayoutDemo.ts @@ -0,0 +1,464 @@ + +import { Group, Panel, Text, text, gravity, Color, Stack, LayoutSpec, list, NativeCall, listItem, log, vlayout, Gravity, hlayout, slider, slideItem, scroller, IVLayout, IHLayout } from "doric"; +import { O_TRUNC } from "constants"; + +const colors = [ + "#f0932b", + "#eb4d4b", + "#6ab04c", + "#e056fd", + "#686de0", + "#30336b", +] + +function box(idx = 0) { + return (new Stack).also(it => { + it.width = it.height = 20 + it.bgColor = Color.parse(colors[idx || 0]) + }) +} +function boxStr(str: string, idx = 0) { + return (new Text).also(it => { + it.width = it.height = 20 + it.text = str + it.textColor = Color.parse('#ffffff') + it.bgColor = Color.parse(colors[idx || 0]) + }) +} +function label(str: string) { + return text({ + text: str, + textSize: 16, + }) +} +@Entry +class LayoutDemo extends Panel { + build(rootView: Group) { + scroller( + hlayout([ + vlayout([ + label("Horizontal Layout(Align to Top)"), + hlayout([ + box().apply({ + height: 20 + }), + box().apply({ + height: 40 + }), + box().apply({ + height: 60 + }), + box().apply({ + height: 40 + }), + box().apply({ + height: 20 + }), + ]).also(it => { + it.space = 20 + }), + label("Horizontal Layout(Align to Bottom)"), + hlayout([ + box().apply({ + height: 20 + }), + box().apply({ + height: 40 + }), + box().apply({ + height: 60 + }), + box().apply({ + height: 40 + }), + box().apply({ + height: 20 + }), + ]).also(it => { + it.space = 20 + it.gravity = gravity().bottom() + }), + label("Horizontal Layout(Align to Center)"), + hlayout([ + box().apply({ + height: 20 + }), + box().apply({ + height: 40 + }), + box().apply({ + height: 60 + }), + box().apply({ + height: 40 + }), + box().apply({ + height: 20 + }), + ]).also(it => { + it.space = 20 + it.gravity = gravity().center() + }), + label("Horizontal Layout(Weight)"), + hlayout([ + boxStr('weight=1', 3).apply({ + layoutConfig: { + widthSpec: LayoutSpec.EXACTLY, + heightSpec: LayoutSpec.EXACTLY, + weight: 1, + } + }), + box(2), + box(4), + ]).apply({ + width: 200, + height: 30, + layoutConfig: { + widthSpec: LayoutSpec.EXACTLY, + heightSpec: LayoutSpec.EXACTLY, + }, + bgColor: Color.parse('#eeeeee'), + gravity: gravity().center(), + } as IHLayout), + hlayout([ + box(3), + boxStr('weight=1', 2).apply({ + layoutConfig: { + widthSpec: LayoutSpec.EXACTLY, + heightSpec: LayoutSpec.EXACTLY, + weight: 1, + } + }), + box(4), + ]).apply({ + width: 200, + height: 30, + layoutConfig: { + widthSpec: LayoutSpec.EXACTLY, + heightSpec: LayoutSpec.EXACTLY, + }, + bgColor: Color.parse('#eeeeee'), + gravity: gravity().center(), + } as IHLayout), + hlayout([ + box(3), + box(2), + boxStr('weight=1', 4).apply({ + layoutConfig: { + widthSpec: LayoutSpec.EXACTLY, + heightSpec: LayoutSpec.EXACTLY, + weight: 1, + } + }), + ]).apply({ + width: 200, + height: 30, + layoutConfig: { + widthSpec: LayoutSpec.EXACTLY, + heightSpec: LayoutSpec.EXACTLY, + }, + bgColor: Color.parse('#eeeeee'), + gravity: gravity().center(), + } as IHLayout), + hlayout([ + boxStr('weight=1', 3).apply({ + layoutConfig: { + widthSpec: LayoutSpec.EXACTLY, + heightSpec: LayoutSpec.EXACTLY, + weight: 1, + } + }), + boxStr('weight=1', 2).apply({ + layoutConfig: { + widthSpec: LayoutSpec.EXACTLY, + heightSpec: LayoutSpec.EXACTLY, + weight: 1, + } + }), + box(4), + ]).apply({ + width: 200, + height: 30, + layoutConfig: { + widthSpec: LayoutSpec.EXACTLY, + heightSpec: LayoutSpec.EXACTLY, + }, + bgColor: Color.parse('#eeeeee'), + gravity: gravity().center(), + } as IHLayout), + hlayout([ + boxStr('weight=1', 3).apply({ + layoutConfig: { + widthSpec: LayoutSpec.EXACTLY, + heightSpec: LayoutSpec.EXACTLY, + weight: 1, + } + }), + boxStr('weight=1', 2).apply({ + layoutConfig: { + widthSpec: LayoutSpec.EXACTLY, + heightSpec: LayoutSpec.EXACTLY, + weight: 1, + } + }), + boxStr('weight=1', 4).apply({ + layoutConfig: { + widthSpec: LayoutSpec.EXACTLY, + heightSpec: LayoutSpec.EXACTLY, + weight: 1, + } + }), + ]).apply({ + width: 200, + height: 30, + layoutConfig: { + widthSpec: LayoutSpec.EXACTLY, + heightSpec: LayoutSpec.EXACTLY, + }, + bgColor: Color.parse('#eeeeee'), + gravity: gravity().center(), + } as IHLayout), + ]).also(it => { + it.space = 20 + it.gravity = gravity().center() + }), + vlayout([ + label("Vertical Layout(Algin to Left)"), + vlayout([ + box(1).apply({ + width: 20 + }), + box(1).apply({ + width: 40 + }), + box(1).apply({ + width: 60 + }), + box(1).apply({ + width: 40 + }), + box(1).apply({ + width: 20 + }), + ]).apply({ + space: 20 + } as IVLayout), + label("Vertical Layout(Algin to Right)"), + vlayout([ + box(1).apply({ + width: 20 + }), + box(1).apply({ + width: 40 + }), + box(1).apply({ + width: 60 + }), + box(1).apply({ + width: 40 + }), + box(1).apply({ + width: 20 + }), + ]).apply({ + space: 20, + gravity: gravity().right(), + } as IVLayout), + label("Vertical Layout(Algin to Center)"), + vlayout([ + box(1).apply({ + width: 20 + }), + box(1).apply({ + width: 40 + }), + box(1).apply({ + width: 60 + }), + box(1).apply({ + width: 40 + }), + box(1).apply({ + width: 20 + }), + ]).apply({ + space: 20, + gravity: gravity().center(), + } as IVLayout), + label("Vertical Layout(Weight)"), + hlayout([ + + vlayout([ + boxStr('weight=1', 3).apply({ + layoutConfig: { + widthSpec: LayoutSpec.AT_MOST, + heightSpec: LayoutSpec.EXACTLY, + weight: 1, + }, + }), + box(2).apply({ + layoutConfig: { + widthSpec: LayoutSpec.AT_MOST, + heightSpec: LayoutSpec.EXACTLY, + } + }), + box(4).apply({ + layoutConfig: { + widthSpec: LayoutSpec.AT_MOST, + heightSpec: LayoutSpec.EXACTLY, + } + }), + ]).apply({ + width: 100, + height: 200, + layoutConfig: { + widthSpec: LayoutSpec.EXACTLY, + heightSpec: LayoutSpec.EXACTLY, + }, + bgColor: Color.parse('#eeeeee'), + gravity: gravity().center(), + } as IVLayout), + vlayout([ + box(3).apply({ + layoutConfig: { + widthSpec: LayoutSpec.AT_MOST, + heightSpec: LayoutSpec.EXACTLY, + }, + }), + boxStr('weight=1', 2).apply({ + layoutConfig: { + widthSpec: LayoutSpec.AT_MOST, + heightSpec: LayoutSpec.EXACTLY, + weight: 1, + } + }), + box(4).apply({ + layoutConfig: { + widthSpec: LayoutSpec.AT_MOST, + heightSpec: LayoutSpec.EXACTLY, + } + }), + ]).apply({ + width: 100, + height: 200, + layoutConfig: { + widthSpec: LayoutSpec.EXACTLY, + heightSpec: LayoutSpec.EXACTLY, + }, + bgColor: Color.parse('#eeeeee'), + gravity: gravity().center(), + } as IVLayout), + vlayout([ + box(3).apply({ + layoutConfig: { + widthSpec: LayoutSpec.AT_MOST, + heightSpec: LayoutSpec.EXACTLY, + }, + }), + box(2).apply({ + layoutConfig: { + widthSpec: LayoutSpec.AT_MOST, + heightSpec: LayoutSpec.EXACTLY, + }, + }), + boxStr('weight=1', 4).apply({ + layoutConfig: { + widthSpec: LayoutSpec.AT_MOST, + heightSpec: LayoutSpec.EXACTLY, + weight: 1, + } + }), + ]).apply({ + width: 100, + height: 200, + layoutConfig: { + widthSpec: LayoutSpec.EXACTLY, + heightSpec: LayoutSpec.EXACTLY, + }, + bgColor: Color.parse('#eeeeee'), + gravity: gravity().center(), + } as IVLayout), + vlayout([ + boxStr('weight=1', 3).apply({ + layoutConfig: { + widthSpec: LayoutSpec.AT_MOST, + heightSpec: LayoutSpec.EXACTLY, + weight: 1, + }, + }), + boxStr('weight=1', 2).apply({ + layoutConfig: { + widthSpec: LayoutSpec.AT_MOST, + heightSpec: LayoutSpec.EXACTLY, + weight: 1, + } + }), + box(4).apply({ + layoutConfig: { + widthSpec: LayoutSpec.AT_MOST, + heightSpec: LayoutSpec.EXACTLY, + } + }), + ]).apply({ + width: 100, + height: 200, + layoutConfig: { + widthSpec: LayoutSpec.EXACTLY, + heightSpec: LayoutSpec.EXACTLY, + }, + bgColor: Color.parse('#eeeeee'), + gravity: gravity().center(), + } as IVLayout), + vlayout([ + boxStr('weight=1', 3).apply({ + layoutConfig: { + widthSpec: LayoutSpec.AT_MOST, + heightSpec: LayoutSpec.EXACTLY, + weight: 1, + }, + }), + boxStr('weight=1', 2).apply({ + layoutConfig: { + widthSpec: LayoutSpec.AT_MOST, + heightSpec: LayoutSpec.EXACTLY, + weight: 1, + } + }), + boxStr('weight=1', 4).apply({ + layoutConfig: { + widthSpec: LayoutSpec.AT_MOST, + heightSpec: LayoutSpec.EXACTLY, + weight: 1, + } + }), + ]).apply({ + width: 100, + height: 200, + layoutConfig: { + widthSpec: LayoutSpec.EXACTLY, + heightSpec: LayoutSpec.EXACTLY, + }, + bgColor: Color.parse('#eeeeee'), + gravity: gravity().center(), + } as IVLayout), + ]).also(it => { + it.space = 20 + }), + + ]).also(it => { + it.space = 20 + it.gravity = gravity().left() + }) + ]).also(it => { + it.space = 20 + }), + ).also(it => { + it.layoutConfig = { + widthSpec: LayoutSpec.WRAP_CONTENT, + heightSpec: LayoutSpec.WRAP_CONTENT, + alignment: gravity().centerX(), + } + }) + .in(rootView) + } +} \ No newline at end of file diff --git a/iOS/Example/Example.xcodeproj/project.pbxproj b/iOS/Example/Example.xcodeproj/project.pbxproj index 2b1ea696..13db7cbe 100644 --- a/iOS/Example/Example.xcodeproj/project.pbxproj +++ b/iOS/Example/Example.xcodeproj/project.pbxproj @@ -51,7 +51,7 @@ C043B7BA79339ABA1CF46881 /* libPods-Example.a */ = {isa = PBXFileReference; explicitFileType = archive.ar; includeInIndex = 0; path = "libPods-Example.a"; sourceTree = BUILT_PRODUCTS_DIR; }; D751D19E97EF4EDD7588FEBE /* DemoVC.m */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.objc; path = DemoVC.m; sourceTree = ""; }; D751DDEC114E037231257E64 /* DemoVC.h */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.h; path = DemoVC.h; sourceTree = ""; }; - E2334AEB22E9D2060098A085 /* Example.app */ = {isa = PBXFileReference; explicitFileType = wrapper.application; includeInIndex = 0; path = Example.app; sourceTree = BUILT_PRODUCTS_DIR; }; + E2334AEB22E9D2060098A085 /* Doric Playground.app */ = {isa = PBXFileReference; explicitFileType = wrapper.application; includeInIndex = 0; path = "Doric Playground.app"; sourceTree = BUILT_PRODUCTS_DIR; }; E2334AEE22E9D2060098A085 /* AppDelegate.h */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.c.h; path = AppDelegate.h; sourceTree = ""; }; E2334AEF22E9D2060098A085 /* AppDelegate.m */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.c.objc; path = AppDelegate.m; sourceTree = ""; }; E2334AF122E9D2060098A085 /* ViewController.h */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.c.h; path = ViewController.h; sourceTree = ""; }; @@ -136,7 +136,7 @@ E2334AEC22E9D2060098A085 /* Products */ = { isa = PBXGroup; children = ( - E2334AEB22E9D2060098A085 /* Example.app */, + E2334AEB22E9D2060098A085 /* Doric Playground.app */, E2334B0322E9D2070098A085 /* ExampleTests.xctest */, E2334B0E22E9D2070098A085 /* ExampleUITests.xctest */, ); @@ -200,7 +200,7 @@ ); name = Example; productName = Example; - productReference = E2334AEB22E9D2060098A085 /* Example.app */; + productReference = E2334AEB22E9D2060098A085 /* Doric Playground.app */; productType = "com.apple.product-type.application"; }; E2334B0222E9D2070098A085 /* ExampleTests */ = { @@ -603,7 +603,7 @@ "@executable_path/Frameworks", ); PRODUCT_BUNDLE_IDENTIFIER = pub.doric.Example; - PRODUCT_NAME = "$(TARGET_NAME)"; + PRODUCT_NAME = "Doric Playground"; TARGETED_DEVICE_FAMILY = "1,2"; }; name = Debug; @@ -621,7 +621,7 @@ "@executable_path/Frameworks", ); PRODUCT_BUNDLE_IDENTIFIER = pub.doric.Example; - PRODUCT_NAME = "$(TARGET_NAME)"; + PRODUCT_NAME = "Doric Playground"; TARGETED_DEVICE_FAMILY = "1,2"; }; name = Release; diff --git a/iOS/Example/Example.xcodeproj/xcshareddata/xcschemes/Example.xcscheme b/iOS/Example/Example.xcodeproj/xcshareddata/xcschemes/Example.xcscheme index bbb277e8..fb23330f 100644 --- a/iOS/Example/Example.xcodeproj/xcshareddata/xcschemes/Example.xcscheme +++ b/iOS/Example/Example.xcodeproj/xcshareddata/xcschemes/Example.xcscheme @@ -15,7 +15,7 @@ @@ -27,6 +27,15 @@ selectedDebuggerIdentifier = "Xcode.DebuggerFoundation.Debugger.LLDB" selectedLauncherIdentifier = "Xcode.DebuggerFoundation.Launcher.LLDB" shouldUseLaunchSchemeArgsEnv = "YES"> + + + + @@ -49,17 +58,6 @@ - - - - - - - - diff --git a/js-framework/src/ui/view.ts b/js-framework/src/ui/view.ts index f473c9fd..893bf4dc 100644 --- a/js-framework/src/ui/view.ts +++ b/js-framework/src/ui/view.ts @@ -252,8 +252,16 @@ export abstract class View implements Modeling, IView { return this } + apply(config: IView) { + for (let key in config) { + Reflect.set(this, key, Reflect.get(config, key, config), this) + } + return this + } + in(group: Group) { group.addChild(this) + return this } nativeChannel(context: any, name: string) {