Flex – o meu Hello World

Por vários motivos, comecei a dar uma olhada em Flex, o framework da Adobe para criação de RIAs (Rich Internet Application) baseado no Flash.

Nunca me atrevi a abrir um .fla na minha vida; pelo pouco que conheci do Flash na épcoa do action script 1 e 2, achei que era muito confuso para o resultado final, e que o AS1 e 2 eram voltados a designers (nada contra) que precisavam de poucos recursos nos seus swfs. Por isso que quando saiu o action script 3 eu já fiquei mais animado, pois ele estava muito melhor estruturado, com pacotes de componentes melhor divididos, boa orientação a objetos (e seus paradigmas), documentação online

Quem já trabalhou com qualquer linguagem orientada a eventos (VB, Delphi, C++ Builder) se sente muito confortável, e quem está acostumado a OO só tem o trabalho de descobrir as features do framework. A SDK pode ser baixada livremente.
A Adobe comercializa o Adobe Flex Builder, que permite uma maior facilidade na implementação das interfaces.

Eu não baixei pois queria trabalhar direto no mxml, que é o formato (uma espécie de xml) concebido para os arquivos onde são escritos os códigos de um projeto Flex.

Basicamente, os passos para um Hello World – algo simples – são, além de ter a SDK do Flex na sua máquina, criar o .mxml e compilar o mesmo, para gerar o swf.

O mxml ficou da seguinte forma (pode fazer download aqui):

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" xmlns:explorer="*"
    width="100%" height="100%" pageTitle="Hello World">
   
    <mx:HDividedBox width="100%" height="100%">
        <mx:Text>
            <mx:text>Olá Mundo!</mx:text>
        </mx:Text>
    </mx:HDividedBox>
   
</mx:Application>

Application é o nó pai do documento, seria como no html a tag <html>. Nele, digo que o swf gerado terá largura e altura de 100%.

Então insiro um objeto HDividedBox, que insere uma divisão horizontal nela, e dentro dela uma área de texto (Text).

Com isso, é só salvar (salvei como hello.mxml) e compilar o mesmo, com o comando

../bin/mxmlc -use-network=false hello.mxml

*aponte ../bin para a pasta bin que fica dentro da SDK do Flex da sua máquina.

O swf gerado foi esse aqui

O que achei do Flex? A vantagem é a facilidade na componentização de elementos da interface, com uma qualidade gráfica que CSS/javascript não alcançam com facilidade.

PDO – classe para acesso a diversos tipos de banco de dados

Quando comecei a programar em PHP, aprendi como fazer requisições a banco de dados MySQL usando as funções nativas do PHP (mysql_connect(), mysql_query(), etc…), as chamadas MySQL Functions.

Muito se passou, o PHP estava na versão 3, e hoje em dia está na 5 (quando sai a 6, mesmo?!?!). Muitas coisas mudaram, e o PHP possui agora características de Orientação a Objetos muito boas. E com isso foi possível criar uma interface simples e leve para acesso a banco de dados, chamada de PHP Data Object, ou PDO.
O que o PDO faz é ser um intermediador para que vocé possa acessar vários tipos de bases de dados (MySQL, PostGree, Firebird, SQL Server, Oracle, etc…) com a mesma sintaxe, alterando apenas o driver usado na conexão. Ou seja, não é ele quem faz a conversa com a base de dados; ele procura quem é que vai conversar com aquele tipo de base de dados.

Um exemplo prático de insert em uma tabela de um banco MySQL:

<?php
$fullName = $_POST["fullName"];
$childrensName = $_POST["childrensName"];
$age = $_POST["age"];
$cpf = $_POST["cpf"];
$hobbies = $_POST["fullName"];

$db = new PDO("mysql:host=localhost;dbname=mydb", admin", "root");
$stmt = $db->prepare("INSERT INTO user (fullName, childrensName, age, cpf, hobbies) VALUES ("$fullName","$childrensName","$age","$cpf","$hobbies")");
$stmt->execute();
?>

Se fosse necessário usar outro banco, por exemplo um Firebird, seria necesseario alterar apenas a linha que faz a instanciação do objeto PDO, usando o driver adequado.

Esse texto não visa ser um tutorial de como usar, mas sim uma apresentação dessa classe muito útil e, certamente, elegante!

http://br.php.net/manual/en/book.pdo.php

Não programe isso!

Meu primeiro contato profissional com desenvolvimento server-side  foi em 2004, quando comecei a trabalhar como estagiário em uma agência de design, onde aprendi muito sobre clientes, gráficas, prazos e internet.

Eu já havia “programado” em PHP, na verdade tudo o que eu tinha feito foi um CMS bem meia boca para um blog, com um sistema de comentários. Nunca gostei do blogger e na época não conhecia o WordPress (ele existia em 2002?).

E eu aprendi errado. Aprendi a programar com um designer, não com um desenvolvedor “de verdade”. Faltava conhecimento técnico para quem me ensinou e eu mal tinha noção da vida, quem dirá de se preocupar com fazer um script correto. Funcionou? Beleza, deixa. Essa é a ética POG.

 

 

Hey, antes de ler saiba que…

Esse texto é FOR DUMMIES. Ou um bom exemplo de piada para desenvolvedores mais experientes. É um pouco da minha experiência desde que comecei a programar. Apresento aqui um caso de script BIZARRO, e comento sobre os problemas dele e suas gambiarra.

Se você é ninja pode achar um desperdício do seu precioso tempo continuar a leitura, então recomendo que você vá para a Home e procure algo do seu nível.

Ou continue a leitura e se mije de rir.

 

 

Boas soluções lógicas porém debilidade técnica, eis é a fórmula da gambiarra.

Ontem, quando comecei a desenvolver o novo blog do And After (antecipo que o novo blog será sobre Arquitetura de Informação, com uma galerinha que manja muito! 😀 ) fui dar uma olhada em uns script antigos, desenvolvidos na época do meu estágio, e isso me levou a escrever este artigo.

Ah, e antes que me acusem: eu defendo o estágio, e aprendi muito quando o fiz.

Leia outros artigos sobre estágio:

Estágio é só exploração?

Na vida de um estagiário… (vídeo)

 

Encontrei uma SUPER GAMBIARRA em um script de paginação (ASP) que era utilizado na empresa que eu trabalhava. Vou repetir: SUPER GAMBIARRA. POG de mestre em POG.

 Gambiarra

Isso é uma gambiarra.

 

Vamos lá, como NÃO fazer um script de paginação:

A primeira coisa que precisamos para fazer uma paginação é saber o total de dados e quantos dados vamos exibir em cada página, correto? E já neste início está a gambiarra que eu quero apresentar, para quem está começando jamais utilizar.

 

Gambiarra?

Não faça isso também.

 

Primeiro, cria-se uma consulta no banco para pegar todos os dados, aí está o primeiro problema. Uma consulta extensa e inútil.

set rs = conntemp.execute("SELECT * FROM imoveis WHERE aprovado = 1 ORDER BY data desc")

Agora vamos ver qual o total dos resultados, par saber quantas páginas iremos criar, veja só o que não fazer.

max= 10
total = 0

do while not rs.eof
                total = total + 1
                rs.movenext
loop




Na época mesmo sem entender NADA eu pensei: tem que ter um comando para contar as linhas de uma consulta. E óbvio, isso existe.

Bom, vou pular a parte normal do código e partir para a próxima gambiarra. Vou chamar essa consulta de todos os dados de super consulta. Nunca use uma super consulta. É desnecessário. Se estava na página 1, o script era o seguinte para exibir os dados:

For x = 1 to max

Response.write rs(“dados”)
rs.movenext

next

Onde max é a variável que define o número de itens exibido por página. Achou ridículo? Calma, tem mais.

Se o usuário vai para a página 3, já imaginou como é feito? Isso mesmo, a consulta com todos os resultados continua e calcula se quantos movenext serão necessários para chegar na linha desejada. Veja como fica esta obra de arte POG:

for z = 1 to pagina

                for dado = 1 to max

                               if not rs.eof then

                               rs.movenext

                               end if

                next

next

O que esta gambiarra faz? Se você está na página 3, o script por três vezes repete o comando movenext por 10 vezes (a variável max). Depois disso, repete-se o loop do max, para exibir os itens.

Se você não entendeu porque isso é prejudicial (você é noob), vamos lá, vou falar um pouco de otimização.

 

Explicando os problemas

 

Problema #1 – A super consulta

Não precisa ser nenhum gênio para pelo menos imaginar que diversas consultas no banco de dados prejudicam o desempenho de um script. A super consulta pode ter como resultado 9 linhas como 999.234.765 linhas. E você vai usar apenas 10 destas linhas.

Outra coisa muito comum (para quem desenvolve aplicações pequenas e não tem conhecimento técnico) é utilizar o SELECT * FROM. Exemplo, você faz a pesquisa que resulta em 9 colunas por linha. E você precisa apenas de duas, nome e ID.

Solução #1

Retorne os resultados com apenas com os dados que precisa, utilize o comando LIMIT sempre!

Se você vai utilizar somente os 10 primeiros resultados e quer apenas o a coluna ID e o NOME utilize a seguinte consulta:

SELECT id,nome FROM tabela LIMIT 10

 

Problema #2 – A contagem das linhas

Ficar percorrendo todas as linhas de uma consulta e criar um contato estilo  x = x+1 definitivamente não é uma boa opção. Na verdade não deveria nem ser considerado uma opção.

Solução #2

Como contar as linhas sem utilizer a SUPER CONSULTA? Simples, pequeno gafanhoto.

Utilize o comando COUNT, veja o exemplo abaixo.

SELECT count(ID) as total FROM tabela

Fazendo isso você utiliza o total como umas coluna da tabela, por exemplo:

total = rs(“total”)

 

Problema #3 – Chegar na linha desejada

Tudo bem, você conseguiu fazer a consulta e pegar o valor total, se a página for a 1 você utiliza o LIMIT, mas quando a página for maior que 1 não tem jeito, você vai utilizar a SUPER CONSULTA e contar os movenext, certo?

NOT!

Nada de SUPER CONSULTA, jamais nesta vida.

Solução #3

Para chegar na linha desejada utilizaremos novamente o comando LIMIT, suponto que você está na página 3 e o máximo de itens exibidos por página é 10. Você precisa pegar da linha 21 até a 30. Sua consulta:

SELECT id,nome FROM tabela LIMIT 21,10

Simples assim, o LIMIT pode não somente limitar o número de resultados, utilizando o formato acima ele seleciona exatamente quais linhas serão resultados da consulta.

 

Conclusão

Jamais confiem em um designer programando server-side.

Brincadeira! 🙂

Sou formado em design e está fazendo 5 anos que programo em ASP (clássico). Sim, ASP clássico, eu sei, estou OLD e já passou da hora de me atualizar.

Mas meus códigos de hoje são limpos, são orientados não por uma pessoa, mas por fóruns, blogs e muitas Googleadas. Este ano comecei a estudar .NET (estou começando, na verdade 🙂), li artigos e um livro de SCRUM, testei scrum solo. Acompanho blogs de desenvolvimento, ano passado comecei a estudar mais a fundo javascript (e jQuery). Ah, fiz um pequeno framework para desenvolver as intranets de meus clientes, está funcionando bem, de forma modular, permitindo diferentes configurações. Além do aprendizado (javascript, ASP, SQL) depois um BOM tempo com o aprendizado comecei a utilizá-la para meus clientes, o retorno financeiro começou no final do ano passado.

O que eu quero dizer é: estude. Estude muito.

Duvidem do código que estão vendo. Duvidem da primeira solução que encontrar.

Se tiverem oportunidade participem de um projeto de porte médio ou grande, ou façam um teste de carga em seus scripts. Gambiarra só “funciona bem” em aplicações pequenas, pois guando o bicho pega vai tudo pro pau.

Estude.

Leia metodologias, baixe scripts, teste soluções novas para problemas antigos.

Aprenda a economizar consultas ao banco de dados.

Aprenda a utilizar cache. Invente um modelo de cache. Mas não gambiarras.

Estudem.

E claro, assinem o FEED do O Desenvolvedor, pois o Chris Benseler manda muito bem. E ele não é um designer metido a programador como eu. 🙂

 

 


 

Atenção 2

Jamais utilize os códigos que estão em VERMELHO neste artigo. Se você fizer isso provavelmente você perderá o emprego. A honra. E sua conta naquele fórum bacana de desenvolvimento que você participa.

Adicionar método de truncar texto em javascript a classe String

O Danilo (do Tidbits) aproveitou a idéia do Igor em fazer um truncate de strings no PHP e fez uma função no javascript para isso – você passa a string e o limite de caracteres, se o tamanho dela for maior do que esse limite, ela corta e coloca três pontos no final.

Resolvi usar essa função do Daniel para adicionar um método de truncar ao objeto String do javascript. Com isso, ao invés de chamar a função passando o texto e o limite de caracteres, é só chamar o método passando o limite:

minhaString.truncar(limite);

Vamos à implementação, já com o exemplo de uso:

<html>
<head>
    <title>Truncar – javascript</title>
    <script type="text/javascript">
        /*
        adaptação da função truncar() feita pelo Danilo do Tidbits,
        adicionando-a a classe String
        Função original: http://www.tidbits.com.br/truncar-texto-em-javascript-abreviar-sem-cortar-palavras
        */
        String.prototype.truncar = function(limite){
            if(!limite)
                throw "Limite não informado";
            if(this.toString().length>limite){
                limite–;
                last = texto.substr(limite-1,1);
                while(last!=" " && limite > 0){
                    limite–;
                    last = texto.substr(limite-1,1);
                }
                last = texto.substr(limite-2,1);
                if(last == "," || last == ";"  || last == ":"){
                     texto = texto.substr(0,limite-2) + "…";
                } else if(last == "." || last == "?" || last == "!"){
                     texto = texto.substr(0,limite-1);
                } else {
                     texto = texto.substr(0,limite-1) + "…";
                }
            }
            return texto;
        }


        var texto = "Meu texto";
        alert(texto.truncar(5));

    </script>
<body>
   
</body>
</head>
</html>

Zoom em imagem por javascript

Vou mostrar como fazer um zoom em uma imagem usando javascript, usando um slider para controlar.

O mesmo pode ser visto funcionando aqui!

No caso, utilizei o framework script.aculo.us para criar o slider – mas a lógica vale para qualquer outra biblioteca javascript.

Vamos num passo-a-passo

Inseri no html uma imagem:

<img src="img2.png" alt="imagem" id="zoomImg" />

Depois de ter o script.aculo.us, é feito o include dele e da prototype (ela é usada pela engine do script.aculo.us)

<script src="scriptaculous/lib/prototype.js" type="text/javascript"></script>
<script src="scriptaculous/src/scriptaculous.js" type="text/javascript"></script>

No html, deve ser criada uma div com outra dentro. A pai será a área por onde o slider poderá correr, e a filha, o slider propriamente deito:

<div id="square_slider" class="slider">
    <div id="square_slider_handle"></div>
</div>

No CSS, formato o layout das mesmas, imaginando que será um slider vertical:

<style type="text/css">
        div.slider { width:10px; margin:10px 0; background-color:#ccc; height:100px; position: absolute; top:20px; left:20px; z-index:10000000000;}
        div.slider div { width:10px; height:15px; background-color:#f00; cursor:move; position: absolute; }
</style>

O próximo passo é criar o comportamento do slider. Isso é feito usando a classe Control (implementada pelo script.aculo.us), que possui um método Slider o qual cria o comportamento do slider. A documentação é bem complexa, por isso vou me ater a essa implementação.
Nesse caso, crio uma área de slider (div id="square_slider") cujo slider é controlado pelo elemento div id="square_slider_handle".
Para esse slider, passo as seguintes parametrizações:

  • range: valor mínimo e máximo da área de slide
  • slidervalues: valor mínimo e máximo em que o slider pode percorrer
  • axis: direção do slider
  • onChange: função que é chamada quando o usuário acaba de fazer o slide

No caso, digo que é um slider que varia de valores entre 20 e 100, com os mesmos valores máximos, vertical. A função no onChange é onde faço o cálculo. Essa função recebe como parâmetro o valor onde o slide foi solto. Com isso, calculo uma relação (ratio) entre o valor do slide e um valor base (no caso, 600, que é a largura da imagem).

var square_slider = new Control.Slider("square_slider_handle", "square_slider", {
             range: $R(20, 100),
             values: $R(20, 100),
             sliderValue: [100],
             axis: "vertical",
             onChange: function(value) {
                 //divide o valor por 100 para achar a taxa de zoom
                 var ratio = value/100;
                 /*
                 multiplica a largura da imagem pelo inverso do ratio
                 Observação: o valor de width é a base usada para cálculo; no exemplo, é o tamanho original da imagem                   
                 */
                 var width = 600;
                 $("zoomImg").setStyle({width: Math.round(width/ratio) + "px"});
             }
         });

Você pode fazer download do pacote completo, funcional 🙂

Abaixo, segue o html inteiro da página, para visualização

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
    <title>Slider</title>
    <meta content="text/html; charset=UTF-8" http-equiv="Content-Type" />
    <script src="scriptaculous/lib/prototype.js" type="text/javascript"></script>
    <script src="scriptaculous/src/scriptaculous.js" type="text/javascript"></script>
    <style type="text/css">
        div.slider { width:10px; margin:10px 0; background-color:#ccc; height:100px; position: absolute; top:20px; left:20px; z-index:10000000000;}
        div.slider div { width:10px; height:15px; background-color:#f00; cursor:move; position: absolute; }
    </style>
    <script type="text/javascript">
        window.onload = function() {
   
            var square_slider = new Control.Slider("square_slider_handle", "square_slider", {
                range: $R(20, 100),
                values: $R(20, 100),
                sliderValue: [100],
                axis: "vertical",
                onChange: function(value) {
                    //divide o valor por 100 para achar a taxa de zoom
                    var ratio = value/100;
                    /*
                    multiplica a largura da imagem pelo inverso do ratio
                    Observação: o valor de width é a base usada para cálculo; no exemplo, é o tamanho original da imagem                   
                    */
                    var width = 600;
                    $("zoomImg").setStyle({width: Math.round(width/ratio) + "px"});
                }
            });
        }
    </script>
</head>
<body>

<div id="square_slider" class="slider">
    <div id="square_slider_handle"></div>
</div>
<img src="img2.png" alt="imagem" id="zoomImg" />
</body>
</html>