JavaScriptLibrariesTechnologyPreview

JavaScript Library Support Technology Preview


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:

Image:JavaScriptLibKitOnUC_JavaScriptLibrariesTechnologyPreview.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:

Image:JavaScriptLibInLibMgr_JavaScriptLibrariesTechnologyPreview.png

Getting Started with javascript libraries in a web project

Create a new web project:

Image:WebApp_JavaScriptLibrariesTechnologyPreview.png


Go to Tools, select Add Libraries to Project:

Image:MenuItem_JavaScriptLibrariesTechnologyPreview.png


To bring up:

Image:AddJavaScriptToProject_JavaScriptLibrariesTechnologyPreview.png


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

Image:LibsExpandedinProj_JavaScriptLibrariesTechnologyPreview.png

You can either install the wwsnippets_JavaScriptLibrariesTechnologyPreview.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:

Image:RunWebApp_JavaScriptLibrariesTechnologyPreview.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!

Not logged in. Log in, Register

By use of this website, you agree to the NetBeans Policies and Terms of Use. © 2012, Oracle Corporation and/or its affiliates. Sponsored by Oracle logo