Post Top Ad

Your Ad Spot

jueves, 8 de octubre de 2020

Ejemplo de panel de Ionic 5 y Electron Split para pantallas grandes y escritorio

 El Ionoc Split Pane permite a los desarrolladores de Ionic 5 crear interfaces de usuario con dos vistas divididas para dispositivos con pantallas grandes como tabletas o computadoras de escritorio.

El equipo de Ionic está trabajando para hacer de Ionic un marco para crear interfaces de usuario para entornos de escritorio y no solo tabletas y teléfonos móviles al agregar el panel dividido, que es un componente de interfaz de usuario muy solicitado en las aplicaciones de escritorio.

Ionic 5 para aplicaciones de escritorio?

Si ya está familiarizado con Ionic 5, pero nunca lo ha utilizado para crear interfaces de usuario para aplicaciones de escritorio, es posible que se esté preguntando: ¿No es Ionic 5 un marco móvil híbrido, entonces, cómo podemos usarlo para aplicaciones de escritorio?

Sí, Ionic 5 es un marco móvil híbrido basado en Angular. En realidad, es un grupo de componentes de interfaz de usuario creados con HTML, CSS y JavaScript sobre Apache Cordova, que es realmente el contenedor real que hace el trabajo pesado de interactuar con las características nativas del dispositivo móvil y le permite crear una aplicación móvil con tecnologías web. .

Entonces, ¿cómo se pueden crear aplicaciones de escritorio con Ionic 5?

Al igual que Cordova, hay otro gran contenedor, pero esta vez para entornos de escritorio (Windows, Linux y MAC) que le permite empaquetar aplicaciones JavaScript en una aplicación nativa de escritorio. El proyecto es Electron, construido por GitHub.

Hay muchos otros proyectos similares a Electron, el más popular es NW.js de Intel, que sigue otro enfoque, pero también le permite crear aplicaciones de escritorio multiplataforma con tecnologías web.

Puede usar Electron o nw.js para empaquetar su aplicación Ionic 5 en una aplicación de escritorio. Por el bien de este tutorial, usaré Electron para mostrar cómo crear una aplicación de escritorio con Ionic 5 y el componente Split Pane.

Obteniendo Electron

Necesitamos crear una aplicación de Electron, así que vamos a utilizar el proyecto de inicio rápido de Github para crear rápidamente una nueva aplicación.

Abra su terminal / símbolo del sistema y ejecute:

 git clone https://github.com/electron/electron-quick-start electron-ionic-starter
 cd electron-ionic-starter 
 npm install 
 npm start

Se le presentará un proyecto de Electron en blanco basado en Electron, a continuación, necesitamos integrarlo con Ionic 5. No es necesario realizar ninguna configuración compleja. Solo necesitas instalar Ionic. Construya su aplicación Ionic 5, compile y luego apunte a Electron a la ubicación de los archivos web de Ionic 5.

Instalación de Ionic 5

Ahora procedemos a instalar Ionic 5. No necesitas instalar Cordova ni ningún SDK (para Android o iOS), porque lo que necesitamos son los componentes de la interfaz de usuario de Ionic 5 que son solo Angular + CSS + HTML, ya que estamos usando Ionic 5 como biblioteca de interfaz de usuario para nuestra aplicación Electron Desktop.

Así que adelante, instale Ionic CLI usando su terminal o símbolo del sistema:

npm install -g ionic 

Creación de un proyecto Ionic 5 / Angular

A continuación, usemos Ionic CLI 5 para crear una nueva aplicación Ionic 5 en blanco dentro de nuestra carpeta de aplicaciones Electron:

ionic start blank  app -    

Nombramos nuestro proyecto Ionic 5 'aplicación'. Deel libre para cambiar a un nombre más elegante.

Integrando Ionic 5 con Electron

Ahora conectemos las dos aplicaciones.

Abra su main.jsarchivo de proyecto Electron y luego busque la función de crear ventana:

mainWindow = new BrowserWindow({width: 800, height: 600})

// and load the index.html of the app.
mainWindow.loadURL(url.format({
    pathname: path.join(__dirname, 'app/www/index.html'),
    protocol: 'file:',
    slashes: true
})) 

Después de construir (servicio iónico) su proyecto Ionic 5. Los archivos de la aplicación vivirán en la wwwcarpeta.

Así que ahora, antes de continuar, debemos ejecutar:

ionic serve 

Dentro de nuestro proyecto Ionic 5

A continuación, ejecute nuestra aplicación Electron usando:

npm start 

Debería ver su aplicación Ionic 5 con la plantilla predeterminada ejecutándose dentro de Electron.

Agregar el panel de división Ionic 5

Abra el src/pages/home/home.htmlarchivo, elimine todo y copie este código que agrega un panel dividido con un menú a la izquierda:

<ion-split-pane>
<!--  our side menu  -->
<ion-menu [content]="content">
    <ion-header>
    <ion-toolbar>
        <ion-title>Menu</ion-title>
    </ion-toolbar>
    </ion-header>
    <ion-content>
    <ion-list>
        <ion-item (click)="openMain()" >Main</ion-item>
        <ion-item  (click)="openAbout()">About</ion-item>            
    </ion-list>
    </ion-content>    
</ion-menu>

<!-- the main content -->
<ion-nav [root]="rootPage" main #content></ion-nav>
</ion-split-pane>

Así que hemos agregado un ion-split-panecon un ion-menuque crea un menú a la izquierda y ion-nava la derecha. A continuación, agregaremos código para cambiar el contenido de ion-navcuando hacemos clic en los botones del menú.

Debe prestar atención a algunos detalles sobre los componentes ion-navion-menuque son:

  • root, que está vinculada a la variable rootPage que define la página que se presentará
  • main, debe agregar este atributo para indicarle a ion-split-pane dónde vive el contenido principal
  • #content, que especifica el destino de las acciones del menú

En el src/pages/home.tsarchivo, debemos inicializar la rootPagevariable con un valor inicial (una página). Entonces, primero necesitamos generar nuevas páginas usando:

ionic g page main 
ionic g page about 

Luego abra el src/app/app.module.tsarchivo y asegúrese de importar y agregar cualquier página que haya creado al módulo declarationsy las entryComponentslistas:

import { NgModule, ErrorHandler } from '@angular/core';
import { IonicApp, IonicModule, IonicErrorHandler } from 'ionic-angular';
import { MyApp } from './app.component';
import { HomePage } from '../pages/home/home';
import { MainPage } from '../pages/main/main';
import { AboutPage } from '../pages/about/about';

@NgModule({
declarations: [
    MyApp,
    HomePage,
    MainPage,
    AboutPage
],
imports: [
    IonicModule.forRoot(MyApp)
],
bootstrap: [IonicApp],
entryComponents: [
    MyApp,
    HomePage,
    MainPage,
    AboutPage   
],
providers: [{provide: ErrorHandler, useClass: IonicErrorHandler}]
})
export class AppModule {}

A continuación, abra el src/pages/home/home.tsarchivo y copie el siguiente código:

import { Component } from '@angular/core';

import { NavController } from 'ionic-angular';

import { MainPage } from  '../main/main';
import { AboutPage } from  '../about/about';



@Component({
selector: 'page-home',
templateUrl: 'home.html'
})
export class HomePage {
    rootPage :any = MainPage ;
    constructor(public navCtrl: NavController) {

    }
    openMain(){
        this.rootPage = MainPage ;
    }
    openAbout(){
        this.rootPage = AboutPage ;
    }            

}

Ahora puede crear su aplicación usando:

ionic serve 

Y luego ejecute electron usando:

npm start 

Puedes ver el código que acompaña a este tutorial en GitHub

Conclusión

En este tutorial, hemos visto cómo usar el nuevo componente Split Pane de Ionic 5 para construir la interfaz de usuario para una aplicación de escritorio basada en Electron. Vea su siguiente tutorial con un tutorial detallado sobre las cuadrículas Ionic 5.

No hay comentarios.:

Publicar un comentario

Dejanos tu comentario para seguir mejorando!

outbrain

Páginas