Hola mundo: ¿cómo funciona?

Importante

Este proyecto es una versión experimental. Esperamos que pruebes enlaces blazor móviles experimentales y proporciones comentarios en https://github.com/xamarin/MobileBlazorBindings.

Nota

Esta página es una continuación del tutorial Compilación de la primera aplicación . Se recomienda completar ese tutorial antes de continuar.

Echemos un vistazo al proyecto inicial que se creó en el tutorial anterior para obtener más información sobre cómo usar enlaces blazor móviles experimentales.

El proyecto principal que se va a examinar es el proyecto compartido que contiene los .razor archivos. Los proyectos de Android e iOS no contienen ningún código específico de los enlaces blazor móviles experimentales.

Estos son los archivos del proyecto compartido:

• _Imports.razor : contiene directivas comunes que se aplican a todos los demás .razor archivos de esta carpeta y sus subcarpetas. Las subcarpetas pueden tener sus propios _Imports.razor archivos con directivas adicionales. El tipo de directiva más común en este archivo es la @using directiva , que se usa para importar un espacio de nombres en .razor archivos, exactamente igual que una instrucción de C# using .
• App.cs : contiene el punto de entrada principal de la interfaz de usuario de la aplicación, representado por una clase que deriva de la Xamarin.Forms.Application clase base. El constructor de esta clase crea una instancia de un host genérico, agrega servicios al host (el proyecto predeterminado no tiene ninguno) y, a continuación, usa el host para agregar un componente blazor denominado HelloWorld al elemento de aplicación (this).
• Counter.razor - Contiene un componente blazor denominado Counter.
• HelloWorld.razor - Contiene un componente blazor denominado HelloWorld.

Vamos a profundizar en los dos componentes de Blazor para ver cómo funcionan.

Componente blazor de contador

Este componente contiene dos secciones:

1. Marcado que define los elementos de la interfaz de usuario y sus propiedades asociadas y controladores de eventos:

   <Frame CornerRadius="10" BackgroundColor="Color.LightBlue">
   
       <StackLayout Orientation="StackOrientation.Horizontal" HorizontalOptions="LayoutOptions.Center">
   
           <Button Text="Increment" OnClick="IncrementCount" />
   
           <Label Text="@("The button was clicked " + count + " times")"
               FontAttributes="FontAttributes.Bold"
               VerticalTextAlignment="TextAlignment.Center" />
   
       </StackLayout>
   
   </Frame>
   

   Las etiquetas de tipo HTML representan componentes de interfaz de usuario que coinciden con los componentes de Xamarin.Forms y sus propiedades y eventos. Algunas propiedades tienen valores calculados, como la Label propiedad del Text componente, que tiene su valor establecido en un valor calculado por código de C#, que se indica mediante el @( ... ) bloque de expresión.

   Cuando se ejecuta un controlador de eventos, como el Button evento del OnClick componente, el componente vuelve a representarse automáticamente, lo que permite que la interfaz de usuario se actualice sin ninguna lógica adicional. Los escenarios más avanzados pueden controlar qué componentes se vuelven a representar y cuándo.

2. Código que implementa cualquier controlador de eventos u otra funcionalidad de componente, encapsulado en un @code { ... } bloque:

   int count;
   
   void IncrementCount()
   {
       count++;
   }
   

   Este código incrementa el count campo , que también se usa como valor calculado de la Label propiedad del Text componente. Una vez ejecutado el IncrementCount() controlador de eventos, se usará el nuevo valor de count cuando se vuelva a representar la interfaz de usuario.

Componente Blazor HelloWorld

El componente HelloWorld solo contiene marcado:

<ContentView>
    <StackLayout Margin="new Thickness(20)">

        <Label Text="Hello, World!"
               FontSize="40" />

        <Counter />

    </StackLayout>
</ContentView>

Tenga en cuenta que en este componente se hace referencia al Counter componente haciendo referencia a él como una etiqueta <Counter />.

Cada componente de Blazor se compila en una clase con el mismo nombre que el archivo. El espacio de nombres es el espacio de nombres raíz del proyecto, además de los nombres de carpeta, si los hay, separados por puntos (.). Otro código de C# puede hacer referencia al tipo a través de su nombre de tipo (no común) o en un .razor archivo mediante su uso como etiqueta.