Criar aparências personalizadas para campos de formulário adaptáveis create-custom-appearances-for-adaptive-form-fields

Criar um projeto: crie um projeto Maven que gere um pacote de conteúdo para implantar no AEM.

Estender uma classe de widget existente: estender uma classe de widget existente e substituir as classes necessárias.

Criar uma biblioteca do cliente: criar uma biblioteca clientLib: af.customwidget e adicionar os arquivos JavaScript e CSS necessários.

Criar e instalar o projeto: criar o projeto Maven e instalar o pacote de conteúdo gerado no AEM.

Atualizar o formulário adaptável: atualize as propriedades do campo de formulário adaptável para usar a aparência personalizada.

Inclua a dependência de plug-in de terceiros no projeto.

1. Coloque os plug-ins de terceiros ou personalizados do jQuery na pasta jqueryplugin/javascript e nos arquivos CSS relacionados na pasta jqueryplugin/css. Para obter mais detalhes, consulte os arquivos JS e CSS na pasta jqueryplugin/javascript and jqueryplugin/css.

2. Modifique os arquivos js.txt e css.txt para incluir qualquer arquivo JavaScript e CSS adicional do plug-in jQuery.

Integre o plug-in de terceiros à estrutura para permitir a interação entre a estrutura de aparência personalizada e o plug-in jQuery. O novo widget só funcionará depois que você estender ou substituir as funções a seguir.

Atualize o arquivo JavaScript na pasta integration/javascript, conforme necessário.

• Substituir o texto __widgetName__ pelo nome real do widget.

• Estenda o widget de uma classe de widget pronta para uso adequada. Na maioria dos casos, é a classe do widget correspondente ao widget existente que está sendo substituído. O nome da classe pai é usado em vários locais, portanto, é recomendável procurar todas as instâncias da cadeia de caracteres xfaWidget.textField no arquivo e substituí-las pela classe pai real usada.

• Estenda o método render para fornecer uma interface alternativa. É o local de onde o plug-in jQuery será chamado para atualizar a interface ou o comportamento de interação. O método render deve retornar um elemento de controle de usuário.

• Estenda o método getOptionsMap para substituir qualquer configuração de opção afetada devido a uma alteração no widget. A função retorna um mapeamento que fornece detalhes da ação a ser executada ao alterar uma opção. As teclas são as opções fornecidas ao widget e os valores são as funções chamadas sempre que uma alteração na opção é detectada.

• O método getEventMap mapeia eventos acionados pelo widget, com os eventos exigidos pelo modelo de formulário adaptável. O valor padrão mapeia eventos HTML padrão para o widget padrão e precisa ser atualizado se um evento alternativo for acionado.

• showDisplayValue e showValue aplicam a cláusula de exibição e edição de imagem e podem ser substituídas para terem um comportamento alternativo.

• O método getCommitValue é chamado pela estrutura de formulários adaptáveis quando o evento commit ocorre. Geralmente, é o evento de saída, exceto os elementos de lista suspensa, botão de opção e caixa de seleção (onde ocorre na alteração). Para obter mais informações, consulte Expressões Forms adaptáveis.

• O arquivo de modelo fornece uma implementação de amostra para vários métodos. Remova os métodos que não devem ser estendidos.

Execute o seguinte comando para criar um projeto local com base no arquétipo Maven:

mvn archetype:generate -DarchetypeRepository=https://repo1.maven.org/maven2/com/adobe/ -DarchetypeGroupId=com.adobe.aemforms -DarchetypeArtifactId=custom-appearance-archetype -DarchetypeVersion=1.0.4

Ele solicita que você especifique valores para os parâmetros a seguir.
Os valores usados nesta amostra estão realçados em negrito.

Define value for property 'groupId': com.adobe.afwidgets

Define value for property 'artifactId': customWidgets

Define value for property 'version': 1.0.1-SNAPSHOT

Define value for property 'package': com.adobe.afwidgets

Define value for property 'artifactName': customWidgets

Define value for property 'packageGroup': adobe/customWidgets

Define value for property 'widgetName': numericStepper

Navegue até o diretório customWidgets (valor especificado para a propriedade artifactID) e execute o seguinte comando para gerar um projeto Eclipse:

mvn eclipse:eclipse

Abra a ferramenta Eclipse e faça o seguinte para importar o projeto Eclipse:

1. Selecione Arquivo > Importar > Projetos existentes no Workspace.

2. Procure e selecione a pasta onde você executou o comando archetype:generate.

3. Clique em Concluir.

   

Selecione o widget a ser usado para a aparência personalizada. Este exemplo usa o seguinte widget de passo numérico:

https://www.jqueryscript.net/form/User-Friendly-Number-Input-Spinner-with-jQuery-Bootstrap.html

No projeto Eclipse, revise o código do plug-in no arquivo plugin.js para garantir que ele corresponda aos requisitos da aparência. Nesta amostra, o aspecto preenche os seguintes requisitos:

• O escalonador numérico deve se estender de - $.xfaWidget.numericInput.

• O método set value do widget define o valor depois que o foco está no campo. É um requisito obrigatório para um widget de formulário adaptável.

• O método render precisa ser substituído para invocar o método bootstrapNumber.

• Não há dependência adicional para o plug-in além do código-fonte principal do plug-in.

• A amostra não executa nenhum estilo no depurador, portanto, nenhum CSS adicional é necessário.

• O objeto $userControl deve estar disponível para o método render. É um campo do tipo text que é clonado com o código do plug-in.

• Os botões + e - devem ser desabilitados quando o campo estiver desabilitado.

Substitua o conteúdo de bootstrap-number-input.js (plug-in jQuery) pelo conteúdo do arquivo numericStepper-plugin.js.

No arquivo numericStepper-widget.js, adicione o seguinte código para substituir o método de renderização para invocar o plug-in e retornar o objeto $userControl:

render : function() {
     var control = $.xfaWidget.numericInput.prototype.render.apply(this, arguments);
     var $control = $(control);
     var controlObject;
     try{
         if($control){
         $control.bootstrapNumber();
         var id = $control.attr("id");
         controlObject = $("#"+id);
         }
     }catch (exc){
          console.log(exc);
     }
     return controlObject;
}

No arquivo numericStepper-widget.js, substitua a propriedade getOptionsMap para substituir a opção de acesso e oculte os botões + e - no modo desabilitado.

getOptionsMap: function(){
    var parentOptionsMap = $.xfaWidget.numericInput.prototype.getOptionsMap.apply(this,arguments),

    newMap = $.extend({},parentOptionsMap,

     {

           "access": function(val) {
           switch(val) {
              case "open" :
                this.$userControl.removeAttr("readOnly");
                this.$userControl.removeAttr("aria-readonly");
                this.$userControl.removeAttr("disabled");
                this.$userControl.removeAttr("aria-disabled");
                this.$userControl.parent().find(".input-group-btn button").prop('disabled',false);
                break;
              case "nonInteractive" :
              case "protected" :
                this.$userControl.attr("disabled", "disabled");
                this.$userControl.attr("aria-disabled", "true");
                this.$userControl.parent().find(".input-group-btn button").prop('disabled',true);
                break;
             case "readOnly" :
                this.$userControl.attr("readOnly", "readOnly");
                this.$userControl.attr("aria-readonly", "true");
                this.$userControl.parent().find(".input-group-btn button").prop('disabled',true);
                break;
            default :
                this.$userControl.removeAttr("disabled");
                this.$userControl.removeAttr("aria-disabled");
                this.$userControl.parent().find(".input-group-btn button").prop('disabled',false);
                break;
          }
       },
   });
   return newMap;
 }

Salve as alterações, navegue até a pasta que contém o arquivo pom.xml e execute o seguinte comando Maven para criar o projeto:

mvn clean install

Instale o pacote usando o Gerenciador de pacotes AEM.

Abra o formulário adaptável no modo de edição no qual deseja aplicar a aparência personalizada e faça o seguinte:

1. Clique com o botão direito do mouse no campo no qual deseja aplicar a aparência e clique em Editar para abrir a caixa de diálogo Editar Componente.

2. Na guia Estilo, atualize a propriedade classe CSS para adicionar widget_numericStepper.