Category Archives: NetBeans Visual Web Pack

NetBeans Community Docs

The Sun Java Studio Creator community page has been live for several months, with some great user contributions. Now the VWP users have a place to contribute as well. The NetBeans Community Docs Wiki Page enables community members to submit tutorials, white papers, FAQs, tips and tricks, Flash demos, and blogs. The wiki page includes easy-to-follow instructions for submitting content. In addition, James Branam, the Community Docs Manager, includes tips for submitting content in his blog.

Thanks to Sapan Parikh, there is already a community-written VWP tutorial, Component Creation at Runtime Tutorial. This tutorial shows users how to create components, such as command buttons and input text, at run time.
James has also written a nice spotlight on Sapan Parikh in his blog.

On a similar note, don’t forget the Feedback buttons at the bottom of our tutorials. You can continue to send suggestions and questions on our
VWP tutorials by clicking the button and filling out the form.
All writers who work on the VWP tutorials receive the feedback. We try to respond as soon as possible, but sometimes it takes us a while to dig up the answer.
We especially appreciate the thank yous you send us–it makes our day.

If you have technical questions outside the documentation, you can find more information from the the NetBeans Users alias, To subscribe to the alias, go to this page:

New Tree Tutorial

We have yet another new tutorial, this one titled
Building a Tree From Database Data
This tutorial shows how to
build a two-page application, the first page of which includes a Tree component. You populate the first-level nodes in the
Tree with names from a database, and the second-level nodes with the trips for that person.
The trip nodes are links to a second page, which displays the details for that trip.

Calendar Components in Visual Web Pack

Our newest tutorial, Using the Calendar Component, describes how to work with the built-in Calendar component
in the Basic section of the Palette.
This tutorial provides good use cases for working with the Calendar component,
including how to set the the minimum and maximum calendar date,
how to verify that a date that the user selects falls within a range,
and how to change the calendar style.

Another option for you to try is the Popup Calendar component in the BluePrints Ajax Component Library.
The Popup Calendar component was designed to fix the limitations in the built-in Calendar.
However, the Popup Calendar component is a prototype and might not fit seamlessly with the
other components built into the IDE.
For instructions on accessing the Popup Calendar component, see Downloading and Importing Ajax and Other Components.

Hibernate for Visual Web Pack

A couple of months ago, JB blogged about how to use the Sun Java Studio Creator tutorial to learn about using Hibernate with the Visual Web Pack. We are happy to announce that there is now a Using Hibernate With the Visual Web Pack tutorial. Not only does this show how to use the Hibernate framework in a Visual Web application, it also shows how to use ObjectListDataProvider objects and how to fill an Options array for list-type components.

New Tutorial on Using JasperReports in a Visual Web Application

We just published a new Visual Web Pack tutorial, Generating Reports and PDFs From a Web Application that shows how use JasperReports to generate HTML and PDF reports from a data source. JasperReports is a reporting tool that outputs reports in HTML, PDF, XLS, CSV, and XML formats. This tutorial provides code, which you can copy to any project’s application bean, that fills a report with the same query result that you use to populate the JavaServer Faces components on a page. The tutorial also shows how to modify the build script to compile the JasperReport templates.

Thanks to Craig Conover and Marina Sum who forged the trail with their
on using JasperReports with the NetBeans IDE, and to Craig McClanahan who made sure my sample code followed the “best practices”.

Geertjan just
on a JasperReports Visual Designer for the NetBeans IDE. I look forward to exploring this designer and finding out how this designer integrates with Visual Web applications.

More Tutorials on Ajax and Databases

We’ve published two new tutorials since our initial release on December 6.

  • Using the Ajax Map Viewer Component.
    In this tutorial you import the Ajax Map Viewer component into NetBeans Visual Web Pack, then use Google’s free map service API to create a custom map.
    The map includes marker text and a flag that pinpoints an address entered by the user.

  • Performing Inserts, Updates, and Deletes. This tutorial shows you how to build a web application that can create, retrieve, update, and delete database rows. The application provides a drop-down list of master data along with a synchronized detail table.
    Users of the application can add to, update, and delete the records in the detail table and from its associated database.

Thank you for the many good suggestions and comments that you have provided us via the Feedback button at the bottom of our tutorials. Your input is important to us.

The Server Encountered an Internal Error

Sometimes, when testing your Visual Web application, you might get a page with the following unhelpful error:

HTTP Status 500 -

type Status report


description The server encountered an internal error () that prevented it
from fulfilling this request.

To find out what the real problem, go back to the NetBeans IDE and click the tab for the server’s log (usually in the same area as the output window). There, you will find a more helpful description of the error. For example, you might see:

Using jMaki in a Visual Web Application

Note: See Using jMaki 9.3 With the NetBeans Visual Web Pack or the Sun Java Studio Creator IDE for updated instructions on how to add jMaki to a project.

jMaki beta is out and there is a wonderful NetBeans plug in that works with the NetBeans standard web application project. You can use this plug in with a Visual Web application, but it takes a little more work. Work is in progress for a plug in that facilitates the use of jMaki widgets in a Visual Web application. In the meantime, here are some steps to illustrate how to use jMaki technology.

In this example you add a Spry Accordian widget to a sidebar
page fragment. The following steps are similar to a jMaki sample project
for the Sun Java Studio Creator IDE.

Note: I modified this a bit on 12/15 based on feedback from Craig, Ken, and Greg. Most notably, you do not need to use the f:verbatim tag if you are using the jmaki-jsf tag library. Also, because this sample modifies the templates, I added steps to create a new namespace for the widget so that you don’t have to modify the original templates.

Warning: jMaki APIs are still being refined, so it’s “use at your own risk”.

  1. If you haven’t already, download the NetBeans jMaki plug in
    from The installation instructions are on this page as well. (While you are on that page, you
    should check out the screencast.) Note that there is a link on the download page to an Ajax update center NBM you can install, which will give you access not only to jMaki but other stuff like the Phobos plugin too.

  2. It is recommended that you use jMaki with Glassfish (Sun Java System Application Server 9). I have successfully used it with version 8. I have not tried it out with other servers so I can’t say whether it would work or not. If you have not installed the Sun Java System Application Server 9, see the Visual Web Pack Installation Instructions.
  3. The easiest way that I can see to make the jMaki files
    available for a Visual Web application is to create a jMaki
    web application project from which you can copy the necessary files.

    In the main menu, choose File > New Project. Select Web in
    the Categories pane, select Web Application in the Projects pane, and click Next.

  4. Name the project StdjMaki, select Sun Java System Application Server for the Server and select Java EE 5 for the Java EE Version, and
    click Next.

  5. Select jMaki Ajax Framework and click Finish.
  6. Now, you can create a Visual Web project. In the main menu, choose File > New Project. Select Web in
    the Categories pane, select Visual Web Application in the Projects pane, and click Next.

  7. Name the project VWjMaki, select Sun Java System Application Server for the Server, select Java EE 5 for the Java EE Version, and
    click Finish.

  8. In the Projects window, right-click the VWjMaki node and
    choose Set Main Project.

  9. In the Projects window, right-click Libraries, and choose Add Library. In the Add Library dialog box, select jMaki Library
    and click Add Library.

  10. In the Projects window, copy the following files and folders from StdjMaki to VWjMaki. Note: I am just having you copy what you need for the Spry Accordion widget. If you want,
    you can copy all the folders under resources.

    • All the files (not folders, just files) in StdjMaki/Web Pages/resources to VWjMaki/Web Pages/resources.
      To be honest, I don’t if all of the files are required.

    • StdjMaki/Web Pages/libs/spry to VWjMaki/Web Pages/libs/spry.
    • StdjMaki/Web Pages/resources/spry/plainAccordion to VWjMaki/Web Pages/resources/spry/plainAccordion.
  11. In this example, you customize the plainAccordion widget, so you want
    the customized widget to be in its own namespace. Expand VWjMaki > Web pages > resources > spry >, copy plainAccordion, paste the copy into the same folder, and
    rename the copy myAccordion.

    You are now done with the setup.

  12. In the Visual Designer, drag a Page Fragment Box
    from the Layout section of the Palette and drop it
    in the top left corner of the page. A Select Page Fragment
    dialog box appears.

  13. Click Create New Page Fragment.
  14. Type Sidebar in the Name textbox, click OK, and click Close.
  15. Double-click the empty page fragment to open it in the Visual Designer.
  16. Drop a Group Panel component on the top left of the page. I like
    to put my jMaki widgets inside of grid panels or group panels so
    that I can position them and visually see where they go in the
    Visual Designer.

  17. Click JSP to view the JSP tags for the page.
  18. Add xmlns:a="" to
    the top-level <div> tag.

  19. Nest the jMaki tag inside the panelGroup tag as shown below:
    <webuijsf:panelGroup binding="#{Sidebar.groupPanel1}"
    "height: 382px; left: 0px; top: 0px; position: absolute; width:190px">
    <a:ajax type="spry" name="spry.myAccordion" />
  20. Copy the following styles to resources/spry/myAccordion/components.css.
    This is to make the accordion resize to the section’s content.
    The samples that you get when you download the components from Adobe come with
    an AquaAccordion style that does not set a section height.

    .AquaAccordion {
    border-left: solid 1px gray;
    border-right: solid 1px black;
    border-bottom: solid 1px gray;
    overflow: hidden;
    font-family: "Times New Roman", Times, serif;
    font-size: 16px;
    .AquaAccordion .Tab {
    height: 24px;
    background-image: url(images/aqua-gradient.gif);
    background-repeat: repeat-x;
    background-color: #6dc1fc;
    border-top: solid 1px black;
    border-bottom: solid 1px gray;
    margin: 0px;
    padding: 2px;
    cursor: pointer;
    -moz-user-select: none;
    -khtml-user-select: none;
    text-align: center;
    .AquaAccordion .Content {
    overflow: auto;
    margin: 0px;
    padding: 0px;
    background-image: url(images/gray-gradient.gif);
    background-repeat: repeat-x;
    .AquaAccordion .hover {
    background-image: none;
    background-color: #33CCFF;
  21. Replace the contents of resources/spry/myAccordion/components.htm with the following.
    <div id="${uuid}" class="AquaAccordion" tabindex="0">
    <div class="Panel">
    <div class="Tab">
    <div class="Label">Fruit</div>
    <div class="Content">
    <a href="faces/FoodDetail.jsp?name=banana">Banana</a><br/>
    <a href="faces/FoodDetail.jsp?name=papaya">Papaya</a><br/>
    <a href="faces/FoodDetail.jsp?name=grapes">Grapes</a><br/>
    <div class="Panel">
    <div class="Tab">
    <div class="Label">Vegetables</div>
    <div class="Content">
    <a href="faces/FoodDetail.jsp?name=avocado">Avocado</a><br/>
    <a href="faces/FoodDetail.jsp?name=sprouts">Brussel Sprouts</a><br/>
    <a href="faces/FoodDetail.jsp?name=asparagus">Asparagus</a><br/>
    <a href="faces/FoodDetail.jsp?name=onion">Onion</a><br/>
    <div class="Panel">
    <div class="Tab">
    <div class="Label">Grains and Cereal</div>
    <div class="Content">
    <a href="faces/FoodDetail.jsp?name=rice">Rice</a><br/>
    <a href="faces/FoodDetail.jsp?name=macaroni">Macaroni</a><br/>
  22. Modify the widget creation statement in component.js as follows to turn off the animation. This makes the
    content sections shrink to fit the content:

    var acc1 = new Spry.Widget.Accordion(widget.uuid, { enableAnimation: false });

  23. Run and test the project. You might have to resize
    the group panel, the page fragment, and the page fragment box on Page1 to propery display the
    accordion widget.

If you want to play around some more, look at this
blog on using the dojo ComboBox. It was written for
the Sun Java Studio Creator IDE, but once you do the setup as above,
the steps are pretty much the same.

Lots of New Visual Web Pack Tutorials

Today, in conjunction with the final release of the NetBeans Visual Web Pack, we published several new tutorials on the NetBeans Visual Web Pack Documentation portal. We have an overview article about the bundled components, as well as individual tutorials on the File Upload component, the list components, and the Ajax Progress Bar component.

Of interest to Sun Java Studio Creator IDE users is the Importing a Sun Java Studio Creator 2 Project in NetBeans Visual Web Pack tutorial. James, one of the Help writers, contributed this tutorial.

In addition to updating the Release Notes and Installation Guide, Joe worked on the Using Page Fragments tutorial. This tutorial shows how to create headers, footers, and sidebars that you can include in all your pages.

One change that we made to all the tutorials was to include a matrix in each tutorial, which tells you what configurations the tutorial works with. Note that if you want to do a tutorial that requires the Travel database, but are not ready to install the Sun Java System Application Server 9, the Installation Instructions now show the steps for adding the Travel database to your own Java DB or Apache Derby repository.

If you want to watch an excellent tour of the Visual Web Pack, I highly recommend checking out Craig’s webinar,
What’s New in NetBeans Visual Web Pack

The divas, along with Cindy, and Joe, are working on several more tutorials. You can expect to see tutorials on the Tree component, data providers, connecting to databases, JasperReports, and Hibernate appear on the Visual Web Pack documentation page. We are watching the NetBeans user groups to see what kinds of questions you are asking. We also appreciate the suggestions that we are getting via the Feedback button. While we do a have a backlog of user-requested tutorials, we still want your input. It helps us to prioritize and design the content.

I want to give a special thanks to the Quality Engineering team. They really do a great job evaluating our tutorials, suggesting great changes, and pushing the bar even higher.

Visual Web Pack Database Webinar

Jim and John are presenting a webinar on how to use the NetBeans Visual Web Pack to build web applications that present and update information in a database. They will also show how to browse and edit schemas, data, and commands, and they will discuss JSBC drivers. Check it out here.