Easy Web Site Creation in the NetBeans

IDE
By Dana Nourie, February 2008

Last year I attended a Tech Days event and learned about the ease of use of jMaki
widgets for web site building, and then I gave a chat in Second Life on the topic of web
programming using the NetBeans IDE, including what I had learned at Tech Days. This
article is based on those talks, showing how incredibly easy it is to create a web site in
NetBeans through drag-and-drop without writing code, and how you can gradually learn
Java programming by adding to your JavaServer Pages (JSP), and creating other features
or programs that may be added to your site.

This article is aimed at new developers and programmers, and developers new to the
NetBeans IDE. To follow the examples, you must have the following software installed
on your computer:

 The Java Standard Edition Platform (Java SE) (Note, you can download the JDK
with the NetBeans IDE).
 The NetBeans IDE 6.0 or greater.

NetBeans IDE Benefits for Web Site Developers

As many of you know, web applications often require many different programming
languages, and a way of combining various technologies. For instance, you may use
HTML and CSS for your page formatting, JavaScript for some rollover buttons, and a
Java servlet or JSP to process a form. The latter is a good way to learn the syntax of the
Java programming language and is a great entry point if you are new to the Java platform.

One of the wonderful things about the NetBeans IDE is that you don't have to know all
the languages or how to combine the technologies. NetBeans handles the languages, and
combines technologies seamlessly for you. In addition, the NetBeans IDE has some
wonderful drag-and-drop widgets from various built-in palettes. For instance, you can
drag and drop HTML components to create a form, Swing components to create great
looking buttons or menus, or drop in interactive Ajax components using jMaki widgets.

The web site you see below in Figure 1 is not beautiful, nor is it a design I recommend.
However, all of its components were simply dragged onto a page, and are fully
functional, requiring no code to be written from scratch. You can do a lot of web site
creation in the NetBeans IDE with very little programming.
Easy Web Site Creation in the NetBeans
IDE
By Dana Nourie, February 2008

Last year I attended a Tech Days event and learned about the ease of use of jMaki
widgets for web site building, and then I gave a chat in Second Life on the topic of web
programming using the NetBeans IDE, including what I had learned at Tech Days. This
article is based on those talks, showing how incredibly easy it is to create a web site in
NetBeans through drag-and-drop without writing code, and how you can gradually learn
Java programming by adding to your JavaServer Pages (JSP), and creating other features
or programs that may be added to your site.

This article is aimed at new developers and programmers, and developers new to the
NetBeans IDE. To follow the examples, you must have the following software installed
on your computer:

 The Java Standard Edition Platform (Java SE) (Note, you can download the JDK
with the NetBeans IDE).
 The NetBeans IDE 6.0 or greater.

NetBeans IDE Benefits for Web Site Developers

As many of you know, web applications often require many different programming
languages, and a way of combining various technologies. For instance, you may use
HTML and CSS for your page formatting, JavaScript for some rollover buttons, and a
Java servlet or JSP to process a form. The latter is a good way to learn the syntax of the
Java programming language and is a great entry point if you are new to the Java platform.

One of the wonderful things about the NetBeans IDE is that you don't have to know all
the languages or how to combine the technologies. NetBeans handles the languages, and
combines technologies seamlessly for you. In addition, the NetBeans IDE has some
wonderful drag-and-drop widgets from various built-in palettes. For instance, you can
drag and drop HTML components to create a form, Swing components to create great
looking buttons or menus, or drop in interactive Ajax components using jMaki widgets.

The web site you see below in Figure 1 is not beautiful, nor is it a design I recommend.
However, all of its components were simply dragged onto a page, and are fully
functional, requiring no code to be written from scratch. You can do a lot of web site
creation in the NetBeans IDE with very little programming.
 Figure 1: Sample Web Site

Notice the clock that keeps time (on the right), a form (on the left) that gathers data from
users with the all important CAPTCHA (the image above the submit button) to prevent
spam, a tab layout in the center that makes for nice organization, and a fisheye effect on
the photos at the top. No programming was needed for any of these. All of these features
were added through drag and drop, which is far less time consuming than coding those
components yourself.

There are also many services available that you can simply drop onto a page, then add
URLs, or whatever you need to include to pull in that service, such as with a mashup. For
instance, adding RSS feeds to your page is very easy.

NetBeans also handles writing to and pulling data from a database, as described in the
Using Databound
Components to Access a
Database tutorial.

Getting Started

To get started, start the

NetBeans IDE. On the
opening screen there are
links to tutorials and
sample projects. For what
I'm going to show you,
we'll move on to one of
the menus at the top.
Follow the steps below:

Figure 2: Installing jMaki Plugin

Step 1: Go to the top menu and click on Tools > Plugins.

Step 2: Check the jMaki box, and install.

Step 3: Click the Close button.

Later, you'll want to investigate jMaki in detail, as you can add widgets from outside
sources or create a jMaki widget. For now, just make sure jMaki is installed as shown in
Figure 2, so you have all those wonderful technologies available to you through drag and
drop from the Palette.

Step 4: Restart the NetBeans IDE.

Step 5: Create a New Project, selecting Web as the Category, and Web Application as the
Project.

Step 6: Click the Next button.

Step 7: Give your project a name and click the Next button.

Step 8: Select the jMaki Framework, and then choose whatever layout you'd like to start
with. This is a nice new
feature that creates a
layout for you.

Note: These are all basic

layouts, and if you know
CSS well, you can change
the CSS files in any
manner you like. You can
also do a lot of design
work using JavaServer
Faces (JSF) in Creating a
CSS-based Fixed Page
Layout - Part 1.

Step 9: Click Finish.

Figure 3: NetBeans Interface

Now you get the workspace, and all the wonderful Palettes! Notice on the right-hand side
of the slide all the widgets that are available to you. You can see the jMaki ones that
provide many different types of Ajax functionality for your site. In addition, you can also
drag and drop HTML components, such as forms, which are always a pain to write by
hand. Lower down on the right side are JSP, JSF, and Database drag and drop features
that are invaluable for web applications and make programming so much easier.

On the left side of the page, you can look at the Files in your project, and how NetBeans
organizes your files. Notice JSP pages are saved under web directory and a css folder is
under resources.

Adding pages is easy, and NetBeans saves the page to the proper directory. You can add
additional pages to your site through this pane, though there are other ways as well. You'll
see an example of this later in this article.

Adding Web Components with Drag and Drop

The center area is the workspace, and the beginnings of your web project. The NetBeans
IDE automatically creates a JSP page for you when you create a web project, and it
inserts the basic HTML for the page layout that you chose previously. Of course, you are
not stuck with this layout, and may edit the page as you desire if you know HTML and
CSS. Additionally, you are not stuck with JSP pages. You may, if you like, develop in
PHP instead. For this article, though, we'll stick with JSP pages.

You can see which text to change by looking at the black print. If you know HTML, of
course, you can add additional code, or more simply you can drag and drop HTML
components from the palette on the right, right onto the workspace.

Comments that have been inserted to indicate where you place your content for each
section or column on the page, is shown in Figure 3 below.

Figure 4: Insert Text Over Black Type

To place the tabbed panes into your site in the center section, simply find the Tabbed
View widget listed under jMaki Dojo in the Palette on the right. Hold the mouse button
down as you drag the component onto the page. The code for this widget suddenly
appears in that area, and you can easily change the tab names to anything you like. In
addition, you can set the tab to a link, or insert content onto the tab page by creating a
separate page that gets included. The latter method is what I used for the second tab.
Create a separate page to be included on a tabbed pane by doing the following:

Step 1: In the Files pane, right-click the project name, and select New > JSP.

Step 2: Enter a name for the page.

Step 3: You can save the page in a folder of your choice by clicking Browse and choosing
a folder, or you can leave it blank. By default, the NetBeans IDE saves the pages into the
web folder. This is what I did for this sample web site.

Step 4: Edit the JSP page you just created in the middle pane (the code editor).

The NetBeans IDE automatically creates your web pages as JSP pages, unless you tell it
to do otherwise. You can also use this IDE with other programming languages, such as
Ruby on Rails or PHP. Once the page is created and you have added the content you
want, then include it into the tabbed page by changing the Tabbed View code to the
following:

Figure 5: Tabbed Pane Code

Notice after the word include : the name of the file to be included is listed: test.jsp
When you bring up the application, the test.jsp page automatically gets included on
that one tab. This makes organizing a web site easy, and tabs are popular.

Of course, there are many other ways, so experiment with all the widgets available to
you. Now, drag and drop the other components onto the page in their correct columns.
The other components don't need any code changes, with the exception of the form,
where you need to tell it where a script is to process the form. If there isn't one, leave that
blank for now.

For creating scripts that send data to the server and return something, such as with forms,
you'll need to get an understanding of JavaServer Pages or servlet technologies. Using the
NetBeans IDE, you can create a front controller with a servlet, add methods for cookie
requests, and use JavaServer Pages Standard Tag Library (JSTL) for internationalization
as well as common, structural tasks such as iteration and conditionals, tags for
manipulating XML documents, internationalization tags, and SQL tags. All of those
topics will be covered in upcoming articles.

The NetBeans IDE also provides a framework for integrating existing custom tags with
JSTL tags. In the future, we will cover many of these topics so you can learn Java
programming through creating applications for web sites. Also, see the links listed in For
More Information below.

Compile and Run Your Site

Once you have your components in place, you need to Build and Run your project. You'll
only need to do this once for every NetBeans session. After you do a build, you can add
more components, then simply Refresh or Reload the browser page. To Build and Run
your project, follow these steps:

Step 1: Go to Build in the main menu.

Step 2: Select Build Main Project (if you get a pop up box that says, "The main project
has not been set," make sure your project is selected in that window and then click OK.)

In the Output window at the bottom of the screen, you can watch as the IDE creates .jar
files, compiles the JSP pages, and then tells you if the build was successful. Assuming it
was, run your project with the two following steps:

Step 1: Go to Run in the main menu.

Step 2: Select Run Main Project.

Again in the Output window, you see that NetBeans is starting the application server and
any databases you need, and then firing up the browser. Lastly, you should see the web
site you created in your browser window. If you go back to the NetBeans IDE, drag and
drop another component into your site and save it, you can return to the browser window
and see your changes by clicking Refresh or Reload. It's as simple as that.

If you had errors in your build, the NetBeans IDE informs you of this in the Output
window by listing the errors. If you followed this article, any errors you have will likely
be due to the code change you made for the Tabbed pane. Check that area for syntax
areas, then run Build again. For more complex projects, the NetBeans IDE has a very
useful debugger, which you can learn more about in the Debugging FAQ.

Adding Other Components

 Figure 6: Using JavaServer Faces Frameworks

If you want to play with a more complex design, you also have Visual JavaServer Faces
available to you, simply by checking the box when you open a new project. This provides
a huge selection of components you can drag and drop onto the workspace. This saves an
incredible amount of coding time, and shortens the learning curve drastically.

When choosing JavaServer Faces, you get a Palette on the right similar to the jMaki
Palettes you saw before, giving you access to components you'd regularly have to create
normally with a lot of HTML and CSS code. If you want to investigate designing your
site with JSF technology, read Creating a CSS-based Fixed Page Layout - Part 1. In
addition, the Palette provides more advanced components, such as Data Providers, and
Advanced Data Providers.

Adding Other Components

The NetBeans IDE has an amazing amount of features in addition to those we just talked
about. You'll discover as you are creating, that you get code completion in any language
you are working in. There are also other features, such as UML modeling that you can
use, easy access to web services, and you can code, test, and debug for mobility
applications.

NetBeans saves lots of time and writes so much of your code for you. This is great for
new programmers to advanced developers. As a new developer, or someone new to the
Java platform, you can learn the Java programming language little by little by creating
small web applications, and gradually working up to complex Enterprise applications.

As you move more into Java EE, then you'll need to learn more about Java programming.
In the next article, you will learn how to create programs for your site using JSP pages
and servlets. This is a great entry point for learning Java programming syntax and some
of the classes from the API.

For More Information

 Java Standard Edition Platform (Java SE)

 Tech Days Events
 jMaki Widgets
 NetBeans IDE
 JavaServer Pages (JSP)
 Creating a CSS-based Fixed Page Layout - Part1
 Arun Gupta Blog
 How to Create a jMaki widget
 Using Databound Components to Access a Database
 Debugging FAQ

Rate and Review

Tell us what you think of the content of this page.

Excellent Good Fair Poor

Comments:

Figure 1: Sample Web Site

Notice the clock that keeps time (on the right), a form (on the left) that gathers data from
users with the all important CAPTCHA (the image above the submit button) to prevent
spam, a tab layout in the center that makes for nice organization, and a fisheye effect on
the photos at the top. No programming was needed for any of these. All of these features
were added through drag and drop, which is far less time consuming than coding those
components yourself.

There are also many services available that you can simply drop onto a page, then add
URLs, or whatever you need to include to pull in that service, such as with a mashup. For
instance, adding RSS feeds to your page is very easy.
NetBeans also handles writing to and pulling data from a database, as described in the
Using Databound
Components to Access a
Database tutorial.

Getting Started

To get started, start the

NetBeans IDE. On the
opening screen there are
links to tutorials and
sample projects. For what
I'm going to show you,
we'll move on to one of
the menus at the top.
Follow the steps below:

Figure 2: Installing jMaki Plugin

Step 1: Go to the top menu and click on Tools > Plugins.

Step 2: Check the jMaki box, and install.

Step 3: Click the Close button.

Later, you'll want to investigate jMaki in detail, as you can add widgets from outside
sources or create a jMaki widget. For now, just make sure jMaki is installed as shown in
Figure 2, so you have all those wonderful technologies available to you through drag and
drop from the Palette.

Step 4: Restart the NetBeans IDE.

Step 5: Create a New Project, selecting Web as the Category, and Web Application as the
Project.

Step 6: Click the Next button.

Step 7: Give your project a name and click the Next button.

Step 8: Select the jMaki Framework, and then choose whatever layout you'd like to start
with. This is a nice new feature that creates a layout for you.

Note: These are all basic layouts, and if you know CSS well, you can change the CSS
files in any manner you like. You can also do a lot of design work using JavaServer Faces
(JSF) in Creating a CSS-based Fixed Page Layout - Part 1.
Step 9: Click Finish.

Now you get the

workspace, and all the
wonderful Palettes!
Notice on the right-hand
side of the slide all the
widgets that are available
to you. You can see the
Figure 3: NetBeans Interface
jMaki ones that provide
many different types of Ajax functionality for your site. In addition, you can also drag
and drop HTML components, such as forms, which are always a pain to write by hand.
Lower down on the right side are JSP, JSF, and Database drag and drop features that are
invaluable for web applications and make programming so much easier.

On the left side of the page, you can look at the Files in your project, and how NetBeans
organizes your files. Notice JSP pages are saved under web directory and a css folder is
under resources.

Adding pages is easy, and NetBeans saves the page to the proper directory. You can add
additional pages to your site through this pane, though there are other ways as well. You'll
see an example of this later in this article.

Adding Web Components with Drag and Drop

The center area is the workspace, and the beginnings of your web project. The NetBeans
IDE automatically creates a JSP page for you when you create a web project, and it
inserts the basic HTML for the page layout that you chose previously. Of course, you are
not stuck with this layout, and may edit the page as you desire if you know HTML and
CSS. Additionally, you are not stuck with JSP pages. You may, if you like, develop in
PHP instead. For this article, though, we'll stick with JSP pages.

You can see which text to change by looking at the black print. If you know HTML, of
course, you can add additional code, or more simply you can drag and drop HTML
components from the palette on the right, right onto the workspace.

Comments that have been inserted to indicate where you place your content for each
section or column on the page, is shown in Figure 3 below.
 Figure 4: Insert Text Over Black Type

To place the tabbed panes into your site in the center section, simply find the Tabbed
View widget listed under jMaki Dojo in the Palette on the right. Hold the mouse button
down as you drag the component onto the page. The code for this widget suddenly
appears in that area, and you can easily change the tab names to anything you like. In
addition, you can set the tab to a link, or insert content onto the tab page by creating a
separate page that gets included. The latter method is what I used for the second tab.

Create a separate page to be included on a tabbed pane by doing the following:

Step 1: In the Files pane, right-click the project name, and select New > JSP.

Step 2: Enter a name for the page.

Step 3: You can save the page in a folder of your choice by clicking Browse and choosing
a folder, or you can leave it blank. By default, the NetBeans IDE saves the pages into the
web folder. This is what I did for this sample web site.

Step 4: Edit the JSP page you just created in the middle pane (the code editor).

The NetBeans IDE automatically creates your web pages as JSP pages, unless you tell it
to do otherwise. You can also use this IDE with other programming languages, such as
Ruby on Rails or PHP. Once the page is created and you have added the content you
want, then include it into the tabbed page by changing the Tabbed View code to the
following:
 Figure 5: Tabbed Pane Code

Notice after the word include : the name of the file to be included is listed: test.jsp
When you bring up the application, the test.jsp page automatically gets included on
that one tab. This makes organizing a web site easy, and tabs are popular.

Of course, there are many other ways, so experiment with all the widgets available to
you. Now, drag and drop the other components onto the page in their correct columns.
The other components don't need any code changes, with the exception of the form,
where you need to tell it where a script is to process the form. If there isn't one, leave that
blank for now.

For creating scripts that send data to the server and return something, such as with forms,
you'll need to get an understanding of JavaServer Pages or servlet technologies. Using the
NetBeans IDE, you can create a front controller with a servlet, add methods for cookie
requests, and use JavaServer Pages Standard Tag Library (JSTL) for internationalization
as well as common, structural tasks such as iteration and conditionals, tags for
manipulating XML documents, internationalization tags, and SQL tags. All of those
topics will be covered in upcoming articles.

The NetBeans IDE also provides a framework for integrating existing custom tags with
JSTL tags. In the future, we will cover many of these topics so you can learn Java
programming through creating applications for web sites. Also, see the links listed in For
More Information below.

Compile and Run Your Site

Once you have your components in place, you need to Build and Run your project. You'll
only need to do this once for every NetBeans session. After you do a build, you can add
more components, then simply Refresh or Reload the browser page. To Build and Run
your project, follow these steps:

Step 1: Go to Build in the main menu.

Step 2: Select Build Main Project (if you get a pop up box that says, "The main project
has not been set," make sure your project is selected in that window and then click OK.)

In the Output window at the bottom of the screen, you can watch as the IDE creates .jar
files, compiles the JSP pages, and then tells you if the build was successful. Assuming it
was, run your project with the two following steps:

Step 1: Go to Run in the main menu.

Step 2: Select Run Main Project.

Again in the Output window, you see that NetBeans is starting the application server and
any databases you need, and then firing up the browser. Lastly, you should see the web
site you created in your browser window. If you go back to the NetBeans IDE, drag and
drop another component into your site and save it, you can return to the browser window
and see your changes by clicking Refresh or Reload. It's as simple as that.

If you had errors in your

build, the NetBeans IDE
informs you of this in the
Output window by listing
the errors. If you followed
this article, any errors you
have will likely be due to
the code change you
made for the Tabbed
pane. Check that area for
syntax areas, then run
Build again. For more
complex projects, the
NetBeans IDE has a very
useful debugger, which
you can learn more about
in the Debugging FAQ.
Figure 6: Using JavaServer Faces Frameworks
Adding Other
Components

If you want to play with a more complex design, you also have Visual JavaServer Faces
available to you, simply by checking the box when you open a new project. This provides
a huge selection of components you can drag and drop onto the workspace. This saves an
incredible amount of coding time, and shortens the learning curve drastically.

When choosing JavaServer Faces, you get a Palette on the right similar to the jMaki
Palettes you saw before, giving you access to components you'd regularly have to create
normally with a lot of HTML and CSS code. If you want to investigate designing your
site with JSF technology, read Creating a CSS-based Fixed Page Layout - Part 1. In
addition, the Palette provides more advanced components, such as Data Providers, and
Advanced Data Providers.

Adding Other Components

The NetBeans IDE has an amazing amount of features in addition to those we just talked
about. You'll discover as you are creating, that you get code completion in any language
you are working in. There are also other features, such as UML modeling that you can
use, easy access to web services, and you can code, test, and debug for mobility
applications.

NetBeans saves lots of time and writes so much of your code for you. This is great for
new programmers to advanced developers. As a new developer, or someone new to the
Java platform, you can learn the Java programming language little by little by creating
small web applications, and gradually working up to complex Enterprise applications.

As you move more into Java EE, then you'll need to learn more about Java programming.
In the next article, you will learn how to create programs for your site using JSP pages
and servlets. This is a great entry point for learning Java programming syntax and some
of the classes from the API.

For More Information

 Java Standard Edition Platform (Java SE)

 Tech Days Events
 jMaki Widgets
 NetBeans IDE
 JavaServer Pages (JSP)
 Creating a CSS-based Fixed Page Layout - Part1
 Arun Gupta Blog
 How to Create a jMaki widget
 Using Databound Components to Access a Database
 Debugging FAQ

Rate and Review

Tell us what you think of the content of this page.

Excellent Good Fair Poor

Comments: