Criando um Launchpad à lá Fiori usando TileContainer em poucos segundos

Parece que o Fiori Launchpad será a homepage de muitos usuários daqui algum tempo. Já ouvi e li muita gente falando das vantagens do Fiori Launchpad e devo confessar que ele realmente é de bom gosto quanto a sua aparência. Pensando nisso, resolvi criar um post para permitir que você faça o seu próprio Launchpad à lá Fiori em UI5 em apenas poucos segundos. O resultado é exibido na imagem abaixo.

Launchpad em janela maximizada

Launchpad em janela maximizada

Sublime Text

Neste post vou fugir um pouco do Eclipse para mostrar um pouco de uma IDE que vem me impressionando mais a cada dia, o Sublime Text. Não convém aqui falar o que é o Sublime. Você poder ler sobre ele na Wikipedia, no seu site oficial, na documentação não oficial e até em um blog brasileiro que encontrei. Vale também deixar o link do gerenciador de pacotes dele pois é através dele que se instala pacotes como o Project Maker.

Sublime Text Project Maker

O Sublime pode ser adaptado com “Packages”, assim como seu navegador suporta extenções e o Eclipse plugins. Existe um package do Sublime chamado Project Maker que permite que você crie templates de projetos totalmente customizados. A documentação está no próprio GitHub.

Templates de UI5 no Sublime Text

Pensando nisso, @qmacro (DJ Adams – que parece ser unipresente na SCN, StackOverflow e GitHub em tudo que envolve código e SAP) criou um repositório no GitHub chamado SublimeUI5 com Snippets e Templates de código para agilizar o desenvolvimento de aplicações feitas em UI5. Este repositório que foi criado no final de 2013 tem tudo para se tornar uma jóia pela comunidade OpenUI5 (se é que já não pode ser considerada assim com 24 Stars).

Criando um Launchpad à lá Fiori

Resolvi então dar minha contribuição ao repositório criando alguns templates também. Um deles é o UI5 JS TileContainer Project. Criei um pull request deste template há pouco para o repositório original, mas como não sei se o mesmo será aprovado ainda deixo o link para o meu fork. Recomendo que quando ler este post verifique os templates no projeto original.

Para usar o template, basta criar um arquivo novo no Sublime, ir em Project >> Create Project >> UI5 JS TileContainer Project.

Criando novo projeto usando o Project Maker

Criando novo projeto usando o Project Maker

Selecionar Template

Selecionar Template

Será pedido o diretório no qual o nome projeto será criado. No caso no diretório (…)/MyFirstLaunchpad.

Especificando diretório do projeto a ser criado

Especificando diretório do projeto a ser criado

Feito isso, é gerado uma estrutura de diretório semelhante a abaixo.

Launchpad OpenUI5 4

Por fim, basta adequar o bootstap no arquivo index.html e pronto! Seu Launchpad já está criado!

Ajuste o bootscrap de acordo com suas necessidades

Ajuste o bootscrap de acordo com suas necessidades

Ele ainda se adapta a dimensões da sua janela e do seu dispositivo! Realmente é bem legal.

Launchpad em janela compacta

Launchpad em janela compacta

Launchpad em janela muito compacta

Launchpad em janela muito compacta

Launchpad no iPad

Launchpad no iPad

Experimente

Este tipo de template é uma ótima forma de começar a aprender UI5. Como este template pode mudar com o tempo, não explicarei como ele funciona mas eu garanto: é bem simples. Basta dizer que o control TileContainer é usado. Por isso, se quiser saber mais faça já o clone do repositório e contribua também com Templates e Snippets de código!

Leave a Reply

Your email address will not be published. Required fields are marked *