Componente de interfaz NanUI | .Net / .Net Core Versión oficial de NanUI 0.7 lanzada oficialmente

Others 2020-04-21 08:02:14 views: null

El 10 de febrero de 2020, se lanzó oficialmente la versión 0.7 de NanUI.

Mirando hacia atrás el año pasado, estaba confuso. Demasiada presión y variables en la vida y el trabajo me cansan física y mentalmente. Fui testigo del sufrimiento de mis seres queridos que padecen enfermedades. La vida y la muerte implacables me dejaron hundido durante mucho tiempo. Estoy extremadamente confundido acerca de mi futura planificación de carrera. Demasiadas cosas me abruman, así que también dejé de lado el desarrollo del proyecto NanUI. Quisiera expresar mis profundas disculpas a todos los amigos que le han dado a NanUI la expectativa. A medida que pasaba el tiempo, inconscientemente, el tiempo en 2019 pasó en mi vida y llegué a noviembre en un abrir y cerrar de ojos. Al mirar las Notas de lanzamiento vacías en GitHub, decidí que ya no podía dejar que NanUI se estancara, se calmara y me vaciara. Entonces, comenzó la iteración de la nueva versión de NanUI, y la propagación de la epidemia de Wuhan, y la compañía se detuvo indefinidamente, tomó casi cuatro meses completar la iteración de la nueva versión. Básicamente, se puede decir que la versión de esta versión comienza desde abajo: todo el proyecto se reescribe básicamente: se reescribió la lógica de la ventana de alojamiento, se reemplazó el núcleo con CefGlue y se tomó prestada la API de Chromely. Después de una prueba preliminar, puede considerarse como una iteración de NanUI desde cero, que es bastante satisfactoria de 0.1 a 0.6.

0.7 contenido principal

  • El marco ChromiumEmbedded se actualiza a la versión 77.1.18.
  • Continúe reteniendo ChromiumFX como el núcleo de representación inferior de NanUI.
  • Recargó la ventana de alojamiento sin bordes.
  • Modificó el método de inicialización de NanUI y usó FluentAPI para escribir el proceso de inicio.
  • Reconstruido CefResourceHandler, realizó el marco básico de CustomResourceHandler, conveniente para que los usuarios personalicen sus propios manejadores de recursos.
  • AssemblyResourceHandler y FolderResourceHandler se han eliminado de NanUI. Estos dos manejadores de recursos ahora están separados en el mantenimiento de proyectos independientes.
  • Se ha agregado un nuevo procesador de recursos RESTfulResourceHandler. El uso de RESTfulResourceHandler puede proporcionar fácilmente varios datos al cliente. Los usuarios ya no necesitan proporcionar datos al cliente inyectando código JS. Se siente mejor usar ajax.
  • Reconstruyó la lógica de la presentación de ventanas. En la nueva versión, los usuarios ya no necesitan prestar atención a la creación y el diseño de ventanas con navegador. La fábrica dentro de NanUI reemplaza a los usuarios para completar estas tareas. Al mismo tiempo, también deja una interfaz realizable para multiplataforma en el futuro.
  • Soporte agregado para .NET CORE 3.1.
  • El paquete NuGet ha sido mejorado. Ahora los proyectos dependientes de NanUI generarán automáticamente la estructura de directorios de proyectos dependientes basados ​​en el marco .NET del proyecto de destino (.NET Framework / .NET Core) y la arquitectura de la plataforma (x86 / x64 / AnyCPU).
  • Se corrigieron varios errores en la versión 0.6.

A continuación, continuaré presentando el uso básico de la versión 0.7.

Dirección del proyecto

GitHub: https://github.com/NetDimension/NanUI/
Gitee: https://gitee.com/linxuanchen/NanUI

Documentos y columnas

Bienvenido a NanUI 0.7

¡Gracias por elegir el marco de código abierto NanUI para .NET Framework / .NET Core!

NanUI es un proyecto de código abierto .NET que es adecuado para los desarrolladores de .NET / .NET Core que desean usar HTML5 / CSS3 y otras tecnologías front-end para crear interfaces de usuario de aplicaciones de formularios Windows Forms. Puede utilizar cualquier tecnología front-end con la que esté familiarizado para crear una interfaz de usuario de la aplicación WinForm.

Se recomienda encarecidamente que utilice el modo de aplicación de página única (SPA) para crear la interfaz, ya que esto puede brindar a los usuarios una mejor experiencia operativa. Los marcos JavaScript principales, como Angular, React y Vue son opciones inteligentes que se pueden usar para construir aplicaciones SPA.

Este marco traerá posibilidades ilimitadas para su trabajo de diseño de interfaz de software.

Comience con NanUI

Requisitos del entorno de desarrollo.

Para crear una aplicación NanUI, su entorno de desarrollo debe cumplir las siguientes condiciones:

  • Entorno de desarrollo preferido Visual Studio 2019

    • Si necesita compilar el código fuente del proyecto NanUI, debe usar VS2019, porque solo VS2019 puede compilar el código fuente del proyecto .NET CORE 3.1.
    • Puede usar versiones anteriores de Visual Studio (como VS2012) para desarrollar aplicaciones basadas en .NET Framework.
    • Si necesita desarrollar una aplicación basada en el framework .NET Core 3.1, actualmente solo tiene VS2019 para elegir.

  • El entorno operativo del cliente es Windows 7 SP1 y versiones posteriores de Windows.

    • Después de la versión NanUI 0.7, no se proporciona soporte para el sistema Windows XP. Si necesita desarrollar aplicaciones para el sistema Windows XP, continúe utilizando la versión 0.6.2526.
    • La implementación de la función adaptativa HighDPI de NanUI requiere Windows 10 Createors Update o una versión superior del sistema Windows 10.

Dependencias de NanUI

NanUI se basa en ChromiumFX, que es una implementación de Chromium Embedded Framework (CEF) de .NET.

El funcionamiento de NanUI 0.7 depende del archivo binario Chromium Embedded Framework (CEF) 77.1.18 y la versión correspondiente del archivo binario ChromiumFX. Puede elegir descargar o compilar estos binarios manualmente, o puede instalar estas dependencias automáticamente a través del administrador de paquetes Nuget.

Descargar o compilar dependencias manualmente

Marco integrado de cromo (CEF) 框架

Puede descargar la versión compilada y correspondiente de los binarios de CEF desde http://opensource.spotify.com/cefbuilds/index.html :

Si tiene una rica experiencia en el desarrollo de CEF, también puede compilar el marco de CEF de acuerdo con las directrices oficiales de CEF [1] . Puede agregar más funciones personalizables compilando el marco CEF usted mismo [2] .

ChromiumFX

Puede descargar el código fuente de la versión 77.1.18.0 desde el sitio de alojamiento del proyecto ChromiumFX y compilar los archivos binarios bajo la arquitectura x86 y la plataforma de arquitectura x64 de acuerdo con las pautas:

  • libcfx.dll-Windows 32 bits
  • libcfx64.dll-Windows 64 bit

Instalar dependencias usando el administrador de paquetes NuGet

PM> Install-Package NetDimension.NanUI.Runtime

El gestor de paquetes NuGet generará automáticamente estructuras de archivos y directorios dependientes del proyecto en función de la información de arquitectura de su proyecto. No necesita prestar atención a la información de la estructura de directorios, que también es la forma más rápida y fácil.

Compile el código fuente de NanUI o use un paquete binario

Puede obtener todo el código fuente de NanUI de GitHub y usar VS2019 para compilar el código fuente, o instalar el paquete binario de NanUI a través de NuGet.

  • Código fuente del proyecto NanUI : https: //github.com/NetDimension/NanUI/
  • Instale NuUI usando el administrador de paquetes NuGet
PM> Install-Package NetDimension.NanUI

Paquetes binarios relacionados con NanUI

La siguiente tabla muestra los paquetes NuGet e información relacionada del proyecto NanUI.

Nombre del proyecto Marco Explicación
NetDimension.NanUI .NET Framework 4.0+ / .NET Core 3.1 Debe hacer referencia a esta biblioteca para crear una aplicación NanUI, que es la biblioteca principal de NanUI.
NetDimension.NanUI.Runtime .NET Framework 4.0+ / .NET Core 3.1 Las dependencias de NanUI incluyen los binarios marco CEF y los binarios CFX.
NetDimension.NanUI.Subprocess .NET Framework 4.0+ / .NET Core 3.1 El archivo ejecutable del subproceso de NanUI, si utiliza la función UseDefaultSubprocess de NanUI, debe instalar este paquete.
NetDimension.NanUI.AssemblyResourceHandler .NET Framework 4.0+ / .NET Core 3.1 Controlador de recursos integrado.
NetDimension.NanUI.FileResourceHandler .NET Framework 4.0+ / .NET Core 3.1 Controlador de recursos de archivos.
NetDimension.NanUI.RestfulResourceHandler .NET Framework 4.0+ / .NET Core 3.1 Controlador de recursos de datos REST.

Crea la primera aplicación NanUI

NanUI se basa en el núcleo del navegador Chromium, por lo que puede utilizar cualquier tecnología front-end con la que esté familiarizado para crear su aplicación de escritorio. También puede inyectar objetos o métodos .NET en el entorno Javascript; además de usar un procesador de recursos, también puede proporcionar fácilmente contenido como archivos, multimedia y datos al entorno web.

Puede pensar en NanUI como un navegador optimizado de Chromium integrado en WinForm. Este navegador reemplaza el lienzo de la interfaz tradicional de WinForm, por lo que puede usar su imaginación para usar cualquier tecnología front-end web para diseñar su interfaz de formulario .

No solo eso, también puede conservar todas las características del marco .NET, ser capaz de utilizar EntityFramework, ser capaz de utilizar múltiples hilos e incluso interactuar con sus dispositivos de hardware de cualquier manera y retroalimentar la información relevante al entorno web. No solo satisface las necesidades de diseñar una interfaz de usuario hermosa, sino que también conserva el poderoso entorno ecológico de .NET.

Lea los pasos a continuación y crearemos su primera aplicación NanUI juntos.

Elija un marco .NET

Puede elegir usar la aplicación Windows Form (WinForm) para .NET Framework o .NET Core framework de acuerdo con las necesidades del proyecto real. Para ambos tipos de aplicaciones de formulario, todas las interfaces API son iguales y puede migrar fácilmente de un marco a otro.

Seguridad NanUI

Ahora, necesita instalar NanUI y sus dependencias. Se recomienda que use la administración de paquetes NuGet para instalarlos. Ejecute el siguiente comando en el administrador de paquetes para instalar:

Seguridad NanUI

PM> Install-Package NetDimension.NanUI

Instalar dependencias de tiempo de ejecución de NanUI

PM> Install-Package NetDimension.NanUI.Runtime

Hacer un formulario HTML simple

NanUI usa una nueva fábrica para crear ventanas con navegador, por lo que no necesitamos diseñar formularios y controles a través del diseñador de formularios como de costumbre. Por lo tanto, podemos eliminar directamente el formulario Form1.cs creado automáticamente para nosotros en la plantilla del proyecto.

Cree un nuevo MainWindow.cs y permítale heredar la clase base NetDimension.NanUI.Formium e implementar todas las interfaces abstractas de esta clase:

using NetDimension.NanUI;
using NetDimension.NanUI.Browser;

class MainWindow : Formium
{
    public override string StartUrl => "https://www.google.com";

    public override HostWindowType WindowType => HostWindowType.Standard;

    protected override Control LaunchScreen => null;

    public MainWindow()
    {
        Title = "第一个NanUI应用"
    }
    
    protected override void OnWindowReady(IWebBrowserHandler browserClient)
    {
        
    }

    protected override void OnRegisterGlobalObject(JSObject global)
    {
        
    }
}

Modifique la propiedad StartUrl para especificar la dirección Url a la que se accederá al inicio.

public override string StartUrl => "https://www.google.com";

Especifique la propiedad WindowType y elija si el formulario se muestra en su estilo nativo o sin bordes.

 public override HostWindowType WindowType => HostWindowType.Standard;

Use la propiedad LaunchScreen para devolver un control de usuario personalizado, que se usa para mostrar la pantalla de espera cuando se carga la página web, generalmente puede ser un PictureBox, colocar una imagen estática o una imagen GIF para informar al usuario del estado de inicio de la aplicación. Si esta función no es necesaria, devuelva nulo.

protected override Control LaunchScreen => null;

Con el método de sobrecarga OnWindowReady, puede configurar cada procesador del cliente Chromium con el parámetro browserClient para implementar diversos comportamientos del navegador Chromium, como: cómo manejar nuevas ventanas, cómo manejar solicitudes de descarga y cómo notificar el título de la página web de la aplicación Cambios, etc.

Este método generalmente se ejecuta después de completar la inicialización del núcleo del navegador Chromium.

Si no necesita definir un procesador de comportamiento, simplemente déjelo en blanco.

protected override void OnWindowReady(IWebBrowserHandler browserClient)
{

}

Usando el método de sobrecarga OnRegisterGlobalObject, puede registrar varios objetos y métodos .NET en el contexto Javascript del navegador. Puede considerar el parámetro de este método de sobrecarga global como el objeto de ventana del navegador. El método de implementación específico puede referirse a los siguientes capítulos.

protected override void OnRegisterGlobalObject(JSObject global)
{

}

A través de las operaciones anteriores, ha completado su primera ventana de NanUI, que utilizará el contenido de google.com como interfaz de su formulario.

Pero hasta ahora, la aplicación no ha podido ejecutarse normalmente, porque todavía necesitamos inicializar el entorno NanUI y CEF.

Inicialice el entorno de marco de NanUI y Chromium Embedded

Necesitamos poner el método Main para inicializar la operación de NanUI y CEF.


using NetDimension.NanUI;

static class Program
{
    /// <summary>
    ///  The main entry point for the application.
    /// </summary>
    [STAThread]
    static void Main()
    {
        Bootstrap
            .Initialize()
            .Run(() => new MainWindow());
    }
}

En este punto, su primera aplicación NanUI ha podido ejecutarse normalmente.

Personaliza tu ventana aún más

Si desea personalizar aún más el estilo de su ventana, sobrecargue el método OnStandardFormStyle y use el parámetro de estilo para establecer la posición de inicio de la ventana, el tamaño, el icono, el estilo del borde y otra información.

protected override void OnStandardFormStyle(IStandardHostWindowStyle style)
{
    base.OnStandardFormStyle(style);

    style.Width = 1280;
    style.Height = 720;
    style.Icon = System.Drawing.SystemIcons.WinLogo;
    style.StartPosition = FormStartPosition.CenterScreen;
}

Ejecute su primera aplicación NanUI

Como se muestra en la figura, su primera aplicación NanUI se ejecuta con éxito.

Resultado de la operación

Ejemplos de uso básico de NanUI

Este ejemplo le mostrará cómo ejecutar NanUI con un código mínimo.

Estación B: https://www.bilibili.com/video/av87654190/

Video de sandía: https://www.ixigua.com/i6791108584999485955

Use estilos sin bordes en su aplicación NanUI

A través de la introducción del documento en el capítulo anterior, ha aprendido los conceptos básicos para crear una aplicación NanUI y crear una ventana para el navegador Formium. Después de crear la aplicación utilizando las mismas rutinas que se describen en el documento anterior, solo necesita configurar WindowType del formulario alojado en el navegador en modo Sin bordes para crear un formulario de estilo sin bordes.

Este capítulo presentará principalmente los puntos de conocimiento relevantes de la forma de estilo sin bordes. El contenido involucra el CSS especial en el sistema NanUI, los atributos de etiqueta html únicos de Nanui, los objetos Javascript y los eventos globales.

Establecer el formulario de alojamiento en estilo sin bordes

Especifique la propiedad WindowType como Sin bordes para permitir que el formulario se represente en un estilo sin bordes.

 public override HostWindowType WindowType => HostWindowType.Borderless;

Establecer área arrastrable / no arrastrable

Cuando el formulario se presenta en un estilo sin bordes, la ventana predeterminada pierde la barra de título de la ventana nativa y su área de control, por lo que el formulario no se puede mover arrastrando. En este momento, debe determinar qué parte de la página web admite arrastrar y soltar estableciendo una propiedad CSS especial -webkit-app-region. Puede crear áreas con forma de arrastre y no arrastrables mediante un diseño flexible .

Establecer área arrastrable

.draggable-area {
    -webkit-app-region: drag;
}

Establecer área no dragable

.draggable-area {
    -webkit-app-region: no-drag;
}

Use el siguiente código de muestra para dibujar un área rectangular arrastrable y excluya el área rectangular con className = "controles" en el área.

HTML

<div class="titlebar">
    <span>Welcome to NanUI</span>
    <div class="controls">
        <a title="Minimize" class="control-btn">
            <svg x="0px" y="0px" viewBox="0 0 10.2 1" data-radium="true" style="width: 10px; height: 10px;"><rect fill="#ffffff" width="10.2" height="1"></rect></svg>
        </a>
        <a title="Maximize" class="control-btn">
            <svg x="0px" y="0px" viewBox="0 0 10.2 10.1" data-radium="true" style="width: 10px; height: 10px;"><path fill="#ffffff" d="M0,0v10.1h10.2V0H0z M9.2,9.2H1.1V1h8.1V9.2z"></path></svg>
        </a>
        <a title="Close" class="control-btn">
            <svg x="0px" y="0px" viewBox="0 0 10.2 10.2" data-radium="true" style="width: 10px; height: 10px;"><polygon fill="#ffffff" points="10.2,0.7 9.5,0 5.1,4.4 0.7,0 0,0.7 4.4,5.1 0,9.5 0.7,10.2 5.1,5.8 9.5,10.2 10.2,9.5 5.8,5.1 "></polygon></svg>
        </a>
    </div>
</div>

SCSS

.titlebar {
    // scss ...
    -webkit-app-region: drag;

    > controls {
        // scss ...
        -webkit-app-region: no-drag;
    }
}

Utilice los comandos integrados de NanUI

NanUI tiene un atributo html incorporado nanui-command, a través del cual puede realizar rápidamente los comandos de maximización, minimización, restauración y cierre de ventanas de formas sin bordes.

Por ejemplo, establecer nanui-command = "close" puede cerrar el formulario después de hacer clic en este elemento.

<a title="Minimize" class="control-btn" nanui-command="close">
    // 关闭按钮 ...
</a>

El valor del atributo nanui-command tiene los siguientes grupos:

Nombre del atributo Rol de mando
maximizar Maximiza la ventana
minimizar Minimizar ventana
restaurar Restaurar ventana
cerrar Cerrar la ventana actual

El objeto NanUI en el navegador

NanUI registra el objeto NanUI en el entorno Javascript de Chromium, a través del cual puede obtener información sobre el formulario actual o utilizar las funciones integradas para cambiar los distintos estados del formulario.

Elefante NanUI

  • version - type: object | Objeto de información de versión de NanUI
    • cef - type: string | Mostrar cadena de versión CEF
    • el cromo - del tipo: String | Visualización de la versión de cadena CEF
    • nanui - type: string | Muestra la cadena de la versión NanUI
  • hostWindow - tipo: objeto | objeto de ventana de host NanUI
    • Close () - del tipo: Función | Cerrar ventana portador
    • Maximizar () - del tipo: Función | maximizar llevar ventana
    • Minimizar el () - del tipo: Función | minimizar la ventana de llevar
    • Restaurar () - del tipo: Función | restaurar portador ventana
    • la moveTo (x, y) - función: tipo | posición el soporte a la ventana de x, y de
    • sizeTo (anchura, altura) - tipo: función | ventana conjunto anchura se lleva a anchura, altura altura
    • height - type: integer | La altura de la ventana de alojamiento actual
    • ancho - tipo: entero | El ancho de la ventana de alojamiento actual
    • state - type: object | Estado detallado de la ventana de alojamiento de NanUI
      • clientHeight - type: integer | Altura del área del cliente de la ventana de alojamiento
      • clientWidth - type: integer | El ancho del área del cliente de la ventana de alojamiento
      • height - type: integer | Altura de la ventana de apoyo
      • ancho - tipo: entero | el ancho de la ventana de alojamiento
        • windowState - type: object | El objeto de estado que maximiza la ventana y la minimiza
          • state - type: string | Nombre del estado de la ventana de alojamiento [normal | minimizado | maximizado]
          • código - tipo: objeto | Código para el estado de la ventana portadora [0: normal | 1: minimizado | 2: maximizado]

Eventos personalizados en el navegador

Además de registrar objetos en el entorno Javascript de Chromium, NanUI también registra algunos eventos de notificación que llevan cambios de ventana. Puede capturar estos eventos registrando controladores de eventos para lograr diversas funciones.

  • Hostactived: la ventana del host se enfoca y se activa

  • hostdeactivate: la ventana del host pierde el foco

  • hostactivestatechange - cambio de estado del foco de la ventana del host

    • Parámetros: tipo activo : booleano | estado activado [verdadero: ganar foco | falso: perder foco]

  • hoststatechange : la ventana de host maximiza y minimiza los cambios de estado

    • Parámetros: tipo de estado : cadena | Nombre de estado de la ventana portadora [normal | minimizado | maximizado]
    • Parámetro: tipo de código : entero | Código de estado de la ventana de marcación [0: normal | 1: minimizado | 2: maximizado]

  • hostsizechange - cambio de tamaño del estado de la ventana del host

    • Parámetros: ancho- tipo: entero | El ancho del área del cliente de la ventana de alojamiento
    • Parámetros: height- type: integer | Altura del área del cliente de la ventana de alojamiento

Por ejemplo, podemos agregar diferentes estilos al formulario capturando el evento que maximiza y minimiza el cambio de estado de la ventana de alojamiento:

window.addEventListener("hoststatechange", e => {
    if (e.detail.code === 2) {
        console.log("最大化状态");
    } else if(e.detail.code === 1) {
        console.log("最小化状态");
    }
    else {
        console.log("正常状态");
    }
});

Ejemplo usando el modo sin bordes

Este ejemplo le mostrará cómo usar React y React Desktop para crear una interfaz de usuario para una aplicación de escritorio .NET CORE 3.1.

Estación B: https://www.bilibili.com/video/av87654610/

Video de sandía: https://www.ixigua.com/i6791109614734672391/

Dirección del proyecto GitHub: https://github.com/XuanchenLin/using-react-desktop-with-nanui-0.7

Ejemplo de modo sin bordes

Gracias

NanUI ha pasado cuatro años desde el nacimiento hasta el presente. Aunque ha recibido varios insultos y abusos de Internet durante este período, es más alentado y apoyado por todos. Gracias de nuevo por su atención y comprensión. Gracias

NanUI es un proyecto de código abierto basado en el acuerdo MIT y es completamente gratuito. Sin embargo, sin el apoyo financiero adecuado, el mantenimiento del proyecto y el desarrollo de nuevas funciones no pueden ser sostenidos. Entonces, si le gusta este proyecto y reconoce mi trabajo, ¡puede pagarme una taza de café y pedirme que tome una taza de café, o puede convertirse en un patrocinador del proyecto a largo plazo para ayudar a NanUI a mejorar!

Use WeChat o Alipay para escanear el código QR a continuación para donar fondos.

Financiación

  1. Documentación oficial de CEF - Sucursales y construcción ↩︎

  2. Chromium Embedded Framework no admite de forma nativa la reproducción de video h.264 (el formato es un formato comercial), por lo que debe agregar los símbolos de compilación relevantes y volver a compilar el código fuente CEF para reproducir el video en formato h.264. ↩︎

Supongo que te gusta

Origin www.cnblogs.com/etoumao/p/12731700.html
Recomendado
Clasificación
Diario
Más
2024-05-08(18)
2024-05-07(35)
2024-05-06(4)
2024-05-05(0)
2024-05-04(17)
2024-05-03(8)
2024-05-02(0)
2024-05-01(4)
2024-04-30(33)
2024-04-29(5)

Code World

© 2018 codetd.com