Recentemente um amigo e ex aluno Rafael Daron? me pediu indicações de User Interfaces para inspirá-lo em seu novo projeto para a nuvem, citou-me que estava observando o Windows 8 e aplicações como Prezi para ter referências. E a pergunta dele me chamou bastante atenção, e a resposta me inspirou esse post. O motivo é bem…
Inspiração para User Interface?
Usabilidade Mobile – Introdução
Ursula Wolff curtiu este postÉ isso aí galera, estou de volta. Depois de uma certa experiência com usabilidade mobile, tanto Android quanto iOS (em breve vou abordar também sobre Windows Phone), resolvi criar alguns posts para tratar do tema. Nessa introdução vou comentar sobre o que é a Usabilidade Mobile ? e abordar um dos primeiros…
Veja o suporte dos browsers às novidades de html5, css3 e javascript
Hoje eu reencontrei um site muito útil que eu já havia visto algum tempo atrás mas havia perdido o link. O site se chama “When can I use…” e contém diversas tabelas comparativas mostrando o suporte dos principais browsers ? s novidades de CSS, HTML5, SVG, Javascript e outros.

Clicando nos links das funcionalidades é possível ver as tabelas comparativas de suporte dos browsers e também é possível mudar os filtros para exibir outras funcionalidades.
As tabelas de comparação contam também com alguns browsers de smartphone, mas o Windows Phone não consta na lista (tem apenas iOS, Android, Opera Mini e Opera Mobile). Mas isso não é um problema pois o IE do Windows Phone usa a mesma engine de renderização do desktop, com a única diferença de que não suporta plug-ins, então basta olhar a versão do IE normal na lista para ver se suporta a funcionalidade desejada. O IE do Windows Phone 7.0 (versão lançada na Europa e EUA em 2010) usa a engine do IE 7 e o Windows Phone 7.1 (Mango, lançado em 2011, inclusive no Brasil) usa a engine do IE 9.

Se você estiver trabalhando em um projeto usando HTML5, este site com certeza será muito útil para ajudar a identificar os pontos críticos do projeto do ponto de vista de suporte e portabilidade entre plataformas.
SharedObject com Flash Media Server
SharedObject é um recurso que dar ao Flash Player a capacidade de salvar dados localmente para poder ser usado posteriormente em sua aplicação, a grosso modo é como um cookie. Com o Flash Media Server, foi introduzido a possibilidade de usar o SharedObject Remote, no qual os dados são salvos no servidor Flash Media Server e compartilhados para todas as instâncias de uma conexão entre o Flash Player e o Flash Media Server. Isso possibilita a criação de aplicativos em real time como Dashboards, chats e o que mais a imaginação permitir.
O uso do SharedObject Remote pode ser usado de duas maneiras em conjunto com o Adobe Flash Media Server.
- Somente pelo lado cliente, através do Flash Player/AIR
- Em conjunto com ActionScript Communication, linguagem de servidor do Flash Media Server
Vejamos o primeiro caso:
Através do lado cliente, através do Flash Player/AIR
Caso você não tenha conhecimento para usar a linguagem Server-side do Flash Media Server, é possível utilizar o SharedObject Remote somente pelo ActionScript 3.0. Vamos a um exemplo clássico sharedBall, onde o objetivo é compartilhar as posições da bolinha a atualizar nos outros clientes conectados a mesma instância.
- Vá até o diretório de instalação do Flash Media Server e procure pela pasta “applications”, lá crie um diretório chamado “sharedBall”, dentro dele um arquivo chamado “main.asc”
- Abra o main.asc no seu editor de textos de preferencia ou pelo próprio Flash e digite: trace(“sharedBall…”);
- Vamos testar esse arquivo, abra o console do Flash Media Server, geralmente fica localizado no diretorio de instalação/webrrot/swfs. Você pode abrir pelo browser ou o swf diretamente.
- Clique no botão “View Applications” e em seguida procure o nome “sharedBall” no combobox logo no canto inferior esquerdo onde está escrito “New Instance…”
- Selecione “sharedBall” e deveremos ter na aba Live Log algo como na imagem abaixo:
- No Flash, criei uma bola com as ferramentas de desenho e converti para MovieClip dando o nome de “mc_ball”.
- Estamos prontos para começar a integração entre o Flash e o Flash Media Server. Crie um layer para o ActionScript e abra o editor apertando F9 ou “Window->Actions”
- Nosso código começa com a conexão com o servidor Flash Media Server
-
-
-
function init():void
-
-
nc.connect(“rtmp://localhost/sharedBall”);
-
-
-
-
trace(evt.info.code);
-
-
-
init();
Feito isso, podemos testar o swf apertando Ctrl+Enter, se tudo correr bem, deveremos ter a seguinte mensagem no output do Flash:
NetConnection.Connect.Success
Com a conexão feita, podemos instanciar o nosso SharedObject Remote para compartilhar as posições de x e y da bolinha.
-
if(evt.info.code == “NetConnection.Connect.Success”)
-
-
so.connect(nc);
-
O handlerSync é responsável por atualizar os dados de x e y pegaremos do SharedObject Remote:
-
-
mc_ball.x = so.data.x;
-
mc_ball.y = so.data.y;
-
Daremos a opção de ao clicar na bolinha, que ela possa ser arrastável, em seguida atualizaremos as posições de x e y no SharedObject Remote:
-
-
-
mc_ball.startDrag();
-
-
-
-
mc_ball.stopDrag();
-
-
-
-
so.setProperty(“x”,mc_ball.x);
-
so.setProperty(“y”,mc_ball.y);
-
Segue o código completo:
-
-
-
function init():void
-
-
nc.connect(“rtmp://localhost/sharedBall”);
-
-
-
{
-
trace(evt.info.code);
-
if(evt.info.code == “NetConnection.Connect.Success”)
-
-
so.connect(nc);
-
-
}
-
-
-
mc_ball.x = so.data.x;
-
mc_ball.y = so.data.y;
-
-
-
-
-
mc_ball.startDrag();
-
-
-
-
mc_ball.stopDrag();
-
-
-
-
so.setProperty(“x”,mc_ball.x);
-
so.setProperty(“y”,mc_ball.y);
-
-
-
init();
Veja uma demostração em funcionamento:
Atualizações automáticas silenciosas no Internet Explorer a partir de Janeiro/2012
Uma excelente notícia para quem desenvolve para Web: Hoje Ryan Gavin anunciou no blog oficial do Internet Explorer (em inglês) os planos para implementação de atualizações automáticas silenciosas no IE, começando já em janeiro de 2012 no Brasil e Austrália (isso mesmo, Brasil fará parte do piloto).
Essas atualizações ocorrerão, como o próprio nome diz, de forma automática e silenciosa, sem necessidade de nenhuma intervenção do usuário e possivelmente (pele menos é o que esperamos) sem reiniciar o computador. Esse tipo de atualização já é comum para usuários do Google Chrome.
Mesmo sendo automáticas e sem intervenção, ainda será possível optar por não atualizar (há casos de empresas que têm aplicações que dependem de versões específicas do browser e não podem simplesmente atualizar), ou mesmo remover a atualização e voltar para a versão anterior, mas o padrão agora será a atualização automática para a última versão.
A atualização será para a última versão disponível na plataforma do usuário, ou seja, usuários do Windows XP receberão o IE8 e usuários do Vista e Windows 7 receberão o IE9 (e IE10, quando for lançado).
Agora é esperar que essa atualização realmente diminua de forma substancial o tamanho da base instalada de IE6 e IE7 (e talvez IE8 também, mas não tanto) para que possamos desenvolver sites e aplicações com mais tranquilidade e menos dores de cabeça, além de ajudar a convencer os clientes de que não será mais tão imprescindível suportar versões tão antigas do browser da Microsoft.
versão traduzida para português do post sobre este anuncio
[Android] Instalando a MIUI ROM no Motorola Milestone 2
Depois de ver o Motorola Milestone 1 do @jandersonfc e do @horochovec rodando a MIUI ROM (Android) e ver que os respectivos aparelhos estavam impressionantemente r?pido, resolvi enfim entrar na onda e atualizar meu Motorola Milestone 2 para a MIUI ROM. Instalei (12/12/2011) a vers?o MIUI-1.12.02 a qual utilizar a vers?o Android 2.3.7 como base.
Site Oficial (vers?o em Ingl?s)
Para atualizar meu Motorola Milestone 2 para a MIUI ROM, tentei seguir o tutorial indicado pelo @plcosta, neste [link], mas confesso que depois de 3 tentativas frustradas desanimei, ent?o pedi uma ajuda para o @horochovec, para usar voltar a ROM original do Milestone 2 e recome?ar o processo de atualiza??o do zero. Finalmente tivemos a id?ia de olhar um tutorial de instala??o do CyanogenMod para o Milestone 2 [link], em resumo bastou seguir os passos indicados necesse tutorial que consegui realizar a instala??o da MIUI ROM no meu Milestone 2.
Realizei uma mescla dos 2 tutoriais para realizar a instala??o…
O que posso dizer, agora que estou usando a MIUI ROM?
Recomendo, quem instalar vai gostar muito.
Quer instalar a MIUI ROM tamb?m?
Caso queira mesmo, a seguir segue algumas instru??es conforme realizei a instala??o.
Aten??o: ? necess?rio lembrar que esse procedimento ? por sua conta e risco.
Obs.: com um pouco de aten??o, voc? tamb?m vai conseguir instalar a MIUI ROM no seu Milestone sem fazer nenhuma besteira.
Voc? tem o Motorola Milestone 1?
Mesmo n?o sendo o meu objetivo aqui, o @horochovec j? vez um [post] no blog dele que descreve os passos para a instala??o. (Sinceramente a instala??o no Milestone 1 me parece bem mais f?cil e r?pida que no Milestone 2 hehe)
N?o est? afim de apanhar como eu na instala??o no seu Milestone 2?
A seguir irei listar o passo a passo que realizei.
Obs.: no meu caso eu utilizo um Mac, ent?o tenha acess?vel um computador com Windows para te facilitar a vida. Se algo der errado n?o se desespere, ? s? voltar a ROM original do aparelho e recome?ar o procedimento para instala??o da nova ROM, para voltar esta ROM original ? que ser? necess?rio o Windows.
O que voc? vai precisar para realizar a instala??o da MIUI ROM
- Gingerbreak – para rootear o celular
- UPDATE_1.12.02_0.zip – MIUI ROM que utilizei e instalei no meu Milestone 2
- Bootmenu v0.8.6-v2.zip – arquivo do menu do boot para voc? conseguir selecionar e instalar a MIUI ROM
- Bootstrap – Droid 2 Bootstrap (Android Market) – necess?rio para acessar o bootmenu
- Rsd Lite – Aplicativo da Motorola para instalar SBF, serve para atualizar o Bootloader do aparelho e caso precise voltar a ROM original do aparelho, voc? ir? utilizar este aplicativo para realizar a tarefa. Lembrando que este aplicativo ? exclusivo e s? possui vers?o para MS. Windows.
Aten??o: sempre que voc? for executar o Rsd Lite para instalar uma SBF, tenho o m?ximo de cuidado, o procedimento deve ser executado e conclu?do 100%, este ? o ?nico procedimento que pode causar a perda irrevers?vel do aparelho.
- SBFs : Bootloader 70.13 e Vers?o original da ROM do Milestone 2 ( vers?o 2.2 Brazil, a primeira linha )
Tenha esses arquivos listados acima no seu computador, para facilitar sua vida =]
Procedimento para instalar a MIUI ROM no Motorola Milestone 2
Caso voc? queira ser cautelos@ e realizar um backup do seu celular, veja este [ link 1 - ROM original | 2 - aplicativos e dados ]. Eu particularmente n?o vi utilidade pr?tica nisto, pois ? tudo ou nada, queria a nova ROM no meu aparelho hehe.
Lembrando que os passos descritos a seguir foram os que eu utilizei na instala??o…
Sempre que for executar esse procedimento, fa?a com a bateria carregada.
Passos:
1 - Copie os arquivos: Gingerbreak.apk, UPDATE_1.12.01_0.zip, Bootmenu v0.8.6-v2.zip para o SD Card do aparelho
1.1 - Caso voc? tenha feito o download do Bootstrap.apk, copie este arquivo tamb?m para o SD Card
2 - Renomeie o arquivo UPDATE_1.12.01_0.zip para update.zip, este procedimento ? para facilitar o processo de instala??o.
3 - Verifique no aparelho, nas configura??es do Android a op??o Aplica??es(Programas) submenu, Desenvolvimento se as op??es, Fontes desconhecidas e Depura??o USB est?o ativas.
4 - Atrav?s do Gerenciador de arquivos localize o arquivo Gingerbreak.apk clique sobre ele e instale. Fa?a o mesmo para o Bootstrap, caso voc? tenha este.
4.1 – Caso tenha optado em n?o baixar este, acesse o Market do Android e instale por l? (Droid 2 Bootstrapper).
4.2 - Execute o aplicativo Gingerbreak, pois ? necess?rio rootear o aparelho para continuar a instala??o. A execu??o desse aplicativo ir? reinicar o aparelho, n?o se preocupe.
5 - Execute o Droid 2 Bootstrapper, neste aplicativo clique:
5.1 - Bootstrap Recovery
5.2 - Reboot Recovery
6 - Seu aparelho ser? reiniciado e exibir? um menu (em verde) com algumas op??es, onde o bot?o (+) do volume sobre, o (-) desce e o bot?o de tirar foto representa (ok/enter)
6.1 - Selecione: “install zip from sdcrad”
6.2 - Localize e selecione o arquivo: Bootmenu v0.8.6-v2.zip e (ok)
6.3 - Ap?s a instala??o, selecione a op??o do menu: “GO Back” (ok)
6.4 - Selecione a op??o: “Reboot System now” (ok)
7 - Seu aparelho ser? reiniciado novamente e exibir? um menu (azul), onde neste os comando para (ok/enter) ? o bot?o onde voc? liga o aparelho (power)
7.1 - Selecione: “Boot” (power)
7.2 - Selecione: “Set default: [boot Menu]“ (power)
7.3 - Selecione: “nomal” (power)
7.4 - Selecione: “Go Back” (power) 2x
7.5 - Selecione: “Recovery” (power)
7.6 - Selecione: “Custom Recovery” (power)
8 - Voc? ver? novas op??es no menu e uma imagem Android BootMenu, neste menu o comando para (ok/enter) ? o bot?o onde voc? liga o aparelho (power)
8.1 - Selecione: “Wipe data/Factory Reset” (power) Nesta op??o todos as informa??es na mem?ria embarcada do aparelho ser?o limpas.
8.2 - Selecione: “advanced” (power)
8.2.1 - Selecione: “Wipe Dalvik Cache” (power)
8.2.2 - Selecione: “Wipe Baterry Stats” (power)
8.2.3 - Volte ao menu anterior
8.3 - Necess?rio repetir o passo 8.1 - Selecione: “Wipe data/Factory Reset” (power)
8.4 - Selecione: “Apply update from sdcard” (power)
8.5 - Ap?s finalizar a instala??o, selecione a op??o: “reboot system now”
9 - Seu aparelho ir? iniciar e exibir o s?mbolo da motorola em vermelho, diferente a ROM default do MotoBlur, nesta etapa ? aguardar e esperar a MIUI ROM ser carregada. (Demorou uns 3 minutos ou 5 minutos at? entrar pela primeira vez)
Estou esperando a um bom tempo e n?o entrou, o que eu fa?o?
Bom caso voc? esteja em desespero vendo seu celular em um loop infinto, dizendo que est? carregando o Android e at? agora nada. N?o se desespere, eu passei por isso 3 vezes at? conseguir instalar a MIUI ROM.
Mantenha a calma.
Nessa situa??o voc? vai precisar do Rsd Lite, um computaor MS. Windows.
Como j? havia indicado para fazer download dos arquivos .sbf, neste momento ? que se faz uso deles.
Passos:
1 - Desligue o aparelho
2 - Ligue o aparelho segurando o bot?o power e a ceta para cima do teclado do Milestone 2
3 - Quando observar que a tela ligou, por?m est? preta, solte os bot?es
Aten??o: m?ximo cuidado nesse momento, mantenha o cabo USB sempre conectado, nunca pare o procedimento, esta etapa ? cr?tica e pode danificar o seu aparelho caso n?o seja executada corretamente.
4 - Verifique e certifique-se de que a vers?o do Bootloader ? a 70.13 (caso voc? nunca instalou nenhuma ROM deve ser)
4.1 - Caso n?o for a vers?o indicada, plugue o cabo usb no celular e no computador e na aplica??o Rsd Lite, selecione o arquivo .sbf referente ao bootloader, depois desligue e ligue novamente para acessar o bootloader.
4.2 - Estando na vers?o correta e com o aparelho ligado via usb, utilizando o Rsd Lite, selecione o arquivo .sbf referente a ROM original do aparelho.
5 - Terminando a instala??o, mantenha o aparelho conectado no computador at? o Android ser carregado totalmente, somente depois disso voc? poder? desconectar o cabo usb.
6 - Voc? est? com seu aparelho de volta ao estado de quando voc? comprou e tirou ele da caixa.
7 - Provavelmente voc? ter? que logar no MotoBlur, execute o seu login at? que acesse totalmente ao Android.
8 - Voltei ao passo 1 do procedimento de instala??o da ROM.
Aeee, acessou a tela da MIUI, ufa… hora de fazer o ajuste fino
Voc? perceber? que estar? com a MIUI em Ingl?s, mas isto n?o ? um problema, basta alterar o idioma para portugu?s.
- Altera o idioma para Portugu?s (Brasileiro) [link]
- A ilumina??o do teclado n?o vem habilitada inicialmente, para arrumar isto, veja este [link]
- Calibrar a bateria do aparelho para um melhor rendimento [link]
- A MIUI n?o vem com um teclado Swype, ent?o instalei: TouchPal Keyboard e o dicion?rio para Portugu?s Brasileiro
Um grande vil?o do consumo de bateria ? o 3G no aparelho que fica ativo 100% do tempo desde que este esteja habilitado, para resolver isso instalei o aplicativo APN Brasil Pro (Android Market), que possui um recurso que melhora o gerenciamento do 3G e ajuda consideravelmente a aumentar o tempo de vida da bateria do aparelho.
Deixo registrado aqui meus agredimentos a galera que me ajudou com dicas e links e informo que esses passos que descrevi foi uma mescla dos posts:
- @ajudandroid – MIUI VERS?O 1.11.18 “ATUALIZADA PARA VERS?O 1.12.02 04/12/2011
- Clube do Android – CyanogenMod 7 Android 2.3.5 para Milestone 2
Veja também:
O Twitter altera a versão do Tweetdeck para uma webapp?!
Eis que na semana passa foi uma loucura a quantidade de posts e pessoas falando da nova vers?o do Tweetdeck “nativa”, para Windows e Mac OS que substituiu a vers?o anterior em Adobe AIR. Os Appletards (man?acos, tarados pela Apple) foram ao del?rio, mas…
MacMagazine : Agora o Tweetdeck ? nativo
Tecnoblog: Twitter chuta Adobe AIR para escanteio
Os coment?rios dos tards comemorando o fato s?o hil?rios, perdemos funcionalidades e recursos e eles comemoram por agora a aplica??o ser “nativa”
A minha opini?o:
A perda de funcionalidades foi not?ria…
Perda de funcionalidades = retrocesso
Perdemos: encurtador de links, atualiza??o em real-time dos tuites, o upload de fotos n?o funcionou em nenhuma das minhas frustradas tentativas de uso, ao ficar um periodo sem conectividade a internet o novo aplicativo n?o consegue mais recuperar os tuites. Essas foram os problemas que encontrei nessa nova vers?o.
Vi muita gente elogiando pelo simples fato de (creio eu n?o gostarem d) o Adobe AIR n?o ser a base desde cliente…
Analisando tecnicamente e tecnologicamente o ocorrido:
Temos aqui nada mais que o cliente web: https://web.tweetdeck.com/ empacotada como uma webapp instal?vel no Mac.
Ao analisar o conte?do do pacote TweetDeck (a aplica??o) no Mac, temos /Content/Resources/htdocs todo o c?digo html+js+css da aplica??o a qual pelo que observei a web vem a ser a mesma.
Ainda n?o identifiquei qual solu??o de webapp foi utilizada para gerar o instal?vel, mas tenho a respectiva suspeita em ordem:
1 – Appcelerator Titanium
2 – Mozilla Prims
3 – o Twitter desenvolveu sua propria solu??o de empacotamente da webapp
Caso voc?, assim como eu instalou a nova vers?o e desinstalou a antiga, crendo que a nova manteria as funcionalidades da antiga e se arrependeu, ainda tem como voltar para a vers?o antiga e deixar de usar esse lixo da nova vers?o…
Encontrei:
- um post de outra pessoa que como eu n?o gostou da nova vers?o
Veja também:
Introdução ao jQuery
O jQuery é uma biblioteca JavaScript poderosa que está quase se tornando quase “sinônimo” do próprio JavaScript.
A apresentação de slides a seguir é de uma palestra introdutória do jQuery, que destaca praticamente todos os seus recursos e que mostra algumas modificações na versão mais recente da biblioteca (1.7).
E para quem quiser se aprofundar no assunto, o último slide aponta para um livro gratuito de jQuery: jqfundamentals.com.
(Registro aqui o agradecimento ao Erko Bridee por compartilhar esse conteúdo)
Posts relacionados
- Livro: Google Android“>Livro: Google Android (0)
- Instalando sua aplicação Rails/RestfulX (e as gems) na DreamHost Installing your Rails/RestfulX app (and its gems) at Dreamhost“>Instalando sua aplicação Rails/RestfulX (e as gems) na DreamHost Installing your Rails/RestfulX app (and its gems) at Dreamhost (2)
- CRUD com o RestfulX – aplicação funcionandoCRUD with RestfulX – live application“>CRUD com o RestfulX – aplicação funcionandoCRUD with RestfulX – live application (2)
- CRUD com o RestfulX: Parte 1/2 – RetrieveCRUD with RestfulX: Part 1/2 – Retrieve“>CRUD com o RestfulX: Parte 1/2 – RetrieveCRUD with RestfulX: Part 1/2 – Retrieve (7)
- Protesto: falha em sistema da Orizon expõe dados sigilosos de pacientes“>Protesto: falha em sistema da Orizon expõe dados sigilosos de pacientes (0)
- Balsamiq Mockups: solução entre protótipos de alta e baixa fidelidade“>Balsamiq Mockups: solução entre protótipos de alta e baixa fidelidade (8)
- Erro “bad line length character” no Git“>Erro “bad line length character” no Git (1)
- Windows e Office: novidades da Microsoft“>Windows e Office: novidades da Microsoft (4)
- Firefox Plugin – visualizar trace de SWFs“>Firefox Plugin – visualizar trace de SWFs (2)
© Elvis for Elvis Fernandes, 2011. |
Permalink |
Nenhum comentário |
Adicione ao
del.icio.us
Tags: AJAX, Desenvolvimento, JavaScript, jQuery, web
CoffeeScript, lidando com JavaScript sem sofrimento
Como estou retornando ao mundo do HTML+JS ? inevit?vel ter que voltar a codificar em JavaScript, certo? Bom, talvez n?o… para isto temos o CoffeeScript que apresenta uma proposta bem interessante de sintaxe e codifica??o que no final o resultado gerado ? JavaScript.
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
O que achei interessante nessa apresenta??o foi a apresenta??o dos demais geradores de JavaScript, como GWT em java, entre outros, bom ao final dessa apresenta??o achei bem interessante e consider?vel o uso do CoffeeScript para gerar o JavaScript, utilizando uma sintaxe melhor e obviamente n?o apenas uma nova sintaxe, pois o CoffeeScript possui algumas facilita??es de codifica??o bem interessantes.
No pr?prio site do CoffeeScript possui alguns exemplos e um local onde voc? pode escrever um coffeescript e ver o javascript resultado.
Um fato que me chamou aten??o o compilador do CoffeeScript est? vinculado ao NodeJS.
Aten??o: vale lembrar que o CoffeeScript nada mais ? que uma maneira diferente de codificar JavaScript, ou seja, caso queria utilizar jQuery ou outra lib JavaScript codificando via CoffeeScript ? poss?vel (How CoffeeScript makes jQuery more fun than ever).
Links ?teis para instala??o do CoffeeScript:
How To Install CoffeeScript On Mac OS X
5 Steps to Get Started with CoffeeScript (Mac OS X)
Node.js and CoffeeScript on Windows, Redux
CoffeeScript compilador para windows (GitHub)
Installing CoffeeScript on Ubuntu
Segue alguns links de introdu??o ao CoffeeScript:
Simple CoffeeScript Introduction
A brief introduction to CoffeeScript
Introduction To Coffeescript & Node.Js By Pedro Teixeira
Plugin para os editores de c?digo:
Veja também:
Windows Phone Mango – Local Database
Na versão Mango do Windows Phone, você pode manipular uma base de dados localmente, chamada de local database na documentação oficial, o recurso permite que o desenvolvedor crie aplicativos com registros de dados em tabelas, além de manipular seus registros utilizando o LINQ to SQL.
Uma base de dados local no WP7 fica localizada no Isolated Storage, um local acessível somente pela aplicação corrente, a arquitetura fica conforme a figura abaixo, onde temos a aplicação que contém um DataContext e através de LINQ to SQL, fazemos o acesso a base de dados local no Isolated Storage
Arquitetura Local Database
Para saber mais sobre Isolated Storage acessem os links:
http://msdn.microsoft.com/en-us/library/ff402541(v=vs.92).aspx
No WP7 as aplicações ficam eram áreas isoladas uma das outras, ou seja, uma aplicação não tem acesso ao Isolated Storage de outra aplicação, portanto até o momento não é possível compartilhar uma base de dados local com diversas aplicações. Diferente de uma base de dados SQL Server, um local database não pode rodar como um serviço continuo, visto que ele é executado somente durante o processo da aplicação.
Você pode criar um local database para manipular uma quantidade de dados razoável utilizando as facilidades de consultas do LINQ to SQL juntamente com o relacionamento de tabelas, similar a uma base de dados comum, o local database é uma implementação do SQL CE para o WP7, permitindo realizar facilmente tarefas com incluir, alterar , excluir e realizar consultas com LINQ.
Até o momento não existe uma ferramenta de designer visual e oficial para criar as tabelas, relacionamentos, etc, com a base de dados local, o que poderia facilitar muito, neste artigo faremos um exemplo simples, somente com uma tabela, porém, em um projeto mais complexo, essa tarefa poderia ser um pouco trabalhosa, uma forma não oficial de criar o modelo seria utilizar o SQL Metal, para mais informação, acessem o Centro de Treinamento Oficial do Windows Phone no MSDN ou através do link : http://windowsphonegeek.com/articles/Using-SqlMetal-to-generate-Windows-Phone-Mango-Local-Database-classes .
Com o SQL Metal podemos criar o Data Context através de um comando e com poucas modificações deixá-lo compatível com o Mango e poupar a codificação manual da criação de tabelas e relacionamentos.
Exemplo de comando do SQL Metal:
%ProgramFiles(x86)%Microsoft SDKsWindowsv7.0ABin>SqlMetal.exe
/code:”C:CaminhoClienteDC.cs” “C:CaminhoClienteDB.sdf”
Outras formas:
http://claudiufarcas.blogspot.com/2011/10/windows-phone-mango-sql-ce-tips-and.html
http://blogs.ugidotnet.org/corrado/archive/2011/06/05/using-local-database-in-wp7-mango.aspx
Nesta primeira parte do artigo vou criar uma base de dados muito simples, com uma tabela somente e um único campo, dessa forma podemos focar em como criar e entender os conceitos envolvidos Vou criar uma base de dados Cliente.sdf, com uma tabela chamada Cliente e um campo chamado Nome.
A primeira classe que vamos criar é a entidade Cliente e decorar com alguns atributos utilizados para a manipulação da base de dados, a classe servirá de apoio para a criação da tabela cliente. Para que você possa inserir os atributos nas propriedades da classe, é necessário adicionar o using System.Data.Linq.Mapping, em seguida adicione o atributo [Table] logo acima da criação da classe e adicione o atributo [Column()] em cada propriedade, na primary key da tabela, personalize com :
[Column(IsPrimaryKey = true, IsDbGenerated = true, DbType = "INT NOT NULL Identity", CanBeNull = false, AutoSync = AutoSync.OnInsert)]
Dessa forma a coluna será criada na tabela como sendo Primary Key, não permitindo registros duplicados e gerando automaticamente um número a cada inclusão. Com a adição do atributo Column() nas outras propriedades, cada coluna correspondente será criado na tabela.
Com os atributos de colunas você pode definir uma série de recursos, para saber quais são os atributos de colunas que você pode utilizar no LINQ to SQL para WP7 acesse o link http://msdn.microsoft.com/en-us/library/system.data.linq.mapping.columnattribute(VS.95).aspx
Um atributo em especial que adiciona uma coluna de versão pode auxiliar no desempenho de grandes atualizações de dados, apresentando uma significativa melhoria na aplicação, é o IsVersion=true, essa otimização é exclusiva para o LINQ to SQL do WP7 e usado internamente para identificar a versão da coluna modificada:
[Column (IsVersion = true)]
_VERSION Binary privado;
Igualmente importantes são os atributos de associações, que permitem realizar o relacionamento entre as tabelas, para mais informações acesse:
http://msdn.microsoft.com/en-us/library/system.data.linq.mapping.associationattribute(v=VS.95).aspx
Exemplo de Associação:
[Association(Storage = "_cliente", ThisKey = "_clienteId", OtherKey = "Id", IsForeignKey = true)]
Código da Classe Cliente:
? ? ? [Table]
? ? ? public class Cliente : INotifyPropertyChanged, INotifyPropertyChanging
? ? ?
?
? ? ? ? ? ? ? #region INotifyPropertyChanged Members
?
? ? ? ? ? ? ? public event PropertyChangedEventHandler PropertyChanged;
?
? ? ? ? ? ? ? private void NotifyPropertyChanged(string propertyName)
? ? ? ? ? ? ?
? ? ? ? ? ? ? ? ? ? ? if (PropertyChanged != null)
? ? ? ? ? ? ? ? ? ? ?
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? PropertyChanged(this, new PropertyChangedEventArgs(propertyName));
? ? ? ? ? ? ? ? ? ? ?
? ? ? ? ? ? ? }
?
? ? ? ? ? ? ? #endregion
?
? ? ? ? ? ? ? #region INotifyPropertyChanging Members
?
? ? ? ? ? ? ? public event PropertyChangingEventHandler PropertyChanging;
?
? ? ? ? ? ? ?
? ? ? ? ? ? ? private void NotifyPropertyChanging(string propertyName)
? ? ? ? ? ? ?
? ? ? ? ? ? ? ? ? ? ? if (PropertyChanging != null)
? ? ? ? ? ? ? ? ? ? ?
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? PropertyChanging(this, new PropertyChangingEventArgs(propertyName));
? ? ? ? ? ? ? ? ? ? ?
? ? ? ? ? ? ? }
?
? ? ? ? ? ? ? #endregion
?
?
? ? ? ? ? ? ? [Column(IsPrimaryKey = true, IsDbGenerated = true, DbType = "INT NOT NULL Identity", CanBeNull = false, AutoSync = AutoSync.OnInsert)]
? ? ? ? ? ? ? private string id;
? ? ? ? ? ? ? public string Id
? ? ? ? ? ? ?
? ? ? ? ? ? ? ? ? ? ? get
? ? ? ? ? ? ? ? ? ? ?
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? return id;
? ? ? ? ? ? ? ? ? ? ?
? ? ? ? ? ? ? ? ? ? ? set
? ? ? ? ? ? ? ? ? ? ?
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? if (id != value)
? ? ? ? ? ? ? ? ? ? ? ? ? ? ?
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? NotifyPropertyChanging("Id");
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? id = value;
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? NotifyPropertyChanged("Id");
? ? ? ? ? ? ? ? ? ? ? ? ? ? ?
? ? ? ? ? ? ? ? ? ? ? }
?
? ? ? ? ? ? ? }
? ? ? ? ? ? ?
? ? ? ? ? ? ? [Column()]
? ? ? ? ? ? ? private string nome;
? ? ? ? ? ? ? public string Nome
? ? ? ? ? ? ?
? ? ? ? ? ? ? ? ? ? ? get
? ? ? ? ? ? ? ? ? ? ?
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? return nome;
? ? ? ? ? ? ? ? ? ? ?
? ? ? ? ? ? ? ? ? ? ? set
? ? ? ? ? ? ? ? ? ? ?
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? if (nome != value)
? ? ? ? ? ? ? ? ? ? ? ? ? ? ?
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? NotifyPropertyChanging("Nome");
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? nome = value;
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? NotifyPropertyChanged("Nome");
? ? ? ? ? ? ? ? ? ? ? ? ? ? ?
? ? ? ? ? ? ? ? ? ? ? }
?
? ? ? ? ? ? ? }
? ? ? ? ? ? ?
?
? ? ? }
Em aplicações Silverlight é comum implementar a interface INotifyPropertyChanged para monitorar mudanças nas propriedades da classe , e tirar um melhor proveito do recursos de databinding da tecnologia, para auxiliar o LINQ to SQL, também vamos implementar a interface INotifyPropertyChanging, com ela é possível monitorar quando uma propriedade será modificada e com isso o DataContext é informado e pode identificar as mudanças e melhorar a performance da aplicação.
O Data Context é o local onde definimos o contexto dos dados que servirão para criar a base de dados local, o LINQ to SQL depende do mapeamento entre o modelo de objetos e o esquema da base de dados. Dependendo da complexidade do modelo, esse arquivo pode ser trabalhoso de ser criado manualmente, mas existem formas de utilizar alguma ferramenta para cria-lo, o SQL Metal é uma delas conforme comentado acima no artigo.
Crie uma classe chamada ClienteDataContext , ela vai herdar de DataContext, o DataContext contém diversas propriedades e métodos que auxiliam na manipulação de base de dados, como por exemplo, verificar se uma base de dados existe, criar e excluir uma base de dados, entre outros, mais adiante vamos utilizar o método CreateDatabase() para criar fisicamente a base de dados local no Windows Phone.
A próxima etapa é criar a string de conexão com a base de dados, utilizaremos a palavra chave “isostore” para informar que o arquivo ficará no Isolated Storage, após isso informaremos o nome da base de dados como Cliente.sdf. É na string de conexão que você pode inserir um senha de acesso a base de dados, informar uma cultura específica ou até mesmo criar uma base de dados somente leitura, para mais informações sobre string de conexões para o WP7 acesse http://msdn.microsoft.com/en-us/library/hh202861(v=vs.92).aspx
Por último vamos definir uma tabela Cliente de acesso público e única no DataContext através de public Table
No App.xaml.cs da aplicação , localize o construtor da classe e no final adicione o código abaixo, neste momento vamos criar uma base de dados usando o DataContext criado anteriormente, o código verifica se existe uma base de dados e caso não exista ele já cria uma nova base de dados.
using (ClienteDataContext ctx = new ClienteDataContext(ClienteDataContext.DBConnectionString))
? ? ? if (ctx.DatabaseExists() == false)
? ? ? ? ? ? ?
? ? ? ? ? ? ? ? ? ? ctx.CreateDatabase();
? ? ? ? ? ? ?
?
}
Para finalizar o artigo vou criar uma tela simples em Silverlight, sem se preocupar com o layout, a tela tem um botão chamado “add” que vai adicionar um registro na base de dados e logo abaixo um ListBox chamado “lst”, que está ligado através de databinding a propriedade ItemSource com uma ObservableCollection chamada Items, na propriedade Text vamos mostrar o nome do cliente também ligando através de databinding.
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? Grid.Row="1" Margin="12,0,12,0">? ? ? ? ? ? ? ? ? ? ?? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?? ? ? ? ? ? ? ? ? ? ?? ? ? ? ? ? ? ? ? ? ?? ? ? ? ? ? ? ? ? ? ?? ? ? ? ? ? ? ? ? ? ?? ? ? ? ? ? ? ? ? ? ? ? ? ? ?? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?? ? ? ? ? ? ? ? ? ? ? ? ? ? ?? ? ? ? ? ? ? ? ? ? ?? ? ? ? ? ? ? ? ? ? ?
No constructor do MainPage vamos criar uma instância do DataContext chamado clienteDB :
clienteDB = new ClienteDataContext(ClienteDataContext.DBConnectionString);
No evento ? Loaded da MainPage, realizamos um consulta LINQ to SQL e já adicionamos o resultado em uma ObservableCollections chamada Items, que está ligado ao ItemSource da ListBox, veja como é prático ligar as informações na tela, neste exemplo como o foco é o conceito de local database, o projeto foi criado todo no code-behind da MainPage, mas você poderia criar usando o ViewModel e ligando o ObservableCollection com a View.
var result = from Cliente r in clienteDB.Cliente
select r;
Items = new ObservableCollection(result);
Para mais informações sobre LINQ:
http://msdn.microsoft.com/en-us/library/bb397897.aspx
http://msdn.microsoft.com/en-us/library/bb386976.aspx
http://msdn.microsoft.com/en-us/library/bb386913.aspx
Vamos agora para o código do botão “add” que vai adicionar os registros na base de dados, através do InsertOnSubmit() adicionamos o objeto ao DataContext e através do SubmitChanges(), o objeto é registrado na base de dados, por último, inserimos o objeto na coleção para que seja apresentado na tela.
Cliente c = new Cliente();
c.Nome = txtNome.Text;
clienteDB.Cliente.InsertOnSubmit(c);
clienteDB.SubmitChanges();
Items.Add(c);
?
Código completo da MainPage:
? ? public partial class MainPage : PhoneApplicationPage, INotifyPropertyChanged
? ? ?
? ? ? ? ? ? ? ? ClienteDataContext clienteDB;
? ? ? ? ? ? ? ? #region INotifyPropertyChanged Members
? ? ? ? ? ? ? ? public event PropertyChangedEventHandler PropertyChanged;
? ? ? ? ? ? ? ? private void NotifyPropertyChanged(string propertyName)
? ? ? ? ? ? ?
? ? ? ? ? ? ? ? ? ? ? if (PropertyChanged != null)
? ? ? ? ? ? ? ? ? ? ?
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? PropertyChanged(this, new PropertyChangedEventArgs(propertyName));
? ? ? ? ? ? ? ? ? ? ?
? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? #endregion
? ? ?
? ? ? ? ? ? ? private ObservableCollection_items;
? ? ? ? ? ? ? public ObservableCollectionItems
? ? ? ? ? ? ?
? ? ? ? ? ? ? ? ? ? ? get
? ? ? ? ? ? ? ? ? ? ?
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? return _items;
? ? ? ? ? ? ? ? ? ? ?
? ? ? ? ? ? ? ? ? ? ? set
? ? ? ? ? ? ? ? ? ? ?
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? if (_items != value)
? ? ? ? ? ? ? ? ? ? ? ? ? ? ?
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? _items = value;
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? NotifyPropertyChanged("Items");
? ? ? ? ? ? ? ? ? ? ? ? ? ? ?
? ? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? }
? ? ? ? ? ? ?
? ? ? ? ? ? ? // Constructor
? ? ? ? ? ? ? public MainPage()
? ? ? ? ? ? ?
? ? ? ? ? ? ? ? ? ? ? InitializeComponent();
? ? ? ? ? ? ? ? ? ? ? clienteDB = new ClienteDataContext(ClienteDataContext.DBConnectionString);
? ? ? ? ? ? ? ? ? ? ? this.DataContext = this;
? ? ? ? ? ? ? ? ? ? ? Loaded += new RoutedEventHandler(MainPage_Loaded);
? ? ? ? ? ? ?
? ? ? ? ? ? ? void MainPage_Loaded(object sender, RoutedEventArgs e)
? ? ? ? ? ? ?
? ? ? ? ? ? ? ? ? ? ? var result = from Cliente r in clienteDB.Cliente
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? select r;
? ? ? ? ? ? ? ? ? ? ? Items = new ObservableCollection(result);
? ? ? ? ? ? ?
? ? ? ? ? ? ? private void add_Click(object sender, RoutedEventArgs e)
? ? ? ? ? ? ?
? ? ? ? ? ? ? ? ? ? ? Cliente c = new Cliente();
? ? ? ? ? ? ? ? ? ? ? c.Nome = txtNome.Text;
? ? ? ? ? ? ? ? ? ? ? clienteDB.Cliente.InsertOnSubmit(c);
? ? ? ? ? ? ? ? ? ? ? clienteDB.SubmitChanges();
? ? ? ? ? ? ? ? ? ? ? Items.Add(c);
? ? ? ? ? ? ?
? ? ? }
Links:
Boas Práticas:
http://msdn.microsoft.com/en-us/library/hh286406(v=vs.92).aspx
Mais informações sobre local database no Windows Phone :
http://msdn.microsoft.com/en-us/library/hh202860(v=vs.92).aspx
http://msdn.microsoft.com/en-us/library/hh202876(v=VS.92).aspx
Alterações do esquema da base de dados:
http://msdn.microsoft.com/en-us/library/hh394018(v=VS.92).aspx







