Информация об изменениях

Сообщение Re: Hybrid Blazor apps in the Mobile Blazor Bindings July up от 23.07.2020 7:23

Изменено 23.07.2020 10:57 Serginio1

Re: Hybrid Blazor apps in the Mobile Blazor Bindings July up
https://devblogs.microsoft.com/aspnet/hybrid-blazor-apps-in-mobile-blazor-bindings-july-update/

Новая функция гибридных приложений позволяет смешивать компоненты Blazor native UI с компонентами Blazor web UI на одной странице. Этот просто огромен!
Гибридные приложения размещаются в новом BlazorWebViewкомпоненте, который использует компонент браузера для размещения веб-части приложения. Нет удаленного или локального веб-сервера; весь ваш код выполняется в процессе приложения.
Новый blazorhybridшаблон проекта, поддерживающий Android, iOS, Windows (WPF) и macOS для создания гибридных приложений
Обновленные зависимости: Xamarin.Формы 4.7, Xamarin.Essentials 1.5 и другие библиотеки.
Для использования нового предварительного просмотра требуется пакет SDK .NET Core 3.1



Как это работает?
В гибридных приложениях весь код (как для собственных частей пользовательского интерфейса, так и для веб-частей пользовательского интерфейса) выполняется на устройстве как .NET-код. Нет ни локального, ни удаленного веб-сервера, ни WebAssembly (WASM). .NET-код для всего приложения выполняется в одном процессе. Собственные компоненты пользовательского интерфейса выполняются как стандартные компоненты пользовательского интерфейса устройства (кнопка, метка и т. д.) и компоненты веб-интерфейса размещаются в представлении браузера (например, WebKit, Chromium и Edge WebView2). Компоненты могут совместно использовать состояние с помощью стандартных шаблонов .NET, таких как обработчики событий, инъекция зависимостей или что-то еще, что вы уже используете в своих приложениях сегодня.



Образец гибридного кода Blazor
Вот код для приложения, похожего на то, что было видно в верхней части этого поста. Он имеет собственный пользовательский интерфейс и веб-интерфейс, разделяющие одно и то же состояние приложения, работающие вместе в одном и том же процессе приложения (без веб-сервера или HTTP). Собственный пользовательский интерфейс использует новый <BlazorWebView>компонент, чтобы указать, какой веб-компонент следует загрузить и где найти статические веб-ресурсы. Блейзор делает всю работу.
Это главная страница собственного пользовательского интерфейса/Main.razor:


Это главная страница собственного пользовательского интерфейса/Main.razor:
@inject CounterState CounterState

<ContentView>
    <StackLayout>

        <StackLayout Margin="new Thickness(20)">
            <Label Text="@($"You pressed {CounterState.CurrentCount} times")" FontSize="30" />
            <Button Text="Increment from native" OnClick="@CounterState.IncrementCount" Padding="10" />
        </StackLayout>

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

    </StackLayout>
</ContentView>

@code {
    // initialization code
}


А это встроенная страница пользовательского интерфейса HTML/WebUI/App.razor:



@inject CounterState CounterState

<div style="text-align: center; background-color: lightblue;">
    <div>
        <span style="font-size: 30px; font-weight: bold;">
            You pressed @CounterState.CurrentCount times
        </span>
    </div>
    <div>
        <button style="margin: 20px;" @onclick="ClickMe">Increment from HTML</button>
    </div>
</div>

@code
{
    private void ClickMe()
    {
        CounterState.IncrementCount();
    }

    // initialization code
}



Вот он компромис!
Re: Hybrid Blazor apps in the Mobile Blazor Bindings July up
https://devblogs.microsoft.com/aspnet/hybrid-blazor-apps-in-mobile-blazor-bindings-july-update/

Новая функция гибридных приложений позволяет смешивать компоненты Blazor native UI с компонентами Blazor web UI на одной странице. Этот просто огромен!
Гибридные приложения размещаются в новом BlazorWebViewкомпоненте, который использует компонент браузера для размещения веб-части приложения. Нет удаленного или локального веб-сервера; весь ваш код выполняется в процессе приложения.
Новый blazorhybridшаблон проекта, поддерживающий Android, iOS, Windows (WPF) и macOS для создания гибридных приложений
Обновленные зависимости: Xamarin.Формы 4.7, Xamarin.Essentials 1.5 и другие библиотеки.
Для использования нового предварительного просмотра требуется пакет SDK .NET Core 3.1



Как это работает?
В гибридных приложениях весь код (как для собственных частей пользовательского интерфейса, так и для веб-частей пользовательского интерфейса) выполняется на устройстве как .NET-код. Нет ни локального, ни удаленного веб-сервера, ни WebAssembly (WASM). .NET-код для всего приложения выполняется в одном процессе. Собственные компоненты пользовательского интерфейса выполняются как стандартные компоненты пользовательского интерфейса устройства (кнопка, метка и т. д.) и компоненты веб-интерфейса размещаются в представлении браузера (например, WebKit, Chromium и Edge WebView2). Компоненты могут совместно использовать состояние с помощью стандартных шаблонов .NET, таких как обработчики событий, инъекция зависимостей или что-то еще, что вы уже используете в своих приложениях сегодня.



Образец гибридного кода Blazor
Вот код для приложения, похожего на то, что было видно в верхней части этого поста. Он имеет собственный пользовательский интерфейс и веб-интерфейс, разделяющие одно и то же состояние приложения, работающие вместе в одном и том же процессе приложения (без веб-сервера или HTTP). Собственный пользовательский интерфейс использует новый <BlazorWebView>компонент, чтобы указать, какой веб-компонент следует загрузить и где найти статические веб-ресурсы. Блейзор делает всю работу.
Это главная страница собственного пользовательского интерфейса/Main.razor:


Это главная страница собственного пользовательского интерфейса/Main.razor:
@inject CounterState CounterState

<ContentView>
    <StackLayout>

        <StackLayout Margin="new Thickness(20)">
            <Label Text="@($"You pressed {CounterState.CurrentCount} times")" FontSize="30" />
            <Button Text="Increment from native" OnClick="@CounterState.IncrementCount" Padding="10" />
        </StackLayout>

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

    </StackLayout>
</ContentView>

@code {
    // initialization code
}


А это встроенная страница пользовательского интерфейса HTML/WebUI/App.razor:



@inject CounterState CounterState

<div style="text-align: center; background-color: lightblue;">
    <div>
        <span style="font-size: 30px; font-weight: bold;">
            You pressed @CounterState.CurrentCount times
        </span>
    </div>
    <div>
        <button style="margin: 20px;" @onclick="ClickMe">Increment from HTML</button>
    </div>
</div>

@code
{
    private void ClickMe()
    {
        CounterState.IncrementCount();
    }

    // initialization code
}



Вот он компромис!

https://docs.microsoft.com/ru-ru/mobile-blazor-bindings/