Tutorial 2 Using pages - Heigvd/Wegas GitHub Wiki

Update the wegas-tuto/db/wegas-tuto-pages.json file with the following content:

[{
    "id": 1,
    "label": "Main layout",
    "type": "List",
    "cssClass": "layout",
    "children": [{
            "type":"List",
            "direction": "horizontal",
            "cssClass":"menu",
            "children":[{
                    "type": "VariableDisplay",
                    "label": "Combat skills",
                    "view": "text",
                    "variable": {
                            "name": "combatSkill"
                    },
                    "dataSource": "VariableDescriptor"
                }, {
                    "type": "VariableDisplay",
                    "label": "Stamina",
                    "view": "text",
                    "variable": {
                        "name": "stamina"
                    },
                    "dataSource": "VariableDescriptor"
                }
            ]}, {
            "label":"pageLoader",
            "type": "PageLoader",
            "pageLoaderId": "maindisplayarea",
            "cssClass": "body",
            "pageId": 2
        }]
},{
    "id":2,
    "label":"Page 1",
    "cssClass":"book-page",
    "type":"List",
    "children":[{
            "type": "Text",
            "content":"Bienvenue, ceci est la première page de ce tutoriel. La page (élément général existant sur chaque 'interface' du jeu) contient un titre ainsi que la valeure de vigueur (stamina) et de combat (combat skill) de notre héros. Cette page est constituée également d'une sous-page (inteface changeante du jeu) contenant un widget 'list' qui contient un widget 'text' (ce texte) ainsi qu'un widget 'button' (le bouton ci-dessous). Cliquez sur ce dernier pour aller à la sous-page suivante."
        },{
            "type":"List",
            "label":"Choices",
            "cssClass":"book-choice",
            "children":[{
                    "type": "Button",
                    "cssClass": "book-bouton",
                    "tooltip":"Aller à la page 2",
                    "label":"Suivant",
                    "plugins": [{
                            "fn": "ExecuteScriptAction",
                            "cfg": {
                                "onClick": "combatSkill.value = 10;stamina.value = 10"
                            }
                        },{
                            "fn": "OpenPageAction",
                            "cfg": {
                                "subpageId": 3,
                                "targetPageLoaderId": "maindisplayarea"
                            }
                        }]
                }]
        }
    ]
},{
    "id":3,
    "label":"Page 2",
    "cssClass":"book-page",
    "type":"List",
    "children":[{
            "type": "Text",
            "content":"Cette deuxième sous-page contient un widget 'fight' créer exclusivement pour les scénarios de ce jeu. Cliquez sur combattre pour réduire la vigueur (stamina) de l'adversaire à 0"
        }]
}]

A page must contains a page id, can be contains a label, a css class, a type (the name of the widget used in this page. Use "List" widget to have severals widgets in a page.) and some widget attributes (ATTRS) as you can see. To find out which ATTRS can be given at a widget, see the "ATTRS" object in corresponding widget. A page can contain a special widget named "pageLoader". This widget is used to have sub-page.

Edit your page css in the wegas-tuto/db/wegas-tuto.css file with the following:

        .body {
            margin:10px;
        }
        .menu {
            color: white;
            background: green;
        }
        .wegas-variabledisplay {
            margin:10px;
        }

Reload page