JavaScript Everywhere - Detailed Instructions

These are detailed instructions for this screencast.

Pre-requisites

  1. Download GlassFish v2 latest build.
  2. In NetBeans 5.5 or NetBeans 5.5.1 Update Center, manually download and install the Ajax Update Center module. Run the Update Center and install all the modules supported by Ajax Update Center plug-in. This will require an IDE restart.
  3. In NetBeans menu, go to Tools, Palette Manager, Add jMaki Component Library and then add jMaki Charting widgets.

Instructions

  1. Create a new NetBeans "Scripting" category and "Phobos Application" project. In CSS layout, scroll to the bottom and select "Two Fixed Right Sidebars" layout.
  2. In the 'Top Right Column', clear the text and drag/drop Yahoo Calendar widget.
  3. In the 'Right Column', clear the text and drag/drop BlockList.
    1. Replace

      value : [
      {title : 'jMaki Project Home', link : 'https://ajax.dev.java.net', description : 'Where to go for the latest jMaki.' },
      {title : 'jMaki Widgets Home', link : 'https://widgets.dev.java.net', description : 'The source for the latest jMaki widgets.' },
      {title : 'jMaki-Charting Home', link : 'https://jmaki-charting.dev.java.net', description : 'Enables complex charts rendered on the client in any modern browser.' }
      ]


      with

      service : "/xhp?id=rss"
  4. In Left Column, clear the text drag/drop Yahoo Tabbed View.
    1. Replace "content: 'Some Content'" with "url: '/tab1/show'".
    2. Replace "content: 'Tab 2 Content'" with "url: '/tab2/show', iframe: true".
  5. Right click on View, select New, Stylized Phobos View and name it tab1. In CSS layout, scroll to the bottom and select "No CSS style". This will automatically create a controller tab1.js which can be seen in the controller sub-tree. This demonstrates that a new controller is automatically created for every newly created view.
  6. Create tab2 using the instructions in the previous step.
  7. In tab1.ejs, clean all the text and drag/drop jMaki Line Chart widget from the palette.
    1. Change 'Months' to lineChartModel.xAxisTitle.
    2. Change the value of xAxis.labels to lineChartModel.xAxis.
    3. Change 'Temperature' to lineChartModel.yAxisTitle.
    4. Change the value of yAxis.tickCount from 3 to 10.
    5. Change the value of value.data to lineChartModel.chartData.
  8. In tab2.ejs, clean all the text and drag/drop Google Search widget from the palette.
    1. Edit Static Content, resources, google, search, widget.json and add

       
  9. In 'controller', 'tab1.js', replace model definition

    model = {
        name = "app name"
        };

    with

    var lineChartData = module.application.generateChartData();
    lineChartModel = { xAxisTitle: "Month",
              yAxisTitle: "Bug Count",
              xAxis: "['November', 'December', 'January', 'February', 'March', 'April']",
              chartData: lineChartData
            };
  10. In 'module', 'application.js', add the following code after onShutdown() function:

    this.generateChartData = function() {
      var chartData = [];

      var chartDataRow = this.getData('red', 'P1');
      chartData.push(chartDataRow);

      chartDataRow = this.getData('orange', 'P2');
      chartData.push(chartDataRow);

      chartDataRow = this.getData('yellow', 'P3');
      chartData.push(chartDataRow);

      chartDataRow = this.getData('green', 'P4');
      chartData.push(chartDataRow);

      return chartData;
    }

    // get bug data for a priority and assign a color to it
    this.getData = function(color, priority) {
      var chartDataRow = {};
      chartDataRow["color"] = color;
      var priorities = [];

      for (var k=180;k > 29; k=k-30) {
        var val = new Packages.mypkg.BugQuery().getNewBugList(priority, k);
        priorities.push(val);
      }
      chartDataRow["values"] = priorities;

      return chartDataRow;
    }
  11. Right click on Project, select Properties, Run tab, Add Jar/Folder, then add this library. This jar file manifests an existing Enterprise application and queries bug tracking system in this case.
  12. Right click on Project, select Run Project.

Technorati: javaone jmaki phobos glassfish web2.0

Comments:

good...

Posted by fast on June 01, 2007 at 12:32 PM PDT #

helpful

Posted by autooo on June 04, 2007 at 04:43 AM PDT #

[Trackback] The first ever The Rich Web Experience 2007 just got over and I enjoyed participating in the conference. This conference is part of No Fluff Just Stuff Symposium series and truly lived up to it's name and these are...

Posted by Arun Gupta's Blog on September 08, 2007 at 12:08 PM PDT #

Right click on View, select New, Stylized Phobos View and name it tab1. In CSS layout, scroll to the bottom and select "No CSS style". This will automatically create a controller tab1.js which can be seen in the controller sub-tree. This demonstrates that a new controller is automatically created for every newly created view.

Posted by uk battery on November 26, 2008 at 12:35 PM PST #

Post a Comment:
Comments are closed for this entry.
About

profile image
Arun Gupta is a technology enthusiast, a passionate runner, author, and a community guy who works for Oracle Corp.


Java EE 7 Samples

Stay Connected

Search

Archives
« April 2014
SunMonTueWedThuFriSat
  
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
   
       
Today