Displaying web pages in your app

If you need to display a live web page in your mobile app, then this recipe is for you. In this recipe, you will learn how to create a display area in your app, retrieve web data, and display that data.

How to do it...

Follow these steps to display web pages in your app:

1. Create a new main stack.
2. Select the stack's card and drag an image area to display the web information.
3. Select the image and then select the Group icon on the toolbar to make the image a group.
4. Select the group and set the following properties:
   • Name: Browser
   • Width: 312
   • Height: 390
   • Location: 160, 225
5. At the card level, enter the following code:

   local browserID

6. Create a preOpenCard handler with the following code:

    on preOpenCard
    mobileControlCreate "browser"
    put the result into browserID
    mobileControlSet browserID, "visible", \
      "true"
    mobileControlSet browserID, "url", \
      "http://www.packtpub.com"
    end preOpenCard

   Note

   The preOpenCard message is sent to a card when you first go to the card and before the openCard message is sent. Using the on preOpenCard handler allows you to manipulate a card before it is visible to the user.

7. Create a text field to display the URL. Name the field fld_URL.
8. Next, create the following handler:

    on browserFinishedLoading pURL
    put pURL into field "fld_URL"
    end browserFinishedLoading

   The output is as follows:

   

How it works...

With only two objects and a few lines of code, we are able to retrieve and display web pages from the Internet directly in our mobile apps.