Configure Netbeans for Fully Integrated Web and Web Services Development

Using the Mint virtual machine that we previously installed, and the Netbeans IDE we also installed, let’s now proceed to configure the IDE for end-to-end development from within the IDE.

In this lesson, we will create a new web project that will include a jQuery sample web page and our first web service servlet which will be hosted in Tomcat.  This is a recipe lesson and so please follow along in your Mint VM (after you take a snapshot)

Install Chrome Netbeans Connector Extension.  We do this in order to debug our javascript from within the Netbeans IDE.  Open the Chrome browser in your Mint vm and install the Netbeans Connector Extension.

Create a New Netbeans Web Project.  From the Netbeans IDE, create a new Web project.  I find the UI confusing so here’s a step by step:

  1. From the Netbeans IDE, click on the menu File-New Project
  2. When the New Project dialog box appears, don’t put anything in the input box.  Instead, choose Java Web as the Category and then Web Application as the Project.  Then press the Next button
  3. In the next screen, you can name the project.  Let’s call ours SimpleWebService
  4. Make sure your Server is Apache Tomcat in the next screen.
  5. Leave all the frameworks blank and press the Finish button.

Play with Netbeans Javascript Debugger.  In your new project, you should see the index.html page in the editor.  In the top left panel, open up things so you see the index.html file.  Now, edit the index.html file so it looks like the following:

 

As this illustrates add a <script> tag and include the new “mybuttonclick” function.  You should also add a button with an “onclick” event and set the handler to the function we just wrote.  We’ll dig into the details in a later lesson, but for now we just want to configure how to get the javascript debugger to work.

There are a number of ways to Run the program, but for now just press the F6 button.  Once the browser loads, press the Press me button and you should see a dialog telling you that “button pressed with passed variable value of: 123”.

Note that you also see that localhost:8084 has served up the content.  This tells you that your development Tomcat instance is actually serving up the content.  Cool.

Now, press the small blue box next to the navigation bar to enable Netbeans debugging and then select the Debug in Netbeans.  You should see a yellow bar like the following:

You can also (and should) set the entire project to use Chrome with the Netbeans Debugger enabled.  To do so, open the project properties and select that option:

Now let’s have some fun.  Leave the browser window up with the Netbeans Connector debugging.  Back in Netbeans, in the window for the index.html file, click on the line number next to the line with “var myvar…”.  In the screenshot above, the number is 14. We have just set a “breakpoint” on this line so we can watch the code work (or not) in our debugger.  Our goal is to run the browser and when we press the “Press me” button, to have the code halt on the line with our breakpoint.  Let’s try it.

Back in the Netbeans IDE you want to debug our index.html file.  There are several ways to do this and I’ll let you choose what’s best for you.  But for this lesson, we’ll make it specific:  in the upper left panel, right-click over the index.html file and select the debug file option.  The full line where you set the breakpoint should turn red showing you that it’s waiting for execution.

Down at the bottom of the IDE, press the Variables button so you can see the variables screen. Since we have not executed our code, there shouldn’t be anything there.  So let’s fix that.

Jump to your browser with the Netbeans Connector enabled and press the “Press me” button.

Your code should jump back to the netbeans IDE and you should now see a green line in your breakpoint line and the value of the only variable, buttonstuff set at 123.  As you can see down in the onclick for the button, we passed the 123 from there.

Now let’s step through our code to see how the variables change when set or modified:

From the IDE and the debugger screen, press the F7 on your keyboard and you will see the green line drop one line.  The code will have set the value of myvar to the value of buttonstuff and so you should see the value of 123 in both variables in the Variables screen in the IDE

F7 again and the string will be assigned to the mystring variable; and one more time, the value of buttonstuff will be appended to the value of the mystring variable.

To finish up the application, press the F5 button and you should see the browser alert window pop up.

I should point out that another way we could debug our javascript is from the browser window and debugger; that is, we can do it without even using the Netbeans IDE.  In a future lesson, we’ll dig into how to do that; but here is a screenshot showing the same debug data in the browser where we stepped through the code just as we did in our IDE:

Bringing Web Services into the Mix

As we just saw, we can use the IDE to debug our javascript but why do we care when we can just use the browser?  That’s a good point – if all we wanted to do was to debug our javascript, the browser would be the best place to do so (and we’ll play with this in a lesson soon).  However, the power of debugging in the IDE is best illustrated when we bring in web services and have an end-to-end debug session.  So let’s add in our web services.

Don’t worry if you don’t know what’s going on here.  The point of this lesson is to configure our system so we can use our IDE to build and debug.  We’ll dig deeper into each component in future lessons.

Back in our IDE, let’s create a Java Package for our new web service servlet.

Click here to Toggle Sidebar: Servlets??

In our projects window, upper left of the IDE, right-click over the project, SimpleWebService –> New –> Java Package and name it ServletPackage

Right-click over our new package, ServletPackage –> New –> Servlet

Let’s have our Class Name be SimpleServlet and accept the remaining defaults.

Open the new SimpleServlet.java file (it’s probably already open in the IDE) and navigate down to the processRequest function.

Replace all of the text inside the function with the text you see here (the full class is pasted below; but you should key this in yourself for practice):

Several things we want to do here in our server side code:

  • We want to process a request parameter called “mrn”.  Our browser will send us the request with the patient’s mrn so we can get a test count (contrived example)
  • If the mrn value is empty we will return an error to the browser.  Perhaps we asked the user to input the mrn and they didn’t do so…  Of course, we can also check for a null mrn value in our browser too and skip the web services call if null (the browser javascript below shows that too).
  • After we verify that we have the mrn, we will use the value to get the count by calling the getTestCountForMrn function which is also listed above.
  • No matter what happens, we will return a JSON string and so we set our content type of json so the browser doesn’t freak out when it see a json string coming back.
  • We then write out the json and return the function call.

We’ll write code in our browser in a moment to call this via AJAX; but we can test things now.  Right-click on the SimpleServlet.java file in the IDE and select Run File.

You should see a pop-up asking your for the URI.  Let’s leave it like it is for now (and we’ll bring in debugging next).  Just press the OK button.

The browser should come up and show that “success” is “false”; our implementation of an error; and give the error message from our code… that the MRN was not supplied.

Let’s try it with an MRN.  In the navigation bar, add the mrn variable so your request line should look like this:  http://localhost:8084/SimpleWebService/SimpleServlet?mrn=12345  If you look at the code above, our getTestCount… function is written to return a count of 7777 if the MRN is 12345, and 9999 if not.  Try changing the number of the mrn in the request and verify that the 9999 is returned.  Our web service is working.

You can also try adding an alpha such as mrn=123abc to verify that our exception handling is working.

Close the browser and let’s look at things in the debugger.  In the code window for our java class, insert a breakpoint on the line that sets the mrn from the request:
String mrn = request.getParameter(“mrn”);

Now, right-click again on the SimpleServlet.java file and select the Debug File

When the URI window comes up, let’s add the parameter so it looks like:  /SimpleServlet?mrn=12345  As you can see, you can now step through your code using the debugger and debug your web service code.

Putting it All Together – Making the Web Service Call from the Browser

Back in your Netbeans project, open the Index.html file to edit.  Edit your file so it has contents like this.

It’s important to note that in general, you can choose to have your code implement fundamental business rules (such as checking to see if the mrn is null or is numeric) from within the browser or the web service.  As a general rule of thumb I like do the checking on the layer that generates the data.  In other words, in our simple example, the mrn is input in the browser so we should implement our mrn rules there.  For example, our business rules may require an mrn (so it can’t be null or empty), may require it to be numeric, and may require it to be of a certain length and/or start with a particular number.

Click here to Toggle Sidebar

Here’s a video (no sound) of the end-to-end debugging from browser to web service and back

Conclusion

We covered a lot in this lesson:

  1. How to install the Chrome Netbeans Connector
  2. How to create a new NetBeans web project for HTML, JavaScript, and Servlet web service development and debugging
  3. How to Debug JavaScript in Netbeans and the Chrome browser
  4. How to build a simple Servlet
  5. How to debug the Servlet directly
  6. How to debug the Servlet and Browser at the same time

In the next and final lesson in this chapter, we’ll configure Tomcat and Apache to talk to each other so that we can serve up our Web Services to our WordPress or generic web site