Skip to main content

JavaScript Everywhere - Detailed Instructions

Posted by arungupta on June 1, 2007 at 5:01 PM PDT

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

Related Topics >>