Skip to end of metadata
Go to start of metadata

Mission: In this lab you will learn how to collect data from the users and make it as simple as possible for them. We will examine the different keyboard layouts and how they can be used to streamline data input.

Specification: You will create a profile page where the user can add and edit their information. You will make the input methods relevant to the information being entered. Then that information will be saved as a profile for the user.

  1. Download the starting files from this link and import it into Appclerator Studio.  Make any necessary changes to tiapp.xml and the nodeACS server such as updating your API keys.

  2. There are a number of different keyboard layouts to use, but since we are using an email address for signup, we’ll go with Ti.UI.KEYBOARD_EMAIL

    1. This should be set as the value of the “keyboardType” property on the login TextField

    2. A more comprehensive list of keyboard layouts can be found here!/api/Titanium.UI.TextField-property-keyboardType

  3. iOS-specific

    1. Sometimes having the screen scrollable behind the keyboard isn’t enough. In situations like these, an iOS keyboard toolbar done button is the tool for the job.

    2. Split the “name” and “password” TextFields in login.xml into android- and iOS-specific versions (platform=’android’ and platform=’ios’ xml tags, respectively) and remove the forward slash closing the TextField on iOS

    3. Inside these tags, add a  <KeyboardToolbar> tag, and within that, add <Items>

      1. <Items> contains any items you may want the keyboard toolbar to consist of.

      2. For this exercise, we’ll be using FlexSpace and a Button titled “Done”

      3. For more information on toolbars and concepts like FlexSpace, visit the docs at!/api/Titanium.UI.iOS.Toolbar

    4. Add a FlexSpace and a Button in that order (or else the button will be on the left, and not easily reachable by thumb for one-hand users)

      1. Name the button what you like, and add a listener for click events (onClick=...)

      2. Name the function run onClick something like “lowerKeyboard”

    5. Repeat these steps for the password TextField, being sure to give the password’s done button the same click listener

    6. In login.js, create a function to handle the click events from your keyboard toolbar done buttons

      1. In the function, call the blur() method on both of those TextFields, to ensure that if either of them are focused, the keyboard will lower

    7. You now have a KeyboardToolbar with a button that lowers the keyboard

  4. Android-specific

  5. Android devices have a hardware back button to handle lowering the software keyboard, but you can still control the way the app reacts to the keyboard’s presence

    1. The Window property windowSoftInputMode determines how the app handles a keyboard appearing

    2. Learn more at!/api/Titanium.UI.Window-property-windowSoftInputMode

 You can download the completed lab from this link.


  • No labels