O gestor de projecto irá usufruir do conforto do Airgile para gerir e acompanhar a evolução dos projectos, delegando tarefas aos consultores e programadores. Estes receberão as tarefas directamente no Eclipse, a sua ferramenta de trabalho de eleição. À medida que completam as tarefas, os consultores podem fechá-las directamente no Eclipse, que irá sincronizar com o Airgile (automaticamente), actualizando os indicadores e notificando o gestor de projecto.

Este é o workflow de gestão que usamos na Webfuel, ligando o Eclipse antigamente ao Trac e actualmente com o Airgile – que é mais rápido e confortável. É relativamente fácil configurar a ligação, estando as instruções disponíveis aqui.

No vídeo abaixo, a partir dos 5:45 é possível ver o conector em acção.

O aumento de produtividade no Flash Builder destaca-se através de várias pequenas mas extremamente úteis funcionalidades para simplificar a vida do programador enquanto escreve código, tais como:

Code templates – o Flash Builder traz cerca de uma centena de code templates, mas estes são configuráveis pelo programadorsendo fácil adicionar novos. Para activar um code template, basta, por exemplo, escrever “fori”, carregar CTRL+Space, e o Flash Builder escreverá automaticamente “for (var i:Number = 0 …. etc”.

Code completion para Metadata – basta escrever [B (Ctrl+Space) e o FB preenche o resto

Live error Highlighting - ao escrever código o Flash Builder agora aponta os erros sem ser necessário compilar. De notar que isto funciona com grande parte dos erros, mas não com todos.

Melhorias no IDE - a performance do IDE foi melhorada, tal como a velocidade de compilação. O design mode agora consegue fazer o rendering de views mais complexas

Quick-assist - na realidade esta não é uma, mas sim dezenas de funcionalidades. O Quick-assist é um atalho (CTRL+1) que quando é chamado abre um menu com várias opções, de acordo com o contexto, como por exemplo:

• Geração de event handlers
• Organização dos imports
• Criação de métodos automática
• Declaração de variáveis
• Promoção de variáveis locais para propriedades da classe
• [... outras ...]

Neste vídeo do Serge, é possível ver algumas destas funcionalidades em acção:

Relativamente ao desenvolvimento para dispositivos móveis, o Flash Builder é agora um ambiente extremamente confortável para desenvolver para smartphones e tablets Android, iOS e BlackBerry (Playbook).

A versão que foi disponibilizada ainda só exporta aplicações para Android, mas muito em breve será lançado um update que permite exportar a mesma aplicação com o mesmo código para iOS.

O Flex SDK possui agora um conjunto de componentes “light” especialmente optimizados para telemóveis e ainda uma framework que simplifica o desenvolvimento  ao gerir pelo programador a navegação entre as views, a “cache” dos dados em cada view, etc. No desenvolvimento para Mobile é importante ter em conta as diferentes resoluções e densidades de cada smartphone – o Flash Builder possui ferramentas para gerir confortavelmente o desenvolvimento para diferentes ecrãs (multi-screen development).

Neste vídeo do Serge podemos ver mais sobre o desenvolvimento para Mobile:

Este é também um vídeo interessante que mostra os Charting components a correr no iPad, iPhone, Android e BlackBerry Playbook:

Para quem pretende explorar mais o desenvolvimento para Mobile usando Adobe Air, deixo aqui este recurso (embora não seja completamente orientado ao Flex):

Esta é, na minha opinião, a melhor release do Flash Builder até à data. Ou pelo menos, é a mais sólida e que eleva o desenvolvimento em Flex para outro patamar, muito próximo da experiência de desenvolvimento típica no mundo JAVA.

Eu, o Rui Silva e o João Fernandes acompanhamos esta release desde o início e tivemos a oportunidade de contribuir para a evolução da mesma. Orgulhosamente temos agora dois nomes portugueses nos créditos do Flash Builder, se bem que o João Fernandes também merecia. E não queria deixar de mandar um abraço para o Carlos Rovira ali na vizinha Espanha.

Não se esqueçam que podem sempre utilizar a Mailing List para partilhar as vossas experiências ou colocar questões ao resto da comunidade.

O Airgile sincroniza automaticamente as alterações às tarefas entre todos os elementos da equipa automaticamente, o que permite que as equipas trabalhem a todo o gás e que os gestores de projecto acompanhem as evoluções ao projecto em tempo real através de um dashboard intuitivo. Pesquisas e filtragens a milhares de tarefas demoram menos de meio segundo, tal como adicionar ou editar tarefas – através do Quick-Add e Quick-edit.

Feito a pensar em equipas espalhadas em redor do mundo, suporta multi-linguagem (por agora em Português e Inglês) e lida automaticamente com o fuso horário. Isto é,  uma tarefa introduzida a uma determinada hora em Portugal, aparece com a hora correcta para os elementos da equipa localizados no Brasil sem qualquer configuração necessária.

Além da informação detalhada que é possível colocar numa tarefa – como o tipo, estado, importância, data de início, fim, orçamento, entre outras -, é ainda possível anexar múltiplos ficheiros de uma só vez sem que tenha que esperar que o envio termine para continuar a trabalhar. Isto é, a aplicação não bloqueia em tarefas assíncronas, tudo com o objectivo de aumentar a produtividade! O sistema de preview inline permite visualizar imagens e ficheiros de texto dentro da aplicação, sem ter que os descarregar para o seu computador.

O sistema de comentários associado a cada tarefa reforça a comunicação entre os elementos da equipa – ou mesmo com o cliente -, incentivando a troca de ideias ou pedidos de esclarecimento.

O Airgile encarrega-se de enviar automaticamente emails a todos os utilizadores ligados a um projecto sempre que há alterações  (nova tarefa, tarefa editada, novo comentário, etc), podendo o gestor de conta activar a opção de subscrição por tarefa, permitindo que cada pessoa opte individualmente por receber mails só nas alterações das tarefas que escolher.

O sistema de permissões permite ligar utilizadores a projectos, sendo definido projecto a projecto se determinado utilizador pode somente consultar, inserir tarefas, e deixar comentários; se pode aceder às tarefas confidenciais; ou ainda se terá permissões de gestor de projectos que lhe permitem manipular todas as tarefas.

Como cada projecto e negócio é diferente, o Airgile permite-lhe configurar projecto a projecto os tipos, estados e níveis de importância das tarefas. Isto é, é fácil adaptar os projectos a áreas completamente distintas, como a consultoria em IT, ou a advocacia.

Os pormenores de usabilidade do Airgile são deliciosos, com vista não só a aumentar largamente a produtividade da equipa e assegurar o cumprimento de prazos, como também a permitir a utilização por diferentes pessoas com níveis de conhecimentos informáticos completamente díspares: a sua simplicidade tornam o Airgile na ferramenta de gestão de projectos ideal tanto para utilizadores experientes, como para utilizadores inexperientes.

Estando alojado numa Cloud, a plataforma está acessível a partir de qualquer computador em qualquer local do mundo com ligação à Internet, sendo compatível com todos os sistemas operativos e web-browsers usando o Flash Player 10.2. Não existem incompatibilidades entre web-browsers e sistemas operativos, sendo o desempenho e robustez da aplicação sempre ao mais alto nível.

O Airgile está disponível no modelo Software-as-a-service, isto é, mediante o pagamento de uma mensalidade muito baixa (a começar nos 6€/mês!), mas possui também uma conta gratuíta limitada a um projecto. Ao longo do tempo, o Airgile continuará a crescer com novas funcionalidades sempre com vista a aumentar a produtividade dos utilizadores.

O site do Airgile está disponível em http://airgile.com e possui não só vários vídeos de demonstração, como lhe permite testar uma conta de demonstração com dados fictícios antes de poder criar a sua conta.

A aplicação foi desenvolvida pela Webfuel, sendo completamente nacional. Assenta na Cloud, e corre em qualquer browser, tendo sido implementada em Flex usando o Adobe Flash Builder 4.5.  Planeamos lançar uma versão instalável com suporte a OCC (trabalhar offline) e uma versão para Android e iOS através de Air 2.6.

Experimentem o Airgile, forneçam-nos feedback usando o fórum e ajudem-nos a divulgar este produto de origem nacional!

O video abaixo exemplifica alguns dos nossos trabalhos:

Aproveito para agradecer a todos os que nos têm apoiado ao longo destes anos. Esperamos continuar a inovar, a elevar a fasquia no desenvolvimento de RIAs no nosso país, e a partilhar conhecimento com a comunidade.  Obrigado a todos e espero que gostem do site.

Com o Flex 4 foi introduzida uma nova arquitectura de componentes (Spark) que permite separar o aspecto gráfico (Skin) do código que define o comportamento dos componentes (SkinnableComponent). A arquitectura anterior (mx) está ultrapassada e a anos luz do que a nova arquitectura permite. A minha apresentação possui a base essencial para quem quer aprender rapidamente os conceitos da arquitectura Spark.

A minha apresentação foi um pouco mais murcha que o habitual (há dias assim), mas acredito que os slides acima sejam muito úteis para quem está a migrar do Flex 3 para o Flex 4. Os exemplos estão no formato FXP, pelo que basta fazer “Import Flex Project” no Flex Builder.

Aos que ficaram curiosos com o Airgile - uma RIA de gestão de projectos desenvolvida por nós -, informo que abrimos as portas ao beta público, pelo que quem quiser utilizar a aplicação basta visitar http://airgile.com .

]]> http://www.riapt.org/2010/10/17/slides-da-apresentacao-skinning-no-flex-4/feed/ 2 http://www.riapt.org/2010/01/18/slides-da-apresentacao-enterprise-rias-2-no-3%c2%ba-aniversario-do-riapt/ http://www.riapt.org/2010/01/18/slides-da-apresentacao-enterprise-rias-2-no-3%c2%ba-aniversario-do-riapt/#comments Mon, 18 Jan 2010 15:20:51 +0000 João Saleiro http://www.riapt.org/?p=560 Tal como prometido, aqui estão os slides da apresentação “Enterprise RIAs 2- Meet our dirty secrets”. A apresentação anterior, “Enterprise RIAs – This is how we do it” pode ser encontrada aqui. As minhas desculpas se estava mais murcho e cansado do que o costume, mas estava meio adoentado.

Queria dar os parabéns à organização (exemplares!!), aos patrocinadores e principalmente aos oradores que estiveram fantásticos, com apresentações de elevada qualidade.

Não se esqueçam de deixar o vosso comentário à apresentação, e se houverem questões, não tenham problemas em contactar-me. Espero que tenham gostado e que a apresentação vos tenha sido útil.

[Update] Duas pessoas pediram-me a versão digital do documento da Webfuel, mas como não fiquei com o contacto delas, aqui vai o link [/Update]

No próximo dia 25 de Junho, Quinta-feira, vai ocorrer no ISCTE das 14h30 às 19h30 o Portugal Flash Camp 2009. A agenda é a seguinte:

Andrew Shorten (Adobe Systems) – Flash Catalyst and Flash Builder 4
João Fernandes (Cofina SGPS) – Data Centric Development
João Saleiro (Webfuel) – Enterprise RIAs: This is how we do it
Paulo Moreira (Ayumikata) – Olha mãe, sem rato nem teclado
Rui Silva (Alert) – Testes Unitários em Flex
Rui Vieira(FullSix) – Get out There

A morada do ISCTE é:

Avenida das Forças Armadas
Lisboa, 1649-026
Portugal
(Google Maps link)

As inscrições são gratuítas e limitadas a 350 pessoas. O endereço para se inscrever é http://portugalflashcamp2009.eventbrite.com/.

Mais informações no site oficial do Adobe User Group: http://aug.riapt.org

Estas pré-condições implicaram o recurso ao formato PNG – o único que permitiria resolver o problema, visto a norma JPEG2000 não ser suportada pelo Flash Player. Porém, adoptar o formato PNG para as fotos das joias com as dimensões acima referidas resultou em ficheiros de cerca de 500KB. Isto, num site com cerca de 200 a 300 jóias, com várias fotos cada.

Depois do deployment do site constatou-se o esperado: em ligações rápidas, os 500KB de cada foto não representavam grandes problems, mas em ligações lentas podia ser desesperante esperar de 10 a 20 segundos para a foto carregar. E com o disseminar recente das ligações 3,5G (kangurus, vodafone e tmn connect box, etc), tornou-se problemático pelo que tivemos que procurar por uma solução.

Encontrámos uma extensão chamada PNG2SWF pertencente ao pacote SWFTools que permitia converter um PNG para um SWF. Como é sabido, um PNG embebido em SWF pode levar compressão sendo mantida a transparência, pelo que decidimos fazer algumas experiências. Após alguns testes, tivemos resultados impressionantes: imagens de 500 Kb passaram para 60 Kb sem serem perdidos os canais alpha. Exactamente o que precisávamos!

O problema que surgiu de seguida consistia em saber como integrar o PNG2SWF com o site / backoffice sem afectar a experiência do utilizador. Era importante que o cliente continuasse a utilizar o backoffice como sempre, sem trabalho adicional.

Fizemos então um script simples, que vos ofereço adiante, e que consiste num género de proxy para carregar PNGs, só que devolve o PNG convertido para SWF, e escalado para dimensões arbitrárias escolhidas pelo programador.

O download do script pode ser feito aqui: pngoptimize . O source code pode ser visto abaixo:

<?php

    // 31-10-2008
    // pngOptimize.php by João Saleiro - Webfuel ( joao.saleiro@webfuel.pt)
    // Todo:
    // - receive quality from $_GET vars
    // - set default values for quality, w and h

    $image = $_GET['url'];
    $w = $_GET['w'];
    $h = $_GET['h'];

    $date = filemtime($image);

    // Generate SWF filename
    $swf = $image . $w . $h .'_'. $date .'.swf';

    // Generate SWF if it doesn't exist
    if (!file_exists($swf))
    {
        // Calculate dimensions
        list($width, $height) = getimagesize($image);

        $proportion = 1;
        if ($width > $height)
            $proportion = $w/$width;
        else
            $proportion = $h/$height;

        // Load image and preserver transparency
        $im = @imageCreateFromPNG ($image);
        imagealphablending($im, false);
        imageinterlace ( $im, 0);
        imagesavealpha($im, true);

        // Create new Image
        $im_dest = imagecreatetruecolor ($width*$proportion,  $height*$proportion);

        // Set transparency
        $background = imagecolortransparent($im);
        imagecolortransparent($im_dest, $background);
        imagealphablending($im_dest, false);
        imagesavealpha($im_dest, true);

        // Resize old image to new image
        imagecopyresampled($im_dest, $im, 0, 0, 0, 0, $width*$proportion, $height*$proportion, $width, $height);

        // Save new image
        $tempName=$image.'temp.png';
        imagepng($im_dest, $tempName);

        // Clean memory
        imagedestroy($im);
        imagedestroy($im_dest);    

        // Convert new image to SWF
        shell_exec("./png2swf -j 85 -o $swf $tempName");

        // Remove temp file
        unlink($tempName);
    }

    // If we get here, and there's no file, we don't return nothing
    if (!file_exists($swf))
        exit(0);

    // Return generated SWF
    header("Content-type: application/x-shockwave-flash");
    $fp = fopen($swf,"rb");
    fpassthru($fp);
    fclose($fp);
?>

O algoritmo é relativamente simples:

1. O script recebe por GET os parâmetros: url, w e h, que correspondem ao endereço relativo do PNG, e as dimensões que queremos para o nosso SWF resultante;
2. O script vai então gerar um nome de ficheiro único para aquele url, com aquelas dimensões, e para a data do PNG (i.e. se o PNG for actualizado pelo cliente o script detecta que há um PNG novo, o que implica gerar um novo SWF com novo nome);
3. É verificado se já existe algum SWF com aquele nome único (i.e. uma versão em cache daquele PNG já convertido para SWF com aquelas dimensões). Se existir, o SWF é aberto e lido, e feito um fpassthru do ficheiro (i.e. é devolvido o conteúdo do ficheiro SWF), depois de definido o header application/x-shockwave-flash para que o Flash possa interpretar o resultado do ficheiro PHP como sendo um SWF;
4. Se não existir nenhum SWF, o script vai abrir o PNG referido no URL, e criar um novo PNG temporário com as dimensões referidas, mantendo a transparência;
5. É então feita a conversão desse PNG temporário para SWF através de um shell_exec que executa o png2swf com os parâmetros necessários para a conversão, sendo gerado um SWF com o nome de ficheiro referido acima, e devolvido com o fpassthru.

Para utilizar este script é necessário:

• Colocar no servidor, na mesma directoria do pngConvert.php, o png2swf (linux) ou png2swf.exe (windows);
• Permissões de execução do png2swf nessa directoria;
• Permissões do php para a chamada de comandos externos (shell_exec);
• Permissões de escrita nas directorias onde estão os ficheiros PNG para serem lá colocados os ficheiros SWF;

Do lado do cliente, o código necessário para carregar um PNG convertido para SWF através do pngConvert é:

• MXML:

<mx:Image source="pngConvert.php?url=imagem.png&w=100&h=100"/>

• Actionscript 3 (i.e. Flash)

var l:Loader=new Loader();

l.load(new URLRequest('pngConvert.php?url=imagem.png&w=100&h=100'));

addChild(l);

O script ainda pode levar algumas melhorias, nomeadamente:

• a qualidade da imagem também ser passada por GET;
• se os parâmetros w e h não estiverem definidos, o SWF gerado é da mesma dimensão que o PNG original.

Não implementei essas melhorias porque não precisei na altura, mas se alguém quiser melhorar, é bem vindo – publicarei depois aqui a versão melhorada, com devidos créditos.

Espero que esta informação e script vos sejam úteis. O script pode ser utilizado livremente e só pedimos que seja colocado um comentário neste post com o endereço do site onde o estão a usar, para alegrarem o nosso dia.

Porém, cada vez mais o futuro passa por usarmos outros dispositivos para ligar à Internet, além do nosso PC. Telemóveis, PDAs, a própria televisão, e até o nosso carro. Se pensarmos desta forma a penetração de 98% já não parece tão relevante…

Conscientes desta realidade, a Adobe deu um passo em frente ao anunciar o Open Screen Project. Este projecto consiste essencialmente em remover restrições de várias licenças, a publicação de alguns protocolos, e a consolidação de esforços com entidades como a Cisco, Intel, LG, Motorola, Nokia, Samsung, Ericsson, Toshiba, etc, etc, no desenvolvimento de uma solução verdadeiramente ubíqua a correr nos mais variados dispositivos.

O que se pretende é que o mesmo Rich Content que designers e developers colocam na Internet para correr nos nossos PCs através do Flash Player passe também a poder correr da mesma forma em qualquer dispositivo. Ou seja, os nossos sites, RIAs, e experiências multimédia passam realmente a poder ser acedidas de qualquer local e dispositivo.

Os primeiros passos que a Adobe vai tomar são:

Remoção das restrições na utilização das especificações SWF e FLV/F4V e
publicação das APIs de portabilidade do Flash Player para dispositivos

Com isto, quem quiser instalar o Flash Player num dispositivo pessoal poderá fazê-lo. O objectivo não é fazer com que comecem a surgir uma panóplia de versões do Flash Player incompatíveis entre si (perdendo-se a ubiquidade), mas sim permitir que outros vendedores possam desenvolver a camada necessária que permita integrar e correr o flash player nos seus próprios dispositivos.

Publicação dos protocolos Adobe Flash Cast e AMF

Não só foram publicadas as especificações SWF e FLV/F4V, como as especificações dos formatos de comunicação de dados usados pelo Flash Player. Pretende-se com esta iniciativa em específico que os mais variados dispositivos possam utilizar Flash/Flex Remoting e os protocolos Flash Cast para comunicar com o servidor.

Remoção dos custos de licenciamento do Flash Player e Adobe Air

Passa a tornar-se gratuíto distribuir o Flash Player e o Adobe Air. Quer isto dizer que quem quiser colocar uma versão do Flash Player junto da sua aplicação, ou mesmo equipar um modelo de telemóvel ou outro dispositivo com o Flash Player, poderá fazê-lo gratuitamente.

São no fundo notícias importantes tanto para o utilizador final como para quem desenvolve na plataforma Flash. Caminha-se para a ubiquidade, e cada vez mais teremos acesso às suas aplicações e experiências multimédia a partir de qualquer local e dispositivo.

Mais informações

• Press Release da Adobe
• Página oficial do projecto
• Vídeo do Kevin Lynch a explicar a iniciativa
• Explicação do Ryan Stewart

Experimentem a clicar nos ícones. O menu pode ser usado tanto no Flash CS3 como no Flex.

Para usarem o menu nos vossos projectos, basta que:

1. Coloquem na pasta do vosso projecto o ficheiro MacMenu.as;
2. Coloquem no stage os ícones que pretendem que façam parte do menu. Tenham o cuidado de centrar as imagens no ponto 0,0 por causa do zoom;
3. Façam o seguinte código:

var listaDeIcones:Array=[m1, m2, m3, m4, m5, m6];

var menu:MacMenu = new MacMenu(listaDeIcones);

addChild(menu); // Por causa do enterFrame. Preferia evitar esta solução, mas por agora...

Onde m1, m2, m3, etc, são o nome das instâncias dos vossos ícones.

O menu possui três parâmetros de configuração:

• ratio: define a distância de reacção ao rato. Quanto menor o número, mais próximo precisa o rato de estar para que os ícones reajam. Exemplo: menu.ratio= 130;
• escala_maxima: define o zoom máximo que os ícones terão. Exemplo: menu.escala_maxima=1.2;
• escala_minima: define o zoom mínimo que os ícones terão. Exemplo: menu.escala_minima=0.5;

Decidi separar o código de reacção aos cliques retirando-o da classe MacMenu, isto porque podem querer criar as vossas próprias reacções aos cliques. Se no entanto quiserem usar as do exemplo acima (no clique, o ícone fica com um brilho e começa aos saltos), precisarão da classe GlowReactor e da pasta caurina:

1. Copiar para o vosso projecto a pasta caurina;
2. Copiar para o vosso projecto o ficheiro GlowReactor.as;
3. Fazer o seguinte código:

new GlowReactor(listaDeIcones);

Algumas das práticas usadas no exemplo são discutíveis, mas recordem-se que foi feito em meia hora com fins educativos. Ainda assim, espero que vos agrade e seja útil.

O código fonte pode ser descarregado daqui.