1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
|
define.class("$server/composition",function($ui$, screen, icon, label, view, cadgrid, $widgets$, table) {
this.render = function() {
return [
screen(
cadgrid({
name:"grid",
bgcolor:"#4e4e4e",
gridsize:10,
majorevery:5,
majorline:vec4(0.4,0.4,0.4,1),
minorline:vec4(0.2,0.2,0.2,1),
alignself:'stretch',
flexdirection:'row',
alignitems:"center",
justifycontent:'space-around'
},
view({flexdirection:"column"},
label({text:"Columns w/styled column", marginbottom:30}),
table({
width:400,
height:100,
columns:5,
alignsection:"center",
style:{
rowcol: {
borderwidth:vec4(0,1,0,0),
bordercolor:"white"
},
rowcol_column3: {
borderwidth:vec4(1,1,0,0),
},
rowcol_column2: {
bgcolor:vec4(1,1,1,0.2),
borderwidth:vec4(0,0,5,5),
bordercolor:"white",
paddingtop:20,
width:30
}
}
},
label({text:"col1"}),
label({text:"col2"}),
label({text:"col3"}),
label({text:"col4"}),
label({text:"col5"}),
label({text:"col1"}),
label({text:"col2"}),
label({text:"col3"}),
label({text:"col4"}),
label({text:"col5"})
)
),
view({flexdirection:"column"},
label({text:"Rows w/styled row", marginbottom:30}),
table({
name:"foo",
width:400,
height:200,
rows:3,
alignsection:"center",
justifysection:"space-around",
style:{
rowcol: {
borderwidth:vec4(0,0,0,1),
bordercolor:"white"
},
rowcol_row2: {
borderwidth:vec4(0,0, 1,1),
},
rowcol_row1: {
bgcolor:vec4(1,1,1,0.2),
borderwidth:vec4(5,5,0,0),
bordercolor:"white",
height:30
}
}
},
label({text:"row1"}),
label({text:"row2"}),
label({text:"row3"}),
label({text:"row1"}),
label({text:"row2"}),
label({text:"row3"}),
label({text:"row1"}),
label({text:"row2"}),
label({text:"row3"}),
label({text:"row1"}),
label({text:"row2"}),
label({text:"row3"})
)
)
)
)
]
}
}
)
|