Arun Gupta's Blog

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

Comments

• Nice desktop you have :-)
  I saw that you have categories panel in your weblog, how do you set up it?

  Thanks
  

  Posted by: kalali on June 06, 2007 at 08:03 AM

• Do you meant categories on blogs.sun.com/arungupta or somewhere else ?
  

  Posted by: arungupta on June 07, 2007 at 05:40 PM

• I meant categories in http://weblogs.java.net/blog/arungupta/ .
  I have a weblog in java.net and I could not create a panel in right side like you did.

  The panel that i am talking is right after search box.
  

  Posted by: kalali on June 08, 2007 at 10:53 AM

• weblogs.java.net does not give that level of control. This is the default template for me. I think it shows all the categories I've ever posted to.

  Posted by: arungupta on June 11, 2007 at 07:01 PM

This work is licensed under a Creative Commons License.