Preencher vários TextBox em ASP.NET

27 de setembro de 2010

Este código é para aqueles que estão começando seus estudos em ASP.NET e ainda não tem muita experiência com programação.

Esta é uma dica que ao meu ver é muito valiosa, já que vai te poupar um bom tempo pra popular vários TextBox. Imagina você ter que preencher 20 campos vindos da base de dados.

Segue o código em C#

//Aqui apenas recupero os meus dados do banco para uma
//variável do tipo IList
IList itens = Pessoa.recuperaObjetos();

//Inicio um contador para diferenciar os Identificadores dos TextBox
int cont = 1;

//Percorro a variável itens e passo o seu conteúdo para item
foreach(string item in itens){

        //Crio uma variável TextBox temporária e atribuo a ela o retorno
        //da pesquisa feita no painel onde devem ficar todos os TextBox
        //Cada TextBox deve ter o ID = txtDados com o final numérico
        //diferenciado.
	TextBox txtTemp = (TextBox)pnlInterior.FindControl(String.Format("txtDados{0}", cont));

        //Verifico se o TextBox não é nulo
	if (txtTemp != null)
                //Atribuo o conteúdo de item para o TextBox
		txtTemp.Text = item;
        cont++;
}

Isto é o suficiente para percorrer todos os TextBox da sua tela que estejam em um determinado Painel e atribuir o valor à cada um.

Qualquer dúvida é só me enviar um email ou deixar aqui em baixo nos comentários que respondo o mais breve possível. Obrigado.

Anúncios

Fotos do Codeshow

30 de maio de 2010

Pessoal segue algumas fotos do codeshow 2010.

codeshow

Mas como sempre um monte de nerds.

codeshow

codeshow

codeshow


Ordenar tabelas com o plugin TableSorter

14 de fevereiro de 2010

Olá para todos, neste artigo irei demonstrar como ordenar uma tabela de maneira muito fácil utilizando o plugin TableSorter com o framework Jquery.  O que faz com que esta ordenação de dados em uma tabela seja fácil é a total abstração que o Tablesorter nos proporciona, em outras palavas, não precisamos entender como nada funciona, apenas passamos o identificador para o plugin e ele faz toda a mágica.

Vamos ao que realmente interessa, para este exemplo vamos precisar do plugin Tablesorter que se encontra aqui: http://tablesorter.com/docs/ , e logicamente a última versão de preferência do framework Jquery que você pode baixar por aqui:  http://jquery.com/ .

Após o download destes arquivos coloque-os na pasta “js” da pasta do seu site, prefiro assim para poder organizar melhor os arquivos da aplicação 🙂 . Agora com os arquivos em seu devido lugar vamos criar a nossa página em HTML com a tabela que iremos ordenar.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
	<title>Tabela</title>
</head>
<body>
	<table id="myTable">
		<thead>
		<tr>
			<th>Last Name</th>
			<th>First Name</th>
			<th>Email</th>
			<th>Due</th>
			<th>Web Site</th>
		</tr>
		</thead>
		<tbody>
		<tr>
			<td>Smith</td>
			<td>John</td>
			<td>jsmith@gmail.com</td>
			<td>$50.00</td>
			<td>http://www.jsmith.com</td>
		</tr>
		<tr>
			<td>Bach</td>
			<td>Frank</td>
			<td>fbach@yahoo.com</td>
			<td>$50.00</td>
			<td>http://www.frank.com</td>
		</tr>
		</tbody>
	</table>
</body>
</html>

E entre as tags “<head>” vamos carregar os nossos scripts e colocar o código para executar a ordenação.

<script type="text/javascript" src="js/jquery-latest.js"></script>
	<script type="text/javascript" src="js/jquery.tablesorter.js"></script>
	<script type="text/javascript">
		$(document).ready(function(){
			$("#myTable").tablesorter();
		});
	</script>

Portanto com estes pequenos scripts criamos nossa tabela dinamicamente ordenada. Confirmando minha afirmação de que seria fácil, terminamos este artigo. Deixem seus comentários abaixo.


Galeria de fotos MooFlow

30 de janeiro de 2010

Quando desenvolvemos algum site que necessite de uma galeria de fotos legal, que seja daquelas que impressionam o usuário, sempre acabamos escolhendo alguma coisa feita em flash, pelos óbvios motivos de recursos visuais que o mesmo nos proporciona na hora de criarmos. Porém caso você necessite criar um site com o máximo de compatibilidade com os navegadores do usuário, este recurso não é a melhor opção.

Alguns podem ter virado a cara pela minha opinião, mas sabemos que se você realmente quiser garantir a total visualização do seu site para o usuário, principalmente aquele que não entende o porquê existe um quadrado branco com um f no meio do site, você deve reduzir ao máximo os recursos de programação que exijam alguma instalação extra para o navegador do usuário.

Portanto graças a programadores conscientes, foi desenvolvida uma galeria de imagens em Java script utilizando a famosa biblioteca “MooTools“, a implementação desta galeria é muito simples e não exige quase nada de conhecimento da biblioteca ou muito menos de Java script.

Vamos ao que interessa, para começarmos a programar devemos fazer o download da galeria e do framework “MooTools”. Neste link você pode baixar a galeria: http://www.outcut.de/MooFlow/Download.html , e neste outro podemos fazer o download do Mootools: http://mootools.net/download
Vamos criar a nossa página em HTML com as imagens dentro de uma div MooFlow:

<HTML>
<head>
        <title>Galeria mootools</title>
</head>
<body>
	<div id="MooFlow">
		<a href=”imagens/big/image1.jpeg”><img src=”imagens/image1.jpeg”></a>
<a href=”imagens/big/image2.jpeg”><img src=”imagens/image2.jpeg”></a>
<a href=”imagens/big/image3.jpeg”><img src=”imagens/image3.jpeg”></a>
<a href=”imagens/big/image4.jpeg”><img src=”imagens/image4.jpeg”></a>
	</div>
</body>
</html>

Com nossa página criada vamos colocar os códigos da galeria entre as tags <head>:

<link rel="stylesheet" type="text/css" href="MooFlow.css" />
<script type="text/javascript" src="js/mootools-1.2-core.js"></script>
<script type="text/javascript" src="js/mootools-1.2-more.js"></script>
<script type="text/javascript" src="MooFlow.js"></script>
<script type="text/javascript">
/* <![CDATA[ */
	var myMooFlowPage = {
		start: function(){
			var mf = new MooFlow($('MooFlow'), {
				startIndex: 5,
				useSlider: true,
				useAutoPlay: true,
				useCaption: true,
				useResize: true,
				useMouseWheel: true,
				useKeyInput: true
			});
		}
	};
	window.addEvent('domready', myMooFlowPage.start);
/* ]]> */
</script>

Pronto isto é o suficiente para nossa galeria funcionar, lembre-se de colocar os arquivos da galeria na pasta correta e prestem atenção na hora de colocar os arquivos das imagens. Em breve atualizarei este artigo para colocar o link para a demonstração desta galeria. Quaisquer dúvidas postem ai embaixo nos comentários que terei o maior prazer em ajudá-los.


Combo box com ajax e Jquery

18 de janeiro de 2010

Olá amigos venho hoje através deste artigo mostrar como criar um combo box com ajax usando Jquery, tenho certeza que será muito útil para muita gente, principalmente para quem ainda não conhece esta biblioteca fantástica de javascript que é a Jquery.

Existem outras bibliotecas e principalmente outros métodos para criar um combo-box com ajax, mas usarei neste artigo Jquery pela sua simplicidade e facilidade que ela proporciona. Até porque na web todos querem fazer as coisas muito rápido, então nada melhor que Jquery quando se fala em velocidade de desenvolvimento.

Vamos lá a primeira coisa que devemos fazer é o download da Jquery neste endereço: http://jquery.com/

Após o download vamos colocá-la na pasta do nosso projeto. Não esqueçam ok.

Agora com a biblioteca na pasta dos nossos arquivos, vamos começar a criar a página em html que servirá como exemplo para o nosso artigo.

<html>
			<head>
				<title>Ajax com Jquery</title>
				<script type="text/javascript" src="js/jquery.js"></script>
				<script type="text/javascript" src="js/cidadeAjax.js"></script>
			</head>
			<body>
				<form action="#" name="#" method="post">
					<label>Estado</label>
					<select name="uf">
						<option value="SP">SP</option>
						<option value="RJ">RJ</option>
						<option value="MG">MG</option>
					</select>
					<label>Cidade</label>
					<select name="cidades">
						<option value="0">--Primeiro selecione o estado--</option>
					</select>
				</form>
			</body>
		</html>

Pronto com o nosso arquivo html completo vamos criar o nosso script para realizar a mágica, vamos lá, eu por motivo de organização prefiro criar em um arquivo javascript separado da página então vamos criá-lo com o nome de cidadeAjax.js e colocar este código abaixo:

     //Aqui nós vamos iniciar a função após a mudança do select uf
     $("select[@name=uf]").change(function(){
          //Com isso nós vamos mudar o segundo select para procurando
          $('select[@name=cidades]').html('Procurando :::::::');
          //Aqui nós fazemos a requisição ajax para a página php utilizando Jquery
          $.post('buscacidade.php', { estado : $(this).val() },function(resposta){
               //Nesta linha nós preenchemos o select cidades com a resposta da
              //página php obtida no nosso arquivo php
              $('select[@name=cidades]').html(resposta);
          });
     });

E lógico pra finalizar vamos criar o nosso arquivo php que serve para fazer a busca no banco de dados e retornar a lista de cidades. Estou fazendo isto pensando que vocês já tem pelo menos uma tabela no banco de dados com as cidades cadastradas. Quem quiser pode adaptar o script para buscas as cidades de uma lista XML.

Pois bem aqui está o arquivo PHP vamos chamá-lo de buscacidade.php:

     if (isset($_POST['estado'])){
          $res=mysql_query('SELECT cidade FROM cidades WHERE uf = \''.
          $_POST['estado'].'\'');
          while($dados = mysql_fetch_array($res)){
               $cidades .= $dados['cidade'];
          }
          echo ''.$cidades.'';
     }else{
          echo 'Erro no envio dos dados';
     }

Pronto com estes arquivos já estamos com o nosso combo-box funcionando, logicamente estes arquivos podem e devem ser alterados de acordo com a sua necessidade. É possivel que ocorra erros de acentuação com quem estiver usando banco de dados SqlServer, para que isto não aconteça tente decodificar a variável cidades com a função utf8_encode.

Espero que tenha ficado claro o funcionamento do script, não tive a intenção de explicar detalhadamente, porque fiz este artigo pensando em demonstrar o funcionamento do framework Jquery e não PHP nem HTML, portanto espero que o leitor que for implementar este recurso já tenha prévios conhecimentos nestas linguagens, tudo bem. Dúvidadas coloquem ai embaixo, até mais.


Criando tabelas zebradas com JQuery

10 de outubro de 2009

Olá leitores, hoje vou mostrar como como criar uma tabela zebrada com JQuery, a utilização deste framework para esta atividade é muito simples assim como a realização de tudo com JQuery. A única exigência para a aula de hoje é conhecer um pouco de HTML e CSS.

Para colocar o framework na sua página primeiro você precisa baixá-lo caso não o possua, no site você poderá fazer o download e descompactá-lo na sua pasta onde estiver o seu site.

O código para colocá-lo em sua página é este:

<script src=”js/jquery.js” type=”text/javascript”></script>

Abaixo está o código que devemos colocar para que as tabelas fiquem zebradas.

<script type=”text/javascript”>

$(document).ready(function() {

$(‘tr:nth-child(even)’).addClass(‘alt’);

$(‘td:contains(Henry)’).parent().find(‘td:eq(1)’)

.addClass(‘highlight’).end().find(‘td:eq(2)’).addClass(‘highlight’);

});

</script>

Esta é nossa página HTML que usaremos para testar a execução do código Java script.

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”&gt;

<html xmlns=”http://www.w3.org/1999/xhtml”&gt;

<head>

<meta http-equiv=”Content-Type” content=”text/html; charset=iso-8859-1″ />

<title>licao 3</title>

<script src=”js/jquery.js” type=”text/javascript”></script>

<style type=”text/css”>

tr {

background-color: #fff;

}

.alt {

background-color: #ccc;

}

.highlight {font-weight:bold; font-style: italic;}

.cor{

background-color: #FF0000;

}

</style>

<script language=”javascript”>

$(document).ready(function() {

$(‘tr:nth-child(even)’).addClass(‘alt’);

$(‘td:contains(Henry)’).parent().find(‘td:eq(1)’)

.addClass(‘highlight’).end().find(‘td:eq(2)’).addClass(‘highlight’);

});

</script>

</head>

<body>

<table>

<tr>

<td>As You Like It</td>

<td>Comedy</td>

<td></td>

</tr>

<tr>

<td>All’s Well that Ends Well</td>

<td>Comedy</td>

<td>1601</td>

</tr>

<tr>

<td>Hamlet</td>

<td>Tragedy</td>

<td>1604</td>

</tr>

<tr>

<td>Macbeth</td>

<td>Tragedy</td>

<td>1606</td>

</tr>

</table>

</body>

</html>

Explicando o código JQuery, na primeira linha dizemos que o código só deve ser rodado depois que a página for totalmente carregada.

$(document).ready(function() {

Depois na segunda linha está a mágica dizemos com o comando $(‘tr:nth-child(even)’) que as linhas da tabela devem a cada 1 linha mudar a cor para a definida na classe ‘alt’ pelo comando css, assim mudamos a cor de fundo da linha.

$(‘tr:nth-child(even)’).addClass(‘alt’);

Pronto, terminamos nossa tabela zebrada, dúvidas deixem um comentário que explico com prazer.

Até mais.


Instalando o jdk

19 de julho de 2009

Iniciando a sequência de artigos sobre programação Java, vou ensinar como instalar o jdk em windows e linux. Alguns iniciantes principalmente em linux não conseguem instalar o jdk, e com isso se torna impossível aprender Java.

O jdk é o kit de desenvolvimento java que contém as bibliotecas da linguagem que permite a utilização de classes Java. Junto com o kit de desenvolvimento vêm a jvm (java virtual machine), que é responsável pela execução de seus aplicativos em java.

Instalando o jdk no windows:

Basta você fazer o download do jdk no site da sun http://java.sun.com/javase/downloads/index.jsp, nele contém algumas opções, eu recomendo que puxem o jdk com o netbeans 6.7, pois com a ide de programação é  muito mais fácil iniciar seus estudos nesta linguagem.

Instalando o jdk no linux

Para instalar o jdk no linux você também deve fazer o download, mas de forma diferente:

abra o terminal ou console como queira chamar e digite $ sudo apt-get install sun-java6-jdk.

após o download e instalação digite $ java -version para confirmar a instalação.

Por enquanto é isto no próximo artigo mostrarei como escrever o seu primeiro programa, e pra quem estiver usando linux é necessário definir as variáveis JAVA que também mostrarei como no próximo artigo.