Pages

renda.page('PageName','DisplayElement'-optional)

Pages in Renda are one of the two building blocks that define the interface of your application with the other named 'components'. In Renda, your 'pages' are located in the 'app/view/page' folder of your project or in your view path as specified in renda.Config.viewPath in your config.js file. Renda pages are HTML files that can contain everything your regular .html page contains. They are mostly used as containers for components and also, as a major page in your application. An example could be your 'about, home, log in, register' pages or your application dashboard page.

the .page() function takes in two (2) parameters:

• Page Name
• Display Element

Page Name

.page('PageName'): This is the name of the page file created in app/view/pages/. an example page name could be home, the name 'home' references the home.html file in app/view/pages/home.html. When calling pages using .page('PageName') function, you do not need to add the .html extension of the page in the perimeter as Renda automatically looks for HTML pages matching the extension specified.

Display Element

.page('PageName','DisplayElement'): It is important to note that the display element perimeter is optional as this has already been set on the global level in your config.js file. This perimeter indicates the DOM element to Renda the page requested on; if left blank, Renda will use the value specified in renda.Config.displayContainer as default.

Prerequisite

Before you use the page function; ensure that you have your view folder and a page folder set up in line with the settings specified in your config.js file. If you are have not been able to complete this stage successfully, please visit the installation page for more information.

Usage

To use this function, simply follow the steps listed below:

• Create a .html file in app/view/pages, name the file about.html such that the file is located in app/view/pages/about.html.
• if you do not have an app.js file already, please visit the installation page to learn more. Ideally, the app.js file is main Javascript file for your project and is mostly loaded after all libraries, models, and services in your app have been loaded.

Best Practices

To improve the load time of your pages and response time of the application; it is adviced that when building your application all reusable scripts, CSS and libraries are attached to your index page such that only those scripts and function specific to individual pages are loaded with the page.