Criando componentes com esquemas Angular

Dentro do kit de ferramentas do desenvolvedor, IBM fornece esquemas Angular para gerar rapidamente componentes com código inicial que você pode usar em aplicativos. Os componentes incluem páginas de pesquisa, tabelas e detalhes de campo.

Use os esquemas para gerar componentes com o mesmo design e funções dos componentes existentes no Centro de pedidos. Os componentes gerados também incluem as bibliotecas necessárias para a comunicação com diversos serviços, tais como:
  • O backend do sistema de Sterling™ Order Management.
  • Sterling Intelligent Promising Inventory Visibility inquilinos.
  • Outros locatários de microsserviços.
  • As bibliotecas Carbon UI usadas em páginas existentes.
Para obter informações sobre como usar os esquemas para criar novas aplicações, consulte Criação de novos aplicativos no Order Hub de próxima geração.

Antes de iniciar

  1. Extraia o Hub de pedidos de próxima geração código. Para mais informações, veja Primeiros passos com a personalização do Order Hub de próxima geração.
  2. Execute o seguinte comando para definir ostrict-ssl para falso.
    npm config set "strict-ssl" false
  3. Acesse o IBM-forneceu esquemas executando o seguinte comando para reinstalar a versão mais recente do @buc/schematics. Para o Angular v15, execute o seguinte comando.
    npm uninstall -g @buc/schematics
npm install -g ./lib/buc/schematics/schematics-v3latest.tgz
    Para o Angular v18, execute o seguinte comando.
    npm uninstall -g @buc/schematics
npm install -g ./lib/buc/schematics/schematics-v4latest.tgz
  4. Para obter ajuda com um script esquemático, execute.
    ng g @buc/schematics:<component> --help
  5. Crie componentes.

Criando um componente de página de pesquisa

Criar umasearch page componente para que os usuários especifiquem critérios de pesquisa e pesquisem dados.

Osearch-panel esquema cria o componente da página de pesquisa e inclui código para oferecer suporte aos seguintes recursos:
  1. Uma trilha de migalhas
  2. Salvar busca função
  3. Personalize os critérios de pesquisa função
  4. Procurar por agrupamentos
A captura de tela a seguir mostra o Pesquisa de remessa página e destaca os recursos na página de pesquisa.
Uma captura de tela da página de pesquisa de remessa. A trilha de navegação é cercada por uma caixa com o rótulo número 1. O botão Pesquisa salva é cercado por uma caixa com o rótulo 2. O botão Personalizar critérios de pesquisa está rodeado por uma caixa com o rótulo 3. O agrupamento Pesquisar por é cercado por uma caixa com o rótulo 4.

Procedimento

  1. Abra um terminal e vá até o módulo onde deseja adicionar o componente. Por exemplo,devtoolkit_docker/orderhub-code/buc-app-order .
  2. Crie o componente executando o seguinte comando.
    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
    nome
    (Obrigatório) O nome do componente.
    O esquema cria um nome de classe de componente removendo caracteres especiais e anexando a palavra "SearchComponent". Por exemplo, se você especificar o nome minha amostra, o nome da classe gerada é MySampleSearchComponent.
    caminho do arquivo json
    (Obrigatório) O caminho para onde você deseja atualizar ou criar o arquivo de configuração (search_fields.json ). Por exemplo,packages/order-shared/assets/buc-app-order .
    Nosearch_fields.json arquivo, o esquema cria um nome de objeto anexando "-search" ao nome. Por exemplo, minha pesquisa de amostra.
    caminho do arquivo de tradução
    (Obrigatório) O caminho para onde você deseja atualizar ou criar os literais de tradução (en.json) . Por exemplo,packages/order-shared/assets/buc-app-order/i18n .
    Noen.json arquivo, o esquema cria um nome de objeto anexando "-search" ao nome. Por exemplo, minha pesquisa de amostra.
    biblioteca compartilhada
    (Obrigatório) O nome da pasta da biblioteca compartilhada.
    caminho
    (Opcional) O caminho para criar o arquivo do componente, relativo ao módulo atual. Por padrão, uma pasta com o mesmo nome do componente é criada na pasta raiz do módulo.
    nome do arquivo json
    (Opcional) Por padrão, o esquema é atualizadosearch_fields.json com dados de teste. Se você precisar atualizar ou adicionar seu objeto a um arquivo diferente, use este parâmetro. Se você especificar um nome de arquivo que não existe na pasta de ativos, um novo arquivo será criado.
    projeto
    (Obrigatório) O nome da pasta do pacote na qual o esquema está sendo criado. Por exemplo, criando um componente de resultado de pesquisa em packages/order-search-result, o nome do projeto será order-search-result.
    O comando a seguir fornece um exemplo com 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
  3. O esquema cria o novo componente e atualiza os arquivos compartilhados. A saída no terminal resume os arquivos que foram criados e atualizados.

Criando um componente de página de resultados de pesquisa

Criar umasearch results page componente para exibir os resultados depois que um usuário executa uma consulta no componente da página de pesquisa.

Osearch-result-component o esquema gera dois componentes:
  1. Um componente de resultado de pesquisa.
  2. Um componente de tabela (BaseTableComponent tipo), cujo seletor está incluído no modelo de componente de resultado da pesquisa.
A captura de tela a seguir mostra o Resultados da pesquisa de remessa página e destaca os recursos na página de resultados.
Uma captura de tela da página de resultados da pesquisa. A caixa 1 representa o componente do resultado da pesquisa. O Quadro 2 representa o componente tabela.
Procedimento
  1. Abra um terminal e vá até o módulo onde deseja adicionar o componente. Por exemplo,devtoolkit_docker/orderhub-code/buc-app-order .
  2. Crie o componente da página de resultados de pesquisa executando o comando a seguir. O esquema cria o componente e atualiza o objeto de roteamento de amostra para o componente de resultado da pesquisa no módulo de roteamento mais próximo.
    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
    nome
    (Obrigatório) O nome do componente.
    O esquema cria um nome de classe de componente removendo caracteres especiais e anexando a palavra "SearchResultComponent" para indicar um componente de resultados de pesquisa e a palavra "TableComponent" para indicar um componente da tabela. Por exemplo, se você especificar o nome minha amostra, os nomes das classes geradas são MySampleSearchResultComponent e MySampleTableComponent.
    caminho do arquivo json
    (Obrigatório) O caminho para onde você deseja atualizar ou criar o arquivo de configuração (buc-table-config.json) .
    Nobuc-table-config.json arquivo, o esquema cria um nome de objeto anexando "-table" ao nome. Por exemplo, minha tabela de amostra.
    caminho do arquivo de tradução
    (Obrigatório) O caminho para onde você deseja atualizar ou criar os literais de tradução (en.json ).
    Noen.json arquivo, o esquema cria um nome de objeto anexando "-table" ao nome. Por exemplo, minha tabela de amostra.
    biblioteca compartilhada
    (Obrigatório) O nome da pasta da biblioteca compartilhada.
    caminho
    (Opcional) O caminho para criar o componente de resultado da pesquisa, relativo ao módulo atual. Por padrão, uma pasta com o mesmo nome do componente é criada na pasta raiz do módulo.
    caminho da tabela
    (Opcional) O caminho para criar o componente da tabela, relativo ao módulo atual. Por padrão, uma pasta com o mesmo nome do componente é criada na pasta raiz do módulo.
    nome do arquivo json
    (Opcional) Por padrão, o esquema é atualizadobuc-table-config.json com dados de teste. Se você precisar atualizar ou adicionar seu objeto a um arquivo diferente, use este parâmetro. Se você especificar um nome de arquivo que não existe na pasta de ativos, um novo arquivo será criado.
    projeto
    (Obrigatório) O nome da pasta do pacote na qual o esquema está sendo criado. Por exemplo, criando um componente de resultado de pesquisa em packages/order-search-result, o nome do projeto será order-search-result.
    O comando a seguir fornece um exemplo com 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
  3. O esquema cria o novo componente e atualiza os arquivos compartilhados. A saída no terminal resume os arquivos que foram criados e atualizados.

Criando um componente Tabela

Criar umatable componente para exibir dados em uma tabela.

Otable-component esquema suporta a criação de um componente de tabela estendendo uma das duas classes de tabela:
  1. ClientSidePaginationBaseTableComponent:Para paginação do lado do cliente, onde todas as entradas de linha da tabela são recuperadas em uma chamada de API.
  2. BaseTableComponent:Para resultados baseados em páginas do lado do servidor da API.
A captura de tela a seguir mostra o Resultados da pesquisa de remessa página e destaca o componente da tabela.
Uma captura de tela da página de resultados da pesquisa. Uma caixa envolve o componente da tabela.
Procedimento
  1. Abra um terminal e vá até o módulo onde deseja adicionar o componente. Por exemplo,devtoolkit_docker/orderhub-code/buc-app-order .
  2. Crie o componente da tabela executando o comando a seguir.
    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
    nome
    (Obrigatório) O nome do componente.
    O esquema cria um nome de classe de componente removendo caracteres especiais e anexando a palavra "TableComponent". Por exemplo, se você especificar o nome minha amostra, o nome da classe gerada é MySampleTableComponent.
    ampliar
    (Opcional) O nome da classe de tabela extensível. Os valores válidos são ClientSidePaginationBaseTableComponent ou BaseTableComponent. Se você não especificar um valor no comando, será solicitado no terminal que você escolha um componente. Em Git Bash para Windows, o parâmetro extend é obrigatório.
    caminho do arquivo json
    (Obrigatório) O caminho para onde você deseja atualizar ou criar o arquivo de configuração (buc-table-config.json) .
    Nobuc-table-config.json arquivo, o esquema cria um nome de objeto anexando "-table" ao nome. Por exemplo, minha tabela de amostra.
    caminho do arquivo de tradução
    (Obrigatório) O caminho para onde você deseja atualizar ou criar os literais de tradução (en.json ).
    Noen.json arquivo, o esquema cria um nome de objeto anexando "-table" ao nome. Por exemplo, minha tabela de amostra.
    caminho
    (Opcional) O caminho para criar o arquivo do componente, relativo ao módulo atual. Por padrão, uma pasta com o mesmo nome do componente é criada na pasta raiz do módulo.
    nome do arquivo json
    (Opcional) Por padrão, o esquema é atualizadobuc-table-config.json com dados de teste. Se você precisar atualizar ou adicionar seu objeto a um arquivo diferente, use este parâmetro. Se você especificar um nome de arquivo que não existe na pasta de ativos, um novo arquivo será criado.
    projeto
    (Obrigatório) O nome da pasta do pacote na qual o esquema está sendo criado. Por exemplo, criando um componente de resultado de pesquisa em packages/order-search-result, o nome do projeto será order-search-result.
    O comando a seguir fornece um exemplo com 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
  3. O esquema cria o novo componente e atualiza os arquivos compartilhados. A saída no terminal resume os arquivos que foram criados e atualizados.

Como referência, o tutorial a seguir cria componentes de tabela com esquemas do Angular: Tutorial: Personalização da página de resultados de pesquisa do Inventário.

Criando um componente Campo

Criar umaField componente para exibir detalhes de um registro específico. Por exemplo, datas de pedido, linhas de pedido e informações do nó de envio de um pedido.

Osummary-component o esquemático suporta a criação de dois tipos de componentes:
  1. Field component:Para exibir atributos na área de conteúdo de uma página.
  2. Summary component:Para exibir atributos no painel lateral direito de uma página de detalhes.
A captura de tela a seguir mostra o Detalhes da remessa página e destaca os diferentes componentes.
Uma captura de tela da página de detalhes da remessa. O Quadro 1 representa o componente Campo. O Quadro 2 representa um componente Resumo.
Procedimento
  1. Abra um terminal e vá até o módulo onde deseja adicionar o componente. Por exemplo,devtoolkit_docker/orderhub-code/buc-app-order .
  2. Crie o componente de campo executando o comando a seguir.
    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
    Parâmetros
    nome
    (Obrigatório) O nome do componente.
    O esquema cria um nome de classe de componente removendo caracteres especiais e anexando a palavra "FieldsComponent". Por exemplo, se você especificar o nome minha amostra, o nome da classe gerada é MySampleFieldsComponent.
    caminho do arquivo json
    (Obrigatório) O caminho para onde você deseja atualizar ou criar o arquivo de configuração (buc-field-details.json ).
    Nobuc-field-details.json arquivo, o esquema cria um nome de objeto anexando "-fields" ao nome. Por exemplo, meu-campo de amostra.
    caminho do arquivo de tradução
    (Obrigatório) O caminho para onde você deseja atualizar ou criar os literais de tradução (en.json ).
    Noen.json arquivo, o esquema cria um nome de objeto anexando "-field" ao nome. Por exemplo, meu-campo de amostra.
    é-painel de resumo
    (Opcional) Booleano para determinar o tipo de componente a ser criado. Especificamos verdadeiro para criar um componente Resumo. Especificamos falso para criar um componente Field. O valor padrão é true .
    caminho
    (Opcional) O caminho para criar o arquivo do componente, relativo ao módulo atual. Por padrão, uma pasta com o mesmo nome do componente é criada na pasta raiz do módulo.
    nome do arquivo json
    (Opcional) Por padrão, o esquema é atualizadobuc-field-details.json com dados de teste. Se você precisar atualizar ou adicionar seu objeto a um arquivo diferente, use este parâmetro. Se você especificar um nome de arquivo que não existe na pasta de ativos, um novo arquivo será criado.
    projeto
    (Obrigatório) O nome da pasta do pacote na qual o esquema está sendo criado. Por exemplo, criando um componente de resultado de pesquisa em packages/order-search-result, o nome do projeto será order-search-result.
    O comando a seguir fornece um exemplo com 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
  3. O esquema cria o novo componente e atualiza os arquivos compartilhados. A saída no terminal resume os arquivos que foram criados e atualizados.
  4. Se você criou um Componente de campo, edite o arquivo HTML gerado para passar o parâmetro header para especificar um rótulo para a guia. Por exemplo, se você se referir ao captura de tela, a guia ativa terá o rótulo "Detalhes". O rótulo "Detalhes" é especificado adicionando um cabeçalho com o caminho para o literal de tradução noen.json arquivo:
    [header]="'SHIPMENT_DETAILS.SHIPMENT_TABS.SHIPMENT_DETAILS'"