Adicionar Clientlibs

Adicionar uma ClientLibraryFolder (clientlibs)

Crie uma ClientLibraryFolder chamada clientlibsque conterá o JS e o CSS usados para renderizar as páginas do site.

O valor da propriedade categoriesfornecido para esta biblioteca de cliente é o identificador usado para incluir diretamente esta clientlib de uma página de conteúdo ou para incorporá-la a outras clientlibs.

Usando CRXDE Lite, expanda /etc/designs
Clique com o botão direito do mouse em an-scf-sandbox e selecione Create Node
- Nome: clientlibs
- Tipo: cq:ClientLibraryFolder
Clique em OK

chlimage_1-220

Na guia Propriedades do novo nó clientlibs, digite a propriedade categories:

Nome: categoria
Tipo: String
Valor: apps.an-scf-sandbox
Clique em Adicionar
Clique em Salvar tudo

Observação: como visualizar o valor do categoria com "aplicativos". é uma convenção para identificar o "aplicativo proprietário" como estando na pasta /apps, não /libs. IMPORTANTE: Adicione arquivos de espaço reservado js.txt e css.txt. (Não é oficialmente uma cq:ClientLibraryFolder sem eles.)

Clique com o botão direito do mouse em /etc/designs/an-scf-sandbox/clientlibs
Selecione Criar Arquivo…
Digite Nome: css.txt
Selecione Criar Arquivo…
Digite Nome: js.txt
Clique em Salvar tudo

chlimage_1-221

A primeira linha do css.txt e do js.txt identifica o local base a partir do qual as seguintes listas de arquivos são encontradas.

Tente definir o conteúdo de css.txt como:

#base=.
 style.css

Em seguida, crie um arquivo em clientlibs chamado style.css e defina o conteúdo como:

body {

background-color: #b0c4de;

}

Incorporar Clientlibs SCF

Na guia Propriedades do nó clientlibs, digite a propriedade String de vários valores embed. Isso incorporará as bibliotecas do lado do cliente (clientlibs) necessárias para componentes SCF. Neste tutorial, adicionaremos muitas das clientlibs necessárias para os componentes Comunidades.

Observe que essa pode ser ou não a abordagem desejada para usar em um site de produção, pois há considerações de conveniência em relação ao tamanho/velocidade dos clientlibs baixados para cada página.

Se apenas estiver usando um recurso em uma página, você poderá incluir a clientlib completa desse recurso diretamente na página, por exemplo, <% ui:includeClientLib categoria=cq.social.hbs.forum" %>

Nesse caso, estamos incluindo todos, e assim preferimos os clientlibs SCF mais básicos que são os clientlibs do autor:

Nome: embed
Tipo: String
Clique em Multi
Valor: cq.social.scf

<enter> exibirá uma caixa de diálogo

Clique [+]depois de cada entrada para adicionar as seguintes categorias clientlib:
- cq.ckeditor
- cq.social.author.hbs.comments
- cq.social.author.hbs.forum
- cq.social.author.hbs.rating
- cq.social.author.hbs.reviews
- cq.social.author.hbs.voting
- Clique em OK
Clique em Salvar tudo

chlimage_1-222

É assim que /etc/designs/an-scf-sandbox/clientlibs agora deve aparecer no repositório:

chlimage_1-223

Incluir Clientlibs no Modelo PlayPage

Sem incluir a categoria apps.an-scf-sandbox ClientLibraryFolder na página, os componentes do SCF não estarão funcionais nem com estilo, pois os Javascript(s) e o(s) estilo(s) necessários não estarão disponíveis.

Por exemplo, sem incluir clientlibs, o componente de comentários SCF aparece sem estilo:

chlimage_1-224

Depois que apps.an-scf-sandbox clientlibs é incluído, o componente de comentários SCF aparece no estilo:

chlimage_1-225

A instrução include pertence à seção <head> do script <html>. O padrão foundation head.jsp inclui um script que pode ser sobreposto: headlibs.jsp.

Copie headlibs.jsp e inclua clientlibs:

Usando CRXDE Lite, selecione /libs/foundation/components/page/headlibs.jsp
Clique com o botão direito do mouse e selecione Copiar (ou selecione Copiar na barra de ferramentas)
Selecionar /apps/an-scf-sandbox/components/playpage
Clique com o botão direito do mouse e selecione Colar (ou selecione Colar na barra de ferramentas)
Clique no duplo em headlibs.jsp para abri-lo
Anexar a seguinte linha ao final do arquivo

<ui:includeClientLib categories="apps.an-scf-sandbox"/>
Clique em Salvar tudo

<%@ page session="false" %><%
%><%@include file="/libs/foundation/global.jsp?lang=pt-BR" %><%
%><ui:includeClientLib categories="cq.foundation-main"/><%
%>
<cq:include script="/libs/cq/cloudserviceconfigs/components/servicelibs/servicelibs.jsp?lang=pt-BR"/>
<% currentDesign.writeCssIncludes(pageContext); %>
<ui:includeClientLib categories="apps.an-scf-sandbox"/>

Carregue seu site no navegador e veja se o plano de fundo não é uma sombra de azul.

http://localhost:4502/content/an-scf-sandbox/en/play.html

chlimage_1-226

Salvar seu trabalho até agora

Nesse ponto, existe uma caixa de proteção minimalista e pode valer a pena salvar como um pacote para que, durante a reprodução, se o seu repositório ficar corrompido e você desejar start, você possa desligar, renomear ou excluir a pasta crx-quickstart/, ligar o servidor, carregar e instalar esse pacote salvo e não precisar repetir essas etapas mais básicas.

Este pacote existe no tutorial Criar uma página de amostra para aqueles que não podem esperar para saltar e reproduzir start!..

Para criar um pacote:

Em CRXDE Lite, clique no ícone Pacote
Clique em Criar pacote
- Nome do pacote: an-scf-sandbox-minimal-pkg
- Versão: 0.1
- Grupo: <deixar como padrão>
- Clique em OK
Clique em Editar
- Selecione a guia Filtros
  - Clique em Adicionar filtro
  - Caminho raiz: <navegue até /apps/an-scf-sandbox>
  - Clique em Concluído
  - Clique em Adicionar filtro
  - Caminho raiz: <navegue até /etc/designs/an-scf-sandbox>
  - Clique em Concluído
  - Clique em Adicionar filtro
  - Caminho raiz: <navegue até /content/an-scf-sandbox>
  - Clique em Concluído
- Clique em Salvar
Clique em Compilação

Agora você pode selecionar Download para salvá-lo em disco e Carregar pacote em outro lugar, bem como selecionar Mais > Replicar para encaminhar a caixa de proteção para uma instância de publicação de host local para expandir o realm da sua caixa de proteção.