2 30 Visual LANSA WebView2

2.30 Visual LANSA WebView2

What is Webview2?

WebView2 allows embedding an Edge browser within a Windows application, meaning webpages can be viewed within the application frame.

Visual LANSA V16 introduces a new Primitive for Webview2 called PRIM_WEBV. This allows a modern browser to be embedded into a user's VL Windows application, giving them access to the browser controls to build their own UI around it.

Using Webview2

Component Definition

The Visual LANSA Primitive for WebView2 provides standard web page controls (Navigate, Back, Forward, Stop, and Reload) along with access to navigation events, such as starting and completing, to help manage and customize 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

#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