Time for action – using native controls from MobGUI

MobGUI allows you to switch between the native control theme for iOS and Android or to redefine your own themes.

  1. Right-click on the little image of the iPhone in the MobGUI window and make sure that you're on the Native iOS controls set.
  2. Go to the Email card and drag 3 Input text controls from the MobGUI window and one Multiline text control.
  3. Name the Input controls as To, CC, and Subject and the Multiline text control as Body. You can also add some regular LiveCode Label fields alongside the input fields as an indicator of what to enter. Size the Body field big enough to enter a few lines of text. Also, add some background color to the fields or the card so that the fields are seen properly.
  4. As you make each field, note that you can set the keyboard type as well. Set it to Email for the To and CC fields.
  5. From the iOS Controls 1 set, drag two buttons on the card window. Name one Done and the other Send. You should have a screenshot like this after this step:
    Time for action – using native controls from MobGUI
  6. When we test the app and touch one of the fields, the keyboard overlay appears. We'll use the Done button as a way to hide the keyboard. Add a focus line to the mouseUp handler of the Done button script:
    on mouseUp
  focus on nothing
end mouseUp
  7. MobGUI can retrieve properties from these native fields using the mgText property. Change the Send button's mouseUp handler to use this property for each field and also, to call the revMail function:
    on mouseUp
  put the mgText of group "To"" into totext
  put the mgText of group "CC"" into cctext
  put the mgText of group "Subject"" into subjecttext
  put the mgText of group "Body"" into bodytext
  revMail totext,cctext,subjecttext,bodytext
end mouseUp
  8. Go to the Browser card.
  9. From the MobGUI window, drag a Input control to the card window and name it URL.
  10. Drag a Browser control to the card window and name it Page.
  11. Adjust the sizes so that the text field fills the width of the card and the browser control fills the area between the text field and the tab bar at the bottom.
  12. Select the Browser control and in the MobGUI window, enter a value for URL or use the default one already there. This will make the browser control load this URL as its first page.
  13. Edit the script of the URL text field and add this handler, which looks for a Return key to go to the URL:
    on inputReturnKey
  mobileControlSet "Page",", "url", the mgText of me
end inputReturnKey
  14. Try another test and go to the Email and Browser cards to see them in action.

What just happened?

We recreated the first two tests from our earlier test bed app, only now, it looks a lot nicer! Also, we made use of MobGUI's ability to get and set data in native iOS controls, in this case, using the mgText property and mobileControlSet.

Note that all MobGUI controls show up as groups in the LiveCode Inspector and as Custom controls in the Project Browser. These groups are made of customized LiveCode controls such as buttons, fields, and so on. MobGUI also adds a MobGUI card to the end of your stack. This card includes invisible buttons that have behaviors defined. Behaviors are methods to create common functionality between objects without duplicating the scripts. You can view these behavior scripts by clicking on the script button on the right-hand side of the Project Browser, when you display the MobGUI card. Unless you have a specific need to change these, just leave them alone.

Have a go hero – other tests and pretty icons

Go ahead and add the other two tests to the stack in the same manner as we did in the Time for action sections earlier in this chapter. For the DatePicker example, you could examine the Dictionary definition for iPhonePickDate to see examples of how to use the picked date data in the same manner as the previous sections for example, adjustments for different screen sizes.

So far, we have tested the size using the Portrait orientation with just an iPhone. You may want to use the same stack for iPhone and iPad or perhaps, iPad and an Android tablet, which have quite different aspect ratios.

Even if you just stick with the iPhone, you would still want to take care of Portrait and Landscape. We therefore, have to find ways to arrange the many controls on the card, so that they look their best on each screen size and orientation.

There are several ways to achieve this. First, we'll look at how to use a resize handler.

Laying out using a resize handler

When a stack's window size changes, LiveCode sends a resizeStack message that we can trap in order to rearrange controls for the new width and height.

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

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