Skip to content

Installation

Jump to bottom
Zino Adidi edited this page Jan 12, 2018 · 8 revisions

RendaJS can be imported into any HTML / web project using the script tag. To use Renda in your project, please follow the steps below:

  1. Download or clone the RendaJS Repository on GitHub

Please Note the advised directory structure for your Renda project outlined below:

   - my_project
     - app
       - assets
        - js
        - css
        - img 
       - view
         - pages
         - components       
       - controllers
       - models
       - services
       - routes
       - config.js
     - index.html
  1. Navigate to the directory structure as shown below and copy renda.js into your own project. Alternatively, you can navigate to the sample project folder and copy one of the sample projects into your local server folder.
 RendaJS
    build
     js
      renda.js
     ts
    sample
    src
  1. Before you run your new project, you will be required to configure some application settings.
  • If you are using any of the sample projects, your config file can be found in 'app/config.js'.
  • If you are setting up a custom project, create an app folder in the root folder of your project such that your app folder is located in 'my_project/app'.
  • Create a config.js file in your app folder.
  • Add the following code to the file:
/*App settings*/
var appSettings = {
    appTitle:'RendaJS App',
    displayContainer:'display',
    defaultPage:'home',
    errorPage:'error',
    loadDefaultPage:true,
    trackUrlChanges:true,
    registerPageHistory:true,
    viewPath:'app/view/',
    serverUrl:'http://api-url.sample-server.com',
    appMode:'debug',
    httpReqHeaders:{
        "Content-Type": "application/json",
        "Accept": "application/json",
    },
    httpRequestAuth:{
        "status": false,
        "authName":"Basic",
        "authToken": authToken
    },
    loader:{
        active:true,
        useCustom:true,
        id:'loadingbar', 
        imgUrl: '',
        text:'Loading...',
        showImg:false,
        showTxt:false,
        imgSize:'',
        style:'',
        class:'loader'
    }
};
renda.config(appSettings);

Your app folder should look like this now:

   - my_project
     - app
       - assets
        - js
         - renda.js
       - config.js
     - index.html

Before running your app, make sure your index.html file includes all app files in the following order and also your display element as specified in renda.Config.displayContainer:

<!DOCTYPE html>
<html>
<head>    
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Page Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script type="text/javascript" scr='path-to/jquery-lib'></script>
    <script type="text/javascript" scr='path-to/other-libs'></script>
    <script type="text/javascript" scr='path-to/Renda.JS'></script>
    <script type="text/javascript" scr='path-to/models.JS'></script>
    <script type="text/javascript" scr='path-to/other-app-js-files.JS'></script>
    <!-- You should consider including config.js before your app.js script -->
    <script type="text/javascript" scr='path-to/config.js'></script>
    <script type="text/javascript" scr='path-to/app.js'></script>
</head>
<body>
    <div id="display">
     <!-- Your pages will appear here -->
    </div>
</body>
</html>

Navigate to your 'app/' folder and create a 'view' folder and a 'pages' folder inside your 'app/view/' folder; then create a 'home.html' file in the 'app/view/pages' folder as shown below.

   - my_project
     - app
       - assets
       - views
        - pages
         - home.html
       - config.js
     - index.html

Since this is a hello world application, paste the following HTML snippet into the home.html file and save it.

  <center>
    <h6>Welcome to Renda</h6>
  </center>

Make sure your app is hosted on a server, any local server that supports javascript applications is sufficient. Navigate to the address of your app on the server (example: http://localhost/my_project/) and you should see 'welcome to Renda' displayed in your browser window.

  1. The following folder structure shows a typical Renda Project
   - my_project
     - app
       - assets
         - js
           - renda.js
         - css
         - img
       - views
        - pages
         - home.html
        - components
         - sampleComponent.html
       - controllers
         - app.js
         - otherControllers.js
       - models
       - services
       - config.js
     - index.html

app folder

This is the root folder of the application.

index.html file

This is the root file of your application. All libraries, reusable scripts, and styles are to be included in this file. Please Note: Your global display element should also be included in this page.

app/assets

Contains app resources including scripts, styles, images, and libraries.

Clone this wiki locally