| |
Aug 09
Hoje irei dar um exemplo de como usar JSON com Prototype em uma chamada via Ajax. Não estou muito acostumado com o Prototype mas comecei a usar por ser um especificação de um projeto que estou trabalhando atualmente.
O JSON é um acrônimo para “JavaScript Object Notation” e é um padrão para a troca de mensagens. JSON é muito usado em chamadas Ajax por ser mais simples e mais leve que SOAP que usa XML.
Abaixo segue um exemplo de um objeto JSON que irei usar neste tutorial.
Crie um arquivo chamado conteudo.htm e insira o código abaixo.
{ "jogos" : [
{ "nome": "World of Warcraft", "preco": "49,90" },
{ "nome": "Diablo 3", "preco": "89,90" },
{ "nome": "StarCraft 2", "preco": "49,90" }
]
}
Agora basta criar um arquivo com o nome index.htm e inserir o conteúdo abaixo.
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/prototype/1.6.1.0/prototype.js"></script>
</head>
<body>
<input type="button" name="pesquisar" onclick="pesquisar();" value="pesquisar"/>
<script>
function pesquisar () {
var request = new Ajax.Request('conteudo.htm', {
'method' : 'post',
'parameters' : {
'codigo' : '1'
},
'onComplete' : function(response) {
var text = response.responseText.stripTags();
// Transformo o texto em objeto
var objeto = text.evalJSON();
var jogos = objeto.jogos;
var str = "";
jogos.each(function(jogo) {
str += jogo.nome + ' ';
str += jogo.preco + '\n';
});
alert(str);
}
});
}
</script>
</body>
</html>
Agora é necessário que os dois arquivos estejam no mesmo diretório para que o exemplo funcione.
Clicando no botão pesquisar será feita uma consulta via Ajax para conteudo.htm retornando os valores do arquivo.
Caso tenha alguma duvida uma outro opinião sobre o Post deixe um comentário que terei prazer em ajudar.
Comentários são bem vindos assim posso melhorar a qualidade dos tutoriais e Posts aqui apresentados.
Compartilhe com seus amigos:
Tags: ajax, javascript, JSON, Prototype, SOAP, XML
Jun 28
Esta semana descobri um problema em se usar nome da classes de estilo para identificação em funções javascript. A situação foi que outro programador ao migrar o layout do sistema apagou o nome de classes que estavam sendo usadas no JS via Prototype para validação de campos. Como não existia um padrão para o nome das classes minha solução para evitar futuros problemas foi criar um padrão de nomenclatura “jsNomeDaClasse” assim quando alguem ver o “js” na frente do nome da classe indica uma referencia para uma funcao JS.
No exemplo abaixo eu usei o padrão jsNomeDoBotao para que se algum programador ver o nome dessa classe saiba que tem uma função JS atribuida e não apague ou altere o nome
da classe em uma manutenção ou troca de layout do sistema.
<html>
<head>
<title>Validar</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
</head>
<body>
<form>
<input class="jsNomeDoBotao" type="button" name="botao_1" value="botao 1" /><br/>
<input class="jsNomeDoBotao" type="button" name="botao_2" value="botao 2"/><br/>
<input class="jsNomeDoBotao" type="button" name="botao_3" value="botao 3"/><br/>
<input class="jsNomeDoBotao" type="button" name="botao_4" value="botao 4"/><br/>
<input class="jsNomeDoBotao" type="button" name="botao_4" value="botao 5"/>
</form>
<script type="text/javascript">
// Adiciono um alert para todos os inputs com o nome de class jsNomeDoBotao.
$(".jsNomeDoBotao").bind("click", function(event) {
alert(this.name);
});
</script>
</body>
</html>
Caso tenha alguma duvida uma outro opinião sobre o Post deixe um comentário que terei prazer em ajudar.
Comentários são bem vindos assim posso melhorar a qualidade dos tutoriais e Posts aqui apresentados.
Compartilhe com seus amigos:
Tags: javascript, padrão, Prototype
Apr 16
Mudando um pouco do foco do Blog achei importante compartilhar esta informação sobre a nova Dashboard do Xbox 360 que saiu esta semana que libera o uso de PenDrive USB para gravar jogos e que também liberou a instalação de jogos no HD dos consoles banidos da Live. A atualização é simples e pode ser feita via PenDrive. Basta o pendrive estar formatado como FAT32 e baixar este arquivo e descompactar na raiz do drive USB. Coloque o Pendrive na porta USB traseira do seu Xbox 360 com ele desligado. Quando ligar o console ele irá reconhecer o dispositivo e irá começar a atualização. Ou se preferir conecte o pendrive no console ligado e vá nos arquivos do sistema e clique no dispositivo USB que ele tambem irá fazer o Update.
Segue o link do site da MS de onde peguei a atualização.
Caso tenha alguma dúvida deixe um comentário que terei prazer em ajudar.
Comentários são bem vindos assim posso melhorar a qualidade dos tutoriais aqui apresentados.
Compartilhe com seus amigos:
Tags: Dashboard, PenDrive, Xbox 360
Apr 10
Faz um bom tempo que não posto nada mas agora estou voltando e irei criar tutoriais básicos sobre Java.
Eu a pouco tempo parei de trabalhar com PHP para começar com Java. Não estou deixando o PHP de lado apenas mudei de linguagem para melhorar meu salário. AS vagas de PHP aqui em Curitiba estão com salários menores que as de Java. Continuo trabalhando com Web e os tutoriais de PHP irão continuar.
Comecei a fazer Pos em Java na UTFPR e na aula de nivelamento foi pedido para criar um algoritmo para números primos.
Encontrei uma boa explicação da lógica dos números primos no Yahoo! Respostas e fiz o código baseado nele.
import java.io.IOException;
/*
* To change this template, choose Tools | Templates
* and open the template in the editor.
*/
/**
*
* @author Marcelo Korjenioski
*/
public class NumerosPrimos {
public static void main(String[] args) {
System.out.println("Entre com valor");
byte[] b = new byte[10]; //buffer
try {
System.in.read(b);
int numero = Integer.parseInt(new String(b).trim());
for (int i = 0; i <= numero; i++) {
if (primo(i)) {
System.out.println(i);
}
}
} catch (IOException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
}
public static boolean primo(int numero) {
boolean resultado = true;
// numero 1 não é primo pois é divisivel apenas por ele mesmo
if(numero <= 1) {
resultado = false;
} else if(numero % 2 == 0 &amp;&amp; numero > 2) {
// Feita a verificacao apenas para otimizar o codigo
// aqui eu descarto todos os numero pares divisiveis por 2 maior que 2 assim so vai sobrar os impares
resultado = false;
} else if(numero % 3 == 0 &amp;&amp; numero > 3) {
// Feita a verificacao apenas para otimizar o codigo
// agora eu tiro todos os numero impares divisiveis por 3 maior que 3.
resultado = false;
}else {
// numero com raiz exata não é primo.
int raiz = (int)Math.sqrt(numero) + 1;
// verifico se o numero é divisivel por algum outro numero menor que ele.
for(int i=3;i<raiz;i+=2) {
// caso divida com algum numero ele não é primo e paro o loop.
if(numero % i ==0) {
resultado = false;
break;
}
}
}
return resultado;
}
}
Caso tenha alguma duvida deixe um comentário que terei prazer em ajudar.
Comentários são bem vindos assim posso melhorar a qualidade dos tutoriais aqui apresentados.
Compartilhe com seus amigos:
Tags: Java, NumerosPrimos, UTFPR, Yahoo! Respostas
Feb 11
Criei uma solução para adicionar HTML no form do Zend é simples e eficiente
Basta criar um classe no Library com o nome Htmlform.php e adicionar o código
<?php
class Htmlform extends Zend_Form_Element_Xhtml {
public $helper = 'formNote';
}
?>
Agora no Formulário você irá chamar ela usando.
$html = new Htmlform('nome_do_elemento');
$html->setValue('<strong>teste</strong>');
$this->addElement($html);
Caso tenha alguma duvida deixe um comentário que terei prazer em ajudar.
Comentários são bem vindos assim posso melhorar a qualidade dos tutoriais aqui apresentados.
Compartilhe com seus amigos:
Tags: Form, Framework, HTML, Zend
Feb 08
Desde semana passada o antigo webservice dos correios parou de funcionar com PAC.
Foi feita a correção do código e agora o PAC esta funcionando novamente.
Sistema para Calcular Frete 1.1
Documentação para utilizar o webservice dos Correios para efetuar o calculo de forma personalizada.
SCPP_Manual_Implementacao_Calculo_Remoto_de_Precos_e_Prazos
Abaixo segue o código para manipular os dados do webservice usando o PHP.
Segue o exemplo do código abaixo funcionando.
<?php
/**
* Faz consulta no webservice dos correios e gera array dos valores.
* @copyright Phaneronsoft
* @author Marcelo Korjenioski - faleconosco@phaneronsoft.com
* @see http://www.phaneronsoft.com
* @filesource correios.php
* @version 1.0
*/
// PESO: Peso total do pacote em Quilos, caso seja menos de 1Kg, ex.: 300g, coloque 0.300
define('PESO',0.300);
// COMPRIMENTO: comprimento do volume em centímetros - somente número de 16 a 60
define('COMPRIMENTO',30);
// ALTURA: altura do volume em centímetros - somente número de 2 a 60
define('ALTURA',15);
// LARGURA: largura do volume em centimetros - somente número de 5 a 60
define('LARGURA',20);
// CODIGO_SERVICO: É possivel fazer mais de uma consulta ao mesmo tempo, basta separar os códigos por virgula.
// Neste caso PAC 41106 e SEDEX 40010
define('CODIGO_SERVICO','41106,40010');
// CEP_ORIGEM: seu CEP com 8 dígitos - somente números
define('CEP_ORIGEM','81010210');
// CEP_DESTINO: CEP do seu cliente com 8 dígitos - somente números
define('CEP_DESTINO','60245965');
// Crio um objeto para manipular o XML.
$doc = new DomDocument;
// Carrega o arquivo XML com um arquivo DOMDocument
$doc->Load("http://shopping.correios.com.br/wbm/shopping/script/CalcPrecoPrazo.aspx?StrRetorno=xml&nCdServico=" . CODIGO_SERVICO . "&nVlPeso=" . PESO . "&sCepOrigem=" . CEP_ORIGEM . "&sCepDestino=" . CEP_DESTINO . "&nCdFormato=1&nVlComprimento=" . COMPRIMENTO . "&nVlAltura=" . ALTURA . "&nVlLargura=" . LARGURA);
// Defino o nome do elemento pai (root).
$root = $doc->getElementsByTagName('cServico');
// Carrega o arquivo XML com um arquivo DOMDocument
$correios = "http://shopping.correios.com.br/wbm/shopping/script/CalcPrecoPrazo.aspx?StrRetorno=xml&nCdServico=" . CODIGO_SERVICO . "&nVlPeso=" . PESO . "&sCepOrigem=" . CEP_ORIGEM . "&sCepDestino=" . CEP_DESTINO . "&nCdFormato=1&nVlComprimento=" . COMPRIMENTO . "&nVlAltura=" . ALTURA . "&nVlLargura=" . LARGURA;
// Defino o nome do elemento pai (root).
$root = $doc->getElementsByTagName('cServico');
// Defino o nome dos elementos filhos no arquivo XML que eu desejo.
$children = array('Valor','PrazoEntrega');
// Faço um loop para pegar todos os elementos pai (root) encontrados.
$valor = array();
for ($i=0; $i < $root->length; $i++) {
// Pega o valor do atributo do elemento pai (root).
$id = $root->item($i)->getElementsByTagName('Codigo')->item(0)->nodeValue;
// Busca por elementos filhos (child) definidos no array
foreach ($children as $child) {
$valor[$id][$child] = $root->item($i)->getElementsByTagName($child)->item(0)->nodeValue;
}
}
echo '<pre>';
var_dump($valor);
Caso tenha alguma duvida deixe um comentário que terei prazer em ajudar.
Comentários são bem vindos assim posso melhorar a qualidade dos tutoriais aqui apresentados.
Compartilhe com seus amigos:
Tags: CEP, correios, Frete, manual, PAC, Sedex, webservice
Nov 25
— — — — — — — — — —
#!/bin/bash
echo “Fala ae Mundo!”
— — — — — — — — — —
Está ai o seu primeiro Shell Script, vou explicar de forma mais detalhada:
Abra seu terminal de comando e nele vamos navegar até a pasta /tmp (caso não tenha a pasta tmp, você pode criar ela no diretório /home, usando o comando mkdir tmp
Agora que estamos na pasta /home/tmp, vamos criar um arquivo chamado: 1shell.sh, para criar um arquivo vazio basta usar o comando touch “nomedoarquivoeextensão” (sem as aspas).
Utilize o comando ls para exibir os arquivos que estão na pasta /home/tmp para certificar-se que seu 1shell.sh foi criado corretamente.
Vamos para a edição deste novo shellscript, mas antes uma pequena comparação para facilitar a vida de todos, o que é um shellscript se não um .bat do linux  , ok voltando a edição: abra seu arquivo shell com o editor de texto vi, para isso digite: vi 1shell.sh.
Dentro do editor aperte a tecla i para incluir seu texto e digite como está la em cima no começo do post.
A linha #!/bin/bash é o que indica para o linux que seu arquivo é um shellscript. Depois de digitar o texto, precione ESC para parar de incluir e digite :wq, esse ultimo comando é salvar e sair. Certo antes de executar seu shell você deve dar as permissões necessarias para ele rodar como um executavel.
Para isso você deve usar o comando chmod +x “nomedoarquivo”. Fazendo isso você vai alterar a permissão dele para que possa ser executavel.
Agora vamos ao teste  digite: ./1shell.sh e veja o resultado na tela!!!
root@intranet:/home# mkdir tmp
root@intranet:/home# cd tmp
root@intranet:/home/tmp# ls
root@intranet:/home/tmp# touch 1shell.sh
root@intranet:/home/tmp# ls
1shell.sh
root@intranet:/home/tmp# vi 1shell.sh
reading 1shell.sh
root@intranet:/home/tmp# chmod +x 1shell.sh
root@intranet:/home/tmp# ./1shell.sh
Fala ae Mundo!
root@intranet:/home/tmp#
Logo vou explicar mais comandos e com eles você podera incrementar seu shell, e até mesmo programar nele!
Abraços e até a proxima.
Compartilhe com seus amigos:
Tags: linux, script, shell
Nov 20
Descobrir ID de elemento através de uma Class usando JQuery é o tema de hoje.
Eu não sou o tipo do programador que fica se preocupando com a quantidade de linhas por arquivo.
Gosto mesmo é de criar um código simples e de fácil manutenção. Esta semana estava querendo colocar
um efeito “slide” em algumas listas porem não queria criar uma função para cada lista. Então resolvi
criar uma classe comum para elas e atribuir IDs para os botões e para as listas. Desta maneira foi simples
resolver meu problema pois posso identificar os IDs dos elementos através da classe.
Segue o código abaixo para explicar melhor a situação.
Segue o exemplo funcionando
<head>
<title>Descobrir id de elemento usando uma classe com JQuery</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<style type="text/css">
ul {list-style:none;}
* {margin:0;padding:0;border:0px;}
html {height:100%;}
.agrupa_programacao {float:left;display:inline;width:970px;margin-top:30px;}
.divisao_programacao {float:left;display:inline;width:230px;margin-right:10px;}
.lista_programacao,.lista_programacao2 {float:left;display:inline;width:228px;margin-top:5px;background:#fff;border:1px solid #bbb;}
.lista_programacao2 {margin-top:0px;border-top:0px}
.tit_programacao, .tit_programacao2, .tit_programacao3 {float:left;display:inline;width:198px;height:20px;background:#acbcc0 url(../img/seta.jpg) no-repeat 9px 16px;padding:12px 0 12px 30px;text-align:left;font:14px Verdana, Arial, Helvetica, sans-serif;font-weight:bold;color:#fff;border-bottom:1px solid #fff;}
.tit_programacao2 {color:#133c8b;background:#f4f1f1;}
.tit_programacao3 {background:#d9eff3 url(../img/seta2.gif) no-repeat 9px 7px;padding:5px 0 5px 30px;color:#133c8b;font:bold 12px Verdana, Arial, Helvetica, sans-serif;}
h3.tit_programacao3{border-left:1px solid #BBBBBB;border-right:1px solid #BBBBBB;cursor:pointer;}
.txt_programacao, .txt_programacao2, .txt_programacao3 {float:left;display:inline;width:198px;padding:10px 15px 10px 15px;background:#f4f1f1;font:11px Verdana, Arial, Helvetica, sans-serif;color:#5e5e5e;border-bottom:1px solid #fff;}
.txt_programacao2 {background:#d7d7d7;}
.txt_programacao3 {background:#fff;}
</style>
</head>
<body>
<div>
<h3 id="frutas">Frutas</h3>
<ul id="frutas_lista">
<li id="1">Abacaxi</li>
<li id="2">Pera</li>
<li id="3">Maça</li>
</ul>
<h3 id="verduras">Legumes</h3>
<ul id="verduras_lista">
<li id="1">Alface</li>
<li id="2">Couve</li>
<li id="3">Cenoura</li>
</ul>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
<script language="javascript" type="text/javascript">
$(document).ready(function(){ // Inicio o script apenas quando toda a pagina estiver carregada.
// Atribuo a função onclick em todos os elementos com a classe informada
$(".tit_programacao3").click(function () {
//Pego o ID do elemento.
var id = $(this).attr('id');
// Como defini os ids para o titulo e lista, apenas faço uma
// concatenação para identificar a lista para receber a ação.
if ($("#" + id + "_lista").is(":hidden")) {
$("#" + id + "_lista").slideDown("normal");
} else {
$("#" + id + "_lista").slideUp("normal");
}
});
});
</script>
</body>
</html>
Associando a classe com id é possível reduzir a quantidade de código facilitando a manutenção e agilizando o desenvolvimento.
Comentários são bem vindos assim posso melhorar a qualidade dos tutoriais aqui apresentados.
É isso pessoal uma ótima semana e até o próximo post.
Compartilhe com seus amigos:
Tags: Descobrir, JQuery, Listas
Oct 28
Hoje estava conversando com um amigo que começou a estudar AJAX
para fazer uma entrevista de emprego para programador Jr e que pediam conhecimentos básicos de PHP, AJAX e JQuery.
Perguntei para ele o que você entende por AJAX?
“É um bagulho que pega informações do lado servidor sem
precisar recarregar a página.”
A resposta esta certa e o conceito é este.
Então hoje resolvi criar um post sobre o que é o tal de AJAXem um
exemplo pratico e simples de entender que mostrei para meu amigo.
Vamos usar o JQuery para fazer a conexão AJAX.
No exemplo vamos pegar o conteúdo de uma pagina “texto.html” e adicionar
o conteúdo na página “index.html” em uma tag span.
Vamos criar uma página index.html com o código abaixo.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>EXEMPLO BASICO DO USO DO AJAX COM JQUERY</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
</head>
<body>
<input type="button" onclick="ajax();" value="Pegar texto" name="Pegar texto" />
<br />
<span id="conteudo_ajax"></span>
</body>
</html>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
function ajax () {
// Caso queira limpar o valor do elemento antes de adicionar remova o comentario abaixo.
//$("#conteudo_ajax").empty();
jQuery.ajax({
type: "get", // Defino o método de envio POST / GET
url: 'texto.html', // Informo a URL que será pesquisada.
success: function(html){
$("#conteudo_ajax").append(html); // Adiciono o valor dentro do elemento.
}
});
}
</script>
Agora crie uma página texto.html com o texto para pesquisa
Texto que foi pego usando AJAX.
O código é simples mas já dá uma idéia de como funciona o AJAX para quem esta começando a estudar.
Comentários são bem vindos assim posso melhorar a qualidade dos tutoriais aqui apresentados.
É isso pessoal uma ótima semana e até o próximo post.
Compartilhe com seus amigos:
Tags: ajax, iniciante, JQuery, PHP
Oct 26
Sempre quando vou baixar o Netbeans ele detecta o idioma do meu Windows e coloca em português mas baixando a versão em inglês.
Para alterar o idioma do Netbeans para inglês.
Vá em “C:\Arquivos de programas\NetBeans 6.8 Beta\etc”.
Abra o arquivo “netbeans.conf” com um editor de texto.
Na linha de comando netbeans_default_options adicione
”-J-Duser.language=en –J-Duser.region=US”.
Salve o arquivo e abra o Netbeans que agora estará em inglês para facilitar sua vida.
Comentários são bem vindos assim posso melhorar a qualidade dos tutoriais aqui apresentados.
É isso pessoal uma ótima semana e até o próximo post.
Compartilhe com seus amigos:
Tags: IDE, Idioma, NetBeans
|
|
Comentários Recentes