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

From Appmethod Topics
Jump to: navigation, search

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


Using the Web Browser Component in FireMonkey Mobile Applications

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.

TWebBrowserDemo.png

Design the User Interface

  1. Select File > New > FireMonkey Mobile Application - Object Pascal > Blank Application or File > New > FireMonkey Mobile Application - C++ > Blank Application.
  2. Select the TToolBar component in the Tool Palette, and drop it on the FireMonkey Mobile 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 Mobile 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 Mobile Form Designer, and then in the Object Inspector, set the StyleLookup property to priortoolbutton.
    The priortoolbutton StyleLookup value for TButton adds a Back button label. On iOS devices, it is similar to the following image: Prior.png
    For more detail about selecting a style in FireMonkey mobile applications, see Mobile Tutorial: Using a Button Component with Different Styles (iOS and Android).
  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 Mobile 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 FireMonkey mobile applications, 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 Mobile 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 the desktop platform, mobile devices 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 Code Editor, create the following OpenURL new private method:

    Object Pascal:

     
    type
      TForm1 = Class(TForm)
        ToolBar1: TToolBar;
        Button1: TButton;
        Edit1: TEdit;
        WebBrowser1: TWebBrowser;
      private
        { Private declarations }
        procedure OpenURL;
      public
        { Public declarations }
      end;
    

    C++:

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

    Object Pascal:

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


    C++:

     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 Mobile 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:

    Object Pascal:

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

    C++:

    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:

Object Pascal:

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

C++:

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 Mobile 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