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

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


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