JavaScript Everywhere - Detailed Instructions

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