Programar e Aprender

quarta-feira, 23 de novembro de 2016

JQuery: Carregando pagina html em uma div

Hoje vou mostrar para vocês como é possível carregar uma pagina html dentro de uma div, sem recarregar a pagina inteira. Assim você pode ter uma pagina principal e fazer com que o conteúdo seja alterado somente na div principal.

Carregando pagina dentro da div

Primeiro vamos montar a pagina html principal, com a seguinte estrutura:

 <html>  
 <head>  
 <title>JQuery: Carregando pagina html</title>  
  <link rel="stylesheet" type="text/css" href="css/style.css">  
     <link rel="stylesheet" href="js/jquery/jquery-ui-1.12.1/jquery-ui.css" />  
     <script src="http://code.jquery.com/jquery-1.8.2.js"></script>  
     <script src="http://code.jquery.com/ui/1.9.0/jquery-ui.js"></script>  
     <script src="funcao.js"></script>  
 </head>  
 <body>  
 <div id="central"></div>  
 </body>  
 </html>

É muito importante colocar a referencia a biblioteca JQuery e ao link da pagina js com o script.

Agora vamos a pagina js, aqui chamada de funcao.js, nela esta o script responsável por fazer o carregamento da pagina2.html na div da pagina principal.

 funcao.js   
 $(document).ready(function(){  
   /**  
    *   
    */  
   $("#item1").on("click", function(){  
    $("#central").load("pagina2.html #formulario");  
         });  
       });

Como funciona o script, ele chama a pagina2 quando o item1 do menu é clicado. E após faz o carregamento da div id="formulario" da pagina2.html e coloca dentro da div id="central" na pagina1.html

A pagina2 tem a mesma estrutura da primeira, mas só será visualizado a div formulario.

E por hoje é só, até a próxima!

Leia Mais ►

quarta-feira, 16 de novembro de 2016

JQuery: Calendário com DatePicker

Os calendários são muito utilizado, principalmente em formulários, pois facilitam na hora da inserção da data.

Pensando nisso foram desenvolvidos plugins utilizando JavaScript e CSS para criar um calendário, normalmente a partir de um input do tipo Text. O principal pertence a biblioteca JQuery UI (User Interface), da própria JQuery Foundation. Ela fornece uma série de componentes como calendários, abas, botões e caixas de diálogos de fácil utilização.

Aqui veremos o componente DatePicke, que pode ser integrado, facilmente, a uma página com a referencia á JQuery UI e partindo de um input do tipo text, mas pode ser usado também em uma div.

Calendário com JQuery

Como base para o desenvolvimento iremos usar a seguinte estrutura em HTML.

Estrutura básica em HTML:

 <!doctype html>  
 <html>  
 <head>  
   <meta charset="utf-8" />  
   <title>Calendário</title>    
 </head>  
 <body>  
   <p>Data: <input type="text" id="calendario" /></p>  
  </body>  
 </html>

Neste exemplo o calendário é vinculado a um input mas pode ser colocado em uma div, da seguinte forma:

 <!doctype html>  
 <html>  
 <head>  
   <meta charset="utf-8" />  
   <title>Calendário</title>    
 </head>  
 <body>  
   <div id="calendario"></div>  
  </body>  
 </html>

Mudou pouca coisa né?

Agora vamos a segunda parte, e muito importante, a referencia a biblioteca jQuery UI.

Nota: Esta referencia deve sempre ser colocada na pagina html principal.

 <link rel="stylesheet" href="http://code.jquery.com/ui/1.9.0/themes/base/jquery-ui.css" />  
 <script src="http://code.jquery.com/jquery-1.8.2.js"></script>  
 <script src="http://code.jquery.com/ui/1.9.0/jquery-ui.js"></script>

Feito isso, já podemos fazer o script que chamara o método DatePicker, de forma bem básica. Este script pode ser colocado antes da tag </head>, ou se você preferir pode criar uma pagina .js para colocar o script, porem neste segundo caso é necessário chamar a pagina inserindo a seguinte linha, junto com as bibliotecas.

<script src="js/calendario.js"></script>

Onde calendario é o nome da pagina onde esta o script.

E esse é o script:

 <script>  
 $(function() {  
   $( "#calendario" ).datepicker();  
 });  
 </script>

Ele vai retornar um calendário em inglês, para traduzir para português, esse é o código:

 $(document).ready(function (){  
   $("#calendario").datepicker({  
       dateFormat: 'dd/mm/yyyy',  
     dayNames: ['Domingo','Segunda','Terça','Quarta','Quinta','Sexta','Sábado','Domingo'],  
     dayNamesMin: ['D','S','T','Q','Q','S','S','D'],  
     dayNamesShort: ['Dom','Seg','Ter','Qua','Qui','Sex','Sáb','Dom'],  
     monthNames: ['Janeiro','Fevereiro','Março','Abril','Maio','Junho','Julho','Agosto','Setembro','Outubro','Novembro','Dezembro'],  
     monthNamesShort: ['Jan','Fev','Mar','Abr','Mai','Jun','Jul','Ago','Set','Out','Nov','Dez']  
   }       
       );   
 });

Aqui você já terá um calendário prontinho para ser usado no input ou na div, conforme for a sua necessidade.

O DatePicker possui, ainda, varias funcionalidades e você pode conhecer visitando a documentação oficial no site da JQuery UI em DatePicker Documentation.

Leia Mais ►

quinta-feira, 10 de novembro de 2016

HTML + CSS: Menu horizontal com submenus

Hoje vou mostrar para vocês como é simples e rápido fazer um menu horizontal e com submenus, ele pode ser usado em sites e em blogs, igual ao que eu uso aqui no blog.

Para construir esse menu vamos precisar saber um pouco de html, para montar a estrutura e um pouco de CSS para o layout. Sabendo essas duas linguagens você pode deixar a sua imaginação fluir e montar um menu do seu jeito.

Mãos a massa!!!

Você vai precisar de uma plataforma de desenvolvimento, eu usei o básico bloco de notas, para quem não sabe, para criar uma pagina em bloco de notas é só você renomear o arquivo para .html e pronto, mas você também pode usar outra plataforma de sua preferência.

Primeiro precisamos montar a estrutura do menu, que nada mais é uma lista, veja:

 <body>  
 <div id="menuPai">  
 <ul id="nav">  
   <li id="menu"><a href="#">Inicio</a></li>  
   <li id="menu"><a href="#">Linguagens</a>  
       <ul id="sub-menu">  
        <li><a href="#">Java</a></li>  
        <li><a href="#">JavaScript</a></li>  
      </ul>  
   </li>       
   <li id="menu"><a href="#">Sistemas</a>  
      <ul id="sub-menu">  
        <li><a href="#">Sistema 1</a></li>  
        <li><a href="#">Sistema 2</a></li>  
      </ul>  
   </li>  
   <li id="menu"><a href="#">Contato</a></li>  
 <span></span>  
 </ul>  
 </div>  
 </body>  
 </html>

Para direcionar o link para o pagina que você deseja acessar através do menu basta trocar o # pelo endereço da pagina.

Agora para deixar o esse código com cara de menu vamos ao CSS:

 <style type="text/css">  
 #menuPai ul{  
      list-style:none;       
      padding: 0px;  
      margin: 0px;  
      background: rgba(25, 25, 112, 0.2);  
      width:auto;  
      height:40px;  
      border-bottom:3px solid #191970;  
 border-radius:5px;       
 }  
 #menu {   
      position: relative;  
      float:left;  
      width:100px;  
      height:40px;  
      margin-left: 10px;  
 } /*coloca as opções uma do lado da outra */  
 #menu ul{    
 display:none;  
 }  
 #menu a{  
      float:left;  
      position:relative;  
      width:100px;  
      height:30px;  
      margin-top: 0px;  
      padding-top: 10px;  
 /* visual do link menu*/  
      background: rgba(25, 25, 112, 0);  
      color: #333;  
      text-decoration: none;  
      text-align: center;  
      border-bottom:3px solid #191970;  
 }  
 #sub-menu{  
 background: rgba(16, 78, 139, 0.2);       
      color: #EDEDED;  
 width:100px;  
      height:125px;  
 border-radius:5px;  
 }  
 #sub-menu a{  
 text-align:left;  
 text-indent:5px;  
 background: rgba(16, 78, 139, 0.2);       
 }  
 #menu a:hover {  
 background: rgba(16, 78, 139, 0.2);       
      color: #EDEDED;  
      border-bottom:3px solid #EA0000; /* Linha abaixo do link quando o mouse esta sobre o link */  
 border-radius:5px;  
 }  
 /* Hack para IE MAC*/  
 * html ul li { float: left; }  
 * html ul li a { height: 1%; }  
 /* FIM */  
 #menu:hover ul{display:block;  
 }

Tudo junto fica, e com alguns comentários:

 Menu_Blog1.html  
 
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR...nsitional.dtd">  
 <html xmlns="http://www.w3.org/1999/xhtml">  
 <head>  
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <!--define o tipo de codificação como UTF-8 para mostrar corretamente acentos -->  
 <style type="text/css">  
 #menuPai ul{  
      list-style:none;      /* aqui tira a formatação da lista, ou seja, tira o ponto e o sublinhado */ 
      padding: 0px;  
      margin: 0px;  
      background: rgba(25, 25, 112, 0.2);  /* cor de fundo do menu*/
      width:auto;  
      height:40px;  
      border-bottom:3px solid #191970;  
 border-radius:5px;       
 }  
 #menu {   
      position: relative;  
      float:left;  
      width:100px;  
      height:40px;  
      margin-left: 10px;  
 } /*coloca as opções uma do lado da outra */  
 #menu ul{    /* Aqui deixa o submenu escondido*/
 display:none;  
 }  
 #menu a{  
      float:left;  
      position:relative;  
      width:100px;  
      height:30px;  
      margin-top: 0px;  
      padding-top: 10px;  
 /* visual do link menu*/  
      background: rgba(25, 25, 112, 0);  
      color: #333;  
      text-decoration: none;  
      text-align: center;  
      border-bottom:3px solid #191970;  
 }  
 #sub-menu{  
 background: rgba(16, 78, 139, 0.2);       
      color: #EDEDED;  
 width:100px;  
      height:125px;  
 border-radius:5px;  
 }  
 #sub-menu a{  
 text-align:left;  
 text-indent:5px;  
 background: rgba(16, 78, 139, 0.2);       
 }  
 #menu a:hover {  
 background: rgba(16, 78, 139, 0.2);       
      color: #EDEDED;  
      border-bottom:3px solid #EA0000; /* Linha abaixo do link quando o mouse esta sobre o link */  
 border-radius:5px;  
 }  
 /* Hack para IE MAC*/  
 * html ul li { float: left; }  
 * html ul li a { height: 1%; }  
 /* FIM */  
 #menu:hover ul{display:block;  /* deixo o submenu visivel */
 }  
 </style>  
 </head>  
 <body>  
 <div id="menuPai">  
 <ul id="nav">  
   <li id="menu"><a href="#">Inicio</a></li>  
   <li id="menu"><a href="#">Linguagens</a>  
       <ul id="sub-menu">  
        <li><a href="#">Java</a></li>  
        <li><a href="#">JavaScript</a></li>  
      </ul>  
   </li>       
   <li id="menu"><a href="#">Sistemas</a>  
      <ul id="sub-menu">  
        <li><a href="#">Sistema 1</a></li>  
        <li><a href="#">Sistema 2</a></li>  
      </ul>  
   </li>  
   <li id="menu"><a href="#">Contato</a></li>  
 <span></span>  
 </ul>  
 </div>  
 </body>  
 </html>

Bom é isso, simples né? Na verdade, não parece ser simples a primeira vista, mas quando você começa a identificar cada item e como modificar ele você vai conseguir fazer muito mais e vai achar tudo fácil.

Até a próxima!

Leia Mais ►

segunda-feira, 24 de outubro de 2016

Java: Passando dados de uma janela para outra

Dica da Semana: Java com Visual Edition (VE)

Hoje eu vou mostrar para vocês como passar os dados de uma janela para outra, ou seja, veremos como identificar o item selecionado pelo cliente e enviar este item para outra janela, sem a necessidade de fazer outra busca em banco de dados.

Situação Hipotética: na primeira janela o usuário faz um pesquisa de cliente onde mostra só o nome de todos os clientes cadastrados e ao clicar no nome desejado, o sistema abre outra janela mostrando todos os dados do cliente selecionado anteriormente....

Para fazer isso...

Na janela da pesquisa no evento do botão que chama outra janela…

 chama = new VisualCad(cliente);

Na janela que mostra os dados:

 private Cliente cli;  
 public VisualCad(Cliente c) {  
 super();  
 cli == c;  
 initialize();  
 }

Onde serão mostrados os dados do cliente, coloque este método...

 private JPanel getJContentPane() {  
 if (jContentPane == null) {  
 nomeCliLabel = new JLabel();  
 nomeCliLabel.setBounds(new Rectangle(72, 35, 286, 16));  
 nomeCliLabel.setText(cli.getNome());//pega o nome do cliente e põe no nomeCliLabel  
 cpfCliLabel = new JLabel();  
 cpfCliLabel.setBounds(new Rectangle(72, 63, 130, 15));  
 cpfCliLabel.setText(cli.getCpf()); //pega o cpf do cliente e põe no cpfCliLabel  
 .  
 .//por aí vai  
 .  
 }  
 return jContentPane;  
 }

Espero que seja útil. Até a próxima !!

Leia Mais ►

segunda-feira, 17 de outubro de 2016

Java: Chamando uma JInternalFrame

Veja como chamar uma JInternalFrame, feita com Visual Edition no Eclipse, dentro de uma classe principal feita sem usar o Visual Edition. Esse código me serviu muito bem quando eu estava fazendo o meu trabalho de conclusão, para o trabalho eu desenvolvi um sistema para desktop em Java, e no início do desenvolvimento não utilizava o VE (Visual Edition). Eu ja tinha feito a janela principal e quando fui fazer as janelas internas achei mais fácil fazer utilizando o VE.

No inicio tive algumas dificuldades, principalmente nesta parte, e depois de muito pesquisar cheguei a esta solução e agora vou compartilhar com vocês a minha descoberta.

Chamando uma nova JInternalFrame

 JMenu registrar = new JMenu("Registrar");  
 barraMenuAdm.add(registrar);  
 JMenuItem novaVenda = new JMenuItem("Venda");  
 novaVenda.addActionListener(new java.awt.event.ActionListener() {  
 public void actionPerformed(java.awt.event.ActionEvent evt) {  
 JInternalFrame reg = new JInternalFrame(); //cria um objeto que representa um JInternalFrame ... ja criado...  
 reg = new RegistrarServico();// vincula esse objeto a class ja criado com o VE  
 reg.setVisible(true);// torna ela visível  
 desktop.add(reg); // coloca ela na janela principal  
 }  
 });  
 registrar.add(novaVenda);

Esta foi uma dica de como fazer esta chamada utilizando Java VE no Eclipse.

Leia Mais ►

JavaScript: Trabalhando com Data e Hora

Neste artigo vou mostrar, de uma forma simples e em poucas linhas de código, como podemos obter e mostrar a data e a hora em qualquer pagina da web. Para isso mostrarei alguns dos métodos disponiveis em JavaScript para trabalharmos com a data e a hora e explicar a função de cada um deles. Ao final do artigo disponibilizarei o código que montei utilizando um bloco de notas simples, e explicarei o código, para que você aprenda e assim possa fazer um código que atenda a sua necessidade.

Vamos ao trabalho!!!

Para pegarmos a data e hora é necessário criar um novo objeto que irá receber a data e hora.

Exemplo: agora = new Date();

Nesta linha de código retorna a data e hora no seguinte formato: Dia da Semana (0..6), Mês (0..11), Hora, Minuto, Segundos (h:m:s) e Ano.

Alguns Métodos Necessários:

getMonth(); - Retorna o número do mês, em valores de 0 a 11 onde 0 é referente a Janeiro.

Exemplo: mes = agora.getMonth();

getDate(); - Retorna o número do dia, considerando o mês os valores podem ser de 1 a 31.

Exemplo: dia = agora.getDate();

getDay(); - Retorna o número da semana, em valores de 0 a 6 onde 0 se refere ao Domingo.

Exemplo: semana = agora.getDay();

getHours(); - Obtém um número correspondente a hora, em valores de 0 a 23.

Exemplo: hora = agora.getHours();

getMinutes(); - Obtém um número referente ao minutos, em valores de 0 a 59.

Exemplo: min = agora.getMinutes();

getSeconds(); - Obtém um número referente aos segundos, em valores de 0 a 59.

Exemplo: sec = agora.getSeconds();

getFullYear(); - Este é o método atual onde retorna o ano atual com os 4 dígitos, utilizado para 1900 em diante. Antigamente era utilizado o método getYear(), porem este método retorna apenas 2 dígitos e funciona perfeitamente até o ano de 1999.

Exemplo: ano = agora.getFullYear();

Estes são alguns dos métodos que podemos utilizar quando precisamos trabalhar com a data e hora.

Agora vamos colocar eles em prática.

Mostrando data e hora atualizada

1:  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <!--define o tipo de codificação como UTF-8 para mostrar corretamente acentos -->  
2:  <html>  
3:  <head>  
4:  <script language=javascript type="text/javascript">  
5:  dayName = new Array ("Domingo","Segunda-Feira","Terça-Feira","Quarta-Feira","Quinta-Feira","Sexta-Feira","Sabado");  
6:  monName = new Array ("Janeiro","Fevereiro","Março","Abril","Maio","Junho","Julho","Agosto","Setembro","Outubro","Novembro","Dezembro");  
7:  
8:  function time(){  
9:  hora = new Date();  
10:  h=hora.getHours();  
11:  m=hora.getMinutes();  
12:  s=hora.getSeconds();  
13:  document.getElementById('txt').innerHTML=h+":"+m+":"+s;  
14:  setTimeout('time()',500); //Executa o código a cada 500 milésimos de segundos.  
15:  }  
16:  </script>  
17:  </head>  
18:  <body onLoad="time()">  
19:  <script language=javascript type="text/javascript"> 
20:  now = new Date(); 
21:  document.write("<h1> Hoje é " + dayName[now.getDay() ] + ", " + now.getDate () + " de " + monName [now.getMonth() ] + " de " + now.getFullYear () + ". </h1>");  
22:  </script>  
23:  <div id="txt"></div>  
24:  </body>  
25:  </html>

Código em funcionamento:

Explicando o código:

Neste trecho criei dois arrays um para o dia da semana e outro para o mês, o array recebe o número correspondente e retorna o nome do dia ou do mês.

 dayName = new Array ("Domingo","Segunda-Feira","Terça-Feira","Quarta-Feira","Quinta-Feira","Sexta-Feira","Sábado");  
 monName = new Array ("Janeiro","Fevereiro","Março","Abril","Maio","Junho","Julho","Agosto","Setembro","Outubro","Novembro","Dezembro");

Para pegar a hora em tempo real, ou seja a hora atualiza automaticamente, utilizei a função time().

 function time(){  
 hora = new Date();  
 h=hora.getHours();  
 m=hora.getMinutes();  
 s=hora.getSeconds();  
 document.getElementById('txt').innerHTML=h+":"+m+":"+s;  
 setTimeout('time()',500); //Executa o código a cada 500 milésimos de segundos.  
 }

A function funciona da seguinte forma, ela pega os dados da hora, minuto e segundo e encaminha para o elemento “txt” da página html, no caso este elemento é uma div. E em cada 500 milésimos de segundos o código é executado novamente e assim atualizando a hora na página.

<body onLoad="time()"> Neste trecho do código faz com que a function time seja executada assim que a página for carregada.

E esta foi uma breve introdução, para iniciantes, de como podemos utilizar o objeto Date em páginas web.

Leia Mais ►