Front Page

User FAQ
Developer FAQ
Community Docs
Development
Quality
Dream Team
Popular Projects
Bug DashBoard
Hudson
Sources
Nightly
Wiki Etiquette
Formatting Rules
Terms Of Use
Unlinked Pages
Undefined Pages
Page Index
Recent Changes
Find Page

[RSS]

JavaScript Library Support Technology Preview

Table of Contents

System Requirements

IDE NetBeans 6.1 with Web & Java EE
OS Same NetBeans 6.1 FCS
Hardware Platforms Same NetBeans 6.1 FCS

Installation

The JavaScript Library Support plugin can be found on NetBeans 6.1 update center by navigating to Tools -> Plugin -> Available Plugins:

JavaScriptLibKitOnUC.png

Click on Install to complete the installation of the kit.

For this technology preview, the JavaScript Manager Support kit contains the following modules:

  1. Woodstock Widget 4.3_p1 Library
  2. YahooUI 2.5.1
  3. JavaScript Library Support

After installation, the libraries will appear under the JavaScript Libraries node in the NetBeans IDE:

JavaScriptLibInLibMgr.png

Getting Started with javascript libraries in a web project

Create a new web project:

WebApp.png

Go to Tools, select Add Libraries to Project:

MenuItem.png

To bring up:

AddJavaScriptToProject.png

Once confirmed OK, the libraries will be added to project:

LibsExpandedinProj.png

You can either install the wwsnippets.nbm below or try to add the content of the following sample to your index.jsp page: 

<%-- 
    Document   : index
    Created on : May 2, 2008, 9:48:05 AM
    Author     : ctnguyen
--%>

<%@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><script type="text/javascript">
        var woodstockConfig = {
            "isDebug": false,
            "namespace": "woodstock",
            "webuiAll": false,
            "webuiJsfx": false
        };
        </script>
        <script type="text/javascript"
                src="/WebApplication6/resources/woodstock/woodstock4_3_p1/suntheme/javascript/bootstrap.js">
        </script>
        
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>JSP Page</title>
    </head>
    <body>
        <h1>Hello World!</h1>
        
        <span id="ww_id2_span"><script type="text/javascript">
            woodstock.widget.common.createWidget("ww_id2_span",
            {
                "id": "ww_id2",
                "label": {
                    "level": 2,
                    "value": "List of Names"
                },
                "labelOnTop": false,
                "multiple": true,
                "options": [
                    {
                        "label": "Option 1",
                        "value": "option_1"
                    },
                    {
                        "label": "Option 2",
                        "value": "option_2"
                    },
                    {
                        "label": "Option 3",
                        "value": "option_3"
                    },
                    {
                        "label": "Option 4",
                        "value": "option_4"
                    },
                    {
                        "label": "Option 5",
                        "value": "option_5"
                    },
                    {
                        "label": "Option 6",
                        "value": "option_6"
                    }
                ],
                "required": true,
                "size": 6,
                "widgetType": "listbox"
            });

        </script></span><span id="ww_id3_span"><script type="text/javascript">
            woodstock.widget.common.createWidget("ww_id3_span",
            {
                "calendar": {
                    "dateFormat": "MM/dd/yyyy",
                    "id": "ww_id3-datepicker",
                    "maxDate": "01/31/2100",
                    "minDate": "02/01/2000",
                    "todayDateMsg": "Today 05/02/2008",
                    "widgetType": "calendar"
                },
                "id": "ww_id3",
                "label": {
                    "level": 2,
                    "value": "Enter date:"
                },
                "patternHelp": "MM/dd/yyyy",
                "required": true,
                "value": "",
                "widgetType": "calendarField"
            });</script></span>
    </body>
</html>

When deployed, the browser should show something like:

RunWebApp.png

The plan for JavaScript Libraries in the next NetBeans release will be very similiar to how JMaki framework is implemented in NetBeans. The JavaScript/Ajax framework will be available for a number of project types. Any feedback is welcome!

Attachments

AddJavaScriptToProject.png Info on AddJavaScriptToProject.png 30836 bytes
JavaScriptLibInLibMgr.png Info on JavaScriptLibInLibMgr.png 112292 bytes
JavaScriptLibKitOnUC.png Info on JavaScriptLibKitOnUC.png 176377 bytes
LibsExpandedinProj.png Info on LibsExpandedinProj.png 48973 bytes
MenuItem.png Info on MenuItem.png 52784 bytes
NewProject.png Info on NewProject.png 74695 bytes
RunWebApp.png Info on RunWebApp.png 41507 bytes
WebApp.png Info on WebApp.png 109455 bytes
wwsnippets.nbm Info on wwsnippets.nbm 130248 bytes