| <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> |
| <html> |
| <!-- |
| Copyright (c) 2008, 2010, Oracle and/or its affiliates. All rights reserved. |
| --> |
| <head> |
| <title>NetBeans Tutorial Template - The name here should match the H1 title</title> |
| <meta name="description" |
| value="A template for writing tutorials for netbeans.org"> |
| <link rel="stylesheet" href="../../netbeans.css"> |
| <meta name="author" content="your_name_here"> |
| </head> |
| <body> |
| <h1>NetBeans Tutorial Template - The name here should match the title tag</h1> |
| <div class="articledate" style="margin-left: 0px;">Contributed and maintained |
| by <a href="mailto:your_name@whatever.com"><i>your name here</i></a></div> |
| <p><i>This template shows you how to write a tutorial. <b>Don't just save this |
| web page to use the template. Instead, download it from <a href="https://netbeans.org/files/documents/4/681/tutorial-template.html">this |
| location</a>.</b> When you are done, please zip up your HTML file and any images/binary |
| files and send it to <a href="mailto:webmaster@netbeans.org">webmaster@netbeans.org</a>.</i></p> |
| <p><i>Use this section to introduce the tutorial. Focus on the following:</i></p> |
| <ul> |
| <li><i>What technologies are involved and why they're exciting/useful.</i></li> |
| <li><i>How NetBeans supports these technologies.</i></li> |
| <li><i>A quick summary of the tasks the tutorial covers.</i></li> |
| </ul> |
| <p>This document takes you through the basics of using NetBeans IDE 5.0 to develop |
| web applications. This document is designed to get you going as quickly as possible. |
| For more information on working with NetBeans IDE, see the <a href="https://netbeans.org/kb">Support |
| and Docs page</a> on the NetBeans website.</p> |
| <p>You create, deploy, and execute a simple web application. The application uses |
| a JavaServer Pages™ page to ask you to input your name. It then uses a |
| JavaBeans™ component to persist the name during the HTTP session and repeats |
| the name on another JavaServer Pages page.</p> |
| <p class="align-center"><b>Expected duration: <i>xxx</i> minutes</b></p> |
| <div class="indent"> |
| <h3 class="tutorial">Prerequisites</h3> |
| <p><i>Note the knowledge that the user needs to complete the tutorial. If there |
| are better resources for beginners, link to them.</i></p> |
| <p>This tutorial assumes you have some basic knowledge of, or programming experience |
| with, the following technologies. </p> |
| <ul> |
| <li><a href="http://java.sun.com/j2se/1.5.0/docs/guide/jmx/overview/JMXoverviewTOC.html">JMX</a></li> |
| <li>NetBeans IDE</li> |
| </ul> |
| <h3 class="tutorial">Software Needed for the Tutorial</h3> |
| <p><i>List all the software that is needed and where to download them. Note |
| that for NetBeans builds, just link to http://www.netbeans.info/downloads/index.php. |
| If there is an example project the user builds on, link to it here as well. |
| Just include the sample project in the zip file you send the web team, we |
| will post it and correct the link.</i></p> |
| <p>Before you begin, you need to install the following software on your computer:</p> |
| <ul> |
| <li>NetBeans IDE 5.5 (<a href="http://www.netbeans.info/downloads/index.php">download</a>).</li> |
| <li>Java Standard Development Kit (JDK™) version 1.4.2 (<a href="http://java.sun.com/j2se/1.4.2/download.html">download</a>) |
| or 5.0 (<a href="http://java.sun.com/j2se/1.5.0/download.jsp">download</a>)</li> |
| </ul> |
| <h3 class="tutorial">Notations Used in the Tutorial</h3> |
| <p><i> If you use any variables, like <NETBEANS_HOME> or <PROJECT_HOME>, |
| list them here.</i></p> |
| <ul> |
| <li><NETBEANS_HOME> - the NetBeans IDE installation directory</li> |
| <li><PROJECT_HOME> - directory that contains the project you create.</li> |
| </ul> |
| <h3 class="tutorial">Tutorial Exercises</h3> |
| <ul> |
| <li><a href="#Exercise_0">Exercise 0: Install and configure the tutorial environment</a></li> |
| <li><a href="#Exercise_1">Exercise 1: Setting Up a Web Application Project</a></li> |
| <li><a href="#Exercise_2">Exercise 2: Creating and Editing Web Application |
| Source Files</a></li> |
| <li><a href="#Exercise_3">Exercise 3: Exercise 3: Building and Running a Web |
| Application Project</a></li> |
| </ul> |
| </div> |
| |
| <br /> |
| <!-- ===================================================================================== --> |
| <h2><a name="Exercise_0"></a>Exercise 0: Installing and Configuring the Tutorial |
| Environment</h2> |
| <p><i>List anything the user has to do before they start the tutorial, above and |
| beyond installing the software. Examples are:</i> |
| <ul> |
| <li><i>Populating a database</i></li> |
| <li><i>Registering the appropriate application server</i></li> |
| <li><i>etc.</i></li> |
| </ul> |
| <p>The bundled Tomcat Web Server is registered with the IDE automatically. However, |
| before you can deploy to the SJS Application Server, JBoss, or WebLogic, you |
| have to register a local instance with the IDE. If you installed the NetBeans |
| IDE 5.0/SJS Application Server bundle, a local instance of the SJS Application |
| Server is registered automatically. Otherwise, take the following steps:</p> |
| <ol> |
| <p> |
| <li>Choose Tools > Server Manager from the main window.</li> |
| <p> |
| <li>Click Add Server. Select the server type and give a name to the instance. |
| Then click Next.</li> |
| <p> |
| <li>Specify the server information, the location of the local instance of the |
| application server, and the domain to which you want to deploy.</li> |
| </ol> |
| |
| <br /> |
| <!-- ===================================================================================== --> |
| <h2><a name="Exercise_1"></a>Setting Up a Web Application Project</h2> |
| <i>State the goal of this exercise. If necessary, give any background information |
| about the task, such as explaining new terms and technologies.</i> |
| <p>The goal of this exercise is to create and configure a web application project, |
| including specifying the file layout of the project and the server to which |
| the application is deployed.</p> |
| <div class="indent"> |
| <h3 class="tutorial">Creating a New Web Application Project</h3> |
| <p> |
| <i>Guidelines for outlining steps: |
| </i><ul> |
| <li><i>Put one step on each line.</i></li> |
| <li><i>Put a <P> tag before each li to provide spacing between steps.</i></li> |
| <li><i>Don't make the names of menus, commands, or buttons bold.</i></li> |
| <li><i>Put all code, files, and directories in <TT></i></li> |
| <li><i>Put all code snippets of one line or longer in <PRE CLASS="examplecode">. |
| Try to break it up so that the maximum width is less than 600 pixels. Note |
| that users will often copy and paste directly from the code, so don't use |
| hidden tags like <BR> and color tags, since they would then end up |
| in the pasted code and cause compilation errors.</i></li> |
| <li><i>Images should be in their own <P> tag inside of the containing |
| li tag. They should be center-aligned and no wider than 600 pixels. You |
| must provide alt text for the image. Images should be saved in PNG format |
| and should have as small a file size as possible.</i></li> |
| </ul> |
| <ol> |
| <p> |
| <li>Choose File > New Project. Under Categories, select Web. Under Projects, |
| select Web Application and click Next.</li> |
| <p> |
| <li> Under Project Name, enter <tt>HelloWeb</tt>. Notice that the Context |
| Path is <tt>/HelloWeb</tt>.</li> |
| <p> |
| <li>Change the Project Location to any directory on your computer. From now |
| on, this directory is referred to as <tt><PROJECT_HOME></tt>.</li> |
| <p> |
| <li>Select the recommendations to which your source structure will adhere, |
| which is purely a personal preference: |
| <ul> |
| <p> |
| <li><b>Java BluePrints.</b> For more information, see <a href="http://java.sun.com/blueprints/code/projectconventions.html" target="_blank">http://java.sun.com/blueprints/code/projectconventions.html</a>.</li> |
| <li><b>Jakarta.</b> For more information, see <a href="http://jakarta.apache.org/tomcat/tomcat-5.0-doc/" target="_blank">http://jakarta.apache.org/tomcat/tomcat-5.0-doc/</a>.</li> |
| </ul> |
| </li> |
| <p> |
| <li>Select the server to which you want to deploy your application. Only servers |
| that are registered with the IDE are listed.</li> |
| <p> |
| <li>Leave the Set as Main Project checkbox selected. Click Finish. <br /> |
| <p>The IDE creates the <tt><PROJECT_HOME>/HelloWeb</tt> project folder. |
| The project folder contains all of your sources and project metadata, |
| such as the project's Ant build script. The HelloWeb project opens in |
| the IDE. You can view its logical structure in the Projects window and |
| its file structure in the Files window. |
| </li> |
| </ol> |
| <h3 class="tutorial">Summary</h3> |
| <p><i>Summarize what the user accomplished in the exercise.</i></p> |
| <p>In this exercise, you created a new web application project, specified the |
| file layout of the project, and configured the server to which the application |
| is deployed. |
| </div> |
| |
| <br /> |
| <!-- ===================================================================================== --> |
| <h2><a name="Exercise_2"></a>Exercise 2: Creating and Editing Web Application |
| Source Files</h2> |
| <p>Creating and editing source files is the most important function that the IDE |
| serves. After all, that's probably what you spend most of your day doing. The |
| IDE provides a wide range of tools that can compliment any developer's personal |
| style, whether you prefer to code everything by hand or want the IDE to generate |
| large chunks of code for you.</p> |
| <p>In this exercise, you will create a JavaBeans object to get and set the name |
| of a user, add a form to the default JSP file in which to enter this information, |
| and create a new JSP file to display the output.</p> |
| <div class="indent"> |
| <h3 class="tutorial">Creating a Java Package and a Java Source File</h3> |
| <ol> |
| <p> |
| <li>Expand the Source Packages node. Note the Source Packages node only contains |
| an empty default package node. </li> |
| <p> |
| <li>Right-click the Source Packages node and choose New > Java Class. Enter |
| <tt>NameHandler</tt> in the Class Name text box and type <tt>org.me.hello</tt> |
| in the Package drop-down. Click Finish. </li> |
| <p> |
| <li>In the Source Editor, declare a field by typing the following line directly |
| below the class declaration: |
| <pre class="examplecode"> String name;</pre> |
| </li> |
| <li>Add the following line in the <tt>nameHandler()</tt> method: |
| <pre class="examplecode"> name = null;</pre> |
| </li> |
| </ol> |
| <h3 class="tutorial">Generating Getter and Setter Methods</h3> |
| <ol> |
| <p> |
| <li>Right-click the word <tt>name</tt> in the field declaration at the start |
| of the class and choose Refactor > Encapsulate Fields. Click Next to |
| run the command with its default options. </li> |
| <p> |
| <li>Click Do Refactoring. Getter and setter methods are generated for the |
| <tt>name</tt> field and its access level is changed to private. The Java |
| class should now look similar to this: |
| <p><i>Put all code snippets of one line or longer in <PRE CLASS="examplecode">. |
| Try to break it up so that the maximum width is less than 600 pixels. |
| Note that users will often copy and paste directly from the code, so don't |
| use hidden tags like <BR> and color tags, since they would then |
| end up in the pasted code and cause compilation errors.</i></p> |
| <pre class="examplecode"> package org.me.hello; |
| |
| /** |
| * |
| * @author Administrator |
| */ |
| |
| public class NameHandler { |
| |
| private String name; |
| |
| /** Creates a new instance of NameHandler */ |
| public NameHandler() { |
| setName(null); |
| } |
| |
| public String getName() { |
| return name; |
| } |
| |
| public void setName(String name) { |
| this.name = name; |
| } |
| |
| }</pre> |
| </li> |
| </ol> |
| <h3 class="tutorial">Editing the Default JavaServer Pages File</h3> |
| <ol> |
| <li>Expand the HelloWeb project node and the Web Pages node. Note that the |
| IDE has created a default JavaServer Pages file, <tt>index.jsp</tt>, for |
| you. When you create the project, the IDE opened the <tt>index.jsp</tt> |
| file in the Source Editor. </li> |
| <p> |
| <li>Select the <tt>index.jsp</tt> Source Editor tab. The <tt>index.jsp</tt> |
| file now has focus in the Source Editor. </li> |
| <p> |
| <li>In the Palette on the right side of the Source Editor, expand HTML Forms |
| and drag a Form item below the <tt><h1></tt> tags in the Source Editor: |
| <p><i>Images should be in their own <P> tag and end with a <BR> |
| tag. They should be center-aligned and no wider than 600 pixels. If the |
| image is larger than 600 pixels, make a smaller copy and link that to |
| the full sized image in a separate window. You must provide ALT text for |
| the image. Images should be saved in PNG format and should have as small |
| a file size as possible.</i></p> |
| <p class="align-center"><a href="../../images_www/articles/quickstart-web/palette.png" target="_blank"><img src="../../images_www/articles/quickstart-web/palette_small.png" align="middle" alt="Palette" vspace="5" hspace="5" width="600" height="381" class="b-none"></a> |
| <BR> |
| <p>Set the following values: |
| <ul> |
| <li><b>Action:</b> response.jsp |
| <li><b>Method:</b> GET |
| <li><b>Name:</b> Name Input Form |
| </ul> |
| <p>Click OK. The Form is added to the <tt>index.jsp</tt> file. |
| <p> |
| <li>Drag a Text Input item to just before the <tt></form></tt> tag. |
| <p>Set the following values: |
| <ul> |
| <li><b>Name:</b> name |
| <li><b>Type:</b> text |
| </ul> |
| <p>Click OK. The Text Input is added between the <tt><form></tt> tags. |
| <p> |
| <li>Drag a Button item to just before the <tt></form></tt> tag. |
| <p>Set the following values: |
| <ul> |
| <li><b>Label:</b> OK |
| <li><b>Type:</b> submit |
| </ul> |
| <p>Click OK. The Button is added between the <tt><form></tt> tags. |
| <p> |
| <li>Type <tt>Enter your name: </tt> in front of the <tt><input></tt> |
| tag and change the text between the <tt><h1></tt> tags to <tt>Entry |
| Form</tt>. |
| <p>The tags between the <tt><body></tt> tags now look as follows: |
| </li> |
| <pre class="examplecode"><h1>Entry Form</h1><form name="Name Input Form" action="response.jsp" method="GET"> |
| Enter your name: <input type="text" name="name" value="" /> |
| <input type="submit" value="OK" /></form></pre> |
| </ol> |
| <h3 class="tutorial">Creating a JavaServer Pages File</h3> |
| <ol> |
| <p> |
| <li>Expand the HelloWeb project node and the Web Pages node. </li> |
| <p> |
| <li>Right-click the Web Pages node and choose New > JSP, name the JavaServer |
| Pages file <tt>response</tt>, and click Finish. <br /> |
| <p>The new <tt>response.jsp</tt> opens in the Source Editor. |
| </li> |
| <p> |
| <li>In the Palette on the right side of the Source Editor, expand JSP and |
| drag a Use Bean item right below the <tt><body></tt> tag in the Source |
| Editor. |
| <p>Set the following values: |
| <ul> |
| <li><b>ID:</b> mybean |
| <li><b>Class:</b> org.me.hello.NameHandler |
| <li><b>Scope:</b> session |
| </ul> |
| <p>Click OK. The Use Bean is added below the <tt><body></tt> tag. |
| <p> |
| <li>Add a Get Bean Property item and a Set Bean Property item from the Palette. |
| Then change the code so that the tags between the <tt><body></tt> |
| tags look as follows: </li> |
| <pre class="examplecode"><jsp:useBean id="mybean" scope="session" class="org.me.hello.NameHandler" /> |
| <jsp:setProperty name="mybean" property="*" /> |
| <h1>Hello, <jsp:getProperty name="mybean" property="name" />!</h1></pre> |
| </ol> |
| <h3 class="tutorial">Summary</h3> |
| <p>In this exercise, you created JavaBeans object to get and set the name of |
| a user, added a form to the default JSP file in which to enter this information, |
| and created a new JSP file to display the output. |
| </div> |
| |
| <br /> |
| <!-- ======================================================================================= --> |
| <h2><a name="Exercise_3"></a>Exercise 3: Building and Running a Web Application |
| Project</h2> |
| <p>The IDE uses an Ant build script to build and run your web applications. The |
| IDE generates the build script based on the options you enter in the New Project |
| wizard and the project's Project Properties dialog box.</p> |
| <p>In this exercise, you will build and deploy the web application. You will then |
| test the web application functionality. |
| <div class="indent"> |
| <h3 class="tutorial">Building and Deploying the Web Application</h3> |
| <ol> |
| <p> |
| <li>Choose Run > Run Main Project (F6) from the Run menu. |
| <p>The IDE builds the web application and deploys it, using the server you |
| specified when creating the project. |
| </li> |
| </ol> |
| <h3 class="tutorial">Testing the Web Application</h3> |
| <ol> |
| <p> |
| <li>Enter your name in the text box on your deployed <tt>index.jsp</tt> page: |
| <p><img src="../../images_www/articles/quickstart-web/result1.png" align="middle" alt="Palette" vspace="5" hspace="5"> |
| <p>Click OK. The <tt>response.jsp</tt> page should open and greet you: |
| <p><img src="../../images_www/articles/quickstart-web/result2.png" align="middle" alt="Palette" vspace="5" hspace="5"> |
| </li> |
| </ol> |
| <h3 class="tutorial">Summary</h3> |
| <p>In this exercise, you built and deployed the web application. You also test |
| the web application functionality. |
| </div> |
| |
| <br /> |
| <!-- ======================================================================================== --> |
| <h2><a name="nextsteps"></a>Next Steps</h2> |
| <p>To send comments and suggestions, get support, and keep informed on the latest |
| developments on the NetBeans IDE J2EE development features, join the <a href="mailto:nbusers@netbeans.org">nbusers@netbeans.org</a> |
| mailing list. |
| </body> |
| </html> |
