Discurso Steve Jobs

Bom Pessoal fica a mensagem do Steve Jobs, excelente, pretendo colocar nos 2 próximos posts 1 trabalho que fiz sobre Cloud Computing e o início do passo a passo para tirar a SCJP com resumos, capítulos e guias de estudo.

Criando Modais

Bom pessoal, meu primeiro Post de 2009, ano novo, um monte de coisas novas rsss...
Bom estavamos tendo problemas aqui no sistema em que estou desenvolvendo com a galera e toda vez que mandavamos emitir relatórios abria uma horrível janela pop up e o que acontecia? O Usuário não esperava carregar e apertava diversas vezes o botão para gerar o relatório e o que acontece quando você faz várias chamadas em querys extremamente pesadas? você congestiona tudo, deixa o sistema ultra-lerdo e derruba tudo...
Pois bem,
Solução Rápida: Bloquear o botão...
Problema: poderia burlar tal bloqueio se entrasse de novo no menu, pois o mesmo carregaria a tela o famoso refresh e o botão habilitaria...
Solução Boa: vamos criar um modal, assim ele bloqueia toda a tela e o usuário ou espera carregar ou fecha a janela que seria a antiga janela Pop Up.
Pois bem, eu pesquisei (crédito no SubModal ao Rubem Azenha, ele que me falou desse modal é bem simples e é o que estou utilizando no momento =).) e achei inúmeras formas de fazer o modal, com JQuery, com Prototype + Scriptaculous e com o SubModal, no final das contas eu escolhi o subModal, por ser mais simples e não necessitar de outras libs JS, como o JQuery ou o ModalBox que necessitava do Prototype + Scriptaculous, como aqui não está determinado se vamos sair do Pototype e ir para o JQuery acabei achando o SubModal como melhor solução.
Porém nesse pequeno tutorial vou colocar as 3 formas de criar o modal.
OBS: como ainda não coloquei um código para ignorar o html nas postagens tirem o "." no início das tags. EX: <.script... ficaria script sem o "."

No JQuery:
Com JQuery:
HTML:

<.html>

Coloque as Lib na sua página HTML:
<.script type="text/javascript" src="jquery-1.3.1.js"/>

O código Script:
<.script>
;(function($){
$.modal = function(opt) {
var options = $.extend(opt,{})
var overlay = document.createElement('div');
var $doc = $(document);
var dim = {
h: $doc.height(),
w: $doc.width()
}

$(overlay).css({
background:'#777',
opacity: .7,
top:0,left:0,position:'absolute',
width:'100%',
height: dim.h,
zIndex: 10000
}).appendTo('body');

var box = document.createElement('div');
var boxDim = {
w: options.width||(dim.w / 1.4),
h: options.height||(dim.h / 1.4),
ml: parseInt(options.width||(dim.w / 1.4)) / 2,
mt: parseInt(options.height||(dim.h / 1.4)) / 2
}
var btnClose = document.createElement('button');

$(box).css({
zIndex: 10001,
position:'absolute',
background:options.background||'#fff',
border:'2px solid #444',
width: boxDim.w,
height: boxDim.h,
left:'50%',top:'50%',
marginLeft: - boxDim.ml,
marginTop: - boxDim.mt
}).html(options.text).appendTo('body');

$(btnClose).one('click',function(){
$(box).remove();
$(overlay).fadeOut(function(){
$(this).remove();
});
}).html('fechar').appendTo(box);
}
})(jQuery);
$(function(){
$('.alterarBT').click(function(){
$.modal({
text:'Teste da mensagem.',
width: 300,
height: 200,
background:'#555'
})
});

});
<./script>

O Estilo:

<.style>
label {
float:left;
width:150px;
text-align:right;
padding-right:4px;
clear:left;
}
<./style>

O final do HTML:

<.body>
<.h2>Teste<./h2>
<.form id="Form" action="" method="post">
<.input type="button" value="Teste" class="alterarBT"/>
<./form>
<./body>
<./html>

No subModal:
HTML 1:

<.html>
Colocando as libs:
<.script language="JavaScript" src="common.js">
<.script language="JavaScript" src="subModal.js">

Os CSSs:
<.link rel="stylesheet" type="text/css" href="style.css"/>
<.link rel="stylesheet" type="text/css" href="subModal.css"/>

O corpo com o método modal:
<.body>
<.input name="relatorio" type="button" value="Gerar Relatório" class="botao" onclick="javascript:showPopWin('teste.html', 600, 400, null)">
<./body>
<./html>

HTML2 (teste.html):
<.html>
<.body>
Texto Qualquer.
<./body>
<./html>

No caso temos 2 htmls, 1 que é a página que tem o modal na função que chamará a segunda página.

Com o ModalBox
O HTML:

<.html>

Coloque as Lib na sua página HTML:
<.script type="text/javascript" src="prototype.js">
<.script type="text/javascript" src="scriptaculous.js? ¬ load=effects">
<.script type="text/javascript" src="modalbox.js">

Os CSSs:
<.link rel="stylesheet" href="modalbox.css" type="text/css" media="screen" />

O Link com a função do modal no corpo da página:
<.body>
<.a href="#" title="Teste" onclick=" Modalbox.show(this.href, {title: this.title, width: 600}); return false; "> Teste Link

Fim do HTML:
<./body>
<./html>

feliz 2009 com muitos posts....

Bom já que ninguem se manifestou eu cheguei primeiro.

Bom quero apenas desejar um feliz 2009 agora para todos os coaboradores, visitantes e dentre outros.

Desejo um bom ano de estudo e espero que esse blog bombe nesse ano com muitos e muitos posts, vamos lá galera vamos fazer o nosso blog fazer sucesso na net, ajudando todos os niveis de desenvolvedores interessados no mundo java entre outros.

Abraços

Boas Festas

Pessoal 2009 está chegando e desejo a todos BOAS FESTAS, vamos postar muitos mais tutoriais em 2009.

Abraços

Scrum e XP Direto das Trincheiras

Pessoal, desculpe pela falta de tempo para postar mais tutoriais e artigos, saiu na InforQ a tradução do livro Scrum e XP das trincheiras.
Vale a pena dar uma olhada.
É grátis.

Download do livro