Componentes fixos editáveis

Os componentes editáveis do React podem ser "fixos" ou codificados nas visualizações do SPA. Isso permite que os desenvolvedores coloquem componentes compatíveis com o Editor de SPA nas visualizações de SPA e que os usuários criem o conteúdo dos componentes no Editor de AEM SPA.

Componentes fixos

Neste capítulo, substituímos o título do modo de exibição de Página Inicial, "Aventuras Atuais", que é um texto codificado em Home.js com um componente de Título fixo, mas editável. Os componentes fixos garantem o posicionamento do título, mas também permitem que o texto do título seja criado e seja alterado fora do ciclo de desenvolvimento.

Atualizar o aplicativo WKND

Para adicionar um componente Fixo à exibição Início:

  • Crie um componente de Título editável personalizado e registre-o no tipo de recurso do Título do projeto
  • Inserir o componente de Título editável na visualização inicial do SPA

Criar um componente editável do Título do React

Na exibição Início do SPA, substitua o texto codificado <h2>Current Adventures</h2> por um componente de Título editável personalizado. Antes que o componente de Título possa ser usado, é necessário:

  1. Criar um componente personalizado do React Title
  2. Decorar o componente Título personalizado usando métodos de @adobe/aem-react-editable-components para torná-lo editável.
  3. Registre o componente de Título editável com MapTo para que ele possa ser usado no componente de contêiner mais tarde.

Para fazer isso:

  1. Abrir projeto SPA remoto em ~/Code/aem-guides-wknd-graphql/remote-spa-tutorial/react-app no IDE

  2. Criar um componente React em react-app/src/components/editable/core/Title.js

  3. Adicione o código a seguir a Title.js.

    code language-javascript
    import React from 'react'
    import { RoutedLink } from "./RoutedLink";
    
    const TitleLink = (props) => {
    return (
        <RoutedLink className={props.baseCssClass + (props.nested ? '-' : '__') + 'link'}
            isRouted={props.routed}
            to={props.linkURL}>
        {props.text}
        </RoutedLink>
    );
    };
    
    const TitleV2Contents = (props) => {
        if (!props.linkDisabled) {
            return <TitleLink {...props} />
        }
    
        return <>{props.text}</>
    };
    
    export const Title = (props) => {
        if (!props.baseCssClass) {
            props.baseCssClass = 'cmp-title'
        }
    
        const elementType = (!!props.type) ? props.type.toString() : 'h3';
        return (<div className={props.baseCssClass}>
            {
                React.createElement(elementType, {
                        className: props.baseCssClass + (props.nested ? '-' : '__') + 'text',
                    },
                    <TitleV2Contents {...props} />
                )
            }
    
            </div>)
    }
    
    export const titleIsEmpty = (props) => props.text == null || props.text.trim().length === 0
    

    Observe que este componente do React ainda não é editável usando o Editor SPA AEM. Este componente básico se tornará editável na próxima etapa.

    Leia os comentários do código para obter detalhes sobre a implementação.

  4. Criar um componente React em react-app/src/components/editable/EditableTitle.js

  5. Adicione o código a seguir a EditableTitle.js.

    code language-javascript
    // Import the withMappable API provided bu the AEM SPA Editor JS SDK
    import { EditableComponent, MapTo } from '@adobe/aem-react-editable-components';
    import React from 'react'
    
    // Import the AEM the Title component implementation and it's Empty Function
    import { Title, titleIsEmpty } from "./core/Title";
    import { withConditionalPlaceHolder } from "./core/util/withConditionalPlaceholder";
    import { withStandardBaseCssClass } from "./core/util/withStandardBaseCssClass";
    
    // The sling:resourceType of the AEM component used to collected and serialize the data this React component displays
    const RESOURCE_TYPE = "wknd-app/components/title";
    
    // Create an EditConfig to allow the AEM SPA Editor to properly render the component in the Editor's context
    const EditConfig = {
        emptyLabel: "Title",        // The component placeholder in AEM SPA Editor
        isEmpty: titleIsEmpty,      // The function to determine if this component has been authored
        resourceType: RESOURCE_TYPE // The sling:resourceType this component is mapped to
    };
    
    export const WrappedTitle = (props) => {
        const Wrapped = withConditionalPlaceHolder(withStandardBaseCssClass(Title, "cmp-title"), titleIsEmpty, "TitleV2")
        return <Wrapped {...props} />
    }
    
    // EditableComponent makes the component editable by the AEM editor, either rendered statically or in a container
    const EditableTitle = (props) => <EditableComponent config={EditConfig} {...props}><WrappedTitle /></EditableComponent>
    
    // MapTo allows the AEM SPA Editor JS SDK to dynamically render components added to SPA Editor Containers
    MapTo(RESOURCE_TYPE)(EditableTitle);
    
    export default EditableTitle;
    

    Este componente do React EditableTitle envolve o componente do React Title, envolvendo-o e decorando-o para ser editável no Editor de SPA AEM.

Usar o componente EditableTitle do React

Agora que o componente EditableTitle React está registrado e disponível para uso no aplicativo React, substitua o texto de título embutido em código na exibição Início.

  1. Editar react-app/src/components/Home.js

  2. No Home() na parte inferior, importe EditableTitle e substitua o título embutido em código pelo novo componente AEMTitle:

    code language-javascript
    ...
    import EditableTitle from './editable/EditableTitle';
    ...
    function Home() {
        return (
            <div className="Home">
    
            <EditableTitle
                pagePath='/content/wknd-app/us/en/home'
                itemPath='root/title'/>
    
                <Adventures />
            </div>
        );
    }
    

O arquivo Home.js deve ser semelhante a:

Home.js

Criar o componente de Título no AEM

  1. Faça logon no AEM Author

  2. Navegue até Sites > Aplicativo WKND

  3. Toque em Página inicial e selecione Editar na barra de ações superior

  4. Selecione Editar no seletor de modo de edição, na parte superior direita do Editor de páginas

  5. Passe o mouse sobre o texto de título padrão abaixo do logotipo WKND e acima da lista de aventuras, até que o contorno de edição azul seja exibido

  6. Toque para expor a barra de ação do componente e toque na chave inglesa para editar

    Barra de ação do componente de título

  7. Crie o componente de Título:

    • Título: Aventuras WKND

    • Tipo/Tamanho: H2

      Caixa de diálogo do componente de Título

  8. Toque em Concluído para salvar

  9. Visualizar as alterações no Editor SPA do AEM

  10. Atualize o Aplicativo WKND em execução localmente em http://localhost:3000 e veja as alterações de título criadas refletidas imediatamente.

    Componente de título no SPA

Parabéns.

Você adicionou um componente fixo e editável ao aplicativo WKND! Agora você sabe como:

  • Criação de um componente fixo, mas editável, para o SPA
  • Criar o componente fixo no AEM
  • Ver o conteúdo criado no SPA remoto

Próximas etapas

As próximas etapas são para adicionar um componente de contêiner AEM ResponsiveGrid ao SPA que permita que o autor adicione componentes editáveis ao SPA!

recommendation-more-help
e25b6834-e87f-4ff3-ba56-4cd16cdfdec4