Lenon Marcel

Iniciando com Java #2 – Criando uma janela com Swing

lenon — Thu, 22 Jul 2010 05:12:43 +0000

Swing – tá aí uma coisa que eu sempre ouvi falar e sempre tive curiosidade de saber como funciona. E agora que resolvi estudar Java, tive a oportunidade de conhecê-lo e vou compartilhar minhas experiências e estudos aqui.

Ô! Tô falando do Java Swing, não daquele swing seu pervertido.

O Swing é um framework Java usado para criar interfaces gráficas (GUIs). Com ele você pode criar janelas, botões, caixas de texto e uma série de outros widgets. Além disso, usando ele, você ganha uma interface consistente entre as múltiplas plataformas suportadas pelo Java.

Nos primeiros contatos com Swing, tive a impressão de que vou gostar de usá-lo para criar minhas interfaces. Achei ele muito simples e de fácil aprendizado.

Da Windou

Pois bem. Pra começar, vamos dar uma olhada no código necessário para criar a nossa janela:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

import javax.swing.JFrame;

class MinhaJanela extends JFrame
{
public MinhaJanela()
{
super ( "Hey, ho" );

setSize( 400, 400 );
setLocationRelativeTo( null );
setDefaultCloseOperation( JFrame.EXIT_ON_CLOSE );
}
}

class MeuPrograma
{
public static void main( String args[] )
{
MinhaJanela janela = new MinhaJanela();

janela.setVisible( true );
}
}

Agora as coisas ficaram bem diferentes, né? super, import, extends… que diabos é isso?

Dissecando o código

Pra entender, vamos dar uma olhada linha por linha:

Linha 1 – import javax.swing.JFrame
Diz ao compilador que seu programa precisa dos pacotes do swing. (Vou tentar explicar isso melhor em outro artigo)
Linha 3 – class MinhaJanela extends JFrame
Quem está acostumado com PHP OO, sabe o que isso significa. Aqui, diz que a classe MinhaJanela estende a classe JFrame. Assim, a classe MinhaClasse pode acessar todos os métodos e variáveis da classe JFrame e, inclusive, sobrepor métodos.
Linha 5 – public MinhaJanela()
Esse é o construtor da nossa classe. Assim como no PHP 4, construtores Java possuem o mesmo nome da classe.
Linha 7 – super ( "Hey, ho" );
super pode ser usado para acessar métodos da super classe (a classe que foi estendida). No nosso caso, como fizemos um override do construtor, usamos super para chamar o construtor da super classe.
Linha 9 – setSize( 400, 400 );
Linha 10 – setLocationRelativeTo( null );
Linha 11 – setDefaultCloseOperation( JFrame.EXIT_ON_CLOSE );
Essas são chamadas de métodos da classe JFrame. Observe que você não precisa usar this ou algo do tipo. Por exemplo, na linha 9 você poderia escrever isso…

1
this.setSize( 400, 400 );

… e o resultado seria o mesmo.
Linha 19 – MinhaJanela janela = new MinhaJanela();
Aqui declaramos a variável janela, que é do tipo MinhaJanela. Em Java, todas as variáveis precisam ter um tipo definido.
Linha 21 – janela.setVisible( true );
Exibe nossa janela para o mundo.

Se ainda não o fez, compile o código e rode o programa. Uma janela deve aparecer no centro da tela, com o título “Hey, ho”.

Java + Swing = amor. Só digo isso.

Iniciando com Java #1 – Olá, manolo

lenon — Wed, 21 Jul 2010 05:29:17 +0000

Sim, resolvi aprender Java. Pra quem me conhece, isso deve ser uma surpresa, já que eu nunca fui com a cara da linguagem. Ela sempre me pareceu burocrática demais, cheia de “nhê nhê nhê”. E como não dá pra criticar sem ao menos conhecer, resolvi estudá-la mais a fundo.

Preciso dizer que, por enquanto, tenho gostado dela. A relação complexidade x velocidade tem me agradado. Por isso, farei uma série de artigos contando minhas experiências com Java. Uma vez me disseram que “a melhor maneira de entender uma coisa é tentando explicar essa coisa à outra pessoa”, e é isso que pretendo aqui.

Não vou abordar a instalação do JDK (Java Development Kit), assumo que você já o tenha instalado e configurado. Assumo, também, que você tenha domínio do console do seu sistema (prompt de comando, terminal, chame como quiser).

Uma última nota: este artigo se destina à quem já tem algum conhecimento com programação. Ou seja, não é para novatos.

E no primeiro artigo, vou demonstrar como criar o meu tradicional “Olá, manolo” – porque “Hello, World” é para os fracos.

Let’s go babe

O código da aplicação é bem simples, veja:

1
2
3
4
5
6
7

class MeuPrograma
{
public static void main( String args[] )
{
System.out.println( "Olá, manolo!" );
}
}

Salve o arquivo como MeuPrograma.java.

Observe que o arquivo deve possuir o mesmo nome da classe principal (case sensitive). E essa classe principal deve, obrigatoriamente, possuir uma função main(). Há, também, uma convenção que diz que “todo nome de classe deve começar com letra maiúscula”, porém isso não é obrigatório.

A declaração de funções (ou métodos), no Java, é um pouco mais complicada que em outras linguagens (como PHP, Ruby, etc). Vamos pegar a função main(), por exemplo:

1	public static void main( String args[] )

Podemos ver que existem várias palavras-chave e cada uma possui um significado diferente:

public – diz que o método é público, ou seja, pode ser acessado de fora da classe.
static – o método é estático, não precisa ser instanciado.
void – indica o tipo de objeto que o método retorna, no nosso caso nada (void).
main – nome da função, d’oh.
Em seguida, temos os parâmetros, os argumentos do método. No nosso caso, uma array do tipo String.

Como eu também desenvolvo com PHP, peguei a “manha” rápido, já que a declaração de métodos e classes é bem parecida nessa linguagem.

Concluindo, o método System.out.println( "Olá, manolo!" ); exibe uma mensagem na tela. Note que uma string deve estar entre aspas duplas.

Dica:

No Java, você não pode declarar métodos fora de uma classe. Ou seja, isso…

1
2
3
4
5
6

void metodo()
{
# Faz algo
}

metodo();

… está errado e irá gerar um erro no compilador.

Compilando o código

Agora que temos o código pronto, precisamos compilar. Execute o seguinte comando no console:

1	javac MeuPrograma.java

javac é o compilador Java. É ele quem gera o famoso bytecode que a JVM (Java Virtual Machine) vai ler e executar.

Se você observar o diretório do seu programa, verá um arquivo chamado MeuPrograma.class. Este é o seu programa compilado.

Executando o programa

Código escrito, compilado, agora vamos executá-lo:

1	java MeuPrograma

Se tudo deu certo, vamos ver a mensagem Olá, manolo! no console. Observe que você não deve digitar MeuPrograma.class, somente MeuPrograma.

Se algum erro ocorreu, ~~tem que ver isso aí~~ você fez alguma coisa errada seu noob. Comece novamente.

Falei alguma besteira? Não hesite em me corrigir nos comentários. Grato.

Usando a API de Streaming do Twitter com Ruby

lenon — Tue, 20 Jul 2010 07:12:16 +0000

A API de Streaming do Twitter dá a possibilidade de obter em tempo real (ou quase) status públicos do Twitter. Por exemplo, você pode obter todos os tweets que contenham algum link, ou ainda que falem sobre determinada marca, produto ou palavra-chave.

E fazer essa busca por palavras-chave é super fácil com Ruby, pois já existem várias bibliotecas e gemas pra isso.

No meu exemplo, vou usar a gem twitter-stream:

1	sudo gem install twitter-stream

Para capturar os tweets, o código é bem simples:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40

require 'rubygems'
require 'twitter/json_stream'
require 'json'

# Dados de acesso do seu twitter
user = 'usuario'
password = 'senha'

# Busca
track = 'movie'

counter = 1

EventMachine::run {

stream = Twitter::JSONStream.connect(
:path => '/1/statuses/filter.json',
:auth => "#{user}:#{password}",
:method => 'POST',
:content => "track=#{track}"
)

stream.each_item do |status|

status = JSON.parse status

puts "#{counter} - @#{status['user']['screen_name']}: #{status['text']}\n"
counter = counter + 1

end

stream.on_error do |message|
puts "\n\n---------\nErro: #{message}\n---------\n\n"
end

stream.on_reconnect do |timeout, retries|
puts "\n\n - Reconectando em #{timeout} segundos\n\n"
end

}

Bonito, né? Dá pra criar coisas bem legais com poucas linhas de código, basta usar a imaginação.

Ah, outra gem bem bacana é a TweetStream. Você pode ver como ela funciona aqui.

Protegendo diretórios .git e .svn usando o arquivo .htaccess do Apache

lenon — Thu, 15 Jul 2010 19:36:14 +0000

Sempre que posso, uso Git ou Svn para gerenciar meu código. É muito mais simples, organizado e me dá menos dores de cabeça. O problema é quando os repositórios precisam ficar em algum lugar público, ou seja, algum lugar que pode ser acessado via browser.

Não é legal ter alguém lendo o conteúdo dos repositórios, né? Então, pra esconder todos os diretórios .git ou .svn do acesso público, basta adicionar a regra no seu arquivo .htaccess:

1	RedirectMatch 404 ^(.*/)?\.(svn\|git\|gitignore)/

Assim, quando alguém tentar acessar um diretório (ou um arquivo do diretório) um erro 404 será retornado. Arquivos .gitignore “soltos” também não serão encontrados.

Desativar o Analytics no modo preview do WordPress

lenon — Sun, 11 Jul 2010 21:17:58 +0000

Quando você está escrevendo um post num blog WordPress, é muito comum usar o modo preview (aquele botão “Visualizar” do painel). E quem usa o Google Analytics deve reparar que há um elevado número de visitas vindas justamente desse preview, ou seja, há um “falso tráfego” nas estatísticas.

A resolução deste problema é simples, basta usar os filtros do Analytics e excluir este tráfego.

Vá até o Filter Manager do Analytics e clique em Add Filter.
No campo Filter Name digite o nome do filtro, pode ser “Excluir tráfego do modo preview”.
Em Filter Type, marque Custom Filter e, logo abaixo, marque Exlude.
Em Filter Field, selecione Request URI.
No campo Filter Pattern, digite “preview=true” (sem aspas).
Em Case Sensitive, marque No.
Lá no final da página, selecione em quais perfis deseja aplicar o filtro.
Clique em Save Changes.

O filtro deve ficar assim:

A partir de agora, todo o tráfego das páginas de preview serão excluídos das estatísticas. E fica a dica: os filtros aceitam expressões regulares também.

Formulário de contato no WordPress sem usar plugins

lenon — Sun, 11 Jul 2010 02:22:04 +0000

Não costumo usar muitos plugins no WordPress, só quando preciso de funcionalidades hardcore. Faço tudo diretamente no tema, já que ele pode acessar todos os hooks da API do WordPress. Assim eu fiz na minha página de contato, que é embutida no tema do blog. Ela funciona muito bem e depende somente de funções internas do WP.

O template da página de contato

Vamos lançar mão do suporte a templates de página que o WordPress possui. Para isso, crie um arquivo chamado template-contact.php no diretório do seu tema.

Logo nas primeiras linhas do tema, adicione o seguinte:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40

/*
* Template Name: Página de contato
*/

get_header();
?>

if (isset($contact_form_error)) { ?>

echo $contact_form_error; ?>

} ?>
if (isset($contact_form_success)) { ?>

echo $contact_form_success; ?>

} ?>

Seu nome:

echo @esc_html($contact['name']); ?>"/>

Email:

echo @esc_html($contact['email']); ?>"/>

Mensagem:

get_footer(); ?>

Vá até o painel de administração do WordPress e crie uma nova página. Coloque o título que desejar e selecione no box “Modelo” a opção “Página de contato” e publique. Agora abra a página recém criada.

Tratando o post do formulário

Precisamos tratar o POST do formulário, inserindo validações e mensagens de erro. Para isso, abra o arquivo functions.php do seu tema. Insira o seguinte código no final do arquivo:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81

O básico está aí. Agora, você pode fazer validação com JavaScript, usar Ajax… deixe sua criatividade agir.

XDebug no XAMPP

lenon — Wed, 30 Jun 2010 16:33:10 +0000

Instalar o XDebug no XAMPP é muito simples, já que ele é distribuido junto o pacote de instalação do projeto. Basta descomentar a seguinte linha do arquivo php.ini:

1	zend_extension = "C:\xampp\php\ext\php_xdebug.dll"

Agora é só reiniciar o servidor Apache e pronto, XDebug funcionando.

Qual a diferença entre aspas simples e duplas no PHP?

lenon — Tue, 15 Jun 2010 05:08:34 +0000

Uma dúvida frequente entre iniciantes do PHP é quanto ao uso das aspas simples (‘) e duplas (“) no PHP. Elas fazem basicamente a mesma coisa: definir strings. Porém, o PHP interpreta cada uma de maneira diferente.

Experimente executar o código abaixo:

1
2
3
4

$myvar = 'teste';

echo "Isto é um $myvar\n\n"; //Observe as aspas duplas
echo 'Isto é um $myvar\n\n'; //Agora aspas simples

Conseguiu perceber a diferença? Usando aspas duplas o PHP interpreta as variáveis contidas dentro da string. Quando aspas simples são utilizadas, o PHP não interpreta nenhuma variável.

Podemos concluir que o uso de aspas simples torna mais rápida a execução do script.

Ruby On Rails sem banco de dados

lenon — Tue, 15 Jun 2010 05:01:12 +0000

Se você quer desenvolver uma aplicação em Rails que não precisa de banco de dados, aí vai a dica:

Edite o arquivo config/environment.rb e insira a linha abaixo (caso ainda não exista):

1	config.frameworks -= [ :active_record ]

Isso vai fazer com que o Rails não carregue o ActiveRecord e você poderá desenvolver sua aplicação normalmente.

Brincando com o Canvas do HTML5

lenon — Fri, 11 Jun 2010 17:22:37 +0000

Canvas, pra quem não sabe, é um novo elemento do HTML5. Ele atua como uma tela, onde você pode desenhar, exibir fotos, criar animações, tudo através de JavaScript. Digamos que ele chegou para dar um chute na bunda do Flash.

Estou há meses querendo estudar um pouco sobre o elemento, mas só hoje ~~a preguiça deixou~~ tive tempo. Então, vou compartilhar as experiências aqui, com vocês.

1. Suporte

O Canvas é suportado pelo Safari, Google Chrome, Opera e Firefox. Como sempre, o IE fica de fora da festa. ~~PORRA IE~~

2. Marcação HTML

Nenhuma novidade aqui, basta fazer a marcação como um elemento comum:

1	="elemento">Texto exibido para browsers sem suporte</canvas>

Você também pode especificar uma altura e/ou largura usando CSS ou através dos atributos width e height. Se nenhuma altura/largura for definida, o padrão é 300 por 150 pixels.

3. Verificando o suporte

Agora começa a parte do JavaScript. Para verificar se o browser do usuário suporta Canvas, você pode fazer isso:

1
2
3
4
5
6

var canvas = document.getElementById('elemento');
if(canvas.getContext){
// Suporta canvas
}else{
// Não suporta canvas
}

A partir daí, você pode criar uma função de fallback para browsers sem suporte.

4. Desenhando um retângulo

Já que essa bagaça serve pra desenhar, vamos desenhar! E pra começar, vamos desenhar um retângulo:

1
2
3
4

var context = canvas.getContext('2d'); // Pega o contexto 2d do elemento
context.fillStyle = "purple"; // Qualquer cor, inclusive RGBA
context.fillRect(20, 20, 45, 55); // X, Y, W, H
// Isso me lembrou Delphi ~apagar

E o resultado (no Firefox):

Fácil, não? Explicando…

getContext pega o contexto, que atualmente suporta somente 2d;
fillStyle define a cor ou estilo de preenchimento da forma;
fillRect desenha um retângulo, usando as coordenadas X, Y, largura e altura.

5. Texto

Desenhar texto também é bem simples:

1
2
3

context.font = "2em Arial"; // Fonte
context.textBaseline = "top"; // Alinhamento vertical
context.fillText("LOL :P", 100, 20); // Text, X, Y e max-width opicional

Resultado:

6. Círculo

Agora, pra complicar um pouco, vamos desenhar um círculo:

1
2
3
4
5
6
7

context.strokeStyle = "red"; // Cor do contorno
context.fillStyle = "rgba(0,0,0,0.5)"; // Preenchimento
context.beginPath(); // Dá um reset nos caminhos do contexto
context.arc(150, 100, 50, 0, Math.PI*2, true); // Desenha um arco
context.stroke(); // Adiciona o contorno
context.fill(); // Adiciona o preenchimento
context.closePath(); // Fecha o caminho

O resultado:

O método arc desenha um caminho no formato de arco com os parâmetros x, y, raio, ângulo inicial, ângulo final, anti-horário.

7. Imagem

Para finalizar esse primeiro contato com o canvas, vamos exibir uma imagem:

1
2
3
4
5

var img = new Image();
img.onload = function(){
context.drawImage(img, 120, 70);
}
img.src = "http://lenonmarcel.com.br/examples/pikachu.png";

Resultado:

O método drawImage desenha uma imagem com os parâmetros imagem (elemento html image), x, y.

Referência

Canvas, no MDC (Mozilla Developer Center)
The Canvas Element, documentação no WHATWG

Links e tutoriais

Fiz uma abordagem bem superficial do elemento Canvas, só para ter uma idéia das suas possibilidades. Vou tentar me aprofundar mais no assunto, da próxima vez.