Pré-loader customizado em Flex

O exemplo que trago hoje é um velho conhecido nosso desde os tempos de Flash: o pré-loader customizado. Para quem não se lembra, são aquelas animações que aparecem antes do conteúdo principal da página ser carregado. A principal função de se customizar um loader de aplicação é aumentar o nível de interesse do usuário na ferramenta em que está, seja um site ou sistema corporativo.

Para desenvolver um loader customizado é necessário tomar alguns cuidados. A disposição do layout da página por exemplo, ainda não consegui um loader que cobrisse completamente os componentes e neste exemplo, por ser muito simples isto talvez não ocorra.

O exemplo é dividido entre o código principal, ou seja a tela que se deseja carregar, uma classe actionscript que extende de DownloadProgressBare outra que extende de Loader. A classe WelcomeScreen é que controla a apresentação do swf de animação. Enquanto a página principal é carregada (na realidade um arquivo swf). Os métodos do ciclo de vida podem ser customizados, então se você quiser apresentar mensagens diferentes em estados diferentes também é possível. Geralmente você não precisará alterar o código fonte de CustomPreloader ou de WelcomeScreen, somente a referência para o swf que irá aparecer enquanto a página é carregada.

A indicação que o flex utiliza para saber que você deseja usar um pre-loader customizado ao invés do padrão está na aplicação Flex CustomPreloader no cabeçalho:

preloader="preload.CustomPreloader"

Mais fácil que isto realmente só HelloWorld. ;)
Até a próxima e bom feriado crianças.


Link do exemplo.
Código fonte.

Preview:

Player vídeo em Flex

Bom dia pessoal, o meu post de hoje é sobre um recurso simples de ser utilizado e muito poderoso: um player de vídeo em stream com o Flex.
Como sabemos, muitos sites precisam de mostrar algum vídeo para o usuário em algum momento.
O que a maioria faz é disponibilizar um link para download mas você se imagina navegando no Youtube e fazendo download de vídeos assim? Por isso que existe a tecnologia de stream, ela permite que o vídeo seja descarregado e ao mesmo tempo exibido, permitindo maior interatividade com o usuário e maior eficiência na utilização do recurso. O exemplo deste post faz exatamente isso.
A única coisa que você irá precisar além do Flex é de um conversor de avi para flv, no meu caso utilizei o AVI to FLV Converter que pode ser encontrado neste link.

Abaixo o exemplo:



Clique aqui para ver o código fonte.

Agora você também pode fazer o seu YOUTube!
;) Abs

CSS: background repeat?

Com certeza você já deve ter tido esta dúvida: como utilizar repeat-background em um plano de fundo em flex correto? Busquei no Google e como sempre, as melhores soluções que encontrei foi em blogs especializados, de todas as alternativas esta que apresento neste post é a melhor na minha opinião.

Exemplo rodando:

Ainda não consegui utilizar um swf para repetição apenas imagens jpg ou gif, mas quem sabem eu possa melhorar este exemplo e trazê-lo para vocês.

Clique aqui para ver o código fonte.

Extraído de http://labs.flexcoders.nl/?p=16

Até que enfim! Flex Builder para Linux

Puxa, como apanhei tentando rodar o Flex Builder no Ubuntu, acho que foi pelo menos umas 16 horas tentando e nada. Quando rodou perdi a funcionalidade mais importante: o design mode. Hoje ao acessar o blog da DClick li esta notícia maravilhosa, finalmente saiu o Flex Builder Alpha para Linux! A Adobe está realmente indo a sério na tendência do software livre, garantindo maior competitividade para sua ferramenta. Parabéns a todos os Flex Developers, esta é uma notícia excelente!

Links de referência:
http://blog.dclick.com.br/2007/10/03/flex-builder-linux/
http://labs.adobe.com/technologies/flex/flexbuilder_linux/

Resolvendo crash do flex builder

É sempre assim, quando você está mais se divertindo na ferramenta acontece um crash, infelizmente o crash abaixo não é culpa do Flex Builder, mas um problema que ocorre no Eclipse de vez em quando.

Unable to create this part due to an internal error. Reason for the failure: The editor class could not be instantiated. This usually indicates that the editor’s class name was mistyped in plugin.xml.

Encontrei a solução usando o famoso Google, como sempre, daí caí no judahs Blog o qual me indicou que eu apagasse o diretório .metatag do workspace... por incrível que parece é só isso mesmo.

Leitor de RSS em Flex

Este é o exemplo clássico de leitor de rss que já vem com help do flex builder.
Alteramos o exemplo para ler o nosso feed do flex4you. Nosso feed está na url http://flex4you.blogspot.com/feeds/posts/default , apenas alteramos a estrutura do exemplo para se adaptar à estrutura do xml do feed, muito prático e fácil de alteração. ;)

Como é de se esperar, existe um problema de segurança ao realizar-se uma chamada a um servidor externo ao que a aplicação está rodando, por isto estou disponibilizando o fonte de um servlet que serve de proxy, daí a aplicação acessa este proxy em vez da url diretamente.

Link do exemplo

Link do fonte da aplicação de rss.

Link do fonte do servlet e web.xml.

Referência:
http://kb.adobe.com/selfservice/viewContent.do?externalId=tn_16520&sliceId=2

Flex 3D? Web 3.0?

Eu já tinha visto este demo da Outsmart há um mês atrás e ele até agora me impressiona por diversos motivos. Primeiro porque abre precedentes inimagináveis de interação na web e outro porque a performance do exemplo é muito boa. Mesmo utilizando tantas texturas a aplicação dos caras consegue rodar numa boa mesmo em uma conexão que não seja top de linha.
Infelizmente ainda não tenho algum código fonte ou exemplo rodando de algo parecido, mas estou correndo atrás. Espero que consiga desenvolver algo parecido nos próximos meses!
Link da demonstração: Outsmart OS3D Demo

Flex Skins

O flex permite a alteração de skins em tempo de execução. Para quem não sabe o que é um skin, pense nos templates do winamp e de outros programas conhecidos. Você altera a interface de acordo com o seu gosto e propósito de forma dinâmica e sem impacto na aplicação já desenvolvida. Os skins atuam diretamente nos widgets, ou componentes de interface com o usuário. O nível de customização é realmente impressionante.

Este exemplo foi retirado do site ksingleton, lá existem diversos skins disponíveis e mais exemplos como este.

Clique aqui para ver o exemplo.

É possível alterar a aparência da aplicação simplesmente trocando-se o css através da função abaixo:

private function changeCSS( panelTitle:String, name:String ):void {
var styleEvent:IEventDispatcher = StyleManager.loadStyleDeclarations( name, true );
}

Esta função recebe como parametro o titulo do estilo e principalmente, a url do css a ser carregado.

Para executar este exemplo siga os seguintes passos:

1. Baixe o código fonte através deste link (opção Download source)
2. Importe para o flexbuilder como um novo projeto.
3. Compile os arquivos css para swf conforme a imagem abaixo:


Como podem ver, o centro da questão está na função changeCSS, a qual simplesmente recebe o parametro que é o nome do arquivo css a ser aplicado. Existem diversos skins disponíveis, no próximo post tratarei sobre como criar um skin.







Referências:

1. http://blogs.adobe.com/kiwi/
2. http://www.ksingleton.com/?q=node/12

Upload em Flex

Pessoal, a seguir estou postando um exemplo de upload utilizando Flex, Livecycle e um servlet multipart data. Como podemos ver é algo muito similar ao upload em aplicações baseadas em JSP.
Arquivos principais a serem criados:

1. upload.mxml
2. Servlet.java

Aplicação de exemplo:

Código fonte upload.mxml

package papu10;

import java.io.File;
import java.io.FileOutputStream;
import java.io.IOException;
import java.io.InputStream;
import java.util.Iterator;
import java.util.List;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import org.apache.commons.fileupload.FileItem;
import org.apache.commons.fileupload.FileItemFactory;
import org.apache.commons.fileupload.FileUpload;
import org.apache.commons.fileupload.FileUploadException;
import org.apache.commons.fileupload.disk.DiskFileItemFactory;
import org.apache.commons.fileupload.servlet.ServletFileUpload;

/**
 * Servlet implementation class for Servlet: ServletUpload
 * 
 */
public class ServletUpload extends javax.servlet.http.HttpServlet implements
  javax.servlet.Servlet {
 /*
  * (non-Java-doc)
  * 
  * @see javax.servlet.http.HttpServlet#HttpServlet()
  */
 public ServletUpload() {
  super();
 }

 // Process the HTTP Post request
 public void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
  doGet(request, response);
 }

 // Process the HTTP Get request
 public void doGet(HttpServletRequest request, HttpServletResponse response)
   throws ServletException, IOException {
  boolean isMultiPart = FileUpload.isMultipartContent(request);
  if (isMultiPart) {
   FileItemFactory factory = new DiskFileItemFactory();
   ServletFileUpload upload = new ServletFileUpload(factory);
   //String formulario = "";
   try {
    List items = upload.parseRequest(request);
    Iterator iter = items.iterator();
    while (iter.hasNext()) {
     FileItem item = (FileItem) iter.next();
     /*if (item.getFieldName().equals("tipoForm")) {
      formulario = item.getString();
     }*/
     if (!item.isFormField()) {
      if (item.getName().length() > 0) {
       this.inserirImagem(item);
      }
     }
    }
   }
   catch (FileUploadException ex) {
    ex.printStackTrace();
   }
   catch (Exception ex) {
    ex.printStackTrace();
   }
  }
 }
 
 /**
  * 
  * 
  * 
  * @param item
  *            FileItem, representa um arquivo que é enviado pelo formulario
  * 
  * MultiPart/Form-data
  * 
  * @throws IOException
  * 
  */

   private void inserirImagem(FileItem item) throws IOException {

           // Pega o diretório /logo dentro do diretório atual de onde a
           // aplicação está rodando
           String caminho = getServletContext().getRealPath("/upload")
                            + "/";
            // Cria o diretório caso ele não exista
           File diretorio = new File(caminho);
           if (!diretorio.exists()){
               diretorio.mkdir();
           }
           // Mandar o arquivo para o diretório informado
           String nome = item.getName();
           String arq[] = nome.split("\\\\");
           for (int i = 0; i < arq.length; i++) {
               nome = arq[i];
           }
           File file = new File(diretorio, nome);
           FileOutputStream output = new FileOutputStream(file);
           InputStream is = item.getInputStream();
           byte[] buffer = new byte[2048];
           int nLidos;
           while ((nLidos = is.read(buffer)) >= 0) {
               output.write(buffer, 0, nLidos);
           }
           output.flush();
           output.close();
   }
}

Bibliotecas necessárias para este exemplo:

1. commons-fileupload-1.2.jar


2. commons-io-1.3.2.jar

Podem ser encontradas neste link: Apache commons

Vale lembrar que este exemplo não realiza upload aqui pois não foi ativado um servlet para isto.

Abs

Grupo de discussão

Pessoal, criamos nosso grupo de discussão sobre Flex e web 2.0. Estaremos tirando dúvidas, discutindo soluções e trocando informações a respeito desta plataforma.

Caso você se interesse em participar, acesse http://groups.google.com/group/flex4you ou envie um email para flex4you@googlegroups.com.

Palestra web 2.0

Dia 03 de outubro será realizada no auditório da Oracle nossa palestra de web 2.0. Estão convidados todos os desenvolvedores web baseados na plataforma Java EE, webdesginers, gerentes de projeto e todos os envolvidos neste tipo de tecnologia.

Assuntos abordados:

1. Usabilidade


2. Acessibilidade


3. Conceitos


4. Frameworks e tecnologias

Todos os interessados neste surpreendente tema estão convidados a participar, entrada franca.