Para isso, é necessário já ter o HTML da página pronto. Para aplicar o arquivo HTML, o primeiro passo é acessar o Portal Studio, através do link na homepage do portal ou atravé da tecla F2 do seu teclado.

Uma vez no Portal Studio, você deve criar um novo projeto. A partir do nome que você definir para o projeto, o Lumis Portal gera um identificador para ele e cria um diretório para receber os arquivos.

Após criação no projeto é gerada uma área com o nome que você definiu e uma página inicial vazia. Para aplicar o HTML nessa página, você deve clicar em "Editar Tema", na página vazia e fazer upload dos arquivos de HTML.

Ao fechar o editor de tema, já é possível visualizar a página inicial com o HTML aplicado, permitindo assim ativar as áreas da página para deixarem de ser estáticas.

Arquivo utilizado na aula: hotsite.zip

A partir de uma página com HTML estático, vamos marcar as áreas do portal para permitir que sejam de conteúdos publicáveis.

Para isso, você deve utilizar o botão "Marcar Html" e selecionar na página a área que deseja marcar, onde é criado um holder de interfaces.

Nesse modo, ao passar o mouse sobre os elementos da página, eles ficam em destaque para serem marcados. Ao fazer a marcação, é exibido um popup para você editar o nome do holder de interfaces. O mesmo pode ser feito também pelo Editor de Tema, adicionando o atributo page:holder com um nome específico no elemento HTML.

Para isso, utilizamos o projeto da landing page, criada nos vídeos anteriores.

Esse projeto se trata de um canal com algumas instâncias de serviço padrão e uma página na qual já foi aplicado o layout.

Para inserir um elemento dinâmico, é preciso clicar no botão "Arrastar Interfaces", que disponibiliza uma área com todas as instâncias de serviço do canal pai da página e suas respectivas interfaces, para serem instanciadas nos holders de interface da página.

Nesse exemplo é utilizado o serviço de Conteúdo HTML, arrastando a interface de Conteúdo para o holder da página. Com isso, é gerado automaticamente um conteúdo com o HTML estático do holder de interface, que pode ser editado posteriormente.

Para editar esse conteúdo, deve-se acessar a Administração de Conteúdos do Lumis POrtal, onde é possível gerenciar todos os serviços que se tem permissão para editar. Essa área só é acessível para usuários que tem perfil de publicador de conteúdo.

Ao editar o conteúdo, as alterações são refletidas na página de forma dinâmica

É criada uma nova marcação de HTML para a parte de funcionalidades do exemplo da landing page. Nesse novo holder de interfaces é adicionada a interface de lista do serviço de chamadas e são adicionados também conteúdos. Porém, o layout fica diferente do HTML estático, então, o estilo da interface é editado para refletir exatamente o HTML estático original, mas agora com conteúdos dinâmicos. O estilo é criado em JavaScript e são utilizados os atalhos do editor de estilos para criá-lo. O novo estilo fica assim:

<h1 class="section-header">Funcionalidade</h1>
<%
var rows = lum_xpath.selectNodes("//data/row");
for (var i in rows)
{
	var row = lum_xpath.toMap(rows[i]);
%>
	<article class="highlights-list-item all-full">
		<div class="desktop-6 tablet-3 mobile-full news-image">
			<img src="<%=row.image.href%>" />
		</div>
		<div class="desktop-6 tablet-3 mobile-full news-content">
			<h1><%=row.title%></h1>
			<p><%=row.content%></p>
		</div>
	</article>
<%
}
%>

Para criar o formulário, é utilizada a opção de "Gerar Formulário do HTML" no right-click da interface de formulário, que detecta automaticamente os campos do HTML estático e gera o formulário com os campos de forma mais ágil.

Entretanto, o estilo precisa ser editado para manter o estilo do HTML original, com todas as validações de JavaScript feitas para os campos. Para editar esse estilo, é preciso criar um novo em javascript, utilizando como código do estilo o HTML do layout e utilizando o "Form action-commit" na ação de submeter o formulário.

Por fim, são exibidas as respostas do formulário.

Para isso, mostramos como dar acesso para um grupo de usuários visualizar página, explicamos o conceito de herança de controle de acesso e os diversos níveis de controle de acesso, para canal, página e instância de serviço.

Nesse tutorial são feitos os seguintes passos:

• Explicar controle de acesso do canal Portal;
• Explicar controle de acesso de um projeto filho do canal Portal; (0:30)
• Tentar acessar página inicial do projeto como usuário guest; (0:54)
• No Portal Studio, dar permissão para todos os usuários visualizarem as páginas no canal Portal; (1:35)
• Acessar a página inicial do projeto como usuário guest; (2:21)
• Explicar herança de controle de acesso de uma página; (2:53)
• Explicar herança de controle de acesso de uma instância de serviço. (3:19)

Para isso, são feitos os seguintes passos:

• Explicar como o módulo foi criado a partir do projeto; (0:20)
• Exportar a estrutura do projeto para o módulo; (1:05)
• Visualizar os arquivos do módulo; (1:21)
• Explicar como fazer deploy de um módulo para outros ambientes; (2:09)
• Explicar como fazer alterações no módulo por fora do front-end do Lumis Portal; (2:54)
• Explicar como atualizar um módulo com alterações feitas por fora do front-end do Lumis Portal. (4:01)

Para isso, mostramos como exportar um arquivo em formato .lec, com os conteúdos, e como importar a partir desse arquivo, o conteúdo para um canal de destino.

Para isso, são feitos os seguintes passos:

• Exportar arquivo em formato .lec de um canal; (0:44)
• Exibir onde fica disponibilizado o arquivo .lec exportado; (1:30)
• Importar arquivo .lec com o conteúdo. (2:04)

Para isso, são feitos os seguintes passos:

• Editar tema para exibir onde deve ser inserido o script para o site;
• Acessar na Administração de Conteúdo o serviço de "Scripts para o Site" e cadastrar um conteúdo;
• Exibir no código HTML gerado para a página, o script cadastrado na Administração de Conteúdo.

Para isso, são feitos os seguintes passos:

• Explicar como funciona o cache HTML de uma página;
• Editar propriedades de canal para gerar arquivo HTML de página para todos os usuários; (1:58)
• Editar um conteúdo e demonstrar como cache HTML é regerado. (3:30)

Para isso, são feitos os seguintes passos:

• Apresentação do layout para um novo projeto;(0:27)
• Criação de um novo projeto; (1:08)
• Aplicação de layout como tema do novo projeto criado; (1:29)
• Exibição dos módulos de cada projeto. (2:02)

Arquivo utilizado na aula: Treinamento1.zip

Para isso, são feitos os seguintes passos:

• Explicação do conceito de template de página;
• Associar arquivo de layout no template de página, nas propriedades da página; (1:30)
• Exibição da página de template; (2:00)
• Marcação no template de página do bloco para o painel de interfaces. (2:43)

Para isso, são feitos os seguintes passos:

• Marcação do bloco de página referente ao menu - page holder; (0:42)
• Instanciar serviço de conteúdos hierárquicos - chamado de Menu Principal - e arrastar interface "Menu de Conteudos" para o page holder de menu; (1:10)
• Criação de página para ser os detalhes do conteúdo hierárquico; (2:17)
• Cadastro de conteúdos para o menu principal; (3:32)
• Editar estilo para interface de menu e criação de novo estilo a partir do layout do design. (4:47)

O estilo criado nesta aula é:

<%
var rows = lum_xpath.selectNodes("//data/row");
for(var i in rows)
{
    var row = lum_xpath.toMap(rows[i]);
%>
    <li class="desktop-2 tablet-1 mobile-full">
        <%
        if(row.inCurrentPath == "true")
        {
        %>
            <a class="navigation-link active" href="<%=row.$href%>"><%=row.title%></a>
        <%
        }
        else
        {
        %>
            <a class="navigation-link" href="<%=row.$href%>"><%=row.title%></a>
        <%
        }
        %>
    </li>
<%
}
%><li class="desktop-3 tablet-2 mobile-full right">
    <form method="post" action="index.html">
        <input class="search-input input" type="search" placeholder="Buscar..." />
    </form></li>

Para isso, são feitos os seguintes passos:

• Instanciar a interface de busca no page holder do menu e busca;
• Editar o estilo de interface de busca, adicionando um novo estilo em JavaScript baseado no layout do design; (0:57);
• Adição de página de resultados de busca com instância de interface de Busca com Resultados. (2:38)

O estilo criado para a interface de busca é:

<li class="desktop-3 tablet-2 mobile-full right">
    <form method="post" action="<%=lum_xpath.valueOf("//control[@type='lum_form']/data/action-doSearch", lum_document)%>" >
        <input class="search-input input" name="query" type="search" placeholder="Buscar..." />
    </form>
</li>

O estilo da interface de busca com resultados é:

<article class="news-detail desktop-8 desktop-push-2 tablet-full mobile-full"> 
    <%
        var formData = lum_xpath.getMap("//control[@id='lum_form']/data");
        var queryData = lum_xpath.getMap("//control[@id='query']/data");
        var paginationData = lum_xpath.getMap("//control[@id='resultListPagination']/data");
        var queryPalavra = "";
        if(queryData)
            queryPalavra = queryData.value;
    %>
    <form name="<%=formData.name%>" method="post" action="<%=formData["action-doSearch"]%>"> 
        <h1>Resultado de busca por: <span class="keyword"><%=queryPalavra%></span></h1> 
        <p class="intro"><%=paginationData.totalRows%> resultados encontrados</p> 
        <%
        var rows = lum_xpath.getMaps("//data/row");
        for(var i in rows)
        {
            var row = rows[i];
        %>
        <%
        if(row.introductionImage.length)
        {
        %>
            <a href="<%=row.url%>" class="news-list-item row"> 
                <div class="news-image desktop-6 tablet-3 mobile-full"> 
                    <div class="news-fader"> 
                        <div class="read-more">
                            Leia a notícia
                        </div> 
                    </div> 
                    <img src="<%=row.introductionImage%>" /> 
                </div> 
                <div class="desktop-6 tablet-3 mobile-full"> 
                    <h1><%=row.title%></h1> 
                    <p><%=row.subtitle%></p> 
                </div>
            </a> 
        <%
        }
        else if(i == rows.length - 1)
        {
        %>
        <a href="<%=row.url%>" class="news-list-item row"> 
            <div class="all-full no-image"> 
                <h1><%=row.title%></h1> 
                <p><%=row.subtitle%></p>  
            </div> 
        </a>
        <%
        }
        %>
        <%
        }
        %>
        <div class="lum-pagination"> 
            <div class="lum-pagination-range"> 
                <span class="lum-pagination-range-current"><%=paginationData.startRow%> - <%=paginationData.endRow%></span> de 
                <span class="lum-pagination-total-count"><%=paginationData.totalRows%></span> 
            </div> 
            <div class="lum-pagination-navigation"> 
                <div class="lum-pagination-navigation-page">
                    Página 
                    <input name="resultListPagination" type="hidden" value="<%=paginationData.currentPage%>" />
                    <input  type="text" value="<%=paginationData.currentPage%>" /> de <%=paginationData.totalPages%>
                </div> 
                <div class="lum-pagination-navigation-buttons"> 
                    <%
                    if(paginationData.previousPage)
                    {
                    %>
                    <a href="<%=paginationData.previousPage.$href%>">
                        <div class="lum-button lum-prev"></div>
                    </a>
                    <%
                    }
                    else{
                    %>
                        <div class="lum-button lum-prev lum-disabled"></div>
                    <%
                    }
                    %>
                     <%
                    if(paginationData.nextPage)
                    {
                    %>
                    <a href="<%=paginationData.nextPage.$href%>">
                        <div class="lum-button lum-next"></div>
                    </a>
                    <%
                    }
                    else{
                    %>
                        <div class="lum-button lum-next lum-disabled"></div>
                    <%
                    }
                    %> 
                </div> 
            </div> 
        </div> 
    </form> 
</article>

Para isso, apresentamos os seguintes tópicos:

• Marcar HTML selecionando a opção de "Marcar Bloco de Página" e selecionar área que se deseja transformar em um bloco de página; (2:12)
• Explicação dos elementos criados com a marcação do bloco de página; (2:49)
• Aplicar bloco de página gerado no template de página; (4:57)
• Atualizar as páginas que utilizam o template de página. (7:29)

Para obter o título da página atual, utiliza-se a seguinte expression language:

<el:out value="${pageWebResource.pageWebResourceData.simpleTitle}">

Para isso, são realizados os seguintes passos:

• Adicionar canal de Notícias; (0:33)
• Adicionar serviço de Notícias ao canal; (1:10)
• Instanciar interface de Lista do serviço de Notícias; (1:22)
• Editar estilo de lista de notícias adicionando o estilo usado no layout do design; (1:32)
• Adicionar página de Detalhes de Notícias com instância de interface de Detalhes do serviço de Notícias; (3:15)
• Editar estilo de detalhes de notícias adicionando o estilo usado no layout do design; (3:55)
• Adicionar conteúdos de teste no serviço de notícias; (5:13)
• Adicionar Conteúdo Hierárquico do serviço de "Menu Principal" para ter um link para o canal de Notícias; (6:40)
• Instanciar interface de Lista Rápida do serviço de Notícias na página inicial do projeto; (7:46)
• Editar estilo de lista rápida de notícias adicionando o estilo usado no layout do design. (9:30)

Para isso, são feitos os seguintes passos:

• Instanciar interface de Caminho da Página do serviço de Conteúdos Hierárquicos no template de páginas; (0:52)
• Atualizar as páginas que usam o template de página; (1:20)
• Editar estilo da interface de Caminho da Página adicionando estilo igual ao layout do design; (2:16)
• Atualizar as páginas que usam o template de página; (3:54)

Para isso, são executados os seguintes passos:

• Na gerência de instâncias de serviços do projeto, clicar em Adicionar novo serviço e, em seguida, em Criar novo; (1:02)
• Preencher nome do serviço como "Produtos", deixar o tipo de serviço como "Lista e detalhes" e criar serviço no módulo do projeto para ele ser deployado junto com o projeto; (1:14)
• Editar os campos do serviço; (1:38)
• Editar metadados para o serviço; (3:19)
• Montar serviço de produtos dentro do projeto; (3:45)
• Adicionar conteúdos no serviço de Produtos. (5:19)

Para isso, são feitos os seguintes passos:

• Criar novo projeto; (0:29)
• Criar novo canal de notícias com instância de serviço de notícias; (1:00)
• Criar serviço de chamadas; (1:20)
• Nas propriedades do projeto, em avançado > segurança, habilitar grupos locais e dar um nome para prefixo dos grupos locais; (2:04)
• Acessar a área de "Gerenciar Grupos Locais" no canal do projeto; (2:39)
• Criar grupos locais; (2:49)
• Configurar controle de acesso no canal do projeto para os grupos locais adicionados; (4:07)
• Configurar papeis de workflow nos serviços de chamadas e de notícias para os grupos locais. (5:49)

Tendo uma lista de notícias com conteúdos publicados para grupos específicos, essas notícias só devem ser visualizadas pelos usuários que estão nos grupos especificados, porém, quando se habilita o cache padrão na interface de lista de notícias, os usuários veem conteúdos errados.

Para resolver isso, é utilizado cache por perfil de usuário. Para isso, são utilizados os contextos de negócios padrões do Lumis Portal, selecionados nas propriedades do canal. Com isso, pode-se habilitar cache por contexto de hash dos grupos na instância de interface de lista de notícias. 

Para isso são feitos os seguintes passos:

• Habilitar cache padrão na interface de lista de notícias; (3:37)
• Habilitar contexto de negócios padrão do Lumis Portal; (5:10)
• Habilitar cache da instância de interface de lista de notícias com chave por Contexto e escolher o contexto de Hash dos grupos. (7:45)