Creazione di componenti con schemi Angular

All'interno del toolkit per sviluppatori, IBM fornisce schemi angolari per generare rapidamente componenti con codice iniziale che è possibile utilizzare nelle applicazioni. I componenti includono pagine di ricerca, tabelle e dettagli dei campi.

Utilizza gli schemi per generare componenti con lo stesso design e le stesse funzioni dei componenti esistenti in Hub degli ordini. I componenti generati includono anche le librerie necessarie per comunicare con vari servizi, come:
  • Il backend del sistema di Sterling™ Order Management.
  • Sterling Intelligent Promising Inventory Visibility inquilini.
  • Altri tenant di microservizi.
  • Le librerie Carbon UI utilizzate nelle pagine esistenti.
Per informazioni su come utilizzare gli schemi per creare nuove applicazioni, vedere Creazione di nuove applicazioni nell'Order Hub di prossima generazione.

Prima di iniziare

  1. Estrai il Hub degli ordini di prossima generazione codice. Per ulteriori informazioni, vedere Iniziare a personalizzare Order Hub di prossima generazione.
  2. Eseguire il comando seguente per impostare il filestrict-ssl a falso.
    npm config set "strict-ssl" false
  3. Accedi al IBM-fornito schemi eseguendo il seguente comando per reinstallare la versione più recente di @buc/schematics. Per l' v15 e angolare, eseguire il seguente comando.
    npm uninstall -g @buc/schematics
npm install -g ./lib/buc/schematics/schematics-v3latest.tgz
    Per l' v18 e angolare, eseguire il seguente comando.
    npm uninstall -g @buc/schematics
npm install -g ./lib/buc/schematics/schematics-v4latest.tgz
  4. Per assistenza con uno script schematico, esegui.
    ng g @buc/schematics:<component> --help
  5. Creare componenti.

Creazione di un componente della pagina di ricerca

Creare unsearch page componente che consente agli utenti di specificare criteri di ricerca e cercare dati.

ILsearch-panel Lo schema crea il componente della pagina di ricerca e include il codice per supportare le seguenti funzionalità:
  1. Una scia di briciole di pane
  2. Salva ricerca funzione
  3. Personalizza i criteri di ricerca funzione
  4. Cercato da raggruppamenti
La seguente schermata mostra il Ricerca della spedizione pagina ed evidenzia le funzionalità all'interno della pagina di ricerca.
Uno screenshot della pagina di ricerca della spedizione. La traccia del breadcrumb è circondata da un riquadro con l'etichetta numero 1. Il pulsante Ricerca salvata è circondato da una casella con l'etichetta 2. Il pulsante Personalizza criteri di ricerca è circondato da un riquadro con l'etichetta 3. Il raggruppamento Cerca per è circondato da una casella con l'etichetta 4.

Procedura

  1. Apri un terminale e vai al modulo in cui desideri aggiungere il componente. Per esempio,devtoolkit_docker/orderhub-code/buc-app-order .
  2. Crea il componente eseguendo il comando seguente.
    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
    Parametri
    Nome
    (Obbligatorio) Il nome del componente.
    Lo schema crea un nome di classe componente rimuovendo caratteri speciali e aggiungendo la parola "SearchComponent". Ad esempio, se specifichi il nome mio-campione, il nome della classe generata è MySampleSearchComponent.
    percorso-file-json
    (Obbligatorio) Il percorso in cui desideri aggiornare o creare il file di configurazione (search_fields.json ). Per esempio,packages/order-shared/assets/buc-app-order .
    Nelsearch_fields.json file, lo schema crea un nome oggetto aggiungendo "-search" al nome. Per esempio, ricerca-del-mio-campione.
    percorso-file-di-traduzione
    (Obbligatorio) Il percorso in cui desideri aggiornare o creare i valori letterali di traduzione (en.json) . Per esempio,packages/order-shared/assets/buc-app-order/i18n .
    Nelen.json file, lo schema crea un nome oggetto aggiungendo "-search" al nome. Per esempio, ricerca-del-mio-campione.
    libreria-condivisa
    (Obbligatorio) Il nome della cartella della libreria condivisa.
    percorso
    (Facoltativo) Il percorso per creare il file del componente, relativo al modulo corrente. Per impostazione predefinita, nella cartella principale del modulo viene creata una cartella con lo stesso nome del componente.
    nome-file-json
    (Facoltativo) Per impostazione predefinita, lo schema viene aggiornatosearch_fields.json con i dati di prova. Se devi aggiornare o aggiungere il tuo oggetto a un file diverso, utilizza questo parametro. Se specifichi un nome file che non esiste nella cartella asset, verrà creato un nuovo file.
    progetto
    (Obbligatorio) Il nome della cartella del pacchetto in cui viene creato lo schema. Ad esempio, creando un componente dei risultati di ricerca in packages/order-search-result, il nome del progetto sarà order-search-result.
    Il comando seguente fornisce un esempio con parametri.
    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
  3. Lo schema crea il nuovo componente e aggiorna i file condivisi. L'output nel terminale riassume i file che sono stati creati e aggiornati.

Creazione di un componente della pagina dei risultati di ricerca

Creare unsearch results page componente per visualizzare i risultati dopo che un utente ha eseguito una query dal componente della pagina di ricerca.

ILsearch-result-component lo schema genera due componenti:
  1. Un componente dei risultati di ricerca.
  2. Un componente della tabella (BaseTableComponent type), il cui selettore è incluso nel modello del componente dei risultati di ricerca.
La seguente schermata mostra il Risultati della ricerca della spedizione pagina ed evidenzia le funzionalità all'interno della pagina dei risultati.
Uno screenshot della pagina dei risultati della ricerca. Il riquadro 1 rappresenta il componente dei risultati di ricerca. Il riquadro 2 rappresenta la componente tabella.
Procedura
  1. Apri un terminale e vai al modulo in cui desideri aggiungere il componente. Per esempio,devtoolkit_docker/orderhub-code/buc-app-order .
  2. Crea il componente della pagina dei risultati di ricerca eseguendo il comando seguente. Lo schema crea il componente e aggiorna l'oggetto di routing di esempio per il componente del risultato della ricerca nel modulo di routing più vicino.
    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
    Parametri
    Nome
    (Obbligatorio) Il nome del componente.
    Lo schema crea un nome di classe componente rimuovendo caratteri speciali e aggiungendo la parola "SearchResultComponent" per indicare un componente dei risultati di ricerca e la parola "TableComponent" per indicare un componente della tabella. Ad esempio, se specifichi il nome mio-campione, i nomi delle classi generate sono MySampleSearchResultComponent E MySampleTableComponent.
    percorso-file-json
    (Obbligatorio) Il percorso in cui desideri aggiornare o creare il file di configurazione (buc-table-config.json) .
    Nelbuc-table-config.json file, lo schema crea un nome oggetto aggiungendo "-table" al nome. Per esempio, la mia tabella-campione.
    percorso-file-di-traduzione
    (Obbligatorio) Il percorso in cui desideri aggiornare o creare i valori letterali di traduzione (en.json ).
    Nelen.json file, lo schema crea un nome oggetto aggiungendo "-table" al nome. Per esempio, la mia tabella-campione.
    libreria-condivisa
    (Obbligatorio) Il nome della cartella della libreria condivisa.
    percorso
    (Facoltativo) Il percorso per creare il componente dei risultati di ricerca, relativo al modulo corrente. Per impostazione predefinita, nella cartella principale del modulo viene creata una cartella con lo stesso nome del componente.
    percorso-tabella
    (Facoltativo) Il percorso per creare il componente tabella, relativo al modulo corrente. Per impostazione predefinita, nella cartella principale del modulo viene creata una cartella con lo stesso nome del componente.
    nome-file-json
    (Facoltativo) Per impostazione predefinita, lo schema viene aggiornatobuc-table-config.json con i dati di prova. Se devi aggiornare o aggiungere il tuo oggetto a un file diverso, utilizza questo parametro. Se specifichi un nome file che non esiste nella cartella asset, verrà creato un nuovo file.
    progetto
    (Obbligatorio) Il nome della cartella del pacchetto in cui viene creato lo schema. Ad esempio, creando un componente dei risultati di ricerca in packages/order-search-result, il nome del progetto sarà order-search-result.
    Il comando seguente fornisce un esempio con parametri.
    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
  3. Lo schema crea il nuovo componente e aggiorna i file condivisi. L'output nel terminale riassume i file che sono stati creati e aggiornati.

Creazione di un componente Tabella

Creare untable componente per visualizzare i dati in una tabella.

ILtable-component Lo schema supporta la creazione di un componente di tabella estendendo una delle due classi di tabella:
  1. ClientSidePaginationBaseTableComponent:Per l'impaginazione lato client, in cui tutte le voci delle righe della tabella vengono recuperate in una chiamata API.
  2. BaseTableComponent:Per i risultati basati sulla pagina lato server dall'API.
La seguente schermata mostra il Risultati della ricerca della spedizione pagina ed evidenzia il componente tabella.
Uno screenshot della pagina dei risultati di ricerca. Una casella circonda il componente della tabella.
Procedura
  1. Apri un terminale e vai al modulo in cui desideri aggiungere il componente. Per esempio,devtoolkit_docker/orderhub-code/buc-app-order .
  2. Crea il componente tabella eseguendo il comando seguente.
    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
    Parametri
    Nome
    (Obbligatorio) Il nome del componente.
    Lo schema crea un nome di classe componente rimuovendo caratteri speciali e aggiungendo la parola "TableComponent". Ad esempio, se specifichi il nome mio-campione, il nome della classe generata è MySampleTableComponent.
    estendere
    (Facoltativo) Il nome della classe della tabella allungabile. I valori validi sono ClientSidePaginationBaseTableComponent O BaseTableComponent. Se non specifichi un valore nel comando, nel terminale ti verrà chiesto di scegliere un componente. In Git Bash per Windows, il parametro extend è obbligatorio.
    percorso-file-json
    (Obbligatorio) Il percorso in cui desideri aggiornare o creare il file di configurazione (buc-table-config.json) .
    Nelbuc-table-config.json file, lo schema crea un nome oggetto aggiungendo "-table" al nome. Per esempio, la mia tabella-campione.
    percorso-file-di-traduzione
    (Obbligatorio) Il percorso in cui desideri aggiornare o creare i valori letterali di traduzione (en.json ).
    Nelen.json file, lo schema crea un nome oggetto aggiungendo "-table" al nome. Per esempio, la mia tabella-campione.
    percorso
    (Facoltativo) Il percorso per creare il file del componente, relativo al modulo corrente. Per impostazione predefinita, nella cartella principale del modulo viene creata una cartella con lo stesso nome del componente.
    nome-file-json
    (Facoltativo) Per impostazione predefinita, lo schema viene aggiornatobuc-table-config.json con i dati di prova. Se devi aggiornare o aggiungere il tuo oggetto a un file diverso, utilizza questo parametro. Se specifichi un nome file che non esiste nella cartella asset, verrà creato un nuovo file.
    progetto
    (Obbligatorio) Il nome della cartella del pacchetto in cui viene creato lo schema. Ad esempio, creando un componente dei risultati di ricerca in packages/order-search-result, il nome del progetto sarà order-search-result.
    Il comando seguente fornisce un esempio con parametri.
    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
  3. Lo schema crea il nuovo componente e aggiorna i file condivisi. L'output nel terminale riassume i file che sono stati creati e aggiornati.

Come riferimento, il seguente tutorial crea componenti tabella con schemi Angular: Tutorial: Personalizzazione della pagina dei risultati di ricerca dell'inventario.

Creazione di un componente Campo

Creare unField componente per visualizzare i dettagli di un record specifico. Ad esempio, date dell'ordine, righe dell'ordine e informazioni sul nodo di spedizione per un ordine.

ILsummary-component Lo schema supporta la creazione di due tipi di componenti:
  1. Field component:Per visualizzare gli attributi nell'area del contenuto di una pagina.
  2. Summary component:Per visualizzare gli attributi nel pannello laterale destro di una pagina dei dettagli.
La seguente schermata mostra il Dettagli della spedizione pagina ed evidenzia i diversi componenti.
Uno screenshot della pagina dei dettagli della spedizione. Il riquadro 1 rappresenta la componente Campo. Il riquadro 2 rappresenta una componente di riepilogo.
Procedura
  1. Apri un terminale e vai al modulo in cui desideri aggiungere il componente. Per esempio,devtoolkit_docker/orderhub-code/buc-app-order .
  2. Crea il componente campo eseguendo il comando seguente.
    ng g @buc/schematics:summary-component \
--name <name> \
--json-file-path <json-file-path> \
--translation-file-path <translation-file-path> \
--is-summary-panel <true|false> \
--path <path> \
--project <project-name> \
--skip-import
    Parametri
    Nome
    (Obbligatorio) Il nome del componente.
    Lo schema crea un nome di classe componente rimuovendo caratteri speciali e aggiungendo la parola "FieldsComponent". Ad esempio, se specifichi il nome mio-campione, il nome della classe generata è MySampleFieldsComponent.
    percorso-file-json
    (Obbligatorio) Il percorso in cui desideri aggiornare o creare il file di configurazione (buc-field-details.json ).
    Nelbuc-field-details.json file, lo schema crea un nome oggetto aggiungendo "-fields" al nome. Per esempio, il mio campo campione.
    percorso-file-di-traduzione
    (Obbligatorio) Il percorso in cui desideri aggiornare o creare i valori letterali di traduzione (en.json ).
    Nelen.json file, lo schema crea un nome oggetto aggiungendo "-field" al nome. Per esempio, il mio campo campione.
    is-riepilogo-pannello
    (Facoltativo) Booleano per determinare il tipo di componente da creare. Specificare VERO per creare un componente Riepilogo. Specificare falso per creare un componente Campo. Il valore predefinito è VERO.
    percorso
    (Facoltativo) Il percorso per creare il file del componente, relativo al modulo corrente. Per impostazione predefinita, nella cartella principale del modulo viene creata una cartella con lo stesso nome del componente.
    nome-file-json
    (Facoltativo) Per impostazione predefinita, lo schema viene aggiornatobuc-field-details.json con i dati di prova. Se devi aggiornare o aggiungere il tuo oggetto a un file diverso, utilizza questo parametro. Se specifichi un nome file che non esiste nella cartella asset, verrà creato un nuovo file.
    progetto
    (Obbligatorio) Il nome della cartella del pacchetto in cui viene creato lo schema. Ad esempio, creando un componente dei risultati di ricerca in packages/order-search-result, il nome del progetto sarà order-search-result.
    Il comando seguente fornisce un esempio con parametri.
    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
  3. Lo schema crea il nuovo componente e aggiorna i file condivisi. L'output nel terminale riassume i file che sono stati creati e aggiornati.
  4. Se hai creato un file Componente di campo, modifica il file HTML generato per passare il parametro dell'intestazione per specificare un'etichetta per la scheda. Se ad esempio si fa riferimento a cattura dello schermo, la scheda attiva ha l'etichetta "Dettagli". L'etichetta "Dettagli" viene specificata aggiungendo un'intestazione con il percorso del valore letterale della traduzione nel fileen.json file:
    [header]="'SHIPMENT_DETAILS.SHIPMENT_TABS.SHIPMENT_DETAILS'"