How to Design a Browser Using Java

No results found

Your search did not match any results.

We suggest you try the following to help find what you're looking for:

• Check the spelling of your keyword search.
• Use synonyms for the keyword you typed, for example, try "application" instead of "software."
• Try one of the popular searches shown below.
• Start a new search.

Trending Questions

Close

 

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.

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. 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)
• NetBeans IDE
• JavaServer Pages (JSP)
• Debugging FAQ

How to Design a Browser Using Java

Source: https://www.oracle.com/java/technologies/website-creation-netbeans-ide.html

Share this post