Native topbar and tabbar usage

In this recipe will explain how you can use a native top bar and native tab bar along with your HTML / CSS and JavaScript in a hybrid app created with Trigger.io.

We'll add more native UI components in the future, but here's how you can get started creating a beautiful, responsive mobile apps for iOS and Android using just web technologies.

These are screenshots of a simple recipe app that we created using the Trigger.io Forge native UI components, and we'll explain how we built it. Along the way we'll show you how to:

  • Configure Trigger.io Forge to add native top bar and tab bar elements to your app
  • Style the native elements
  • Add listeners to and control the native elements from JavaScript

Please feel free to base your own projects on this – it’s a great springboard for a new project! The code is hosted on github here: https://github.com/trigger-corp/forge-template-list-and-detail

Adding a topbar

To start off, create a new app using the Trigger Toolkit. You'll need to activate the Topbar module for your app. Let's also clean up index.html until we're ready to customize it:

<div class="content">Hello world!</div>

Run the app and you should see:

Configuring a tab bar

Great! It turns out that adding the tab bar at the bottom is just as easy, just enable the Tabbar module in the same way as with the topbar. Before that will look good and behave well we need to add some buttons and listeners so we can execute JavaScript to handle the page transitions when you click on each tab. To do that, let's add a JavaScript file called src/js/main.js:

// A helper function so that when we change tab the web view scrolls to the top of the new page
var scrollTop = function () {
    setTimeout(function () {
        document.body.scrollTop = 0;
    }, 0);
}

// This is the method we are going to call when a tab button is pressed
var updateRecipes = function (search) {
    scrollTop();
    // For now just pop up a message with the tab which was pressed
    alert(search);
}

// Set a better title for the topbar
forge.topbar.setTitle("Recipe shopping list");

// Add our 3 tab buttons to the tabbar and add press listeners
var starterButton = forge.tabbar.addButton({
    text: "Starters",
    icon: "img/tomato.png",
    index: 0
}, function (button) {
    button.onPressed.addListener(function () {
        updateRecipes("starter");
    });
    // This is the default button, activate it immediately
    button.setActive();
    updateRecipes("starter");
});

var mainButton = forge.tabbar.addButton({
    text: "Mains",
    icon: "img/pizza.png",
    index: 1
}, function (button) {
    button.onPressed.addListener(function () {
        updateRecipes("main");
    });
});

var dessertButton = forge.tabbar.addButton({
    text: "Desserts",
    icon: "img/strawberry.png",
    index: 2
}, function (button) {
    button.onPressed.addListener(function () {
        updateRecipes("dessert");
    });
});

Here we've using the forge.topbbar.setTitle API call to alter the title at the top, and then used forge.tabbar.addButton to configure the tab bar buttons including adding a listener to execute JavaScript when they are pressed. We reference this file from src/index.html:

<script type="text/javascript" src="js/main.js"></script>
<div class="content">Hello world!</div>

You can find the images referenced in src/js/main.js in the example code in Github. You'll also need to copy those across to your src/img directory. Now if we build and test (this time on iOS), we see this:

Creating list views and controlling navigation

Ok, now we have the native UI elements in place, we need to create our list view and connect up the tabs so they trigger transitions. We'll use the lightweight zepto.js library to help us handle the DOM manipulation. We'll create the recipe list using HTML / CSS / JavaScript in the main part of the view since it's simple to create good-looking lists this way. First, let's embed the recipe data and the zepto.js library. You can do that by downloading data.js and zepto.js from the example in Github and putting them in your src/js directory. Then we update the updateRecipe function in src/js/main.js - this is called when a tab bar button is pressed:

var updateRecipes = function (search) {
    scrollTop();
    $('.content').html('<ul class="list"></ul>');
    $.each(data[search], function (i, recipe) {
        var el = $('<li><img src="'+recipe.thumb+'">'+recipe.title+'</li>');
        el.on('click', function () {
            scrollTop();
            $('.content').html('<div class="recipe"><h3>'+recipe.title+'</h3><img src="'+recipe.img+'"><ul class="ingredients"></ul><p><a href="#" onclick="forge.tabs.open(\''+recipe.source+'\')">View full recipe</a></p></div>');
            $.each(recipe.ingredients, function (i, ingredient) {
                $('.ingredients').append('<li>'+ingredient+'</li>');
            });
            forge.tabbar.setInactive();
        });
        $('.list').append(el);
    });
};

Note the use of the Tabs module to open the source of the recipe in a child browser window. You'll need to activate this module for the example to work correctly.

Now to complete the app, all we need to do is add some simple styling to the list and reference the JavaScript files in src/index.html:

That's it

You should now be able to build and test the app to look like the screenshots at the top. As an optional extra, you can also explore different styling for the topbar and tabbar by trying out the following API calls:

So now you can create rich hybrid apps, using real native UI components using Trigger.io! Let us know your feedback and how you get on.