Tweeter button
Facebook button
mai
05

Flex: Alert com Link HTML

Olá pessoal, como estão?
Hoje iremos aprender a inserir um link HTML dentro de um alert.
Recurso bastante útil quando desejamos forçar opcionalmente o usuário a acessar determinado link.

Vamos lá..
ActionScript:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

import mx.controls.Alert;
import mx.core.mx_internal;
 
/* Nesta primeira função temos um simples alert utilizando o modo convencional de mensagem,
o link sairá escrito por inteiro, sem a opção de ser clicado. */
 
private function chamandoLinkNormal():void
{
    var link:String = "http://www.vilourenco.com.br";
    var texto:String = "Observe o link neste exemplo: " + link;
    Alert.show(texto);
}
 
/* Observe que nesta segunda função fazemos uso do namespace mx_internal, onde na última linha indicamos
o tratamento da varíavel tipo string "texto" para a varíavel "a" que passa a intepretar os parâmetros HTML.*/
 
private function chamandoLinkHtml():void
{
    var link:String = "http://www.vilourenco.com.br";
    var texto:String = "Observe o link novamente: <u><a href='" + link + "' target='_blank'>Acesse!</a></u>";
 
    var a:Alert = Alert.show(texto);
    a.mx_internal::alertForm.mx_internal::textField.htmlText = texto;
}

E o panel, com os botões dentro, que estão chamando as funções.
MXML:

1
2
3
4

<mx:Panel x="125" y="93" width="250" height="200" layout="absolute" title="Botões">
    <mx:Button label="Alerta com link normal" click="chamandoLinkNormal()"  x="38" y="38"/>
    <mx:Button label="Alerta com link HTML" click="chamandoLinkHtml()" x="38" y="85" width="155"/>
</mx:Panel>

Vejam o exemplo.
Espero que tenham gostado, e por favor, caso haja alguma dúvida, entre em contato.
Abraços!

abr
21

Flex: Utilizando o Recurso Drag and Drop

Olá Pessoal..
Hoje vou mostrar o exemplo de um simples drag and drop.
Fantástico, pois é um recurso bastante útil, muito legal visualmente e que neste caso possui menos de 30 linhas de código.
Detalharei mais a explicação nas propriedades, o código está com uma explicação muito simples, mais caso você tenha dúvidas ou queira mais detalhamento na explicação, entre em contato comigo.

Neste exemplo, utilizaremos apenas MXML.
Veja o código, e logo abaixo a explicação das propriedades utilizadas.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="horizontal" verticalAlign="middle" width="500" height="400" viewSourceURL="srcview/index.html">
      <mx:Style source="css/style.css"/> 
 
       <!-- 
       Realmente, muito simples, temos duas listas e dentro de cada, respectivamente, um array recheado com os dados.
       !-->
 
    <mx:List allowMultipleSelection="true" dropEnabled="true" dragEnabled="true" dragMoveEnabled="true" width="82">
        <mx:Array>
            <mx:String>Flex</mx:String>
            <mx:String>ColdFusion</mx:String>
            <mx:String>Photoshop</mx:String>
            <mx:String>Fireworks</mx:String>
        </mx:Array>
    </mx:List>
 
    <mx:Label text="Arraste entre as listas." color="#000000"/>
 
    <mx:List allowMultipleSelection="true" dropEnabled="true" dragEnabled="true" dragMoveEnabled="true" width="82">
        <mx:Array>
            <mx:String>Dreamweaver</mx:String>
            <mx:String>Illustrator</mx:String>
            <mx:String>InDesign</mx:String>
        </mx:Array>
    </mx:List>
 
</mx:Application>

Propriedades:

allowMultipleSelection: Permite mover mais de 1 opção, tanto internamente quanto movendo para outra(s) lista(s).
dropEnabled: Permite “receber” dados vindo de outra(s) lista(s).
dragEnabled: Permite “arrastar” dados para outra(s) lista(s).
dragMoveEnabled: Permite mudar de ordem as informações dentro da lista, e quando “false” realiza uma cópia da opção selecionada.

Veja o exemplo.

Em outros posts teremos exemplos com imagens e mais recursos.
Bons estudos!
Abraços

abr
18

Flex: Comunicação entre a Aplicação e o Navegador

Hi everybody!
Bom, o post de hoje pode não ser lá muito útil, mais acredite, é do tipo de coisa que você as vezes pode precisar de emergência, última hora e ter dificuldades em achar algo explicando, dando uma luz e etc..
Sei muito bem disto, pois dia destes precisei chamar uma pop-up a partir da aplicação, que tinha como destino uma página externa em PHP.
(Explicarei em outro Post como fazer isto.)

Hoje iremos ver como realizar uma chamada em JavaScript apartir do Flex, exibindo o nosso famoso Alert.
É muito simples..

Mãos na massa:

Arquivo MXML:

1
2
3
4
5
6
7
8
9
10
11

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" width="500" height="400">
 
    <!-- 
 
    Veja que no evento click, temos a class ExternalInterface, que utiliza o método Call para se comunicar com o navegador, e neste método
    chamamos a função (de nome: Alerta) que está no arquivo HTML e também passamos os parâmetros (frase).
 
    -->
    <mx:Button x="178" y="173" label="Clique aqui!" width="144" click="ExternalInterface.call('Alerta','Este é um alert em JavaScript disparado pelo Flex')"/>
 
</mx:Application>

E no arquivo HTML (index.template.html) colocamos uma simples função JavaScript:

1
2
3
4
5
6
7

<script language="javascript">
 
    // Função que exibe o alert, passando e exibindo os parâmetros trazidos do Flex.
    function Alerta(mensg){
        alert(mensg);
    }
</script>

Vejam o exemplo.

É isso aí pessoal, espero que seja de utilidade para vocês.
Abraços!!

abr
10

Porque desenvolver com Flex?

Olá pessoal,

Bom, esse post é pra dar mais um motivo para você gostar mais ainda de desenvolver em Flex, e também para que quem estiver iniciando no framework, não tenha dúvidas de seus benefícios.

Logo que converso com alguém que acabo de conhecer e que trabalha e/ou estuda na área, pergunto:
“Você conhece o Flex“?
Resposta:
“Não, não seria Flash“?
Inclusive, foi essa a resposta que dei quando me perguntaram a mesma coisa!
No entanto a sua popularidade está subindo, no início do ano passado quando o conhecí e comecei a procurar a respeito, era um pouco mais difícil ver pessoas comentando e blogs nacionais.

Bom, a tendência, que inclusive já podemos observar é que o conceito R.I.A está crescendo e o nosso bom e querido Flex elevando-se em sua popularidade.
E ao entrar no encantado universo R.I.A, você tem 2 poderosas ferramentas de criação:

  • Silverlight (Microsoft)
  • Flex – Atualmente Flash Builder (Adobe)

Optei por escolher o Flex, o que devo saber para dar início ao desenvolvimento de aplicações?
Simples:

1°: Gostar, é a principal motivação, não apenas para programar no Flex, mais também para qualquer coisa em nossas vidas.
2°: Ser curioso, o que é ser curioso? É ir atrás, é estudar, é focar, é querer aprender sempre mais, é dominar a ferramenta.
3°: Praticar, praticar, praticar.. ah, e praticar.

Não estavam nada errados quando disseram que a prática leva a perfeição.
Agora vamos lá, o que o desenvolvimento em Flex especificamente me tráz de benefícios?

Você pode desenvolver aplicações Web, e também aplicações desktop, utilizando o AIR, rápida explicação: No Flex, ao iniciar um projeto, podemos escolher a opção do mesmo ser para Desktop, com a mesma estrutura de desenvolvimento que para web, com alguns parâmetros adicionais, como instalação, permissões, ícones, extensões e etc.. Mais falaremos do AIR em post’s futuros.

Compatibilidade: Quem trabalha com HTML, JS, CSS sabe que SEMPRE vai ter um navegador que vai apresentar algo incomum no que foi desenvolvido, eu sei e muito bem o que é isso, principalmente quando o prazo já tá em cima, e você tem que puxar mais algumas linhas de código para o navegador X ler, ou então criar páginas condicionais de CSS para cada tipo de browser, hoje em dia 98% dos computadores possuem Flash Player instalado, ou seja, com o Flex você não terá incompatibilidade em suas aplicações.

Interação com o Usuário: É possível interagir fortemente com o usuário, existem uma série de componentes, uma série de funcionalidades, e uma massa de aproximadamente 1,4 kg localizada dentro do crânio de quem está na frente do computador extremamente potente. Aliados fazem maravilhas.

Facilidade: Você não encontrará dificuldades em aprender a desenvolver em Flex, muito pelo contrário, a curva de aprendizado, vamos dizer assim que não existem grandes ondulações. Você irá aprender MXML que é a linguagem própria do Flex, para componentes, states e etc, ActionScript 3 para a lógica da aplicação, e se você já souber alguma linguagem server-side (PHP e ColdFusion por exemplo) pronto, você está com a faca e o Flex na mão.
E ainda tem a opção de visualização modo Design que permite montar o layout de sua aplicação clicando e arrastando componentes.
Temos mais, lembrado por Daniel Schmitz:
Outra qualidade muito boa do Flex é a velocidade (+facilidade) de acesso através do protocolo AMF3, que faz uma comunicação binária de dados entre o flex e o servidor. No caso do PHP, existem dois produtos gratuitos que proveêm esta comunicação. São eles: o AMFPHP e o Zend_AMF.

Mercado: Promissor! Cada dia vejo mais vagas para desenvolvedores Flex, temos agora a sua versão 4 (Flash Builder) que chegou com muitos recursos novos e mais facilidades comparado a versão 3, e sem dúvidas, o mercado precisará de bons desenvolvedores, essa é a hora de nós ‘somosdevs’ adquirimos o máximo que pudermos, só temos a ganhar.

Agora se você está se perguntando, poxa, quero aprender, por onde começar?
Hoje é fácil começar, procurar e achar.

Na Internet temos blogs com tutoriais, screencasts e etc, ótimos desenvolvedores que repassam seus conhecimentos para o pessoal, navegue na lista de links ao lado esquerdo do blog e você os encontrará, e também existem muitos que ainda não estão aí, mais que irei colocá-los.
Aqui também você vai encontrar bastante coisa, tanto técnica, quanto conceitos, dicas e etc..

A Adobe disponibiliza vídeos, documentação, uma série de fontes de informações, e vindas direto de ninguém menos que os fabricantes, ótimo para se aprender. (Em Inglês)

Livros, nosso amigo Daniel Schmitz, autor de 3 ótimos livros para o Flex na versão 3, já está escrevendo: Dominando Flex 4 que possui previsão de lançamento agora em Julho.

Cursos, se quiser acelerar ao máximo seu aprendizado, junte uma grana e faça, não irá se arrepender.

E atenção: Flex é para desenvolvimento de sistemas, não de sites!
Espero que tenham gostado do post!!

Forte abraço e um ótimo final de semana!

Go back to top