Creación de componentes con esquemas angulares

Dentro del kit de herramientas de desarrollador, IBM proporciona esquemas angulares para generar rápidamente componentes con código de inicio que puede utilizar en las aplicaciones. Los componentes incluyen páginas de búsqueda, tablas y detalles de campo.

Utilice los esquemas para generar componentes con el mismo diseño y funciones que los componentes existentes en Order Hub. Los componentes generados también incluyen las bibliotecas necesarias para comunicarse con varios servicios, como por ejemplo:

El backend del sistema de Sterling™ Order Management.
Sterling Intelligent Promising Inventory Visibility arrendatarios.
Otros arrendatarios de microservicio.
Las bibliotecas de IU de Carbon que se utilizan en páginas existentes.

Para obtener información sobre cómo utilizar los esquemas para crear nuevas aplicaciones, consulte Creación de nuevas aplicaciones.

Antes de empezar

Asegúrese de que ha extraído el código de Order Hub . Para obtener más información, consulte Iniciación a la personalización de Order Hub.
Ejecute el mandato siguiente para establecer strict-ssl en false.
```
npm config set "strict-ssl" false
```
Ejecute uno de los siguientes comandos para reinstalar la última versión de @buc/schematics y acceder a los esquemas proporcionados por IBM. Para Angular v15, ejecute el siguiente comando.
```
npm uninstall -g @buc/schematics
npm install -g ./lib/buc/schematics/schematics-v3latest.tgz
```
Para Angular v18, ejecute el siguiente comando.
```
npm uninstall -g @buc/schematics
npm install -g ./lib/buc/schematics/schematics-v4latest.tgz
```
Para obtener ayuda con un script esquemático, ejecute.
```
ng g @buc/schematics:<component> --help
```
Crear componentes.

Creación de un componente de página de búsqueda

Cree un componente search page para que los usuarios especifiquen criterios de búsqueda y busquen datos.

El esquema search-panel crea el componente de página de búsqueda e incluye código para dar soporte a las características siguientes:

Una indicación de ruta
Función Guardar búsqueda
Función Personalizar criterios de búsqueda
Buscar por agrupaciones de

La siguiente captura de pantalla muestra la página Búsqueda de envío y resalta las características de la página de búsqueda.

Captura de pantalla de la página de búsqueda de envíos. La indicación de ruta está rodeada por un recuadro con el número de etiqueta 1. El botón de búsqueda guardada está rodeado por un recuadro con la etiqueta 2. El botón Personalizar criterios de búsqueda está rodeado por un recuadro con la etiqueta 3. La agrupación Buscar por está rodeada por un recuadro con la etiqueta 4.

Procedimiento

Abra un terminal y vaya al módulo donde desea añadir el componente. Por ejemplo, devtoolkit_docker/orderhub-code/buc-app-order.
Cree el componente ejecutando el mandato siguiente.
```
ng g @buc/schematics:search-panel --name <name> \
--json-file-path <json-file-path> \
--translation-file-path <translation-file-path> \
--shared-lib <shared-lib> \
--path <path> \
--json-file-name <json-file-name> \
--project <project-name> \
--skip-import
```
Parámetros

nombre

(Necesario) Nombre del componente.

El esquema crea un nombre de clase de componente eliminando los caracteres especiales y añadiendo la palabra "SearchComponent". Por ejemplo, si especifica el nombre mi-muestra, el nombre de clase generado es MySampleSearchComponent.

vía de acceso de archivo json

(Necesario) La vía de acceso donde desea actualizar o crear el archivo de configuración (search_fields.json). Por ejemplo, packages/order-shared/assets/buc-app-order.

En el archivo search_fields.json , el esquema crea un nombre de objeto añadiendo "-search" al nombre. Por ejemplo, my-sample-search.

vía de acceso-archivo-traducción

(Necesario) La vía de acceso donde desea actualizar o crear los literales de traducción (en.json). Por ejemplo, packages/order-shared/assets/buc-app-order/i18n.

En el archivo en.json , el esquema crea un nombre de objeto añadiendo "-search" al nombre. Por ejemplo, my-sample-search.

lib compartida

(Necesario) Nombre de la carpeta de biblioteca compartida.

vía de acceso

(Opcional) La vía de acceso para crear el archivo de componente, relativo al módulo actual. De forma predeterminada, se crea una carpeta con el mismo nombre que el componente en la carpeta raíz del módulo.

nombre-archivo-json

(Opcional) De forma predeterminada, el esquema actualiza search_fields.json con datos de prueba. Si necesita actualizar o añadir el objeto a un archivo diferente, utilice este parámetro. Si especifica un nombre de archivo que no existe en la carpeta de activos, se crea un archivo nuevo.

proyecto

El nombre de la carpeta de paquete en la que se está creando el esquema. Por ejemplo, al crear un componente de resultado de búsqueda en paquetes/order-search-result, el nombre del proyecto será order-search-result.

El mandato siguiente proporciona un ejemplo con parámetros.
```
ng g @buc/schematics:search-panel --name my-sample --path packages/order-search/src-custom/app/features/search --json-file-path packages/order-shared/assets/buc-app-order --translation-file-path packages/order-shared/assets/buc-app-order/i18n --shared-lib order-shared --project order-search --skip-import
```
El esquema crea el nuevo componente y actualiza los archivos compartidos. La salida del terminal resume los archivos que se han creado y actualizado.

Creación de un componente de página de resultados de búsqueda

Cree un componente search results page para visualizar los resultados después de que un usuario ejecute una consulta desde el componente de página de búsqueda.

El esquema search-result-component genera dos componentes:

Un componente de resultado de búsqueda.
Un componente de tabla (tipo BaseTableComponent ), cuyo selector se incluye en la plantilla del componente de resultado de búsqueda.

La siguiente captura de pantalla muestra la página Resultados de búsqueda de envío y resalta las características de la página de resultados.

Captura de pantalla de la página de resultados de la búsqueda. El recuadro 1 representa el componente de resultado de búsqueda. El recuadro 2 representa el componente de tabla.

Procedimiento

Abra un terminal y vaya al módulo donde desea añadir el componente. Por ejemplo, devtoolkit_docker/orderhub-code/buc-app-order.
Cree el componente de página de resultados de búsqueda ejecutando el mandato siguiente. El esquema crea el componente y actualiza el objeto de direccionamiento de ejemplo para el componente de resultado de búsqueda en el módulo de direccionamiento más cercano.
```
ng g @buc/schematics:search-result-component --name <name> \
--path <resultsPageComponentPath> \
--table-path <tableComponentPath> \
--json-file-path <json-file-path> \
--translation-file-path <translation-file-path> \
--shared-lib <shared-lib> \
--project <project-name> \
--skip-import
```
Parámetros

nombre

(Necesario) Nombre del componente.

El esquema crea un nombre de clase de componente eliminando los caracteres especiales y añadiendo la palabra "SearchResultComponent" para indicar un componente de resultados de búsqueda y la palabra "TableComponent" para indicar un componente de tabla. Por ejemplo, si especifica el nombre mi-muestra, los nombres de clase generados son MySampleSearchResultComponent y MySampleTableComponent.

vía de acceso de archivo json

(Necesario) La vía de acceso donde desea actualizar o crear el archivo de configuración (buc-table-config.json).

En el archivo buc-table-config.json , el esquema crea un nombre de objeto añadiendo "-table" al nombre. Por ejemplo, my-sample-table.

vía de acceso-archivo-traducción

(Necesario) La vía de acceso donde desea actualizar o crear los literales de traducción (en.json).

En el archivo en.json , el esquema crea un nombre de objeto añadiendo "-table" al nombre. Por ejemplo, my-sample-table.

lib compartida

(Necesario) Nombre de la carpeta de biblioteca compartida.

vía de acceso

(Opcional) La vía de acceso para crear el componente de resultado de búsqueda, relativo al módulo actual. De forma predeterminada, se crea una carpeta con el mismo nombre que el componente en la carpeta raíz del módulo.

vía de acceso de tabla

(Opcional) La vía de acceso para crear el componente de tabla, relativo al módulo actual. De forma predeterminada, se crea una carpeta con el mismo nombre que el componente en la carpeta raíz del módulo.

nombre-archivo-json

(Opcional) De forma predeterminada, el esquema actualiza buc-table-config.json con datos de prueba. Si necesita actualizar o añadir el objeto a un archivo diferente, utilice este parámetro. Si especifica un nombre de archivo que no existe en la carpeta de activos, se crea un archivo nuevo.

proyecto

El nombre de la carpeta de paquete en la que se está creando el esquema. Por ejemplo, al crear un componente de resultado de búsqueda en paquetes/order-search-result, el nombre del proyecto será order-search-result.

El mandato siguiente proporciona un ejemplo con parámetros.
```
ng g @buc/schematics:search-result-component --name my-sample --path packages/order-search/src-custom/app/features/search --table-path packages/order-search/src-custom/app/features/search --json-file-path packages/order-shared/assets/buc-app-order --translation-file-path packages/order-shared/assets/buc-app-order/i18n --shared-lib order-shared --project order-search --skip-import
```
El esquema crea el nuevo componente y actualiza los archivos compartidos. La salida del terminal resume los archivos que se han creado y actualizado.

Creación de un componente de tabla

Cree un componente table para visualizar datos en una tabla.

El esquema table-component da soporte a la creación de un componente de tabla ampliando una de las dos clases de tabla:

ClientSidePaginationBaseTableComponent: Para la paginación del lado del cliente, donde todas las entradas de fila de tabla se recuperan en una llamada de API.
BaseTableComponent: Para resultados basados en páginas del lado del servidor de la API.

La siguiente captura de pantalla muestra la página Resultados de búsqueda de envío y resalta el componente de tabla.

Captura de pantalla de la página de resultados de búsqueda. Un recuadro rodea el componente de tabla.

Procedimiento

Abra un terminal y vaya al módulo donde desea añadir el componente. Por ejemplo, devtoolkit_docker/orderhub-code/buc-app-order.
Cree el componente de tabla ejecutando el mandato siguiente.
```
ng g @buc/schematics:table-component --name <name> \
--extend <extendableClassName> \
--json-file-path <json-file-path> \
--translation-file-path <translation-file-path> \
--path <path> \
--project <project-name> \
--skip-import
```
Parámetros

nombre

(Necesario) Nombre del componente.

El esquema crea un nombre de clase de componente eliminando los caracteres especiales y añadiendo la palabra "TableComponent". Por ejemplo, si especifica el nombre mi-muestra, el nombre de clase generado es MySampleTableComponent.

ampliar

(Opcional) El nombre de la clase de tabla ampliable. Los valores válidos son ClientSidePaginationBaseTableComponent o BaseTableComponent. Si no especifica un valor en el mandato, se le solicitará en el terminal que elija un componente. En Git Bash para Windows, el parámetro extend es obligatorio.

vía de acceso de archivo json

(Necesario) La vía de acceso donde desea actualizar o crear el archivo de configuración (buc-table-config.json).

En el archivo buc-table-config.json , el esquema crea un nombre de objeto añadiendo "-table" al nombre. Por ejemplo, my-sample-table.

vía de acceso-archivo-traducción

(Necesario) La vía de acceso donde desea actualizar o crear los literales de traducción (en.json).

En el archivo en.json , el esquema crea un nombre de objeto añadiendo "-table" al nombre. Por ejemplo, my-sample-table.

vía de acceso

(Opcional) La vía de acceso para crear el archivo de componente, relativo al módulo actual. De forma predeterminada, se crea una carpeta con el mismo nombre que el componente en la carpeta raíz del módulo.

nombre-archivo-json

(Opcional) De forma predeterminada, el esquema actualiza buc-table-config.json con datos de prueba. Si necesita actualizar o añadir el objeto a un archivo diferente, utilice este parámetro. Si especifica un nombre de archivo que no existe en la carpeta de activos, se crea un archivo nuevo.

proyecto

(Necesario) Nombre de la carpeta de paquete en la que se está creando el esquema. Por ejemplo, al crear un componente de resultado de búsqueda en paquetes/order-search-result, el nombre del proyecto será order-search-result.

El mandato siguiente proporciona un ejemplo con parámetros.
```
ng g @buc/schematics:table-component --name my-sample2 --extend ClientSidePaginationBaseTableComponent --json-file-path packages/order-shared/assets/buc-app-order --translation-file-path packages/order-shared/assets/buc-app-order/i18n --path packages/order-search/src-custom/app/features/search --project order-search --skip-import
```
El esquema crea el nuevo componente y actualiza los archivos compartidos. La salida del terminal resume los archivos que se han creado y actualizado.

Como referencia, el siguiente tutorial crea componentes de tabla con esquemas de Angular: Tutorial: Personalización de la página de resultados de búsqueda de Inventario.

Creación de un componente de campo

Cree un componente Field para visualizar los detalles de un registro específico. Por ejemplo, fechas de orden, líneas de orden e información de nodo de envío para una orden.

El esquema summary-component da soporte a la creación de dos tipos de componentes:

Field component: Para visualizar atributos en el área de contenido de una página.
Summary component: Para visualizar atributos en el panel lateral derecho de una página de detalles.

La siguiente captura de pantalla muestra la página Detalles de envío y resalta los distintos componentes.

Captura de pantalla de la página de detalles del envío. El recuadro 1 representa el componente Campo. El recuadro 2 representa un componente de resumen.

Procedimiento

Abra un terminal y vaya al módulo donde desea añadir el componente. Por ejemplo, devtoolkit_docker/orderhub-code/buc-app-order.
Cree el componente de campo ejecutando el mandato siguiente.
```
ng g @buc/schematics:summary-component \
--name <name> \
--json-file-path <json-file-path> \
--is-summary-panel <true|false> \
--path <path> \
--project <project-name> \
--skip-import
```
Parámetros

nombre

(Necesario) Nombre del componente.

El esquema crea un nombre de clase de componente eliminando los caracteres especiales y añadiendo la palabra "FieldsComponent". Por ejemplo, si especifica el nombre mi-muestra, el nombre de clase generado es MySampleFieldsComponent.

vía de acceso de archivo json

(Necesario) La vía de acceso donde desea actualizar o crear el archivo de configuración (buc-field-details.json).

En el archivo buc-field-details.json , el esquema crea un nombre de objeto añadiendo "-fields" al nombre. Por ejemplo, my-sample-fields.

es-panel-de-resumen

(Opcional) Booleano para determinar el tipo de componente que se va a crear. Especifique true para crear un componente de resumen. Especifique false para crear un componente de campo. El valor predeterminado es true.

vía de acceso

(Opcional) La vía de acceso para crear el archivo de componente, relativo al módulo actual. De forma predeterminada, se crea una carpeta con el mismo nombre que el componente en la carpeta raíz del módulo.

nombre-archivo-json

(Opcional) De forma predeterminada, el esquema actualiza buc-field-details.json con datos de prueba. Si necesita actualizar o añadir el objeto a un archivo diferente, utilice este parámetro. Si especifica un nombre de archivo que no existe en la carpeta de activos, se crea un archivo nuevo.

proyecto

El nombre de la carpeta de paquete en la que se está creando el esquema. Por ejemplo, al crear un componente de resultado de búsqueda en paquetes/order-search-result, el nombre del proyecto será order-search-result.

El mandato siguiente proporciona un ejemplo con parámetros.
```
ng g @buc/schematics:summary-component --name my-sample --path packages/order-search/src-custom/app/features/search --json-file-path packages/order-shared/assets/buc-app-order --is-summary-panel true --project order-search --skip-import
```
El esquema crea el nuevo componente y actualiza los archivos compartidos. La salida del terminal resume los archivos que se han creado y actualizado.
Si ha creado un Componente de campo, edite el archivo HTML generado para pasar el parámetro de cabecera para especificar una etiqueta para la pestaña. Por ejemplo, si hace referencia a la captura de pantalla, la pestaña activa tiene la etiqueta "Detalles". La etiqueta "Detalles" se especifica añadiendo una cabecera con la vía de acceso al literal de traducción en el archivo en.json :
```
[header]="'SHIPMENT_DETAILS.SHIPMENT_TABS.SHIPMENT_DETAILS'"
```