Condividi tramite

Hallo Welt ibrida: come funziona?

  • Articolo

Importante

Questo progetto è una versione sperimentale. Speriamo di provare le associazioni Sperimentale blazor per dispositivi mobili e fornire feedback all'indirizzo https://github.com/xamarin/MobileBlazorBindings.

Nota

Questa pagina è una continuazione della procedura dettagliata Creare la prima app ibrida . È consigliabile completare la procedura dettagliata prima di continuare.

Suggerimento

Per un esempio più semplice, iniziare con la procedura dettagliata Creare la prima app e la procedura dettagliata Hallo Welt successiva che illustra alcune funzionalità di base di Blazor.

Esaminiamo ora il progetto iniziale creato nella procedura dettagliata precedente per altre informazioni su come usare le associazioni blazor per dispositivi mobili sperimentali per le app ibride.

Il progetto principale da esaminare è il progetto condiviso che contiene i .razor file. I progetti specifici della piattaforma contengono solo codice minimo specifico per le associazioni Blazor per dispositivi mobili sperimentali.

Questi sono i file e le cartelle rilevanti nel progetto condiviso:

Cartella radice

  • _Imports.razor - Contiene direttive comuni applicate a tutti gli altri .razor file in questa cartella e alle relative sottocartelle. Le sottocartelle possono avere i propri _Imports.razor file con direttive aggiuntive. Il tipo di direttiva più comune in questo file è la @using direttiva , che viene usata per importare uno spazio dei nomi in .razor file, esattamente come un'istruzione C# using .
  • App.cs : contiene il punto di ingresso principale dell'interfaccia utente dell'applicazione, rappresentato da una classe che deriva dalla Xamarin.Forms.Application classe di base. Il costruttore di questa classe crea un'istanza di un host, aggiunge servizi all'host e quindi usa l'host per aggiungere un componente Blazor denominato Main alla pagina principale dell'applicazione.
  • CounterState.cs - Contiene un servizio che tiene traccia di un valore del contatore e offre API correlate. Questo servizio viene usato nelle parti native e HTML dell'app.
  • Main.razor - Contiene il componente principale dell'interfaccia utente Blazor dell'app. Contiene un'interfaccia utente nativa e anche un BlazorWebView componente che ospita la parte HTML dell'app.

Cartelle WebUI e wwwroot

Queste cartelle contengono la web part dell'app, ovvero ciò che rende questa app ibrida. I file e le cartelle qui corrispondono a quanto trovato in un'app Web Blazor.

  • WebUI/_Imports.razor - Contiene direttive comuni per la web part dell'app.
  • WebUI/App.razor - Contiene il punto di ingresso principale per la web part dell'app.
  • WebUI/Pages folder: contiene pagine navigabili create usando la sintassi Web Blazor. Tutti .razor i file eseguono il rendering html e condividono lo stato dell'app con il resto dell'app.
  • WebUI/Shared folder: contiene componenti dell'interfaccia utente riutilizzabili condivisi creati con la sintassi Web Blazor. I .razor file qui eseguono il rendering del codice HTML e vengono usati in altre pagine dell'app. Questa cartella contiene anche il MainLayout componente che definisce la forma complessiva della web part dell'app.
  • wwwroot folder: contiene asset Web statici usati nella web part dell'app. Si tratta in genere di file e immagini CSS.

Esaminiamo i file interessanti.

App.cs punto di ingresso

Il punto di ingresso per l'interfaccia utente dell'app si trova in questa pagina. Configura i servizi per l'app e quindi inizializza l'interfaccia utente collegando un componente Mobile Blazor Bindings all'elemento MainPage .

Vengono registrati due set di servizi:

  1. services.AddBlazorHybrid() aggiunge i servizi richiesti da Mobile Blazor Bindings per ospitare componenti Web Blazor nell'interfaccia utente nativa.
  2. services.AddSingleton<CounterState>() aggiunge un servizio specifico dell'app che può essere usato da qualsiasi posizione dell'applicazione, inclusi file di codice, componenti Blazor e altri servizi. Si tratta di un servizio singleton, il che significa che al massimo verrà creata un'istanza di , consentendo così la condivisione dello stato.

Mer informasjon sui servizi e sull'inserimento delle dipendenze nell'argomento inserimento delle dipendenze.

Main.razor pagina dell'interfaccia utente nativa

Questa è la pagina principale dell'interfaccia utente nativa dell'app. Contiene diversi componenti nativi dell'interfaccia utente, ad esempio <Label> e <Button>. Contiene anche un <BlazorWebView> componente che ospita il contenuto Web Blazor:

<BlazorWebView VerticalOptions="LayoutOptions.FillAndExpand">
    <FirstBlazorHybridApp.WebUI.App />
</BlazorWebView>

Altre cose interessanti:

  • Il <FirstBlazorHybridApp.WebUI.App /> tag è il modo in cui la parte nativa dell'app fa riferimento alla web part dell'app.
  • La @inject direttiva viene usata per fare riferimento al CounterState servizio.
  • I OnInitialized metodi e Dispose vengono implementati per collegare/scollegare un StateChanged gestore eventi in modo che questa pagina dell'interfaccia utente venga aggiornata ogni volta che il servizio indica che il CounterState contatore è stato modificato.

Servizio CounterState.cs

Questa classe definisce un servizio registrato in App.cs. Contiene lo stato, le API e gli eventi usati per tenere traccia e segnalare lo stato del contatore. Vari componenti dell'interfaccia utente nell'app usano questo servizio per visualizzare l'interfaccia utente e sapere quando aggiornarlo,

Mer informasjon sui servizi e sull'inserimento delle dipendenze nell'argomento inserimento delle dipendenze.

WebUI/App.razor punto di ingresso Web

Questo file è il punto di ingresso principale blazor per la web part dell'applicazione. Usa funzionalità Blazor standard, ad esempio router. Questo componente determina la pagina Web Blazor da visualizzare in base alla route corrente o mostra un errore se non viene trovata alcuna pagina Web.

WebUI/Shared/MainLayout.razor layout Web

Comune alla maggior parte delle app Web Blazor, questo componente definisce il layout complessivo della web part dell'app. Qui è possibile includere elementi comuni, ad esempio navigazione, intestazioni e piè di pagina usati nella web part dell'app.

WebUI/Pages/Index.razor pagina Web

Contiene una pagina esplorabile di contenuto Web. La Index pagina è in genere la pagina predefinita caricata prima di qualsiasi navigazione

wwwroot Cartella degli asset Web statici

Questa cartella contiene asset Web statici usati nella web part dell'app. Ovvero, questi file vengono gestiti così come sono dal componente del Web browser. Viene fatto riferimento usando il modello di percorso del file statico Blazor, ovvero _content/<PROJECT_NAME>/path/to/the/file.css. In questo progetto, ad esempio, viene fatto riferimento a un file CSS che si trova in wwwroot/css/bootstrap/bootstrap.min.css come _content/FirstBlazorHybridApp/css/bootstrap/bootstrap.min.css.

Questi file vengono incorporati nell'applicazione e vengono gestiti automaticamente dalle associazioni Blazor per dispositivi mobili. I file in questa cartella possono essere letti dal codice usando il IFileProvider servizio e chiamando FileProvider.GetFileInfo("_content/<PROJECT_NAME>/path/to/the/file.txt"), come illustrato nel file dell'app WebUI/Pages/FetchData.razor .

Questo progetto contiene la libreria CSS Bootstrap per fornire stili per scenari comuni dell'interfaccia utente.

index.html file nei progetti Android/iOS/macOS/Windows

Ogni progetto specifico della piattaforma contiene un index.html file che rappresenta la pagina contenitore per l'interfaccia utente Web Blazor e include riferimenti ai file CSS.

Il percorso del file in ogni piattaforma è il seguente:

  • Android: wwwroot/index.html
  • iOS: Resources/wwwroot/index.html
  • macOS: Resources/wwwroot/index.html
  • Windows: wwwroot/index.html

Altri file

È consigliabile esplorare tutti i file nell'applicazione per apprendere il contenuto e il modo in cui interagiscono.