Morte a estruturação de HTML com Tables

HTML é muito bom, mas tem seus problemas. Ao meu ver, um dos maiores problemas do HTML é em termos de estruturação das páginas, pois a GRANDE maioria das páginas utilizam o famoso <table></table> como forma de estruturar/alinhar/organizar seus itens na página.

Nenhum problema até aí certo? Errado! Existe alguma coisa estranha nisso tudo, afinal a tag table deveria servir para criar tabelas (ao invés de ser usada para estruturar o sistema) . O problema todo de se usar tabelas é que simplesmente elas não foram feitas para fazer estruturação, como por exemplo, organizar inputs de um formulário um embaixo (ou ao lado) do outro. E aí é onde mora o problema, não existem tags disponíveis (pelo menos eu não conheço, quem conhecer me avise pelo amor de Deus) para fazer tais estruturações.

Quem nunca precisou ajustar uma página e perdeu um tempo ridiculamente alto para posicionar um item por conta dos milhares de <table>’s, <tr>’s, <td>?É simplesmente uma tarefa difícil, custosa, e estressante.

Para ficar mais claro ainda o problema, eu vou falar das soluções que já existem. outras tecnologias disponibilizam componentes para estruturar outros elementos da página (verticalmente, horizontalmente, ou por posição absoluta na tela).

O primeiro exemplo, é o nosso querido flex. O flex tem o componente para criar tabelas (grid), mas ele não é o mesmo componente usado para estruturar os elementos na página. Para estruturar os elementos na página são utilizados outros componentes, conhecidos como layout containers como: Caixas verticais (VBox), Caixas Horizontais (HBox), Canvas livre (para posicionamento absoluto utilizando as coordenadas X e Y para posicionar), etc…

Ainda existem outros do flex, mas só esses 3 que eu citei já dão pra fazer quase tudo (senão tudo) em termos de estruturar seus elementos na página.

Outro exemplo é o nosso querido WPF da querida Microsoft, que também disponibiliza componentes semelhantes (containers) aos que o flex disponibiliza: StackPanel, DockPanel, Canvas e etc.

Tudo bem, eu sei que WPF é da microsoft e não é free nem é padrão como HTML. Sei também que o flex apesar do core ser free, mas a IDE é paga então também é uma dificuldade a mais. De qualquer forma, bem que o HTML5 poderia ter algo do tipo né?  (Eu não conhece e procurei rapidamente e não encontrei, mas se existir algo do tipo no HTML5, por favor me avisem! :D)

Maven + Flex

Quem está acostumado com integração contínua, e tem o build do sistema automatizado rodando de tempos em tempos não precisa se desesperar porque já existem soluções para automatizar o build de uma aplicação Flex (actionscript) utilizando Maven.

As opções que eu encontrei são as seguintes: Flex-Mojos e Maven Flex Plugin.

Até onde eu pude perceber o flex-mojos foi o que melhor funcionou para gerar o build da aplicação. Os dois oferecem archetypes para criação de novos projetos, com opções de um projeto flex application (SWF), um library simples (SWC) ou uma library com acesso a API flex (SWC também).

Para demonstrar, vou mostrar a criação do projeto a partir do Maven Flex Plugin:

mvn archetype:generate -DarchetypeCatalog="http://maven.servebox.org"

Essa linha de comando irá lhe perguntar qual o archetype que você quer criar, groupID  e artifactID (que vai ser o nome do projeto). Após isso será gerado um POM.xml dentro de uma pasta com o nome do artefactID que você passou.

O POM deve ter +- essa cara:

<project>
    <modelVersion>4.0.0</modelVersion>
    <groupId>my.group.id</groupId>
    <artifactId>my-artifact</artifactId>
    <version>1.0-SNAPSHOT</version>
    <name>My Simple Project</name>

    <packaging>swf</packaging>

    <pluginRepositories>
        <pluginRepository>
            <id>servebox</id>
            <name>ServeBox Plugin Repository</name>
            <url>http://maven.servebox.org/repository</url>
        </pluginRepository>
    </pluginRepositories>
    <repositories>
        <repository>
            <id>servebox</id>
            <name>ServeBox Plugin Repository</name>
            <url>http://maven.servebox.org/repository</url>
        </repository>
    </repositories>

    <build>
        ...
        <plugins>
            <plugin>
                <groupId>org.servebox.flex</groupId>
                <artifactId>flex-plugin</artifactId>
                <version>2.3.2</version>
                <extensions>true</extensions>
            </plugin>
        </plugins>
    </build>
</project>

Existe ainda a possibilidade de utilizar para o build o Flex-Mojos (caso misteriosamente não funcione com o maven lex plugin), bastando para isso modificar a linhas selecionadas acima por:

<plugin>
     <groupId>org.sonatype.flexmojos</groupId>
     <artifactId>flexmojos-maven-plugin</artifactId>
     <version>3.2.0</version>
     <extensions>true</extensions>
</plugin>

Além disso, você pode inserir configurações no seu build como a licença do flex (muito útil para quem utiliza a biblioteca de charts do flex, que só compila com a licença professional, então tem que incluir a licença nessas configurações), source paths, etc, etc:

<plugin>
  <groupId>org.sonatype.flexmojos</groupId>
  <artifactId>flexmojos-maven-plugin</artifactId>
  <version>3.2.0</version>
  <extensions>true</extensions>
  <configuration>
     <licenses>
         <flexbuilder3>SUA LICENÇA</flexbuilder3>
     </licenses>
     <sourcePaths>
         <path>${basedir}/src/main/flex</path>
     </sourcePaths>
     <mergeResourceBundle>true</mergeResourceBundle>
  </configuration>
  <dependencies>
     <dependency>
         <groupId>com.adobe.flex</groupId>
         <artifactId>license</artifactId>
         <version>3.2.0.3958</version>
         <type>jar</type>
    </dependency>
  </dependencies>
</plugin>

Uma vez gerado o POM, podemos gerar o projeto o projeto do eclipse através do goal:

mvn flex:eclipse

Voilá! Pronto, feito isso basta importar o projeto criado no eclipse. O seu projeto agora pode ser compilado pelo maven, e suporta os goals convencionais do lifecycle do Maven 😉