AEM espaço de trabalho do formulário fornece recursos para modificar a semântica e a funcionalidade da apresentação de sua interface. Os tipos de personalizações para alterar o estilo, o layout, a formatação, a marca e a funcionalidade principal estão descritos abaixo.
A área de trabalho do AEM Forms oferece suporte a uma grande variedade de personalizações para atualizar o layout da interface do usuário, sua aparência, funcionalidade e muito mais. As personalizações envolvem a atualização de um ou mais dos seguintes:
Você pode alterar a aparência, o layout e outras semânticas de apresentação da área de trabalho do AEM Forms. Altere o espaço de trabalho personalizando os arquivos CSS, HTML e JavaScript™. Todos os arquivos padrão são fornecidos na instalação padrão.
As etapas mais comumente aplicáveis são abordadas em Etapas genéricas para personalização do espaço de trabalho AEM Forms. Para obter exemplos específicos dessas personalizações, incluindo as etapas detalhadas, consulte os artigos relacionados no final deste artigo.
Antes de personalizar o espaço de trabalho, familiarize-se com a folha de estilos padrão fornecida com a AEM Forms em /libs/ws/css/style.css.
Para personalizar o espaço de trabalho, é recomendável que você se familiarize com a folha de estilos existente, style.css, localizada na pasta /libs/ws/css. Descreve - se a seguir alguns componentes de relevo.
Elemento CSS |
Componente da interface do usuário modificado |
---|---|
#cabeçalho |
Cabeçalho da área de trabalho do AEM Forms |
.categoryList |
Lista categoria |
.categoryList .header |
Cabeçalho da lista da categoria |
.categoria, .filtros |
Espaço abaixo da lista da categoria |
.categoria, .filter |
Categoria |
.categoria:pairar, .categoria.seleted, .filter:pairar, .filter.seleted |
Categoria e mouse sobre o estilo de categoria selecionados |
categoryListBar .tool, categoryListBar .content |
Página de processo de start (lista fechada) |
filterListBar .tool, filterListBar .content |
Página de Tarefas Pendentes (lista de Filtro Fechado) |
processNameListBar .tool, processNameListBar .content |
Página de rastreamento (lista de nome de processo fechada) |
.startPointList, .tasklist |
A lista do ponto de partida ou a lista da tarefa |
.startPointList .header, .tasklist .header |
O cabeçalho de uma lista de ponto de partida ou de uma lista de tarefa |
.startpoint.seleted, .tarefa.seleted |
O ponto de partida ou a tarefa selecionada |
.startpoint.seleted .description, .tarefa.seleted .description |
Descrição do ponto de partida ou tarefa selecionado |
#taskarea |
Área da Tarefa |
#header.dropdown |
Menu suspenso do usuário no cabeçalho |
.sortDrop dd ul |
Lista suspensa Classificar tarefa |
A aparência da área de trabalho do AEM Forms recebe sua aparência de um CSS. Ao personalizar o CSS, é possível alterar a semântica de apresentação do espaço de trabalho, como fontes, cores, marcas e layout.
As etapas de nível superior para personalização de CSS são:
html.jsp
.Para obter as etapas exatas para fazer essas personalizações, consulte Etapas genéricas para personalização do espaço de trabalho AEM Forms. O arquivo CSS fornecido com a área de trabalho da AEM Forms está em /libs/ws/css/. Para personalizações relacionadas a CSS, use o Pacote de remessa. Para obter exemplos específicos de personalizações relacionadas ao CSS, consulte os tópicos de Ajuda relacionados no final deste artigo.
Você pode personalizar a área de trabalho do AEM Forms para adicionar avatares de usuários ou para adicionar o logotipo de sua organização. Para essas personalizações, use Envio de pacote.
As etapas de nível superior para personalizações das imagens são:
html.jsp
.Para começar a personalizar as imagens na área de trabalho do AEM Forms, siga as etapas genéricas para personalização da área de trabalho do AEM Forms. Para obter exemplos específicos de personalizações relacionadas à imagem, consulte os tópicos de Ajuda relacionados no final deste artigo.
Os modelos HTML ajudam a definir a aparência e o layout da interface do usuário do espaço de trabalho. Ao atualizar os modelos HTML padrão, você pode personalizar a interface de usuário padrão do layout.
As etapas de nível superior para personalizações no modelo HTML são:
Para obter exemplos específicos dessas personalizações, consulte os tópicos de Ajuda fornecidos no final deste artigo. Escolha entre o Pacote de Entrega ou Pacote de Desenvolvimento, dependendo do modelo a ser personalizado.
Para modificar a funcionalidade do espaço de trabalho do AEM Forms, altere o código-fonte do JavaScript. As modificações na funcionalidade principal são rotuladas como alterações semânticas. Você modifica modelos, visualizações e modelos fornecidos como parte do código-fonte da área de trabalho do AEM Forms.
As etapas de nível superior para fazer alterações semânticas para modificar a funcionalidade da área de trabalho do AEM Forms são:
Para obter mais informações conceituais sobre os componentes que fazem parte do código-fonte, consulte Descrição de componentes reutilizáveis. Para essas personalizações, use o Pacote de desenvolvedores.
Como o espaço de trabalho AEM Forms é um software baseado em componentes, ele pode ser facilmente personalizado e reutilizado. Você pode integrar facilmente os componentes da área de trabalho com seus aplicativos da Web.
Para obter mais informações conceituais, consulte Descrição de componentes reutilizáveis e para obter instruções sobre como usar os componentes, consulte Integração de componentes do espaço de trabalho AEM Forms em aplicativos da Web.
O pacote contém o código-fonte da área de trabalho do AEM Forms. O pacote está disponível em [*LC root*]\sdk\html-workspace\adobe-lc-workspace-src.zip
.
Ele se destina principalmente a personalizações, pois fornece a capacidade de gerar:
client-pkg:
client-html:
assembly - contém zip.xml usado pelo script para criar o SDK do espaço de trabalho do AEM Forms.
src/main/webapp -
css - contém folhas de estilos para a área de trabalho do AEM Forms.
imagens - contém imagens usadas na área de trabalho do AEM Forms.
js:
libs - contém todas as bibliotecas de terceiros usadas na área de trabalho do AEM Forms.
licenciamentos - contém licenças para arquivos HTML e JS, bem como código para prefixar essas licenças para os respectivos arquivos de origem.
minifier - usado para combinação, miniificação e especificação do código javascript personalizado.
resourcejs_otimizer - Usado para combinação, minificação e especificação de origem javascript.
resource_generator - usado para gerar register.js e modelcontrollerpath.js.
tempo de execução:
main.js
router.js
libs/ws: pdf.html e pluginPing.pdf são usados para carregar PDF forms na área de trabalho do AEM Forms e WSNextAdapter.swf é usado para carregar formulários SWF e Guias na área de trabalho do AEM Forms.
localidades:
html.jsp
GET.jsp
O pacote CRX pode ser implantado no repositório CRX™. Está disponível em [*LC root*]\crx-repository\install\adobe-lc-workspace-pkg.zip
.
Este pacote pode ser criado usando os três perfis descritos abaixo.
Perfil | Descrição | Uso |
---|---|---|
Perfil de remessa | Este perfil cria um pacote CRX do menor tamanho possível usando a miniificação. Este pacote é o mais eficiente. Todos os arquivos JavaScript™ são combinados e reduzidos em um único arquivo JS. | Use esse perfil quando não forem necessárias mais alterações semânticas nos arquivos JS. |
Depurar perfil | Este perfil cria um pacote CRX moderadamente eficiente. O tamanho do pacote é ligeiramente maior do que o pacote criado usando o perfil de remessa. Este pacote tem a maioria dos arquivos JavaScript combinados em um único arquivo JS. | Use este perfil para depuração. |
Perfil Dev | Este perfil cria um pacote CRX do maior tamanho possível. Todos os arquivos JavaScript estão disponíveis separadamente, como estão no pacote SDK. | Use esse perfil ao incorporar alterações semânticas. |
css - contém style.css, ie.css e jquery-ui.css.
imagens - Contém todas as imagens.
js:
libs:
tempo de execução:
main.js (combinado, minimizado e certificado).
registry.js
libs:
Localidade - contém .content.xml.
localidades:
Índice - contém .content.xml
perfil - contém offline.jsp.
GET.jsp
html.jsp
content.xml
_rep_policy.xml
css - contém style.css, ie.css e jqueri-ui.css.
imagens - Contém todas as imagens.
js:
libs:
tempo de execução:
main.js (combinado).
registry.js
libs:
Localidade - contém .content.xml.
localidades:
Índice - contém .content.xml
perfil - contém offline.jsp.
GET.jsp
html.jsp
content.xml
_rep_policy.xml
instalação mvn clean -P Dev em client-pkg
css - contém style.css, ie.css e jqueri-ui.css.
imagens - Contém todas as imagens.
js:
libs - contém todas as bibliotecas usadas na área de trabalho do AEM Forms.
required - Contém requirements.js
jqueryui - Contém jquery.ui.datepicker.ja.js
tempo de execução:
main.js
registry.js
router.js
libs:
Localidade - contém .content.xml.
localidades:
Índice - contém .content.xml
perfil - contém offline.jsp.
GET.jsp
html.jsp
content.xml
_rep_policy.xml