JQuery UI – Dialog (bug ou feature?)

Fala galera da Dev,

Passei um apuro com o JQuery Dialog recentemente e resolvi compartilhar o problema (ou talvez feature mal documentada) com vocês.

Eu tinha um HTML da seguinte maneira (simplificado):

<html>
<body>
<form> <div id=’dialog’> … </div></form>
</body>
</html>

E precisava usar uma função de validação que checaria todos os inputs dentro da tag FORM. Com a minha marcação acima, tudo perfeito, certo? A div ESTÁ dentro do formulário, quando eu for validar, tudo que estiver na dialog também será validado, correto?

Errado.

Quando chamamos a dialog, o conteúdo é extraído do seu container original (no caso, do form).

Quer confirmar? Veja o seguinte:

<!doctype html>
<html lang="us">
<head>
	<meta charset="utf-8">
	<title>Testes</title>
	<link href="css/ui-lightness/jquery-ui-1.10.3.custom.css" rel="stylesheet">
	<script src="js/jquery-1.9.1.js"></script>
	<script src="js/jquery-ui-1.10.3.custom.js"></script>
	<script>

		var modal = null;

		$(function(){

			$("#btnModal").click(function(){

				modal = $("#modal").dialog({
					modal: true
				});

			});

		});

	</script>
	<style>
		body
		{
			font-family: sans-serif;
		}

		#container h2
		{
			color: #467;
			font-size: 55px;
		}
	</style>
</head>
<body>
	<div id="container">
		<div id="modal">
			GIMME FIRE <br />
			GIMME THAT WHICH I <br />
			<h2>DESIRE</h2>
		</div>
	</div>

	<input type="button" id='btnModal' value='GIMME FUEL' />

</body>
</html>

Visualização:

a1Visualização com o Firebug:

a2

Até ai, tudo lindo. Contemplem como tudo fica após a invocação da dialog:

a3

Notaram que o html sumiu e foi para a dialog? Inclusive o “DESIRE” perdeu a formatação. Pois é… Não foi só isso que aconteceu nos bastidores:

a4

Nossa div foi movida para fora do “container”, causando a perda da formatação.

Soluções

  • Faça com que a div contenha tudo que você precisa
  • Chore no bugtracker do JQuery UI

No meu problema, a solução foi simples. Bastou colocar o form dentro da dialog, para que o formulário fosse transportado junto com a dialog no momento do chamado:

<html>
<body>
<div id=’dialog’><form>  … </form></div>
</body>
</html>

Não é bonito, mas resolve!

Dúvidas? Sugestões? Deixem nos comentários!

Twitter Bootstrap e Jquery UI (rapidinha I)

Fala Galera!

Uma dica rapidinha sobre JQuery UI em conjunto com Twitter Bootstrap:

A inclusão dos JS’s devem ser feitos nessa ordem:

<script type=”text/javascript” src=”Scripts/bootstrap.js”></script>
<script type=”text/javascript” src=”Scripts/jquery-ui-1.10.3.custom.js”></script>

Caso contrário, algumas widgets do JQuery UI podem ter o funcionamento comprometido (como o DIALOG).

Valeu!

Dicas de Netbeans com PHP

Ultimamente, venho estudando mais PHP e OOP. Por necessidade, encontrei algumas dicas de como facilitar a minha vida com a OOP do PHP.

Por exemplo, aprendi que você consegue ter uma leve “tipagem” de parâmetros de uma função! Isso já ajuda bastante.

Também aprendi como fazer o autocomplete do Netbeans te ajudar um pouco mais, usando o PHPDoc.

Embarque nessa viagem clicando aqui!

Regras de negócio: Aprenda ou aprenda

“… Eu entrei na faculdade para programar, mas hoje sei que existe muito mais do que escrever códigos.”

Falei isso quando o professor nos perguntou, um por um, o porquê de termos entrado na faculdade. E, sinceramente, é exatamente a minha realidade de hoje.

A muitos e muitos anos atrás (cerca de uns 6) eu acreditava que programadores faziam coisas encapetadas com milhões de linhas escritas no maldito compilador C. Ou C++, se o cara era bom.

Sempre achava o Delphi “coisa para os fracos”, afinal, “é só clicar e arrastar”, né? Né não.

Delphi, C#, Java, qualquer linguagem com uma IDE legal te permite acelerar a produção de código para alguns tipos de aplicações.

Por exemplo, faça a soma de dois números em C e em Delphi. O C e seu Dos é bem mais rápido e prático. Não que você não possa usar um console application no Delphi, mas não acredito que seja o objetivo de uma ferramenta RAD.

Entretando, para uma aplicação comercial, as RAD’s da vida facilitam mesmo. Com alguns cliques, cá está seu formulário de vendas. Pelo menos o visual.

Saiba  o QUE fazer, não COMO

Agora te pergunto, o que diabos a grid bonitinha que você zebrou e coloriu vai fazer? Vai mostrar quais colunas? O que vai acontecer quando clicar no botão de OK? E se o fdp o usuário fechar a tela no meio do procedimento?

Até ai, temos dificuldades, mas tudo tranquilo. É só programação. O problema de verdade é se você tiver que programar o estorno de uma venda. Você sabe o que é um estorno? O estorno do seu cliente vai funcionar daquela mesma maneira?

Regras de negócio são a parte mais difícil para softwares comerciais. Fazer conexão com banco de dados ou criar uma classe com métodos megazord (termo by Gustavo, companheiro de trabalho) são preocupações – mas você pode recorrer a um bom livro ou ao oráculo.

Já pra aprender as regras de negócio, você depende do cliente. Claro, sua experiência pode te ajudar, mas cada um é cada um. Óbvio que nosso amigo cliente vai nos ajudar, explicar tudo em detalhes para nós, com a maior paciência do mundo. #MeEnganaQueEuGosto

Aprender a perguntar

No computador, tudo funciona 8 ou 80. Ou passa energia, ou não. Talvez por isso seja mais fácil entender como um computador funciona do quê as pessoas.

O problema A coisa mais divertida é que os computadores são amigos só dos programadores (nem deles, às vezes) e, para fazermos um bom software, temos que ficar amigo do cliente!

Ô Fulano, sabe o formulário de vendas? Queria saber como funciona o sistema de estorno de vocês… O produto só volta para o estoque? Qué um histórico, alguma coisa diferente?

Seja legal com seu cliente. No final, ele paga seu salário. Se ele quer que o estorno tenha histórico, nome do funcionário que estornou, data, chave de segurança, temperatura ambiente e velocidade do vento, faça. Só verifique se o que ele quer é possível e cobre de acordo :P.

Na minha opinião de iniciante, o que mais toma tempo hoje é saber o que fazer. Como fazer chovem em livros, forums, etc.

Agora, quem pode te ajudar quando nem mesmo você sabe o que quer fazer?