Desenvolvendo Task Flows para o WebCenter Portal 11.1.1.8

Depois de uma prolongada ausência, nada como iniciar o ano com um exercício muito interessante: vamos criar um Task Flow para o WebCenter Portal. Este nosso Task Flow irá usar as tabelas do schema HR do banco para trazer informações sobre funcionários e departamentos. Este Task Flow será desenvolvido com o JDeveloper 11.1.1.8, publicado como uma shared library no Weblogic Server e consumido através do catálogo de recursos do Portal.

(pausa para responder sua provável pergunta: “Mas o que é um Task Flow”?)

Segundo a documentação:

“ADF task flows provide a modular approach for defining control flow in an application. Instead of representing an application as a single large JSF page flow, you can break it up into a collection of reusable task flows. Each task flow contains a portion of the application’s navigational graph. The nodes in the task flows are activities. An activity node represents a simple logical operation such as displaying a page, executing application logic, or calling another task flow.”

Basicamente um Task Flow é muito similar à um portlet: ele representa uma “mini-aplicação empacotada” que pode ser disponibilizada em páginas do Portal. Em termos de conceito, ambos fazem praticamente a mesma coisa, a diferença está na infra-estrutura de cada um: um portlet é disponibilizado (deployed) como uma aplicação e registrado como um recurso externo ao Portal. Um Task Flow é disponibilizado como uma biblioteca ADF, e adicionado à aplicação. Cada estratégia tem as suas vantagens e desvantagens, mas por motivos de espaço vamos deixar esta discussão para um futuro post.

Pré-Requisitos

Para desenvolver este exercício, você vai precisar de:

  • WebCenter Portal 11.1.1.8
  • JDeveloper 11.1.1.8 com a extensão do Portal instalada
  • Schema HR disponível no banco de dados

Parte 1 – Criando o Task Flow

Abra o JDeveloper e crie uma nova aplicação. Selecione o template Fusion Web Application (ADF) e defina o nome como HRTaskflow.

image

Aperte Next e em seguida Finish para criar a aplicação. Não iremos mudar nenhuma outra configuração.

Clique com o botão direito no projeto ViewController e selecione a opção New… na próxima janela, selecione ADF Task Flow.

image

OBS: Se esta opção não estiver disponível, clique na aba “All Technologies” da janela do assistente.

Na próxima tela, defina o nome do arquivo como hr-task-flow.xml e o nome do Task Flow como HRTaskFlow. Deixe os demais campos com as opções default e clique em OK.

image

Um Task Flow pode ser uma sequência de páginas (ou fragmentos de páginas, para ser exato), com chamadas à recursos externos, backing beans, etc. No nosso exercício, iremos fazer algo mais simples, com apenas uma página.

No diagrama do fluxo, insira uma View da paleta de componentes no diagrama. Defina o nome como HRView.

image

Clique duas vezes sobre a view e um assistente irá aparecer. Mantenha os valores padrão e clique em OK.

image

Arraste um componente do tipo Panel Stretch Layout para dentro da nova página. Uma estrutura contendo vários facets (start, top, center, bottom, end) irá aparecer na página.

image

No painel de Propriedades, defina os seguintes valores:

  • StartWidth: 0px
  • EndWidth: 0px
  • TopHeight: 50px
  • BottomHeight: 0px

image

Insira um componente Panel Group Layout no facet Top e outro no facet Center. Para facilitar, você pode usar o painel de estrutura da página para encaixar os componentes.

image

Defina as seguintes propriedades para cada um dos dois:

Panel Group Layout (center)

  • Halign: start
  • Valign: top
  • Layout: scroll
  • Width: 988px (OBS: Isto é por causa do template padrão das páginas do Portal)
  • Height: 550px (OBS: Isto é por causa do template padrão das páginas do Portal)

Panel Group Layout (top)

  • Halign: center
  • Valign: middle
  • Layout: vertical
  • Width: 988px (OBS: Isto é por causa do template padrão das páginas do Portal)

Arraste um componente do tipo Output Text para o Page Group Layout do facet Top.

image

Defina a propriedade Value como HR Departments and Employees. Para a formatação de cor e fonte, defina de acordo com a imagem abaixo:

image

No Panel Group Layout do facet Center, insira um componente Panel Group Layout (vertical), e dentro deste, um outro componente Panel Group Layout  (horizontal). Para ambos, defina o StyleClass como AFStretchWidth.

Dentro do Panel Group Layout horizontal, insira outros dois componentes Panel Group Layout (vertical – StyleClass AFStretchWidth). No primeiro Panel Group Layout, insira um componente Panel Splitter. Defina as seguintes propriedades para o Panel Splitter:

  • Orientation: vertical
  • Splitter Position: 100
  • Width: 400px
  • Height: 450px
  • Disabled: True

No segundo Panel Group Layout, insira um componente Panel Box. Defina a propriedade Text do Panel Box como “Employees from Department” e a propriedade Width para 580.

image

A estrutura do nosso Task Flow está pronta. Agora podemos inserir os dados do schema HR. Para isso, clique com o botão direito do mouse no projeto Model e selecione New… –> ADF Business Components –> Business Components from Table.

image

Em seguida ele irá abrir um assistente para conexão com o banco de dados. Clique no ícone + para criar uma nova conexão.

image

Defina os dados de conexão e faça o teste. Clique OK para criar a conexão.

image

Na próxima tela, clique em OK. O Jdeveloper irá conectar no banco de dados e apresentar um assistente aonde escolheremos as tabelas que serão usadas pela aplicação.

Nesta tela, clique no botão Query para trazer as tabelas disponíveis no schema escolhido. Selecione as tabelas Departments e Employees e clique no botão para que elas sejam movidas para a coluna da direita.

image

Clique em Next. Na próxima tela, mova as duas tabelas para a caixa da direita e clique Next novamente. Como iremos manter as demais configurações no padrão, podemos já clicar em Finish para fechar o assistente e criar os objetos na aplicação.

Voltando ao nosso Task Flow, podemos ver que a aba Data Controls agora possui um novo controle (se nada aparecer, você pode clicar no botão de Refresh). Repare que existe um objeto chamado DepartmentsView1, que representa a tabela Departments do banco de dados, e dentro deste objeto, um objeto chamado EmployeesView3. Este objeto representa o relacionamento master/detail entre as tabelas de Departaments e Employees. Mais especificamente, o relacionamento que diz quais funcionários pertencem a quais departamentos. O framework de desenvolvimento da Oracle já analisa estes relacionamentos no banco de dados e replica as regras na aplicação, sem que o desenvolvedor precise codificar esta lógica de negócios.

image

Arraste o objeto DepartmentsView1 para dentro do componente Panel Splitter, facet first. Selecione a opção para criar como Form –> ADF Read Only Form.

image

Nesse assistente, mantenha todos os campos, marque a caixa de opção Include Navigation Controls e clique em OK.

image

Arraste o objeto EmployeesView3 (que fica dentro do objeto DepartmentsView1, cuidado para não confundir) para dentro do Panel Splitter, facet second e selecione a opção Graph. Iremos mostrar os salários por cargo dentro do departamento (talvez não seja o exemplo mais politicamente correto🙂

image

Selecione o gráfico de pizza (Pie) e o layout mais simples (afinal o espaço será restrito). Clique OK.

image

Defina os campos de acordo com a imagem e clique em OK

image

OBS: O gráfico possui várias propriedades que podem ser editadas, para definir cores, fontes, legenda, etc. Verifique no painel de propriedades as configurações disponíveis para os componentes do gráfico. Por exemplo, você pode esconder a legenda mudando o valor da propriedade Rendered do componente dvt:legendArea para False.

image

Arraste o objeto EmployeesView3 para dentro do Panel Box. Selecione Table –> ADF Read Only Table.

Apague os campos Salary, Commision e Manager. Marque as opções Enable Sorting e Single Row e clique em OK.

image

Repare que dentro do Panel Box foi criado um componente do tipo Table. Selecione este componente e defina a propriedade StyleClass como AFStretchWidth. Com isso a tabela será estendida para usar todo o espaço disponível.

Nosso Task Flow está pronto! Porém, ele não pode ser visualizado diretamente. Para que possamos fazer um teste antes do deploy para o Portal, precisamos criar uma nova página e inserir o Task Flow nesta página.

Clique com o botão direito no projeto ViewController e selecione New… –> JSF –> JSF Page.

image

Defina o nome da página como HRConsumer.jspx e clique em OK.

image

Arraste o hr-task-flow.xml para dentro da página. Selecione a opção Region.

image

Clique com o botão direito na página e selecione Run.

image

A aplicação irá ser carregada no browser.

image

Repare que quando você seleciona outro departamento, o gráfico e a tabela se atualizam automaticamente com a informação. Isso é gerenciado pelo framework de desenvolvimento da Oracle, aumentando a produtividade do desenvolvedor. Caso o Task Flow não funcione, ou você tenha problemas com layout, aproveite para fazer os ajustes agora.

Antes de seguirmos com o deployment, precisamos definir a conexão com o banco de dados. Para isso, clique com o botão direito no App Module e selecione Configurations…

image

Selecione o AppModuleLocal e clique em Edit. Na janela de edição, defina o nome do Data Source

image

OBS: Um datasource com o mesmo nome deve existir no Weblogic Server. Caso contrário o Task Flow não conseguirá conectar em runtime.

image

Clique em OK e faça a mesma configuração com o AppModuleShared. Clique em OK para fechar esta janela.

Agora iremos fazer o deployment do Task Flow para consumo no Portal.

Parte 2 – Deployment do Task Flow

Clique com o botão direito no projeto ViewController e escolha New… –> Deployment Profiles –> ADF Library JAR File.

image

Defina o nome do Deployment Profile como HRTaskflowADFLibrary e clique em OK.

Na tela seguinte, mantenha os valores padrão e clique em OK.

Podemos ver o nosso novo Deployment Profile nas propriedades do projeto. Clique OK para fechar a janela.

image

Clique no menu File –> New… –> General –> Generic Project para criar um novo projeto dentro da aplicação.

image

Defina o nome do projeto como MySharedLibrary e clique OK. Este projeto será usado para “empacotar” os projetos Model e ViewController para serem disponibilizados como uma biblioteca ADF.

Clique com o botão direito no projeto MySharedLibrary, selecione Project Properties. Na aba Deployment, clique no botão New…, selecione Archive Type WAR File e defina o nome como ADFSharedLibraryHRTF. Clique OK.

image

Vá na aba Profile Dependencies e marque a library HRTaskflowADFLibrary que criamos anteriormente.

image

Clique OK duas vezes para fechar as janelas de configuração. Agora podemos fazer o deployment para o servidor de aplicações.

Clique com o botão direito no projeto MySharedLibrary, selecione Deploy –> ADFSharedLibraryHRTF…

image

Selecione Deploy to Application Server e clique em Next. Selecione o seu servidor de aplicações aonde o WebCenter Portal está instalado (ou crie uma nova conexão) e clique em Next.

Na tela de seleção de instâncias, configure o deploy para o managed server do Portal (WC_Spaces). Marque a caixa de opção Deploy as a Shared Library.

image

Acompanhe a evolução do deployment na janela de log do JDeveloper. Quando o deployment estiver terminado, verifique no Weblogic Console se a biblioteca está disponível.

image

Agora iremos criar um projeto de extensão do Portal, que irá associar esta biblioteca ao Portal, para que o Task Flow que criamos apareça no catálogo de componentes. OBS: Este processo precisa ser feito apenas uma vez. Outros Task Flows podem ser associados à este projeto sem que uma nova extensão tenha que ser criada.

No JDeveloper, clique em File –> New –> Applications –> WebCenter Portal Server Extension (OBS: Esta opção aparece apenas na versão 11.1.1.8 da extensão. Se esta opção não aparecer para você, faça o update da extensão do Portal).

Defina um nome para a aplicação e clique em Finish.

image

Clique com o botão direito no projeto PortalSharedLibrary e selecione New –> Deployment Descriptors –> Weblogic Deployment Descriptor.

image

No assistente, selecione weblogic.xml e versão 10.3. Clique em Finish para criar o arquivo.

No editor do arquivo, vá na aba Libraries e adicione a library ADFSharedLibraryHRTF.

image

OBS: Este deve ser o mesmo nome da library que foi disponibilizada no Weblogic Server:

image

IMPORTANTE: Se esta é a primeira vez que você vai fazer o deployment de um Task Flow, pode passar direto para o deployment. Porém, se você vai adicionar um novo Task Flow à extensão (ou seja, se este é um re-deploy desta library), lembre-se de editar o arquivo MANIFEST.MF e incrementar o valor do atributo Implementation-Version. Para o primeiro deployment, o valor correto é o original: 11.1.2.

image

Clique com o botão direito no projeto PortalSharedLibrary e selecione Deploy –> extend.spaces.webapp…

image

Selecione Deploy to Application Server e clique em Next. Na próxima tela, selecione a conexão ao seu Application Server e clique em Next. Na tela de seleção de instância, selecione a instância aonde o Portal está rodando (WC_Spaces) e marque a opção Deploy as a Shared Library.

image

Clique em Next e em seguida Finish para iniciar o deployment.

Quando o deployment estiver terminado, reinicie o managed server do Portal (WC_Spaces) para que ele passe a utilizar a nova extensão. Agora nosso novo Task Flow está disponível (ou quase) dentro do nosso Portal!

Parte 3 – Consumindo o Task Flow dentro do Portal

Acesse o Portal como o usuário weblogic e clique no link Administration.

Clique na aba Shared Assets, e em Resource Catalogs. Se você não tiver um catálogo customizado, selecione um dos catálogos disponíveis e clique em Actions –> Copy. Defina o nome do novo catálogo e clique em OK. O Portal não permite que os catálogos default sejam editados, por isso temos que usar um catálogo customizado.

image

Selecione o seu novo catálogo e clique em Edit.

image

Selecione o ítem UI Components, depois clique em Add –> Add From Library.

image

Na janela de opções, selecione Task Flows e expanda Design Time. O nosso Task Flow HRTaskFlow deve aparecer na lista. Selecione este fluxo e clique em Add.

image

Clique no botão Save and Close para salvar este novo catálogo.

Voltando ao Portal, clique no link Portals da barra superior e selecione Create a Portal.

image

Selecione qualquer um dos templates, clicando no botão Use This. Na próxima tela, defina o nome do Portal, a URL e a segurança. Clique no botão Create para criar o novo Portal.

Uma vez criado o Portal, vá no menu Manage –> All Settings. Na aba Settings, defina o Resource Catalog como o que você criou e clique em Save.

image

Voltando ao Portal, crie uma nova página, selecione um layout e, no modo de edição, expanda UI Components e clique no botão Add do nosso Task Flow.

image

O Task Flow será inserido na página. Você pode configurar as opções para que ele utilize melhor o espaço disponível. Na aba Display Options, desmarque as opções Display Header e Allow Resize.

image

Clique no link Advanced e mude a opção Stretch Content para True. Pressione OK. Se quiser, insira outros Taskflows na página. Quando estiver pronto, clique em Save e View Portal.

Voilá! Nosso Task Flow está publicado no WebCenter Portal!

image

Como um bônus, uma visão da página acessada através de um tablet:

image

Até a próxima!

This entry was posted in WebCenter and tagged , , , . Bookmark the permalink.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s