![1868978 | Embarcadero RAD Studio Delphi C++Builder Blogs](https://i0.wp.com/blogs.embarcadero.com/wp-content/uploads/2020/08/1868978-1.jpg?resize=1140%2C694&ssl=1)
- Introduction
WebView is a VCL-type component (Windows platform only). Its main purpose is to open web pages. To find out how to install the component, watch the next video.
![image21 | Embarcadero RAD Studio Delphi C++Builder Blogs](https://i0.wp.com/blogs.embarcadero.com/wp-content/uploads/2020/08/image-21.png?resize=605%2C333&ssl=1)
2) Components in the Demo and what they do
On the top of the form a TEdit component is positioned for inserting text (URL in this case), as well as speed buttons for navigation – back, forward, refresh, zoom in, zoom out web page and screen capture. A short video with the Demo describes what it does and how it works.
![image22 | Embarcadero RAD Studio Delphi C++Builder Blogs](https://i0.wp.com/blogs.embarcadero.com/wp-content/uploads/2020/08/image-22.png?resize=750%2C352&ssl=1)
![image24 | Embarcadero RAD Studio Delphi C++Builder Blogs](https://i0.wp.com/blogs.embarcadero.com/wp-content/uploads/2020/08/image-24.png?resize=306%2C551&ssl=1)
The TEdit component fired and event OnKeyPress when a button from the keyboard is pressed. Inside the method there is a filter for the ‘Enter’ button, which can in the next lines of code.
1 2 3 4 5 6 |
if Key = #13 then begin if Pos('://', EditUri.Text) = 0 then EditUri.Text := 'https://' + EditUri.Text; WebView.Uri := EditUri.Text; end; |
As you can see in the above code the WebView component loads the inserted text from the TEdit as URL. The speed buttons are disabled by default before an URL is loaded. Once the URL completed loading an OnNavigationCompleted Event is fired from the TWebView component. In the method of the event all the speed buttons status is updated to depending on the WebView flag for certain call, except the Stop Button (X). Respectively its status is always opposite to the others.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<strong>procedure</strong> <strong>TFormMain</strong>.WebViewNavigationCompleted(Sender: TObject; Success: Boolean; WebError: TWebError; NavigationId: UInt64); <strong>begin</strong> UpdateControls; SpeedButtonStop.Enabled := <strong>False</strong>; EditUri.Text := WebView.Uri; <strong>end</strong>; <strong>procedure</strong> <strong>TFormMain</strong>.UpdateControls; <strong>begin</strong> SpeedButtonBack.Enabled := WebView.CanBack; SpeedButtonForward.Enabled := WebView.CanForward; SpeedButtonRefresh.Enabled := WebView.Active; SpeedButtonZoomOut.Enabled := WebView.Active; SpeedButtonZoomIn.Enabled := WebView.Active; SpeedButtonCapture.Enabled := WebView.Active; <strong>end</strong>; |
Every speed button actually calls a procedure from the TWebView class.
- Speed button BACK – calls the WebView.Back procedure for going back to previous page (if CanBack is true);
- Speed button Forward – calls the WebView.Forward procedure for going forward to next page (if CanForward is true);
- Speed button Refresh – calls the WebView.Refresh procedure to refresh the web page (if WebView.Active is true);
- Speed button Zoom in – calls the WebView.ZoomIn procedure to zoom in the web page with 0.1 (if WebView.Active is true);
- Speed button Zoom out – calls the WebView.ZoomOut procedure to zoom out the web page with 0.1 (if WebView.Active is true);
- Speed button Capture – calls the WebView.CapturePreview procedure for capturing the current shown web page (if CanForward is true);
- Speed button STOP – calls the WebView.Stop procedure to stop loading the web page (this button gets enabled when the OnNavigationStarting event is fired after webpage loading has been started);
1 2 3 4 5 |
<strong>procedure</strong> <strong>TFormMain</strong>.WebViewNavigationStarting(Sender: TObject; <strong>const</strong> Uri: WString; UserInitiated, Redirected: Boolean; <strong>const</strong> RequestHeaders: THeaders; NavigationId: UInt64; <strong>var</strong> Cancel: Boolean); <strong>begin</strong> UpdateControls; SpeedButtonStop.Enabled := <strong>True</strong>; <strong>end</strong>; |
There is also an event for full screen mode of the TWebView component. It’s called OnFullScreenChanged. In this method we check the FullScreen Boolean flag of the WebView and depending on it, some visual settings are applied for better visual experience.
The code for this OBR demo can be downloaded here.
Like what you see? You can get WebView and over 100 other fantastic WinSoft components with our Enterprise Component Pack. For a limited time, when you purchase RAD Studio Enterprise or Architect Edition at special Upgrade Pricing, you will also get this package of third-party software worth over $13,000, including the full WinSoft Component Library, at NO EXTRA COST! Step up to RAD Studio 10.4.1 today!
Design. Code. Compile. Deploy.
Start Free Trial Upgrade Today
Free Delphi Community Edition Free C++Builder Community Edition