Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member

Creating buttons

From: Titanium Mobile App Development Essential Training

Video: Creating buttons

Titanium Mobile allows for the creation of both native and custom buttons. Starting with the app.js file in the 03 _02 folder of the exercise files, I've created a new window object. Next, I'll switch to the completed code and copy the code snippet for creating a new button. The Titanium.UI.createButton method creates a new button object. At a minimum, I have to supply dimension properties for the object or else the button will fill the entire screen. I've used the title property to display text on the button.

Creating buttons

Titanium Mobile allows for the creation of both native and custom buttons. Starting with the app.js file in the 03 _02 folder of the exercise files, I've created a new window object. Next, I'll switch to the completed code and copy the code snippet for creating a new button. The Titanium.UI.createButton method creates a new button object. At a minimum, I have to supply dimension properties for the object or else the button will fill the entire screen. I've used the title property to display text on the button.

I've also added a custom property called id to the button object. I'll be retrieving this property with an EventListener in a moment. With the button object created, I'll add it to the window object. Now I'll add an EventListener to the button and listen for the click event. Within the click event I'll create a callback to fire an Alert dialog, that will a return string containing the source, object's ID property, and the type property of the event itself.

I'll cover Alert dialogs in more detail later in this course. Now I'll take a look at the result in the Simulator, when the button is clicked the Alert fires. Next, I want to create a button with a custom background. To do this I'll switch to the completed code and copy the code snippet for creating that button.

Now I'll add the paths to images to be used for the backgroundImage and backgroundSelectedImage state of the button. I'll add customButton to the window object. I'll copy code to add an EventListener that will fire with a touchend event. Now I'll take a look at the result in the Simulator. It's worth noting that the device will resize the image to fit the size of the button.

Next I'll add a slider control to the app to capture different sort of input.

Show transcript

This video is part of

Image for Titanium Mobile App Development Essential Training
Titanium Mobile App Development Essential Training

75 video lessons · 10093 viewers

Rafael Hernandez
Author

 
Expand all | Collapse all
  1. 6m 26s
    1. Welcome
      59s
    2. About the exercise files
      1m 25s
    3. Understanding the prerequisites
      1m 43s
    4. Accessing the Titanium API Documentation
      2m 19s
  2. 10m 13s
    1. Creating your first application
      3m 10s
    2. Navigating the Titanium Studio workspace
      3m 9s
    3. Browser-based Javascript vs. Titanium Javascript
      1m 21s
    4. Detecting platforms
      55s
    5. Editing run configurations
      1m 38s
  3. 14m 24s
    1. Understanding Windows and Views
      4m 28s
    2. Using the label view
      2m 18s
    3. Using the image view
      3m 41s
    4. Understanding z-depth
      1m 44s
    5. Grouping and nesting Views
      2m 13s
  4. 30m 4s
    1. Listening for events
      2m 36s
    2. Creating buttons
      2m 17s
    3. Creating a slider
      3m 48s
    4. Creating a switch
      3m 36s
    5. Creating a single-column picker
      2m 11s
    6. Creating a multi-column picker
      3m 35s
    7. Creating a date/time picker
      2m 20s
    8. Creating text fields and text areas
      3m 26s
    9. Configuring text field and text area keyboard types
      1m 22s
    10. Creating text fields with embedded buttons
      2m 0s
    11. Adding interactivity to any view
      1m 58s
    12. Reviewing the cycle of creation
      55s
  5. 8m 3s
    1. Understanding tab groups
      4m 35s
    2. Customizing tab groups
      2m 6s
    3. Working with a single tab group
      1m 22s
  6. 24m 3s
    1. Getting to know the Table view
      1m 55s
    2. Creating a simple table
      2m 2s
    3. Creating custom table rows
      4m 17s
    4. Opening windows from rows
      3m 11s
    5. Modifying row headers and footers
      36s
    6. Adding rows
      2m 16s
    7. Updating rows
      2m 24s
    8. Deleting rows
      2m 18s
    9. Moving rows
      1m 39s
    10. Adding a search bar
      2m 38s
    11. Other properties and methods
      47s
  7. 15m 54s
    1. Creating a map and setting the location
      3m 44s
    2. Creating simple annotations
      4m 27s
    3. Customizing pins
      1m 11s
    4. Creating and handling annotation buttons
      2m 6s
    5. Adding and removing pins at runtime
      4m 26s
  8. 9m 43s
    1. Loading local and remote web pages
      2m 18s
    2. Examining Web View events and controls
      2m 3s
    3. App-to-Web View for iOS
      3m 5s
    4. Loading an external XML feed
      2m 17s
  9. 16m 21s
    1. Providing Feedback to the User
      27s
    2. Setting timers
      4m 4s
    3. Prompting the device to vibrate
      1m 2s
    4. Providing feedback with an Alert dialog
      2m 23s
    5. Providing feedback with an Option dialog
      2m 22s
    6. Dial a phone number or load a webpage
      1m 39s
    7. Implementing an activity indicator
      1m 37s
    8. Animating windows and views
      2m 47s
  10. 13m 7s
    1. Setting custom application properties
      3m 17s
    2. Reading from and writing to the filesystem
      6m 13s
    3. Sending an email
      3m 37s
  11. 11m 37s
    1. Using the camera and video
      4m 21s
    2. Accessing the photo album
      2m 1s
    3. Capturing the screen
      2m 20s
    4. Playing back a sound
      2m 55s
  12. 5m 17s
    1. Reading device orientation
      2m 27s
    2. Detecting shakes and reading accelerometer data
      1m 35s
    3. Detecting different tap types and finger swipes
      1m 15s
  13. 15m 53s
    1. App preferences
      3m 57s
    2. Icon badge and splash screen
      2m 22s
    3. iOS: Universal Binary
      1m 4s
    4. Debugging your app
      3m 14s
    5. iOS: Provisioning and ad hoc distribution profiles
      3m 45s
    6. Stepping through a finished app
      1m 31s
  14. 2m 44s
    1. What next?
      2m 10s
    2. Goodbye
      34s

Start learning today

Get unlimited access to all courses for just $25/month.

Become a member
Sometimes @lynda teaches me how to use a program and sometimes Lynda.com changes my life forever. @JosefShutter
@lynda lynda.com is an absolute life saver when it comes to learning todays software. Definitely recommend it! #higherlearning @Michael_Caraway
@lynda The best thing online! Your database of courses is great! To the mark and very helpful. Thanks! @ru22more
Got to create something yesterday I never thought I could do. #thanks @lynda @Ngventurella
I really do love @lynda as a learning platform. Never stop learning and developing, it’s probably our greatest gift as a species! @soundslikedavid
@lynda just subscribed to lynda.com all I can say its brilliant join now trust me @ButchSamurai
@lynda is an awesome resource. The membership is priceless if you take advantage of it. @diabetic_techie
One of the best decision I made this year. Buy a 1yr subscription to @lynda @cybercaptive
guys lynda.com (@lynda) is the best. So far I’ve learned Java, principles of OO programming, and now learning about MS project @lucasmitchell
Signed back up to @lynda dot com. I’ve missed it!! Proper geeking out right now! #timetolearn #geek @JayGodbold
Share a link to this course

What are exercise files?

Exercise files are the same files the author uses in the course. Save time by downloading the author's files instead of setting up your own files, and learn by following along with the instructor.

Can I take this course without the exercise files?

Yes! If you decide you would like the exercise files later, you can upgrade to a premium account any time.

Become a member Download sample files See plans and pricing

Please wait... please wait ...
Upgrade to get access to exercise files.

Exercise files video

How to use exercise files.

Learn by watching, listening, and doing, Exercise files are the same files the author uses in the course, so you can download them and follow along Premium memberships include access to all exercise files in the library.


Exercise files

Exercise files video

How to use exercise files.

For additional information on downloading and using exercise files, watch our instructional video or read the instructions in the FAQ .

This course includes free exercise files, so you can practice while you watch the course. To access all the exercise files in our library, become a Premium Member.

Join now Already a member? Log in

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.


Mark all as unwatched Cancel

Congratulations

You have completed Titanium Mobile App Development Essential Training.

Return to your organization's learning portal to continue training, or close this page.


OK
Become a member to add this course to a playlist

Join today and get unlimited access to the entire library of video courses—and create as many playlists as you like.

Get started

Already a member ?

Become a member to like this course.

Join today and get unlimited access to the entire library of video courses.

Get started

Already a member?

Exercise files

Learn by watching, listening, and doing! Exercise files are the same files the author uses in the course, so you can download them and follow along. Exercise files are available with all Premium memberships. Learn more

Get started

Already a Premium member?

Exercise files video

How to use exercise files.

Ask a question

Thanks for contacting us.
You’ll hear from our Customer Service team within 24 hours.

Please enter the text shown below:

The classic layout automatically defaults to the latest Flash Player.

To choose a different player, hold the cursor over your name at the top right of any lynda.com page and choose Site preferences from the dropdown menu.

Continue to classic layout Stay on new layout
Exercise files

Access exercise files from a button right under the course name.

Mark videos as unwatched

Remove icons showing you already watched videos if you want to start over.

Control your viewing experience

Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.

Interactive transcripts

Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.

Are you sure you want to delete this note?

No

Your file was successfully uploaded.

Thanks for signing up.

We’ll send you a confirmation email shortly.


Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

Keep up with news, tips, and latest courses with emails from lynda.com.

Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

   
submit Lightbox submit clicked
Terms and conditions of use

We've updated our terms and conditions (now called terms of service).Go
Review and accept our updated terms of service.