TutorialWalkThrough

Tutorial Walk Through

This walks the developer through the process of adding a Contact Page, viewable by an Authorized user

Create a Page

1. In your editor, navigate to the project /source/views/auth/body directory (package)
2. Create a file called AuthContactPage.js 2.1 The file name could be anything 2.2 For convention, the filename wil match the Enyo Kind 2.3 Enyo Kind has to be unique so it can't conflict with the Public ContactPage
3. Add the entry "AuthContactPage.js" to the .../auth/body/package.js file
4. Cheating here, copy the contents of the .../public/body/ContactPage.js file intot he AuthContactPage.js
5. Change the following values in AuthContactPage.js 5.1 name: 'Bootplate.AuthContactPage' 5.2 id: 'authContactPage' 5.3 authFlag: true

Add a Route

1. Open the .../source/controllers/Routes.js file
2. Add an entry to the routes[] array

, { path: '/authContact'
    , handler: 'authContact'
}

3. The path is the event that gets triggered, the handler is the method that gets called
4. Add a handler method

, authContact: function () { this.loadBodyPage('Bootplate.AuthContactPage'); } 4.1 The loadBodyPage() method has a few responsibilities, including a check to see if the user is logged in, and if they are should they be forced to the Terms & Conditions page

5. Add a navigation button
6. Open the .../source/views/auth/AuthNavigation.js file 6.1 Follow the pattern in setupTopNav() and add this:

this.createLinkButton(topNavToolbar, 'authContact', 'Contact Us');

7. Launch the app
8. Force a refresh to reload the app (CTL+F5 usually)
9. Log in and see the button
10. Click the button and see the page

Add an event

Let's do something on page load.

1. Add a handlers array

, handlers: {
    onTestPingResult: 'testPingResult'
}

2. Add some methods (Stealing them from the PublicController.js)

, testPing: function() {
  var checkDB = new JSONP.CheckDB(owner:this, fireEvent:'onTestPingResult', errorEvent:'onTestPingResult'});
  checkDB.makeRequest({});
}
, testPingResult: function(inSender, inEvent) {
  if (!inEvent.dbAvailable) {
    mvcApp.broadcast.displayClass = 'error';
    mvcApp.showErrorMessage("Cannot connect to the Database", "We're experiencing networking issues, please try again later.");
  } else {
    mvcApp.showSystemMessage("Database is up.", "Database is up.");
  }
}

Nothing happens yet, we'll add a call to the "rendered()" function which gets called by the "onRendered" event (once the components are done rendering).

, rendered: function() {
    this.inherited(arguments);
    this.testPing();
}

Now when the page is loaded, the following happens:

1. testPing() is called
2. Which creates an JSONP model object Kind
3. Which makes a call to the backend server 3.1 Which (hopefully) returns something 3.2 and the JSONP fires an event (onTestPingResult)
4. Which calls the testPingResult() method
5. Which puts up a system message in the top nav area if successful, or a popup error is failed

You can try changing the showSystemMessage() to showInfoMessage() and see an odd behavior. I'm assuming this is because there is a timing issue happening with rendered(). The way around this is to create a global handle to this, then wrap the call with a timer.

Change the alert to showInfoMessage

mvcApp.showInfoMessage("Database is up.", "Database is up.", "1"); Try it out. Then wrap the call with a small delay. mvcApp.data.authRef = this; setTimeout(function() { mvcApp.data.authRef.testPing(); }, 300);

Purpose

Project Background

Quick Start

Quick Start

Project Directory Structure

Directories and Package Layout

Implementation Decisions

Why are some things implemented this way?

Known Issues

Package Layout & Code Inheritance

Home

Home