Primeros pasos con Ignite UI for Web Components

Ignite UI for Web Componentses un conjunto completo de widgets de interfaz, componentes y kits de Sketch interfaz para Web Components por Infragistics. Permite a los desarrolladores crear aplicaciones modernas y de alto rendimiento en HTML5 y JavaScript para navegadores de escritorio, experiencias móviles y aplicaciones web progresivas (PWAs).

Ignite UI for Web Components comprende varios paquetes disponibles bajo licencia MIT o comercial, dependiendo de los componentes y servicios que contengan. Para una lista detallada de componentes y su licencia, consulta las preguntas frecuentes sobre licencias e instalación y los temas de código abierto vs premium.

Install Ignite UI CLI

Para crear una aplicación desde cero y configurarla para que use el Ignite UI Web Components puede usar la Ignite UI CLI. El primer paso es instalar el paquete respectivo globalmente de la siguiente manera:

npm install -g igniteui-cli

Si quieres obtener una experiencia guiada a través de las opciones disponibles, puedes iniciar el modo paso a paso que te ayudará a crear y configurar tu nueva aplicación. Para empezar la guía, simplemente ejecuta elig comando:

ig

Luego elige Web Components como framework, seleccionaBase plantilla de proyecto, añade un componente/vista específica o seleccionaComplete & Run. Además, puedes leer más sobre la Ignite UI CLI en este tema.

Install Polyfills

Ejecute este comando para instalar el componente web polyfills:

Luego importe los polyfills del componente web a index.js:

import '@webcomponents/custom-elements/custom-elements.min';
import '@webcomponents/custom-elements/src/native-shim.js';

Install Ignite UI for Web Components

Para usar el Ignite UI Web Components en tu aplicación deberías instalar eligniteui-webcomponents paquete:

npm install igniteui-webcomponents

A continuación, tendrás que importar los componentes que quieres usar en tuindex.ts archivo. Podrías importar uno o más componentes usando ladefineComponents función así:

import { defineComponents, IgcAvatarComponent, IgcBadgeComponent } from 'igniteui-webcomponents';

defineComponents(IgcAvatarComponent, IgcBadgeComponent);

También podrías importar todos los componentes usando ladefineAllComponents función:

import { defineAllComponents } from 'igniteui-webcomponents';

defineAllComponents();

[!Note] Importing all of the components will increase the bundle size of your application. That's why we recommend you to import only the components that you are actually using.

El último paso es importar el CSS necesario para nuestros componentes para que tengan el estilo adecuado:

import 'igniteui-webcomponents/themes/light/bootstrap.css';

Después de importar los componentes, puede usarlos en su html:

<igc-avatar initials="AZ"></igc-avatar>
<igc-badge></igc-badge>

Install Charts and Map Packages

Step 1 - Create the Web Component Project

1 - Abra una línea de comando y cree un directorio llamado wc-html

mkdir wc-html

2 - Cambie la ruta de la línea de comando al directorio recién creado

cd wc-html

3 - Inicializa npm en el directorio

npm init -y

4 - Instale el paquete webpack y la CLI del paquete web como dependencia del desarrollador

npm install webpack webpack-cli --save-dev

[!Note] Webpack is a module bundler. Its main purpose is to bundle JavaScript files for usage in a browser, yet it is also capable of transforming, bundling, or packaging just about any resource or asset.

5 - Abra el proyecto en VS Code

code .

6 - Crea un nuevo archivo llamado index.html con este código:

7 - Cree una nueva carpeta llamada src y dentro de esa carpeta cree un nuevo archivo llamado index.js. La estructura de su proyecto debería verse así:

8 - Actualice el archivo package.json para incluir un script de compilación usando webpack

  "scripts": {
    "build": "webpack ./src/index.js -o ./dist/ --output-filename index.bundle.js"
  },

[!Note] This script will use webpack to bundle the index.js file into another file called index.bundle.js and place it into a folder named dist.

If a JavaScript heap out of memory issue occurs while building you can increase the heap size by using this build command instead:

"scripts": {
    "build": "node --max_old_space_size=8192 node_modules/webpack/bin/webpack src/index.js -o dist/index.bundle.js"
},

Step 2 - Install Polyfills

1 - Abra una terminal en VS Code (Ver-> menú Terminal o presione las teclas CTRL + `)

2 - Escriba este comando para instalar el componente web polyfills:

npm install @webcomponents/custom-elements

3 - Importe los polyfills del componente web a index.js

import '@webcomponents/custom-elements/custom-elements.min';
import '@webcomponents/custom-elements/src/native-shim.js';

Step 3 - Install Ignite UI for Web Components and lit-html

1 - Instalar el componente web de Ignite UI con npm. En este ejemplo, instalaremos el componente web Map:

npm install --save igniteui-webcomponents-core
npm install --save igniteui-webcomponents-charts
npm install --save igniteui-webcomponents-maps
npm install lit-html

2 - Importe los módulos del mapa geográfico y ModuleManager en el archivo index.js:

import { IgcGeographicMapModule } from 'igniteui-webcomponents-maps';
import { IgcDataChartInteractivityModule } from 'igniteui-webcomponents-charts';
// module manager for registering the modules
import { ModuleManager } from 'igniteui-webcomponents-core';

3 - Registre los módulos del Mapa Geográfico usando el ModuleManager

ModuleManager.register(
    IgcGeographicMapModule,
    IgcDataChartInteractivityModule
);

4 - Agregue el componente web Mapa geográfico al cuerpo del archivo index.html​

<body>
    <igc-geographic-map id="map" height="500px" width="100%">
    </igc-geographic-map>
</body>

Step 4 - Build and Run the Web Component Project

1 - Abra una terminal en VS Code y ejecute el script de compilación​

npm run build

[!Note] This command will run the build script we created earlier. The build script will generate a file named index.bundle.js in a folder named dist

2: agregue el script index.bundle.js al final del elemento del cuerpo en el archivo index.html.

<body>
    <igc-geographic-map id="map" height="500px" width="100%">
    </igc-geographic-map>

    <script src="dist/index.bundle.js"></script>
</body>

3 - Para ejecutar el proyecto, inicie un servidor de desarrollo local. En este ejemplo, estamos usando Live Server. Haga clic derecho dentro del editor de index.html y seleccione Abrir con Live Server

[!Note] Live Server is an extension to Visual Studio Code that allows you to launch a local development server with live reload feature for static & dynamic pages. This extension can be installed via the Visual Studio Code Extensions tab, or by downloading it from the Visual Studio Marketplace.

4 - Navegue hasta el índice .html usando un navegador web en su servidor local. El resultado final debería mostrar un mapa interactivo del mundo:

Descripción general de los paquetes de Ignite UI for Web Components

Ignite UI for Web Components es un conjunto completo de widgets de interfaz, componentes y kits de interfaz para herramientas de diseño y servicios de soporte para Web Components. Diseñado para permitir a los desarrolladores crear las aplicaciones HTML5 y JavaScript más modernas y de alto rendimiento para navegadores de escritorio modernos, experiencias móviles y aplicaciones web progresivas (PWAs) dirigidas a las APIs de componentes web del navegador.

Charts & Graphs

Ignite UI for Web Components contiene una biblioteca de Tablas y Gráficos que te permite visualizar cualquier tipo de datos a través de sus 65+ tipos de series y combinaciones de gráficos para crear gráficos e paneles impresionantes e interactivos. Diseñado para la velocidad y la belleza, diseñado para funcionar en cualquier navegador moderno y con total tacto e interactividad, puedes crear visuales sensibles rápidamente en cualquier dispositivo.

Calibres

Ignite UI for Web Components proporciona componentes Medidor radial, Medidor lineal y Bullet Graph utilizados para ilustrar datos de forma sencilla e intuitiva. El Medidor radial ofrece varias opciones de personalización para crear una forma y escala predefinidas. El Medidor lineal ofrece una vista sencilla de un valor comparado con una escala y uno o más rangos. Soporta una escala, un conjunto de marcas y un conjunto de etiquetas. El componente Bullet Graph te permite crear visualizaciones de datos, sustituyendo medidores y indicadores que se usan en los paneles por gráficos de barras sencillos.

mapas

El componente Ignite UI for Web Components Geographic Map aporta la capacidad de visualizar datos geográficos en tu aplicación. Puede renderizar conjuntos de datos que consisten en muchas ubicaciones geográficas en forma de marcadores, líneas, polígonos o incluso mapas de bits interactivos. Permite superponer múltiples capas de mapas con datos geográficos, marcar ubicaciones geográficas específicas y mostrar información usando marcadores y colores personalizados.

Grids & Inputs

Ignite UI for Web Components proporciona varios componentes de Grid que permiten vincular y mostrar datos con poca configuración, en forma de Grid Lite, un componente de grid ligero bajo licencia MIT, Data Grid, un componente de grid con muchas funciones bajo licencia comercial, List, Tree e incluso Spreadsheet.

Buttons, Inputs, Layouts, and Menus

Ignite UI for Web Components ofrece varios tipos de botones, entradas, menús y diseños que te permiten crear aplicaciones web modernas usando encapsulación y el concepto de componentes reutilizables en un enfoque libre de dependencias. Consulta el Libro de Cuentos aquí. Estos componentes se basan en el Indigo Design System, son totalmente soportados por App Builder y cuentan con kits de interfaz de usuario listos para usar para Sketch, Adobe XD y Figma.