| <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> |
| |
| <html> |
| <head> |
| <meta name="author" content="troy.giunipero@sun.com"> |
| <meta http-equiv="content-type" content="text/html; charset=UTF-8"> |
| <meta name="description" content="This tutorial unit demonstrates how to create project files in the IDE, and introduces you to some of the facilities available for HTML and CSS development."> |
| |
| <meta name="keywords" content="NetBeans, IDE, integrated development environment, |
| Java, Java EE, open source, web technology, e-commerce"> |
| |
| <link rel="stylesheet" type="text/css" href="../../../../netbeans.css"> |
| <link rel="stylesheet" type="text/css" href="../../../../print.css" media="print"> |
| <link rel="stylesheet" type="text/css" href="../../../../lytebox.css" media="screen"> |
| <script type="text/javascript" src="../../../../images_www/js/lytebox-compressed.js"></script> |
| |
| <title>The NetBeans E-commerce Tutorial - Preparing the Page Views and Controller Servlet</title> |
| </head> |
| |
| <body> |
| |
| <!-- Copyright (c) 2009, 2010, Oracle and/or its affiliates. All rights reserved. --> |
| |
| <h1>The NetBeans E-commerce Tutorial - Preparing the Page Views and Controller Servlet</h1> |
| |
| <div style="margin-left:-3px"> |
| <div class="feedback-box margin-around float-left" style="margin-right:15px"> |
| |
| <h4>Tutorial Contents</h4> |
| |
| <ol> |
| <li><a href="intro.html">Introduction</a></li> |
| <li><a href="design.html">Designing the Application</a></li> |
| <li><a href="setup-dev-environ.html">Setting up the Development Environment</a></li> |
| <li><a href="data-model.html">Designing the Data Model</a></li> |
| <li><strong>Preparing the Page Views and Controller Servlet</strong> |
| |
| <ul style="margin: 5px 0 0 -2em"> |
| <li><a href="#createProjectFiles">Creating Project Files</a></li> |
| <li><a href="#implementHTML">Implementing HTML and CSS content</a></li> |
| <li><a href="#view">Placing JSP Pages in WEB-INF</a></li> |
| <li><a href="#jspf">Creating a Header and Footer</a></li> |
| <li><a href="#dd">Adding a Directive to the Deployment Descriptor</a></li> |
| <li><a href="#controller">Creating the Controller Servlet</a></li> |
| <li><a href="#implement">Implementing the Controller Servlet</a></li> |
| <li><a href="#seeAlso">See Also</a></li> |
| </ul></li> |
| |
| <li><a href="connect-db.html">Connecting the Application to the Database</a></li> |
| <li><a href="entity-session.html">Adding Entity Classes and Session Beans</a></li> |
| <li><a href="manage-sessions.html">Managing Sessions</a></li> |
| <li><a href="transaction.html">Integrating Transactional Business Logic</a></li> |
| <li><a href="language.html">Adding Language Support</a></li> |
| <li><a href="security.html">Securing the Application</a></li> |
| <li><a href="test-profile.html">Testing and Profiling</a></li> |
| <li><a href="conclusion.html">Conclusion</a></li> |
| </ol> |
| </div> |
| </div> |
| |
| <p><img src="../../../../images_www/articles/68/netbeans-stamp-68-69.png" class="stamp" |
| alt="Content on this page applies to NetBeans IDE, versions 6.8 and 6.9" |
| title="Content on this page applies to NetBeans IDE, versions 6.8 and 6.9"></p> |
| |
| <p>This tutorial unit demonstrates how to create project files in the IDE, and |
| introduces you to some of the facilities available for HTML and CSS development. |
| After creating necessary project files, you begin organizing the front-end of |
| the application. That is, you'll place JSP files in their proper locations |
| within the project structure, create a header and footer which will be applied |
| to all views, and set up the controller servlet to handle incoming requests.</p> |
| |
| <p>In this unit, you also create a web deployment descriptor (<code>web.xml</code> file) |
| for the application. You can use the deployment descriptor to specify configuration |
| information which is read by the server during deployment. Although the |
| <a href="http://jcp.org/en/jsr/detail?id=315" target="_blank">Servlet 3.0 Specification</a>, |
| included in Java EE 6, enables you to use class annotations in place of XML, you may |
| still require the deployment descriptor to configure certain elements of your application. |
| Specifically, in this unit you add directives for the header and footer and specify |
| which files they will be applied to.</p> |
| |
| <p>One of the goals of this tutorial unit is to create JSP pages that correspond to the |
| views specified in the application design. Referring back to the <a href="design.html#mockups">page |
| mockups</a> and <a href="design.html#business">process flow diagram</a>, you begin |
| implementing page layouts according to the mockups by creating <em>placeholders</em> |
| for all visual and functional components. This unit provides a guide for implementing |
| the layout of the welcome page. You can apply the outlined steps to create the other |
| pages on your own, or <a href="https://netbeans.org/projects/samples/downloads/download/Samples%252FJavaEE%252Fecommerce%252FAffableBean_snapshot1.zip">download |
| project snapshot 1</a>, which provides completed layouts for all pages.</p> |
| |
| <p>You can view a live demo of the application that you build in this tutorial: |
| <a href="http://services.netbeans.org/AffableBean/" target="_blank">NetBeans E-commerce |
| Tutorial Demo Application</a>.</p> |
| |
| <br style="clear:left"> |
| |
| <br> |
| <table> |
| <tbody> |
| <tr> |
| <th class="tblheader" scope="col">Software or Resource</th> |
| <th class="tblheader" scope="col">Version Required</th> |
| </tr> |
| <tr> |
| <td class="tbltd1"><a href="https://netbeans.org/downloads/index.html" target="_blank">NetBeans IDE</a></td> |
| <td class="tbltd1">Java bundle, 6.8 or 6.9</td> |
| </tr> |
| <tr> |
| <td class="tbltd1"><a href="http://www.oracle.com/technetwork/java/javase/downloads/index.html" target="_blank">Java Development Kit (JDK)</a></td> |
| <td class="tbltd1">version 6</td> |
| </tr> |
| <tr> |
| <td class="tbltd1"><a href="#glassFish">GlassFish server</a></td> |
| <td class="tbltd1">v3 or Open Source Edition 3.0.1</td> |
| </tr> |
| </tbody> |
| </table> |
| |
| <p><strong class="notes">Notes:</strong></p> |
| |
| <ul> |
| <li>The NetBeans IDE requires the Java Development Kit (JDK) to run properly. |
| If you do not have any of the resources listed above, the JDK should be |
| the first item that you download and install.</li> |
| |
| <li>The NetBeans IDE Java Bundle includes Java Web and EE technologies, which are |
| required for the application you build in this tutorial.</li> |
| |
| <li id="glassFish">The NetBeans IDE Java Bundle also includes the GlassFish server, |
| which you require for this tutorial. You could |
| <a href="http://glassfish.dev.java.net/public/downloadsindex.html" target="_blank">download |
| the GlassFish server independently</a>, but the version provided with the |
| NetBeans download has the added benefit of being automatically registered with |
| the IDE.</li> |
| </ul> |
| |
| |
| <br> |
| <h2 id="createProjectFiles">Creating Project Files</h2> |
| |
| <p>To create new files for your project, access the IDE's File wizard. You can click |
| the New File ( |
| <img src="../../../../images_www/articles/73/javaee/ecommerce/common/new-file-btn.png" |
| alt="New File button"> ) button, press Ctrl-N (⌘-N on Mac), or in the |
| Projects window, right-click the folder node that will contain the new file, |
| and choose New > [file-type]. In the following sub-sections, create JSP |
| pages and a stylesheet for the project.</p> |
| |
| <ul> |
| <li><a href="#jsp">Creating JSP Pages</a></li> |
| <li><a href="#css">Creating a Stylesheet</a></li> |
| </ul> |
| |
| <div class="indent"> |
| <h3 id="jsp">Creating JSP Pages</h3> |
| |
| <p>Begin working in the project by creating JSP pages that correspond to the views |
| displayed in the <a href="design.html#business">process flow diagram</a>.</p> |
| |
| <p>The <code>index.jsp</code> page that was generated by the IDE will become the |
| project's welcome page. Create JSP pages for the four remaining views and, for |
| now, place them in the project's webroot with <code>index.jsp</code>.</p> |
| |
| <ol> |
| <li>Click the New File ( |
| <img src="../../../../images_www/articles/73/javaee/ecommerce/common/new-file-btn.png" |
| alt="New File button"> ) button to open the File wizard.</li> |
| |
| <li>Select the Web category, then select JSP and click Next.</li> |
| |
| <li>Name the file '<code>category</code>'. Note that the Location field |
| is set to <code>Web Pages</code>, indicating that the file will be created |
| in the project's webroot. This corresponds to the project's <code>web</code> |
| folder, which you can later verify in the IDE's Files window.</li> |
| |
| <li>Click Finish. The IDE generates the new JSP page and opens it in the editor.</li> |
| |
| <li>Repeat steps 1 - 4 above to create the remaining <code>cart.jsp</code>, |
| <code>checkout.jsp</code>, <code>confirmation.jsp</code> pages. |
| |
| <br><br> |
| When you finish, your Projects window will look as follows: |
| |
| <br> |
| <img src="../../../../images_www/articles/73/javaee/ecommerce/page-views-controller/projects-win-views.png" |
| class="margin-around b-all" alt="Projects window displaying 'view' folder and JSP pages" |
| title="Views are contained in the 'WEB-INF/view/' folder"> |
| </li> |
| </ol> |
| |
| |
| <h3 id="css">Creating a Stylesheet</h3> |
| |
| <p>Create a CSS file to contain all styles specific to the application.</p> |
| |
| <ol> |
| <li>In the Projects window, right-click the Web Pages node and choose New > Folder.</li> |
| |
| <li>In the New Folder wizard, name the folder '<code>css</code>' and click Finish.</li> |
| |
| <li>Right-click the new <code>css</code> folder and choose New > Cascading |
| Style Sheet. (If the Cascading Style Sheet item is not listed, choose Other. |
| In the File wizard, select the Web category, then select Cascading Style Sheet |
| and choose Next.)</li> |
| |
| <li>Name the stylesheet <code>affablebean</code>, then click Finish. |
| |
| <br><br> |
| When you finish, you'll see the <code>affablebean.css</code> file displayed |
| in your Projects window. |
| |
| <br> |
| <img src="../../../../images_www/articles/73/javaee/ecommerce/page-views-controller/projects-win-css.png" |
| class="margin-around b-all" alt="Projects window displaying 'affablebean.css' stylesheet" |
| title="Projects window displays new 'css' folder and stylesheet"></li> |
| </ol> |
| </div> |
| |
| |
| <br> |
| <h2 id="implementHTML">Implementing HTML and CSS content</h2> |
| |
| <p>The purpose of this section is to design the page views so that they begin to |
| mirror the provided <a href="design.html#mockups">page mockups</a>. As such, |
| they'll serve as a scaffolding which you can use to insert dynamic content during |
| later stages of project development. To do so, you'll utilize the IDE's HTML |
| and CSS editors, along with several CSS support windows.</p> |
| |
| <p class="notes"><strong>Browser compatibility note:</strong> This tutorial uses |
| Firefox 3 and <em>does not</em> guarantee that page view markup is compatible |
| with other modern browsers. Naturally, when working with front-end web technologies |
| (HTML, CSS, JavaScript) you would need take measures to ensure that your web |
| pages render properly in the browsers and browser versions that you expect visitors |
| to your site will be using (typically Internet Explorer, Firefox, Safari, Chrome, |
| and Opera). When working in the IDE, you can set the browser you want your application |
| to open in. Choose Tools > Options (NetBeans > Preferences on Mac), and under |
| the General tab in the Options window, select the browser you want to use from |
| the Web Browser drop-down. The IDE detects browsers installed to their default |
| locations. If a browser installed on your computer is not displayed, click the |
| Edit button and register the browser manually.</p> |
| |
| <p>Preparing the display of your web pages is usually an iterative process which |
| you would fine-tune with regular feedback from the customer. The following steps |
| are designed to introduce you to the facilities provided by the IDE, and |
| demonstrate how to get started using the <a href="design.html#index">welcome |
| page mockup</a> as an example.</p> |
| |
| <ol> |
| <li>In the Projects window, double-click <code>index.jsp</code> to open it in the |
| editor.</li> |
| |
| <li>Begin by creating <code><div></code> tags for the main areas of the page. |
| You can create five tags altogether: four for main areas (header, footer, |
| left column, and right column), and the fifth to contain the others. Remove |
| any content within the <code><body></code> tags and replace with the |
| following. (New code is shown in <strong>bold</strong>.) |
| |
| <pre class="examplecode"> |
| <body> |
| <strong><div id="main"> |
| <div id="header"> |
| header |
| </div> |
| |
| <div id="indexLeftColumn"> |
| left column |
| </div> |
| |
| <div id="indexRightColumn"> |
| right column |
| </div> |
| |
| <div id="footer"> |
| footer |
| </div> |
| </div></strong> |
| </body></pre></li> |
| |
| <li>Add a reference to the stylesheet in the page's head, and change the title text. |
| |
| <pre class="examplecode"> |
| <head> |
| <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> |
| <strong><link rel="stylesheet" type="text/css" href="css/affablebean.css"></strong> |
| <title><strong>The Affable Bean</strong></title> |
| </head></pre></li> |
| |
| <li>Open the <code>affablebean.css</code> stylesheet in the editor. Begin creating |
| style rules for the <code><div></code> IDs you just created. |
| |
| <ul style="margin: 5px 0 0 -.7em"> |
| <li>Use the <code>width</code> and <code>height</code> properties to create |
| space for each area.</li> |
| |
| <li>Use the <code>background</code> property to discern the areas when you |
| view the page.</li> |
| |
| <li>In order to horizontally center the four areas in the page, you can include |
| <code>margin: 20px auto</code> to the <code>body</code> rule. (<code>20px</code> |
| applies to the top and bottom; <code>auto</code> creates equal spacing to |
| the left and right.) Then include <code>float: left</code> to the left and |
| right columns.</li> |
| |
| <li>The footer requires <code>clear: left</code> so that its top border displays |
| after the bottom borders of any left-floating areas above it (i.e., the left |
| and right columns).</li> |
| </ul> |
| |
| <pre class="examplecode"> |
| body { |
| font-family: Arial, Helvetica, sans-serif; |
| width: 850px; |
| text-align: center; |
| margin: 20px auto; |
| } |
| |
| #main { background: #eee } |
| |
| #header { |
| height: 250px; |
| background: #aaa; |
| } |
| |
| #footer { |
| height: 60px; |
| clear: left; |
| background: #aaa; |
| } |
| |
| #indexLeftColumn { |
| height: 400px; |
| width: 350px; |
| float: left; |
| background: #ccc; |
| } |
| |
| #indexRightColumn { |
| height: 400px; |
| width: 500px; |
| float: left; |
| background: #eee; |
| }</pre></li> |
| |
| <li>Click the Run Project ( |
| <img src="../../../../images_www/articles/73/javaee/ecommerce/common/run-project-btn.png" |
| alt="Run Project button"> ) button in the IDE's main toolbar. Project files that contain |
| changes are automatically saved, any Java code in the project compiles, the project is |
| packaged and deployed to GlassFish, and your browser opens to display the current state |
| of the welcome page. |
| |
| <br> |
| <img src="../../../../images_www/articles/73/javaee/ecommerce/page-views-controller/index-page.png" |
| class="margin-around b-all" alt="Welcome page displayed in browser" style="width:688px" |
| title="Run the project to view the current state of pages"></li> |
| |
| <li>Now, begin creating placeholders for page components within each of the four visible areas. |
| Start with the header. Reviewing the <a href="design.html#index">welcome page mockup</a>, the |
| header should contain the following components: |
| |
| <ul style="margin: 5px 0 0 -.7em"> |
| <li>logo</li> |
| <li>logo text</li> |
| <li>shopping cart widget</li> |
| <li>language toggle</li> |
| </ul> |
| |
| Make the following changes to the <code>index.jsp</code> file. (New code shown |
| in <strong>bold</strong>.) |
| |
| <pre class="examplecode"> |
| <div id="header"> |
| <strong><div id="widgetBar"> |
| |
| <div class="headerWidget"> |
| [ language toggle ] |
| </div> |
| |
| <div class="headerWidget"> |
| [ shopping cart widget ] |
| </div> |
| |
| </div> |
| |
| <a href="#"> |
| <img src="#" id="logo" alt="Affable Bean logo"> |
| </a> |
| |
| <img src="#" id="logoText" alt="the affable bean"></strong> |
| </div></pre> |
| |
| In the above code, you use a <code><div id="widgetBar"></code> |
| element to contain the the language toggle and shopping cart widget. |
| |
| <br><br> |
| <div class="feedback-box float-left" style="width: 683px;"> |
| |
| <h3>NetBeans HTML Editor Support</h3> |
| |
| <p>When you work in the editor, take advantage of the IDE's HTML support. |
| Aside from typical syntax highlighting that lets you differentiate |
| between tags, attributes, attribute values, and text, there are plenty |
| of other features.</p> |
| |
| <p>When typing tags and attributes in the editor, you can invoke code-completion |
| and documentation support by pressing Ctrl-Space. The IDE presents a list |
| of suggestions which you can choose from, as well as a documentation window |
| that defines the selected item and provides code examples.</p> |
| |
| <img src="../../../../images_www/articles/73/javaee/ecommerce/page-views-controller/documentation-popup.png" |
| class="margin-around b-all" title="Press Ctrl-Space to view code completion and documentation windows" |
| alt="Code completion and documentation windows displayed in editor"/> |
| |
| <p>The IDE detects errors in your code and provides you with warnings, error |
| messages, and in some cases, suggestions. Warning messages are displayed |
| in yellow, while errors are shown in red. You can hover your pointer over |
| a designated area to view the message in a tooltip.</p> |
| |
| <img src="../../../../images_www/articles/73/javaee/ecommerce/page-views-controller/html-hint.png" |
| class="margin-around b-all" title="Hover your pointer to view a tooltip warning" |
| alt="HTML warning displayed in editor"/> |
| |
| <p>You can also take advantage of numerous keyboard shortcuts. Choose Help > |
| Keyboard Shortcuts Card from the main menu.</p> |
| </div> |
| <br style="clear: both;"/></li> |
| |
| <li>In the stylesheet, create rules for the new IDs and classes. Add the following rules |
| beneath the <code>header</code> rule. (New code shown in <strong>bold</strong>.) |
| |
| <pre class="examplecode"> |
| #header { |
| height: 250px; |
| background: #aaa; |
| } |
| |
| <strong>#logo { |
| height: 155px; |
| width: 155px; |
| float: left; |
| margin-left: 30px; |
| margin-top: -20px; |
| } |
| |
| #logoText { |
| float: left; |
| margin: 20px 0 0 70px; |
| /* font styles apply to text within alt tags */ |
| font-family: 'American Typewriter', Courier, monospace; |
| font-size: 50px; |
| color: #333; |
| } |
| |
| #widgetBar { |
| height: 50px; |
| width: 850px; |
| float: right; |
| background: #ccc; |
| } |
| |
| .headerWidget { |
| width: 194px; |
| margin: 20px 2px; |
| font-size: small; |
| float: right; |
| line-height: 25px; |
| background: #aaa; |
| }</strong></pre> |
| |
| For the <code>logo</code> rule, you apply <code>margin-left</code> and |
| <code>margin-top</code> properties to position the component on the page. |
| |
| <br><br> |
| If there are properties in the above code that you are unfamiliar with, |
| position your cursor on the given property and press Ctrl-Space to invoke |
| a pop-up window that provides documentation support. |
| |
| <br> |
| <img src="../../../../images_www/articles/73/javaee/ecommerce/page-views-controller/css-doc-support.png" |
| class="margin-around b-all" alt="Documentation window for CSS support" |
| title="Press Ctrl-Space on a CSS property to invoke documentation support"> |
| |
| <br> |
| <p class="tips">To see how a property is affecting your page, you can comment |
| it out, then refresh the page in the browser. To comment out code, position |
| your cursor on a line, or highlight a block of code, then press Ctrl-/ |
| (⌘-/ on Mac).</p></li> |
| |
| <li>Save (Ctrl-S; ⌘-S on Mac) the <code>index.jsp</code> and <code>affablebean.css</code> |
| files, then switch to your browser and refresh the page to view its current state. |
| |
| <br><br> |
| <p class="notes"><strong>Note:</strong> The IDE's 'Deploy on Save' facility is automatically |
| activated for Java web projects. This means that every time you save a file, the file is |
| automatically compiled (i.e., if it is a Java class or JSP page) and the project is newly |
| packaged and deployed to your server. Therefore, when you make HTML or CSS changes, you |
| don't need to explicitly rerun the project to view the updated version in a browser. Simply |
| save your file(s), then switch to the browser and refresh the page.</p> |
| |
| <img src="../../../../images_www/articles/73/javaee/ecommerce/page-views-controller/index-page2.png" |
| class="margin-around b-all" alt="Welcome page displayed in browser" style="width:688px" |
| title="Placeholders for header are visible when running project"> |
| |
| <br> |
| By following the previous steps, you are probably able to see a pattern emerging. |
| For each area on the page, you perform three steps. |
| |
| <ol style="list-style:lower-alpha; margin-top:5px"> |
| <li>Create the structure in HTML.</li> |
| <li>Create a set of styles to define the appearance.</li> |
| <li>View the page to examine the results of your changes.</li> |
| </ol> |
| |
| Following these three steps, let's implement the components in the remaining areas.</li> |
| |
| <li>Create placeholders for components in the right column. According to the |
| <a href="design.html#index">welcome page mockup</a>, the right column contains |
| four evenly-spaced boxes. |
| |
| <br><br> |
| Create the structure for the four boxes. Insert the following code between |
| the <code><div id="indexRightColumn"></code> tags. (New code shown |
| in <strong>bold</strong>.) |
| |
| <pre class="examplecode"> |
| <div id="indexRightColumn"> |
| <strong><div class="categoryBox"> |
| <a href="#"> |
| <span class="categoryLabelText">dairy</span> |
| </a> |
| </div> |
| <div class="categoryBox"> |
| <a href="#"> |
| <span class="categoryLabelText">meats</span> |
| </a> |
| </div> |
| <div class="categoryBox"> |
| <a href="#"> |
| <span class="categoryLabelText">bakery</span> |
| </a> |
| </div> |
| <div class="categoryBox"> |
| <a href="#"> |
| <span class="categoryLabelText">fruit & veg</span> |
| </a> |
| </div></strong> |
| </div></pre></li> |
| |
| <li>Add style rules to <code>affablebean.css</code> for the new <code>categoryBox</code> |
| and <code>categoryLabelText</code> classes. (New code shown in <strong>bold</strong>.) |
| |
| <pre class="examplecode"> |
| #indexRightColumn { |
| height: 400px; |
| width: 500px; |
| float: left; |
| background: #eee; |
| } |
| |
| <strong>.categoryBox { |
| height: 176px; |
| width: 212px; |
| margin: 21px 14px 6px; |
| float: inherit; |
| background: #ccc; |
| } |
| |
| .categoryLabelText { |
| line-height: 150%; |
| font-size: x-large; |
| }</strong></pre> |
| |
| <div class="feedback-box float-left" style="width: 683px;"> |
| |
| <h3>NetBeans CSS Support</h3> |
| |
| <p>When working in stylesheets, there are two windows that can be |
| particularly helpful. The CSS Preview enables you to view style |
| rules as they are rendered in a browser. To open the CSS Preview, |
| choose Window > Other > CSS Preview from the main menu. |
| When you place your cursor within a style rule in the editor, |
| the CSS Preview automatically refreshes to display sample text |
| according to the properties defined in the rule.</p> |
| |
| <img src="../../../../images_www/articles/73/javaee/ecommerce/page-views-controller/css-preview.png" |
| class="margin-around b-all" alt="CSS Preview" |
| title="Use the CSS Preview to view rendered style rules"> |
| |
| <p>The CSS Style Builder is useful if you do not like to code style |
| rules by hand. To open the CSS Style Builder, choose Window > |
| Other > CSS Style Builder from the main menu. Using this interface, |
| you can construct rules by choosing properties and values from a |
| graphical interface.</p> |
| |
| <img src="../../../../images_www/articles/73/javaee/ecommerce/page-views-controller/style-builder.png" |
| class="margin-around b-all" alt="CSS Style Builder" |
| title="Use the CSS Style Builder to construct style rules"> |
| |
| <p>Like the CSS Preview, the Style Builder is synchronized with the editor. |
| When you make a selection in the Style Builder, the style rule is |
| automatically updated in the editor. Likewise, when you type changes |
| into the editor, the selections in the Style Builder are instantly |
| updated.</p> |
| </div> |
| <br style="clear: both;"/></li> |
| |
| <li>Save (Ctrl-S; ⌘-S on Mac) the <code>index.jsp</code> and <code>affablebean.css</code> |
| files, then switch to your browser and refresh the page to view its current state. |
| |
| <br> |
| <img src="../../../../images_www/articles/73/javaee/ecommerce/page-views-controller/index-page3.png" |
| class="margin-around b-all" alt="Welcome page displayed in browser" style="width:688px" |
| title="Placeholders for header and right-column are visible when running project"> |
| |
| <li>The left column and footer only require placeholders for static text, so let's |
| implement both simultaneously. |
| |
| <br><br> |
| Insert the following code between the <code><div id="indexLefttColumn"></code> |
| and <code><div id="footer"></code> tags. (New code shown in <strong>bold</strong>.) |
| |
| <pre class="examplecode"> |
| <div id="indexLeftColumn"> |
| <strong><div id="welcomeText"> |
| <p>[ welcome text ]</p> |
| </div></strong> |
| </div> |
| |
| ... |
| |
| <div id="footer"> |
| <strong><hr> |
| <p id="footerText">[ footer text ]</p></strong> |
| </div></pre></li> |
| |
| <li>Make changes to the <code>affablebean.css</code> stylesheet. It's not necessary |
| to account for all new IDs and classes - you can fine-tune the appearance at a |
| later point when you receive text and images from the customer. |
| |
| <br><br> |
| The horizontal rule (<code><hr></code>) tag runs the full length of its |
| containing element (<code><div id="footer"</code>). Therefore, |
| to shorten it in accordance with the mockup image, you can adjust the width of |
| <code><div id="footer"></code>. (New code shown in <strong>bold</strong>.) |
| |
| <pre class="examplecode"> |
| #footer { |
| height: 60px; |
| <strong>width: 350px;</strong> |
| clear: left; |
| background: #aaa; |
| } |
| |
| <strong>hr { |
| border: 0; |
| background-color: #333; |
| height: 1px; |
| margin: 0 25px; |
| width: 300px; |
| }</strong></pre></li> |
| |
| <li>Save (Ctrl-S; ⌘-S on Mac) the <code>index.jsp</code> and <code>affablebean.css</code> |
| files, then switch to your browser and refresh the page to view its current state. |
| |
| <br> |
| <img src="../../../../images_www/articles/73/javaee/ecommerce/page-views-controller/index-page4.png" |
| class="margin-around b-all" alt="Welcome page displayed in browser" style="width:688px" |
| title="Placeholders for left column and footer are visible" id="welcome-page"> |
| |
| <br> |
| The welcome page is complete. You've created all necessary placeholders for |
| components that will exist on the page. |
| </li> |
| </ol> |
| |
| <p>You've now completed the initial design of the application's welcome page. All |
| placeholders for page components exist. Later in the tutorial, when you begin |
| to apply dynamic logic to the page views, you can simply plug JSTL and EL |
| expressions into these placeholders.</p> |
| |
| <p>The task remains for you to implement the initial design for the other pages |
| based on the <a href="design.html#mockups">mockups</a>. To accomplish this, |
| follow the pattern outlined above, namely:</p> |
| |
| <ol style="margin: 5px 0 0 -.7em"> |
| <li>Create <code><div></code> tags for the main page areas.</li> |
| <li>Iterate through each area and perform three steps: |
| |
| <ol style="margin: 5px 0 0 -1.4em; list-style-type: lower-alpha"> |
| <li>Create the structure in HTML.</li> |
| <li>Create a set of styles to define the appearance.</li> |
| <li>View the page to examine the results of your changes.</li> |
| </ol></li> |
| </ol> |
| |
| <p>Be sure to take advantage of the HTML and CSS support that the IDE provides for you. |
| Some <a href="#tipsTricks">tips and tricks</a> are outlined below. If you just want |
| to grab the code for the remaining pages and proceed with the tutorial, you can |
| <a href="https://netbeans.org/projects/samples/downloads/download/Samples%252FJavaEE%252Fecommerce%252FAffableBean_snapshot1.zip">download |
| snapshot 1 of the <code>AffableBean</code> project</a>. Images of initial mockup |
| implementations for the remaining pages are included here.</p> |
| |
| <div class="indent"> |
| <h4 id="categoryPage">category page</h4> |
| |
| <img src="../../../../images_www/articles/73/javaee/ecommerce/page-views-controller/category-page.png" |
| class="margin-around b-all" alt="Category page displayed in browser" style="width:708px" |
| title="Placeholders implemented for category page"> |
| <br><br> |
| |
| <h4 id="cartPage">cart page</h4> |
| |
| <img src="../../../../images_www/articles/73/javaee/ecommerce/page-views-controller/cart-page.png" |
| class="margin-around b-all" alt="Cart page displayed in browser" style="width:708px" |
| title="Placeholders implemented for cart page"> |
| <br><br> |
| |
| <h4 id="checkoutPage">checkout page</h4> |
| |
| <img src="../../../../images_www/articles/73/javaee/ecommerce/page-views-controller/checkout-page.png" |
| class="margin-around b-all" alt="Checkout page displayed in browser" style="width:708px" |
| title="Placeholders implemented for checkout page"> |
| <br><br> |
| |
| <h4>confirmation page</h4> |
| |
| <img src="../../../../images_www/articles/73/javaee/ecommerce/page-views-controller/confirmation-page.png" |
| class="margin-around b-all" alt="Confirmation page displayed in browser" style="width:708px" |
| title="Placeholders implemented for checkout page"> |
| <br><br> |
| |
| <p class="notes"><strong>Note:</strong> The background colors for each page area only |
| serve to help you position elements while developing the application. Eventually, |
| you'll want to remove them from the stylesheet and apply a background color more |
| suitable for the application. You can do this by adjusting the background rule for |
| the <code>main</code> class:</p> |
| |
| <div class="indent"> |
| <pre class="examplecode">#main { background: #f7f7e9 }</pre> |
| </div> |
| |
| |
| <h3 id="tipsTricks">Tips and Tricks</h3> |
| |
| <p>The IDE's editor provides many facilities that help you to work more efficiently. |
| If you familiarize yourself with keyboard shortcuts and buttons in the editor |
| toolbar, you can increase your productivity. The following list of tips applies |
| to the editor for HTML and CSS files. To view more keyboard shortcuts, open the |
| IDE's Keyboard Shortcuts Card by choosing Help > Keyboard Shortcuts Card from |
| the main menu.</p> |
| |
| <ul style="margin: 5px 0 0 -.7em"> |
| <li><strong>Code completion:</strong> When you type in tags and attributes, suggestions |
| for code completion automatically appear in a pop-up box. Pressing Enter completes |
| the suggested tag.</li> |
| |
| <li><strong>Format your code:</strong> Right-click in the editor and choose Format.</li> |
| |
| <li><strong>Toggle line numbers:</strong> Right-click in the left margin and choose |
| Show Line Numbers.</li> |
| |
| <li><strong>Find occurrences:</strong> Highlight a block of text, and press Ctrl-F |
| (⌘-F on Mac). All matches become highlighted in the editor. To toggle |
| highlighting, press the Toggle Highlight Search ( |
| <img src="../../../../images_www/articles/73/javaee/ecommerce/page-views-controller/toggle-highlight.png" |
| alt="Toggle Highlight Search button" class="b-all"> ) button (Ctrl-Shift-H) |
| in the editor's toolbar.</li> |
| |
| <li><strong>Create a bookmark:</strong> Press the Toggle Bookmark ( |
| <img src="../../../../images_www/articles/73/javaee/ecommerce/page-views-controller/toggle-bookmark.png" |
| alt="Toggle Bookmark button" class="b-all"> ) button (Ctrl-Shift-M) to |
| create a bookmark in the editor's left margin. Wherever you are in the file, |
| you can then jump to the bookmark by pressing the Previous/Next Bookmark |
| buttons in the editors's toolbar.</li> |
| |
| <li><strong>Copy a code snippet up or down:</strong> Highlight a code snippet, |
| then press Ctrl-Shift-Up/Down.</li> |
| |
| <li><strong>Highlight opening and closing tags:</strong> Place your cursor on either |
| the opening or closing tag, and both are highlighted in yellow.</li> |
| </ul> |
| </div> |
| |
| |
| <br> |
| <h2 id="view">Placing JSP Pages in WEB-INF</h2> |
| |
| <p>Looking back at the <a href="design.html#mockups">page mockups</a> that were created, |
| you can see that the <a href="design.html#index">welcome page</a> should look the same |
| whenever it is requested, for whomever requests it. That is, the content that displays |
| on the welcome page is not determined by a user's <em>session</em>. (Sessions are |
| discussed in Unit 8, <a href="manage-sessions.html">Managing Sessions</a>.) Notice |
| however that all other pages do need some form of user-specific information to display |
| properly. For example, the <a href="design.html#category">category page</a> requires |
| that the user select a category in order to display, and the <a href="design.html#cart">cart |
| page</a> needs to know all items currently held in a shopper's cart. These pages will |
| not render properly if the server isn't able to associate user-specific information with |
| an incoming request. Therefore, we do not want these pages to be accessed directly from |
| a browser's address bar. The project's <code>WEB-INF</code> folder can be used for this |
| purpose: any resources contained in the <code>WEB-INF</code> folder are not directly |
| accessible from a browser.</p> |
| |
| <p>Create a new folder named <code>view</code>, and place it in the <code>WEB-INF</code> |
| folder. Then move all JSP pages other than the welcome page into this new folder.</p> |
| |
| <ol> |
| <li>In the Projects window, right-click the WEB-INF node and choose New > Folder.</li> |
| |
| <li>In the New Folder wizard, name the folder <code>view</code> and click Finish. |
| Notice that a new folder node appears in the Projects window.</li> |
| |
| <li>Move the <code>category.jsp</code>, <code>cart.jsp</code>, <code>checkout.jsp</code>, |
| and <code>confirmation.jsp</code> pages into the <code>view</code> folder. |
| |
| <br><br> |
| You can do this by clicking on <code>cart.jsp</code> to select it, then Shift-clicking |
| on <code>confirmation.jsp</code>. This selects the four files. Then, with the four |
| files selected, click and drag them into the <code>WEB-INF/view</code> folder. |
| |
| <br> |
| <img src="../../../../images_www/articles/73/javaee/ecommerce/page-views-controller/view-folder.png" |
| class="margin-around b-all" alt="Projects window displaying JSP pages being dragged into 'view' folder" |
| title="Click and drag the JSP pages into the 'WEB-INF/view/' folder"></li> |
| </ol> |
| |
| <p>To demonstrate that these pages are no longer accessible from a browser, click the |
| Run Project ( |
| <img src="../../../../images_www/articles/73/javaee/ecommerce/common/run-project-btn.png" |
| alt="Run Project button"> ) button to run the project. When the application displays in |
| your browser, enter the full path to any of these files in the address bar. For example, |
| type in:</p> |
| |
| <div class="indent"> |
| <pre class="examplecode" style="width:700px">http://localhost:8080/AffableBean/WEB-INF/view/category.jsp</pre> |
| </div> |
| |
| <p>You receive an HTTP Status 404 message, indicating that the resource is not available.</p> |
| |
| |
| <br> |
| <h2 id="jspf">Creating a Header and Footer</h2> |
| |
| <p>Looking at the <a href="design.html#mockups">page mockups</a>, it is easy to see |
| that all of the five views share identical content; at the top, they contain the |
| company logo, a language toggle, and other widgets associated with shopping cart |
| functionality. At the bottom, they contain some text with Privacy Policy and |
| Contact links. Rather than including this code in each page source file, we can |
| factor it out into two JSP fragments: a header and a footer. We'll then include |
| the fragment files into page views whenever they need to be rendered.</p> |
| |
| <p>For these fragments, let's create a new folder named <code>jspf</code>, and place |
| it within <code>WEB-INF</code>.</p> |
| |
| <ol> |
| <li>In the Projects window, right-click the WEB-INF node and choose New > Folder.</li> |
| |
| <li>In the New Folder wizard, name the folder <code>jspf</code> and click Finish. |
| |
| <br><br> |
| <p class="tips">Menu items provided by the IDE are often context-sensitive. |
| For example, because you right-clicked the WEB-INF node, when the New Folder |
| wizard displayed, <code>web/WEB-INF</code> was automatically entered in the |
| Parent Folder field. Likewise, when you right-click a node in the Projects |
| window and choose New, the list of file types is partially determined by |
| your previous selections.</p> |
| </li> |
| |
| <li>Create two JSP segments: <code>header.jspf</code> and <code>footer.jspf</code>. |
| To do so, right-click the newly created <code>jspf</code> folder and choose New |
| > JSP. In the New JSP wizard, enter the file name, and under Options, select |
| the Create as a JSP Segment option, then click Finish. |
| |
| <br><br> |
| When you finish, you'll see <code>header.jspf</code> and <code>footer.jspf</code> |
| displayed in your Projects window: |
| |
| <br> |
| <img src="../../../../images_www/articles/73/javaee/ecommerce/page-views-controller/projects-win-jspf.png" |
| class="margin-around b-all" alt="Projects window displaying JSP fragments" |
| title="Header and footer JSP fragments are displayed in the project"> |
| |
| <br><br> |
| Now, you can copy the header code from any of the JSP pages and paste it into the |
| <code>header.jspf</code> file. Likewise, you can copy the footer code from any of |
| the JSP pages and paste it into the <code>footer.jspf</code> file. When you finish |
| this task, you can remove the header and footer code from all of the JSP pages.</li> |
| |
| <li>Copy the header code from any of the JSP pages and paste it into the |
| <code>header.jspf</code> file. The header should include the page doctype |
| and the opening <code><html></code>, <code><head></code>, and |
| <code><body></code> tags through to the closing tag for the |
| <code><div id="header"></code> element. Be sure to include |
| placeholders for the shopping cart widget, language toggle, and 'proceed to |
| checkout' button used along the top of page views. After you paste code into |
| <code>header.jspf</code>, the file will look as follows. |
| |
| <pre class="examplecode"> |
| <%@page contentType="text/html" pageEncoding="UTF-8"%> |
| <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" |
| "http://www.w3.org/TR/html4/loose.dtd"> |
| |
| <html> |
| <head> |
| <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> |
| <link rel="stylesheet" type="text/css" href="css/affablebean.css"> |
| <title>The Affable Bean</title> |
| </head> |
| <body> |
| <div id="main"> |
| <div id="header"> |
| <div id="widgetBar"> |
| |
| <div class="headerWidget"> |
| [ language toggle ] |
| </div> |
| |
| <div class="headerWidget"> |
| [ checkout button ] |
| </div> |
| |
| <div class="headerWidget"> |
| [ shopping cart widget ] |
| </div> |
| |
| </div> |
| |
| <a href="#"> |
| <img src="#" id="logo" alt="Affable Bean logo"> |
| </a> |
| |
| <img src="#" id="logoText" alt="the affable bean"> |
| </div></pre></li> |
| |
| <li>Copy the footer code from any of the JSP pages and paste it into the <code>footer.jspf</code> |
| file. The footer code should include the <code><div id="footer"></code> |
| element, through to the closing <code><html></code> tag. After you paste code into |
| <code>footer.jspf</code>, the file will look as follows. |
| |
| <pre class="examplecode"> |
| <div id="footer"> |
| <hr> |
| <p id="footerText">[ footer text ]</p> |
| </div> |
| </div> |
| </body> |
| </html></pre></li> |
| |
| <li>Remove the header and footer code from all five JSP pages (<code>index.jsp</code>, |
| <code>category.jsp</code>, <code>cart.jsp</code>, <code>checkout.jsp</code>, |
| and <code>confirmation.jsp</code>).</li> |
| </ol> |
| |
| |
| <br> |
| <h2 id="dd">Adding a Directive to the Deployment Descriptor</h2> |
| |
| <p>So far, you've placed views in their proper location and have factored out |
| common header and footer code into the <code>header.jspf</code> and |
| <code>footer.jspf</code> files. The application still needs to know which |
| pages the header and footer files will be applied to. You could add |
| <code><jsp:include></code> tags to each of the page views. Doing so |
| however would just reintroduce the code repetition which we've just made |
| efforts to eliminate. An alternative solution would be to create a <code>web.xml</code> |
| deployment descriptor, and add a JSP Property Group directive to specify |
| which page views the header and footer fragments should apply to.</p> |
| |
| <ol> |
| <li>Press Ctrl-N (⌘-N on Mac) to open the New File wizard. Select the Web |
| category, then under File Types, select Standard Deployment Descriptor (web.xml).</li> |
| |
| <li>Click Next. Note that the file is named <code>web.xml</code>, and that the |
| wizard will place it in the project's <code>WEB-INF</code> directory upon completion.</li> |
| |
| <li>Click Finish. The <code>web.xml</code> file is created and added to the project. |
| The IDE's graphical interface for the deployment descriptor opens in the editor. |
| |
| <br><br> |
| The interface is categorized by the areas that can be configured in a web application. |
| These areas are displayed as tabs in the editor toolbar, and include topics such |
| as Servlets, Filters, References, and Security. The XML tab displays the entire |
| source code for the file. Any changes you make in the graphical interface will |
| cause immediate updates to the deployment descriptor's source code, which you |
| can verify by switching to the XML tab. This is demonstrated in the following steps.</li> |
| |
| <li>Click the Pages tab, then click the Add JSP Property Group button. The |
| Add JSP Property Group dialog opens.</li> |
| |
| <li>Type in '<code>header and footer settings</code>' for the Description field. |
| Leave Display Name blank. Both the Display Name and Description fields are |
| optional.</li> |
| |
| <li>For URL Patterns, specify the paths to the five views. Type in |
| '<code>/index.jsp</code>' and '<code>/WEB-INF/view/*</code>'. Separate the |
| two paths with a comma. (The '<code>*</code>' is a wildcard that represents |
| all files within the given folder.) |
| |
| <br> |
| <img src="../../../../images_www/articles/73/javaee/ecommerce/page-views-controller/add-jsp-prop-group-dialog.png" |
| class="margin-around b-all" alt="Add JSP Property Group dialog" |
| title="Use the Add JSP Property Group dialog to specify <jsp-config> tags in the deployment descriptor"></li> |
| |
| <li>Click OK. An entry is added to the JSP Properties Groups category in the Pages tab.</li> |
| |
| <li>Switch back to the XML tab. Notice that the following code has been added to |
| the deployment descriptor. |
| |
| <pre class="examplecode"> |
| <jsp-config> |
| <jsp-property-group> |
| <description>header and footer settings</description> |
| <url-pattern>/index.jsp</url-pattern> |
| <url-pattern>/WEB-INF/view/*</url-pattern> |
| </jsp-property-group> |
| </jsp-config></pre> |
| |
| <p class="notes"><strong>Note:</strong> You may need to add carriage returns |
| to the code so that it displays on multiple lines. You can right-click in |
| the editor and choose Format (Alt-Shift-F; Ctrl-Shift-F on Mac) to have the |
| code properly indented.</p></li> |
| |
| <li>Switch to the Pages tab again, and in the Include Preludes and Include Codas |
| fields, enter the paths to the <code>header.jspf</code> and <code>footer.jspf</code> |
| files, respectively. You can click the Browse button and navigate to the files |
| in the provided dialog. |
| |
| <br> |
| <a href="../../../../images_www/articles/73/javaee/ecommerce/page-views-controller/jsp-prop-groups.png" |
| title="Enter paths to the header and footer in the JSP Property Group" rel="lytebox"> |
| <img src="../../../../images_www/articles/73/javaee/ecommerce/page-views-controller/jsp-prop-groups-small.png" |
| class="margin-around b-all" alt="JSP Property Group shown under Pages tab of web.xml" title="Click to enlarge"></a></li> |
| |
| <li>Switch back to the XML tab. Note that the following code has been added. |
| (Changes in <strong>bold</strong>.) |
| |
| <pre class="examplecode"> |
| <jsp-config> |
| <jsp-property-group> |
| <description>header and footer settings</description> |
| <url-pattern>/index.jsp</url-pattern> |
| <url-pattern>/WEB-INF/view/*</url-pattern> |
| <strong><include-prelude>/WEB-INF/jspf/header.jspf</include-prelude> |
| <include-coda>/WEB-INF/jspf/footer.jspf</include-coda></strong> |
| </jsp-property-group> |
| </jsp-config></pre> |
| |
| The above directive specifies that for all files found within the |
| given <code>url-pattern</code>s, the <code>header.jspf</code> file |
| will be prepended, and the <code>footer.jspf</code> file appended. |
| |
| <br><br> |
| <p class="tips">To view the definitions of the above tags, as well as |
| all tags available to you in the web deployment descriptor, consult the |
| <a href="http://jcp.org/en/jsr/detail?id=315" target="_blank">Servlet |
| Specification</a>.</p></li> |
| |
| <li>Run the application again (press F6; fn-F6 on Mac). You've already removed |
| the header and footer code from the <code>index.jsp</code> file, so you can |
| determine whether it is automatically being added when the file is requested. |
| |
| <br><br> |
| You will see that the <a href="#welcome-page">welcome page displays as it |
| did previously</a>, with header and footer content included.</li> |
| </ol> |
| |
| |
| <br> |
| <h2 id="controller">Creating the Controller Servlet</h2> |
| |
| <p>The controller servlet handles incoming requests by initiating any actions |
| needed to generate the model for the request, then forwarding the request |
| to the appropriate view. For a visual representation, refer back to the |
| <a href="design.html#mvcDiagram">MVC diagram for the AffableBean project</a>.</p> |
| |
| <p>The IDE provides a Servlet wizard that enables you to define the servlet component |
| in a web application either by including the <code>@WebServlet</code> annotation |
| in the generated class, or by adding the necessary directives to the deployment |
| descriptor. In the following steps, you create the <code>ControllerServlet</code> |
| and define it in the application context using the |
| <a href="http://java.sun.com/javaee/6/docs/api/javax/servlet/annotation/WebServlet.html" target="_blank"><code>@WebServlet</code></a> |
| annotation.</p> |
| |
| <ol> |
| <li>In the Projects window, right-click the <code>AffableBean</code> project |
| node and choose New > Servlet.</li> |
| |
| <li>In the wizard, type <code>ControllerServlet</code> in the Class Name field.</li> |
| |
| <li>In the Package field, type <code>controller</code>. (The new package is |
| automatically created when you complete the wizard.) |
| |
| <br> |
| <img src="../../../../images_www/articles/73/javaee/ecommerce/page-views-controller/servlet-wizard.png" |
| class="margin-around b-all" alt="Servlet wizard" |
| title="Use the Servlet wizard to create servlets for your project"></li> |
| |
| <li>Click Next. Step 3 of the wizard lets you configure the servlet. Of primary |
| importance are the URL patterns that you need to specify. The patterns identify |
| the URLs that invoke the servlet. For example, if you enter '<code>/category</code>', |
| you are directing the servlet to handle a request that appears as follows. |
| |
| <pre class="examplecode">http://localhost/AffableBean<strong>/category</strong></pre> |
| |
| The URL patterns should correspond to the views and actions that a user can initiate. |
| Looking at the <a href="design.html#index">welcome page mockup</a>, a user should |
| be able to select a category. We can therefore associate the <code>/category</code> |
| URL with the action of clicking on a category image. Likewise, in the |
| <a href="design.html#category">category page</a>, users should be able to |
| add an item to the shopping cart. We can therefore specify <code>/addToCart</code>.</li> |
| |
| <li>In the URL Pattern(s) field, type in '<code>/category, /addToCart, /viewCart</code>'. |
| Patterns are separated by commas. You can add more patterns directly in the servlet |
| class once it's created. |
| |
| <br> |
| <img src="../../../../images_www/articles/73/javaee/ecommerce/page-views-controller/servlet-wizard2.png" |
| class="margin-around b-all" alt="Servlet wizard, Step 3: Configure Servlet Deployment" |
| title="Configure servlet deployment directly in the wizard"></li> |
| |
| <li>Click Finish. The IDE generates the <code>ControllerServlet</code> and opens it |
| in the editor. The servlet and URL patterns are included in the <code>@WebServlet</code> |
| annotation that appears above the class signature. |
| |
| <pre class="examplecode"> |
| <strong>@WebServlet(name="ControllerServlet", urlPatterns={"/category", "/addToCart", "/viewCart"})</strong> |
| public class ControllerServlet extends HttpServlet {</pre> |
| |
| In the previous step, if you had chosen the '<code>Add information to deployment |
| descriptor (web.xml)</code>' option in the wizard, the following markup would have |
| been generated in the application's <code>web.xml</code> file instead. |
| |
| <pre class="examplecode"> |
| <servlet> |
| <servlet-name>ControllerServlet</servlet-name> |
| <servlet-class>controller.ControllerServlet</servlet-class> |
| </servlet> |
| <servlet-mapping> |
| <servlet-name>ControllerServlet</servlet-name> |
| <url-pattern>/category</url-pattern> |
| </servlet-mapping> |
| <servlet-mapping> |
| <servlet-name>ControllerServlet</servlet-name> |
| <url-pattern>/addToCart</url-pattern> |
| </servlet-mapping> |
| <servlet-mapping> |
| <servlet-name>ControllerServlet</servlet-name> |
| <url-pattern>/viewCart</url-pattern> |
| </servlet-mapping></pre></li> |
| |
| <li>Add other URL patterns directly to the <code>@WebServlet</code> annotation's |
| <code>urlPatterns</code> element. The application requires more URL patterns |
| for other actions and views. You can type in the following patterns: |
| |
| <ul class="toc" style="margin: 5px 0 0 -1em"> |
| <li><code>/updateCart</code></li> |
| <li><code>/checkout</code></li> |
| <li><code>/purchase</code></li> |
| <li><code>/chooseLanguage</code></li> |
| </ul> |
| |
| Be sure to separate each pattern with a comma. You can also reformat the |
| annotation as follows: |
| |
| <pre class="examplecode"> |
| @WebServlet(name="ControllerServlet", |
| urlPatterns = {"/category", |
| "/addToCart", |
| "/viewCart"<strong>, |
| "/updateCart", |
| "/checkout", |
| "/purchase", |
| "/chooseLanguage"</strong>})</pre></li> |
| |
| <li>Finally, include the <code>loadOnStartup</code> element so that the servlet |
| is instantiated and initialized when the application is deployed. A value of <code>0</code> |
| or greater will cause this to happen (<code>-1</code> is the default). |
| |
| <pre class="examplecode"> |
| @WebServlet(name="ControllerServlet", |
| <strong>loadOnStartup = 1,</strong> |
| urlPatterns = {"/category", |
| "/addToCart", |
| "/viewCart", |
| "/updateCart", |
| "/checkout", |
| "/purchase", |
| "/chooseLanguage"})</pre></li> |
| </ol> |
| |
| |
| <br> |
| <h2 id="implement">Implementing the Controller Servlet</h2> |
| |
| <p>As previously stated, the controller servlet handles incoming requests by initiating |
| any actions needed to generate the model for the request, then forwarding the request |
| to the appropriate view. For a visual representation, refer back to the |
| <a href="design.html#mvcDiagram">MVC diagram for the AffableBean project</a>.</p> |
| |
| <p>Looking at the generated code for the new <code>ControllerServlet</code>, you |
| can see that the IDE's servlet template employs a <code>processRequest</code> |
| method which is called by both <code>doGet</code> and <code>doPost</code> |
| methods. (You may need to expand the code fold by clicking the plus icon ( |
| <img src="../../../../images_www/articles/73/javaee/ecommerce/common/code-fold-icon.png" |
| alt="Code fold icon"> ) in the editor's left margin to view these methods.) Because |
| this application differentiates between <code>doGet</code> and <code>doPost</code>, |
| you'll add code directly to these methods and remove the <code>processRequest</code> |
| method altogether.</p> |
| |
| <div class="indent"> |
| <div class="feedback-box float-left" style="width: 703px;"> |
| |
| <h3>Modifying File Templates with the IDE's Template Manager</h3> |
| |
| <p>The IDE provides you with a basic template for any new file you create. |
| If the template is not optimal for your work patterns, you can alter it |
| using the IDE's Template Manager. The IDE provides a template for virtually |
| any file type.</p> |
| |
| <p>For example, to modify the servlet template:</p> |
| |
| <ol> |
| <li>Open the Template Manager by choosing Tools > Templates from |
| the main menu.</li> |
| |
| <li>Expand the Web category, then select the Servlet template. |
| |
| <br> |
| <img src="../../../../images_www/articles/73/javaee/ecommerce/page-views-controller/template-manager.png" |
| class="margin-around b-all" title="Access and modify file templates via the Template Manager" |
| alt="Template Manager"/></li> |
| |
| <li>Click the Open in Editor button.</li> |
| |
| <li>Modify the template in the editor. The next time you create a new |
| servlet (e.g., using the Servlet wizard), the new version will be |
| applied.</li> |
| </ol> |
| </div> |
| </div> |
| <br style="clear: both;"/> |
| |
| <br> |
| <p>Now that you've mapped URL patterns to the servlet using the <code>@WebServlet</code> |
| annotation, set up the <code>ControllerServlet</code> to handle these patterns. Also, |
| instantiate a <code>RequestDispatcher</code> to forward the requested pattern to the |
| appropriate view.</p> |
| |
| <ol> |
| <li>Replace the <code>ControllerServlet</code> class template code with |
| the following code. |
| |
| <pre class="examplecode"> |
| public class ControllerServlet extends HttpServlet { |
| |
| /** |
| * Handles the HTTP <code>GET</code> method. |
| * @param request servlet request |
| * @param response servlet response |
| * @throws ServletException if a servlet-specific error occurs |
| * @throws IOException if an I/O error occurs |
| */ |
| @Override |
| protected void doGet(HttpServletRequest request, HttpServletResponse response) |
| throws ServletException, IOException { |
| |
| String userPath = request.getServletPath(); |
| |
| // if category page is requested |
| if (userPath.equals("/category")) { |
| // TODO: Implement category request |
| |
| // if cart page is requested |
| } else if (userPath.equals("/viewCart")) { |
| // TODO: Implement cart page request |
| |
| userPath = "/cart"; |
| |
| // if checkout page is requested |
| } else if (userPath.equals("/checkout")) { |
| // TODO: Implement checkout page request |
| |
| // if user switches language |
| } else if (userPath.equals("/chooseLanguage")) { |
| // TODO: Implement language request |
| |
| } |
| |
| // use RequestDispatcher to forward request internally |
| String url = "/WEB-INF/view" + userPath + ".jsp"; |
| |
| try { |
| request.getRequestDispatcher(url).forward(request, response); |
| } catch (Exception ex) { |
| ex.printStackTrace(); |
| } |
| } |
| |
| /** |
| * Handles the HTTP <code>POST</code> method. |
| * @param request servlet request |
| * @param response servlet response |
| * @throws ServletException if a servlet-specific error occurs |
| * @throws IOException if an I/O error occurs |
| */ |
| @Override |
| protected void doPost(HttpServletRequest request, HttpServletResponse response) |
| throws ServletException, IOException { |
| |
| String userPath = request.getServletPath(); |
| |
| // if addToCart action is called |
| if (userPath.equals("/addToCart")) { |
| // TODO: Implement add product to cart action |
| |
| // if updateCart action is called |
| } else if (userPath.equals("/updateCart")) { |
| // TODO: Implement update cart action |
| |
| // if purchase action is called |
| } else if (userPath.equals("/purchase")) { |
| // TODO: Implement purchase action |
| |
| userPath = "/confirmation"; |
| } |
| |
| // use RequestDispatcher to forward request internally |
| String url = "/WEB-INF/view" + userPath + ".jsp"; |
| |
| try { |
| request.getRequestDispatcher(url).forward(request, response); |
| } catch (Exception ex) { |
| ex.printStackTrace(); |
| } |
| } |
| |
| }</pre> |
| |
| As you continue through the tutorial, you'll return to the <code>ControllerServlet</code> |
| and implement each of the mapped URL patterns individually.</li> |
| |
| <li>Examine the code above. There are several points to note: |
| |
| <ul style="margin: 5px 0 0 -2em"> |
| <li>The servlet uses a <code>userPath</code> instance variable to get the |
| requested URL pattern from the client: |
| |
| <pre class="examplecode" style="width: 640px">String userPath = request.getServletPath();</pre> |
| |
| <code>userPath</code> is used by both <code>doGet</code> and <code>doPost</code> |
| methods.</li> |
| |
| <li>URL patterns associated primarily with page requests are managed by the |
| <code>doGet</code> method. For example, <code>/category</code>, |
| <code>/viewCart</code>, and <code>/checkout</code> result in the display |
| of the category, cart, and checkout pages.) </li> |
| |
| <li>URL patterns associated with form submits and the transport of |
| sensitive user data (e.g., <code>/addToCart</code>, <code>/updateCart</code>, |
| and <code>/purchase</code>) are managed by the <code>doPost</code> |
| method.</li> |
| |
| <li>For both <code>doGet</code> and <code>doPost</code> methods, the path |
| to the appropriate view is formed using a <code>url</code> string: |
| |
| <pre class="examplecode" style="width: 640px">String url = "/WEB-INF/view" + userPath + ".jsp";</pre> |
| </li> |
| |
| <li>The <code>RequestDispatcher</code> is obtained from the <code>HttpServletRequest</code> |
| and applies the <code>url</code> to forward the request: |
| |
| <pre class="examplecode" style="width: 640px">request.getRequestDispatcher(url).forward(request, response);</pre> |
| </li> |
| |
| <li><code>TODO</code> notes have been used to denote work that still needs |
| to be done. For example: |
| |
| <pre class="examplecode" style="width: 640px">// if category page is requested |
| if (userPath.equals("/category")) { |
| // TODO: Implement category request</pre> |
| |
| Applying <code>TODO</code> notes in your code is a useful way to keep track |
| of tasks that you need to complete. You can use the IDE's Tasks window |
| (Ctrl-6; ⌘-6 on Mac) to view all TODO notes, as well as any syntax or |
| compile errors contained in your project. |
| |
| <br> |
| <img src="../../../../images_www/articles/73/javaee/ecommerce/page-views-controller/tasks-window.png" |
| class="margin-around b-all" title="Keep track of implementation tasks with the IDE's Tasks window" |
| alt="Tasks window"/> |
| |
| <br> |
| <p class="tips">You can control the keywords that display in the Tasks window. |
| Open the Options window (Tools > Options; NetBeans > Preferences on Mac), |
| then choose Miscellaneous > Tasks.</p></li> |
| </ul> |
| </li> |
| |
| <li>Run the project (press F6; fn-F6 on Mac) and test to see whether the <code>ControllerServlet</code> |
| is forwarding requests to the appropriate views. |
| |
| <ul style="margin: 5px 0 0 -2em"> |
| <li>Type in <code>http://localhost:8080/AffableBean/category</code> in the browser's |
| address bar. The application's <a href="#categoryPage">category page</a> |
| displays.</li> |
| |
| <li>Type in <code>http://localhost:8080/AffableBean/viewCart</code> in the browser's |
| address bar. The application's <a href="#cartPage">cart page</a> displays.</li> |
| |
| <li>Type in <code>http://localhost:8080/AffableBean/checkout</code> in the browser's |
| address bar. The application's <a href="#checkoutPage">checkout page</a> |
| displays.</li> |
| </ul> |
| |
| <p class="notes"><strong>Note:</strong> Entering <code>http://localhost:8080/AffableBean/purchase</code> |
| in the browser's address bar does not allow you to view the <a href="#confirmationPage">confirmation |
| page</a>. Naturally, this is because the <code>/purchase</code> URL pattern is handled |
| by the servlet's <code>doPost</code> method, and requests sent from the browser's address |
| bar are typically sent using the HTTP GET method.</p></li> |
| </ol> |
| |
| <p>At this stage, you've created JSP pages that contain placeholders for functional components. |
| You've also set up the front-end structure of the application. JSP pages now reside within |
| the <code>WEB-INF</code> folder, header and footer code has been factored out into separate |
| files, your deployment descriptor is properly configured, and you've set up the |
| <code>ControllerServlet</code> to handle incoming requests. In the next tutorial unit, you |
| take measures to enable connectivity between the application and the database.</p> |
| |
| <p>If you'd like to compare your work with the sample solution for this unit, you can |
| <a href="https://netbeans.org/projects/samples/downloads/download/Samples%252FJavaEE%252Fecommerce%252FAffableBean_snapshot2.zip">download |
| snapshot 2 of the AffableBean project</a>.</p> |
| |
| |
| <div class="feedback-box"> |
| <a href="/about/contact_form.html?to=3&subject=Feedback: NetBeans E-commerce Tutorial - Preparing the Page Views and Controller Servlet">Send |
| Us Your Feedback</a></div> |
| |
| <br style="clear:both;"> |
| |
| |
| <h2 id="seeAlso">See Also</h2> |
| |
| <div class="indent"> |
| <h3>NetBeans Tutorials</h3> |
| |
| <ul> |
| <li><a href="../javaee-intro.html" target="_blank">Introduction to Java EE Technology</a></li> |
| <li><a href="../javaee-gettingstarted.html" target="_blank">Getting Started with Java EE Applications</a></li> |
| <li><a href="../../web/quickstart-webapps.html" target="_blank">Introduction to Developing Web Applications</a></li> |
| <li><a href="../../web/mysql-webapp.html" target="_blank">Creating a Simple Web Application Using a MySQL Database</a></li> |
| <li><a href="../../../../community/media.html" target="_blank">Video Tutorials and Demos for NetBeans IDE</a></li> |
| <li><a href="https://netbeans.org/projects/www/downloads/download/shortcuts.pdf">Keyboard Shortcuts & Code Templates Card</a></li> |
| <li><a href="../../../trails/java-ee.html" target="_blank">Java EE & Java Web Learning Trail</a></li> |
| </ul> |
| |
| <h3>NetBeans Books</h3> |
| |
| <ul> |
| <li><a href="https://netbeans.org/kb/articles/netbeans-tips-and-tricks-book.html" target="_blank">100 NetBeans IDE Tips and Tricks</a></li> |
| <li><a href="http://www.apress.com/book/view/1590598954" target="_blank">Pro NetBeans IDE 6 Rich Client Platform Edition</a></li> |
| <li><a href="http://apress.com/book/view/1430219548" target="_blank">Beginning Java EE 6 Platform with GlassFish 3: From Novice to Professional</a></li> |
| <li><a href="https://netbeans.org/kb/articles/books.html" target="_blank">More books about NetBeans IDE</a></li> |
| </ul> |
| |
| <h3>External Resources</h3> |
| |
| <ul> |
| <li><a href="http://jcp.org/en/jsr/detail?id=315" target="_blank">Servlet 3.0 Specification</a></li> |
| <li><a href="https://developer.mozilla.org/en/Common_CSS_Questions" target="_blank">Common CSS Questions</a></li> |
| <li><a href="http://quirksmode.org/compatibility.html" target="_blank">Browser Compatibility Master Table</a></li> |
| <li><a href="http://refcardz.dzone.com/refcardz/netbeans-ide-67-update" target="_blank">DZone Refcard for NetBeans Java Editor</a></li> |
| </ul> |
| </div> |
| |
| </body> |
| </html> |
