MAUI introduzione al controllo webView con .Net 8

Si riporta l'articolo scritto per il sito https://www.iprogrammatori.it/articoli/microsoft-net-framework/art_maui-introduzione-al-controllo-webview-con-dotnet-_1862.aspx

In questo articolo vedremo come utilizzare il controllo per la navigazione internet denominato webView. Un controllo molto conosciuto per chi in passato ha sviluppato applicazioni di tipo Windows Application e voleva dotare le winForm con la navigazione internet.

Il controllo permette di aprire siti indicando il riferimento web del sito che si vuole visualizzare.

In questo articolo, verrà realizzato una semplice applicazione multipiattaforma per visualizzare un sito e riportati alcune funzionalità o eventi del controllo per gestire il cambio del sito, tornare avanti o indietro.

Figura 1 – Il sito che viene aperto nel controllo WebView

Creazione del progetto

Si crea un nuovo progetto MAUI, con l’ultima versione del Framework, nel momento in cui stiamo scrivendo la versione è la 8.

La form che andremo a realizzare sarà composta da un controllo WebView, due pulsante per andare avanti ed indietro con i siti, una casella di testo dove digitare il sito da visitare ed un pulsante che permette di aprire il sito inserito nella casella di testo, il tutto come mostrato in figura 1.

Togliamo i controlli posizionato nel tag “ScrollView” che vengono inseriti inizialmente, per aggiungerli quelli precedentemente indicati.

Terminata la creazione del progetto aggiungere un controllo di tipo webView, impostando la proprietà “Name” con il valore “navigazione” la proprietà “Source” con il sito di iprogrammatori, , impostare la proprietà “WitdhRequest” con il valore “1000” e la proprietà “HeightRequest” con il valore “400”. 

Aggiungete due pulsanti, uno con la proprietà “Name” impostata su “Indietro” e l’altro con il valore “Avanti”, una casella di testo con la proprietà “Name” impostata su “IndirizzoWeb” ed infine un pulsante con la proprietà “Name” impostata su “Vai”.

Di seguito si riporta il frammento di codice della form XAML con i relativi controlli.

XAML

<ScrollView>

     <VerticalStackLayout

         Padding="30,0"

         Spacing="1">

 

         <Label

             Text="Mavigazione"

             Style="{StaticResource Headline}"

             SemanticProperties.HeadingLevel="Level1" />

           

          

         <FlexLayout Direction="Row" >

             <WebView Source="https://www.iprogrammatori.it" WidthRequest="1000" x:Name="navigazione"  HeightRequest="400"   />

             <Button Text="&lt;-" x:Name="Indietro  WidthRequest="100" HeightRequest="30"  />

                     <Button Text="-&gt;" x:Name="Avanti"   WidthRequest="100" HeightRequest="30"   />

         </FlexLayout>

         <FlexLayout Direction="Row" >

             <Editor x:Name="Indirizzoweb" WidthRequest="400"  />

             <Button Text="Vai" x:Name="Vai"     WidthRequest="100" HeightRequest="30"   />

         </FlexLayout>

 

 

     </VerticalStackLayout>

       

 </ScrollView>

 

Come si è visto dal precedente codice impostando la proprietà “source” del controllo WeView, verrà aperto il sito non appena eseguiremo l’applicazione.

Stesura del codice

Ora scriviamo il codice per gestire la navigazione ed altre azioni da compiere.

All’evento click del pulsante con il nome “Vai”, scriveremo il codice che imposta il sito che sarà visualizzato nel controllo webView, utilizzando la proprietà Source.

Di seguito il frammento di codice delle suddette operazioni.

XAML

<Button Text="Vai" x:Name="Vai" Clicked="Vai_Clicked"   WidthRequest="100" HeightRequest="30"   />

C#

private void Vai_Clicked(object sender, EventArgs e)

 {

     if(Indirizzoweb.Text.Trim() != "") {

         navigazione.Source = "https://" + Indirizzoweb.Text.Replace("https://", "");

              

     }

           

 }

Ora non resta che testare il nostro applicativo per vedere il risultato atteso. Digitiamo nella casella di testo un sito per esempio “emanuelemattei.blogspot.com” e facciamo click sul pulsante “Vai”, vedremo aprirsi il nuovo sito.

Riprendiamo la stesura del codice, e nel pulsante denominato “Indietro” scrivere il codice che permette di aprire il sito precedentemente visto prima di aprirne uno. 

Tramite il metodo “GoBack”, verrà riaperto il sito che era visibile nel controllo WebView prima di aprirne uno nuovo.

Di seguito il frammento di codice delle suddette operazioni.

XAML

<Button Text="&lt;-" x:Name="Indietro" Clicked="Indietro_Clicked" WidthRequest="100" HeightRequest="30"  />

C#

private void Indietro_Clicked(object sender, EventArgs e)

{

    navigazione.GoBack();

}

Proviamo ad eseguire il codice, apriamo due siti tramite il pulsante “Vai” e dopo tale apertura facciamo click “Indietro”, in modo da vedere il sito precedente.

Terminate le varie prove, scriviamo il codice per il pulsante con il nome “Avanti”,  che permette di aprire il sito che si visto come prima di fare click sul pulsante “Indietro”. Tramite il metodo “GoForward” del controllo WebView, possiamo aprire il sito che si era visto prima di fare click sul pulsante “Indietro”.

Di seguito si riporta il frammento di codice delle suddette operazioni.

XAML

<Button Text="-&gt;" x:Name="Avanti" Clicked="Avanti_Clicked" WidthRequest="100" HeightRequest="30"   />

C#

private void Avanti_Clicked(object sender, EventArgs e)

 {

     navigazione.GoForward();

 }

Siamo giunti al termine della stesura del codice, non resta che scoprire due eventi del controllo WebView, riguardante la navigazione. In particolare l’evento di quando si sta cambiando sito “Navigating” o di quando si è terminato il caricamento di un nuovo sito (Navigated”.

Di seguito si riporta il frammento di codice delle suddette operazioni.

XAML

<WebView Source="https://www.iprogrammatori.it" WidthRequest="1000" x:Name="navigazione"  HeightRequest="400" Navigated="navigazione_Navigated" Navigating="navigazione_Navigating" />

               

C#

private void navigazione_Navigated(object sender, WebNavigatedEventArgs e)

{

    //Termine della navigazione

    string sito = e.Url;

    DisplayAlert("Risultato navigated", sito, "Chiudi");

}

 

private void navigazione_Navigating(object sender, WebNavigatingEventArgs e)

{

    //Appena passa ad un altro sito

    string sito = e.Url;

    DisplayAlert("Risultato navigated", sito, "Chiudi");

}

Conclusioni

L’articolo ha fornito al lettore alcuni concetti introduttivi di come dotare le applicazioni multipiattaforma realizzate con MAUI di un controllo per la navigazione internet. Per chi ha sviluppato in passato in ambito Windows Form, potrebbe trovare l’utilizzo del controllo WebView molto semplice e simile a quanto avrà sviluppato in tale ambito.

Il lettore in questi esempi basilari potrà dotare ed in maniera veloce e senza problemi l’utilizzo dei siti internet nei propri progetti.

MAUI è una tecnologia che offre al programmatore un valido strumento per la realizzazione delle applicazioni multipiattaforma, mettendo una serie di controlli e classi per uno sviluppo anche molto complesso.