Salve seguidores desse humilde blog.
Estou com um novo projeto de vídeo-aulas de flex 4.
Conto com a participação de vocês dando feedback para a melhora das próximas,
digam se gostaram, se acharam uma bosta, que eu to parecendo o darth vader,
enfim, poste um comentário.
Vídeo-Aula Flex 4 – Piloto from Alex Freitas on Vimeo.
Aproveitando o gancho de customização de Alert do post anterior, Alert customizado com CSS
Vamos inserir uma imagem ao Alert.
Altere a função em mainScirpt.as
protected function btnAlerta_clickHandler(event:MouseEvent):void {
Alert.show("Alerta com imagem", "Alerta", 4, this, null, iconSymbol);
}
Estamos definindo mais algumas propriedade do Alert, até então tinhamos apenas modificado text e title,
agora, a sequência é text, title, flags, parent, closeHandler e iconClass, a última especifica um ícone para exibir à esquerda do texto da mensagem na caixa de diálogo, definida na variável iconSymbol, segue o código.
[Embed(source="messagebox.png")] [Bindable] public var iconSymbol:Class;
Através de Embed, embutimos a imagem a uma classe, assim podendo ser adicionada ao Alert.
Resultado:
Link da imagem: Icon Finder
Até o próximo post.
Abraço.
Podemos customizar um Alert através de CSS, muito útil quando temos um layout já definido,
e precisamos adequar todas as instâncias de Alert a esse layout.
Essa é a cara do Alert padrão do Flex 3:
AlertCustomizado.mxml:
<?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" minWidth="955" minHeight="600"> <mx:Script source="mainScript.as"/> <mx:Button label="Alerta" x="10" y="10" id="btnAlerta" click="btnAlerta_clickHandler(event)"/> </mx:Application>
mainScript.as:
import mx.controls.Alert;
protected function btnAlerta_clickHandler(event:MouseEvent):void {
Alert.show("Alerta padrão", "Alerta");
}
Agora reparem que adicionando um tom verde ao plano de fundo, através da propriedade backgroundColor
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" minWidth="955" minHeight="600" backgroundColor="#089A5E">
O layout padrão do Alert não combina mais com o layout da aplicação, é aí que entra o CSS.
Altere o código de AlertCustomizado.mxml, adicionando uma chamada ao css, que definiremos no arquivo alert.css.
<?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" minWidth="955" minHeight="600" backgroundColor="#089A5E"> <mx:Script source="mainScript.as"/> <mx:Style source="alert.css"/> <mx:Button label="Alerta" x="10" y="10" id="btnAlerta" click="btnAlerta_clickHandler(event)"/> </mx:Application>
alert.css
Alert
{
font-size:14;
color : #0b333c;
header-height:19;
border-thickness: 1;
drop-shadow-enabled: true;
drop-shadow-color :#089A5E;
background-color: #ffffff;
corner-radius :0;
border-style :solid;
header-colors : #089A5E, #09e389;
footer-colors : #089A5E, #09e389;
border-color : #696969;
title-style-name : "alertTitle";
button-style-name: "alertButton";
}
.alertTitle
{
font-family :Verdana;
font-size :10;
font-weight :bold;
text-align :left;
color :#ffffff;
}
.alertButton
{
theme-color: #696969;
}
Com esse código todos os Alert’s emitidos pela aplicação terão essa cara:
Até a próxima.
Abraço.
Como este blog está há muito tempo sem atualizações, resolvi voltar fazendo um post sobre
um assunto bem legal, onde utilizaremos o serviço de tradução do Google para traduzir um texto
em inglês para português. Para isso faremos uso da classe HTTPService.
Utilizamos a classe HTTPService para representar um objeto HTTPService no ActionScript.
Quando você chamar o método send () do objeto HTTPService, ele faz uma solicitação HTTP para a
URL especificada e uma resposta HTTP é retornada. Opcionalmente, você pode passar parâmetros
para a URL especificada.
Abaixo o código mxml inicial:
<?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" backgroundGradientAlphas="[1.0, 1.0]" backgroundGradientColors="[#F4F4F4, #333333]"> <mx:Script source="script.as" /> <mx:VBox horizontalCenter="0" verticalCenter="0" horizontalAlign="center" verticalAlign="middle"> <mx:Image source="logo.png" /> <mx:TextArea width="500" height="100" id="ta_original" fontSize="14"/> <mx:TextArea width="500" height="100" id="ta_traducao" editable="false" fontSize="14"/> <mx:Button label="Traduzir" /> </mx:VBox> <mx:HTTPService id="servicoGoogleTradutor" /> </mx:Application>
Crie o arquivo ActionScript para as funções.
A função abaixo fará a requisição ao serviço.
public function servicoGoogleTradutorRequest():void {
/* Url do serviço de tradução do google */
var googleTranslateUrl:String = "http://ajax.googleapis.com/ajax/services/language/translate";
/* Aqui atribuimos ao HTTPService a url que ele fará a requisição */
servicoGoogleTradutor.url = googleTranslateUrl;
/* Configuração dos parâmetros do serviço */
/* Versão do serviço */
servicoGoogleTradutor.request.v = "1.0";
/* Passamos o texto da TextArea que contem o texto que será traduzido */
servicoGoogleTradutor.request.q = ta_original.text;
/* Códigos da linguagens texto em Inglês (en) para POrtuguês (pt) */
servicoGoogleTradutor.request.langpair = "en|pt";
/* Chamar o serviço */
servicoGoogleTradutor.send();
}
e na propriedade click do botão vinculamos a função acima.
<mx:Button label="Traduzir" click="servicoGoogleTradutorRequest()"/>
Em seguida criamos a função que irá receber e tratar o retorno,
que será um objeto JSON parecido com código abaixo:
{“responseData”: {“translatedText”:”texto traduzido”}, “responseDetails”: null, “responseStatus”: 200}
para exibir apenas o texto podemos utilizar a classe JSON da biblioteca as3corelib que pode ser baixada aqui.
import mx.rpc.events.ResultEvent;
import com.adobe.serialization.json.JSON;
public function servicoGoogleTradutorResult(event:ResultEvent):void {
var result:String = event.result.toString();
if( JSON.decode( result ).responseData.translatedText != null ){
ta_traducao.htmlText = JSON.decode( result ).responseData.translatedText;
} else {
Alert.show( "Não foi possível realizar a tradução!");
}
}
Para eventuais erros na requisição do serviço, criamos mais uma função para dar um “Alert” da mensagem.
import mx.rpc.events.FaultEvent;
import mx.controls.Alert;
public function servicoGoogleTradutorFault(event:FaultEvent):void {
Alert.show( "ERROR:\n" + event.fault.faultString );
}
E para finalizar vinculamos as funções ao componenete HTTPService.
<mx:HTTPService id="servicoGoogleTradutor" fault="servicoGoogleTradutorFault(event)" result="servicoGoogleTradutorResult(event)" />
Finish.
Se der tudo certo pode aparecer algo como isso:
Referência de classe para a API de tradução
Mais sobre HTTPService no Adobe Labs
Menu de Contexto, Menu Pop-up, Menuzinho que abre quando clicamos com o botão direito do
mouse e etc, isso tudo quer dizer a mesma coisa.
Nesse post mostrarei com adicionar uma opção no menu de contexto de uma aplicação Flex
utilizando as classes ContextMenu e ContextMenuItem.
Conteúdo do arquivo principal:
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"
creationComplete="addContextMenuItems()" contextMenu="{cm}">
<mx:Script source="script.as" />
</mx:Application>
Conteúdo do arquivo de script:
import flash.net.navigateToURL;
//Váriavel do tipo ContextMenu "Bindable", ou seja, atrelada a um componente
//nesse caso a própria aplicação na propriedade contextMenu, observe a tag Application.
[Bindable] private var cm:ContextMenu;
private function addContextMenuItems():void {
//Definimos a variável cm com o construtor padrão da classe ContextMenu
cm = new ContextMenu();
//Cria uma nova instância da classe ContextMenuItem, passando o texto a ser exibido e
//opcionalmente a criação do separador embaixo do item
var cmi:ContextMenuItem = new ContextMenuItem('Visite http://alexonflex.com',true);
//Ao usar a palavra adobe não é aceita, não ocorre erro porém,
//simplesmente o item não aparecerá no menu
var cmi02:ContextMenuItem = new ContextMenuItem('Acesse Adobe Labs',true);
var cmi03:ContextMenuItem = new ContextMenuItem('Acesse Adobi Labs',true);
//Adiciona ao item o evento que será chamado ao clicar no item no menu
cmi.addEventListener(ContextMenuEvent.MENU_ITEM_SELECT, cmiClickHandler);
cmi02.addEventListener(ContextMenuEvent.MENU_ITEM_SELECT, cmiClickHandler);
//Se este método não for invocado aparecerá no menu algumas opção do Flash
//como Quality, Play, Loop ...
cm.hideBuiltInItems();
//Adiciona o item ao menu de contexto
cm.customItems = [cmi, cmi02, cmi03];
}
private function cmiClickHandler(event:ContextMenuEvent):void {
//Dúvidas? http://alexonflex.com/2010/08/06/navegar-para-um-url-com-flex/
navigateToURL(new URLRequest("http://alexonflex.com"));
}
Se tudo der certo:
Obs.:
1 – Clique aqui para visualizar, no Adobe Labs, a lista completa de palavras reservadas.
2 – Os itens customizados aparecem quando você usa o botão direito do mouse, o que não ocorre quando usada a tecla de menu do teclado.
Vou aproveitar que hoje eu tô tomado no jiraya então tem mais post pra essa galera antenada com o flex e que apronta confusões de montão, como diria o narrador da sessão da tarde kkkkk.
Vou continuar trabalhando em cima do projeto do post Inserindo ícones em uma DataGrid com itemRenderer.
A primeira alteração é adicionar mais uma propriedade as tags clube no model.
<mx:Model id="modelPaulistas"> <clubes> <clube nome="Palmeiras" libertadores="true" quantidade="1" /> <clube nome="Santos" libertadores="true" quantidade="2" /> <clube nome="São Paulo" libertadores="true" quantidade="3" /> <clube nome="Corinthians" libertadores="false" quantidade="0" /> </clubes> </mx:Model>
Em seguida adicionamos a datagrid a propreidade editable=”true” para que as células possam ser editadas,
por padrão editable é false.
<mx:DataGrid x="10" y="10" dataProvider="{modelPaulistas.clube}" editable="true">
Também temos que determinar quais as colunas que terão suas células editáveis, setando editable igual a true ou false, no caso precisamos apenas que uma coluna seja editável, a de quantidade.
<mx:DataGridColumn editable="true" headerText="Quantidade" dataField="quantidade" editorDataField="value"/>
Neste momento já possível editar o conteúdo da célula, no modo normal a célula é um Text e quando em foco a célula se torna um TextInput, mas pode ser alterado e é aí que entra o a propriedade itemEditor, através dela podemos setar o componente que será utilizado na hora da edição, podendo ser: Label, Button, Combobox, Checkbox, NumericStepper, DateField, Image, TextArea.
Como estamos lidando com números pequenos, o NumericStepper é o mais adequado.
<mx:DataGridColumn editable="true" headerText="Quantidade" dataField="quantidade" editorDataField="value"> <mx:itemEditor> <mx:Component> <mx:NumericStepper/> </mx:Component> </mx:itemEditor> </mx:DataGridColumn>
Mais sobre NumericStepper no Adobe Livedocs.
Dando continuidade ao post Inserindo ícones em uma DataGrid com itemRenderer, mostro como utilizar o itemRenderer de outra forma, no flex existem muitas possibilidades de se chegar a um objetivo, pra descobrir a melhor forma de empregar cada solução, vai ter que programar muito.
Em meio as minhas pesquisas descobri essa forma de itemRender inline, ou seja, inserido na própria DataGridColumn, sem a necessidade de criação de outro arquivo.
No outro post, eu usei como itemRenderer um componente externo, dataGridIcons.mxml, referenciado na propriedade itemRenderer, para exibir uma imagem associada a propriedade libertadores.
<mx:DataGridColumn headerText="Libertadores" itemRenderer="dataGridIcons"/>
Na coluna clube podemos associar uma imagem ao nome do time utilizando o itemRender inline como abaixo:
<!--
Abaixo a estrutura básica da DataGridColumn com itemRenderer, os elementos
dentro da tag mx:Component tem o mesmo comportamento de um arquivo
externo, onde podemos acessar os dados da DataGrid através do objeto data.
-->
<mx:DataGridColumn headerText="Clube" dataField="nome">
<mx:itemRenderer>
<mx:Component>
<mx:VBox horizontalAlign="center">
<mx:Image id="imgIcon" toolTip="{data.nome}"
source="icons/{data.nome}.png"
width="32" height="32"
scaleContent="true" maintainAspectRatio="false"/>
</mx:VBox>
</mx:Component>
</mx:itemRenderer>
</mx:DataGridColumn>
Resultado:
Créditos pelo ícones: VeryIcon
Para abrir uma página em uma nova janela ou simplesmente redirecionar a página utilizamos o método navigateToURL(urlRequest), onde urlRequest é uma variável do tipo URLRequest que recebe uma string e retorna um objeto aceito pelo navigateToURL.
Usando o mesmo código no post anterior, você pode fazer o teste adicionando a Label o código abaixo.
click="navigateToURL(new URLRequest('http://alexonflex.com'))"
O código abaixo mostra como alterar o cursor do mouse em Flex utilizando a classe
CursorManager, seu método setCursor(class), onde class é uma variável
que contém uma imagem embutida, e também o método removeAllCursors() utilizado
para o cursor voltar a ser o do sistema operacional.
<?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"> <mx:Script> <![CDATA[ import mx.managers.CursorManager; import mx.controls.Alert; /* A metadata [Embed] importa arquivos JPEG, GIF, PNG, SVG e SWF em tempo de compilação. Também importa imgens de um arquivo SWC. Obs.:Isso faz com que a imagem fique incorporada a sua Aplicação Flex ou AIR. */ [Embed(source="url.png")]public var urlIcon:Class; ]]> </mx:Script> <mx:Label x="10" y="10" fontSize="18" id="lbl" toolTip="http://alexonflex.com" text="Alex on Flex" mouseOver="CursorManager.setCursor(urlIcon)" mouseOut="CursorManager.removeAllCursors()" /> </mx:Application>
Neste post, mostro como inserir ícones em uma DataGrid, algo muito útil em DataGrids
onde há funções para o usuário editar e excluir registros.
Deixe o código do seu arquivo .mxml principal como o código abaixo:
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
<!--
Utilizo a tag mx:Model para definir a estrutura de dados que populará a DataGrid.
A tag mx:Model define um objeto(Object) utilizando uma estrutura xml.
Ao atribuir um id a tag model podemos refericiar os dados usando ponto(.).
Exemplo:Para visualizar o nome dos times, use modelPaulistas.clube.nome.
Obs.:A tag raiz da estrutura, <clubes>, não é utlizada na referência.
-->
<mx:Model id="modelPaulistas">
<clubes>
<clube nome="Palmeiras" libertadores="true" />
<clube nome="Santos" libertadores="true" />
<clube nome="São Paulo" libertadores="true" />
<clube nome="Corinthians" libertadores="false" />
</clubes>
</mx:Model>
<!--
Definimos como dataProvider(provedor de dados) da DataGrid, a tag model acima da seguinte forma:
dataProvider="{id.tag_que_se_repete}";
obs.:as chaves são para fazer o binding dos objetos, quando houver qualquer alteração no model,
a dataGrid será atualizada.
Nas colunas da dataGrid definimos qual atributo do model será exibido através da propridade
dataField, apenas atribuindo o nome da propriedade do objeto model.
Na coluna Libertadores, através da propriedade itemRenderer, faço referência a um outro arquivo(classe)
mxml, para cada item da dataGrid, o aquivo será invocado.
-->
<mx:DataGrid x="10" y="10" dataProvider="{modelPaulistas.clube}">
<mx:columns>
<mx:DataGridColumn headerText="Clube" dataField="nome"/>
<mx:DataGridColumn headerText="Libertadores" itemRenderer="dataGridIcons"/>
</mx:columns>
</mx:DataGrid>
</mx:Application>
Crie um novo MXML Component chamado dataGridIcons, based on HBox e 0 para width e Height.
e deixe o seu código como o código abaixo:
<?xml version="1.0" encoding="utf-8"?>
<mx:HBox xmlns:mx="http://www.adobe.com/2006/mxml" horizontalAlign="center">
<!--
Para cada item da dataGrid esse arquivo(classe) será invocado,
ao ser invocado é passado um objeto, data, onde é possível acessar os
dados da classe que o invocou, nesse caso a dataGridColumn.
Na propriedade source da tag Image, fiz um operador ternário, equivalente a um if-else,
onde se liberdadores for true exibe a imagem checked.png, senão exibe notChecked.png.
-->
<mx:Image source="{data.libertadores ? 'checked.png' : 'notChecked.png'}" />
</mx:HBox>
IT Web
Alex on Flex 