Intel XDK: Controls 9: TAB BAR control in App Designer 7

When you are using App Designer in Intel XDK, you have a number of options shown. In the present post you will use App Framework 7.

You start with a Blank project using the Standard HTML5 with App Designer support from this Start A NEW PROJECT screen shown below:


After opting to choose 'Use App designer' click Continue at the bottom of the page to display Project name page.


Give a name and click Create. There will be some processing. Congratulations screen is displayed, dismiss it if you do not want to go through the QuickTour.
Here you need to choose a Framework. The options are shown.


Looks like quite a few of them are no longer supported. This is some what of a problem as you need to go through upgrading the projects you create in previous versions when some of these framworks were supported.

The default is Twitter Bootstrap v3. Choose Framework 7.Click Select at top right.

The UI you see are different from the UI you have seen in App Framework 3 in my previous posts on this blog.

Let us place a HEADER layout control and provide a name for it. Herein Tabbed Pages.


Inserting the TAB BAR Widget
Click open the ORGANIZATION category to display as shown.


Right Click the TAB BAR widget and choose 'Insert at Bottom' to position the TAB BAR with three tabs at the bottom of the page as shown.


The HTML fragment for these controls is as shown in the next image.


Using Tab widget to navigate to a page

Using DEVELOP | DESIGN add a new page to the app as shown.


In the New Page dialog provide a name for the page, herein FIRST as shown.


On the new page add a HEADER widget and provide a name, herein FIRST as shown.


Now you set up the INTERACTIVITY feature for the TAB as shown in the next image. The Action setting for the first TAB is now set as page#First and the 'href' for this should be #First as shown.

Now you can click SIMULATE and choose a suitable device Apple iPhone 6 execute the simulation.


The Tabbed Pages appear as shown.

Click on the first TAB at left. The FIRST page gets displayed as shown.


We navigated from Mainpage to First page. How do we get back? We need to make other arrangements.

For Sortable List Block widget go here.

Post a Comment

Popular posts from this blog

Develop a Side Menu App using Intel XDK - Part 1

UWP: XAML's ListView Control and its SelectionChanged event - Part 1

Setting up Kid's Corner on Windows 10 Phone