Pages Framework

Groupe (PIZZA pizza) : Kévin, Florian, Nicolas, Gaël

Pages framework

The pages framework is used to asynchronously display the website pages to the client. It also serves to call the api and display the data.

Directory structure

client
├───>api
├───config
├───images
├───libs
├───scripts
├───styles
├───views
│   root.html

->api

This symbolic link points to ../api.
It allows the access to the api.

Config

Contains the framework config files.

config
├── config.js
└── pagesConfig.js

• config.js: contains general parameters, for example the base url of the api.
• pagesConfig.js: contains the page specific parameters, including dynamic data calls. More info in the "Page Config" section.

Images

Contains all the static images for the website.

Libs

Contains all external libraries. For example, it contains a dragAndDrop library created by Florian.

Scripts

Contains all the pages framework logic.

scripts
├── actions.js
├── apiManager.js
├── boot.js
├── builder.js
├── dataSources.js
├── pagesManager.js
└── utils.js

• actions.js: contains the page events (onData, onLoad, onDisplay) and a variety of page actions (callBacks).
• apiManager.js: contains the api call methods.
• boot.js: is the initial script boot. It instanciate the managers and starts the application.
• builder.js: contains the methods used to build the interface (for example: data adapters)
• dataSources.js: contains the methods used to provide data to the pages.
• pagesManager.js: is responsible for the page display procedure (load view -> display view -> load data -> display data -> etc.)
• utils.js: contains general use methods

Styles

styles
├── main.css
├── form.css
├── ...
└── pages
    ├── home.css
    ├── manage.css
    └── ...

Contains the page styles.

• main.css: loads all the other stylesheets.
• /pages: contains all the page specific stylesheets.

Views

Contains all the views, stored in the html format.
The views are dynamically loaded by the framework.
By default they are all loaded at the framework boot to improve on page change preformance. If needed, this can be disabled to reduce memory usage. In this case, the views would only be loaded when needed.

main.html

This is the entry point of the app.
It includes all the scripts and stylesheets. It also contains the website layout in its body.

Pages Config

The main configuration file is pageConfig.js. It's used to specify how and where data should be displayed and other page specific parameters.

Structure
Example: "Quizz" page structure.

var pagesConfig = {
    quizz: { 
        headButton: {
            text: "Home",
            target: "home"
        },
        view: "quizz",
        refreshDataOnDisplay: true, 
        data: [
            //data config 1: used to display the questions list
            { 
                source: "questionsForQuizz",
                pathTemplate: "/{{quizzId}}", 
                container: ".quizzQuestionsContainer",
                adapter: "questionInputLine"
            },
            //data config 2: used to get the quizz data
            {
                source: "quizz",
                pathTemplate: "/{{id}}", 
                dataName: "quizz"
            }
        ]
    }
}

Page name
The page name is defined by the key of the page config. In this case it's quizz. It will be used for the page url.

HeadButton
The head button config is used ton configure the text and target of the button located at the top right of most of the pages.

View
The view parameter defines the view name that will be used for this page. by default, the page name will be used.
The view files are located in the /views directory.

Data
The data parameter expects an array of data configs.

• source contains the name of the method defined in the scripts/dataSources.js script.
• pathTemplate contains the template defining the parameters extracted from the url and passed to the dataSource.
  Example:
  • url: /quizz/1234/question/3456/answers
  • pathTemplate: /quizz/{{quizzId}}/question/{{questionId}}/answers
  • result: {quizzId: "1234", questionId: "3456"}
• container contains the css selector of the data adapters container.
  Example: form > .quizzContainer
• adapter contains the name of the data adapter used to display the data. It directly references the method name in /scripts/builder.js -> adapters
• dataName: defines the property name the data will take if it's not passed throught an adapter. In this case, the onPageData[pageName] (/scripts/actions.js) callBack will be called on dataSource response.