forked from evoluteur/evolutility-ui-jquery
-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathcontroller.html
More file actions
199 lines (142 loc) · 6.94 KB
/
Copy pathcontroller.html
File metadata and controls
199 lines (142 loc) · 6.94 KB
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
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width,initial-scale=1">
<link href="../dist/css/dependencies.min.css" rel="stylesheet" />
<link href="../dist/css/demo.css" rel="stylesheet" />
<link href="../dist/css/evolutility.css" rel="stylesheet" />
<link rel="icon" type="image/png" href="../favicon.png">
<title>Controller :: Evolutility</title>
</head>
<body>
<div class="evo-header">
<div class="evo-logo"><a href="../index.html"><span>evol</span>utility<span>.js</span></a></div>
<ul class="evo-head-links">
<li><a href="../demo/index.html">demos</a></li>
<li><a href="../doc/index.html" class="sel">doc</a></li>
<li class="evo-link2">
<ul class="evo-head-links2">
<li><a href="views.html">views</a></li>
<li><a href="ui-model.html">ui-model</a></li>
<li><a class="sel" href="controller.html">controller</a>
<ul>
<li><a href="#app">app</a></li>
<li><a href="#toolbar">toolbar</a></li>
</ul>
</li>
</ul>
</li>
<li class="spaced"><a href="https://github.com/evoluteur/evolutility" target="_new">GitHub</a></li>
</ul>
<div class="clearfix"></div>
</div>
<div class="evo-title2">
<h1>Controller</h1>
</div>
<div class="evo-content2">
<p>Still under construction, Evolutility controller is not the usual "C" in "MVC".
Very likely you will want to write your own (at least for now).
</p>
<p>With Evolutility you can decide what to automate and what to code yourself.</p>
<ul>
<li>You can instantiate any view directly and write your own controller to manage it.</li>
<li>You can instantiate a toolbar which will manage all views for a specific entity (Backbone model and collection).</li>
<li>You can instantiate an app which will manage several toolbars which will each manage a set of views.</li>
</ul>
<p><a href="#app">App</a> and <a href="#toolbar">Toolbar</a> use the same UI-models as the views.</p>
<a name="app" class="evo-anchor"> </a>
<section>
<h2>App</h2>
<p>The class "Evol.App" handles routing for all views for several entities.
For each entity it creates a toolbar which manages the views for that entity.
</p>
<p><pre>
<code>new Evol.App({
el: $('#evol'),
uiModels: [
uiModels.todo,
uiModels.contact,
uiModels.winecellar,
uiModels.comics
]
});</code>
</pre></p>
<section>
<h3>Options</h3>
<p><strong>el</strong>: DOM element to hold the views.</p>
<p><strong>uiModels</strong>: Array of UI-models.</p>
<p><strong>style</strong>: Bootstrap style for panels (possible values: "panel-default" (grey), "panel-primary" (dark blue), "panel-success" (green), "panel-info" (light blue), "panel-warning" (yellow), "panel-danger" (red)).</p>
<p><strong>useRouter</strong>: Set to true for Evolutility to automatically handle routing.</p>
<p><strong>pageSize</strong>: Page size for list and cards views.</p>
</section>
<section>
<h3>Methods</h3>
<p><strong>setRoute(id, triggerRoute)</strong>: Change the route and display the corresponding view.</p>
<p><strong>setEntity(entityName, view, options)</strong>: Change the entity and display the corresponding entity in the currently selected view.</p>
</section>
<section>
<h3>Events</h3>
<p>None (for now).
</section>
</section>
<a name="toolbar" class="evo-anchor"> </a>
<section>
<h2>Toolbar</h2>
<p>The toolbar manages all views for a specific UI-model. It displays different options based on the context.</p>
<p>Toolbar for One model:</p>
<p><img class="pixEvoView shadow"src="screenshots/toolbar-one.gif"></p>
<p>Toolbar for Many models:</p>
<p><img class="pixEvoView shadow" src="screenshots/toolbar-many.gif"></p>
<p><pre>
<code>new Evol.Toolbar(
el: $('#Evol'),
uiModel: uiModel,
model: myModel,
collection: myCollection,
titleSelector: '#title'
);</code>
</pre></p>
<section>
<h3>Options</h3>
<p><strong>defaultViewOne</strong>: Default view when looking at a single model (possible values "browse", "edit", "mini", json").</p>
<p><strong>defaultViewMany</strong>: Default view when looking at a collection (possible values "list", "cards", "bubbles", charts").</p>
<p><strong>model</strong>: Backbone model for the toolbar to manage.</p>
<p><strong>collection</strong>: Backbone collection for the toolbar to manage.</p>
<p><strong>readonly</strong>: Provides read-only interaction (no update or delete).</p>
<p><strong>style</strong>: Bootstrap style for panels (possible values: "panel-default" (grey), "panel-primary" (dark blue), "panel-success" (green), "panel-info" (light blue), "panel-warning" (yellow), "panel-danger" (red)).</p>
<p><strong>titleSelector</strong>: Selector for the title element outside of the view (example: '#title').</p>
<p><strong>pageSize</strong>: Page size for list and cards views.</p>
</section>
<section>
<h3>Methods</h3>
<p><strong>render()</strong>: Render the toolbar and the default view.</p>
<p><strong>setData(data)</strong>: Set data.</p>
<p><strong>getData()</strong>: Get data.</p>
<p><strong>setView(viewName)</strong>: Set the current view (possible values: "browse", edit", "mini", "list"...).</p>
<p><strong>showFilter()</strong>: Expend the filter panel.</p>
<p><strong>browse(direction)</strong>: Moves to the next or previous record.</p>
<p>s<strong>SaveItem(saveAndAdd)</strong>: Save the currently edited record (if it passes validation).</p>
<p><strong>newItem()</strong>: Create a new record.</p>
<p><strong>deleteItem()</strong>: Delete the currently edited or browsed record.</p>
<p><strong>clearMessage()</strong>: Clear the header message.</p>
<p><strong>setMessage()</strong>: Set the value of the header message.</p>
</section>
<section>
<h3>Events</h3>
<p><strong>item.added, item.saved, item.deleted</strong>: Triggered when a record is added/saved or deleted.</p>
<p><strong>filter.change</strong>: Triggered when filter conditions are changed.</p>
<p><strong>toolbar.X</strong>: Triggered when a toolbar button is clicked. X = toolbar button Ids in [
'new', 'del', 'filter', 'export',
'browse', 'edit', 'mini', 'json',
'list', 'cards', 'bubbles', 'charts',
'prev', 'next'
].</p>
</section>
</section>
<p><br/>evolutility.js at <a href="https://github.com/evoluteur/evolutility" target="download">GitHub</a></p>
<div class="footer">© 2015 Olivier Giulieri</div>
</div>
</body>
</html>