Join Rafael Hernandez for an in-depth discussion in this video Understanding tab groups, part of Titanium Mobile App Development Essential Training.
Of course, if there's only one content area in an application but that area has lots of content to drill down to, perhaps via tables, it can seem pointless to use a tabGroup. Later in this chapter, I'll show you single-tab tabGroup applications and a few hacks that are useful to employ in order to gain functionality without losing time in development. Starting with the app.js file, I've set the background color of the application to black. I've also created a tabGroup object, and I've opened the tabGroup using an open method of the tabGroup object.
This is very similar to how we've been creating Windows for our applications. The difference here is that we're using tabGroups where windows once were at this point. Lastly, keep in mind that the default project for Titanium Studio is a two-tab application. I'll create two tabs, a Tours tab, and the Specials tab. Notice that the title property at the tabs has been set to Tours and Specials. The title is the text that will appear at the bottom of the tab.
I've also set the image property of the tab to the two images I created that are located within the Resources folder. I'll add these tabs to the tabGroup using the tabGroup's addTab method. For the Tours tab, I'll create a new window object and assign it to the Tours window variable. Now I'll set the window property of the Tours tab to this Tours window object. Doing this links the window to the tab, so that when the tab is selected, the window is open.
To create the specials.js file, I'll click on Resources within the Project Explorer, then File > New > File, and type specials.js. Upon creation, the file is presented for view. Within the specials.js file, I'll copy and paste a code snippet that will prepare the external file for use. By setting the win variable to Titanium .UI.CurrentWindow, I'm now able to add views to this window and have them appear within the Specials tab.
Now I'll create a simple label and add it to the view. Notice that I do not have to call this window's open method. The window and its contents are opened by the Tab view. Before looking at the results in the Simulator, I'll create and add an image and a caption to the Tours window using an Image view and a Label view. Let's take a look at the results in the Simulator. Two tabs are present with the title of each of the windows reflected in the nav bar at the top of the window.
- Accessing the Titanium API documentation
- Navigating the Titanium Studio workspace
- Detecting platforms
- Understanding windows and views
- Listening for events
- Configuring text fields
- Adding interactivity to a view
- Working with a single tab group
- Creating a map and setting the location
- Adding and removing map pins at runtime
- Loading local and remote web pages
- Loading an external XML feed
- Setting timers
- Prompting device vibrations
- Implementing an activity indicator
- Reading from and writing to the file system
- Working with media
- Reading device orientation
- Detecting gestures
- Debugging an app
- Stepping through a finished app
Skill Level Beginner
1. Getting Started
Editing run configurations1m 38s
2. Windows & Views
3. Controls, Input & Interactivity
4. Tab Group
5. Table View
6. Map View
7. Web View and XHR
9. Data Management
Sending an email3m 38s
Reading device orientation2m 27s
12. Preparing for app distribution
- Mark as unwatched
- Mark all as unwatched
Are you sure you want to mark all the videos in this course as unwatched?
This will not affect your course history, your reports, or your certificates of completion for this course.Cancel
Take notes with your new membership!
Type in the entry box, then click Enter to save your note.
1:30Press on any video thumbnail to jump immediately to the timecode shown.
Notes are saved with you account but can also be exported as plain text, MS Word, PDF, Google Doc, or Evernote.