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

From RAD Studio
Jump to: navigation, search

Go Up to Mobile Tutorials: Mobile Application Development (iOS and Android)


FireMonkey wraps the Web Browser component as the TWebBrowser component. You can use TWebBrowser in desktop apps as well as mobile apps, but this topic describes how to create a simple FireMonkey Web Browser application for iOS and Android platforms.

TWebBrowserDemo.png

Design the User Interface

  1. Select either:
  2. Select the TToolBar component in the Tool Palette, and drop it on the Form Designer.
    To find TToolBar, enter a few characters (such as "tool") in the Search box of the Tool Palette:
    SelectToolBar 2.png

  3. After you drop the component, you can see the TToolBar component at the top of the Form Designer. Here is a screenshot after setting the iOS style in the Form Designer:
    ToolBarOnForm.png

  4. Select the TButton component in the Tool Palette and drop it on the TToolBar.
  5. Select the TButton component on the Form Designer, and then in the Object Inspector, set the StyleLookup property to priortoolbutton.
  6. Select the TEdit component in the Tool Palette and drop it on the TToolBar. Make sure that the size of the Edit control is wide enough to fill the area of the TToolBar:
    ToolBarButtonAndEditControl.png

  7. Select the Edit box on the Form Designer, and then in the Object Inspector, set the ReturnKeyType property to Done, the KeyboardType property to URL, and the KillFocusByReturn property to True.
    For more information about selecting the most appropriate Virtual Keyboard type in mobile platforms, see Selecting the Proper Virtual Keyboard for the Web Browser Application.
  8. Select the TWebBrowser component in the Tool Palette and drop it on the form.
  9. 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:
    NewBrowserAppOnDesigner.png

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

VirtualKeyBoard iOS.png
iPad

VirtualKeyBoard Android.png
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.

  1. In the private section of the TForm1 class, declare the OpenURL method:

    Delphi:

      private
        { Private declarations }
        procedure OpenURL;
    

    C++Builder:

    private:        // User declarations
      void __fastcall openURL();
    
  2. Implement the openURL method as follows:

    Delphi:

    procedure TForm1.OpenURL;
    begin
      WebBrowser1.Navigate(Edit1.Text);
    end;
    


    C++Builder:

     void __fastcall TForm1::openURL()
      {
          WebBrowser1->Navigate(Edit1->Text);
      }
    

Implement an Event Handler for the OnChange Event

  1. Create the event handler by selecting the Edit component (in the Form Designer), and then double-clicking the white space next to the OnChange event (in the Object Inspector's Events tab).
    The Object Inspector creates a new event handler called Edit1Change:
    Edit1ChangeAtObjectInspector.png

  1. Complete the event handler by adding the following code:

    Delphi:

    procedure TForm1.Edit1Change(Sender: TObject):
    begin
      OpenURL;
    end;
    

    C++Builder:

    void __fastcall TForm1::Edit1Change(TObject *Sender)
    {
        openURL();
    }
    

Implement an Event Handler for the Back Button

To implement the Back button for your Web Browser, you can simply call the GoBack method on the Web Browser component:

Delphi:

procedure TForm1.Button1Click(Sender: TObject);
begin
  WebBrowser1.GoBack;
end;

C++Builder:

void __fastcall TForm1::Button1Click(TObject *Sender)
{
   WebBrowser1->GoBack();
}

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:
VktAlphabet.png VktDefault.png VktEmailAddress.png
VktNamePhonePad.png




NumberPad: NumbersAndPunctuation: PhonePad: URL:
VktNumberPad.png VktNumbersAndPunctuation.png VktPhonePad.png VktURL.png



Android provides several virtual keyboards as follows:

Alphabet: Default: EmailAddress: NamePhonePad:
VktAlphabet Android.png VktDefault Android.png VktEmailAddress Android.png
VktNamePhonePad Android.png




NumberPad: NumbersAndPunctuation: PhonePad: URL:
VktNumberPad Android.png VktNumbersAndPunctuation Android.png VktPhonePad Android.png VktURL Android.png



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.

TEdit Properties.png

WebBrowser Mobile Code Snippet

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

You can find the WebBrowser project at:

See Also