Salve galera, depois de estudar bastante sobre o Liferay, ainda não sou expert, pois o sistema é bem grande e um pouco complicado pra mim, já que venho do PHP e não do java.
Então vamos começar do ponto em que você já tem a IDE do Liferay instalada no seu PC e com o tomcat rodando o liferay. Já instalou o liferay e configurou. E agora? como Criar um tema para o site? Como utilizar o html que o Front-End enviou para jogar para dentro do Liferay?
É agora que vou ajudar você!
Comecei também assim sem saber de nada sobre o liferay. tive simplesmente que ler e rodar e fazer um tema assim do nada e "pra já". Quebrei bastante a cabeça mas funcionou. Estou montando o segundo tema para Liferay.
Vamos lá partindo daquele princípio de que você já está com o liferay instalado e rodando tudo no tema básico, vamos criar nosso primeiro Tema.
Na sua IDE do Liferay ( eclipse com plugins do Liferay ), clique em File -> New -> Liferay Plugin Project, Como na imagem abaixo;
Agora você terá que dar um nome a ele, coloquei como siteTeste, mas você pode colocar o nome do seu tema ou o próprio nome do seu site em Project Name, não se preocupe com o Display Name, ele ficará igual ao Project Name, só não utilize acentuação nesses campos pois depois ficará bem bizarro o nome do seu tema.
Logo abaixo terá um campo de select chamado Plugin Type, selecione Theme e clique em NEXT.
Nessa nova etapa deixe o Theme Parent para _styled e mude o Theme Framework para Velocity. Caso não saiba o que é velocity, uma pesquisada no google e você já começa a se ambientar ahahha. Clique em Finish e pronto você terá criado o seu tema.
Agora temos o tema com as pastas de acordo com o Liferay. Do lado esquerdo da sua IDE você verá o nome do seu tema, no meu está siteTeste-theme. Clique no expandir e abrirá mais algumas estruturas. Expanda a pasta docroot e você verá uma estrutura amigável, que provavelmente será mais ambientável para você.
Existe uma pasta _diffs, que por recomendação da própria liferay, devemos jogar todas as modificações e criações dentro da pasta _diffs do seu tema.
Agora temos que criar uma estrutura semelhante dentro da pasta _diffs, criaremos 4 pastas dentro de _diffs, são elas: css, images, js, templaes. Abaixo tem uma representação de como fazer. Basta clicar com o mouse em cima de _diffs e clicar com o botão direito, New -> Folder e escolher o nome da pasta.
Seu tema deverá ficar assim:
Agora temos que jogar nossas imagens do nosso html dentro do liferay. Como fazer? abra a pasta de imagens que está no html que o Front-End te mandou o que você criou. selecione todas as imagens e arraste para a pasta images dentro da ide. Outra maneira é clicar com o botão direito na pasta que você deseja acessar e clicar em propriedades, lá tem o caminho, no meu caso é.
C:\Liferay\liferay-developer-studio\liferay-plugins-sdk-6.2\themes\siteTeste-theme\docroot\_diffs\images
Basta copiar as imagens e depois atualizar a ide para aparecer os arquivos lá.
faça isso com a pasta JS E CSS também. Só uma coisa, o liferay entende as modificações no css no arquivo custom.css, o que você poderá fazer é, criar o arquivo custom.css e copiar o conteúdo do seu css principal e jogar la. Qualquer alteração você modificará no custom.css.
Agora a pasta templates. Fora da pasta _diffs temos uma pasta chamada templates, iremos utilizar 2 templates default como base para o nosso tema. Copie os 2 arquivos dentro da pasta docroot->templates, são eles:
navigation.vm e portal_normal.vm. Depois cole ele dentro de docroot->_diffs->templates. Sua estrutura devera ficar parecida com essa:
Agora iremos abrir o arquivo portal_normal.vm que está dentro da pasta _diffs->templates, lembre-se o Liferay recomenda mexer somente dentro da pasta _diffs para quaisquer modificações de tema.
Agora é a parte de implementação. Você terá que pegar o seu html e jogar para dentro do liferay incluindo o css, js, os códigos do liferay e tudo mais.
Verifique como ficou o meu html dentro do liferay, abaixo vou explicar o que cada código faz mais ou menos. Não sou expert em Liferay então caso encontrem algum erro, favor ajudar a consertar e não criticar, o intuito do tutorial é para ajudar e não para condenar ninguém.
Quando você abrir o portal_normal.vm que está dentro da pasta _diffs/templates,
o que você terá que fazer é abrir o html do seu site e colocar ao lado do portal_normal.vm e ir subistituindo e acrecentando os seus htmls ao arquivo portal_normal.vm
logo de início temos um código para usar entre as tags doctype e html que é: #parse ($init)
logo abaixo teremos que utilizar umas variáveis do sistema para pegar o nome da página atual e o nome do site que está registrado lá no Liferay
exemplo
no title do seu HTML você colocará as variáveis do sistema do Liferay como
no liferay depois você irá alterar as configurações e mostrará
SEU SITE - Página Principal ou SEU SITE - Contato
depois das tags de meta e antes dos includes dos estilos, a variavel de sistema:
deverá ser incluida entre esses 2 itens.
as urls dos caminhos das pastas de imagens, js e css já são cedidas pelo liferay, então o que você tem que fazer é usa-las. ex:
o seu estilo inserido no html seria assim:
no liferay será:
note que a variável $css_folder já possui o caminho direto para a pasta correta, você não precisa se preocupar se o caminho esta correto.
Bom, dentro da tag body temos uma função importante no liferay, que é a docbar, ela é responsável pela administração do site portlets etc. Basicamente ela é fundamental para funcionamento, deixaremos ela sendo primeiro antes de qualquer código. Notem que no body tem uma classe $css_class, mantenha essa classe também. O if do código é só para verificar se o usuário está logado ou deslogado, caso esteja deslogado não mostrará a barra de navegação do liferay.
Você pode fazer também algumas coisas no template para dinamizar como mostrar o usuário logado ou fazer condicionais para liberar ou não acesso para logados ou deslogados como por exemplo. Se estiver logado mostra o nome do cara, caso contrário mostre um link para login.
O menu do site, para inserirmos de maneira certa o menu do seu site no liferay, aconselho utilizarem o mesmo modelo que já é default do liferay.
primeiramente teremos no nosso portal_normal.vm uma linha de código que fará a chamada do navgation.vm
Isso fará a inclusão do seu menu. se você costuma montar seu menu com UL, LI. Apenas coloque as divs que englobem o menu e deixe a ul li serem criadas pelo próprio liferay, pois o menu é dinamico e você não precisará ficar modificando código desnecessário. No site que eu criei fiz assim, não precisei nem mexer no arquivo navigation.vm
Agora que vem o conteúdo, onde toda a página tera seu portlet ou seus portlets de conteudo.
O código do liferay que permite colocar um conteúdo dinâmico e o código abaixo. Pense, você tem um site onde o header e o footer basicamente são estáticos, e são iguais para todas as páginas. Bom esse html deverá ficar no portal_normal.vm, o miolo do site, onde fica todo o conteúdo, um conteúdo para cada página, esse não entrará no portal_normal.
abaixo o código para inserir o conteúdo.
Bom no footer da página você pode inserir seu html e não esqueça de incluir os javascripts.
antes de colocar os JSs, vocês deverão colocar 2 includes de arquivos do liferay.
e logo após vocês podem colocar os scripts. no meu html ficou assim:
Você pode usar o jQuery a vontade, o bootstrap também, só verifique antes a versão do bootstrap que o seu liferay está utilizando para não ter problemas futuros de criar um html com bootstrap versão nova e o liferay estar com uma versão anterior.
Bom, após salvar o arquivo portal_normal.vm sua página principal estará com seu template implementado e funcionando.
Para carregar ele no site, basta arrastar o projeto do tema até o servers abaixo. No meu caso eu arrasto o siteTeste-theme para o Servers Liferay v6.2 at Localhost.
Depois disso na administração do Liferay Escolha o tema que você criou. Dá para colocar imagem do seu tema, entre outras coisas, só pesquisar =D
Agora é aguardar o próximo tutorial de como criar um Template ( divisões )
Então vamos começar do ponto em que você já tem a IDE do Liferay instalada no seu PC e com o tomcat rodando o liferay. Já instalou o liferay e configurou. E agora? como Criar um tema para o site? Como utilizar o html que o Front-End enviou para jogar para dentro do Liferay?
É agora que vou ajudar você!
Comecei também assim sem saber de nada sobre o liferay. tive simplesmente que ler e rodar e fazer um tema assim do nada e "pra já". Quebrei bastante a cabeça mas funcionou. Estou montando o segundo tema para Liferay.
Vamos lá partindo daquele princípio de que você já está com o liferay instalado e rodando tudo no tema básico, vamos criar nosso primeiro Tema.
Na sua IDE do Liferay ( eclipse com plugins do Liferay ), clique em File -> New -> Liferay Plugin Project, Como na imagem abaixo;
Agora você terá que dar um nome a ele, coloquei como siteTeste, mas você pode colocar o nome do seu tema ou o próprio nome do seu site em Project Name, não se preocupe com o Display Name, ele ficará igual ao Project Name, só não utilize acentuação nesses campos pois depois ficará bem bizarro o nome do seu tema.
Logo abaixo terá um campo de select chamado Plugin Type, selecione Theme e clique em NEXT.
Nessa nova etapa deixe o Theme Parent para _styled e mude o Theme Framework para Velocity. Caso não saiba o que é velocity, uma pesquisada no google e você já começa a se ambientar ahahha. Clique em Finish e pronto você terá criado o seu tema.
Agora temos o tema com as pastas de acordo com o Liferay. Do lado esquerdo da sua IDE você verá o nome do seu tema, no meu está siteTeste-theme. Clique no expandir e abrirá mais algumas estruturas. Expanda a pasta docroot e você verá uma estrutura amigável, que provavelmente será mais ambientável para você.
Existe uma pasta _diffs, que por recomendação da própria liferay, devemos jogar todas as modificações e criações dentro da pasta _diffs do seu tema.
Agora temos que criar uma estrutura semelhante dentro da pasta _diffs, criaremos 4 pastas dentro de _diffs, são elas: css, images, js, templaes. Abaixo tem uma representação de como fazer. Basta clicar com o mouse em cima de _diffs e clicar com o botão direito, New -> Folder e escolher o nome da pasta.
Seu tema deverá ficar assim:
Agora temos que jogar nossas imagens do nosso html dentro do liferay. Como fazer? abra a pasta de imagens que está no html que o Front-End te mandou o que você criou. selecione todas as imagens e arraste para a pasta images dentro da ide. Outra maneira é clicar com o botão direito na pasta que você deseja acessar e clicar em propriedades, lá tem o caminho, no meu caso é.
C:\Liferay\liferay-developer-studio\liferay-plugins-sdk-6.2\themes\siteTeste-theme\docroot\_diffs\images
Basta copiar as imagens e depois atualizar a ide para aparecer os arquivos lá.
faça isso com a pasta JS E CSS também. Só uma coisa, o liferay entende as modificações no css no arquivo custom.css, o que você poderá fazer é, criar o arquivo custom.css e copiar o conteúdo do seu css principal e jogar la. Qualquer alteração você modificará no custom.css.
Agora a pasta templates. Fora da pasta _diffs temos uma pasta chamada templates, iremos utilizar 2 templates default como base para o nosso tema. Copie os 2 arquivos dentro da pasta docroot->templates, são eles:
navigation.vm e portal_normal.vm. Depois cole ele dentro de docroot->_diffs->templates. Sua estrutura devera ficar parecida com essa:
Agora iremos abrir o arquivo portal_normal.vm que está dentro da pasta _diffs->templates, lembre-se o Liferay recomenda mexer somente dentro da pasta _diffs para quaisquer modificações de tema.
Agora é a parte de implementação. Você terá que pegar o seu html e jogar para dentro do liferay incluindo o css, js, os códigos do liferay e tudo mais.
Verifique como ficou o meu html dentro do liferay, abaixo vou explicar o que cada código faz mais ou menos. Não sou expert em Liferay então caso encontrem algum erro, favor ajudar a consertar e não criticar, o intuito do tutorial é para ajudar e não para condenar ninguém.
Quando você abrir o portal_normal.vm que está dentro da pasta _diffs/templates,
o que você terá que fazer é abrir o html do seu site e colocar ao lado do portal_normal.vm e ir subistituindo e acrecentando os seus htmls ao arquivo portal_normal.vm
logo de início temos um código para usar entre as tags doctype e html que é: #parse ($init)
#parse ($init)
logo abaixo teremos que utilizar umas variáveis do sistema para pegar o nome da página atual e o nome do site que está registrado lá no Liferay
exemplo
no title do seu HTML você colocará as variáveis do sistema do Liferay como
<title>$site_name - $the_title</title>no liferay depois você irá alterar as configurações e mostrará
SEU SITE - Página Principal ou SEU SITE - Contato
depois das tags de meta e antes dos includes dos estilos, a variavel de sistema:
$theme.include($top_head_include) deverá ser incluida entre esses 2 itens.
as urls dos caminhos das pastas de imagens, js e css já são cedidas pelo liferay, então o que você tem que fazer é usa-las. ex:
o seu estilo inserido no html seria assim:
<link type="text/css" rel="stylesheet" href="css/custom.css">no liferay será:
<link type="text/css" rel="stylesheet" href="$css_folder/custom.css">note que a variável $css_folder já possui o caminho direto para a pasta correta, você não precisa se preocupar se o caminho esta correto.
Bom, dentro da tag body temos uma função importante no liferay, que é a docbar, ela é responsável pela administração do site portlets etc. Basicamente ela é fundamental para funcionamento, deixaremos ela sendo primeiro antes de qualquer código. Notem que no body tem uma classe $css_class, mantenha essa classe também. O if do código é só para verificar se o usuário está logado ou deslogado, caso esteja deslogado não mostrará a barra de navegação do liferay.
#if ($is_signed_in) #dockbar() #end
Você pode fazer também algumas coisas no template para dinamizar como mostrar o usuário logado ou fazer condicionais para liberar ou não acesso para logados ou deslogados como por exemplo. Se estiver logado mostra o nome do cara, caso contrário mostre um link para login.
#if (!$is_signed_in)
<a data-redirect="$is_login_redirect_required" href="$sign_in_url" id="sign-in" rel="nofollow">$sign_in_text</a>
#else
<p>Bem vindo(a), <b>$user_first_name</b>.</p>
#endO menu do site, para inserirmos de maneira certa o menu do seu site no liferay, aconselho utilizarem o mesmo modelo que já é default do liferay.
primeiramente teremos no nosso portal_normal.vm uma linha de código que fará a chamada do navgation.vm
#if ($has_navigation || $is_signed_in)
#parse ("$full_templates_path/navigation.vm")
#endIsso fará a inclusão do seu menu. se você costuma montar seu menu com UL, LI. Apenas coloque as divs que englobem o menu e deixe a ul li serem criadas pelo próprio liferay, pois o menu é dinamico e você não precisará ficar modificando código desnecessário. No site que eu criei fiz assim, não precisei nem mexer no arquivo navigation.vm
<!-- Menu Principal -->
<div id="mainMenu">
<div class="container-fluid">
<div class="wrap">
#if ($has_navigation || $is_signed_in)
#parse ("$full_templates_path/navigation.vm")
#end
</div>
</div>
</div><!-- Fim Menu Principal -->Agora que vem o conteúdo, onde toda a página tera seu portlet ou seus portlets de conteudo.
O código do liferay que permite colocar um conteúdo dinâmico e o código abaixo. Pense, você tem um site onde o header e o footer basicamente são estáticos, e são iguais para todas as páginas. Bom esse html deverá ficar no portal_normal.vm, o miolo do site, onde fica todo o conteúdo, um conteúdo para cada página, esse não entrará no portal_normal.
abaixo o código para inserir o conteúdo.
<!-- Conteudo -->
#if ($selectable)
$theme.include($content_include)
#else
$portletDisplay.recycle()
$portletDisplay.setTitle($the_title)
$theme.wrapPortlet("portlet.vm", $content_include)
#end
<!-- Fim Conteudo -->Bom no footer da página você pode inserir seu html e não esqueça de incluir os javascripts.
antes de colocar os JSs, vocês deverão colocar 2 includes de arquivos do liferay.
$theme.include($body_bottom_include)
$theme.include($bottom_include)e logo após vocês podem colocar os scripts. no meu html ficou assim:
$theme.include($body_bottom_include)
$theme.include($bottom_include)
<!-- Scripts da Página -->
<script type="text/javascript" src="${javascript_folder}/jquery.min.js"></script>
<script type="text/javascript" src="${javascript_folder}/bootstrap.js"></script>
<script type="text/javascript" src="${javascript_folder}/jquery.xSelectstyle.js"></script>
<script type="text/javascript" src="${javascript_folder}/scripts.js"></script>
Você pode usar o jQuery a vontade, o bootstrap também, só verifique antes a versão do bootstrap que o seu liferay está utilizando para não ter problemas futuros de criar um html com bootstrap versão nova e o liferay estar com uma versão anterior.
Bom, após salvar o arquivo portal_normal.vm sua página principal estará com seu template implementado e funcionando.
Para carregar ele no site, basta arrastar o projeto do tema até o servers abaixo. No meu caso eu arrasto o siteTeste-theme para o Servers Liferay v6.2 at Localhost.
Depois disso na administração do Liferay Escolha o tema que você criou. Dá para colocar imagem do seu tema, entre outras coisas, só pesquisar =D
Agora é aguardar o próximo tutorial de como criar um Template ( divisões )
