Skip to content

WIP composition

Jump to bottom
francoisfrisch edited this page Feb 19, 2013 · 3 revisions

Component composition using Montage.

The way to create and control the ui for your application using montage is primarily by expressing this in the markup of your templates.

For example:

The Repetition

...
<script type="text/montage-serialization">{
    "repetition": {
        "prototype": "montage/ui/repetition.reel",
        "properties": {
            "element": {"#": "repetition"},
            "content": [1,2,3]
        }
    }
    "text": {
        "prototype": "montage/ui/dynamic-text.reel",
        "properties": {
            "element": {"#": "text"},
            "value": "hello"
        }
    }
}</script>
...
<body>
    <ul data-montage-id="repetition">
        <li data-montage-id="text"></li>
    </ul>
</body>
...

Via the markup we are passing a parameter to the Repetition (the li element) and this will tell the repetition to repeat the li and its associated DynamicText as many times as there are values in the content array. In this case three times.

Similarly the Condition

...
<script type="text/montage-serialization">{
    "condition": {
        "prototype": "montage/ui/condition.reel",
        "properties": {
            "element": {"#": "condition"},
            "condition": false
        }
    }
    "text": {
        "prototype": "montage/ui/dynamic-text.reel",
        "properties": {
            "element": {"#": "text"},
            "value": "This is the truth"
        }
    }
}</script>
...
<body>
    <div data-montage-id="condition">
        <span data-montage-id="text"></span>
    </div>
</body>
...

The span is a parameter to the Condition that tells it to show that element when the condition property is true. In this casse the condition will make sure the span is not visible on the screen.

Implementing a custom component using the same pattern.

Given the desired usage for CustomComponent.

...
<script type="text/montage-serialization">{
    "customComponent": {
        "prototype": "my/custom-component.reel",
        "properties": {
            "element": {"#": "customComponent"}
        }
    }
    "text": {
        "prototype": "montage/ui/dynamic-text.reel",
        "properties": {
            "element": {"#": "text"},
            "value": "I'm included."
        }
    }
}</script>
...
<body>
    <div data-montage-id="customComponent">
        <span data-montage-id="text"></span>         <- innerTemplate
    </div>
</body>
...

The CustomComponent can make use of a template argument to include all the contents of it's innerTemplate.

my/custom-component.reel/custom-component.html

...
<script type="text/montage-serialization">{
    "owner": {
        "prototype": "my/custom-component.reel"
    }
}</script>
...
<body>
    <div class="my-CustomComponent--prettyFrame">
        <span data-arg="*"></span>
    </div>
</body>
...
Clone this wiki locally