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)
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:
- From the Netbeans IDE, click on the menu File-New Project
- 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
- In the next screen, you can name the project. Let’s call ours SimpleWebService
- Make sure your Server is Apache Tomcat in the next screen.
- Leave all the frameworks blank and press the Finish button.
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.
Bringing Web Services into the Mix
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.
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)
- 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.
Here’s a video (no sound) of the end-to-end debugging from browser to web service and back
We covered a lot in this lesson:
- How to install the Chrome Netbeans Connector
- How to build a simple Servlet
- How to debug the Servlet directly
- 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