screen - redeRIA | Agregador de noticias, artigos, tutoriais Flex, Flash, JavaFX, AJAX e Rich internet applications em geral!

Out 10

Criando extensão para o Google Chrome – Parte 1/2

Escrito por Gabriel Versallini em 1, 2.0, 3.5, 4, 6, action, AR, Artigo, back, botão, browser, C#, chrome, class, Curso, developer, Documentação, exemplo, for, Google, html, ide, IE, if, image, Java, Javascript, Mac, mg, O, on, Pessoal, procura, pt, RIA, Ria’s Geral, S+S, screen, site, super(), tool, UI, window, windows @ 10 10th, 2011 | via http://www.versallini.com.br | Sem comentários

Olá, pessoal!

No artigo de hoje mostraremos como é simples criar uma extensão para ao Google Chrome. Apesar de ser um recurso esquecido pelas agências, pode agregar muito valor ao seu negócio.

É importante que tenha um bom conhecimento de HTML e JavaScript. Abra o editor de sua preferência e vamos ao trabalho! (Na época de Windows gostava do Notepad++, no Mac ainda não tenho preferência.)

Documentação Oficial: http://code.google.com/chrome/extensions/devguide.html

Primeiro devemos criar uma pasta com nome da extensão, VERSALLINI. Em seguida, precisamos criar o arquivo manifest.json, pois é ele que o Chrome procura na hora de identificar e instalar a extensão. Veja a seguir:


  "name": "VERSALLINI",
  "version": "1.0",
  "description": "Gabriel Versallini ,
  "permissions": [
    "http://www.versallini.com.br/"
  ]
}

Salve a imagem abaixo na pasta da extensão com o nome de icon.png:

Para saber se fez tudo certinho abra o Google Chrome clique em Tools/Extensions, em seguida no botão Developer Mode no canto superior direito e logo depois em Load unpacked extension…. Selecione a pasta da extensão e pronto, nossa extensão será instalada com sucesso, veja a seguir:

Repare que mesmo com a extensão instalada ainda não criamos nenhuma funcionalidade para ela. Daremos continuidade no próximo artigo, é importante resaltar que daqui pra frente é como criar um site porém com tamanho reduzido.

Divirta-se!
Abraço

Set 21

Flash Player 11 e AIR 3

Escrito por Mauro Martins em .NET, 1, 2.0, 3d, 4, 6, Adobe, Adobe Air, Adobe Max, Air, Android, AR, blog, Blogs, C#, class, developer, err, flash, Flash / Flex, Flash Player, Flex, for, Gráfico, html, IE, if, image, jogo, Jogos, layout, Links e sugestões, live, Mac, map, Mercado, mg, novidade, Novidades, O, on, platform, player, rest, RIA, Ria’s Geral, S+S, screen, super(), tv, UI, UX, Vários, Vídeo, web, window, windows @ 09 21st, 2011 | via http://imauro.com/blog/ | Sem comentários

Screen shot 2011 03 01 at 5.41.01 AM 450x208 Flash Player 11 e AIR 3

Olá a todos!

Esta quarta-feira, dia 21 de Setembro, marca o dia de mais uma milestone para o Flash!

Hoje é anunciado a data do go-live do Flash Player 11 e do Adobe AIR 3!

Com esta versão, a Adobe tenta puxar os limites do que é possível apresentar, na web, em termos gráficos, e tenta oferecer a capacidade de renderizar objectos extremamente complexos, de uma forma super simples!

Esta release, vai permitir, aos developers, criar jogos 3D e 2D com a qualidade dos jogos das consolas, com o benefício de o poderem distribuir para várias plataformas ao mesmo tempo (Android, iOS, Tablet BlackBerry OS, TV, Windows, Mac OS, etc).

Nestes últimos tempos temos visto várias aplicações AIR a brilharem nos vários mercados das aplicações. Tanto o Machinarium, como o Times Caltrain, são um sucesso nas plataformas em que estão implementados!

Para mais informações sobre jogos acedam aqui ou vejam o este vídeo.

Para mais informações sobre o Flash Player 11 e o AIR 3, sigam este link.

Resta dizer que tanto o Flash Player 11 como o AIR 3 vão estar disponíveis para todos, a partir de Outubro, ou seja, daqui a poucas semanas!

Ah! E não se esqueçam que a MAX está aí ? porta e com ela MUITAS novidades vão surgir

Abraço, Mauro.

Ago 18

[ Adobe Flex Lib ][ GitHub ] Mudando o estilo visual dos Charts

Escrito por Erko Bridee em 1, 2.0, 3.5, 4, 6, action, Adobe, Adobe Flex, Air, api, AR, BI, blog, C#, class, classe, classes, código, custom, Estilo, Flex, Flex 4, git, Gráfico, ide, IE, image, imagens, mg, O, on, Ria’s Geral, S+S, screen, SDK, Twitter, UI @ 08 18th, 2011 | via http://blog.erkobridee.com | Sem comentários

Ha algum tempo publiquei 2 códigos para customização das cores dos gráficos do Adobe Flex, então resolvi evoluir e disponibilizar uma lib para customizações das cores dos gráficos

Post anterior:? [ Adobe Flex ] Mudando o estilo visual dos Charts

Como está no título do post, criei um projeto Lib e um projeto para testar as customizações e publiquei no? GitHub: CustomChartLib? (Atenção: foi utilizado o Adobe Flex 4.5 SDK)

A lib atual conta com 4 classes:

- ColorHelper

Possui as definições de cores base, que serão utilizadas nas classes de customização.

- StylePieChart

- StyleAreaChart

- StyleColumnChart

Segue as imagens dos gráficos customizados:

PieChart

ColumnChart

AreaChart

Veja também:

No Related Post

Jul 29

ClickCountTrigger para Silverlight no Expression Gallery

Escrito por Kelps Sousa em .NET, 1, 2.0, 3.5, 4, 6, action, AR, back, Behavior, Behaviors, Blend, blog, botão, bug, C#, codeplex, código, configuração, control, event, Evento, exemplo, expression, Expression Blend, Expression Gallery, for, full screen, FullScreen, galeria, Google, IE, if, image, int, library, live, map, mg, Microsoft, News, O, on, padrão, print, RIA, Ria’s Geral, S+S, screen, silverlight, Silverlight 4, site, UI, XAML, XML, XP @ 07 29th, 2011 | via http://kelps-sousa.blogspot.com/ | Sem comentários

Acabei de publicar uma nova trigger no Expression Gallery, chamada ClickCountTrigger.

Esta trigger serve para simplificar nossa vida quando queremos implementar duplo click em Silverlight, já que a plataforma não fornece uma implementação nativa desse evento. Decidi fazer a trigger de forma genérica e por isso implementei como click count ao invés de double click. Sendo assim, tornei possível que essa trigger seja utilizada para adicionar cliques triplos, quaduplos ou até mais em aplicações Silverlight. Eu não consigo imaginar situações onde mais do que 3 cliques façam algum sentido, mas a minha imaginação não deve limitar a sua Winking smile .

Para configurar a trigger no Expression Blend, basta escolher um controle que deverá ter algum comportamento ao receber um duplo click, adicionar uma Action a ele e depois mudar a trigger padrão dessa Action para ClickCountTrigger e configurar quantos cliques disparam a ação. Abaixo temos alguns prints mostrando a trigger configurada em um botão, em conjunto com a Action ToggleFullScreenAction. Este exemplo é do código do live sample que está na página da trigger na galeria.

Action aplicada no botão

Action ToggleFullScreenAction configurada em um Button

Janela de propriedades da Action, mostrando sua configuração e a da trigger.

Propriedades da trigger ClickCountTrigger e da action de fullscreen

Configuração da trigger e action no xaml

<Button Content="Double-Click to Toggle Full Screen">    <i:Interaction.Triggers>        <cnzk:ClickCountTrigger ClickCount="2">            <cnzk:ToggleFullScreenAction />        cnzk:ClickCountTrigger>    i:Interaction.Triggers>Button>

Declaração no xaml dos namespaces necessários para utilizar tanto a trigger quanto a action:

xmlns:i="http://schemas.microsoft.com/expression/2010/interactivity"xmlns:cnzk="http://schemas.cnzk.com.br/library"

Se você utilizar algumas das minhas behaviors, triggers ou actions publicadas no Expression Gallery e tiver algum tipo de feedback ou bug para reportar, pode postar um comentário aqui no blog ou na página do projeto no codeplex.

Espero que esta trigger seja útil para vocês, pois pra mim ela já está sendo.

Jul 10

[Flexmania 2011] Planejando e projetando – Dashboad : Flex + Java

Escrito por Erko Bridee em .NET, 1, 2.0, 3.5, 4, 6, action, Adobe, Adobe Flex, Adobe Flex - 3, api, AR, Arquitetura, BI, Blazeds, blog, C#, class, código, dados, Download, err, event, Evento, flash, flash builder, Flex, Flex 3, Flex 4, Flex Mania, Flexmania, git, ide, IE, image, Java, mg, mysql, O, on, Oracle, Palestra, problema, prova, pt, RIA, Ria’s Geral, S+S, screen, servidor, Spring, Tema, Twitter, UI, UX, web @ 07 10th, 2011 | via http://blog.erkobridee.com | Sem comentários

Este ano (2011), tive a oportunidade de participar e palestrar no evento FlexMania, na qual participei com o tema:? Planejando e projetando – Dashboad : Flex + Java.

Onde o objetivo central da minha palestra foi auxiliar a pensar e projetar uma aplicação Dashboad.

Segue os slides da palestra:

Slides da palestra no Flex mania 2011

Código do projeto de prova de conceito apresentado na palestra:

https://github.com/erkobridee/Twitter-Analyzer

Obs.: inclui instruções de como montar o ambiente nos arquivos README, além de disponibilizar um script de criação da base de dados com uma massa de dados inicial. (Atenção o nome da base deve ser: flexmania2011 no MySQL)

Visão da arquitetura da aplicação:

Veja também:

Mai 26

Introdução FlexOrm em aplicações flex mobile utilizando o SQLite

Escrito por Willian Mano em .NET, 1, 2.0, 4, Air, Android, AR, Banco de Dados, BI, blog, C#, class, código, código fonte, dados, Download, exemplo, flash builder, Flex, fonte, int, Introdução, lite, mg, mobile, O, on, redeRIA, RIA, Ria’s Geral, S+S, screen, Screencast, SQLite, TAT, Twitter @ 05 26th, 2011 | via http://blog.willianmano.eti.br/ | Sem comentários

Neste screencast eu faço uma introdução sobre o flexorm. Sua integração com o banco de dados SQLite em uma aplicaçõa AIR.

No exemplo é criada uma aplicação Mobile que utiliza o banco de dados nativo do AIR o SQLite.

Download do Código fonte.

Mai 21

Implementando Skin Properties #screencast

Escrito por Jose Carlos Fiel em 1, 6, Adobe Flex, api, AR, blog, C#, class, flash builder, FullScreen, IE, if, image, mg, O, on, Ria’s Geral, S+S, screen, Screencast, skins, Sugestões @ 05 21st, 2011 | via http://blog.josecarlosfiel.com.br | Sem comentários

Neste screencast, irei mostrar como implementar Skin Properties.

Confira, e qualquer comentário e sugestões serão bem vindas

Obs.: Veja em FullScreen.

Mai 20

Google Product Search: app mobile desenvolvida com Flex

Escrito por Ved em Android, AR, botão, busca, C#, código, Flex, Google, IE, lista, mobile, O, on, produto, Ria’s Geral, screen, Screencast, web, Webservice @ 05 20th, 2011 | via http://www.vedovelli.com.br | Sem comentários

Neste screencast utilizei o webservice do Google Product Search para montar uma lista de produtos com busca, thumbnail, fabricante, descrição e valor. Também uma segunda view com detalhes do produto selecionado e para finalizar um botão que leva ? página para a compra do produto. Uma aplicação relevante, com poucas linhas de código e nenhuma [...]

Mai 19

Enriquecendo sua aplicação flex utilizado eventos do teclado

Escrito por Willian Mano em .NET, 1, 2.0, 4, app, AR, arte, Atalhos, BI, blog, break, browser, C#, camp, case, class, classe, código, código fonte, err, erro, event, Evento, Eventos, exemplo, flash builder, Flex, fonte, for, git, html, IE, if, int, internet, map, mg, O, on, redeRIA, rest, RIA, Ria’s Geral, Rich Internet Application, S+S, screen, Screencast, screencasts, Scroll, site, state, TAT, Tema, Tutorial, Twitter, UI, Ved, XP @ 05 19th, 2011 | via http://blog.willianmano.eti.br/ | Sem comentários

Como a maioria deve saber o significado de RIA é rich internet applications. Há muito tempo atrás, assistindo a um dos screencasts do? Vedovelli, ele falou que o flex é muito rico e que você pode melhorar a experiência dos usuários trabalhando os pequenos detalhes da aplicação. Coisas como limpar os campos e mudança de foco são primordiais para deixar suas aplicações mais intuitivas e fáceis de serem usadas.

Baseado nisso eu passei a prestar um pouco mais de atenção nesses detalhes e uma das coisas que veio ? cabeça foi os eventos de teclado. Claro eu não poderia de deixar de citar meu amigo? @brunoaraujo_id que foi o primeiro que eu vi a manipular esse tipo de evento e quem também me mostrou um exemplo no qual vou mostrar aqui.

Historinhas ? parte, vamos ao que interessa.

Nesse tutorial eu irei (tentarei) explicar como trabalhar com eventos de teclado e também como eles podem ser úteis na sua aplicação.

Primeiro vamos a um simples exemplo para que possamos observar um pouco melhor a classe KeyboardEvent.

Seu browser não suporta iframes.

No exemplo acima tem duas caixas de texto, quando você digita algo na primeira caixa de texto ele exibe na caixa de baixo as propriedades do evento. Nesse primeiro passo nós iremos observar apenas o? charCode e o? keyCode.

charCode: é o código do caractere, ele obedece a tabela ASCII e você pode pegar o valor de cada caractere? aqui. Lembrando que cada caractere tem seu código, ou seja, o a minúsculo é diferente do A MAIÚCULO.
keyCode: é o código numérico que corresponde ao valor da tecla no teclado. Ele pode variar conforme sistema operacional e dispositivo.

O mapeamento desses eventos é bem simples você deve apenas verificar qual a tecla pressionada e apartir dai executar alguma ação. Exemplo.

switch(event.keyCode) 

  //Quando o usuário apertar o esc
  case 27:
    //Executa alguma ação
  break;
  //Quando o usuário apertar o enter
  case 13:
    //Executa alguma ação
  break;

Bom, já sabemos qual evento iremos trabalhar e como pegar o código de uma tecla apertada, mas em que isso será útil? O próximo evento ilustra isso perfeitamente.

Seu browser não suporta iframes.

No exemplo acima eu estou mapeando os eventos do enter e do esc.

Quando o usuário está no state de login e pressiona enter ele verifica se o campo está vazio, se estiver mostrará uma mensagem de erro, caso contrário ele passará para o próximo state. Se o usuário pressionar esc o campo será limpo.

No state de senha ao pressionar esc ele também verifica se o campo está vazio, se estiver ele vai volta para o state de usuário, caso contrário ele irá limpar o campo. Se o usuário apertar enter ele irá dar uma alert avisando que naquele momento seria a hora de fazer o login.

Bom, mais explicações pelo código fonte, ele está bem simples de fácil compreensão.

Você pode também criar atalhos em seu aplicativo, pode por exemplo, fazer com que um ctrl+n deixe o texto em negrito.

Vamos a uma rápida passada sobre isso.

Volte para o primeiro exemplo e pressione ctrl + i.

O resultado do evento será:

[KeyboardEvent type="keyDown" bubbles=true cancelable=false eventPhase=3 charCode=105 keyCode=73 keyLocation=0 ctrlKey=true altKey=false shiftKey=false]

Notem que agora o ctrlKey tem o valor true. Usando no seu código você verifica se ele é true e depois verifica o código da tecla para criar as combinações de atalhos. Agora é só usar a criatividade.

Espero que essas informações tenham sido úteis para vocês.

Abraço e até a próxima.

Abr 29

Experimentando Flex Mobile #screencast

Escrito por Jose Carlos Fiel em 1, 4, 6, Adobe, Adobe Flex, Android, api, app, apple, AR, BI, blog, builder 4, class, classe, classes, demo, err, flash, flash builder, Flash Builder 4, Flex, for, framework, html, IE, if, image, iphone, mg, mobile, O, on, PHP, Ria’s Geral, screen, Screencast, serviço, servidor, UI, web, XP, zend, Zend Framework @ 04 29th, 2011 | via http://blog.josecarlosfiel.com.br | Sem comentários

Essa semana estou no desafio de construir uma app mobile usando Flex.

Algo bem simples até então, já que estou usando uma versão da prerelease do Flash Builder 4.5 for PHP.

O mais legal é simplicidade de conectar ao servidor, utilizando as mesmas classes de serviço do Zend usadas na app existente rodando hoje na web (Flex + PHP usando Zend Framework).

Muita gente já me adianta falando: “Vai funcionar só no Android né, já que o iPhone e iPad não tem Flash!”.

Maior engano destes ou de você que já pensou o mesmo.

Agora podemos compilar um arquivo APK para plataforma Android e um arquivo IPA para plataforma iOS. Fora as duas grandes plataformas ainda posso gerar para o BlackBerry PlayBook.

Assistam e confiram abaixo a breve experiência:

« Entradas anteriores | Entradas recentes »

Veja também:

Veja também:

ACERCA

GOOGLE

Votação

AUTORES

PUBLICIDADE