Mobile Tutorial: Using the Web Browser Component (iOS and Android)

For mobile platforms, FireMonkey wraps the Web Browser component as the TWebBrowser component. This topic describes how to create a simple FireMonkey Web Browser application for iOS and Android platforms.

Select the TWebBrowser component in the Tool Palette and drop it on the form. Note: If the TWebBrowser component is disabled, select the target platform for Android or iOS.

Select the Web Browser component on the Form Designer, go to the Object Inspector and select Client for the Align property.

After you complete these steps, the form should be similar to the following picture:

Write an Event Handler to Open a Web Page when the User Changes the URL in the Edit Control

Unlike desktop platforms, mobile platforms use the Virtual Keyboard to enter text as in the following images. The user can complete the action by clicking "Done".

iOS

Android

iPad

Android (LG - E612

FireMonkey provides many types of event handlers to cover most actions taken by users.
After the "Done" button is selected, the FireMonkey framework sends an OnChange event to the TEdit control. On the other hand, there is no specific event for the "Back" button. In this section, you implement event handlers to support both scenarios.

Implement a Common Method to Open a Web Page

Before implementing event handlers, first implement a common method to open a Web page based on the Text property of the Edit control.

The basic behavior is now implemented for this Web Browser application. Try running your application on your Android device, the iOS Simulator, or your iOS device.

Selecting the Proper Virtual Keyboard for the Web Browser Application

After you run your first Web Browser application, you might realize that the Virtual Keyboard is not optimized.

iOS provides several virtual keyboards as follows:

Alphabet:

Default:

EmailAddress:

NamePhonePad:

NumberPad:

NumbersAndPunctuation:

PhonePad:

URL:

Android provides several virtual keyboards as follows:

Alphabet:

Default:

EmailAddress:

NamePhonePad:

NumberPad:

NumbersAndPunctuation:

PhonePad:

URL:

The most appropriate Virtual Keyboard type for Web Browser components is URL. As we have already discussed in Design the User Interface, the following steps set the URL as the Virtual Keyboard type for the Web Browser component in this example. Select the Edit box on the Form Designer, and then in the Object Inspector, set the KeyboardType property to URL.

WebBrowser Mobile Code Snippet

The WebBrowser project in Mobile Code Snippets demonstrates the functionality described in this tutorial.