Chapter 3. Building User Interfaces

So many different screens!

When making utility or game applications for desktop computers, you can often get away with having a particular sized window for which you can make custom graphics that exactly fit. With mobile devices, you have to cope with a wide range of screen sizes and aspect ratios and also have to interface elements that look correct for the operating system on the user's device.

LiveCode is capable of publishing on Mac, Windows, and Linux and goes some way toward solving the difficulty of making interface elements look right for each platform. The View menu has a Look and Feel menu item where you can choose between Native Theme, Mac OS Classic, Windows 95, and Motif. The same isn't true for mobile operating systems as all controls look like Motif. You still have two choices though: you can create graphics that look like they belong in your target OS, or you can call native routines in order to let the system itself present the appropriate controls.

In this chapter, we will:

  • Set up a test bed mobile application
  • Open an e-mail and browser windows
  • Show a date picker control
  • Load pictures from the library and camera
  • Make an iOS styled button
  • Manually lay out an interface
  • Use code to lay out an interface
  • Look at a powerful mobile interface control's add-on

Setting up a test bed mobile app

As a proving ground for the things we're going to try, we'll set up a single mobile app that has multiple screens, one for each of the things we want to test.

What should we call the test bed app? We could call it almost anything, but we'll let the iPhone make the decision for us. On the iPhone and iPod touch, there is only a small amount of space under the home screen icons for the name to appear. iOS will take your nice long app name and show a shortened version of the name, using ellipses to concatenate the ends of the name together. My super duper app will appear as My sup…app, not quite as informative! The number of letters that can appear without the text being truncated will vary depending on the width of the letters used, but typically, it has a limit of 11 letters. So, we will call the test bed app LC Test Bed, which is exactly 11 letters!

..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset
3.144.9.141