WizIQ helps you learn and teach online - any subject you can think of!
Join for FREE

Flex Builder - Parte 5

Add to Favourites
Post to:
Comments
Presentation Transcript Presentation Transcript

Adobe Flex Builder 3 : Adobe Flex Builder 3 Claiton Luis Perin

Objetivos : Objetivos Ligar uma estrutura de dados a um Simple Control Usar Container Form

Modelo de Dados : Modelo de Dados Abra o arquivo index.mxml, e logo após a abertura da tag , insira o código abaixo: Ao atribui uma id a tag , podemos referenciar os dados usando a sintaxe: listaProdutos.preco.

Modelo de Dados : Modelo de Dados Retorne em modo Design no Flex Builder. Selecione o control Text dentro do state imagemDetalhada, e modifique a propriedade text para: OBSERVAÇÃO: O Data Binding é indicado pelas chaves {}. Toda vez que as chaves forem usadas, você usa o ActionScript ao invés de String´s simples. O DataBinding é extremamente poderoso porque o controle da UI será atualizado se a estrutura de dados mudar. Salve e rode a aolicação.

Modelo de Dados : Modelo de Dados O container Form automatiza muito do trabalho de rotinas. Com o Form você pode designar quais os campos são obrigatórios ou opcionais, manusear mensagens de erro e até fazer checagem dos dados. Um container Form usa três tags separadas, sendo elas: (Esta para cada Item no formulário)

Layouts de Simple Controls : Layouts de Simple Controls O container Form automatiza muito do trabalho de rotinas. Com o Form você pode designar quais os campos são obrigatórios ou opcionais, manusear mensagens de erro e até fazer checagem dos dados. Um container Form usa três tags separadas, sendo elas: (Esta para cada Item no formulário)

Layouts de Simple Controls : Layouts de Simple Controls Container Form Containers FormItem Componente FormHeading

Layouts de Simple Controls : Layouts de Simple Controls Abra o arquivo index3.mxml e adicione o código abaixo:

Layouts de Simple Controls : Layouts de Simple Controls Abaixo da tag , entre com o código abaixo:

Layouts de Simple Controls : Layouts de Simple Controls Após a última tag , adicione outra tag que exibirá dois itens em uma caixa horizontal: o primeiro é o caminho da imagem, e o segundo um botão para pesquisar o caminho da imagem. Seu código ficará como o listado abaixo:

Layouts de Simple Controls : Layouts de Simple Controls Adicione um bloco logo após a tag da aplicação. Importe a classe FileReference e depois crie uma função com o nome pesquisaArquivo.

Layouts de Simple Controls : Layouts de Simple Controls Retorne ao botão Browse e adicione um evento click que chamará o método pesquisaArquivo que escrevemos no último passo. Após a última tag , adicione outra tag que exibirá dois botões, um com o label atualiza e outro com o label apagar, em um HBox.

Layouts de Simple Controls : Layouts de Simple Controls Salve e rode a aplicação. Após feche o arquivo index3.mxml.

Adicionando Data Fields : Adicionando Data Fields Abra o arquivo index2.mxml e encontre a tag . Imediatamente após a última tag , adicione uma tag e ajuste a largura para 100%.

Adicionando Data Fields : Adicionando Data Fields Adicione o código abaixo após a tag .

Traduzindo Data Fields : Traduzindo Data Fields Podemos traduzir o nome do meses e dias que formam um Data Field. No entanto há algumas maneiras para se fazer isso. Declaração de Array com mxml. Declaração de Array com ActionScript. Passar os valores direto para as propriedades do Data Field.

Traduzindo Data Fields : Traduzindo Data Fields

Traduzindo Data Fields : Traduzindo Data Fields

Want to learn?

Sign up and browse through relevant courses.

Name:
Your Email:
Password:
Country:
Contact no.:


Area code Number
Subject you are interested in:
Word verification: (Enter the text as in image)


Sign Up Already a member? Sign In
I agree to WizIQ's User Agreement & Privacy Policy
1 Member Recommends

Your Facebook Friends on WizIQ