Tutorial 2: Adding navigation to your Mobi Portal App

In our second tutorial we will be expanding our app from the first tutorial to include some basic navigation.
At this stage, your app should be running on AppFog and it should be in your developer account Mobi-Portal Dashboard like so:

Figure 1: Your Mobi Portal Dashboard

If you click on the Application Name, you’ll get to the Edit page:

Figure 2: Your App Dashboard

So now that it’s all working, let’s add some navigation to our app.

Step 1 - Creating a new page

Recall that our app is quiet simple. Here's the code again:

<html>
  <head>
   <meta name="mxit" content="clearscreen,no_prefix,show_progress"></meta>
  </head>
 <body>
  <h1>Hello Mxit</h1>
 Congratulations on building your first <i>Mxit</i> App.
 </body>
</html>

We will now be adding a second page to our app and we will need to create another page, which we shall call “second-page.php.” But first we need to edit our initial page and put a link to the second one. This is done with the use of an anchor or <a> tag as follows:

<html>
 <head>
 <meta name="mxit" content="clearscreen,no_prefix,show_progress"></meta>
</head>
<body>
 <h1>Hello Mxit</h1>
Congratulations on building your first <i>Mxit</i> App.
<a href="second-page.php">My Second Page</a>
</body>
</html>

Nothing terribly difficult here - it’s just a standard link in HTML. Recall that your index.php is sitting inside a local directory with the name of your app; for this tutorial’s purposes it’s testappmxit. Go in there, open the index.php (it’s the only file in there for the moment) and make the changes with your favourite text editor or development environment. We will also need to write the content of our second page and and give users the option to go back to the default or home page of our app like so:

<html>

<head>

 </head>
 <body>
  This is another page in my app, I have progressed from a one page to a two page app!<br/>
  <a href="index.php">Home</a>
 </body>
</html>

Create a new file and save it with this code as second-page.php also in that directory. Now to upload our changes and see what it looks like in Mxit.

Step 2 - Updating your app

To push our changes through to AppFog, we need to just do the same as we did when first uploading. As per AppFog’s instructions, we must log in with an email address and password and then issue an update command. If you’ve forgotten here’s what the process looks like at a command prompt:

/mxit/testappmxt$ af loginAttempting login to [https://api.appfog.com]Email: your-email-address@example.comPassword: ************Successfully logged into [https://api.appfog.com]

Now we’re logged in, let’s push the changes through to the live site:

/mxit/testappmxt$ af update testappmxtUploading Application:Checking for available resources: OKPacking application: OKUploading (1K): OK Push Status: OKStopping Application 'testappmxt': OKStaging Application 'testappmxt': OKStarting Application 'testappmxt': OK/mxit/testappmxt$

And here’s what your new App looks like in Mxit environment

Figure 3: What the app looks like on Mxit

We didn’t add much to our running app but you should now be getting a feel for the development cycle: making changes to the local copy of our code and then sending them through to AppFog where our existing app on Mxit can see them.

What's Next?

Now that we have added some basic navigation to our app, we are ready to proceed with something a bit more challenging: adding database services to our app. Stay tuned for the third tutorial in the series!

Articles & Information.

Select a topic:

Step 1 - Creating a new page

Step 2 - Updating your app