This top-level object provides wrapper methods for each type of HTML DOM event.

This allows producing an AttributeEntry from the corresponding event handler implemented as a Ceylon function type.

How to use it

It is used when creating the ceylon.html tree that will be rendered by a Template. Event Handlers can thus be added in the attributes parameter of the Html Node.

function buttonWitOnClickHandler() => Button {
     attributes = [
        event.click((evt) {
            doAnActionOnEvent(evt)
        });
     ];
     "Standard Button"
}

function buttonWitCustomEventHandler() => Button {
     attributes = [
        event.custom("ontouchmove", (evt) {
            doAnActionOnEvent(evt)
        });
     ];
     "Touchable Button"
}

Helper object to provide the Mithril key feature.

Key provided from an already-known value

 List<String> list;
 ...
 Table {
     TBody {
         for (i->item in list.indexed)
         Tr {
             attributes = [ key.set(i.string) ];
             item
         }
     }
 };

Key provided as a function

 class Person(shared String firstName, shared String lastName) {
     shared String key() => "``firstName`` $$ ``lastName``";
 }
 Set<Person> persons = nothing;

 Table {
     TBody {
         for (person in persons)
         Tr {
             attributes = [ key.build(person.key) ];
         }
     }
 };

This top-level object provides wrapper methods for each Mithril lifecycle event.

This allows producing an AttributeEntry from the corresponding event handler implemented as a Ceylon function type.

How to use it

It is used when creating the ceylon.html tree that will be rendered by a Template. Event Handlers can thus be added in the attributes parameter of the Html Node.

Example

 Pre {
     Code { clazz = "ceylon";
         attributes = [
             lifecycle.create((vnode) {
                 dynamic {
                     hljs.highlightBlock(vnode.dom);
                 }
             })
         ];
         sourceCode
     }
 }

In this example, the highlight.js highlighting is applied to the content of the Code Html node, each time the corresponding Dom node is created.

Function that should be called as part of the Html Node attributes to be able to retrieve the current dom node from a Html Node through the dom() function.

Example

 button = Button {
     attributes = [
         attachDom(),
         event.click((evt) {
             value domButton = dom(button);
             if (is HtmlDomElement domButton) {
                 value style = domButton.getAttribute("style");
                 if(exists style, style == "background-color: yellow;") {
                     domButton.setAttribute("style", "background-color: blue;");
                 } else {
                     domButton.setAttribute("style", "background-color: yellow;");
                 }
             }
         })
     ];

     "Change color"
 };
 return button;

Utility function to help construct the binder when building new types of BoundValues

Function that retrieves the current dom node from a Html Node, assuming that it was previously requested with the attachDom() function

Activates a component, enabling it to autoredraw on user events.

This a wrapper on the corresponding Mithril API: m.mount()

Creates a virtual node (VNode).

This a wrapper on the main hyperscript function of the Mithril API: m()

Wrapper on a JS object to be used inside the Template.build() function

A BoundValue provides a way to associate a value with an Html node, and bidirectionally bind it to a propety of the html node.

The BoundValue interface :

• is based on a WatchedValue
• defines a binder that is an AttributeEntry and that should be passed to the attributes of the Html node it is bound to.

Several implementations are provided for the most common use-cases: TextAreaValue, InputTextValue, InputCheckedStatus, SelectValue

How it works

Consider the following code :

   object satisfies Template {
     value textArea = TextAreaValue(ExistingWatchedValue<String>(""));

     build(JS attrs) =>
       Main {
         Div {
           TextArea {
             rows = 30;
             cols = 200;
             attributes = [ textArea.binder ];
           },
           Button {
             attributes = [
                 event.click((evt) {
                     // Displays the content of `TextArea`
                     window.alert("text = ``textArea.val``");

                     // Updates the content of `TextArea`
                     textArea.val += " - suffix";
                 })
             ];
             "Display"
           }
         }
       }
   }

Each time the text of the TextArea Html element is changed by the user, it is automatically updated in the textArea.val value.

Similarly, each time the textArea.val is assigned a new text value, it updates the text value of the TextArea Html element.

Ceylon binding for a Mithril Component

Wrapper around the Mithril RouteResolver

Wrapper around the Mithril m.route methods

This is the main interface that allows integrating ceylon.html and Mithril.

This interface allows defining a Mithril Component based on a Html tree returned as a Node by the build formal method.

To create a new Mithril component, simply implement the Template.build method to return a ceylon.html Node element.

This ceylon.html-based Mithril component can then be attached to any Dom element in the DOM tree with the mount function.

Example

     shared void run() {
         assert (exists root = document.body);
         mount {
             parent = root;

             object component satisfies Template {
                 variable value count = 0;
                 build() =>
                     Main {
                         Div {
                             H1 {
                                 "Thrillon: Mix Mithril and Ceylon Html DSL !"
                             },
                             Button {
                                 attributes = [
                                     event.click((evt) {
                                         count ++;
                                     })
                                 ];

                                 "``count`` clicks"
                             }
                         }
                     };
             }
         };
     }

Ceylon binding for a Mithril VNode

A BoundValue that can be used with a Input Html node and bound to its checked boolean attribute.

Example

   object satisfies Template {
     value checked = InputTextValue(InputType.checkbox, ExistingWatchedValue<Boolean>(false));

     build(JS attrs) =>
       Main {
         Div {
           Input { type = checked.type; attributes = [ checked.binder ]; }
           Button {
             attributes = [
                 event.click((evt) {
                     // Use the input checked status to display a message
                     window.alert(if (checked.val) then "It is checked" else "is it not checked");
                 })
             ];
             "Display"
           }
         }
       }
   }

A BoundValue that can be used with a Input Html node and bound to its value text attribute.

Example

   object satisfies Template {
     value name = InputTextValue(InputType.text, WatchedValue<String>(null));

     build(JS attrs) =>
       Main {
         Div {
           Input { type = name.type; attributes = [ name.binder ]; }
           Button {
             attributes = [
                 event.click((evt) {
                     // Displays the content of the input text
                     window.alert("Name = ``name.val else "<null>"``");
                 })
             ];
             "Display"
           }
         }
       }
   }

A BoundValue that can be used with a Select Html node.

Example

   object satisfies Template {
     value select = SelectValue(ExistingWatchedValue<String>("option1"));

     build(JS attrs) =>
       Main {
         Div {
           Select {
             attributes = [ select.binder ];

             Option { val = "option1"; "Option 1" },
             Option { val = "option2"; "Option 2" },
             Option { val = "option3"; "Option 3" }
           },
           Button {
             attributes = [
                 event.click((evt) {
                     // Displays the chosen option
                     window.alert("Current choice = ``select.val``");
                 })
             ];
             "Display"
           }
         }
       }
   }

A BoundValue that can be used with a TextArea Html node. Its usage is shown as an example in the main documentation of BoundValue

A WatchedValue allows defining values that will trigger a Mithril redraw event (and finally a DOM update) whenever it is changed.

How it works

If you have such a watched value:

WatchedValue<Time> theTime = WatchedValue<Time>(null) ;

And this code inside a Template:

   Label {
     "Time is : ``theTime.val else ""``"
   }

Then, in any place in your Ceylon code, if you set the time value with the following code:

   theTime.val = now().time();

This will update the content of the HTML label defined above.

More details

• There is a variant named ExistingWatchedValue that can be used when the value is known from the begining, and cannot be null.

• If the watched value is a list for example, you may want to call an operation on this list to change it. For this you can use the change method like this:

value watchedList = ExistingWatchedValue<List<String>(ArrayList<String>());
...
watchedList.change((l) => l.add("aString");

• You can use the optional onChange parameter to add some other action to be done after the value is changed, and before DOM redraw operation is triggered.

• If you need to set the value without triggering a DOM redraw (inside an event handler for example), just use the setQuietly method.

This class is a wrapper on a Mithril component that can be inserted inside a ceylon.html tree structure as any other HTML Node

This top-level object provides wrapper methods for each type of HTML DOM event.

This allows producing an AttributeEntry from the corresponding event handler implemented as a Ceylon function type.

How to use it

It is used when creating the ceylon.html tree that will be rendered by a Template. Event Handlers can thus be added in the attributes parameter of the Html Node.

function buttonWitOnClickHandler() => Button {
     attributes = [
        event.click((evt) {
            doAnActionOnEvent(evt)
        });
     ];
     "Standard Button"
}

function buttonWitCustomEventHandler() => Button {
     attributes = [
        event.custom("ontouchmove", (evt) {
            doAnActionOnEvent(evt)
        });
     ];
     "Touchable Button"
}

Helper object to provide the Mithril key feature.

Key provided from an already-known value

 List<String> list;
 ...
 Table {
     TBody {
         for (i->item in list.indexed)
         Tr {
             attributes = [ key.set(i.string) ];
             item
         }
     }
 };

Key provided as a function

 class Person(shared String firstName, shared String lastName) {
     shared String key() => "``firstName`` $$ ``lastName``";
 }
 Set<Person> persons = nothing;

 Table {
     TBody {
         for (person in persons)
         Tr {
             attributes = [ key.build(person.key) ];
         }
     }
 };

This top-level object provides wrapper methods for each Mithril lifecycle event.

This allows producing an AttributeEntry from the corresponding event handler implemented as a Ceylon function type.

How to use it

It is used when creating the ceylon.html tree that will be rendered by a Template. Event Handlers can thus be added in the attributes parameter of the Html Node.

Example

 Pre {
     Code { clazz = "ceylon";
         attributes = [
             lifecycle.create((vnode) {
                 dynamic {
                     hljs.highlightBlock(vnode.dom);
                 }
             })
         ];
         sourceCode
     }
 }

In this example, the highlight.js highlighting is applied to the content of the Code Html node, each time the corresponding Dom node is created.