testapp.coffee

    Application
        id: "testApp"

        Area
            id: "appArea"
            class: "row"
            state: "page1"
            
            states:
                page1: State
                    css:
                        "box-shadow": "0px 0px 10px rgba(0,0,0,0.8)"
                    transitions:
                        to: Transition { duration:300 }
                        from: Transition { duration:200 }

                page2: State
                    css:
                        "box-shadow": "0px 0px 20px rgba(255,120,0,0.9)"
                    transitions:
                        to: Transition { duration:300 }

            Animation
                id: "nextPageAnim"
                target: "appArea"
                duration: 1500
                easing: "ease-in"
                keyframes:
                    "0%": "-webkit-transform: translateX(0%)"
                    "50%": "-webkit-transform: translateX(-20%)"
                    "100%": "-webkit-transform: translateX(0%)"

                onEnded: ->
                    @ns.page1.setVisible false
                    @ns.page2.setVisible true

            Area
                id: "headerArea"
                tag: "header"
                class: "row"
                backgroundColor: "#222"
                content: """<img src="http://23c.se/static/core/img/logo_23c.png" />"""

                Animation
                    id: "myAnim"
                    duration: 500
                    easing: "ease-in"
                    keyframes:
                        "0%": "opacity: 1; height: 500;"
                        "50%": "opacity: 0.8; height: 450;"
                        "100%": "opacity: 1 height: 500;"

            Area
                id: "page1"
                class: "row"
                backgroundColor: "#AAA"                

                ListModel
                    id: "model1"
                    ListElement { text: "Declarative syntax", article: "foo" }
                    ListElement { text: "Signals everywhere", article: "bar" }
                    ListElement { text: "This page's source", article: "baz" }
                    ListElement { text: "Declarative syntax", article: "foo" }

                ListPager
                    id: "article1"
                    class: "eight columns"
                    animation: "slide"
                    model: "model1"
                    css:
                        "border-right": "5px solid white"

                    delegate: Area
                        id: "articleDelegate"
                        template: """<h2>{{ text }}</h2><p>{{ article }}</p>"""

                    MouseAction
                        onClicked: -> @nextPage()
                
                ListView
                    id: "list1"
                    class: "four columns"
                    tag: "ul"
                    model: "model1"
                    currentIndex: 0
                    
                    hilight: State
                        css:
                            "background-color": "#444"
                            "color": "#FAFAFA"
                        transitions:
                            to: Transition
                                duration: 300
                            from: Transition
                                duration: 300

                    delegate: Area
                        template: "{{ text }}"
                        tag: "li"
                        margin: 5
                        width: 100
                        height: 50

                        MouseAction
                            onClicked: ->
                                @ns.article1.nextPage()
                                @ns.list1.setCurrentIndex @index
                                @ns.myAnim.start @ns.headerArea.element