<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<META NAME="keywords" CONTENT="netbeans,magazine,Visual,web Application,visual web pack">
<META NAME="description" CONTENT="NetBeans Magazine: Visual Web Application Design With NetBeans IDE">
<head>
<meta http-equiv=Content-Type content="text/html; charset=windows-1252">
<title>Visual Web Application Design With NetBeans IDE</title>
<style>
<!--
p.Noparagraphstyle, li.Noparagraphstyle, div.Noparagraphstyle
	{line-height:120%;
	text-autospace:none;
	font-size:12.0pt;
	font-family:Times;
	color:black;}
p.NB-Corpo, li.NB-Corpo, div.NB-Corpo
	{text-align:left;
	text-indent:5.65pt;
	line-height:16.0pt;
	text-autospace:none;
	font-size:9.0pt;
	font-family:"Verdana";
	color:black;
	letter-spacing:.05pt;}
p.NB-Interttulo, li.NB-Interttulo, div.NB-Interttulo
	{line-height:120%;
	page-break-after:avoid;
	text-autospace:none;
	font-size:13.0pt;
	font-family:"Verdana";
	color:#00722B;
	font-weight:bold;}
p.NB-Interttulo2, li.NB-Interttulo2, div.NB-Interttulo2
	{line-height:12.0pt;
	page-break-after:avoid;
	text-autospace:none;
	font-size:9.0pt;
	font-family:"Verdana";
	color:#BC371F;
	font-weight:bold;}
p.NB-Notadica, li.NB-Notadica, div.NB-Notadica
	{text-align:left;
	line-height:13.0pt;
	tab-stops:14.15pt;
	text-autospace:none;
	font-size:10.0pt;
	font-family:"Verdana";
	color:#BC371F;
	letter-spacing:.05pt;}
p.NB-Cdigointerno, li.NB-Cdigointerno, div.NB-Cdigointerno
	{line-height:10.0pt;
	text-autospace:none;
	font-size:8.0pt;
	font-family:"Verdana";
	color:black;}
p.NB-Legendaimagem, li.NB-Legendaimagem, div.NB-Legendaimagem
	{line-height:12.0pt;
	tab-stops:14.15pt;
	text-autospace:none;
	font-size:10.0pt;
	font-family:"Verdana";
	color:black;
	letter-spacing:.05pt;}
span.NB-NegritoTcnico
	{font-family:"Verdana";
	color:black;
	letter-spacing:.05pt;
	font-weight:bold;
	vertical-align:baseline;}
span.NB-Legendanegrito
	{font-weight:bold;}
div.NB-Interttulo21 {line-height:12.0pt;
	page-break-after:avoid;
	text-autospace:none;
	font-size:9.0pt;
	font-family:"Verdana";
	color:#BC371F;
	font-weight:bold;}
li.NB-Interttulo21 {line-height:12.0pt;
	page-break-after:avoid;
	text-autospace:none;
	font-size:9.0pt;
	font-family:"Verdana";
	color:#BC371F;
	font-weight:bold;}
p.NB-Interttulo21 {line-height:12.0pt;
	page-break-after:avoid;
	text-autospace:none;
	font-size:9.0pt;
	font-family:"Verdana";
	color:#BC371F;
	font-weight:bold;}
div.NB-Corpo1 {text-align:left;
	text-indent:5.65pt;
	line-height:16.0pt;
	text-autospace:none;
	font-size:9.0pt;
	font-family:"Verdana";
	color:black;
	letter-spacing:.05pt;}
li.NB-Corpo1 {text-align:left;
	text-indent:5.65pt;
	line-height:16.0pt;
	text-autospace:none;
	font-size:9.0pt;
	font-family:"Verdana";
	color:black;
	letter-spacing:.05pt;}
p.NB-Corpo1 {text-align:left;
	text-indent:5.65pt;
	line-height:16.0pt;
	text-autospace:none;
	font-size:9.0pt;
	font-family:"Verdana";
	color:black;
	letter-spacing:.05pt;}
div.NB-Cdigointerno1 {line-height:10.0pt;
	text-autospace:none;
	font-size:8.0pt;
	font-family:"Verdana";
	color:black;}
div.NB-Corpo2 {text-align:left;
	text-indent:5.65pt;
	line-height:16.0pt;
	text-autospace:none;
	font-size:9.0pt;
	font-family:"Verdana";
	color:black;
	letter-spacing:.05pt;}
div.NB-Interttulo1 {line-height:120%;
	page-break-after:avoid;
	text-autospace:none;
	font-size:13.0pt;
	font-family:"Verdana";
	color:#00722B;
	font-weight:bold;}
div.NB-Interttulo22 {line-height:12.0pt;
	page-break-after:avoid;
	text-autospace:none;
	font-size:9.0pt;
	font-family:"Verdana";
	color:#BC371F;
	font-weight:bold;}
div.NB-Notadica1 {text-align:left;
	line-height:13.0pt;
	tab-stops:14.15pt;
	text-autospace:none;
	font-size:10.0pt;
	font-family:"Verdana";
	color:#BC371F;
	letter-spacing:.05pt;}
div.Noparagraphstyle1 {line-height:120%;
	text-autospace:none;
	font-size:12.0pt;
	font-family:Times;
	color:black;}
li.NB-Cdigointerno1 {line-height:10.0pt;
	text-autospace:none;
	font-size:8.0pt;
	font-family:"Verdana";
	color:black;}
li.NB-Corpo2 {text-align:left;
	text-indent:5.65pt;
	line-height:16.0pt;
	text-autospace:none;
	font-size:9.0pt;
	font-family:"Verdana";
	color:black;
	letter-spacing:.05pt;}
li.NB-Interttulo1 {line-height:120%;
	page-break-after:avoid;
	text-autospace:none;
	font-size:13.0pt;
	font-family:"Verdana";
	color:#00722B;
	font-weight:bold;}
li.NB-Interttulo22 {line-height:12.0pt;
	page-break-after:avoid;
	text-autospace:none;
	font-size:9.0pt;
	font-family:"Verdana";
	color:#BC371F;
	font-weight:bold;}
li.NB-Notadica1 {text-align:left;
	line-height:13.0pt;
	tab-stops:14.15pt;
	text-autospace:none;
	font-size:10.0pt;
	font-family:"Verdana";
	color:#BC371F;
	letter-spacing:.05pt;}
li.Noparagraphstyle1 {line-height:120%;
	text-autospace:none;
	font-size:12.0pt;
	font-family:Times;
	color:black;}
p.NB-Cdigointerno1 {line-height:10.0pt;
	text-autospace:none;
	font-size:8.0pt;
	font-family:"Verdana";
	color:black;}
p.NB-Corpo2 {text-align:left;
	text-indent:5.65pt;
	line-height:16.0pt;
	text-autospace:none;
	font-size:9.0pt;
	font-family:"Verdana";
	color:black;
	letter-spacing:.05pt;}
p.NB-Corpo11 {text-align:left;
	text-indent:5.65pt;
	line-height:16.0pt;
	text-autospace:none;
	font-size:9.0pt;
	font-family:"Verdana";
	color:black;
	letter-spacing:.05pt;}
p.NB-Interttulo1 {line-height:120%;
	page-break-after:avoid;
	text-autospace:none;
	font-size:13.0pt;
	font-family:"Verdana";
	color:#00722B;
	font-weight:bold;}
p.NB-Interttulo22 {line-height:12.0pt;
	page-break-after:avoid;
	text-autospace:none;
	font-size:9.0pt;
	font-family:"Verdana";
	color:#BC371F;
	font-weight:bold;}
p.NB-Notadica1 {text-align:left;
	line-height:13.0pt;
	tab-stops:14.15pt;
	text-autospace:none;
	font-size:10.0pt;
	font-family:"Verdana";
	color:#BC371F;
	letter-spacing:.05pt;}
p.Noparagraphstyle1 {line-height:120%;
	text-autospace:none;
	font-size:12.0pt;
	font-family:Times;
	color:black;}
span.NB-NegritoTcnico1 {font-family:"Verdana";
	color:black;
	letter-spacing:.05pt;
	font-weight:bold;
	vertical-align:baseline;}
.NB-Listagenstitulos {font-family: Verdana, Arial, Helvetica, sans-serif;
	color: #FFFFFF;
	font-size: 14px;}
.NB-Listagens {font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #000000;}
.NB-Quadrotitulo {font-family: Verdana, Arial, Helvetica, sans-serif; color: #FFFFFF; font-size: 14px; font-weight: bold;}
p.NB-Corpo21 {text-align:left;
	text-indent:5.65pt;
	line-height:16.0pt;
	text-autospace:none;
	font-size:9.0pt;
	font-family:"Verdana";
	color:black;
	letter-spacing:.05pt;}
span.NB-NegritoTcnico11 {font-family:"Verdana";
	color:black;
	letter-spacing:.05pt;
	font-weight:bold;
	vertical-align:baseline;}
div.NB-Interttulo23 {line-height:12.0pt;
	page-break-after:avoid;
	text-autospace:none;
	font-size:9.0pt;
	font-family:"Verdana";
	color:#BC371F;
	font-weight:bold;}
div.NB-TabelaCorpo {text-align:left;
	text-indent:5.65pt;
	line-height:14.0pt;
	text-autospace:none;
	font-size:9.0pt;
	font-family:"Verdana";
	color:white;}
div.NB-TabelaIntertitulo {line-height:12.0pt;
	page-break-after:avoid;
	text-autospace:none;
	font-size:9.0pt;
	font-family:"Verdana";
	color:white;
	letter-spacing:-.05pt;
	font-weight:bold;}
li.NB-Interttulo23 {line-height:12.0pt;
	page-break-after:avoid;
	text-autospace:none;
	font-size:9.0pt;
	font-family:"Verdana";
	color:#BC371F;
	font-weight:bold;}
li.NB-TabelaCorpo {text-align:left;
	text-indent:5.65pt;
	line-height:14.0pt;
	text-autospace:none;
	font-size:9.0pt;
	font-family:"Verdana";
	color:white;}
li.NB-TabelaIntertitulo {line-height:12.0pt;
	page-break-after:avoid;
	text-autospace:none;
	font-size:9.0pt;
	font-family:"Verdana";
	color:white;
	letter-spacing:-.05pt;
	font-weight:bold;}
p.NB-Interttulo23 {line-height:12.0pt;
	page-break-after:avoid;
	text-autospace:none;
	font-size:9.0pt;
	font-family:"Verdana";
	color:#BC371F;
	font-weight:bold;}
p.NB-TabelaCorpo {text-align:left;
	text-indent:5.65pt;
	line-height:14.0pt;
	text-autospace:none;
	font-size:9.0pt;
	font-family:"Verdana";
	color:white;}
p.NB-TabelaIntertitulo {line-height:12.0pt;
	page-break-after:avoid;
	text-autospace:none;
	font-size:9.0pt;
	font-family:"Verdana";
	color:white;
	letter-spacing:-.05pt;
	font-weight:bold;}
p.NB-Interttulo231 {line-height:12.0pt;
	page-break-after:avoid;
	text-autospace:none;
	font-size:9.0pt;
	font-family:"Verdana";
	color:#BC371F;
	font-weight:bold;}
p.NB-TabelaCorpo1 {text-align:left;
	text-indent:5.65pt;
	line-height:14.0pt;
	text-autospace:none;
	font-size:9.0pt;
	font-family:"Verdana";
	color:white;}
p.NB-TabelaIntertitulo1 {line-height:12.0pt;
	page-break-after:avoid;
	text-autospace:none;
	font-size:9.0pt;
	font-family:"Verdana";
	color:white;
	letter-spacing:-.05pt;
	font-weight:bold;}
div.NB-TabelaCorpo1 {text-align:left;
	text-indent:5.65pt;
	line-height:14.0pt;
	text-autospace:none;
	font-size:9.0pt;
	font-family:"Verdana";
	color:white;}
div.NB-TabelaIntertitulo1 {line-height:12.0pt;
	page-break-after:avoid;
	text-autospace:none;
	font-size:9.0pt;
	font-family:"Verdana";
	color:white;
	letter-spacing:-.05pt;
	font-weight:bold;}
li.NB-TabelaCorpo1 {text-align:left;
	text-indent:5.65pt;
	line-height:14.0pt;
	text-autospace:none;
	font-size:9.0pt;
	font-family:"Verdana";
	color:white;}
li.NB-TabelaIntertitulo1 {line-height:12.0pt;
	page-break-after:avoid;
	text-autospace:none;
	font-size:9.0pt;
	font-family:"Verdana";
	color:white;
	letter-spacing:-.05pt;
	font-weight:bold;}
p.NB-TabelaCorpo2 {text-align:left;
	text-indent:5.65pt;
	line-height:14.0pt;
	text-autospace:none;
	font-size:9.0pt;
	font-family:"Verdana";
	color:white;}
p.NB-TabelaIntertitulo2 {line-height:12.0pt;
	page-break-after:avoid;
	text-autospace:none;
	font-size:9.0pt;
	font-family:"Verdana";
	color:white;
	letter-spacing:-.05pt;
	font-weight:bold;}
p.NB-Corpo111 {text-align:left;
	text-indent:5.65pt;
	line-height:16.0pt;
	text-autospace:none;
	font-size:9.0pt;
	font-family:"Verdana";
	color:black;
	letter-spacing:.05pt;}
p.NB-Corpo112 {text-align:left;
	text-indent:5.65pt;
	line-height:16.0pt;
	text-autospace:none;
	font-size:9.0pt;
	font-family:"Verdana";
	color:black;
	letter-spacing:.05pt;}
p.NB-Corpo1121 {text-align:left;
	text-indent:5.65pt;
	line-height:16.0pt;
	text-autospace:none;
	font-size:9.0pt;
	font-family:"Verdana";
	color:black;
	letter-spacing:.05pt;}
p.NB-Corpo11211 {text-align:left;
	text-indent:5.65pt;
	line-height:16.0pt;
	text-autospace:none;
	font-size:9.0pt;
	font-family:"Verdana";
	color:black;
	letter-spacing:.05pt;}
p.NB-Corpo112111 {text-align:left;
	text-indent:5.65pt;
	line-height:16.0pt;
	text-autospace:none;
	font-size:9.0pt;
	font-family:"Verdana";
	color:black;
	letter-spacing:.05pt;}
p.NB-Corpo1121111 {text-align:left;
	text-indent:5.65pt;
	line-height:16.0pt;
	text-autospace:none;
	font-size:9.0pt;
	font-family:"Verdana";
	color:black;
	letter-spacing:.05pt;}
p.NB-Corpo1121112 {text-align:left;
	text-indent:5.65pt;
	line-height:16.0pt;
	text-autospace:none;
	font-size:9.0pt;
	font-family:"Verdana";
	color:black;
	letter-spacing:.05pt;}
p.NB-Corpo1121113 {text-align:left;
	text-indent:5.65pt;
	line-height:16.0pt;
	text-autospace:none;
	font-size:9.0pt;
	font-family:"Verdana";
	color:black;
	letter-spacing:.05pt;}
p.NB-Corpo11211131 {text-align:left;
	text-indent:5.65pt;
	line-height:16.0pt;
	text-autospace:none;
	font-size:9.0pt;
	font-family:"Verdana";
	color:black;
	letter-spacing:.05pt;}
p.NB-Corpo1111 {text-align:left;
	text-indent:5.65pt;
	line-height:16.0pt;
	text-autospace:none;
	font-size:9.0pt;
	font-family:"Verdana";
	color:black;
	letter-spacing:.05pt;}
p.NB-TabelaCorpo21 {text-align:left;
	text-indent:5.65pt;
	line-height:14.0pt;
	text-autospace:none;
	font-size:9.0pt;
	font-family:"Verdana";
	color:white;}
p.NB-TabelaIntertitulo21 {line-height:12.0pt;
	page-break-after:avoid;
	text-autospace:none;
	font-size:9.0pt;
	font-family:"Verdana";
	color:white;
	letter-spacing:-.05pt;
	font-weight:bold;}
div.NB-TabelaCorpo2 {text-align:left;
	text-indent:5.65pt;
	line-height:14.0pt;
	text-autospace:none;
	font-size:9.0pt;
	font-family:"Verdana";
	color:white;}
li.NB-TabelaCorpo2 {text-align:left;
	text-indent:5.65pt;
	line-height:14.0pt;
	text-autospace:none;
	font-size:9.0pt;
	font-family:"Verdana";
	color:white;}
p.NB-TabelaCorpo3 {text-align:left;
	text-indent:5.65pt;
	line-height:14.0pt;
	text-autospace:none;
	font-size:9.0pt;
	font-family:"Verdana";
	color:white;}
span.NB-NegritoTcnico2 {font-family:"Verdana";
	color:black;
	letter-spacing:.05pt;
	font-weight:bold;
	vertical-align:baseline;}
span.Refdenotaderodap00E9 {vertical-align:super;}
p.NB-Corpo11111 {text-align:left;
	text-indent:5.65pt;
	line-height:16.0pt;
	text-autospace:none;
	font-size:9.0pt;
	font-family:"Verdana";
	color:black;
	letter-spacing:.05pt;}
p.NB-Corpo112111311 {text-align:left;
	text-indent:5.65pt;
	line-height:16.0pt;
	text-autospace:none;
	font-size:9.0pt;
	font-family:"Verdana";
	color:black;
	letter-spacing:.05pt;}
p.NB-Corpo1121113111 {text-align:left;
	text-indent:5.65pt;
	line-height:16.0pt;
	text-autospace:none;
	font-size:9.0pt;
	font-family:"Verdana";
	color:black;
	letter-spacing:.05pt;}
p.NB-Corpo1112 {text-align:left;
	text-indent:5.65pt;
	line-height:16.0pt;
	text-autospace:none;
	font-size:9.0pt;
	font-family:"Verdana";
	color:black;}
.style1 {font-size: 9.0pt}
.style3 {font-size: 11px;
	font-weight: bold;}
p.NB-Corpo22 {text-align:left;
	text-indent:5.65pt;
	line-height:16.0pt;
	text-autospace:none;
	font-size:9.0pt;
	font-family:"Verdana";
	color:black;
	letter-spacing:.05pt;}
div.NB-Corpo3 {text-align:left;
	text-indent:5.65pt;
	line-height:16.0pt;
	text-autospace:none;
	font-size:9.0pt;
	font-family:"Verdana";
	color:black;
	letter-spacing:.05pt;}
div.NB-Interttulo3 {line-height:120%;
	page-break-after:avoid;
	text-autospace:none;
	font-size:13.0pt;
	font-family:"Verdana";
	color:#00722B;
	font-weight:bold;}
div.NB-Interttulo24 {line-height:12.0pt;
	page-break-after:avoid;
	text-autospace:none;
	font-size:9.0pt;
	font-family:"Verdana";
	color:#BA3287;
	font-weight:bold;}
div.NB-Notadica2 {text-align:left;
	line-height:13.0pt;
	tab-stops:14.15pt;
	text-autospace:none;
	font-size:10.0pt;
	font-family:"Verdana";
	color:#BA3287;
	letter-spacing:.05pt;}
li.NB-Corpo3 {text-align:left;
	text-indent:5.65pt;
	line-height:16.0pt;
	text-autospace:none;
	font-size:9.0pt;
	font-family:"Verdana";
	color:black;
	letter-spacing:.05pt;}
li.NB-Interttulo3 {line-height:120%;
	page-break-after:avoid;
	text-autospace:none;
	font-size:13.0pt;
	font-family:"Verdana";
	color:#00722B;
	font-weight:bold;}
li.NB-Interttulo24 {line-height:12.0pt;
	page-break-after:avoid;
	text-autospace:none;
	font-size:9.0pt;
	font-family:"Verdana";
	color:#BA3287;
	font-weight:bold;}
li.NB-Notadica2 {text-align:left;
	line-height:13.0pt;
	tab-stops:14.15pt;
	text-autospace:none;
	font-size:10.0pt;
	font-family:"Verdana";
	color:#BA3287;
	letter-spacing:.05pt;}
p.NB-Corpo3 {text-align:left;
	text-indent:5.65pt;
	line-height:16.0pt;
	text-autospace:none;
	font-size:9.0pt;
	font-family:"Verdana";
	color:black;
	letter-spacing:.05pt;}
p.NB-Interttulo3 {line-height:120%;
	page-break-after:avoid;
	text-autospace:none;
	font-size:13.0pt;
	font-family:"Verdana";
	color:#00722B;
	font-weight:bold;}
p.NB-Interttulo24 {line-height:12.0pt;
	page-break-after:avoid;
	text-autospace:none;
	font-size:9.0pt;
	font-family:"Verdana";
	color:#BA3287;
	font-weight:bold;}
p.NB-Notadica2 {text-align:left;
	line-height:13.0pt;
	tab-stops:14.15pt;
	text-autospace:none;
	font-size:10.0pt;
	font-family:"Verdana";
	color:#BA3287;
	letter-spacing:.05pt;}
span.TechText {font-family:"Verdana";
	letter-spacing:0pt;
	font-weight:bold;}
p.NB-Corpo31 {text-align:left;
	text-indent:5.65pt;
	line-height:16.0pt;
	text-autospace:none;
	font-size:9.0pt;
	font-family:"Verdana";
	color:black;
	letter-spacing:.05pt;}
p.NB-Interttulo241 {line-height:12.0pt;
	page-break-after:avoid;
	text-autospace:none;
	font-size:9.0pt;
	font-family:"Verdana";
	color:#BA3287;
	font-weight:bold;}
p.NB-Interttulo31 {line-height:120%;
	page-break-after:avoid;
	text-autospace:none;
	font-size:13.0pt;
	font-family:"Verdana";
	color:#00722B;
	font-weight:bold;}
p.NB-Notadica21 {text-align:left;
	line-height:13.0pt;
	tab-stops:14.15pt;
	text-autospace:none;
	font-size:10.0pt;
	font-family:"Verdana";
	color:#BA3287;
	letter-spacing:.05pt;}
span.TechText1 {font-family:"Verdana";
	letter-spacing:0pt;
	font-weight:bold;}
p.NB-Corpo113 {text-align:left;
	text-indent:5.65pt;
	line-height:16.0pt;
	text-autospace:none;
	font-size:9.0pt;
	font-family:"Verdana";
	color:black;
	letter-spacing:.05pt;}
p.NB-Corpo1131 {text-align:left;
	text-indent:5.65pt;
	line-height:16.0pt;
	text-autospace:none;
	font-size:9.0pt;
	font-family:"Verdana";
	color:black;
	letter-spacing:.05pt;}
p.NB-Corpo11311 {text-align:left;
	text-indent:5.65pt;
	line-height:16.0pt;
	text-autospace:none;
	font-size:9.0pt;
	font-family:"Verdana";
	color:black;
	letter-spacing:.05pt;}
p.NB-Corpo113111 {text-align:left;
	text-indent:5.65pt;
	line-height:16.0pt;
	text-autospace:none;
	font-size:9.0pt;
	font-family:"Verdana";
	color:black;
	letter-spacing:.05pt;}
p.NB-Corpo1131111 {text-align:left;
	text-indent:5.65pt;
	line-height:16.0pt;
	text-autospace:none;
	font-size:9.0pt;
	font-family:"Verdana";
	color:black;
	letter-spacing:.05pt;}
p.NB-Corpo11311111 {text-align:left;
	text-indent:5.65pt;
	line-height:16.0pt;
	text-autospace:none;
	font-size:9.0pt;
	font-family:"Verdana";
	color:black;
	letter-spacing:.05pt;}
p.NB-Corpo113111111 {text-align:left;
	text-indent:5.65pt;
	line-height:16.0pt;
	text-autospace:none;
	font-size:9.0pt;
	font-family:"Verdana";
	color:black;
	letter-spacing:.05pt;}
p.NB-Corpo1131111111 {text-align:left;
	text-indent:5.65pt;
	line-height:16.0pt;
	text-autospace:none;
	font-size:9.0pt;
	font-family:"Verdana";
	color:black;
	letter-spacing:.05pt;}
p.NB-Corpo11311111111 {text-align:left;
	text-indent:5.65pt;
	line-height:16.0pt;
	text-autospace:none;
	font-size:9.0pt;
	font-family:"Verdana";
	color:black;
	letter-spacing:.05pt;}
p.NB-Interttulo232 {line-height:12.0pt;
	page-break-after:avoid;
	text-autospace:none;
	font-size:9.0pt;
	font-family:"Verdana";
	color:#BC371F;
	font-weight:bold;}
p.NB-TabelaCorpo4 {text-align:left;
	text-indent:5.65pt;
	line-height:14.0pt;
	text-autospace:none;
	font-size:9.0pt;
	font-family:"Verdana";
	color:white;}
p.NB-TabelaIntertitulo3 {line-height:12.0pt;
	page-break-after:avoid;
	text-autospace:none;
	font-size:9.0pt;
	font-family:"Verdana";
	color:white;
	letter-spacing:-.05pt;
	font-weight:bold;}
p.NB-Corpo11311111112 {text-align:left;
	text-indent:5.65pt;
	line-height:16.0pt;
	text-autospace:none;
	font-size:9.0pt;
	font-family:"Verdana";
	color:black;
	letter-spacing:.05pt;}
p.NB-Corpo113111111121 {text-align:left;
	text-indent:5.65pt;
	line-height:16.0pt;
	text-autospace:none;
	font-size:9.0pt;
	font-family:"Verdana";
	color:black;
	letter-spacing:.05pt;}
p.NB-Corpo1131111111211 {text-align:left;
	text-indent:5.65pt;
	line-height:16.0pt;
	text-autospace:none;
	font-size:9.0pt;
	font-family:"Verdana";
	color:black;
	letter-spacing:.05pt;}
p.NB-Corpo11311111112111 {text-align:left;
	text-indent:5.65pt;
	line-height:16.0pt;
	text-autospace:none;
	font-size:9.0pt;
	font-family:"Verdana";
	color:black;
	letter-spacing:.05pt;}
p.NB-Corpo113111111121111 {text-align:left;
	text-indent:5.65pt;
	line-height:16.0pt;
	text-autospace:none;
	font-size:9.0pt;
	font-family:"Verdana";
	color:black;
	letter-spacing:.05pt;}
p.NB-Corpo11121 {text-align:left;
	text-indent:5.65pt;
	line-height:16.0pt;
	text-autospace:none;
	font-size:9.0pt;
	font-family:"Verdana";
	color:black;}
div.NB-Cdigointerno2 {line-height:10.0pt;
	text-autospace:none;
	font-size:8.0pt;
	font-family:"Verdana";
	color:black;}
div.NB-Corpo4 {text-align:left;
	text-indent:5.65pt;
	line-height:16.0pt;
	text-autospace:none;
	font-size:9.0pt;
	font-family:"Verdana";
	color:black;
	letter-spacing:.1pt;}
div.NB-Interttulo4 {line-height:120%;
	page-break-after:avoid;
	text-autospace:none;
	font-size:13.0pt;
	font-family:"Verdana";
	color:#00722B;
	font-weight:bold;}
div.NB-Listagemcorpo {line-height:8.0pt;
	tab-stops:5.65pt 11.35pt 17.0pt 22.7pt 1.0cm 34.0pt 39.7pt 45.35pt 51.05pt 2.0cm;
	text-autospace:none;
	font-size:7.0pt;
	font-family:"Prestige Elite";
	color:black;
	letter-spacing:-.05pt;}
div.NB-Notadica3 {text-align:left;
	line-height:13.0pt;
	tab-stops:14.15pt;
	text-autospace:none;
	font-size:10.0pt;
	font-family:"Verdana";
	color:#00722B;
	letter-spacing:.05pt;}
div.Noparagraphstyle2 {line-height:120%;
	text-autospace:none;
	font-size:12.0pt;
	font-family:Times;
	color:black;}
div.Subsection {line-height:120%;
	page-break-after:avoid;
	text-autospace:none;
	font-size:10.0pt;
	font-family:"Verdana";
	color:#00722B;
	font-weight:bold;
	font-style:italic;}
li.NB-Cdigointerno2 {line-height:10.0pt;
	text-autospace:none;
	font-size:8.0pt;
	font-family:"Verdana";
	color:black;}
li.NB-Corpo4 {text-align:left;
	text-indent:5.65pt;
	line-height:16.0pt;
	text-autospace:none;
	font-size:9.0pt;
	font-family:"Verdana";
	color:black;
	letter-spacing:.1pt;}
li.NB-Interttulo4 {line-height:120%;
	page-break-after:avoid;
	text-autospace:none;
	font-size:13.0pt;
	font-family:"Verdana";
	color:#00722B;
	font-weight:bold;}
li.NB-Listagemcorpo {line-height:8.0pt;
	tab-stops:5.65pt 11.35pt 17.0pt 22.7pt 1.0cm 34.0pt 39.7pt 45.35pt 51.05pt 2.0cm;
	text-autospace:none;
	font-size:7.0pt;
	font-family:"Prestige Elite";
	color:black;
	letter-spacing:-.05pt;}
li.NB-Notadica3 {text-align:left;
	line-height:13.0pt;
	tab-stops:14.15pt;
	text-autospace:none;
	font-size:10.0pt;
	font-family:"Verdana";
	color:#00722B;
	letter-spacing:.05pt;}
li.Noparagraphstyle2 {line-height:120%;
	text-autospace:none;
	font-size:12.0pt;
	font-family:Times;
	color:black;}
li.Subsection {line-height:120%;
	page-break-after:avoid;
	text-autospace:none;
	font-size:10.0pt;
	font-family:"Verdana";
	color:#00722B;
	font-weight:bold;
	font-style:italic;}
p.NB-Cdigointerno2 {line-height:10.0pt;
	text-autospace:none;
	font-size:8.0pt;
	font-family:"Verdana";
	color:black;}
p.NB-Corpo4 {text-align:left;
	text-indent:5.65pt;
	line-height:16.0pt;
	text-autospace:none;
	font-size:9.0pt;
	font-family:"Verdana";
	color:black;
	letter-spacing:.1pt;}
p.NB-Interttulo4 {line-height:120%;
	page-break-after:avoid;
	text-autospace:none;
	font-size:13.0pt;
	font-family:"Verdana";
	color:#00722B;
	font-weight:bold;}
p.NB-Listagemcorpo {line-height:8.0pt;
	tab-stops:5.65pt 11.35pt 17.0pt 22.7pt 1.0cm 34.0pt 39.7pt 45.35pt 51.05pt 2.0cm;
	text-autospace:none;
	font-size:7.0pt;
	font-family:"Prestige Elite";
	color:black;
	letter-spacing:-.05pt;}
p.NB-Notadica3 {text-align:left;
	line-height:13.0pt;
	tab-stops:14.15pt;
	text-autospace:none;
	font-size:10.0pt;
	font-family:"Verdana";
	color:#00722B;
	letter-spacing:.05pt;}
p.Noparagraphstyle2 {line-height:120%;
	text-autospace:none;
	font-size:12.0pt;
	font-family:Times;
	color:black;}
p.Subsection {line-height:120%;
	page-break-after:avoid;
	text-autospace:none;
	font-size:10.0pt;
	font-family:"Verdana";
	color:#00722B;
	font-weight:bold;
	font-style:italic;}
span.NB-Legendanegrito1 {font-weight:bold;}
span.NB-NegritoTcnico3 {font-family:"Verdana";
	color:black;
	letter-spacing:.05pt;
	font-weight:bold;
	vertical-align:baseline;}
span.Refdenotaderodap00E91 {vertical-align:super;}
p.NB-Corpo114 {text-align:left;
	text-indent:5.65pt;
	line-height:16.0pt;
	text-autospace:none;
	font-size:9.0pt;
	font-family:"Verdana";
	color:black;
	letter-spacing:.05pt;}
p.NB-Corpo1141 {text-align:left;
	text-indent:5.65pt;
	line-height:16.0pt;
	text-autospace:none;
	font-size:9.0pt;
	font-family:"Verdana";
	color:black;
	letter-spacing:.05pt;}
.style7 {font-family: "Courier New", Courier, monospace; font-size: 9pt; color: #000000;}
p.NB-Corpo11411 {text-align:left;
	text-indent:5.65pt;
	line-height:16.0pt;
	text-autospace:none;
	font-size:9.0pt;
	font-family:"Verdana";
	color:black;
	letter-spacing:.05pt;}
p.NB-Corpo114111 {text-align:left;
	text-indent:5.65pt;
	line-height:16.0pt;
	text-autospace:none;
	font-size:9.0pt;
	font-family:"Verdana";
	color:black;
	letter-spacing:.05pt;}
p.NB-Corpo1141111 {text-align:left;
	text-indent:5.65pt;
	line-height:16.0pt;
	text-autospace:none;
	font-size:9.0pt;
	font-family:"Verdana";
	color:black;
	letter-spacing:.05pt;}
p.NB-Corpo11411111 {text-align:left;
	text-indent:5.65pt;
	line-height:16.0pt;
	text-autospace:none;
	font-size:9.0pt;
	font-family:"Verdana";
	color:black;
	letter-spacing:.05pt;}
div.NB-Cdigointerno3 {line-height:10.0pt;
	text-autospace:none;
	font-size:8.0pt;
	font-family:"Verdana";
	color:black;}
div.NB-Corpo5 {text-align:left;
	text-indent:5.65pt;
	line-height:16.0pt;
	text-autospace:none;
	font-size:9.0pt;
	font-family:"Verdana";
	color:black;}
div.NB-Interttulo5 {line-height:120%;
	page-break-after:avoid;
	text-autospace:none;
	font-size:13.0pt;
	font-family:"Verdana";
	color:#00722B;
	font-weight:bold;}
div.NB-Interttulo25 {line-height:12.0pt;
	page-break-after:avoid;
	text-autospace:none;
	font-size:9.0pt;
	font-family:"Verdana";
	color:#78B41B;
	font-weight:bold;}
div.NB-Minibio {line-height:13.0pt;
	text-autospace:none;
	font-size:10.0pt;
	font-family:"Verdana";
	color:black;
	letter-spacing:.05pt;}
div.NB-Notadica4 {text-align:left;
	line-height:13.0pt;
	tab-stops:14.15pt;
	text-autospace:none;
	font-size:10.0pt;
	font-family:"Verdana";
	color:#78B41B;
	letter-spacing:.05pt;}
div.Noparagraphstyle3 {line-height:120%;
	text-autospace:none;
	font-size:12.0pt;
	font-family:Times;
	color:black;}
li.NB-Cdigointerno3 {line-height:10.0pt;
	text-autospace:none;
	font-size:8.0pt;
	font-family:"Verdana";
	color:black;}
li.NB-Corpo5 {text-align:left;
	text-indent:5.65pt;
	line-height:16.0pt;
	text-autospace:none;
	font-size:9.0pt;
	font-family:"Verdana";
	color:black;}
li.NB-Interttulo5 {line-height:120%;
	page-break-after:avoid;
	text-autospace:none;
	font-size:13.0pt;
	font-family:"Verdana";
	color:#00722B;
	font-weight:bold;}
li.NB-Interttulo25 {line-height:12.0pt;
	page-break-after:avoid;
	text-autospace:none;
	font-size:9.0pt;
	font-family:"Verdana";
	color:#78B41B;
	font-weight:bold;}
li.NB-Minibio {line-height:13.0pt;
	text-autospace:none;
	font-size:10.0pt;
	font-family:"Verdana";
	color:black;
	letter-spacing:.05pt;}
li.NB-Notadica4 {text-align:left;
	line-height:13.0pt;
	tab-stops:14.15pt;
	text-autospace:none;
	font-size:10.0pt;
	font-family:"Verdana";
	color:#78B41B;
	letter-spacing:.05pt;}
li.Noparagraphstyle3 {line-height:120%;
	text-autospace:none;
	font-size:12.0pt;
	font-family:Times;
	color:black;}
p.NB-Cdigointerno3 {line-height:10.0pt;
	text-autospace:none;
	font-size:8.0pt;
	font-family:"Verdana";
	color:black;}
p.NB-Corpo5 {text-align:left;
	text-indent:5.65pt;
	line-height:16.0pt;
	text-autospace:none;
	font-size:9.0pt;
	font-family:"Verdana";
	color:black;}
p.NB-Interttulo5 {line-height:120%;
	page-break-after:avoid;
	text-autospace:none;
	font-size:13.0pt;
	font-family:"Verdana";
	color:#00722B;
	font-weight:bold;}
p.NB-Interttulo25 {line-height:12.0pt;
	page-break-after:avoid;
	text-autospace:none;
	font-size:9.0pt;
	font-family:"Verdana";
	color:#78B41B;
	font-weight:bold;}
p.NB-Minibio {line-height:13.0pt;
	text-autospace:none;
	font-size:10.0pt;
	font-family:"Verdana";
	color:black;
	letter-spacing:.05pt;}
p.NB-Notadica4 {text-align:left;
	line-height:13.0pt;
	tab-stops:14.15pt;
	text-autospace:none;
	font-size:10.0pt;
	font-family:"Verdana";
	color:#78B41B;
	letter-spacing:.05pt;}
p.Noparagraphstyle3 {line-height:120%;
	text-autospace:none;
	font-size:12.0pt;
	font-family:Times;
	color:black;}
span.NB-NegritoTcnico4 {font-family:"Verdana";
	color:black;
	letter-spacing:.05pt;
	font-weight:bold;
	vertical-align:baseline;}
span.TechText2 {font-family:"Verdana";
	letter-spacing:0pt;
	font-weight:bold;}
p.NB-Corpo1142 {text-align:left;
	text-indent:5.65pt;
	line-height:16.0pt;
	text-autospace:none;
	font-size:9.0pt;
	font-family:"Verdana";
	color:black;
	letter-spacing:.05pt;}
p.NB-Corpo11421 {text-align:left;
	text-indent:5.65pt;
	line-height:16.0pt;
	text-autospace:none;
	font-size:9.0pt;
	font-family:"Verdana";
	color:black;
	letter-spacing:.05pt;}
p.NB-Corpo114211 {text-align:left;
	text-indent:5.65pt;
	line-height:16.0pt;
	text-autospace:none;
	font-size:9.0pt;
	font-family:"Verdana";
	color:black;
	letter-spacing:.05pt;}
p.NB-Corpo1142111 {text-align:left;
	text-indent:5.65pt;
	line-height:16.0pt;
	text-autospace:none;
	font-size:9.0pt;
	font-family:"Verdana";
	color:black;
	letter-spacing:.05pt;}
p.NB-Corpo11421111 {text-align:left;
	text-indent:5.65pt;
	line-height:16.0pt;
	text-autospace:none;
	font-size:9.0pt;
	font-family:"Verdana";
	color:black;
	letter-spacing:.05pt;}
p.NB-Corpo114211111 {text-align:left;
	text-indent:5.65pt;
	line-height:16.0pt;
	text-autospace:none;
	font-size:9.0pt;
	font-family:"Verdana";
	color:black;
	letter-spacing:.05pt;}
p.NB-Corpo1142111111 {text-align:left;
	text-indent:5.65pt;
	line-height:16.0pt;
	text-autospace:none;
	font-size:9.0pt;
	font-family:"Verdana";
	color:black;
	letter-spacing:.05pt;}
p.NB-Corpo11421111111 {text-align:left;
	text-indent:5.65pt;
	line-height:16.0pt;
	text-autospace:none;
	font-size:9.0pt;
	font-family:"Verdana";
	color:black;
	letter-spacing:.05pt;}
p.NB-Corpo114211111111 {text-align:left;
	text-indent:5.65pt;
	line-height:16.0pt;
	text-autospace:none;
	font-size:9.0pt;
	font-family:"Verdana";
	color:black;
	letter-spacing:.05pt;}
p.NB-Corpo1142111111111 {text-align:left;
	text-indent:5.65pt;
	line-height:16.0pt;
	text-autospace:none;
	font-size:9.0pt;
	font-family:"Verdana";
	color:black;
	letter-spacing:.05pt;}
p.NB-Corpo11421111111111 {text-align:left;
	text-indent:5.65pt;
	line-height:16.0pt;
	text-autospace:none;
	font-size:9.0pt;
	font-family:"Verdana";
	color:black;
	letter-spacing:.05pt;}
p.NB-Corpo11421111111112 {text-align:left;
	text-indent:5.65pt;
	line-height:16.0pt;
	text-autospace:none;
	font-size:9.0pt;
	font-family:"Verdana";
	color:black;
	letter-spacing:.05pt;}
p.NB-Corpo114211111111121 {text-align:left;
	text-indent:5.65pt;
	line-height:16.0pt;
	text-autospace:none;
	font-size:9.0pt;
	font-family:"Verdana";
	color:black;
	letter-spacing:.05pt;}
p.NB-Corpo1142111111111211 {text-align:left;
	text-indent:5.65pt;
	line-height:16.0pt;
	text-autospace:none;
	font-size:9.0pt;
	font-family:"Verdana";
	color:black;
	letter-spacing:.05pt;}
p.NB-Corpo11421111111112111 {text-align:left;
	text-indent:5.65pt;
	line-height:16.0pt;
	text-autospace:none;
	font-size:9.0pt;
	font-family:"Verdana";
	color:black;
	letter-spacing:.05pt;}
p.NB-Corpo11422 {text-align:left;
	text-indent:5.65pt;
	line-height:16.0pt;
	text-autospace:none;
	font-size:9.0pt;
	font-family:"Verdana";
	color:black;
	letter-spacing:.05pt;}
p.NB-Corpo114212 {text-align:left;
	text-indent:5.65pt;
	line-height:16.0pt;
	text-autospace:none;
	font-size:9.0pt;
	font-family:"Verdana";
	color:black;
	letter-spacing:.05pt;}
p.NB-Corpo1142112 {text-align:left;
	text-indent:5.65pt;
	line-height:16.0pt;
	text-autospace:none;
	font-size:9.0pt;
	font-family:"Verdana";
	color:black;
	letter-spacing:.05pt;}
p.NB-Corpo114211112 {text-align:left;
	text-indent:5.65pt;
	line-height:16.0pt;
	text-autospace:none;
	font-size:9.0pt;
	font-family:"Verdana";
	color:black;
	letter-spacing:.05pt;}
p.NB-Corpo1142111112 {text-align:left;
	text-indent:5.65pt;
	line-height:16.0pt;
	text-autospace:none;
	font-size:9.0pt;
	font-family:"Verdana";
	color:black;
	letter-spacing:.05pt;}
p.NB-Corpo11421111112 {text-align:left;
	text-indent:5.65pt;
	line-height:16.0pt;
	text-autospace:none;
	font-size:9.0pt;
	font-family:"Verdana";
	color:black;
	letter-spacing:.05pt;}
p.NB-Corpo114211111112 {text-align:left;
	text-indent:5.65pt;
	line-height:16.0pt;
	text-autospace:none;
	font-size:9.0pt;
	font-family:"Verdana";
	color:black;
	letter-spacing:.05pt;}
p.NB-Corpo114211111111111 {text-align:left;
	text-indent:5.65pt;
	line-height:16.0pt;
	text-autospace:none;
	font-size:9.0pt;
	font-family:"Verdana";
	color:black;
	letter-spacing:.05pt;}
p.NB-Corpo114211111111122 {text-align:left;
	text-indent:5.65pt;
	line-height:16.0pt;
	text-autospace:none;
	font-size:9.0pt;
	font-family:"Verdana";
	color:black;
	letter-spacing:.05pt;}
p.NB-Corpo11421111111112112 {text-align:left;
	text-indent:5.65pt;
	line-height:16.0pt;
	text-autospace:none;
	font-size:9.0pt;
	font-family:"Verdana";
	color:black;
	letter-spacing:.05pt;}
p.NB-Corpo114211111111121111 {text-align:left;
	text-indent:5.65pt;
	line-height:16.0pt;
	text-autospace:none;
	font-size:9.0pt;
	font-family:"Verdana";
	color:black;
	letter-spacing:.05pt;}
p.NB-Corpo11112 {text-align:left;
	text-indent:5.65pt;
	line-height:16.0pt;
	text-autospace:none;
	font-size:9.0pt;
	font-family:"Verdana";
	color:black;}
-->
</style>
</head>
<body bgcolor="#FFFFFF" lang=PT-BR>
<div class=Section1>
  <table width="770" height="7931" border="0" cellpadding="0" cellspacing="0">
    <tr>
      <td height="200"><img src="/images_www/magazine/visualwebdev/top_visual_w_dev_web.jpg" width="770" height="200"></td>
    </tr>
    <tr>
      <td width="785" height="42"><p class=NB-Corpo22><strong><span lang=EN-US style='letter-spacing:
-.05pt'>The NetBeans IDE has many exciting features for visual web application design. This article introduces some of this functionality and shows how it makes it easy to develop for the web.</span></strong></p>
      <p class=NB-Corpo22>&nbsp;</p></td>
    </tr>
    <tr>
      <td height="7647" valign="top"><p class=NB-Corpo5><span lang=EN-US>The
          NetBeans IDE incorporates many features for visual web application design, a
          number of which have been available as part of the NetBeans IDE Visual Web Pack
          5.5 module. NetBeans 6.0 integrates these visual design features directly into
          the IDE and adds more features to the mix. </span></p>
        <p class=NB-Corpo5><span lang=EN-US>This article gives you a quick overview of
          the feature highlights of the NetBeans visual web design environment, including
          the Visual Designer, Page Navigator, Query Editor, and Style Editor. We also
          show some of the things you can do easily and quickly with these tools when
          developing a web application.</span></p>
        <p class=NB-Interttulo5><span lang=EN-US>Highlights</span></p>
        <p class=NB-Corpo5><span lang=EN-US>One of the best aspects of the NetBeans
          visual development environment is its flexibility. You can develop an
          application by first designing its individual pages, for which the IDE provides
          a Visual Designer with a palette of visual and non-visual components. You can
          add other elements to the palette, such as AJAX-enabled components you develop
          yourself or obtain from third parties, using the Component Library Manager. The
          Style Editor provides a graphical interface for perfecting the look of the
          different components.</span></p>
        <p class=NB-Corpo5><span lang=EN-US>You might prefer to first map out the
          application&rsquo;s logic flow instead of beginning with page design. If that&rsquo;s the
          case, you can start application design with the Page Navigator. Using the Page
          Navigator functions, you can create empty pages as stubs or placeholders and
          link them together in the Navigator window to define the application
          processing, and add the individual page layout and functionality later. You can
          even go back and forth between the Navigator and Visual Designer modes as you
          develop your application.</span></p>
        <p class=NB-Corpo5><span lang=EN-US>NetBeans also makes it simple for a web
          application to access a database. You can use the Query Editor functions to
          form complex SQL queries for applications that need to retrieve data from
          database tables or update a database. Other visual functions make it an easy
          matter to handle the display of data retrieved from database tables. </span></p>
        <p class=NB-Corpo5><span lang=EN-US>Although much is generated for you, there
          are still times you have to write your own custom code. When you are ready to
          write code, you can draw on the palette of generic code clips to help. You also
          have available all the shortcuts and other helpful features, such as code
          completion, that the Java source editor provides. </span></p>
        <p class=NB-Corpo5><span lang=EN-US>NetBeans 6.0 will introduce more visual
          design features, including the ability to develop portlets, add Enterprise
          JavaBeans components to applications, and incorporate web services. These
          features will rely on and extend the preexisting visual capabilities, so the
          learning curve for them should be minimal.</span></p>
        <p class=NB-Interttulo5><span lang=EN-US>Using Components 
          to Develop Web Application Pages </span></p>
        <p class=NB-Corpo5><span lang=EN-US>Page design is of course an important part
          of developing a web application. NetBeans provides a palette of visual design
          components that you drag and drop onto a page in the Design window, to set up
          your page quickly with the desired look and feel. In addition to these visual components,
          the IDE supports themes, which let you apply a predefined set of styles to
          visual components throughout a project, thus enabling you to change an
          application&rsquo;s entire appearance with a single mouse click.</span></p>
        <p class=NB-Corpo5><span lang=EN-US>As you design the underlying business logic,
          you can use the non-visual components &ndash; such as the converter, validator, and
          data provider components &ndash; to generate code. When you&rsquo;re ready to write the
          business logic, you can incorporate generic code snippets into your page bean
          by simply dropping code clips from the palette onto your bean code in the Java
          source code editor. All you need to do is add the correct variable names to
          these code clips. </span></p>
        <p class=NB-Notadica4><span lang=EN-US><strong>Note: </strong>You can easily create your own code clips
          too, just by selecting a snippet of code in the source editor and dragging it
          to the palette.</span></p>
        <p class=NB-Corpo5><span lang=EN-US>NetBeans displays the palette of components
          in a logical and intuitive manner. The palette appears only when you&rsquo;re working
          on a web page for a project. When designing a web page &ndash; that is, when you have
          the page open in the Design window &ndash; the palette displays the components used
          to build the page, like the visual design components (buttons, drop-down lists,
          checkboxes, tables, etc.), as well as layout components, converters,
          validators, and data providers. If you used the Component Library Manager to
          add a set of components, you may have designated that they appear in their own
          separate category. </span></p>
        <p class=NB-Corpo5><span lang=EN-US>To illustrate, we use a sample media
          management project called PhotoAlbum, which is a web application through which
          users can manage different types of media (photos and audio data) stored in a
          local or remote database. You can use this application to organize media data
          into albums, such as photo albums. For example, if you want to organize a set
          of images, you can create multiple photo albums, upload these images into the
          different albums, and view the images as thumbnails or singly in a preview
          mode. (See the article &ldquo;Developing a Media Management Application&rdquo; at <i>netbeans.org/kb/55/photoalbum.html</i> for instructions on downloading this project zip file and installing and
          running the application.) </span></p>
        <p class=NB-Corpo5><span lang=EN-US>We opened the AlbumList page in the Design
          window and the palette displays the components we can use to build this page
          (see <b>Figure&nbsp;1</b>). You add components to a page merely by dragging and
          dropping them on the page &ndash; or onto other components, such as in the case of
          validators and converters. The IDE ensures that no rules are broken, such as
          dropping a validator on the wrong type of component. Notice, too, that themes
          are not in the palette but are specific to individual projects and thus appear
          in the Projects pane.</span><br>
          <br>
        </p>
        <table width="100%" border="0" cellspacing="0" cellpadding="0">
          <tr>
            <td><img src="/images_www/magazine/visualwebdev/imagens/image001.jpg" width="700" height="271"></td>
          </tr>
          <tr>
            <td height="21"><p class=NB-Corpo11422> <strong>Figure 1.</strong> Palette of design components for a Web page<br>
                <br>
              </p></td>
          </tr>
        </table>
        <p class=NB-Corpo5><span lang=EN-US>At any time, you can go to the Outline pane
          to see the components added to a page. If you are unsure of a component&rsquo;s type,
          hover the mouse over it in the Outline pane to get more information. Or match
          its icon with the Palette icons (see <b>Figure&nbsp;2</b>). </span><br></p>
        <table width="100%" border="0" cellspacing="0" cellpadding="0">
          <tr>
            <td><img src="/images_www/magazine/visualwebdev/imagens/image003.png" width="506" height="306"></td>
          </tr>
          <tr>
            <td height="21"><p class=NB-Corpo114212> <strong>Figure 2.</strong> Viewing components in the Outline Pane<br>
                <br>
              </p></td>
          </tr>
        </table>
        <br>
        <p class=NB-Corpo5><span lang=EN-US>While you work on the page design and
          layout, you also can switch to editing the page&rsquo;s underlying Java code. To see
          the code in the Java editor, double click on the page background or select the
          Java view. When you change to the Java view, the Palette displays the available
          code clips (see <b>Figure&nbsp;3</b>). </span><br>
        </p>
        <table width="100%" border="0" cellspacing="0" cellpadding="0">
          <tr>
            <td><img src="/images_www/magazine/visualwebdev/imagens/image005.jpg" width="700" height="283"></td>
          </tr>
          <tr>
            <td height="21"><p class=NB-Corpo1142112> <strong>Figure 3.</strong> Palette code clips<br>
                <br>
              </p></td>
          </tr>
        </table>
        <p class=NB-Notadica4><span lang=EN-US><strong>Note: </strong>To work on a particular method, such as
          an action handler for a button, double click the button component in the Design
          window, and NetBeans displays the source code in the Java editor positioned at
          the button&rsquo;s action handler.</span></p>
        <p class=NB-Interttulo5><span lang=EN-US>Designing pages</span></p>
        <p class=NB-Corpo5><span lang=EN-US>Let&rsquo;s examine how you might design a web
          application page using the visual components. The components in the Basic
          section of the Palette are typical GUI components: buttons, drop-down lists,
          checkboxes, hyperlinks, text areas, hyperlinks to images, and so forth. You use
          these components to add basic behaviors to your web pages. </span></p>
        <p class=NB-Corpo5><span lang=EN-US>These components provide properties to
          determine their appearance and behavior, and you can customize them using the
          component&rsquo;s Properties sheet or through dialogs. Although hand-editing a page&rsquo;s
          JSP code is possible (click the JSP view to see and potentially modify the
          code), it is far easier and less error-prone to modify component properties in
          the Properties sheet.</span></p>
        <p class=NB-Corpo5><span lang=EN-US>The Layout components help you organize the
          appearance or layout of your page. Use them to add tab displays, alert boxes,
          grids, and forms &ndash; essentially to control the placement and alignment of other
          components on the page. </span></p>
        <p class=NB-Corpo5><span lang=EN-US>To give you an idea how all this works,
          let&rsquo;s take a closer look at some page-design issues frequently encountered by
          web application developers: setting up a consistent look across multiple pages
          of an application and aligning text and components on a page. Three of the
          layout components &ndash; Grid Panel, Layout Panel, and Page Fragment &ndash; handle this
          nicely. </span></p>
        <p class=NB-Interttulo25><span lang=EN-US>Establishing a consistent 
          look across pages</span></p>
        <p class=NB-Corpo5><span lang=EN-US>Use page fragments when you want to set up a
          consistent look to multiple <br>
          pages of a web application. Page fragments are particularly useful for
          establishing uniform web page headers, footers, and sidebars. You design the
          page fragment once, then place it where appropriate on different web pages.</span></p>
        <p class=NB-Corpo5><span lang=EN-US>For example, you might want a consistent
          banner across all application pages. You define this look in a single page
          fragment, then include that fragment on the application pages. For a banner or
          masthead, you place the page fragment at the top of each web page. If you later
          make changes to it, these changes automatically appear on all the pages that
          include the page fragment.</span></p>
        <p class=NB-Corpo5><span lang=EN-US>Suppose you want to create a masthead banner
          for an application. Create a new page fragment: in the Projects pane, right
          click the project&rsquo;s Web Pages node and select <i>New&gt;Page Fragment</i>. Then
          design your masthead by placing components in the fragment. Designing and
          building the page fragment is much the same as building a web page. </span></p>
        <p class=NB-Corpo5><span lang=EN-US>To add the masthead to other pages, drop a
          Page Fragment Box on a page, select the specific page fragment from the dialog,
          and position it where you want it to appear &ndash; at the top of the page in this
          case (see <b>Figure&nbsp;4</b>). Fragments can also be copied and pasted among
          projects.</span></p>
        <br>
        <table width="100%" border="0" cellspacing="0" cellpadding="0">
          <tr>
            <td><img src="/images_www/magazine/visualwebdev/imagens/image007.png" width="709" height="407"></td>
          </tr>
          <tr>
            <td height="21"><p class=NB-Corpo1142111> <strong>Figure 4.</strong> Adding a page fragment to a Web page<br>
                <br>
              </p></td>
          </tr>
        </table>
        <p class=NB-Interttulo25><span lang=EN-US>Controlling page layout</span></p>
        <p class=NB-Corpo5><span lang=EN-US>Grid Panel and Layout Panel components are
          useful for arranging text and other components. When you drop a Grid Panel on a
          page, it creates a table to which you then add other components. The added
          components display starting from left to right and from top to bottom. By
          default, a Grid Panel has one column and as many rows as needed to accommodate
          components dropped on it. You can change the number of columns and the display
          direction in the Grid Panel&rsquo;s Properties sheet. </span></p>
        <p class=NB-Corpo5><span lang=EN-US>Grid Panel components can also be nested
          within other Grid Panel components, giving you even finer control to position
          components on a page. To nest Grid Panels, drop a Grid Panel on top of a Grid
          Panel already placed on a page. </span></p>
        <p class=NB-Notadica4><span lang=EN-US><strong>Note: </strong>When dropping one component on top of
          another, be sure that the component already on the page is highlighted with a
          blue outline.<br>
          </span></p>
        <p class=NB-Corpo5><span lang=EN-US>&nbsp;You
          can resize a Grid Panel directly on the page. For greater control, use the
          Style Editor, which you open by clicking the Grid Panel component&rsquo;s </span><span
class=NB-NegritoTcnico4><span lang=EN-US style='font-size:10.0pt'>style</span></span><span
lang=EN-US> property. You can use this property to set background color,
          margins, size, position, and so forth (see <b>Figure&nbsp;5</b>). The Style
        Editor allows you to fine-tune the appearance of all the visual components.</span></p>
        <table width="100%" border="0" cellspacing="0" cellpadding="0">
          <tr>
            <td><img src="/images_www/magazine/visualwebdev/imagens/image009.png" width="700" height="437"></td>
          </tr>
          <tr>
            <td height="21"><p class=NB-Corpo114211112> <strong>Figure 5.</strong> Style Editor with Grid Panel <br>
                <br>
              </p></td>
          </tr>
        </table>
        <p class=NB-Corpo5><span lang=EN-US>The example MastheadFragment shown in <b>Figure&nbsp;6</b> uses several Grid Panel components to control the display of its two hyperlinks
          (Home and Help) in the bottom panel. We used Grid Panels to place these links
          on the right, bottom side of the page. First, we dropped a Grid Panel (which we
          called &ldquo;bottomPanel&rdquo;) on the page. Then we resized its width to match the top
          banner and its height to a size that would accommodate the images and text.
          Also, we set its </span><span class=NB-NegritoTcnico4><span lang=EN-US
style='font-size:10.0pt'>columns</span></span><span lang=EN-US> property to two
        columns and set a background color. </span></p>
        <table width="100%" border="0" cellspacing="0" cellpadding="0">
          <tr>
            <td><img src="/images_www/magazine/visualwebdev/imagens/image011.png" width="687" height="150"></td>
          </tr>
          <tr>
            <td height="21"><p class=NB-Corpo1142111112> <strong>Figure 6.</strong> Controlling layout with multiple Grid Panels<br>
                <br>
              </p></td>
          </tr>
        </table>
        <p class=NB-Corpo5><span lang=EN-US>Next, we dropped two Grid Panels on top of </span><span
class=NB-NegritoTcnico4><span lang=EN-US style='font-size:10.0pt'>bottomPanel</span></span><span
lang=EN-US>. Since </span><span class=NB-NegritoTcnico4><span lang=EN-US
style='font-size:10.0pt'>bottomPanel</span></span><span lang=EN-US> displays
          two columns and the display direction is left-to-right, these two Grid Panel
          components display within </span><span class=NB-NegritoTcnico4><span lang=EN-US
style='font-size:10.0pt'>bottomPanel</span></span><span lang=EN-US> from left
          to right. Also, the </span><span class=NB-NegritoTcnico4><span lang=EN-US
style='font-size:10.0pt'>bottomPanel</span></span><span lang=EN-US> background
          color carries through as the background color for the components 
          dropped onto it. </span></p>
        <p class=NB-Corpo5><span lang=EN-US>Of the two additional Grid Panels, the one in
          the left column (highlighted in yellow here) is a placeholder, and its width is
          set to cover the left half of the page. The Grid Panel on the right side holds
          the two links (see<b> Figure&nbsp;6</b>). Since we want the links to display
          side-by-side, we changed the </span><span class=NB-NegritoTcnico4><span
lang=EN-US style='font-size:10.0pt'>columns</span></span><span lang=EN-US> property to two for this Grid Panel.</span></p>
        <p class=NB-Corpo5><span lang=EN-US>After getting everything in position, we
          dropped two Image Hyperlink components onto the right panel. For each, we went
          to its Properties sheet and set its </span><span class=NB-NegritoTcnico4><span
lang=EN-US style='font-size:10.0pt'>text</span></span><span lang=EN-US> property to the label &ndash; &ldquo;Home&rdquo; or &ldquo;Help&rdquo; &ndash; that we wanted to appear on the
          page. We also set each component&rsquo;s </span><span class=NB-NegritoTcnico4><span
lang=EN-US style='font-size:10.0pt'>imageURL</span></span><span lang=EN-US> property to suitable image files for the display icons. In our application,
          these files are in the project&rsquo;s /<i>resources</i> folder, but the </span><span
class=NB-NegritoTcnico4><span lang=EN-US style='font-size:10.0pt'>imageURL</span></span><span
lang=EN-US> property can point to wherever the files are located, of course. </span></p>
        <p class=NB-Corpo5><span lang=EN-US>We use the </span><span
class=NB-NegritoTcnico4><span lang=EN-US style='font-size:10.0pt'>textPosition</span></span><span
lang=EN-US> property to ensure that text is positioned to the right of the
          image associated with the hyperlink. (The </span><span class=NB-NegritoTcnico4><span
lang=EN-US style='font-size:10.0pt'>text</span></span><span lang=EN-US>, </span><span
class=NB-NegritoTcnico4><span lang=EN-US style='font-size:10.0pt'>textPosition</span></span><span
lang=EN-US>, and </span><span class=NB-NegritoTcnico4><span lang=EN-US
style='font-size:10.0pt'>imageURL</span></span><span lang=EN-US> properties are
          in the Properties sheet Appearance section.) We set the hyperlink&rsquo;s </span><span
class=NB-NegritoTcnico4><span lang=EN-US style='font-size:10.0pt'>url</span></span><span
lang=EN-US> property (found in the Behavior section) to the appropriate web
          page, so that a user is taken to that page when the link is clicked.</span></p>
        <p class=NB-Corpo5><span lang=EN-US>A Layout Panel component is much like a Grid
          Panel &ndash; you place a Layout Panel on a page and then drop components onto the
          Layout Panel. But a Layout Panel gives you more flexibility in arranging
          components. Whereas a Group Panel can be placed on the same line as other
          components, a Layout Panel always appears on its own line, separated from
          components above and below it, when the page is rendered at runtime. </span></p>
        <p class=NB-Corpo5><span lang=EN-US>A Layout Panel lets you arrange added
          components in a flow or grid layout. When flow layout is used, the IDE places
          components dropped on a Layout Panel starting in the top left corner, adding
          components to the panel from left to right, across the top row of the panel
          until that row is filled. Subsequent components are added from left to right in
          the next row down, and so forth. You can drop a new component to the left of
          another component by hovering over the previously added component until a
          vertical mark appears to the left of that component. </span></p>
        <p class=NB-Corpo5><span lang=EN-US>A Layout Panel works in grid layout mode
          only if the Snap to Grid option is set. You set this option from the <i>Tools&gt;Options&gt;Visual
          Designer</i> settings; at the same time, you can also customize the grid
          pattern size. When set to grid layout, added components appear in the panel
          aligned to the grid location at which they were added. Click the Align pop-up
          menu option for a Layout Panel (or for a component within a Layout Panel) to
          position components in the panel relative to the nearest grid corner. </span></p>
        <p class=NB-Interttulo5><span lang=EN-US>Controlling user input</span></p>
        <p class=NB-Corpo5><span lang=EN-US>The Visual Designer includes a feature,
          called <i>virtual forms</i>, which lets you limit the portions of user input
          that are processed when a page is submitted. This is useful because you may
          have linked a number of input fields to validators (which means that the
          user-entered data in these fields is validated against some criteria when the
          page is submitted); but, given the application logic, you don&rsquo;t want all fields
          validated every time the page is submitted. </span></p>
        <p class=NB-Corpo5><span lang=EN-US>Let&rsquo;s look at how you might use virtual
          forms for a page. Our example page (see <b>Figure&nbsp;7</b>) defines two
          virtual forms &ndash; </span><span class=NB-NegritoTcnico4><span lang=EN-US
style='font-size:10.0pt'>deleteSelected </span></span><span lang=EN-US>and </span><span
class=NB-NegritoTcnico4><span lang=EN-US style='font-size:10.0pt'>selectAll</span></span><span
lang=EN-US>. Several components are included in these forms. Notice that the
          buttons, drop-down lists, and checkboxes for selecting, moving, and deleting
          files from an album are outlined in green or blue. Components outlined in green
          are part of the </span><span class=NB-NegritoTcnico4><span lang=EN-US
style='font-size:10.0pt'>selectAll</span></span><span lang=EN-US> virtual form,
        while those outlined in blue are part of the </span><span
class=NB-NegritoTcnico4><span lang=EN-US style='font-size:10.0pt'>deleteSelected </span></span><span lang=EN-US>virtual form. </span></p>
        <table width="100%" border="0" cellspacing="0" cellpadding="0">
          <tr>
            <td><img src="/images_www/magazine/visualwebdev/imagens/image013.png" width="703" height="588"></td>
          </tr>
          <tr>
            <td height="21"><p class=NB-Corpo11421111112> <strong>Figure 7.</strong> Virtual forms displayed on a page<br>
                <br>
              </p></td>
          </tr>
        </table>
        <p class=NB-Corpo5><span lang=EN-US>A solid outline indicates an input component
          that participates in the virtual form, and a broken or dotted outline indicates
          a submission component, which is a component that, when clicked, submits the
          virtual form for processing. (To see the virtual forms legend for a page,
          toggle the virtual forms display icon at the top of the Design window, as shown
          in <b>Figure&nbsp;7</b>)</span></p>
        <p class=NB-Corpo5><span lang=EN-US>You add components to a virtual form via the
          dialog that opens when you click a component&rsquo;s pop-up menu <i>Configure Virtual
          Forms</i> option. The Configure Virtual Forms dialog shows that the Drop Down
          List component </span><span class=NB-NegritoTcnico4><span lang=EN-US
style='font-size:10.0pt'>albumList</span></span><span lang=EN-US> participates
          in the </span><span class=NB-NegritoTcnico4><span lang=EN-US style='font-size:
10.0pt'>deleteSelected </span></span><span lang=EN-US>virtual form. You can
          change whether a component participates or submits for any virtual form on the
          page by double clicking in the appropriate row and column. The Participate and
          Submit column entries display a Yes/No pull-down list if the selected component
          is of the right type, since only certain types of components can submit a page
          for processing. The New button in the dialog lets you create a new virtual form
          for the page (see <b>Figure&nbsp;8</b>). </span></p>
        <p class=NB-Corpo5><span lang=EN-US>When the web page user interacts with a
          virtual form&rsquo;s submission component, such as by clicking the <i>Move</i> <i>Selected</i> to button, processing affects only the virtual form&rsquo;s input or participant
          components and ignores other input components on the page. In this manner, you
          can confine certain application operations to selected files or database table
          rows. For example, a user might check the boxes of several media files from the
          displayed list, then click the <i>Move Selected</i> to button with a target
          album designated from the drop-down list. The virtual forms feature ensures
          that subsequent processing moves only the selected files from the current album
          to the designated album.</span> </p>
        <p class=NB-Interttulo5><span lang=EN-US>Retrieving and displaying database data</span></p>
        <p class=NB-Corpo5><span lang=EN-US>The Visual Designer simplifies displaying
          tabular data on a page, and especially makes it easy to retrieve and display
          database data. To display tabular data, first drop a Table component from the
          Palette onto your page. The Visual Designer creates a generic three-column,
        multi-row table display (see <b>Figure&nbsp;9</b>). </span></p>
        <table width="100%" border="0" cellspacing="0" cellpadding="0">
          <tr>
            <td><img src="/images_www/magazine/visualwebdev/imagens/image015.png" width="558" height="333"></td>
          </tr>
          <tr>
            <td height="21"><p class=NB-Corpo114211111112> <strong>Figure 8.</strong> Configuring virtual forms <br>
                <br>
              </p></td>
          </tr>
        </table>
        <p class=NB-Corpo5><span lang=EN-US>To have this component display data from a
          database table, you only need to drop the database table onto the generic table
          component on the page. (Database tables appear in the Runtime pane, beneath the
          Databases node. You must connect to the particular database or subschema before
          you can see its individual tables.) </span></p>
        <p class=NB-Corpo5><span lang=EN-US>After you drop a database table on top of a
          generic table component, the Visual Designer binds the database table to the
          component and creates a default SQL query to retrieve the table data. The table
          display on the page changes to reflect the columns in the database table, while
          the rows indicate the type of data (again, see <b>Figure 9</b>).</span></p>
        <p class=NB-Corpo5><span lang=EN-US>When you bind a database table to a Table
          component, the IDE adds a </span><span class=NB-NegritoTcnico4><span lang=EN-US
style='font-size:10.0pt'>RowSet</span></span><span lang=EN-US> to the project&rsquo;s
          Session Bean. (Every project has, in addition to its individual pages, a
          Session Bean and an Application Bean. The Session Bean maintains session scope
          variables, while the Application Bean is used for project-wide variables.)&nbsp; The </span><span class=NB-NegritoTcnico4><span
lang=EN-US style='font-size:10.0pt'>RowSet</span></span><span lang=EN-US> includes a default SQL statement selecting all the columns in the database
          table. NetBeans also places the query&rsquo;s SQL statement in the Session Bean&rsquo;s
          constructor using the method </span><span class=NB-NegritoTcnico4><span
lang=EN-US style='font-size:10.0pt'>rowset.setCommand</span></span><span
lang=EN-US> (</span><span class=NB-NegritoTcnico4><span lang=EN-US
style='font-size:10.0pt'>String</span></span><span lang=EN-US> </span><span
class=NB-NegritoTcnico4><span lang=EN-US style='font-size:10.0pt'>sqlCommand</span></span><span
lang=EN-US>). Here, </span><span class=NB-NegritoTcnico4><span lang=EN-US
style='font-size:10.0pt'>rowset</span></span><span lang=EN-US> is the </span><span
class=NB-NegritoTcnico4><span lang=EN-US style='font-size:10.0pt'>RowSet</span></span><span
lang=EN-US> for the table dropped on the page and </span><span
class=NB-NegritoTcnico4><span lang=EN-US style='font-size:10.0pt'>sqlCommand</span></span><span
lang=EN-US> is the query SELECT statement. Thus, you can edit the query in the
          Session Bean Java source code in the Java editor as well as through the Query
          Editor.</span></p>
        <br>
        <table width="100%" border="0" cellspacing="0" cellpadding="0">
          <tr>
            <td><img src="/images_www/magazine/visualwebdev/imagens/image017.png" width="412" height="354"></td>
          </tr>
          <tr>
            <td height="21"><p class=NB-Corpo114211111111> <strong>Figure 9.</strong> Generic Table component and displaying a database table <br>
                <br>
              </p></td>
          </tr>
        </table>
        <br>
        <p class=NB-Interttulo25><span lang=EN-US>Customizing table data display </span></p>
        <p class=NB-Corpo5><span lang=EN-US>When you drop a database table on a Table
          component, the component display changes to show all columns from the database
          table in the same order they are returned from the database, and the database
          column names appear for the column headings. You can change the display using
          the Table Layout dialog, which you open from the Table&rsquo;s pop-up menu. </span></p>
        <p class=NB-Corpo5><span lang=EN-US>The Table Layout dialog consists of two
          tabs. These together give you options to remove columns, modify column
          headings, change column order, and even add new columns beyond what&rsquo;s in the
          database. From the Columns tab, use the Up/Down buttons to change the column
          display order, and use the left arrow to remove a selected column from the
          display (the double left arrow removes all columns). Use the right arrow to add
          available columns and New to create a new column. You can also modify column
          header text, column width, alignment, and sort capabilities (see <b>Figure&nbsp;10</b>). </span><br>
        </p>
        <table width="100%" border="0" cellspacing="0" cellpadding="0">
          <tr>
            <td><img src="/images_www/magazine/visualwebdev/imagens/image019.png" width="881" height="782"></td>
          </tr>
          <tr>
            <td height="21"><p class=NB-Corpo114211111111111> <strong>Figure 10.</strong> Table Layout dialog <br>
                <br>
              </p></td>
          </tr>
        </table>
        <p class=NB-Notadica4><span lang=EN-US><strong>Note: </strong>Setting the </span><span
class=TechText2><span lang=EN-US>sortable</span></span> <span
lang=EN-US>option for a column enables users to sort the table data in real
          time by clicking the arrows in the column heading.</span></p>
        <p class=NB-Corpo5><span lang=EN-US>From the Table Layout Options tab, you can
          do such things as enable pagination, establish the page size (number of rows
          per page), and configure navigation buttons (select all rows, deselect all
          rows, clear sort, and so forth). These are automatically provided for you; no
          manual coding is required for the paging buttons.</span></p>
        <p class=NB-Interttulo25><span lang=EN-US>Customizing SQL queries</span></p>
        <p class=NB-Corpo5><span lang=EN-US>The Query Editor provides a graphical
          interface through which you can edit and customize the SQL SELECT statement
          contained in a table&rsquo;s </span><span class=NB-NegritoTcnico4><span lang=EN-US
style='font-size:10.0pt'>RowSet</span></span><span lang=EN-US> component. The
          Query Editor has four panes in which you can right click to bring up
          appropriate pop-up menus (see <b>Figure&nbsp;11</b>). These are, from top to
          bottom: </span><br>
        </p>
        <table width="100%" border="0" cellspacing="0" cellpadding="0">
          <tr>
            <td><img src="/images_www/magazine/visualwebdev/imagens/image021.png" width="641" height="556"></td>
          </tr>
          <tr>
            <td height="21"><p class=NB-Corpo114211111111122> <strong>Figure 11.</strong> Query Editor with sample SQL query <br>
                <br>
              </p></td>
          </tr>
        </table>
        <p class=NB-Corpo5><span lang=EN-US style='font-family:Wingdings;'>&sect;</span><span lang=EN-US> The </span><span class=NB-NegritoTcnico4><span
lang=EN-US style='font-size:10.0pt'>Diagram Pane </span></span><span
lang=EN-US>graphically represents the query. Each table dropped on the page appears
          as a box that indicates all the columns within the table, along with the
          table&rsquo;s primary and foreign keys. Checked columns are retrieved when you run
          the query. </span></p>
        <p class=NB-Corpo5><span lang=EN-US style='font-family:Wingdings;'>&sect;</span><span lang=EN-US> The </span><span class=NB-NegritoTcnico4><span
lang=EN-US style='font-size:10.0pt'>Grid Pane </span></span><span lang=EN-US>displays
          a multicolumn table for setting various query conditions, such as sort order
          and selection criteria, for each table dropped on the page. </span></p>
        <p class=NB-Corpo5><span lang=EN-US style='font-family:Wingdings;'>&sect;</span><span lang=EN-US> The </span><span class=NB-NegritoTcnico4><span
lang=EN-US style='font-size:10.0pt'>SQL Pane </span></span><span lang=EN-US>displays
          the actual SQL query syntax. Changes made in either of the top two panes are
          automatically reflected in all three panes. You can change the SQL query directly.
          The pane has a pop-up menu <i>Parse Query </i>option to update the other two
          panes. Use the <i>Run Query</i> option to test the query.</span></p>
        <p class=NB-Corpo5><span lang=EN-US style='font-family:Wingdings;'>&sect;</span><span lang=EN-US> The</span><span class=NB-NegritoTcnico4><span
lang=EN-US style='font-size:10.0pt'> Results Pane </span></span><span
lang=EN-US>at the bottom displays the results of a query you tested via <i>Run
          Query.</i> </span></p>
        <p class=NB-Corpo5><span lang=EN-US>What are some of the query customizations
          you can do using the Query Editor? The Output column (in the grid pane) lets
          you select the columns to retrieve from the database and display. The Alias
          column lets you insert an AS clause into the SELECT clause. You can also
          control the sort order of the retrieved data. </span></p>
        <p class=NB-Corpo5><span lang=EN-US>The Diagram Pane&rsquo;s<i> </i>Add Table pop-up
          menu option lets you include additional tables in the query, essentially adding
          a JOIN clause to the SQL. The Group By option lets you group results by data
          type, which adds a GROUP BY clause to the query.</span></p>
        <p class=NB-Corpo5><span lang=EN-US>You can also limit a query to return only
          selected rows that meet some specified criteria. Use the <i>Add Query Criteria</i> pop-up menu option to open a dialog through which you add conditions for the
          query selection. You can select rows using comparison operators (such as equal
          to, greater than, less than, not equal to, and so forth), in addition to LIKE
          and IN. You can apply selection criteria to multiple table columns and specify
          the order to evaluate these criteria. Also, when you test a query for which you
          have specified selection criteria, a dialog prompts you to enter data for the
          selection parameters. </span></p>
        <p class=NB-Interttulo5><span lang=EN-US>Defining application flow</span></p>
        <p class=NB-Corpo5><span lang=EN-US>Use Page Navigation to define the process
          flow of an application. Page Navigation, accessed from&nbsp; the Projects pane, lets you visually design
          the application flow by drawing links between the application pages and thus
          model the interactions of the application.</span></p>
        <p class=NB-Corpo5><span lang=EN-US>You can use the Page Navigation feature at
          any point in the application development process, and you can revisit Page Navigation
          to fine-tune interactions among pages, particularly when you want a specific
          action component on one page to link to another page. </span></p>
        <p class=NB-Corpo5><span lang=EN-US>Typically, you start to define the
          application flow by working at the page level, linking one page to another. Then,
          as you implement application details on the various pages &ndash; that is, place
          buttons, links, and so forth &ndash; you can return to the Navigation window and
          create navigational links at the component level within individual pages. You
          can even add buttons and other links to pages directly in the Navigation
          window. </span></p>
        <p class=NB-Corpo5><span lang=EN-US>The Navigator indicates the linkage between
          the pages of an application. (We illustrate the linkage between pages using the
          PhotoAlbum application, which includes several pages: <i>AlbumView.jsp</i>,&nbsp; <i>AlbumList.jsp</i>, <i>&nbsp;UploadFile.jsp</i>, among others. As with any
          application that has multiple pages, there needs to be a defined navigation
          between the pages.) </span></p>
        <p class=NB-Corpo5><span lang=EN-US>Click an individual page, such as we did for <i>AlbumList.jsp</i>, and the Navigator expands the page icon to show the
          individual linkable components on the page and where they link to, if anywhere
          (see <b>Figure&nbsp;12</b>). Click and drag from one page to another to create
          a link between the two pages. Similarly, drag from a page&rsquo;s individual
          components, such as buttons, to another page to create links from the specific
          component on the first page to the second page. The Navigator adds the backing
          code to the pages and component action handler methods.</span></p>
        <table width="100%" border="0" cellspacing="0" cellpadding="0">
          <tr>
            <td><img src="/images_www/magazine/visualwebdev/imagens/image023.png" width="641" height="427"></td>
          </tr>
          <tr>
            <td height="21"><p class=NB-Corpo114211111111121> <strong>Figure 12.</strong> Page Navigation <br>
                <br>
              </p></td>
          </tr>
        </table>
        <p class=NB-Interttulo5><span lang=EN-US>Working with 
          JavaScript code</span></p>
        <p class=NB-Corpo5><span lang=EN-US>Many web application developers want to work
          closely with JavaScript code. The Visual Designer makes it easy to invoke
          JavaScript from within an application. As you know, JavaScript code can be
          embedded within the JavaServer Pages code, where it is identified by its own
          set of tags.</span></p>
        <p class=NB-Corpo5><span lang=EN-US>When you work with JavaScript code, you bind
          the code to a component event so that the code is invoked when the event
          occurs. You can do this binding through the JavaScript section of a component&rsquo;s
          properties. Select the component and locate the event in the JavaScript section
          of its property sheet; then enter the JavaScript code directly, or click the
          &ldquo;...&rdquo; button to open an editor window. </span></p>
        <p class=NB-Corpo5><span lang=EN-US>To illustrate, suppose you want the user to
          confirm an action connected to a button click. First select the button
          component; then, in the JavaScript section of the component&rsquo;s Properties sheet,
          open the editor window of the target event, which in this case is </span><span
class=NB-NegritoTcnico4><span lang=EN-US style='font-size:10.0pt'>onClick</span></span><span
lang=EN-US>. You might enter the following JavaScript code:</span></p>
        <p class=style7><span lang=EN-US>return confirm (&ldquo;Are you sure?&rdquo;)</span></p>
        <p class=NB-Corpo5><span lang=EN-US>When you&rsquo;re finished, the component&rsquo;s Properties
        would look like <b>Figure&nbsp;13</b>.</span></p>
        <table width="100%" border="0" cellspacing="0" cellpadding="0">
          <tr>
            <td><img src="/images_www/magazine/visualwebdev/imagens/image025.png" width="315" height="379"></td>
          </tr>
          <tr>
            <td height="21"><p class=NB-Corpo11421111111112112> <strong>Figure 13.</strong> Editing JavaScript propterties <br>
                <br>
              </p></td>
          </tr>
        </table>
        <p class=NB-Corpo5><span lang=EN-US>One good use of JavaScript code is to obtain
          confirmation from a user for an operation. For example, an application might
          bind JavaScript code to a delete button, to compel the user to respond to a
          confirmation message before the deletion occurs. JavaScript can also be used
          for actions that change component state, for validation checks, and for setting
          file names when retrieving data. The JavaScript code can be fairly complex,
          such as code for a button&rsquo;s validation checks (see <b>Figure&nbsp;14</b>). Such
          complex code is best added using the Properties editor window. </span></p>
        <p class=NB-Corpo5><span lang=EN-US>The JavaScript you enter through the editor
          window is inserted into the JSP code for the component. For example, the
          JavaScript code for the button&rsquo;s </span><span class=TechText2><span lang=EN-US
style='font-size:10.0pt'>onClick</span></span><span lang=EN-US> property shown
          in <b>Figure&nbsp;14</b> appears as follows in the JSP:</span></p>
        <table width="100%" border="0" cellspacing="0" cellpadding="0">
          <tr>
            <td><img src="/images_www/magazine/visualwebdev/imagens/image027.png" width="700" height="648"></td>
          </tr>
          <tr>
            <td height="21"><p class=NB-Corpo114211111111121111> <strong>Figure 14.</strong> JavaScript for button validation check<br>
                <br>
              </p></td>
          </tr>
        </table>
        <pre class=style7>&lt;ui:button action=&rdquo;#{AlbumView.btnMoveSelected_action}&rdquo;
&nbsp; binding=&rdquo;#{AlbumView.btnMoveSelected}&rdquo; <br>  id=&rdquo;btnMoveSelected&rdquo;
&nbsp; onClick=&rdquo;var i;&amp;#xa;for(i=0;i&amp;lt;document.forms[0].elements.length;i++)
     &nbsp;&nbsp; {&amp;#xa;&nbsp; if (document.forms[0].elements[i].checked){&amp;#xa;&nbsp;&nbsp;&nbsp;
       &nbsp; return true; &amp;#xa;}&amp;#xa;}&amp;#xa;alert(&amp;quot;No items selected&amp;quot;);&amp;#xa;return false;&rdquo;
   &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; text=&rdquo;Move Selected to&rdquo;/&gt;</pre>
        <p class=NB-Corpo5><span lang=EN-US>When you use the Properties editor window to
          enter JavaScript code, the Visual Designer handles inserting the JavaScript
          into the JSP page with the proper tags and formatting. Of course, you can
          always edit the JSP yourself and manually add JavaScript code.</span></p>
        <p class=NB-Corpo5><span lang=EN-US>There are other ways to use JavaScript in an
          application. You can put the code in a separate file and then use the Script
          component to bind to that file. First, enter the code to a file, giving it a <i>.js</i> extension, and then add the file to the project. (Place the file in a
          subdirectory of the project directory.) Next, drop a Script component, found in
          the Advanced section of the Palette, onto a page, and bind the Script
          component&rsquo;s </span><span class=TechText2><span lang=EN-US style='font-size:10.0pt'>url</span></span><span
lang=EN-US> <br>
          property to the <i>.js </i>file. </span></p>
        <p class=NB-Corpo5><span lang=EN-US>You can also drop the Script component onto
          the page and add your JavaScript code directly in the JSP editor. When added to
          a page, a Script component does not display but you should see the following
          line added to the JSP page:</span></p>
        <p class=style7><span lang=EN-US style='font-family:&quot;Verdana&quot;;
&quot;Verdana&quot;'>&lt;ui:script
          binding=&rdquo;#{AlbumView.script1}&rdquo; </span><span lang=EN-US>id=&rdquo;script1&rdquo;/&gt;</span></p>
        <p class=NB-Corpo5><span lang=EN-US>You can then insert your JavaScript code
          within that tag, being sure to include the ending </span><span class=TechText2><span
lang=EN-US style='font-size:10.0pt'>&lt;/ui:script&gt;</span></span><span
lang=EN-US> tag. For the simple confirmation shown before, for example, you
          might have:</span></p>
        <p class=style7>&lt;ui:script
          binding=&rdquo;#{AlbumView.script1}&rdquo; id=&rdquo;script1&rdquo;<br>
          &nbsp;&nbsp; return confirm(&ldquo;Are you sure?&rdquo;)<br>
          &lt;/ui:script&gt;</p>
        <p class=NB-Corpo5><span lang=EN-US style='letter-spacing:-.05pt'>Although it is
          more complicated to use the Script component, it allows you to add generic
          JavaScript code that is not bound to an event. </span></p>
        <p class=NB-Interttulo5><span lang=EN-US style='letter-spacing:-.05pt'>Conclusions </span></p>
        <p class=NB-Corpo5><span lang=EN-US style='letter-spacing:-.05pt'>This
          introductory article should have given you a good idea of how easy it is to
          develop visual web applications with NetBeans and its Visual Designer tools.
          The Visual Designer provides a palette of customizable components that you use
          to design web pages, along with a Style Editor to help you fine-tune their
          appearance. In addition, non-visual components provide user-input validation
          and conversion code automatically, plus a virtual forms feature that simplifies
          user input processing. There is also a palette of sample code clips that you
          can use when you have to write backing code. And if you are comfortable with
          JavaScript code, the Visual Designer facilitates writing JavaScript for
          different components. </span></p>
        <p class=NB-Corpo5><span lang=EN-US style='letter-spacing:-.05pt'>You also have
          available to you a set of components for specifically working with database
          tables and tabular data, and these components make it a straightforward matter
          to retrieve and display database data. The Query Editor provides a graphical
          interface to help you develop more elaborate SQL queries. </span></p>
        <p class=NB-Corpo5><span lang=EN-US style='letter-spacing:-.05pt'>Page
          Navigation is another feature that helps you design the flow your application.
          You use this interface to link pages together, either at the page level or at
          the <br>
          component level. </span></p>
        <p class=NB-Corpo5><span lang=EN-US style='letter-spacing:-.05pt'>All in all,
          these tools take care of many of the page layout and coding chores required to
          develop a web application. You can concentrate on getting the right look for
          your application&rsquo;s web pages </span><span lang=EN-US style='letter-spacing:
.15pt'>and its business logic, and leave the <br>
          rest to NetBeans. </span><span lang=EN-US style='letter-spacing:.15pt;
'>&nbsp;</span></p>
        <table width="100%" border="1" cellpadding="0" cellspacing="0" bordercolor="#00722B">
          <tr>
            <td height="33" bgcolor="#00722B"><blockquote>
                <p class="NB-Listagenstitulos"><strong>Links</strong></p>
              </blockquote></td>
          </tr>
          <tr>
            <td height="201"><br>
              <table width="100%" border="0" cellspacing="0" cellpadding="0">
                <tr>
                  <td width="40">&nbsp;</td>
                  <td><a href="https://netbeans.org/kb/archive/index.html"><span class="style3"><font color="#00722B" face="Verdana">netbeans.org/kb/55/vwp-index.html</font></span></a></td>
                </tr>
                <tr>
                  <td height="19">&nbsp;</td>
                  <td><font size=1 color=black face="Verdana"><span style="font-size:9.0pt;letter-spacing:0pt">NetBeans 5.5 Visual Web Pack Documentation main page. </span></font></td>
                </tr>
              </table>
              <br>
              <table width="100%" border="0" cellspacing="0" cellpadding="0">
                <tr>
                  <td width="40">&nbsp;</td>
                  <td><a href="http://developers.sun.com/prodtech/javatools/jscreator/reference/index.jsp"><span class="style3"><font color="#00722B" face="Verdana">developers.sun.com/prodtech/javatools/jscreator/reference/index.jsp </font></span></a></td>
                </tr>
                <tr>
                  <td height="19">&nbsp;</td>
                  <td><span class="style1"><font color=black face="Verdana">A listing of reference articles and tips for Java Studio Creator IDE. Most of the information applies to the NetBeans 5.5 Visual Web Pack. </font></span></td>
                </tr>
              </table>
              <br>
              <table width="100%" border="0" cellspacing="0" cellpadding="0">
                <tr>
                  <td width="40" height="19">&nbsp;</td>
                  <td><a href="http://developers.sun.com/prodtech/javatools/jscreator/reference/pdf/creator_prog_guide.pdf"><span class="style3"><font color="#00722B" face="Verdana">developers.sun.com/prodtech/javatools/jscreator/reference/pdf/creator_prog_guide.pdf </font></span></a></td>
                </tr>
                <tr>
                  <td height="19">&nbsp;</td>
                  <td><span class="style1"><font color=black face="Verdana">PDF compilation of the Java Studio Creator reference articles and tips. </font></span></td>
                </tr>
              </table>
          </tr>
        </table>
        <br>
        <table width="770" border="1" cellpadding="0" cellspacing="0" bordercolor="#00722B">
          <tr>
            <td><table width="100%" border="0" cellpadding="0" cellspacing="1" bordercolor="#00722B">
                <tr>
                  <td width="93"><div align="center">
                      <div align="center"><img src="/images_www/magazine/autores/BethStearns.jpg" alt="Autor" width="80" height="94"></div>
                    </div></td>
                  <td width="677" valign="middle"><p class=NB-Corpo11112><span class="NB-Corpo11121"><strong>Beth Stearns</strong><br>
                      (beth.stearns@sun.com) has been writing developer articles and books concerning the Java language since 1995. She has written extensively on Java Enterprise, JavaBeans, and Java Native Interface technologies as well as the Java Studio Creator and NetBeans development tools. Beth has co-authored numerous books in the Java Series, most recently, Designing Web Services with the J2EE 1.4 Platform and Applying Enterprise JavaBeans, Second Edition.<br>
                      <br>
                      </span></p></td>
                </tr>
              </table></td>
          </tr>
        </table></td>
    </tr>
  </table>
</div>
</body>
</html>