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:

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:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

{

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

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:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

{

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

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

// A helper function so that when we change tab the web view scrolls to the top of the new page

varscrollTop=function(){

setTimeout(function(){

document.body.scrollTop=0;

},0);

}

// This is the method we are going to call when a tab button is pressed

varupdateRecipes=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

varstarterButton=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");

});

varmainButton=forge.tabbar.addButton({

text:"Mains",

icon:"img/pizza.png",

index:1

},function(button){

button.onPressed.addListener(function(){

updateRecipes("main");

});

});

vardessertButton=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:

1

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:

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:

1

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: