How to build hybrid mobile apps combining native UI components with HTML5

Last week we showed a screencast of Trigger.io Forge in action, this week we’ll 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

Create your app and add a top bar

You’ll need to use the Trigger.io Forge framework to be able to get native UI components using only web technologies. Get started by signing-up. There’s complete documentation on how to get setup and once you’ve done that just run:

forge create

You’ll be prompted for the app name and once the command completes, you’ll be setup with the code for a ‘Hello World’ app in the src subdirectory. Let’s start by adding a native top bar and testing that in the Android emulator.

Replace your existing src/config.json with this:

{
    "author": "amir@trigger.io",
    "config_version": "2",
    "description": "View ingredients for your favorite recipes",
    "modules": {
        "is": true,
        "logging": {
            "level": "INFO"
        },
        "prefs": true,
        "request": {
            "permissions": []
        },
        "tools": true,
        "topbar": true
    },
    "name": "Recipe list",
    "platform_version": "v1.3",
    "version": "0.1"
}

Enabling the topbar is as simple as setting: “topbar”: true in the modules configuration. Let’s also clean-up index.html until we’re ready to customize it:

Hello world!

You can then run and test the app so far using the following forge commands:

forge build

forge run android --android.sdk ~/Desktop/android-sdk-macosx

Any problems at this point? Check out our FAQ, ask the community on StackOverflow or contact support@trigger.io.

Configuring a tab bar

Great! It turns out that adding the tab bar at the bottom is just as easy – you simply enable the module by adding “tabbar”: true to the src/config.json:

{
    "author": "amir@trigger.io",
    "config_version": "2",
    "description": "View ingredients for your favorite recipes",
    "modules": {
        "is": true,
        "logging": {
            "level": "INFO"
        },
        "prefs": true,
        "request": {
            "permissions": []
        },
        "tools": true,
        "topbar": true,
        "tabbar": true
        },
    "name": "Recipe list",
    "platform_version": "v1.3",
    "version": "0.1"
}

But 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:


Hello world!

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’ve blogged before on how to create fast HTML5 mobile apps using zepto.js and backbone.js. 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 Githuband 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);
	});
}

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 of this post. 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.

Any problems at any point? Check out our FAQask the community on StackOverflow or contact support@trigger.io.