tianzixuan/Doric
Archived
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

feat:add LayoutDemo

Browse Source
This commit is contained in:
pengfei.zhou 2019-11-19 21:22:26 +08:00
parent f205a4769a
commit 1b23dbd653
7 changed files with 538 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
Android/app/src/main/java/pub/doric/demo/DemoActivity.java
View File

@ -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);
}

49
Android/app/src/main/java/pub/doric/demo/MainActivity.java
View File

@ -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<String> 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<RecyclerView.ViewHolder> {
@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<RecyclerView.ViewHolder> {
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);

1
demo/index.ts
View File

@ -4,4 +4,5 @@ export default [
'src/ListDemo',
'src/ScrollerDemo',
'src/SliderDemo',
'src/LayoutDemo',
]

464
demo/src/LayoutDemo.ts Normal file
View File

@ -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)
}
}

10
iOS/Example/Example.xcodeproj/project.pbxproj
View File

@ -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 = "<group>"; };
D751DDEC114E037231257E64 /* DemoVC.h */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.h; path = DemoVC.h; sourceTree = "<group>"; };
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 = "<group>"; };
E2334AEF22E9D2060098A085 /* AppDelegate.m */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.c.objc; path = AppDelegate.m; sourceTree = "<group>"; };
E2334AF122E9D2060098A085 /* ViewController.h */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.c.h; path = ViewController.h; sourceTree = "<group>"; };
@ -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;

28
iOS/Example/Example.xcodeproj/xcshareddata/xcschemes/Example.xcscheme
View File

@ -15,7 +15,7 @@
<BuildableReference
BuildableIdentifier = "primary"
BlueprintIdentifier = "E2334AEA22E9D2060098A085"
BuildableName = "Example.app"
BuildableName = "Doric Playground.app"
BlueprintName = "Example"
ReferencedContainer = "container:Example.xcodeproj">
</BuildableReference>
@ -27,6 +27,15 @@
selectedDebuggerIdentifier = "Xcode.DebuggerFoundation.Debugger.LLDB"
selectedLauncherIdentifier = "Xcode.DebuggerFoundation.Launcher.LLDB"
shouldUseLaunchSchemeArgsEnv = "YES">
<MacroExpansion>
<BuildableReference
BuildableIdentifier = "primary"
BlueprintIdentifier = "E2334AEA22E9D2060098A085"
BuildableName = "Doric Playground.app"
BlueprintName = "Example"
ReferencedContainer = "container:Example.xcodeproj">
</BuildableReference>
</MacroExpansion>
<Testables>
<TestableReference
skipped = "NO">
@ -49,17 +58,6 @@
</BuildableReference>
</TestableReference>
</Testables>
<MacroExpansion>
<BuildableReference
BuildableIdentifier = "primary"
BlueprintIdentifier = "E2334AEA22E9D2060098A085"
BuildableName = "Example.app"
BlueprintName = "Example"
ReferencedContainer = "container:Example.xcodeproj">
</BuildableReference>
</MacroExpansion>
<AdditionalOptions>
</AdditionalOptions>
</TestAction>
<LaunchAction
buildConfiguration = "Debug"
@ -76,13 +74,11 @@
<BuildableReference
BuildableIdentifier = "primary"
BlueprintIdentifier = "E2334AEA22E9D2060098A085"
BuildableName = "Example.app"
BuildableName = "Doric Playground.app"
BlueprintName = "Example"
ReferencedContainer = "container:Example.xcodeproj">
</BuildableReference>
</BuildableProductRunnable>
<AdditionalOptions>
</AdditionalOptions>
</LaunchAction>
<ProfileAction
buildConfiguration = "Release"
@ -95,7 +91,7 @@
<BuildableReference
BuildableIdentifier = "primary"
BlueprintIdentifier = "E2334AEA22E9D2060098A085"
BuildableName = "Example.app"
BuildableName = "Doric Playground.app"
BlueprintName = "Example"
ReferencedContainer = "container:Example.xcodeproj">
</BuildableReference>

8
js-framework/src/ui/view.ts
View File

@ -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) {