badulaques, gadgets e outros…

O Método toSource() do Javascript é uma mão na roda para quem trabalha com JavaScript orientado a objetos e consiste basicamente em mostrar como String todos os argumentos de um objeto.

Para usar, basta chamar o método toSource() em um objeto:

alert(objeto.toSource())

E você verá todos os argumentos da instância “objeto”.

Um recurso bem interessante do Google Maps é poder traçar rotas a partir de um endereço ou CEP de algum para se chegar a algum lugar.

Neste exemplo vamos usar um destino fixo e solicitar ao usuário o endereço de partida.

Antes de mais nada, precisamos adquirir a chave API do Google Maps digitando a URL em que sua página será hospedada (você consegue gerar chave para http://localhost também).

De posse da chave, vamos criar uma página HTML simples e incluir a API do google maps já com a nossa chave:

<script type="text/javascript" src=http://maps.google.com/maps?file=api&v=2.x&key=sua-chave"></script>

Agora vamos ao JavaScript com as funções necessárias para carregar o mapa e traçar a rota:

			// declaração de variáveis
			var map;
			var marker;

			// função que carrega o mapa inicial marcando o nosso ponto de chegada
			function load() {
				// verifica a compatibilidade do google maps
			  if (GBrowserIsCompatible()) {

				// Instancia o objeto e aplica na div 'mapa'
				map = new GMap2(document.getElementById("mapa"));
				// Especifica as coordenadas do centro do mapa e o zoom
				map.setCenter(new GLatLng(-20.339884,-40.287469), 14);
				// Especifica o div em que será exibido o detalhamento da rota
				directionsPanel = document.getElementById("route");
				gdir = new GDirections(map, directionsPanel);
				// Adiciona o evento de erros a função handleErrors
				GEvent.addListener(gdir, "error", handleErrors);

				//Adiciona barra de zoom e setas para movimentação no mapa
				map.addControl(new GSmallMapControl());

				//Adiciona um marcador nas coordenadas de chegada
				var point = new GLatLng(-20.339884, -40.287469);
				marker = new GMarker(point);
				map.addOverlay(marker);
				marker.title = "Shopping Vitória";

			  }
			}

			// Traça a Rota
			function setDirections(fromAddress, toAddress, locale){
				gdir.load("from: " + fromAddress + " to: " + toAddress,{"locale": "pt_BR"});
				// Remove o marcador inicial
				map.removeOverlay(marker);
			}

			// Especifica a origem e o destino
			function tracarRota() {
				setDirections(document.getElementById('from').value, "Fernando Ferrari, 514, Goiabeiras, Vitória, ES");
			}

			// Função com tratamentos de erros
			function handleErrors()
			{
			   if (gdir.getStatus().code == G_GEO_UNKNOWN_ADDRESS)
				 alert("Não foi possível achar o endereço. Isso pode ter ocorrido porque o endereço digitado ainda não está inserido no googlemaps ou porque foi digitado incorretamente.\nCódigo do Erro: " + gdir.getStatus().code);
			   else if (gdir.getStatus().code == G_GEO_SERVER_ERROR)
				 alert("A geocoding or directions request could not be successfully processed, yet the exact reason for the failure is not known.\n Código do Erro: " + gdir.getStatus().code);
			   else if (gdir.getStatus().code == G_GEO_MISSING_QUERY)
				 alert("The HTTP q parameter was either missing or had no value. For geocoder requests, this means that an empty address was specified as input. For directions requests, this means that no query was specified in the input.\n Código do Erro: " + gdir.getStatus().code);
			   else if (gdir.getStatus().code == G_GEO_BAD_KEY)
				 alert("Key inválida. Procure a key correta para este domínio no site do google. \n Código do Erro: " + gdir.getStatus().code);
			   else if (gdir.getStatus().code == G_GEO_BAD_REQUEST)
				 alert("A directions request could not be successfully parsed.\n Código do Erro: " + gdir.getStatus().code);
			   else alert("Ocorreu um erro inesperado.");
			}

Lembrando que na Tag “Body” é necessários chamarmos a função Load() para carregar o mapa inicial com nosso ponto de chegada marcado:

Para finalizar, o nosso formulário HTML deverá chamar a função tracarRota() como no código abaixo:

					Endereço de partida: 


				

Confira o exemplo funcional

Vamos construir um sistema simples de autenticação utilizando o ExtJS. Feito o Download, vamos iniciar nosso sistema carregando a biblioteca do ExtJS para montarmos o nosso sistema de login. Nosso ponto de partida é o arquivo Index.php com a estrutura HTML a seguir:

Index.php

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
	<head>
	<link rel="stylesheet" type="text/css" href="/igs/includes/ext/resources/css/ext-all.css">
	<script type="text/javascript" src="/igs/includes/ext/adapter/ext/ext-base.js"></script>
	<script type="text/javascript" src="/igs/includes/ext/ext-all.js"></script>
	<script type="text/javascript" src="login.js"></script>
	</head>
	<body></body>
</html>

Obviamente, modifique os paths de acordo com seu diretório EXT. Veremos o código do Login.js a seguir

Login.js

A seguir vem o login.js. Ele cria o formulário, renderiza uma janela popup, exibe a janela ao usuário, submete os dados via AJAX, e lida com o sucesso e o fracasso de resposta dependendo se o usuário inseriu os dados com sucesso.

Ext.onReady(function(){
    Ext.QuickTips.init();

	// Crie uma variável para armazenar nosso EXT Form Panel 
	// Assinamos várias opções de configuração	 
    var login = new Ext.FormPanel({
        labelWidth:80,
        url:'login.asp',
        frame:true,
        title:'Entre com seu Login',
        defaultType:'textfield',
	monitorValid:true,
	// Atributos específicos para os campos de usuário/senha. 
	// O atributo "name" define o nome da variável que será enviada do servidor.
        items:[{
                fieldLabel:'Usuário',
                name:'loginUsername',
                allowBlank:false
            },{
                fieldLabel:'Senha',
                name:'loginPassword',
                inputType:'password',
                allowBlank:false
            }],

	// Toda a mágica que acontece depois que o usuário clique no botão     
        buttons:[{
                text:'Login',
                formBind: true,
                // Função que é executada quando o usuário clicar no botão 
                handler:function(){
                    login.getForm().submit({
                        method:'POST',
                        waitTitle:'Conectando',
                        waitMsg:'Enviando dados...',

			// Função que executa (sucesso ou falha) quando o servidor responder. 
			// A que será executada é determinada pela 
			// responsta que virá do login.asp como mostrado abaixo. O servidor responde 
			// um JSON válido. 
			// Algo como: response.write "{ success: true}" ou
			// responde.write "{ success: false, errors: { reason: 'Falha no Login. Tente novamente.' }}" 
			// dependendo da lógica que contiver no código de retorno do servidor.
			// Se o sucesso ocorrer, o usuário será notificado com uma mensagem de alerta messagebox, 
			// e quando ele clicar em "Ok", então será redirecionado a qualquer página
			// que você tenha definido para redirecionamento. 

                        success:function(){
                        	Ext.Msg.alert('Status', 'Login Successful!', function(btn, text){
				   if (btn == 'ok'){
		                        var redirect = 'test.php';
		                        window.location = redirect;
                                   }
			        });
                        },

			// Função de falha, veja comentário sobre re: sucesso e falha. 
			// Você poderá ver aqui, se o login falhar, chama uma messagebox
			// com detalhes da falha  

                        failure:function(form, action){
                            if(action.failureType == 'server'){
                                obj = Ext.util.JSON.decode(action.response.responseText);
                                Ext.Msg.alert('Login Failed!', obj.errors.reason);
                            }else{
                                Ext.Msg.alert('Warning!', 'Authentication server is unreachable : ' + action.response.responseText);
                            }
                            login.getForm().reset();
                        }
                    });
                }
            }]
    });

	// Aqui é criado uma janela para agregar o formulário. 
	// O objeto login é passado como ítem desta janela.       
    var win = new Ext.Window({
        layout:'fit',
        width:300,
        height:150,
        closable: false,
        resizable: false,
        plain: true,
        border: false,
        items: [login]
	});
	win.show();
});

Login.php

<?php
$loginUsername = isset($_POST["loginUsername"]) ? $_POST["loginUsername"] : "";

if($loginUsername == "f"){
    echo "{success: true}";
} else {
    echo "{success: false, errors: { reason: 'Falha no login. Tente novamente.' }}";
}
?>

Ou, você pode usar PHP avançado com array associativo e a função json_encode, e renderizar a resposta em JSON. Isso pode ser útil para não ter trabalho braçal caso esteja utilizando um JSON mais complexo.

<?php
$loginUsername = isset($_POST["loginUsername"]) ? $_POST["loginUsername"] : "";

if($loginUsername == "f"){
    $result["success"] = true;
} else {
    $result["success"] = false;
    $result["errors"]["reason"] = "Falha no Login. Tente novamente.";
}
echo json_encode($result);
?>

Você vai notar uma linha no login.js que redireciona para text.php caso um login bem sucedido aconteça. Esta pode ser, obviamente, qualquer que seja a página principal de sua aplicação.

Baseado no original de David Fitch: Tutorial: Basic Login