Desenvolvendo Um Tema de Liferay

Desenvolvendo um Tema de Liferay
Liferay Portal: 6.2 - Documentao oficial: desenvolvedor
Como desenvolvedor, voc deseja que seu site comunique suas idias de forma clara e eficaz.
Voc no deseja que o design do seu site iniba os usurios de interagir com seu contedo.
aqui que os temas entram em jogo. Os temas permitem que voc tome um controle criativo e
conte a histria que deseja contar com seu site. Eles lhe do controle sobre a aparncia do seu
site, at os mnimos detalhes.
Ao abordar o design do tema, tenha em mente o pblico-alvo, a mensagem que voc est
tentando comunicar e a finalidade do site. O design do tema ajuda a responder a essas
perguntas.
Este Caminho de Aprendizagem leva voc a desenvolver um tema para o Lunar Resort de
Liferay usando a linguagem do modelo Freemarker. Voc aprender como estilo seu tema com
CSS, como torn-lo receptivo para dispositivos mveis, como alavancar cones do Bootstrap e
Font Awesome no seu tema e como implementar configuraes de tema configurveis.
Antes de comear, certifique-se de ter um ambiente de desenvolvimento Liferay instalado.

Voc pode aprender a instalar Liferay IDE ou Liferay Developer Studio no Beginning Liferay
Development Learning Path. Voc pode usar outras ferramentas para o desenvolvimento, mas
as ferramentas de desenvolvimento da Liferay so as mais naturais de usar, j que elas so
projetadas para o Liferay. Como voc estar implantando muitas mudanas ao longo deste
Caminho de Aprendizagem, verifique se voc tambm possui o modo de desenvolvedor
habilitado em seu Portal. Voc pode aprender a habilitar o modo de desenvolvedor para o seu
Portal no tutorial Using Developer Mode with Themes.
hora de comear!
Configurando o Tema
Nesta parte do Caminho de Aprendizagem, voc criar as bases para o tema Lunar Resort. Voc
aprender o bom fluxo de trabalho e estrutura de diretrios necessrios para criar um tema.
Finalmente, voc modificar os modelos padro portal/_normal.ftl e navigation.ftl
para corresponder ao mock up do Lunar Resort.
Um mock up de um tema serve como um guia para o tema final que ser:
Para comear, baixe os recursos que voc precisar para completar cada exerccio e
descompacte-os em uma pasta de sua escolha.
Agora voc pode seguir em frente e entrar diretamente na criao do projeto de tema!
Desenvolvendo um Tema de Liferay Criando um Projeto de Tema
Artigos Relacionados (4)

Criando um Projeto Temtico
O resto deste caminho de aprendizagem assume que voc seguiu as instrues para configurar
o Liferay IDE ou o Liferay Developer Studio. Se voc fez isso, voc est pronto para comear!
Selecione Arquivo Novo ...
Configurando a estrutura de diretrio do tema
Nota: Esta etapa assume que voc baixou e descompactou os recursos necessrios para
configurar o tema. Isso foi mencionado na introduo a esta etapa. A estrutura de diretrio do
seu tema deve refletir ...
A Estrutura HTML do portal_normal.ftl
O arquivo portal_normal.ftl um modelo atravs do qual todos os portlets em um site Liferay

so renderizados. Olhe para a figura abaixo para ver como ser a estrutura HTML concluda:
Figura 1: ...
Modificando modelos de tema
Nesta seo, voc adicionar alguns toques para portal_normal.ftl e navigation.ftl para
corresponder a maquete final para o Lunar Resort. Abra portal_normal.ftl e encontre o <body
class = "$ {css_class}"> ...
Criando um Projeto Tema tico
O resto deste caminho de aprendizagem assume que voc seguiu as instrues para configurar
o Liferay IDE ou o Liferay Developer Studio. Se voc fez isso, voc est pronto para comear!
1. Selecione File New Liferay Plugin Project.

2. No Assistente de projeto, entre no tema lunar-resort para o nome do projeto e Lunar
Resort Theme para o nome de exibio. Deixe o tipo de compilao como Ant e
selecione o SDK de plugins apropriado e o tempo de execuo correspondente de
Liferay.
3. Selecione Tema para o tipo de Plugin e clique em Avanar
4. Deixe o pai do Tema e a estrutura do tema como _styled e Freemarker e clique em
Concluir.
Figura 1: O Assistente de projeto facilita a criao de um tema.
Nota: A primeira vez que voc cria um projeto, verifique se voc est online. Em segundo
plano, o SDK dos plugins do Liferay faz download de vrios arquivos JAR necessrios. Isso
mantm o plugin inicial do SDK baixar pequeno, mas pode demorar vrios minutos para criar
seu primeiro projeto. Projetos subseqentes so criados quase que instantaneamente.
Agora voc ver seu projeto no Package Explorer esquerda. O que voc acabou de fazer
criar um tema Liferay em branco, baseado no tema _syled de Liferay.
Em vez de criar um tema a partir do zero, melhor usar um tema de base Liferay como ponto
de partida para garantir uma compatibilidade total. As alteraes feitas no tema substituem as
configuraes padro do tema _syled.
Voc pode aprender sobre a anatomia do tema a seguir.

Configurando a estrutura de
direto rio do tema
Nota: Esta etapa assume que voc baixou e descompactou os recursos necessrios para
configurar o tema. Isso foi mencionado na introduo a esta etapa.
A estrutura do diretrio do seu tema deve refletir aquela abaixo quando estiver concluda:
lunar-resort-theme/
docroot/
_diffs/ (subfolders not created by default)
css/
images/
templates/
css/ - aui - (many directories) - _aui_custom.scss -
_aui_variables.scss - _liferay_custom.scss
application.css
aui.css
base.css
custom.css
dockbar.css
extras.css
layout.css
main.css
navigation.css
portlet.css
images/
(many directories)
js/
main.js
templates/
init_custom.ftl
navigation.ftl
portal_normal.ftl
portal_pop_up.ftl
portlet.ftl
WEB-INF/ - liferay-look-and-feel.xml
liferay-plugin-package.properties
Os temas so baseados em diferenas dos temas em que se baseiam. Quando voc criou o
projeto, voc selecionou o tema _syled. Uma cpia do cdigo deste tema, portanto, existe na
maioria dessas pastas. Isso garante que voc tenha um estilo padro para todos os elementos
da pgina. medida que voc escreve seu tema, voc definir apenas as diferenas entre o
que deseja e o que o tema subjacente j fornece.
Suas edies devem ser feitas nos arquivos no diretrio _diffs, que, em seguida, transferem
para os arquivos no diretrio pai. Por esse motivo, o diretrio na pasta _diffs deve refletir o
diretrio pai. Se as estruturas no coincidem, as alteraes que voc faz no sero aplicadas.
Para manter os arquivos de base inalterados, voc s deve adicionar os arquivos que deseja
editar para o diretrio _diffs.
Como uma prtica recomendada, todo o seu estilo CSS deve entrar em um arquivo custom.css
no diretrio _diffs / css /. Como est carregado por ltimo, todos os estilos colocados em
custom.css substituem os estilos no tema base principal. Ao manter todos os seus estilos em
um arquivo, a manuteno torna-se um processo mais fcil.
Agora que voc conhece a estrutura do tema e o fluxo de trabalho de desenvolvimento, voc
pode comear a trabalhar em seu tema.
1. Clique com o boto direito do mouse na pasta _diffs no Package Explorer e selecione
New Folder.
2. Com a pasta _diffs selecionada, digite css para o nome da pasta e clique em Concluir.
3. Repita as etapas 1 e 2 para criar as imagens restantes e os diretrios dos modelos.
4. Copie o arquivo custom.css do diretrio docroot / css / para o diretrio _diffs / css.
Todas as alteraes feitas no arquivo custom.css no diretrio _diffs so aplicadas no
arquivo espelhado.
5. Copie o _aui_variables.scss para o diretrio diffs / css.
6. Copie init_custom.ftl, navigation.ftl e portal_normal.ftl do diretrio docroot /
templates para o diretrio diffs / templates.
Agora voc tem o ponto de partida para o seu tema. Existem alguns itens de limpeza adicionais
para cuidar antes de passar para a prxima seo.
1. Abra _aui_variables.scss e adicione as seguintes variveis ao topo:
$ BkColor: #FFF;
$ ThemeMainColor: # DF5946;
2. Copie o lunar-resort-logo.png do diretrio / images da pasta de cdigo para o diretrio

_diffs / images do tema.
3. Finalmente, instale o arquivo guestbook-portlet.war da ltima etapa do MVC Learning
Path, copiando-o para o diretrio do pacote / implantao de Liferay.
Se voc no passou pelo MVC Learning Path, voc deve verificar se voc est interessado em
desenvolver aplicativos para o Liferay.
Agora que a limpeza est terminada, voc pode examinar o HTML para portal_normal.ftl em
seguida.
A Estrutura HTML do portal_normal.ftl
O arquivo portal_normal.ftl um modelo atravs do qual todos os portlets em um site Liferay

so renderizados.
Veja a figura abaixo para ver como ser a estrutura HTML concluda:
Figura 1: O HTML dividido em sees.
A estrutura HTML dividida em trs sees principais: Banner, Contedo e Rodap. O Banner
contm o logotipo do site, seu nome, o ttulo da pgina e a navegao principal. O contedo
<div> contm as migalhas de mapas para o site e os portlets na pgina. Finalmente, o rodap
detm o 'powered by Liferay' e as ligaes de redes sociais. As trs sees principais esto
contidas em um invlucro <div> que usado para ajustar a largura do site.
Agora que voc est familiarizado com a estrutura HTML, voc pode fazer algumas
modificaes nos modelos de tema a seguir.
Modificando modelos de tema
Nesta seo, voc adicionar alguns toques para portal_normal.ftl e navigation.ftl para
corresponder ao mock up final para o Lunar Resort.
1. Abra portal_normal.ftl e encontre <body class = "$ {css_class}"> e substitua-o pelo

seguinte cdigo:
<Body class = "$ {css_class} dockbar-split">
Seu tema agora tem o dockbar moderno que est no tema clssico de Liferay.
2. Encontre o seguinte cdigo e remova-o de portal_normal.ftl:
<#if! Is_signed_in>
<A href = "$ {sign_in_url}" dados-redirecionamento = "$ {is_login_redirect_
Obrigatrio? String} "id =" sign-in "rel =" nofollow "> $ {sign_in_text} </a>
</ # If>
O link de login padro foi removido, mas voc o substituir na prxima etapa.
3. Encontre o <@ liferay.dockbar /> cdigo e remova a instruo <#if is_signed_in> e a tag
de fechamento </ # if> que o envolve.
O cdigo atualizado agora exibe o Dockbar se voc est logado ou no. Se voc estiver
desconectado, o Dockbar simplificado e mostra um link de login. Isso ser til mais tarde no
caminho de aprendizagem quando o tema for tornado receptivo.
4. Insira o seguinte cdigo logo acima da tag </ div> de fechamento para o contedo
<div>:
<#if the_title! = "Reservation">

<Div id = "reserveBtnWrapper">
<Span id = "reserveBtn">
<a href="/web/guest/reservation"> Faa a sua reserva! </a>
</ Span>
</ Div>
</ # If>
Isso adiciona um link para fazer uma reserva para o Lunar Resort em cada pgina, exceto a
pgina de Reservas. No momento, voc s tem a pgina de boas-vindas padro para que voc
possa estar coando a cabea. No se preocupe, voc adicionar as pginas restantes mais
tarde, usando o Importador de recursos. Se voc tentar fazer uma reserva usando o link, voc
ser saudado com um erro, mas isso deve ser esperado neste momento.
5. Salve o arquivo.
Em seguida, hora de atualizar sua navegao.
6. Abra o navigation.ftl e substitua o contedo pelo seguinte cdigo:
<nav class="${nav_css_class}" id="navigation" role="navigation">

<ul aria-label="<@liferay.language key="site-pages" />"
role="menubar">
<#list nav_items as nav_item>
<#assign nav_item_attr_has_popup = "" />
<#assign nav_item_attr_selected = "" />
<#assign nav_item_css_class = "lfr-nav-item" />
<#assign nav_item_caret = "" />
<#assign nav_item_link_css_class = "" />
<#if nav_item.isSelected()>
<#assign nav_item_attr_selected = "aria-selected='true'"
/>
<#assign nav_item_css_class = "${nav_item_css_class}
selected active" />
</#if>
<#if nav_item.hasChildren()>
<#assign nav_item_attr_has_popup =
"aria-haspopup='true'" />
<#assign nav_item_caret = "<b class='icon-caret-down'>
</b>" />
<#assign nav_item_css_class = "${nav_item_css_class}
dropdown" />
<#assign nav_item_link_css_class = "dropdown-toggle" />
</#if>
<li ${nav_item_attr_selected} class="${nav_item_css_class}"

id="layout_${nav_item.getLayoutId()}" role="presentation">
<a aria-labelledby="layout_${nav_item.getLayoutId()}"
${nav_item_attr_has_popup}
class="${nav_item_link_css_class}"
href="${nav_item.getURL()}" ${nav_item.getTarget()}
role="menuitem"><span>${nav_item.icon()}
${nav_item.getName()} ${nav_item_caret}</span></a>
<#if nav_item.hasChildren()>
<ul class="dropdown-menu child-menu" role="menu">
<#list nav_item.getChildren() as nav_child>
<#assign nav_child_attr_selected = "" />
<#assign nav_child_css_class =
"lfr-nav-item" />
<#if nav_item.isSelected()>
<#assign nav_child_attr_selected
= "aria-selected='true'" />
<#assign nav_child_css_class =
"selected" />
</#if>
<li class="${nav_child_css_class}"
id="layout_${nav_child.getLayoutId()}"
${nav_child_attr_selected}
role="presentation">
<a aria-labelledby=
"layout_${nav_child.getLayoutId()}"
href="${nav_child.getURL()}"
${nav_child.getTarget()}
role="menuitem">
${nav_child.getName()}</a>
</li>
</#list>
</ul>
</#if>
</li>
</#list>
</ul>
</nav>
O cdigo atualizado uma duplicao do cdigo antigo com algumas adies. A mudana
principal as classes de menu filho atualizadas: os itens do menu filho agora so suportados.
Alm disso, uma classe chamada "Ativo" destaca a pgina atual.
7. Salve o arquivo.
Voc tem os modelos bem envolvidos, para que voc possa avanar para implantar o prximo
tema.
1. Uma vez que seu servidor seja iniciado, selecione o tema do Package Explorer, arraste-
o para baixo e solte-o no topo do servidor para implantar seu tema.
2. Depois que seu tema foi implantado, faa login no Portal e goto Admin
Administrao do Site Pginas.
3. Certifique-se de que as Pginas Pblicas esto selecionadas e role para o ttulo dos
Temas Disponveis.
4. Selecione o boto de opo para o tema Lunar Resort e clique em Salvar.
O tema agora aplicado! Antes de voc olhar para isso, voc precisa cuidar de mais
alguns itens de limpeza.
5. Selecione o logotipo no menu direita e desmarque Mostrar nome do site.
6. Clique em Procurar e selecione o lunar-resort-logo.png no diretrio _diffs / images do
Lunar Resort Theme.
7. Clique em Salvar.
8. Depois de receber a mensagem de sucesso, volte para a pgina de boas-vindas.
Voc ver agora que seu novo tema est no lugar. Deve ser semelhante figura abaixo:
Figura 1: o tema base de Liferay um bom ponto de partida.
O tema parece quebrado no momento, mas isso esperado. Nas sees a seguir, voc corrigir
isso. Isso mostra o ponto de partida que o tema base fornece.
Voc instalou e aplicou com sucesso seu novo tema! Na prxima seo, voc aprender como
importar recursos para o seu tema.
Importando recursos para o seu tema
Voc criou o tema para o Lunar Resort, mas parece muito vazio no momento. Voc precisa de
algum contedo padro para ir com ele, ento parece bom quando instalado pela primeira
vez. H alguns mtodos que voc pode usar para importar recursos com seu tema. Voc pode
criar um arquivo archive.lar, que importa o LAR com o tema, ou voc pode criar um arquivo
sitemap.json para manter seu layout e preencher seu contedo de uma estrutura de diretrio.
Ambos os mtodos so boas opes, mas existem algumas desvantagens ao usar o mtodo
LAR. Os LARs dependem da verso, ento, atualizar para uma nova verso do Liferay significa
recriar o LAR. Alm disso, quaisquer alteraes feitas no contedo exigem que o LAR seja
recriado.
O sitemap.json, por outro lado, funciona em qualquer verso do Liferay. Voc pode, assim,
implementar mudanas com um simples deslocamento.
Nesta seo, voc aprender a usar o Importador de recursos com o tema Lunar Resort usando
um sitemap.json. Para importar contedo com o Importador de recursos, voc precisar
primeiro criar a estrutura de diretrio apropriada.
Modificando modelos de tema Configurando a Estrutura de Diretrio para o Importador de
Recursos
Artigos Relacionados (3)
Configurando a Estrutura do Diretrio para o Importador de Recursos
Um diretrio de importadores de recursos em branco foi criado com seu tema. Ao invs de
adicionar cada arquivo individualmente e criar todas as pastas restantes, v em frente e exclua
o existente importador de recursos ...
Criando o arquivo sitemap.json
O arquivo sitemap.json define o layout para o contedo da Web, pginas e portlets em seu site.
Como a extenso do arquivo sugere, sitemap.json usa a sintaxe JSON, ento, se voc est
familiarizado com JSON, voc ...
Definindo liferay-plugin-package.properties
Nesta seo, voc configurar o arquivo liferay-plugin-package.properties para o Importador de

recursos. Abra o arquivo liferay-plugin-package.properties na pasta WEB-INF do tema. De...
Configurando a Estrutura do
Direto rio para o Importador de
Recursos
Um diretrio resources-importer em branco foi criado com seu tema. Em vez de adicionar
cada arquivo individualmente e criar todas as pastas restantes, v em frente e exclua o
diretrio resources-importer existente.
1. Exclua a pasta resources-importer existente no diretrio docroot /WEB-INF/src do

tema Lunar Resort e substitua-a pela pasta resources-importer no diretrio themes
/code/ diretrio do Learning Path.
O diretrio atualizado do Importador de Recursos usa a seguinte estrutura para organizar os

arquivos do Lunar Resort:
lunar-resort-theme/
docroot/WEB-INF/src/
resources-importer/
document_library/
documents/
(documents and media files)
journal/
articles/
(web content articles)
structures/
templates/
Os recursos do tema so organizados em documentos e arquivos de mdia e artigos de

contedo da web. Estruturas e modelos recebem suas prprias pastas dentro do diretrio
journal.
Os artigos de contedo Web podem ser escritos em HTML ou XML e colocados na pasta journal
/articles/. As imagens includas no contedo da Web so referenciadas usando o nome do
arquivo na pasta document_library/documents. O contedo Web faz referncia imagem
usando o seguinte cdigo:
Src = "[$ FILE = filename.filetype $]"
Esse todo o trabalho de preparao que precisa ser completado para a maioria dos
contedos web. Para contedos web mais avanado que requeiram estruturas e modelos,
existem algumas etapas adicionais que voc precisar seguir.
Para o carrossel, o contedo web adicionado sua prpria pasta carousel dentro da pasta
journal/articles/. A estrutura ento adicionada pasta /structures. Finalmente, o modelo de
correspondncia adicionado pasta /templates e colocado em sua prpria pasta de
carousel. O diretrio final do carrossel corresponde seguinte estrutura:
journal/
articles/
carousel/
carousel.xml
(more web content articles)
structures/
carousel.xml
templates/
carousel/
carousel.vm
importante que voc crie a estrutura do arquivo desta forma para que o contedo da web
seja reconhecido.
Agora voc pode criar o arquivo sitemap.json.

Criando o arquivo sitemap.json
O arquivo sitemap.json define o layout para o contedo da Web, pginas e portlets em seu site.
Como a extenso do arquivo sugere, o sitemap.json usa a sintaxe JSON, ento, se voc estiver
familiarizado com a JSON, voc deve poder navegar at o sitemap bastante fcil. Se voc no
est familiarizado com a sintaxe JSON, no se preocupe, o sitemap ser explicado com mais
detalhes.
Uma vez que o arquivo sitemap.json j foi criado quando voc copiou o contedo da pasta
resources-importer, voc no precisa fazer nada para implementar. Aqui est o que ele faz.
O cdigo abaixo adiciona uma pgina Welcome e About Us usando o modelo de layout padro
e preenche as pginas com artigos de contedo da Web:
{
"LayoutTemplateId": "1_column",
"Layouts": [
{
"Nome": "Bem-vindo",
"Ttulo": "Bem-vindo",
"FriendlyURL": "/ home",
"Colunas": [
[
"Carousel.xml",
"Bem-vindo ao Lunar Resort.html",
"Amenities.html",
"2 column description.html"
]
]
},
{
"Nome": "Sobre ns",
"Ttulo": "Sobre ns",
"FriendlyURL": "/ about-us",
"Colunas": [
[
"Sobre Ns Info.html"
]
]
}
O sitemap comea definindo uma identificao de modelo de layout padro para as pginas.
Voc pode encontrar IDs de modelo de layout na pasta layouttpl em seu pacote Liferay. Em
seguida, as pginas, referidas como layouts no sitemap, so organizadas. A pgina recebe um
nome, um ttulo e um URL amigvel.
Em seguida, o contedo da web est organizado na seo columns. Columns refere-se s

colunas no modelo de layout. Uma vez que a pgina Welcome usa o layout padro da
1_column, o layoutTemplateId no precisa ser especificado. Uma vez que a pgina usa um
layout de uma coluna, os artigos de contedo da Web so todos colocados dentro do mesmo
conjunto de colchetes [. Tal como acontece com uma imagem num artigo de contedo da Web,
voc faz referncia ao contedo da Web pelo nome do arquivo no Importador de recursos.
O layout abaixo adiciona uma pgina Activities com uma pgina filha Rover Racing e as
preenche com contedo Web:
{
"Nome": "Atividades",
"Ttulo": "Atividades",
"FriendlyURL": "/ atividades",
"Colunas": [
[
"Atividades Info.html",
"Atividades Links.html"
]
],
"Layouts": [
{
"Nome": "Rover Racing",
"Ttulo": "Rover Racing",
"FriendlyURL": "/ rover-racing",
"Colunas": [
[
"Rover Racing Article.html"
]
]
},
Como voc pode ver, para criar uma pgina filha, voc usa a mesma sintaxe de layouts que
voc usaria para criar uma pgina pai. A configurao de layouts para a pgina filho colocada
dentro da configurao da pgina principal.
O cdigo a seguir adiciona dois portlets pgina e define seu prprio modelo de layout.
{
"Nome": "Colaborao",
"Ttulo": "Colaborao",
"FriendlyURL": "/ colaborao",
"LayoutTemplateId": "2_columns",
"Colunas": [
[
{
"PortletId": "36"
}
],
[
{
"PortletId": "115"
}
]
]
}
Os portlets so definidos nas colunas do modelo de layout, como os artigos de contedo da

web, com apenas uma pequena variao na sintaxe. Eles so referenciados por sua
identificao de portlet, que voc pode encontrar no portlet-custom.xml dentro de seu pacote
Liferay. Um layoutTemplateId est definido para a pgina porque no usa a ID padro do
modelo que foi definida na parte superior do sitemap.
O cdigo a seguir cria uma pgina oculta no menu de navegao e adiciona um artigo de
contedo da web e um portlet personalizado para a pgina.
{
"Nome": "Reserva",
"Ttulo": "Reserva",
"FriendlyURL": "/ reservation",
"Escondido": "verdadeiro",
"Colunas": [
[
"Formulrio de Reserva.html",
{
"PortletId": "guestbook_WAR_guestbookportlet"
}
]
]
}
Portlets plugins so definidos da mesma forma que os portlets principais, como o portlet Web
Content Display, so definidos e suas IDs so definidas em seus prprios arquivos portlet.xml.
Eles seguem um padro fcil de lembrar: portletName_WAR_projectName. Para que o portlet
seja atribudo a uma ID, ela deve ser implantada primeiro. Voc cuidou disso na ltima seo
do Caminho de Aprendizagem.
Agora voc deve ter uma melhor compreenso do arquivo sitemap.json. H um ltimo arquivo
para configurar, liferay-plugin-package.properties, com o qual voc trabalhar na prxima
seo.
Definindo liferay-plugin-package.properties
Nesta seo, voc configurar o arquivo liferay-plugin-package.properties para o Importador de

recursos.
1. Abra o arquivo liferay-plugin-package.properties na pasta WEB-INF do tema.

Por padro, o modo de desenvolvedor habilitado com a seguinte linha de cdigo:
resource-import-developer-mode-enabled = true. Isso garante que os recursos do tema
substituam os recursos do portal existentes em cada implantao. Voc deve deixar
esta propriedade habilitada durante o desenvolvimento do tema, mas nunca deve
estar em produo. Uma vez que os recursos para o tema sero importados
diretamente para o site e no um modelo de site, voc precisa adicionar duas
propriedades adicionais.
2. Adicione o seguinte cdigo na parte inferior do arquivo:
Resource-import-target-class-name = com.liferay.portal.model.Group
Importador de recursos-importador-alvo = convidado
A primeira propriedade define o tipo de entidade do portal para a qual os recursos so

escritos, o que o site neste caso. A segunda propriedade define o nome da entidade
do portal para escrever os recursos, que est configurado para o grupo Convidado
neste caso, para que os recursos sejam visveis nas pginas pblicas. importante
notar que voc nunca deve definir a propriedade resource-import-target-class-name =
com.liferay.portal.model.Group em um ambiente de produo. Em vez disso, voc deve
remover a propriedade, que ir importar os recursos para o modelo do site.
3. Descomente o seguinte cdigo e salve o arquivo:
required-deployment-contexts=\resources-importer-web
Isso exige que o plug-in resources-importer-web seja instalado para que o tema seja
implantado. Se o resources-importer-web no estiver instalado, o tema ser colocado em
espera at o plugin ser instalado. L voc tem isso! Todos os recursos esto prontos para serem
implantados com o tema.
4. Faa o Redeploy do tema Lunar Resort e atualize o navegador para ver as mudanas.
Seu tema deve se parecer com a imagem abaixo:

Figura 1: O Importador de recursos adiciona pginas e contedo ao seu site.
Agora que seu tema tem essas pginas iniciais e contedo, voc pode desativar o Resources
Importer. Se voc no fizer isso, as pginas, contedos web e documentos sero reimportados
desnecessariamente e problemas de referncia de ativos podem ocorrer quando voc
reimplantar seu tema. Para desativar o Resources Importer, siga estas etapas:
1. Comente as seguintes propriedades do arquivo liferay-plugin-package.properties:
required-deployment-contexts=\
resources-importer-web
resources-importer-target-class-name=com.liferay.portal.model.Group
resources-importer-target-value=Guest
Seu projeto de tema est pronto para mais desenvolvimento.
Como voc pode ver, o Resources Importer no muito complicado uma vez que voc quebre
em pedaos individuais e serve como uma maneira eficaz de organizar seu tema com contedo
e pginas. Na prxima parte do Caminho de Aprendizagem, voc aprender a modelar seu
tema usando CSS.
Parei na pgina
https://customer.liferay.com/pt/documentation/6.2/develop/learning-
paths/themes/-/official_documentation/themes/styling-your-theme-with-css

Desenvolvendo Um Tema de Liferay - Traduzido

Enviado por

Direitos autorais:

Formatos disponíveis

Desenvolvendo Um Tema de Liferay - Traduzido

Enviado por

Dados do documento

Descrição original:

Direitos autorais

Formatos disponíveis

Compartilhar este documento

Compartilhar ou incorporar documento

Opções de compartilhamento

Você considera este documento útil?

Este conteúdo é inapropriado?

Direitos autorais:

Formatos disponíveis

Desenvolvendo Um Tema de Liferay - Traduzido

Enviado por

Direitos autorais:

Formatos disponíveis

Liferay Portal: 6.2 - Documentao oficial: desenvolvedor

Antes de comear, certifique-se de ter um ambiente de desenvolvimento Liferay instalado.

Artigos Relacionados (4)

Configurando a estrutura de diretrio do tema

A Estrutura HTML do portal_normal.ftl

O arquivo portal_normal.ftl um modelo atravs do qual todos os portlets em um site Liferay

Modificando modelos de tema

1. Selecione File New Liferay Plugin Project.

Voc pode aprender sobre a anatomia do tema a seguir.

1. Abra _aui_variables.scss e adicione as seguintes variveis ao topo:

2. Copie o lunar-resort-logo.png do diretrio / images da pasta de cdigo para o diretrio

O arquivo portal_normal.ftl um modelo atravs do qual todos os portlets em um site Liferay

1. Abra portal_normal.ftl e encontre <body class = "$ {css_class}"> e substitua-o pelo

<Body class = "$ {css_class} dockbar-split">

2. Encontre o seguinte cdigo e remova-o de portal_normal.ftl:

<#if the_title! = "Reservation">

Em seguida, hora de atualizar sua navegao.

6. Abra o navigation.ftl e substitua o contedo pelo seguinte cdigo:

<nav class="${nav_css_class}" id="navigation" role="navigation">

<li ${nav_item_attr_selected} class="${nav_item_css_class}"

Figura 1: o tema base de Liferay um bom ponto de partida.

Artigos Relacionados (3)

Configurando a Estrutura do Diretrio para o Importador de Recursos

Criando o arquivo sitemap.json

Nesta seo, voc configurar o arquivo liferay-plugin-package.properties para o Importador de

1. Exclua a pasta resources-importer existente no diretrio docroot /WEB-INF/src do

O diretrio atualizado do Importador de Recursos usa a seguinte estrutura para organizar os

Os recursos do tema so organizados em documentos e arquivos de mdia e artigos de

Agora voc pode criar o arquivo sitemap.json.

Em seguida, o contedo da web est organizado na seo columns. Columns refere-se s

Os portlets so definidos nas colunas do modelo de layout, como os artigos de contedo da

Liferay Portal: 6.2 - Documentao oficial: desenvolvedor

Nesta seo, voc configurar o arquivo liferay-plugin-package.properties para o Importador de

1. Abra o arquivo liferay-plugin-package.properties na pasta WEB-INF do tema.

A primeira propriedade define o tipo de entidade do portal para a qual os recursos so

3. Descomente o seguinte cdigo e salve o arquivo:

Seu tema deve se parecer com a imagem abaixo:

1. Comente as seguintes propriedades do arquivo liferay-plugin-package.properties:

Seu projeto de tema est pronto para mais desenvolvimento.

Você também pode gostar