Skip to content

Commit 9aeadea

Browse files
evoluteurevoluteur
committed
Read me - Changed sample UI-model to "graphic novels".
1 parent b46283b commit 9aeadea

1 file changed

Lines changed: 75 additions & 42 deletions

File tree

‎README.md‎

Lines changed: 75 additions & 42 deletions
Original file line numberDiff line numberDiff line change
@@ -163,79 +163,112 @@ More Views will be added in the future (thinking of Summary, Import, Mass update
163163

164164
Views are not defined in templates but configured with a UI-model using [vocabulary](http://evoluteur.github.io/evolutility/doc/ui-model.html) with words like "field", "panel" and "tab" rather than "INPUT" and "DIV" to describe UI elements.
165165

166-
Here is the UI model used to configure all views for the ["To Do" app demo](http://evoluteur.github.io/evolutility/demo/index.html#todo/list):
166+
Here is the UI-model used to configure all views for the ["Graphic Novels" app demo](http://evoluteur.github.io/evolutility/demo/index.html#comics/cards):
167167

168168
```javascript
169-
var UIModel_todo = {
170-
id: 'todo',
171-
label: 'To Do',
172-
name: 'task',
173-
namePlural: 'tasks',
174-
icon: 'todo.gif',
175-
fnTitle:'title',
169+
170+
var uiModels_comics = {
171+
id: 'comics',
172+
label: 'Graphic Novels',
173+
name: 'graphic novel serie',
174+
namePlural: 'graphic novel series',
175+
fnTitle: 'title',
176+
fnBadge: function(m){
177+
var hNb=m.get('haveNb'),
178+
sNb=m.get('serieNb');
179+
return (hNb==sNb)?hNb:hNb+'/'+sNb;
180+
},
176181
elements: [
177182
{
178-
type: 'panel', label: 'Task', width: 62,
183+
type: 'panel', label: 'Serie', width: 70,
179184
elements: [
180185
{
181-
id: 'title', type: 'text', label: 'Title',
182-
required: true, maxLength: 255,
183-
width: 100, inMany: true
184-
},
185-
{
186-
id: 'duedate', type: 'date', label: 'Due Date',
186+
id: 'title', attribute: 'title', type: 'text', label: 'Title', required: true,
187+
maxLength: 255,
187188
width: 62, inMany: true
188189
},
189190
{
190-
id: 'category', type: 'lov', label: 'Category',
191-
width: 38, inMany: true,
191+
id: 'genre', attribute: 'genre', type: 'lov', label: 'Genre', width: 38, inMany: true,
192192
list: [
193-
{id: 'home', text: 'Home'},
194-
{id: 'work', text: 'Work'},
195-
{id: 'fun', text: 'Fun'},
196-
{id: 'others', text: 'Others'},
197-
{id: 'misc', text: 'Misc.'}
193+
{id: 'adv', text: 'Adventure'},
194+
{id: 'conte', text: 'Fairy tale'},
195+
{id: 'eros', text: 'Erotic'},
196+
{id: 'fantasy', text: 'Fantastic'},
197+
{id: 'hf', text: 'Heroic Fantasy'},
198+
{id: 'hist', text: 'Historic'},
199+
{id: 'humor', text: 'Humor'},
200+
{id: 'nocat', text: 'One of a kind'},
201+
{id: 'youth', text: 'Youth'},
202+
{id: 'pol', text: 'Thriller'},
203+
{id: 'sf', text: 'Science-fiction'},
204+
{id: 'sh', text: 'Super Heros'},
205+
{id: 'wwest', text: 'Western'}
198206
]
199-
}
200-
]
201-
},
202-
{
203-
type: 'panel', label: 'Status', width: 38,
204-
elements: [
207+
},
205208
{
206-
id: 'priority', type: 'lov', label: 'Priority', required: true,
207-
width: 100, inMany: true,
209+
id: 'authors', attribute: 'authors', type: 'text', width: 62, inMany: true,
210+
label: 'Authors'
211+
},
212+
{
213+
id: 'language', attribute: 'language', type: 'lov', label: 'Language', width: 38, inMany: false,
208214
list: [
209-
{id: '1', text: '1 - ASAP'},
210-
{id: '2', text: '2 - Urgent'},
211-
{id: '3', text: '3 - Important'},
212-
{id: '4', text: '4 - Medium'},
213-
{id: '5', text: '5 - Low'}
215+
{id: 'FR', text: 'French'},
216+
{id: 'EN', text: 'English'}
214217
]
215218
},
216219
{
217-
id: 'complete', type: 'boolean', label: 'Complete',
218-
width: 100, inMany: true
220+
id: 'serieNb', attribute: 'serieNb', type: 'integer', width: 15, inMany: false,
221+
label: 'Albums', inCharts:false
222+
},
223+
{
224+
id: 'haveNb', attribute: 'haveNb', type: 'integer', width: 15, inMany: false,
225+
label: 'Owned', inCharts:false
226+
},
227+
{
228+
id: 'have', attribute: 'have', type: 'text', width: 32, inMany: false,
229+
label: 'have'
230+
},
231+
{
232+
id: 'complete', attribute: 'complete', type: 'boolean', width: 19, inMany: true,
233+
label: 'Complete', labelFalse:'Incomplete', labelTrue:'Complete'
234+
},
235+
{
236+
id: 'finished', attribute: 'finished', type: 'boolean', width: 19, inMany: true,
237+
label: 'Finished', labelTrue:'Finished', labelFalse:'Unfinished', css:'cBlue'
238+
},
239+
{
240+
id:'amazon', label:'Amazon', type:'formula', width:100, css:'evol-ellipsis',
241+
formula:function(m){
242+
var link=m.get('language')=='FR' ?
243+
'http://www.amazon.fr/s/ref=sr_nr_n_1?keywords='
244+
:'http://www.amazon.com/s/ref=nb_sb_noss?field-keywords=';
245+
link+=encodeURI(m.get('title')+' '+m.get('authors'));
246+
return '<a target="a" href="'+link+'">'+link+'</a>';
247+
}
248+
},
249+
{
250+
id: 'notes', attribute: 'notes', type: 'textmultiline', label: 'Notes', maxLength: 1000,
251+
width: 100, height: 6, inMany: false
219252
}
220253
]
221254
},
222255
{
223-
type: 'panel', label: 'Notes', width: 100,
256+
type: 'panel', label: 'Cover', width: 30,
224257
elements: [
225258
{
226-
id: 'notes', type: 'textmultiline', label: 'Notes',
227-
maxLength: 1000,
228-
width: 100, height: 6, inMany: false
259+
id: 'pix', attribute: 'pix', type: 'image', width: 100, inMany: true,
260+
label: 'Cover'
229261
}
230262
]
231263
}
232264
]
233265
};
266+
234267
```
235268

236269
See [UI-Model documentation](http://evoluteur.github.io/evolutility/doc/ui-model.html) for the UI vocabulary available (structure of UI-models or metamodel).
237270

238-
UI Models for the demo apps:
271+
UI-Models for the demo apps:
239272
[To Do list](http://github.com/evoluteur/evolutility/blob/master/js/ui-models/apps/todo.js),
240273
[AddressBook](http://github.com/evoluteur/evolutility/blob/master/js/ui-models/apps/contacts.js),
241274
[Wine Cellar](http://github.com/evoluteur/evolutility/blob/master/js/ui-models/apps/winecellar.js),

0 commit comments

Comments
 (0)