What is Webview2?
WebView2 allows for the embedding of an Edge browser within a Windows applications meaning webpages can be viewed within the application frame.
Visual LANSA V16 sees the introduction of a new Primitive for Webview2 called PRIM_WEBV, this allows for a modern browser to be embedded into a users VL Windows application with access to the browser controls to build your own UI around it.
Using WebView2
Component Definition
The Visual LANSA Primitive for WebView2 allows for standard controls of a web page (Navigate, back, forward, stop and reload) and access to the Navigation starting and completing events from the browser to help control your UI.
Define_Com Class(#PRIM_WEBV) Name(#WebView) Parent(#COM_OWNER) Displayposition(1) Tabposition(1) Height(890) Top(116) Left(0) Width(1659) Defaulturl('https://docs.lansa.com/15/en/')Properties
CanNavigateBack
Returns a Boolean as to whether the browser can navigate back in history
CanNavigateForward
Returns a Boolean as to whether the browser can navigate forward in history
DocumentTitle
Returns a string that is the title of the current html document
DefaultURL
sets the URL which will load once the webview is initialized.
Source
returns the current URL in the Webview component.
Here is an example of using these properties to control your UI
Mthroutine Name(ToggleControls)
#BTN_Back.Enabled := #WebView.CanNavigateBack
#BTN_Forward.Enabled := #WebView.CanNavigateForward
#URL := #WebView.Source
#COM_OWNER.Caption := #WebView.DocumentTitle
Endroutine
Methods
NavigateBack
Navigates back in history
Evtroutine Handling(#BTN_Back.Click)
#WebView.NavigateBack
Endroutine
NavigateForward
Navigates forward in history
Evtroutine Handling(#BTN_Forward.Click)
#WebView.NavigateForward
Endroutine
NavigateTo
Navigates to the URL input as the URL parameter
Evtroutine Handling(#BTN_Go.Click)
#WebView.NavigateTo( #COM_SELF.FormatURL )
Endroutine
Reload
Reload the current webpage.
Evtroutine Handling(#BTN_Reload.Click)
#WebView.Reload
Endroutine
Stop
Stops the loading of a webpage
Evtroutine Handling(#BTN_Stop.Click)
#WebView.Stop
Endroutine
Events
- NavigationComplete – Fired when the loading of a webpage has finished
Evtroutine Handling(#WebView.NavigationCompleted) Options(*NOCLEARMESSAGES *NOCLEARERRORS)
#Navigating := False
#COM_SELF.ToggleControls
#URL := #WebView.Source
Endroutine
- NavigationStarting – Fired when the Loading of a webpage commences.
Evtroutine Handling(#WebView.NavigationStarting) Options(*NOCLEARMESSAGES *NOCLEARERRORS)
#Navigating := True
#COM_SELF.ToggleControls
Endroutine
Sample
* **************************************************
*
* COMPONENT: STD_FORM
*
* **************************************************
Function Options(*DIRECT)
Begin_Com Role(*EXTENDS #PRIM_FORM) Clientwidth(1659) Clientheight(1006) Componentversion(2) Left(1065) Top(203) Layoutmanager(#LayoutMain)
Define_Com Class(#PRIM_VS.Style) Name(#Style1) Cornerbottomleft(0) Cornerbottomright(0) Borderleft(0) Bordertop(0) Borderright(0) Borderbottom(0)
Define_Com Class(#PRIM_TBLO) Name(#LayoutMain)
Define_Com Class(#PRIM_TBLO.Column) Name(#LayoutMainColumn1) Displayposition(1) Parent(#LayoutMain)
Define_Com Class(#PRIM_TBLO.Row) Name(#LayoutMainRow1) Displayposition(3) Parent(#LayoutMain) Height(2)
Define_Com Class(#PRIM_TBLO.Row) Name(#LayoutMainRow2) Displayposition(1) Parent(#LayoutMain) Height(58) Units(Pixels)
Define_Com Class(#PRIM_TBLO.Row) Name(#LayoutMainRow3) Displayposition(2) Parent(#LayoutMain) Height(58) Units(Pixels)
Define_Com Class(#PRIM_TBLO.Item) Name(#LayoutMainItem1) Manage(#WebView) Parent(#LayoutMain) Row(#LayoutMainRow1) Column(#LayoutMainColumn1)
Define_Com Class(#PRIM_TBLO.Item) Name(#LayoutMainItem2) Alignment(TopLeft) Column(#LayoutMainColumn1) Manage(#Label1) Parent(#LayoutMain) Row(#LayoutMainRow2) Sizing(FitToWidth) Flow(Down) Marginleft(8) Marginright(8)
Define_Com Class(#PRIM_TBLO.Item) Name(#LayoutMainItem3) Alignment(TopLeft) Column(#LayoutMainColumn1) Manage(#URL) Parent(#LayoutMain) Row(#LayoutMainRow2) Sizing(FitToWidth) Flow(Down) Marginleft(24) Marginright(24)
Define_Com Class(#PRIM_TBLO.Item) Name(#LayoutMainItem4) Alignment(TopLeft) Column(#LayoutMainColumn1) Manage(#Label2) Parent(#LayoutMain) Row(#LayoutMainRow3) Sizing(FitToWidth) Flow(Down) Marginleft(8) Marginright(8)
Define_Com Class(#PRIM_TBLO.Item) Name(#LayoutMainItem5) Alignment(TopLeft) Column(#LayoutMainColumn1) Manage(#Panel1) Parent(#LayoutMain) Row(#LayoutMainRow3) Sizing(FitToWidth) Flow(Down) Marginleft(16) Marginright(16)
Define_Com Class(#PRIM_TBLO.Item) Name(#LayoutMainItem6) Alignment(BottomCenter) Column(#LayoutMainColumn1) Manage(#ProgressBar) Parent(#LayoutMain) Row(#LayoutMainRow2) Sizing(FitToWidth) Marginleft(24) Marginright(24)
Define_Com Class(#PRIM_TBLO) Name(#Layout1)
Define_Com Class(#PRIM_TBLO.Row) Name(#Layout1Row1) Displayposition(1) Parent(#Layout1)
Define_Com Class(#PRIM_TBLO.Column) Name(#Layout1Column1) Displayposition(1) Parent(#Layout1)
Define_Com Class(#PRIM_TBLO.Item) Name(#Layout1Item1) Alignment(CenterLeft) Column(#Layout1Column1) Manage(#BTN_Reload) Parent(#Layout1) Row(#Layout1Row1) Sizing(None) Flow(Right)
Define_Com Class(#PRIM_TBLO.Item) Name(#Layout1Item2) Alignment(CenterLeft) Column(#Layout1Column1) Manage(#BTN_Forward) Parent(#Layout1) Row(#Layout1Row1) Sizing(None) Flow(Right)
Define_Com Class(#PRIM_TBLO.Item) Name(#Layout1Item3) Alignment(CenterLeft) Column(#Layout1Column1) Manage(#BTN_Back) Parent(#Layout1) Row(#Layout1Row1) Sizing(None) Flow(Right)
Define_Com Class(#PRIM_TBLO.Item) Name(#Layout1Item4) Alignment(CenterLeft) Column(#Layout1Column1) Manage(#BTN_Go) Parent(#Layout1) Row(#Layout1Row1) Sizing(None) Flow(Right)
Define_Com Class(#PRIM_TBLO.Item) Name(#Layout1Item5) Alignment(CenterLeft) Column(#Layout1Column1) Manage(#BTN_Stop) Parent(#Layout1) Row(#Layout1Row1) Sizing(None) Flow(Right)
Define_Com Class(#PRIM_EDIT) Name(#URL) Parent(#COM_OWNER) Left(24) Top(25) Displayposition(3) Tabposition(2) Width(1611) Height(30)
Define_Com Class(#prim_WebV) Name(#WebView) Parent(#COM_OWNER) Displayposition(1) Tabposition(1) Height(890) Top(116) Left(0) Width(1659) Defaulturl('https://docs.lansa.com/15/en/')
Define_Com Class(#PRIM_LABL) Name(#Label1) Caption('URL') Displayposition(2) Ellipses(Word) Height(25) Left(8) Parent(#COM_OWNER) Tabposition(3) Tabstop(False) Top(0) Verticalalignment(Center) Width(1643)
Define_Com Class(#PRIM_PANL) Name(#Panel1) Displayposition(5) Left(16) Parent(#COM_OWNER) Tabposition(4) Tabstop(False) Top(83) Width(1627) Layoutmanager(#Layout1) Height(30)
Define_Com Class(#PRIM_PHBN) Name(#BTN_Go) Caption('Go') Displayposition(1) Left(0) Parent(#Panel1) Tabposition(1) Top(3)
Define_Com Class(#PRIM_PHBN) Name(#BTN_Back) Caption('Back') Displayposition(2) Left(80) Parent(#Panel1) Tabposition(2) Top(3)
Define_Com Class(#PRIM_PHBN) Name(#BTN_Forward) Caption('Forward') Displayposition(3) Left(160) Parent(#Panel1) Tabposition(3) Top(3)
Define_Com Class(#PRIM_PHBN) Name(#BTN_Reload) Caption('Reload') Displayposition(4) Left(240) Parent(#Panel1) Tabposition(4) Top(3)
Define_Com Class(#PRIM_PHBN) Name(#BTN_Stop) Caption('Stop') Displayposition(5) Left(320) Parent(#Panel1) Tabposition(5) Top(3)
Define_Com Class(#PRIM_LABL) Name(#Label2) Caption('Controls') Displayposition(4) Ellipses(Word) Height(25) Left(8) Parent(#COM_OWNER) Tabposition(5) Tabstop(False) Top(58) Verticalalignment(Center) Width(1643)
Define_Com Class(#PRIM_PGBR) Name(#ProgressBar) Displayposition(6) Left(24) Parent(#COM_OWNER) Tabposition(6) Top(38) Width(1611) Height(20) Style(#Style1) Visible(False)
Define_Com Class(#PRIM_TIMR) Name(#ProgressTimer) Interval(25) Startup(Manual)
Define_Com Class(#prim_nmbr) Name(#ProgressNum)
Define_Com Class(#PRIM_BOLN) Name(#Navigating)
Evtroutine Handling(#COM_OWNER.Initialize)
#URL := #WebView.DefaultUrl
Endroutine
Evtroutine Handling(#WebView.NavigationCompleted) Options(*NOCLEARMESSAGES *NOCLEARERRORS)
#Navigating := False
#COM_SELF.ToggleControls
#URL := #WebView.Source
Endroutine
Evtroutine Handling(#WebView.NavigationStarting) Options(*NOCLEARMESSAGES *NOCLEARERRORS)
#Navigating := True
#COM_SELF.ToggleControls
Endroutine
Evtroutine Handling(#BTN_Go.Click)
#WebView.NavigateTo( #COM_SELF.FormatURL )
Endroutine
Evtroutine Handling(#URL.Enter)
#WebView.NavigateTo( #COM_SELF.FormatURL )
Endroutine
Evtroutine Handling(#BTN_Back.Click)
#WebView.NavigateBack
Endroutine
Evtroutine Handling(#BTN_Forward.Click)
#WebView.NavigateForward
Endroutine
Evtroutine Handling(#BTN_Reload.Click)
#WebView.Reload
Endroutine
Evtroutine Handling(#BTN_Stop.Click)
#WebView.Stop #COM_SELF.ToggleControls
Endroutine
Mthroutine Name(FormatURL)
Define_Map For(*RESULT) Class(#prim_dc.UnicodeString) Name(#Result)
Define Field(#Protocol) Type(*NVARCHAR) Length(8)
#Protocol := #URL.Value.Substring( 1 8 ).UpperCase
If (#Protocol.UpperCase <> 'HTTPS://')
#Protocol := #URL.Value.Substring( 1 7 ).UpperCase
If (#Protocol.UpperCase <> 'HTTP://')
#URL := 'https://' + #URL
Endif
Endif
#Result := #URL
Endroutine
Mthroutine Name(ToggleControls)
#BTN_Back.Enabled := #WebView.CanNavigateBack
#BTN_Forward.Enabled := #WebView.CanNavigateForward
#BTN_Stop.Enabled := #Navigating
#BTN_Reload.Enabled := #Navigating.IsFalse
#BTN_Go.Enabled #URL.Enabled := #Navigating.IsFalse
#COM_OWNER.Caption := #WebView.DocumentTitle
If (#Navigating)
#ProgressBar.FadeIn Duration(250)
#ProgressTimer.Start
Else
#ProgressTimer.Stop
#ProgressBar.Value := 0
#ProgressBar.FadeOut Duration(250) Visible(True)
Endif
Endroutine
Evtroutine Handling(#ProgressTimer.Tick) Options(*NOCLEARMESSAGES *NOCLEARERRORS)
#ProgressBar.Value += 1
If (#ProgressBar.Value >= 100)
#ProgressNum := 0
Endif
#Com_owner.UpdateDisplay
Endroutine
End_Com
