Bom, tenho andado bem ocupado com alguns projectos pessoais que nem tenho tido muito tempo aqui para o blog, no entanto venho falar de algo que com certeza vai ser bem util para quem desenvolve aplicações web que usem algum recurso de geo-localização. Devido a uma troca de mensagens no GTalk, o responsável pelo projecto que estou a desenvolver perguntou-se se eu conseguiria arrajar uma lista de Distritos, Concelhos e Freguesias de Portugal Continental e Ilhas, foi entõ que parti à procura.

Estava de caras que não seria facil encontrar isto de mão beijada, pois então parti em busca de tal informação, encontrada em alguns sites de vendas de imóveis em Portugal, nas paginas amarelas e também em alguns documentos dos CTT.

Claro que não vou aqui informar a fonte dos dados, mas com cerca de 45 Linhas de código PHP consegui obter todos estes elementos de um Request JSON de uma destes sistemas, e eis o resultado:

3 Tabelas MYSQL prontinhas a usar: Distritos, Concelhos e Freguesias.
Para resumo, este SQL contém:
- 29 Distritos
- 308 Concelhos
- 4.284 Freguesias

Claro que não vou distribuir aqui publicamente, no entanto posso fornecer estas tabelas caso me seja feito um pedido explicando a sua necessidade e também o objecto do seu uso. Por isso, se necessitar disto para um próximo projecto é só entrar em contacto aqui.

P.S. Este poste serve também para provar que os http requests, mesmo em SSL, expõem muitos dados, e com um pouco de criatividade e algum trabalho conseguimos consumir todos os dados do serviço.

Abraço.

© msdevweb for TSW – That Should Work Blog, 2011. | Permalink |No comment | Add to del.icio.us

Post tags: portugal geo-data

A dica flex de hoje mostra como podemos criar um componente TitleWindow que será aberto como um popup em nossa aplicação.

Primeiro vamos definir nosso componente que terá como sua base class a classe TitleWindow.

“MyPopup.mxml“:

?
<?xml version="1.0" encoding="utf-8"?>
<s:TitleWindow xmlns:fx="http://ns.adobe.com/mxml/2009"
			   xmlns:s="library://ns.adobe.com/flex/spark"
			   xmlns:mx="library://ns.adobe.com/flex/mx"
			   title="My popup"
			   close="close_handler()"
			   width="400" height="300">
	<fx:Script>
		[CDATA[
			import mx.managers.PopUpManager;
?
			protected function close_handler():void
			{
				PopUpManager.removePopUp(this);
			}
		]]>
	fx:Script>
?
	<mx:Form>
		<mx:FormItem label="User">
			<s:TextInput width="200" />
		mx:FormItem>
		<mx:FormItem label="Passwd">
			<s:TextInput width="200" />
		mx:FormItem>
		<mx:FormItem>
			<s:Button label="Cancel" click="close_handler()"/>
		mx:FormItem>
	mx:Form>
?
s:TitleWindow>

Repare que o evento close do componente faz uma chamada ao método close_handler(). Na implementação desse método utilizamos a classe Singleton PopUpManager para remover o popup. Entre outras atribuições essa classe gerencia a criação, o posicionamento e a remoção de janelas.

Em seguida vamos implementar nossa application que será responsável por instanciar o componente e abri-lo como um popup.

?
<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
			   xmlns:s="library://ns.adobe.com/flex/spark"
			   xmlns:mx="library://ns.adobe.com/flex/mx">
?
	<s:layout>
		<s:VerticalLayout horizontalAlign="center" verticalAlign="middle"/>
	s:layout>
?
	<fx:Script>
		[CDATA[
			import mx.managers.PopUpManager;
?
			protected function add_clickHandler(event:MouseEvent):void
			{
				PopUpManager.createPopUp(this, MyPopup, true);
			}
?
		]]>
	fx:Script>
?
	<s:Button id="add" label="Add TitleWindow Popup" click="add_clickHandler(event)" />
?
s:Application>

Para saber mais sobre classes Singletons veja:
“Dica Flex – Como criar uma classe Singleton com ActionScript 3.0″

Espero que tenham gostado. Até a próxima!

A dica flex de hoje é rápida e mostra como podemos disparar uma função toda vez que passamos o mouse sobre cada um dos botões do componente ButtonBar. Além disso você pode conferir como podemos adicionar filhos dinâmicamente ao mesmo componente.

?
<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
			   xmlns:s="library://ns.adobe.com/flex/spark"
			   xmlns:mx="library://ns.adobe.com/flex/mx">
?
	<s:layout>
		<s:VerticalLayout verticalAlign="middle" horizontalAlign="center"/>
	s:layout>
?
	<s:ButtonBar id="buttonBar" mouseOver="myLabel.text = 'My function is updating my label ' + new Date()">
		<s:dataProvider>
			<s:ArrayCollection>
				<fx:String>Button 1fx:String>
				<fx:String>Button 2fx:String>
				<fx:String>Button 3fx:String>
				<fx:String>Button 4fx:String>
			s:ArrayCollection>
		s:dataProvider>
	s:ButtonBar>
?
	<s:Button label="Add button"
		click="buttonBar.dataProvider.addItem('Button ' + (buttonBar.dataProvider.length+1) )" />
?
	<s:Label id="myLabel" />
?
s:Application>

Espero que tenham gostado. Até a próxima!

Depois de muito tempo fora dos palcos estou de volta, dessa vez com uma série de tutoriais focados principalmente no desenvolvimento de aplicações para android utilizando o flash builder burrito.

Neste primeiro tutorial eu irei mostrar como criar algumas operações do CRUD em uma aplicação android utilizando um banco de dados local, neste caso o SQLITE. Não vou explicar como criar um novo projeto ou mesmo os componentes de uma aplicação android, para isso assista aos screencasts no site do Igor costa e também no blog da dclick.

Primeiramente vamos criar no nosso arquivo principal a conexão com o banco e também a criação de uma tabela.

protected function createDb():void 

var sqlConnection:SQLConnection = new SQLConnection();

sqlConnection.open(File.applicationStorageDirectory.resolvePath("testeDb.sqlite"));

var stmt:SQLStatement = new SQLStatement();

stmt.sqlConnection = sqlConnection;

stmt.text = "CREATE TABLE IF NOT EXISTS contatos (" +
"id INTEGER PRIMARY KEY AUTOINCREMENT," +
"nome VARCHAR(200) NOT NULL," +
"telefone VARCHAR(45) NOT NULL," +
"email VARCHAR(200) DEFAULT NULL)";

stmt.execute();

A função createDb é executada na método initialize da aplicação.
A variável sqlConnection na linha 3 é responsável pela conexão.
Na linha 5 é criado o arquivo SQLite para a aplicação
Na linha 7 a varável stmt é responsável pelas instruções SQLite.
É criada a conexão na linha 9.
Na linha 11 é a instrução SQLite que será executada, nesse caso a criação da tabela na nossa base testeDb.sqlite.
Na linha 17 é executada a instrução SQLite da linha 11.

Pronto, depois da tabela criada vamos criar a nossa view para poder cadastrar dados nela.

A função para salvar os dados é bem simples. Adicione um evento para o clique do botão e nele adicione o seguinte código.

var sqlConnection:SQLConnection = new SQLConnection();
sqlConnection.open(File.applicationStorageDirectory.resolvePath("testeDb.sqlite"));

var stmt:SQLStatement = new SQLStatement();
stmt.sqlConnection = sqlConnection;

stmt.text = "INSERT INTO contatos (nome, telefone, email) VALUES" +
"('" + txiNome.text + "', '" + txiTelefone.text + "', '" + txiEmail.text + "')";

stmt.execute();

navigator.popView();

Bom para quem já desenvolveu alguma app em Air utilizando o SQLite percebe que a conexão é feita da mesma forma. Se você deseja melhorar seu código (assim como eu) sugiro a leitura do post do Andre Casertano no site da Imasters. Ele mostra como criar uma classe de conexão com o SQLite e também explica um pouco melhor sobre como é feita essa conexão no primeiro posto sobre o assunto.

No código fonte eu coloquei também as operações de update e delete. Esta bastante simples. No próximo post eu prometo melhorar um pouco… =D

Download do fonte.

Se você está começando a trabalhar com RVM no Ubuntu, pode encontrar alguns problemas de configuração quando tentar executar o script/console (Rails 2.x), como por exemplo:

no such file to load -- readline (LoadError)

ou ainda

no such file to load -- openssl (LoadError)

O site oficial do RVM oferece uma solução, mas que não se aplica a todos os ambientes.

Para resolver esse problema é necessário fazer o seguinte:

1) Instale as bibliotecas do openssl e do readline via apt:

$ sudo apt-get install libreadline6 libreadline6-dev openssl libssl0.9.8 libssl-dev libopenssl-ruby

2) Remova a versão instalada do Ruby via RVM e reinstale indicando os diretórios do readline e do openssl:

$ cd 
$ rvm remove 1.8.7
$ rvm install 1.8.7 --with-readline-dir=/usr/include/readline/ --with-openssl-dir=/usr/include/openssl/

Este exemplo aplica-se à versão 1.8.7 do Ruby no Ubuntu 10. Faça as adaptações necessárias para adequar ao seu ambiente. Esta solução foi testada com a versão 2.3.10 do Rails – acredito que pode ser aplicada a outras versões também.

Funcionou com você em outras configurações? Deixe um comentário!

Posts relacionados

• 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 2/2 – Create, Update e DeleteCRUD with RestfulX: Part 2/2 – Create, Update, and Delete“>CRUD com o RestfulX: Parte 2/2 – Create, Update e DeleteCRUD with RestfulX: Part 2/2 – Create, Update, and Delete (2)
• Instalação “avançada” do RestfulX no seu projeto Rails“Advanced” installation of RestfulX into your Rails app“>Instalação “avançada” do RestfulX no seu projeto Rails“Advanced” installation of RestfulX into your Rails app (0)
• Introdução ao RestfulXIntroduction to RestfulX“>Introdução ao RestfulXIntroduction to RestfulX (0)
• Screencast: desenvolvendo uma aplicação com RestfulX em menos de 5 minutos“>Screencast: desenvolvendo uma aplicação com RestfulX em menos de 5 minutos (8)
• Usando checkboxes em uma relação habtm no Rails“>Usando checkboxes em uma relação habtm no Rails (6)
• Instalando o Rails 2 no Debian“>Instalando o Rails 2 no Debian (3)
• Criando XML no Rails com caracteres acentuados“>Criando XML no Rails com caracteres acentuados (0)
• RestfulX – Introdução, instalação, configuração e primera aplicação em 5 minutos“>RestfulX – Introdução, instalação, configuração e primera aplicação em 5 minutos (16)

© Elvis for Elvis Fernandes, 2011. |
Permalink |
Nenhum comentário |
Adicione ao
del.icio.us


Tags: openssl, Rails, readline, ruby on rails, rvm, ubuntu

Visando fomentar o networking e a troca de conhecimentos e experiências entre os participantes da maior comunidade de desenvolvedores do Espírito Santo, venho comunicar que no dia 12 fevereiro, a partir das 9 horas, teremos o primeiro Circuito de Palestras do grupo MSDev-ES.

O evento será composto por 4 palestras no formato 45 + 15 cada, ministradas por membros do MSDev-ES.

Maiores Informações:

?

Programação:

1ª Palestra (09:00 às 10:00):

Social Marketing 2.0
Perguntas frequentes que toda empresa desenvolvedora que quer um aplicativo no facebook deve fazer, os maiores erros cometidos e soluções mais usadas

Palestrante: Rafael Hrasko

–

2ª Palestra (10:00 às 11:00):

Desenvolvendo Sandboxed Solutions com SharePoint 2010
O Microsoft SharePoint Server 2010 adiciona um novo modelo de deployment chamado de sandboxed solutions. Sandboxed solutions são soluções controladas em formato de pacote que possibilitam aos donos de Farms de SharePoint uma nova maneira de mitigar o risco que códigos customizados possam causar de erros para eles. Nesta palestra, explicaremos o que são sandboxed solutions e demonstraremos como criar sandboxed solutions com o Microsoft Visual Studio 2010 e como implementá-las em Farms de SharePoint.

Palestrantes: Fabriccio Bernardes e Luiz Fernando Rosário

–

3ª Palestra (11:00 às 12:00):

Como Errar no Desenvolvimento de Software
Um conjunto de dicas sobre o que não fazer em um projeto de software baseado em experiências de projetos passados.

Palestrante: Denis Ferrari

–

4ª Palestra (12:00 às 13:00):

Case de Sucesso: Implantação do Gerenciamento de Mudanças no Grupo Águia Branca
O objetivo é apresentar a implantação da metodologia de Gestão de Mudanças, no Grupo Águia Branca. Irei apresentar como foi o projeto, as estruturação, as adequações necessárias, além de abordar como hoje a Gestão de Mudanças tem colaborado e sido tratada dentro do Grupo Águia Branca, um dos maiores Grupos empresarias do Brasil.

Palestrante: Vithor da Silva e Silva

–

Clique na imagem abaixo para fazer sua inscrição:

Vejo você lá?

Gustavo fala sobre RabbitMQ, AMQP e Spring-AMQP e o Eduardo continua sua série de posts sobre o Flash Catalyst (um verdadeiro treinamento da ferramenta para você e de graça aqui no blog da DClick).

Click to play

Clique aqui para fazer download deste Podcast.

Pouco mais de 1 mês atrás, no dia 20 de dezembro de 2010, eu peguei o meu Windows Phone 7. Venho acompanhando a história do sistema operacional desde? quando as primeiras informações foram divulgadas e confesso que fiquei empolgado e frustrado no MIX de 2010 por ver tantas informações e novidades legais e não ter ganhado nenhum aparelho, como todos estavam suspeitando na época.

Como o Windows Phone 7 não está disponível no Brasil ainda, tive que procurar uma forma de comprar um no exterior e trazer pra cá. Para complicar ainda mais as coisas, o aparelho que eu queria (LG Optimus 7) não é vendido nos Estados Unidos. Por sorte, tenho um grande amigo que estava morando na França e iria voltar ao Brasil pouco antes do Natal. Fiz algumas pesquisas e encontrei o aparelho que eu queria, desbloqueado, a venda na Amazon França. A parte mais difícil foi fazer a compra no site em francês sem entender uma palavra (3 vivas para os tradutores online).

Pronto, estava tudo certo. Em 1 mês o meu novo celular com WP7 estaria em minhas mãos. Eu só teria que fazer backup dos dados do meu MotoQ e migrar o que fosse possível para o novo aparelho. 2 dias depois de fazer a compra, fui vítma de um sequestro relâmpago e levaram meu celular (é claro que eu não tinha feito o backup ainda né….) junto com um monte de outras coisas. Fui obrigado a comprar outro aparelho para usar nesse meio tempo. Acabei pegando o seu irmão menor, LG Optimus One, com Android 2.2 (saiu super barato graças ao programa de pontos da minha operadora). Devo confessar que fiquei bastante satisfeito com a aquisição, pelo menos até a chegada do novo aparelho.

Agora vamos à parte que interessa, o review do meu LG Optimus 7 com Windows Phone 7.

O aparelho é muito bonito e passa uma sensação de ser bem sólido quando você o segura. Ele é extremamente bem construído, não tendo nenhuma falha de encaixe ou desajuste de nenhum tipo.

Os botões são fáceis de pressionar, sendo que o único que me desagradou foi o botão de ligar, que também serve para travar e destravar o aparelho, mas explicarei melhor mais adiante. Aliás, por falar em botões, esse é o ÚNICO aparelho com Windows Phone 7 lançado até agora em que os 3 botões frontais (voltar, home e busca) são físicos ao invés de touch. Em alguns dos outros aparelhos o botão “home” também é físico, mas o voltar e busca de todos os outros é touch, facilitando que você acidentalmente os toque enquanto usa uma aplicação ou jogo e acabe saindo da aplicação ou da tela em que estava.

Os aparelhos com Windows Phone 7 lançados até agora se diferenciam bem pouco, pois os fabricantes estão todos seguindo praticamente ao pé da letra as especificações mínimas de hardware impostas pela Microsoft para a plataforma. Os diferenciais desse aparelho são:

• Os 3 botões físicos para voltar, home e busca, ao invés de botões touch.
• Memória de 16 GB (a maioria dos aparelhos tem memória de “apenas” 8 GB)
• Recurso DLNA, que permite executar mídia do aparelho em dispositivos compatíveis, como TVs, home theathers, etc.
• Tela Gorilla Glass, praticamente impossível de riscar (descobri isso com quanse um mês de uso).

O aparelho encaixa bem na mão e é fácil de manusear com apenas 1 das mãos, mas eu acho que a LG fez algumas escolhas equivocadas no posicionamento de alguns ítens.

• Os botões de volume ficam do lado esquerdo do aparelho, quando na maioria dos outros telefones ele é do lado direto. Isso por si só não é um problema, mas fez com que houvesse botões em todos os lados do aparelho. Seria melhor se pelo menos um lado do aparelho não tivesse botões para que pudessemos segurá-lo ou apoiá-lo sem que nada fosse pressionado.
• O plug micro-usb que serve para sincronismo e carregar o aparelho fica do lado direto, onde normalmente ficam os botões de volume e ainda por cima é coberto por uma lingueta que deve ser removida com a unha e virada de lado para conectar o cabo (já que ela fica presa para não se perder). Para mim isso são 2 erros consecutivos: O primeiro foi colocar o plug de carregador/dados na lateral do aparelho e o segundo colocar essa tampinha safada que serve mais para irritar do que para proteger.
• O botão de ligar o aparelho, que também serve para bloquear e desbloquear, fica na parte superior, do lado direito. Ele é propositalmente pequeno e mais firme ao toque para que não seja pressionado acidentalmente, mas como os lados superior e inferior do aparelho são ligeiramente inclinados para frente, é difícil pressioná-lo com o indicador, o que torna necessário deslisar o telefone um pouco na mão para pressionar com o polegar (correndo o risco de derrubar o aparelho no processo), ou pressionar o botão com a outra mão.

Fora os detalhes acima, todos os botões são muito bem feitos e trabalham sobre uma pressão perfeita: nem duros demais, nem leves demais. Você difícilmente pressionará um deles acidentalmente.

Ele pesa 157 gramas, ou seja, é 30g mais pesado do que o LG Optimus One que eu havia acabado de comprar e 20g mais pesado do que o iPhone 4. Mas para ser justo, devo dizer que sua tela é de 3,8 polegadas, em comparação à de 3,2 do Optimus One e à de 3,5 do iPhone 4.

Ao contrário do que aconteceu com o Android, não tive nenhum problema para digitar no teclado virtual dele, tanto pelo tamanho da tela ser bom para minha mão, quanto pela qualidade e precisão do teclado virtual do WP7. A única reclamação que tenho do teclado é que não é possível digitar alguns caracteres acentuados se o teclado estiver configurado para inglês, então é necessário mudar para espanhol. Por outro lado, o telefone suporta mais de um perfil de teclado simultâneamente, tornando possível que você escolha se quer teclado em inglês ou espanhol enquanto digita. Se você escreve bastante em português vai achar melhor desabilitar o corretor do teclado com sugestão de palavras pois esse idioma ainda não é suportado (mas está previsto para o update do segundo semestre, junto com outras línguas e novas funcionalidades).

O sistema operacional é excelente, mesmo se tratando de uma primeira versão. Nesse tempo de uso eu não sofri nenhum travamento e ele responde extremamente rápido a todos os seus comandos (principalmente nas aplicações nativas, como o email ou navegador de internet). Há algumas coisas que precisam ser melhoradas e algumas funcionalidades que ainda não estão presentes, mas acho melhor deixar isso para um outro post.

Para quem pretende usar um aparelho desses no Brasil, é necessário saber de algumas coisas:

• Compre um aparelho que esteja sem bloqueio de operadora. A maioria dos aparelhos estão sendo vendidos bloqueados para as operadoras e vinculados à contratos de fidelidade. Os aparelhos desbloqueados são um pouco mais caros e difíceis de encontrar.
• É necessário um Windows Live ID para acessar o Market Place e sincronizar contatos. O seu Live ID deve estar vinculado à um dos países onde o aparelho já foi lançado. Você pode vincular mais de um Live ID ao aparelho, mas apenas o primeiro será usado para acessar o Market Place ou Xbox Live, no caso dos jogos. Esse Live ID primário só pode ser trocado fazendo um soft reset no aparelho. Se você já tem um gamertag do Xbox vinculado ao seu Live ID, ele será utilizado pelo jogos do aparelho também. Se o seu gamertag for da Xbox Live Brasil, não vai funcionar, e você terá que criar um novo Live ID com endereço americano ou de outro país onde o aparelho já tenha sido lançado para poder usar no aparelho.
• O WP7 sincroniza a lista de contatos e agenda de todos os Live IDs, contas do Google e Facebook que você cadastrar. Você pode mudar as opções de sincronismo dessas contas, exceto do Live ID principal. Todos os seus contatos terão uma cópia online, que será facilmente baixada para um outro WP7, caso você o vincule ao mesmo Live ID. Isso é ótimo para quando você decidir trocar de aparelho daqui a algum tempo.
• Para desbloquear o aparelho para desenvolvimento, é necessário que o regional settings do computador, do telefone e da sua Live ID estejam iguais. O desbloqueio é feito usando um aplicativo que vem junto com o SDK de desenvolvimento. Para poder desbloquear, é necessário também que você tenha se cadastrado como desenvolvedor e pago a taxa de US$ 99,00 + impostos (que vale por 1 ano). Esse cadastro ficará vinculado ao seu Live ID (pode ser um live ID brasileiro), que é o que deve ser utilizado para desboquear o aparelho. Cada cadastro desses dá direito a desbloquear 3 aparelhos. Se for uma empresa e precisar desbloquear mais aparelhos, deve entrar em contato com a Microsoft.

Por enquanto é só. Em breve publicarei mais informações sobre o sitema operacional e sobre a plataforma de desenvolvimento.

FXG: Leveza no design para aplicações Flex Palestrante: Fábio Vedovelli Data/Hora: 12/03/2011 às 14:00 Descrição: Usar imagens para criar skins para aplicações Flex ficou para trás, junto com a versão 3 do framework. No Flex 4 temos o FXG (http://en.wikipedia.org/wiki/FXG) que nos permite usar e abusar de gradientes, bordas, sombras, states etc. tornando o desenvolvimento [...]

Olá Pessoal!

Depois de algum tempo estou mostrando um componente no qual uso seguidamente trata-se de duas listas para Drag and Drop, porém não posso disponibilizar o fonte ainda ( vou ver se eu posso hehe ) talvez se eu der uma enxugada nele eu poste ai para vcs leitores, mas para verificar como fica o fonte é mais ou menos isso abaixo.

Fonte:

xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"
	xmlns:fborella="br.com.fborella.*" backgroundColor="white">
	<mx:Script>
		[CDATA[
			import mx.collections.ArrayCollection;
?
			[Bindable]
			public var disciplinas:ArrayCollection=
				new ArrayCollection(
				[{descrdisciplina: "PORTUGUES"},
				 {descrdisciplina: "MATEMATICA"},
				 {descrdisciplina: "CIÊNCIAS"},
				 {descrdisciplina: "HISTÓRIA"},
				 {descrdisciplina: "GEOGRAFIA"},
				 {descrdisciplina: "EDUCAÇÃO FÍSICA"},
				 {descrdisciplina: "ENSINO RELIGIOSO"},
				 {descrdisciplina: "FÍSICA"}]);
?
			[Bindable]
			public var droppedDisciplinas:ArrayCollection=
				new ArrayCollection(
				[{descrdisciplina: "QUÍMICA"},
				{descrdisciplina: "BIOLOGIA"}]);
		]]>
	mx:Script>
	<fborella:FList width="100%" height="100%" id="lista"
			dataProvider="{disciplinas}" tDataProvider="{droppedDisciplinas}"
			labelField="descrdisciplina" tLabelField="descrdisciplina"
			filtrarLabel="Todas Disciplinas" tFiltrarLabel="Disciplinas Associadas">
	fborella:FList>
mx:Application>

Demo:

Arraste, movimente os objetos com os botões etc, observe os tool tips que vai ajudar na navegação.

Até em breve
Comentem.

Felipe Borella