Screencast

• open /dmx and show list of example applications
• open the Hello World application

---

open the /de.deepamehta.webclient in a new tab and create a simple hello script

types.coffee

define -> start: ($parent) -> $parent.html 'it works'`

---

create the Type List application

• Name: Type List
• Path: types
• Description: a simple topic type list

---

reload /dmx and open the Type List application

---

create a list template and use the jade plugin to render it

types.jade

ul
  li Note
  li Person

types.coffee

define ['jade!types'], (view) ->

  start: ($parent) -> $parent.html view()

---

reload the app to view the list

---

add a style with LESS

types.less

.types > li {
  list-style: square inside;
}

types.jade

ul.types
  li Note
  li Person

types.coffee

define ['jade!types', 'less!types'], (view) ->

  start: ($parent) -> $parent.html view()

---

reload the app to view the unstyled list

---

reveal the script type and copy the icon source to create a list style

types.less

.types > li {
  list-style: square inside url('/de.deepamehta.webclient/images/box-blue.png');
}

---

reload the app to view the styled list

---

use jQuery and knockout to bind a string array

types.coffee

define ['jQuery', 'knockout', 'jade!types', 'less!types'],
($, ko, view) ->

  start: ($parent) ->

    $parent.html view()
    $ul = $('ul.types')[0]
    ko.applyBindings types: ['Note', 'Script', 'Person'], $ul

types.jade

ul.types(data-bind='foreach: types')
  li(data-bind='text: $data')

---

reload the app to check that the knockout binding works

---

use the dm4-webclient RESTClient to get a list of actual types

types.coffee

define ['jQuery', 'knockout', 'jade!types', 'less!types'],
($, ko, view) ->

  start: ($parent) ->

    $parent.html view()
    $ul = $('ul.types')[0]
    
    dm4.get_all_topic_types (types) ->
        ko.applyBindings types: types, $ul

types.jade

ul.types(data-bind='foreach: types')
  li(data-bind='text: value')

---

reload the app to to view the real type list

---

add click handler and sort results

types.jade

ul.types(data-bind='foreach: types')
  li(data-bind='text: value, click: $parent.open')

types.coffee

define ['jQuery', 'knockout', 'dm4rest', 'jade!types', 'less!types'],
($, ko, dm4, view) ->

  start: ($parent) ->

    $parent.html view()
    $ul = $('ul.types')[0]
    
    dm4.get_all_topic_types (types) ->
        ko.applyBindings
            types: types.sort (a, b) -> a.value.localeCompare b.value
            open: (type) -> alert type.uri
        , $ul