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
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
/* DreemGL is a collaboration between Teeming Society & Samsung Electronics, sponsored by Samsung and others.
 Copyright 2015-2016 Teeming Society. Licensed under the Apache License, Version 2.0 (the "License"); You may not use this file except in compliance with the License.
 You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0 Unless required by applicable law or agreed to in writing,
 software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 See the License for the specific language governing permissions and limitations under the License.*/

define.class("$server/composition",function(require,$ui$,textbox,checkbox,icon,button,label,view,screen,cadgrid,$widgets$,toolkit){

                this.render=function(){

                        return [
                                screen(
                                        {
                                                flexdirection:"row"
                                        },
                                        cadgrid({
                                                        name:"grid",
                                                        flex:3,
                                                        overflow:"scroll",
                                                        bgcolor:vec4(0.08853328227996826,0.11556218564510345,0.16508188843727112,1),
                                                        gridsize:8,
                                                        majorevery:5,
                                                        majorline:vec4(0.0,0.26,0.34,1),
                                                        minorline:vec4(0.15,0.15,0.12,1),
                                                        flexdirection:'row',
                                                        alignitems:'center',
                                                        justifycontent:'space-around'
                                        },
                                                view({flexdirection:"column"},
                                                        label({ text:"Vertical List",  marginbottom:20 }),
                                                        view({
                                                                        name:"simple",
                                                                        flex:0,
                                                                        width:100,
                                                                        height:150,
                                                                        bgcolor:"black",
                                                                        overflow:"scroll",
                                                                        flexdirection:"column"
                                                                },
                                                                label({text:"Some very, very long text"}),
                                                                label({text:"Some text"}),
                                                                label({text:"More text"}),
                                                                label({text:"Some text"}),
                                                                label({text:"MORE TEXT"}),
                                                                label({text:"More text"}),
                                                                label({text:"Some text"}),
                                                                label({text:"More text"}),
                                                                label({text:"MORE TEXT"}),
                                                                label({text:"Some text"}),
                                                                label({text:"More text"}),
                                                                label({text:"Some text"}),
                                                                label({text:"More text"}),
                                                                label({text:"Some text"}),
                                                                label({text:"More text"}),
                                                                label({text:"Even more text!"})
                                                        )
                                                ),
                                                view({flexdirection:"column"},
                                                        label({ text:"Horizontal List",  marginbottom:20 }),
                                                        view({
                                                                        name:"simple",
                                                                        flex:0,
                                                                        width:100,
                                                                        height:50,
                                                                        bgcolor:"black",
                                                                        overflow:"hscroll",
                                                                        flexdirection:"row"
                                                                },
                                                                icon({icon:"check"}),
                                                                icon({icon:"star"}),
                                                                icon({icon:"star"}),
                                                                icon({icon:"star-o"}),
                                                                icon({icon:"check"}),
                                                                icon({icon:"star"}),
                                                                icon({icon:"star"}),
                                                                icon({icon:"star-o"}),
                                                                icon({icon:"check"}),
                                                                icon({icon:"star"}),
                                                                icon({icon:"star"}),
                                                                icon({icon:"star-o"}),
                                                                icon({icon:"times"})
                                                        )
                                                ),
                                                view({flexdirection:"column"},
                                                        label({
                                                                text:"Adjust scroll position programatically",
                                                                marginbottom:20
                                                        }),

                                                        view({marginbottom:20},
                                                                button({
                                                                        text:"Up",
                                                                        click:function() {
                                                                                var box = this.find("smallbox");
                                                                                box.scroll = vec2(box.scroll[0], box.scroll[1] + 10);
                                                                                box.redraw()
                                                                        }
                                                                }),
                                                                button({
                                                                        text:"Down",
                                                                        marginleft:5,
                                                                        click:function() {
                                                                                var box = this.find("smallbox");
                                                                                box.scroll = vec2(box.scroll[0], box.scroll[1] - 10);
                                                                                box.redraw()
                                                                        }
                                                                }),
                                                                button({
                                                                        text:"Left",
                                                                        marginleft:5,
                                                                        click:function() {
                                                                                var box = this.find("smallbox");
                                                                                box.scroll = vec2(box.scroll[0] + 10, box.scroll[1]);
                                                                                box.redraw()
                                                                        }
                                                                }),
                                                                button({
                                                                        text:"Right",
                                                                        marginleft:5,
                                                                        click:function() {
                                                                                var box = this.find("smallbox");
                                                                                box.scroll = vec2(box.scroll[0] - 10, box.scroll[1]);
                                                                                box.redraw()
                                                                        }
                                                                })
                                                        ),

                                                        view({
                                                                        name:"smallbox",
                                                                        flex:0,
                                                                        width:100,
                                                                        height:150,
                                                                        bgcolor:"black",
                                                                        overflow:"hidden",
                                                                        flexdirection:"column"
                                                                },
                                                                label({text:"Some very, very long text"}),
                                                                label({text:"Some text"}),
                                                                label({text:"More text"}),
                                                                label({text:"Some text"}),
                                                                label({text:"More text"}),
                                                                label({text:"MORE TEXT"}),
                                                                label({text:"More text"}),
                                                                label({text:"Some text"}),
                                                                label({text:"More text"}),
                                                                label({text:"MORE TEXT"}),
                                                                label({text:"Some text"}),
                                                                label({text:"More text"}),
                                                                label({text:"Some text"}),
                                                                label({text:"More text"}),
                                                                label({text:"Even more text!"})
                                                        )
                                                )
                                        )
                                )
                        ]
                }
        }
);