Oracle EID - Studio (Customização Visual)
Autor: Carina Mendes | Publicado: 2014-03-14T17:45:00-03:00








Objetivo:




Levantar propriedades da identidade visual da aplicação Studio.  Criar metodologia para customizar o layout da ferramenta.  Agregar valor e diferencial através da personalização do Oracle EID Studio.

    

Metodologia Adotada:




De acordo com a documentação oficial da Oracle (vide fonte), o Endeca Studio permite a customização através de Imagens e CSS.  No servidor de aplicação, encontram-se os seguintes diretórios padrões para os arquivos de layout que serão alterados:

-Diretório de Imagens:
/localdisk/Weblogic/Oracle/Middleware/user_projects/domains/endeca_studio/servers/AdminServer/tmp/_WL_user/endeca-portal-weblogic-3/gaidjs/war/html/themes/_styled/images     
-Diretório de Arquivos Css:

/localdisk/Weblogic/Oracle/Middleware/user_projects/domains/endeca_studio/servers/AdminServer/tmp/_WL_user/endeca-portal-weblogic-3/gaidjs/war/html/css/eid-default       A metodologia adotada, abrange as seguintes telas da ferramenta Orace EID - Studio:  -Tela de loguin no Studio.  -Tela de acesso às aplicações.  -Tela da aplicação.



Instruções para Realizar a Customização:&nbsp;




Identificar os arquivos no servidor de ambiente:




Navegue pelos diretórios do servidor da aplicação para localizar os arquivos de aparência do Studio.











   O recomendado é realizar backup dos arquivos antes de qualquer alteração e dentro do diretório de origem. Para evitar que a aplicação perca as referências e localização dos arquivos se caso forem restaurados.

Identificar os objetos nas telas que serão personalizadas:

A primeira tela a ser personalizada, será a de acesso ao Studio (loguin), utilize a função “Inspecionar Elemento” do seu navegador para localizar a origem e tags de referência dos objetos que serão alterados.



Customização dos arquivos de imagem da aplicação:

Nesse caso, alteramos objetos como cabeçalho, cor de fundo, logo interno nas aplicações e etc. A seguir temos o exemplo das tags alteradas nos arquivos de Css.    -Alterações realizadas no arquivo “endeca-skin-3.css”



-Alterações realizadas no arquivo “endeca-skin-1.css”:



Inserir os arquivos customizados no servidor da aplicação:

-Primeiramente, é necessário parar os serviços do Endeca Studio:

   -Através de um cliente de arquivos (FileZila), conecte com o servidor de ambiente, localize os arquivos originais, renomeie os arquivos originais com o sufixo “_BK” para criar uma versão de backup.  Em seguida insira os Css e Imagens que foram customizados, lembrando que eles devem possuir os mesmos nomes dos arquivos originais:







-Reinicie o Endeca Studio, para esse caso também foi necessário reiniciar a VM antes:



-Limpe o cache do seu navegador e veja o Resultado.

Alterar o logotipo da aplicação:

A ferramenta permite a utilização de um logotipo para cada aplicação. A configuração pode ser realizada da seguinte forma.      - No Painel de Controle do Studio, selecione no menu direito a sessão de “Aplicações”(1), em seguida, escolha qual aplicação deseja customizar o logotipo, clique no menu “Ações”(2), e depois na opção “Gerir Páginas”(3).





Na tela seguinte, navegue até a aba “Definições”(1), na sub-aba “Logotipo”(2), escolha a imagem que substituirá o logotipo original da ferramenta(3) e clique em “Gravar”(3).







É necessário que a imagem a ser inserida, tenha o mesmo tamanho de 112x16px e formato .png.      Após a gravação, basta entrar na aplicação e validar o resultado:




    

Tela Inicial de Loguin no Studio:




Layout original:





  Layout customizado:







Tela de Acesso às Aplicações:




Tela Original:





 

Tela Personalizada:






Tela da Aplicação:



      Tela Original:


  Tela Personalizada:










Considerações Finais:




      É recomendável conhecimento básico de Css,&nbsp; Html e domínio de imagens para a customização dos arquivos no servidor de ambiente.





Fonte de Pesquisas: