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

feat:rename bgcolor to backgroundColor

Browse Source
This commit is contained in:
pengfei.zhou 2019-12-02 19:09:20 +08:00
parent 751a385f38
commit 489ac668cc
22 changed files with 85 additions and 86 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
Android/doric/src/main/java/pub/doric/shader/ViewNode.java
View File

@ -48,7 +48,6 @@ import com.github.pengfeizhou.jscore.JSObject;
import com.github.pengfeizhou.jscore.JSValue; import com.github.pengfeizhou.jscore.JSValue;
import com.github.pengfeizhou.jscore.JavaValue; import com.github.pengfeizhou.jscore.JavaValue;
import java.util.HashMap;
import java.util.LinkedList; import java.util.LinkedList;
/** /**
@ -179,17 +178,17 @@ public abstract class ViewNode<T extends View> extends DoricContextHolder {
setY(prop.asNumber().toFloat()); setY(prop.asNumber().toFloat());
} }
break; break;
case "bgColor": case "backgroundColor":
if (isAnimating()) { if (isAnimating()) {
ObjectAnimator animator = ObjectAnimator.ofInt( ObjectAnimator animator = ObjectAnimator.ofInt(
this, this,
name, name,
getBgColor(), getBackgroundColor(),
prop.asNumber().toInt()); prop.asNumber().toInt());
animator.setEvaluator(new ArgbEvaluator()); animator.setEvaluator(new ArgbEvaluator());
addAnimator(animator); addAnimator(animator);
} else { } else {
setBgColor(prop.asNumber().toInt()); setBackgroundColor(prop.asNumber().toInt());
} }
break; break;
case "onClick": case "onClick":
@ -540,7 +539,7 @@ public abstract class ViewNode<T extends View> extends DoricContextHolder {
} }
@DoricMethod @DoricMethod
public int getBgColor() { public int getBackgroundColor() {
if (mView.getBackground() instanceof ColorDrawable) { if (mView.getBackground() instanceof ColorDrawable) {
return ((ColorDrawable) mView.getBackground()).getColor(); return ((ColorDrawable) mView.getBackground()).getColor();
} }
@ -548,7 +547,7 @@ public abstract class ViewNode<T extends View> extends DoricContextHolder {
} }
@DoricMethod @DoricMethod
public void setBgColor(int color) { public void setBackgroundColor(int color) {
mView.setBackgroundColor(color); mView.setBackgroundColor(color);
} }

8
demo/src/AnimatorDemo.ts
View File

@ -6,7 +6,7 @@ function thisLabel(str: string) {
text: str, text: str,
width: 60, width: 60,
height: 50, height: 50,
bgColor: colors[0], backgroundColor: colors[0],
textSize: 15, textSize: 15,
textColor: Color.WHITE, textColor: Color.WHITE,
layoutConfig: layoutConfig().exactly(), layoutConfig: layoutConfig().exactly(),
@ -34,7 +34,7 @@ class AnimatorDemo extends Panel {
view.width = view.height = 20 view.width = view.height = 20
view.x = view.y = 0 view.x = view.y = 0
view.rotation = 0 view.rotation = 0
view.bgColor = colors[2] view.backgroundColor = colors[2]
view.corners = 0 view.corners = 0
view.scaleX = 1 view.scaleX = 1
view.scaleY = 1 view.scaleY = 1
@ -102,7 +102,7 @@ class AnimatorDemo extends Panel {
onClick: () => { onClick: () => {
animate(this)({ animate(this)({
animations: () => { animations: () => {
view.bgColor = colors[(idx++) % colors.length] view.backgroundColor = colors[(idx++) % colors.length]
}, },
duration: 1000, duration: 1000,
}); });
@ -174,7 +174,7 @@ class AnimatorDemo extends Panel {
view, view,
]).apply({ ]).apply({
layoutConfig: layoutConfig().atmost(), layoutConfig: layoutConfig().atmost(),
bgColor: colors[1].alpha(0.3 * 255), backgroundColor: colors[1].alpha(0.3 * 255),
}), }),
]).apply({ ]).apply({
layoutConfig: layoutConfig().atmost(), layoutConfig: layoutConfig().atmost(),

4
demo/src/ComplicatedAnimations.ts
View File

@ -6,7 +6,7 @@ function thisLabel(str: string) {
text: str, text: str,
width: 80, width: 80,
height: 30, height: 30,
bgColor: colors[0], backgroundColor: colors[0],
textSize: 10, textSize: 10,
textColor: Color.WHITE, textColor: Color.WHITE,
layoutConfig: layoutConfig().exactly(), layoutConfig: layoutConfig().exactly(),
@ -128,7 +128,7 @@ class AnimationDemo extends Panel {
view, view,
]).apply({ ]).apply({
layoutConfig: layoutConfig().atmost(), layoutConfig: layoutConfig().atmost(),
bgColor: colors[1].alpha(0.3 * 255), backgroundColor: colors[1].alpha(0.3 * 255),
}), }),
]).apply({ ]).apply({
layoutConfig: layoutConfig().atmost(), layoutConfig: layoutConfig().atmost(),

2
demo/src/Counter.ts
View File

@ -59,7 +59,7 @@ class CounterView extends ViewHolder<CountModel> {
offsetY: 10, offsetY: 10,
} }
it.corners = 20 it.corners = 20
it.bgColor = Color.parse('#ff00ff') it.backgroundColor = Color.parse('#ff00ff')
})) }))
root.addChild((new Image).also(iv => { root.addChild((new Image).also(iv => {

4
demo/src/EffectsDemo.ts
View File

@ -6,7 +6,7 @@ import { colors } from "./utils";
function box(idx = 0) { function box(idx = 0) {
return (new Stack).also(it => { return (new Stack).also(it => {
it.width = it.height = 20 it.width = it.height = 20
it.bgColor = colors[idx || 0] it.backgroundColor = colors[idx || 0]
}) })
} }
@ -15,7 +15,7 @@ function boxStr(str: string, idx = 0) {
it.width = it.height = 20 it.width = it.height = 20
it.text = str it.text = str
it.textColor = Color.WHITE it.textColor = Color.WHITE
it.bgColor = colors[idx || 0] it.backgroundColor = colors[idx || 0]
}) })
} }

2
demo/src/FlowLayoutDemo.ts
View File

@ -23,7 +23,7 @@ class FlowDemo extends Panel {
rowSpace: 10, rowSpace: 10,
renderItem: (idx) => { renderItem: (idx) => {
return new FlowLayoutItem().apply({ return new FlowLayoutItem().apply({
bgColor: colors[idx % colors.length], backgroundColor: colors[idx % colors.length],
height: 50 + (idx % 3) * 20, height: 50 + (idx % 3) * 20,
layoutConfig: layoutConfig().w(LayoutSpec.AT_MOST), layoutConfig: layoutConfig().w(LayoutSpec.AT_MOST),
}).also(it => { }).also(it => {

2
demo/src/ImageDemo.ts
View File

@ -13,7 +13,7 @@ class ImageDemo extends Panel {
layoutConfig: layoutConfig().w(LayoutSpec.AT_MOST), layoutConfig: layoutConfig().w(LayoutSpec.AT_MOST),
textSize: 30, textSize: 30,
textColor: Color.WHITE, textColor: Color.WHITE,
bgColor: colors[5], backgroundColor: colors[5],
textAlignment: gravity().center(), textAlignment: gravity().center(),
height: 50, height: 50,
}), }),

24
demo/src/LayoutDemo.ts
View File

@ -14,7 +14,7 @@ const colors = [
function box(idx = 0) { function box(idx = 0) {
return (new Stack).also(it => { return (new Stack).also(it => {
it.width = it.height = 20 it.width = it.height = 20
it.bgColor = Color.parse(colors[idx || 0]) it.backgroundColor = Color.parse(colors[idx || 0])
}) })
} }
function boxStr(str: string, idx = 0) { function boxStr(str: string, idx = 0) {
@ -22,7 +22,7 @@ function boxStr(str: string, idx = 0) {
it.width = it.height = 20 it.width = it.height = 20
it.text = str it.text = str
it.textColor = Color.parse('#ffffff') it.textColor = Color.parse('#ffffff')
it.bgColor = Color.parse(colors[idx || 0]) it.backgroundColor = Color.parse(colors[idx || 0])
}) })
} }
function label(str: string) { function label(str: string) {
@ -117,7 +117,7 @@ class LayoutDemo extends Panel {
widthSpec: LayoutSpec.EXACTLY, widthSpec: LayoutSpec.EXACTLY,
heightSpec: LayoutSpec.EXACTLY, heightSpec: LayoutSpec.EXACTLY,
}, },
bgColor: Color.parse('#eeeeee'), backgroundColor: Color.parse('#eeeeee'),
gravity: gravity().center(), gravity: gravity().center(),
} as IHLayout), } as IHLayout),
hlayout([ hlayout([
@ -137,7 +137,7 @@ class LayoutDemo extends Panel {
widthSpec: LayoutSpec.EXACTLY, widthSpec: LayoutSpec.EXACTLY,
heightSpec: LayoutSpec.EXACTLY, heightSpec: LayoutSpec.EXACTLY,
}, },
bgColor: Color.parse('#eeeeee'), backgroundColor: Color.parse('#eeeeee'),
gravity: gravity().center(), gravity: gravity().center(),
} as IHLayout), } as IHLayout),
hlayout([ hlayout([
@ -157,7 +157,7 @@ class LayoutDemo extends Panel {
widthSpec: LayoutSpec.EXACTLY, widthSpec: LayoutSpec.EXACTLY,
heightSpec: LayoutSpec.EXACTLY, heightSpec: LayoutSpec.EXACTLY,
}, },
bgColor: Color.parse('#eeeeee'), backgroundColor: Color.parse('#eeeeee'),
gravity: gravity().center(), gravity: gravity().center(),
} as IHLayout), } as IHLayout),
hlayout([ hlayout([
@ -183,7 +183,7 @@ class LayoutDemo extends Panel {
widthSpec: LayoutSpec.EXACTLY, widthSpec: LayoutSpec.EXACTLY,
heightSpec: LayoutSpec.EXACTLY, heightSpec: LayoutSpec.EXACTLY,
}, },
bgColor: Color.parse('#eeeeee'), backgroundColor: Color.parse('#eeeeee'),
gravity: gravity().center(), gravity: gravity().center(),
} as IHLayout), } as IHLayout),
hlayout([ hlayout([
@ -215,7 +215,7 @@ class LayoutDemo extends Panel {
widthSpec: LayoutSpec.EXACTLY, widthSpec: LayoutSpec.EXACTLY,
heightSpec: LayoutSpec.EXACTLY, heightSpec: LayoutSpec.EXACTLY,
}, },
bgColor: Color.parse('#eeeeee'), backgroundColor: Color.parse('#eeeeee'),
gravity: gravity().center(), gravity: gravity().center(),
} as IHLayout), } as IHLayout),
]).also(it => { ]).also(it => {
@ -315,7 +315,7 @@ class LayoutDemo extends Panel {
widthSpec: LayoutSpec.EXACTLY, widthSpec: LayoutSpec.EXACTLY,
heightSpec: LayoutSpec.EXACTLY, heightSpec: LayoutSpec.EXACTLY,
}, },
bgColor: Color.parse('#eeeeee'), backgroundColor: Color.parse('#eeeeee'),
gravity: gravity().center(), gravity: gravity().center(),
} as IVLayout), } as IVLayout),
vlayout([ vlayout([
@ -345,7 +345,7 @@ class LayoutDemo extends Panel {
widthSpec: LayoutSpec.EXACTLY, widthSpec: LayoutSpec.EXACTLY,
heightSpec: LayoutSpec.EXACTLY, heightSpec: LayoutSpec.EXACTLY,
}, },
bgColor: Color.parse('#eeeeee'), backgroundColor: Color.parse('#eeeeee'),
gravity: gravity().center(), gravity: gravity().center(),
} as IVLayout), } as IVLayout),
vlayout([ vlayout([
@ -375,7 +375,7 @@ class LayoutDemo extends Panel {
widthSpec: LayoutSpec.EXACTLY, widthSpec: LayoutSpec.EXACTLY,
heightSpec: LayoutSpec.EXACTLY, heightSpec: LayoutSpec.EXACTLY,
}, },
bgColor: Color.parse('#eeeeee'), backgroundColor: Color.parse('#eeeeee'),
gravity: gravity().center(), gravity: gravity().center(),
} as IVLayout), } as IVLayout),
vlayout([ vlayout([
@ -406,7 +406,7 @@ class LayoutDemo extends Panel {
widthSpec: LayoutSpec.EXACTLY, widthSpec: LayoutSpec.EXACTLY,
heightSpec: LayoutSpec.EXACTLY, heightSpec: LayoutSpec.EXACTLY,
}, },
bgColor: Color.parse('#eeeeee'), backgroundColor: Color.parse('#eeeeee'),
gravity: gravity().center(), gravity: gravity().center(),
} as IVLayout), } as IVLayout),
vlayout([ vlayout([
@ -438,7 +438,7 @@ class LayoutDemo extends Panel {
widthSpec: LayoutSpec.EXACTLY, widthSpec: LayoutSpec.EXACTLY,
heightSpec: LayoutSpec.EXACTLY, heightSpec: LayoutSpec.EXACTLY,
}, },
bgColor: Color.parse('#eeeeee'), backgroundColor: Color.parse('#eeeeee'),
gravity: gravity().center(), gravity: gravity().center(),
} as IVLayout), } as IVLayout),
]).also(it => { ]).also(it => {

8
demo/src/ListDemo.ts
View File

@ -14,7 +14,7 @@ class ListPanel extends Panel {
}, },
textSize: 30, textSize: 30,
textColor: Color.parse("#535c68"), textColor: Color.parse("#535c68"),
bgColor: Color.parse("#dff9fb"), backgroundColor: Color.parse("#dff9fb"),
textAlignment: gravity().center(), textAlignment: gravity().center(),
height: 50, height: 50,
}), }),
@ -64,7 +64,7 @@ class ListPanel extends Panel {
} }
} }
it.gravity = gravity().center() it.gravity = gravity().center()
it.bgColor = colors[(idx + offset) % colors.length] it.backgroundColor = colors[(idx + offset) % colors.length]
let clicked = 0 let clicked = 0
it.onClick = () => { it.onClick = () => {
counter.text = `Item Clicked ${++clicked}` counter.text = `Item Clicked ${++clicked}`
@ -107,8 +107,8 @@ class ListPanel extends Panel {
widthSpec: LayoutSpec.AT_MOST, widthSpec: LayoutSpec.AT_MOST,
heightSpec: LayoutSpec.AT_MOST, heightSpec: LayoutSpec.AT_MOST,
} }
it.bgColor = Color.WHITE it.backgroundColor = Color.WHITE
}).in(rootView) }).in(rootView)
refreshView.bgColor = Color.YELLOW refreshView.backgroundColor = Color.YELLOW
} }
} }

20
demo/src/ModalDemo.ts
View File

@ -10,7 +10,7 @@ class ModalDemo extends Panel {
layoutConfig: layoutConfig().w(LayoutSpec.AT_MOST), layoutConfig: layoutConfig().w(LayoutSpec.AT_MOST),
textSize: 30, textSize: 30,
textColor: Color.WHITE, textColor: Color.WHITE,
bgColor: colors[1], backgroundColor: colors[1],
textAlignment: Gravity.Center, textAlignment: Gravity.Center,
height: 50, height: 50,
}), }),
@ -18,7 +18,7 @@ class ModalDemo extends Panel {
label('Click me').apply({ label('Click me').apply({
width: 200, width: 200,
height: 50, height: 50,
bgColor: colors[0], backgroundColor: colors[0],
textSize: 30, textSize: 30,
textColor: Color.WHITE, textColor: Color.WHITE,
layoutConfig: layoutConfig().exactly(), layoutConfig: layoutConfig().exactly(),
@ -30,7 +30,7 @@ class ModalDemo extends Panel {
label('Click me').apply({ label('Click me').apply({
width: 200, width: 200,
height: 50, height: 50,
bgColor: colors[0], backgroundColor: colors[0],
textSize: 30, textSize: 30,
textColor: Color.WHITE, textColor: Color.WHITE,
layoutConfig: layoutConfig().exactly(), layoutConfig: layoutConfig().exactly(),
@ -43,7 +43,7 @@ class ModalDemo extends Panel {
label('Click me').apply({ label('Click me').apply({
width: 200, width: 200,
height: 50, height: 50,
bgColor: colors[0], backgroundColor: colors[0],
textSize: 30, textSize: 30,
textColor: Color.WHITE, textColor: Color.WHITE,
layoutConfig: layoutConfig().exactly(), layoutConfig: layoutConfig().exactly(),
@ -56,14 +56,14 @@ class ModalDemo extends Panel {
layoutConfig: layoutConfig().w(LayoutSpec.AT_MOST), layoutConfig: layoutConfig().w(LayoutSpec.AT_MOST),
textSize: 30, textSize: 30,
textColor: Color.WHITE, textColor: Color.WHITE,
bgColor: colors[2], backgroundColor: colors[2],
textAlignment: Gravity.Center, textAlignment: Gravity.Center,
height: 50, height: 50,
}), }),
label('Click me').apply({ label('Click me').apply({
width: 200, width: 200,
height: 50, height: 50,
bgColor: colors[0], backgroundColor: colors[0],
textSize: 30, textSize: 30,
textColor: Color.WHITE, textColor: Color.WHITE,
layoutConfig: layoutConfig().exactly(), layoutConfig: layoutConfig().exactly(),
@ -82,14 +82,14 @@ class ModalDemo extends Panel {
layoutConfig: layoutConfig().w(LayoutSpec.AT_MOST), layoutConfig: layoutConfig().w(LayoutSpec.AT_MOST),
textSize: 30, textSize: 30,
textColor: Color.WHITE, textColor: Color.WHITE,
bgColor: colors[3], backgroundColor: colors[3],
textAlignment: Gravity.Center, textAlignment: Gravity.Center,
height: 50, height: 50,
}), }),
label('Click me').apply({ label('Click me').apply({
width: 200, width: 200,
height: 50, height: 50,
bgColor: colors[0], backgroundColor: colors[0],
textSize: 30, textSize: 30,
textColor: Color.WHITE, textColor: Color.WHITE,
layoutConfig: layoutConfig().exactly(), layoutConfig: layoutConfig().exactly(),
@ -113,14 +113,14 @@ class ModalDemo extends Panel {
layoutConfig: layoutConfig().w(LayoutSpec.AT_MOST), layoutConfig: layoutConfig().w(LayoutSpec.AT_MOST),
textSize: 30, textSize: 30,
textColor: Color.WHITE, textColor: Color.WHITE,
bgColor: colors[4], backgroundColor: colors[4],
textAlignment: Gravity.Center, textAlignment: Gravity.Center,
height: 50, height: 50,
}), }),
label('Click me').apply({ label('Click me').apply({
width: 200, width: 200,
height: 50, height: 50,
bgColor: colors[0], backgroundColor: colors[0],
textSize: 30, textSize: 30,
textColor: Color.WHITE, textColor: Color.WHITE,
layoutConfig: layoutConfig().exactly(), layoutConfig: layoutConfig().exactly(),

10
demo/src/NavbarDemo.ts
View File

@ -9,7 +9,7 @@ class NavbarDemo extends Panel {
label('isHidden').apply({ label('isHidden').apply({
width: 200, width: 200,
height: 50, height: 50,
bgColor: colors[0], backgroundColor: colors[0],
textSize: 30, textSize: 30,
textColor: Color.WHITE, textColor: Color.WHITE,
layoutConfig: layoutConfig().exactly(), layoutConfig: layoutConfig().exactly(),
@ -22,7 +22,7 @@ class NavbarDemo extends Panel {
label('setHidden').apply({ label('setHidden').apply({
width: 200, width: 200,
height: 50, height: 50,
bgColor: colors[0], backgroundColor: colors[0],
textSize: 30, textSize: 30,
textColor: Color.WHITE, textColor: Color.WHITE,
layoutConfig: layoutConfig().exactly(), layoutConfig: layoutConfig().exactly(),
@ -37,7 +37,7 @@ class NavbarDemo extends Panel {
label('setTitle').apply({ label('setTitle').apply({
width: 200, width: 200,
height: 50, height: 50,
bgColor: colors[0], backgroundColor: colors[0],
textSize: 30, textSize: 30,
textColor: Color.WHITE, textColor: Color.WHITE,
layoutConfig: layoutConfig().exactly(), layoutConfig: layoutConfig().exactly(),
@ -51,7 +51,7 @@ class NavbarDemo extends Panel {
label('setBgColor').apply({ label('setBgColor').apply({
width: 200, width: 200,
height: 50, height: 50,
bgColor: colors[0], backgroundColor: colors[0],
textSize: 30, textSize: 30,
textColor: Color.WHITE, textColor: Color.WHITE,
layoutConfig: layoutConfig().exactly(), layoutConfig: layoutConfig().exactly(),
@ -65,7 +65,7 @@ class NavbarDemo extends Panel {
label('Pop').apply({ label('Pop').apply({
width: 200, width: 200,
height: 50, height: 50,
bgColor: colors[0], backgroundColor: colors[0],
textSize: 30, textSize: 30,
textColor: Color.WHITE, textColor: Color.WHITE,
layoutConfig: layoutConfig().exactly(), layoutConfig: layoutConfig().exactly(),

6
demo/src/NavigatorDemo.ts
View File

@ -9,7 +9,7 @@ class NaivgatorDemo extends Panel {
layoutConfig: layoutConfig().w(LayoutSpec.AT_MOST), layoutConfig: layoutConfig().w(LayoutSpec.AT_MOST),
textSize: 30, textSize: 30,
textColor: Color.WHITE, textColor: Color.WHITE,
bgColor: colors[1], backgroundColor: colors[1],
textAlignment: gravity().center(), textAlignment: gravity().center(),
height: 50, height: 50,
}), }),
@ -20,7 +20,7 @@ class NaivgatorDemo extends Panel {
'NetworkDemo', 'ScrollerDemo', 'SliderDemo', 'Snake', 'StorageDemo'].map(e => 'NetworkDemo', 'ScrollerDemo', 'SliderDemo', 'Snake', 'StorageDemo'].map(e =>
label(e).apply({ label(e).apply({
height: 50, height: 50,
bgColor: colors[0], backgroundColor: colors[0],
textSize: 30, textSize: 30,
textColor: Color.WHITE, textColor: Color.WHITE,
layoutConfig: layoutConfig().exactly().w(LayoutSpec.AT_MOST), layoutConfig: layoutConfig().exactly().w(LayoutSpec.AT_MOST),
@ -32,7 +32,7 @@ class NaivgatorDemo extends Panel {
label('POP').apply({ label('POP').apply({
width: 200, width: 200,
height: 50, height: 50,
bgColor: colors[0], backgroundColor: colors[0],
textSize: 30, textSize: 30,
textColor: Color.WHITE, textColor: Color.WHITE,
layoutConfig: layoutConfig().exactly(), layoutConfig: layoutConfig().exactly(),

2
demo/src/NetworkDemo.ts
View File

@ -9,7 +9,7 @@ class NetworkDemo extends Panel {
label('Click me').apply({ label('Click me').apply({
width: 200, width: 200,
height: 50, height: 50,
bgColor: colors[0], backgroundColor: colors[0],
textSize: 30, textSize: 30,
textColor: Color.WHITE, textColor: Color.WHITE,
layoutConfig: layoutConfig().exactly(), layoutConfig: layoutConfig().exactly(),

6
demo/src/PopoverDemo.ts
View File

@ -9,7 +9,7 @@ class PopoverDemo extends Panel {
label('Popover').apply({ label('Popover').apply({
width: 200, width: 200,
height: 50, height: 50,
bgColor: colors[0], backgroundColor: colors[0],
textSize: 30, textSize: 30,
textColor: Color.WHITE, textColor: Color.WHITE,
layoutConfig: layoutConfig().exactly(), layoutConfig: layoutConfig().exactly(),
@ -17,14 +17,14 @@ class PopoverDemo extends Panel {
popover(context).show(text({ popover(context).show(text({
width: 200, width: 200,
height: 50, height: 50,
bgColor: colors[0], backgroundColor: colors[0],
textColor: Color.WHITE, textColor: Color.WHITE,
layoutConfig: layoutConfig().exactly().a(Gravity.Center), layoutConfig: layoutConfig().exactly().a(Gravity.Center),
text: "This is PopOver Window", text: "This is PopOver Window",
}).also(v => { }).also(v => {
let idx = 0 let idx = 0
v.onClick = () => { v.onClick = () => {
v.bgColor = colors[(++idx) % colors.length] v.backgroundColor = colors[(++idx) % colors.length]
} }
modal(context).toast('Dismissed after 3 seconds') modal(context).toast('Dismissed after 3 seconds')
setTimeout(() => { setTimeout(() => {

12
demo/src/RefreshableDemo.ts
View File

@ -40,7 +40,7 @@ class RefreshableDemo extends Panel {
label('start Refresh').apply({ label('start Refresh').apply({
width: 300, width: 300,
height: 50, height: 50,
bgColor: colors[0], backgroundColor: colors[0],
textSize: 30, textSize: 30,
textColor: Color.WHITE, textColor: Color.WHITE,
layoutConfig: layoutConfig().exactly(), layoutConfig: layoutConfig().exactly(),
@ -51,7 +51,7 @@ class RefreshableDemo extends Panel {
label('stop Refresh').apply({ label('stop Refresh').apply({
width: 300, width: 300,
height: 50, height: 50,
bgColor: colors[0], backgroundColor: colors[0],
textSize: 30, textSize: 30,
textColor: Color.WHITE, textColor: Color.WHITE,
layoutConfig: layoutConfig().exactly(), layoutConfig: layoutConfig().exactly(),
@ -63,7 +63,7 @@ class RefreshableDemo extends Panel {
label('Enable Refresh').apply({ label('Enable Refresh').apply({
width: 300, width: 300,
height: 50, height: 50,
bgColor: colors[0], backgroundColor: colors[0],
textSize: 30, textSize: 30,
textColor: Color.WHITE, textColor: Color.WHITE,
layoutConfig: layoutConfig().exactly(), layoutConfig: layoutConfig().exactly(),
@ -75,7 +75,7 @@ class RefreshableDemo extends Panel {
label('Disable Refresh').apply({ label('Disable Refresh').apply({
width: 300, width: 300,
height: 50, height: 50,
bgColor: colors[0], backgroundColor: colors[0],
textSize: 30, textSize: 30,
textColor: Color.WHITE, textColor: Color.WHITE,
layoutConfig: layoutConfig().exactly(), layoutConfig: layoutConfig().exactly(),
@ -86,7 +86,7 @@ class RefreshableDemo extends Panel {
label('Rotate self').apply({ label('Rotate self').apply({
width: 300, width: 300,
height: 50, height: 50,
bgColor: colors[0], backgroundColor: colors[0],
textSize: 30, textSize: 30,
textColor: Color.WHITE, textColor: Color.WHITE,
layoutConfig: layoutConfig().exactly(), layoutConfig: layoutConfig().exactly(),
@ -101,7 +101,7 @@ class RefreshableDemo extends Panel {
space: 10, space: 10,
} as IVLayout)) } as IVLayout))
}).apply({ }).apply({
bgColor: Color.YELLOW backgroundColor: Color.YELLOW
}).in(rootView) }).in(rootView)
} }
} }

6
demo/src/ScrollerDemo.ts
View File

@ -12,7 +12,7 @@ class ScrollerPanel extends Panel {
layoutConfig: layoutConfig().exactly(), layoutConfig: layoutConfig().exactly(),
width: 300, width: 300,
height: 500, height: 500,
bgColor: Color.RED, backgroundColor: Color.RED,
}), }),
scroller( scroller(
vlayout(new Array(100).fill(1).map(e => label('Scroll Content'))) vlayout(new Array(100).fill(1).map(e => label('Scroll Content')))
@ -20,14 +20,14 @@ class ScrollerPanel extends Panel {
layoutConfig: layoutConfig().exactly(), layoutConfig: layoutConfig().exactly(),
width: 300, width: 300,
height: 500, height: 500,
bgColor: Color.BLUE, backgroundColor: Color.BLUE,
}) })
]) ])
) )
.apply({ .apply({
layoutConfig: layoutConfig().atmost().h(LayoutSpec.EXACTLY), layoutConfig: layoutConfig().atmost().h(LayoutSpec.EXACTLY),
height: 500, height: 500,
bgColor: Color.YELLOW, backgroundColor: Color.YELLOW,
}) })
.in(rootView) .in(rootView)
} }

4
demo/src/SliderDemo.ts
View File

@ -24,7 +24,7 @@ class SliderPanel extends Panel {
}, },
textSize: 30, textSize: 30,
textColor: Color.WHITE, textColor: Color.WHITE,
bgColor: colors[1], backgroundColor: colors[1],
textAlignment: gravity().center(), textAlignment: gravity().center(),
height: 50, height: 50,
}), }),
@ -38,7 +38,7 @@ class SliderPanel extends Panel {
})).also(it => { })).also(it => {
let start = idx let start = idx
it.onClick = () => { it.onClick = () => {
it.bgColor = (colors[++start % colors.length]) it.backgroundColor = (colors[++start % colors.length])
} }
}) })
}, },

16
demo/src/Snake.ts
View File

@ -144,7 +144,7 @@ class SnakeView extends ViewHolder<SnakeModel> {
right?: Text right?: Text
build(root: Group): void { build(root: Group): void {
root.bgColor = Color.parse('#000000') root.backgroundColor = Color.parse('#000000')
vlayout([ vlayout([
text({ text({
text: "Snake", text: "Snake",
@ -160,7 +160,7 @@ class SnakeView extends ViewHolder<SnakeModel> {
}, },
}), }),
(new Stack).also(panel => { (new Stack).also(panel => {
panel.bgColor = Color.parse('#00ff00') panel.backgroundColor = Color.parse('#00ff00')
this.panel = panel this.panel = panel
}), }),
hlayout([ hlayout([
@ -188,7 +188,7 @@ class SnakeView extends ViewHolder<SnakeModel> {
text: "↑", text: "↑",
textSize: 30, textSize: 30,
textAlignment: new Gravity().center(), textAlignment: new Gravity().center(),
bgColor: Color.parse('#ffff00'), backgroundColor: Color.parse('#ffff00'),
layoutConfig: { layoutConfig: {
widthSpec: LayoutSpec.EXACTLY, widthSpec: LayoutSpec.EXACTLY,
heightSpec: LayoutSpec.EXACTLY, heightSpec: LayoutSpec.EXACTLY,
@ -207,7 +207,7 @@ class SnakeView extends ViewHolder<SnakeModel> {
text: "←", text: "←",
textSize: 30, textSize: 30,
textAlignment: new Gravity().center(), textAlignment: new Gravity().center(),
bgColor: Color.parse('#ffff00'), backgroundColor: Color.parse('#ffff00'),
layoutConfig: { layoutConfig: {
widthSpec: LayoutSpec.EXACTLY, widthSpec: LayoutSpec.EXACTLY,
heightSpec: LayoutSpec.EXACTLY, heightSpec: LayoutSpec.EXACTLY,
@ -219,7 +219,7 @@ class SnakeView extends ViewHolder<SnakeModel> {
text: "↓", text: "↓",
textSize: 30, textSize: 30,
textAlignment: new Gravity().center(), textAlignment: new Gravity().center(),
bgColor: Color.parse('#ffff00'), backgroundColor: Color.parse('#ffff00'),
layoutConfig: { layoutConfig: {
widthSpec: LayoutSpec.EXACTLY, widthSpec: LayoutSpec.EXACTLY,
heightSpec: LayoutSpec.EXACTLY, heightSpec: LayoutSpec.EXACTLY,
@ -231,7 +231,7 @@ class SnakeView extends ViewHolder<SnakeModel> {
text: "→", text: "→",
textSize: 30, textSize: 30,
textAlignment: new Gravity().center(), textAlignment: new Gravity().center(),
bgColor: Color.parse('#ffff00'), backgroundColor: Color.parse('#ffff00'),
layoutConfig: { layoutConfig: {
widthSpec: LayoutSpec.EXACTLY, widthSpec: LayoutSpec.EXACTLY,
heightSpec: LayoutSpec.EXACTLY, heightSpec: LayoutSpec.EXACTLY,
@ -292,9 +292,9 @@ class SnakeView extends ViewHolder<SnakeModel> {
this.panel.addChild(item) this.panel.addChild(item)
} }
if (index === nodes.length - 1) { if (index === nodes.length - 1) {
item.bgColor = Color.parse('#ffff00') item.backgroundColor = Color.parse('#ffff00')
} else { } else {
item.bgColor = Color.parse('#ff0000') item.backgroundColor = Color.parse('#ff0000')
} }
item.x = e.x * 10 item.x = e.x * 10
item.y = e.y * 10 item.y = e.y * 10

10
demo/src/StorageDemo.ts
View File

@ -20,7 +20,7 @@ class StorageDemo extends Panel {
layoutConfig: layoutConfig().w(LayoutSpec.AT_MOST), layoutConfig: layoutConfig().w(LayoutSpec.AT_MOST),
textSize: 30, textSize: 30,
textColor: Color.WHITE, textColor: Color.WHITE,
bgColor: colors[1], backgroundColor: colors[1],
textAlignment: gravity().center(), textAlignment: gravity().center(),
height: 50, height: 50,
}), }),
@ -29,14 +29,14 @@ class StorageDemo extends Panel {
layoutConfig: layoutConfig().w(LayoutSpec.AT_MOST), layoutConfig: layoutConfig().w(LayoutSpec.AT_MOST),
textSize: 20, textSize: 20,
textColor: Color.WHITE, textColor: Color.WHITE,
bgColor: colors[3], backgroundColor: colors[3],
textAlignment: gravity().center(), textAlignment: gravity().center(),
height: 50, height: 50,
}).also(it => this.stored = it), }).also(it => this.stored = it),
label('store a value').apply({ label('store a value').apply({
width: 200, width: 200,
height: 50, height: 50,
bgColor: colors[0], backgroundColor: colors[0],
textSize: 30, textSize: 30,
textColor: Color.WHITE, textColor: Color.WHITE,
layoutConfig: layoutConfig().exactly(), layoutConfig: layoutConfig().exactly(),
@ -57,7 +57,7 @@ class StorageDemo extends Panel {
label('remove value').apply({ label('remove value').apply({
width: 200, width: 200,
height: 50, height: 50,
bgColor: colors[0], backgroundColor: colors[0],
textSize: 30, textSize: 30,
textColor: Color.WHITE, textColor: Color.WHITE,
layoutConfig: layoutConfig().exactly(), layoutConfig: layoutConfig().exactly(),
@ -70,7 +70,7 @@ class StorageDemo extends Panel {
label('clear values').apply({ label('clear values').apply({
width: 200, width: 200,
height: 50, height: 50,
bgColor: colors[0], backgroundColor: colors[0],
textSize: 30, textSize: 30,
textColor: Color.WHITE, textColor: Color.WHITE,
layoutConfig: layoutConfig().exactly(), layoutConfig: layoutConfig().exactly(),

6
demo/src/utils.ts
View File

@ -24,7 +24,7 @@ export function label(str: string) {
export function box(idx = 0) { export function box(idx = 0) {
return (new Stack).also(it => { return (new Stack).also(it => {
it.width = it.height = 20 it.width = it.height = 20
it.bgColor = colors[idx || 0] it.backgroundColor = colors[idx || 0]
}) })
} }
export function boxStr(str: string, idx = 0) { export function boxStr(str: string, idx = 0) {
@ -32,7 +32,7 @@ export function boxStr(str: string, idx = 0) {
it.width = it.height = 20 it.width = it.height = 20
it.text = str it.text = str
it.textColor = Color.WHITE it.textColor = Color.WHITE
it.bgColor = colors[idx || 0] it.backgroundColor = colors[idx || 0]
}) })
} }
@ -42,7 +42,7 @@ export function title(str: string) {
layoutConfig: layoutConfig().w(LayoutSpec.AT_MOST), layoutConfig: layoutConfig().w(LayoutSpec.AT_MOST),
textSize: 30, textSize: 30,
textColor: Color.WHITE, textColor: Color.WHITE,
bgColor: colors[1], backgroundColor: colors[1],
textAlignment: gravity().center(), textAlignment: gravity().center(),
height: 50, height: 50,
}) })

4
iOS/Pod/Classes/Shader/DoricViewNode.m
View File

@ -176,7 +176,7 @@ - (void)blendView:(UIView *)view forPropName:(NSString *)name propValue:(id)prop
view.x = [(NSNumber *) prop floatValue]; view.x = [(NSNumber *) prop floatValue];
} else if ([name isEqualToString:@"y"]) { } else if ([name isEqualToString:@"y"]) {
view.y = [(NSNumber *) prop floatValue]; view.y = [(NSNumber *) prop floatValue];
} else if ([name isEqualToString:@"bgColor"]) { } else if ([name isEqualToString:@"backgroundColor"]) {
view.backgroundColor = DoricColor(prop); view.backgroundColor = DoricColor(prop);
} else if ([name isEqualToString:@"alpha"]) { } else if ([name isEqualToString:@"alpha"]) {
view.alpha = [prop floatValue]; view.alpha = [prop floatValue];
@ -590,7 +590,7 @@ - (CABasicAnimation *)parseChangeable:(NSDictionary *)params fillMode:(NSNumber
animation.keyPath = @"transform.rotation.z"; animation.keyPath = @"transform.rotation.z";
animation.fromValue = @([params[@"fromValue"] floatValue] * M_PI); animation.fromValue = @([params[@"fromValue"] floatValue] * M_PI);
animation.toValue = @([params[@"toValue"] floatValue] * M_PI); animation.toValue = @([params[@"toValue"] floatValue] * M_PI);
} else if ([@"bgColor" isEqualToString:key]) { } else if ([@"backgroundColor" isEqualToString:key]) {
animation.keyPath = @"backgroundColor"; animation.keyPath = @"backgroundColor";
animation.fromValue = params[@"fromValue"]; animation.fromValue = params[@"fromValue"];
animation.toValue = params[@"toValue"]; animation.toValue = params[@"toValue"];

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

@ -28,7 +28,7 @@ export function Property(target: Object, propKey: string) {
export interface IView { export interface IView {
width?: number width?: number
height?: number height?: number
bgColor?: Color | GradientColor backgroundColor?: Color | GradientColor
corners?: number | { leftTop?: number; rightTop?: number; leftBottom?: number; rightBottom?: number } corners?: number | { leftTop?: number; rightTop?: number; leftBottom?: number; rightBottom?: number }
border?: { width: number; color: Color; } border?: { width: number; color: Color; }
shadow?: { color: Color; opacity: number; radius: number; offsetX: number; offsetY: number } shadow?: { color: Color; opacity: number; radius: number; offsetX: number; offsetY: number }
@ -85,7 +85,7 @@ export abstract class View implements Modeling, IView {
y: number = 0 y: number = 0
@Property @Property
bgColor?: Color | GradientColor backgroundColor?: Color | GradientColor
@Property @Property
corners?: number | { leftTop?: number; rightTop?: number; leftBottom?: number; rightBottom?: number } corners?: number | { leftTop?: number; rightTop?: number; leftBottom?: number; rightBottom?: number }