How to Make Interactivity

In this tutorial, we will show how to give some interactivity to your prototype.

Link to 'Forms' Link to 'Cards' Set a 'Target' control
Use scripting Embed complex packages

How to link to 'Forms'


We chose to link buttons to 'Forms', but we could have linked 'Menu Item', 'Check Box Menu Item', 'Radio Button Menu Item', 'Toolbar Button', 'Toolbar Toggle Button' and 'Toggle Button' as well.

How to link to cards in 'Card Panel'

You can do the same when you work with 'Card Panel'. A card panel is like a stack of panels. Only one of them can be viewed at a time.


We choose to link buttons to 'Card's, but we can link 'Menu Item', 'Check Box Menu Item', 'Radio Button Menu Item', 'Toolbar Button', 'Toolbar Toggle Button' and 'Toggle Button' as well.

How to set a 'Target' control


What we have done so far is to link the mouse move event on our button to set the background of our target text field to the value (color) blue.


What we have done so far is to link the mouse move event on our button to set the background of our target text field to the value (color) red.


Run your prototype. Move the mouse around and see what happens when it moves over the button labeled 'Blue'. It changes the background color of the text field to the color blue. And the text field backround color changes to the red when you move the mouse over the button labeled 'Red'.

How to use scripting language


Run your prototype. Click an item in the list and you will see it displayed in the text field.

Scripting language and complex package

You can add very complex system in your prototype if you wish. Let<s see how we integrated JFreeChart in a prototype. See the package at http://www.jfree.org/jfreechart. This prototype shows a chart of the World Population. By changing the year on the slider, the chart updates and displays data accordingly.

Here's our prototype in the 'Composer'.


Here's our 'Structure' tree


We put a label and an image in it to see our chart in the composer. The chart doesn't exist yet. It will be generated dynamically when the prototype will run. There are 2 scripts in this prototype. We attach an 'On Window' listener to the frame in order to some initialization when the window opens. The other script is attached by an 'On Change' listener on the slider.

The properties of our 'OnWindow1' event attached to our frame.


See the script: Initialize.js


The properties of our 'OnChange1' event attached to our 'Slider'.


See the script: SetScript.js


Here's our running prototype and the slider moved to year '2050'


Script: Initialize.js


var me = bsf.lookupBean ("me");

initializeIt();

showChart();

function showChart() {
    
    createDataArray();

    // Import packages needed
    importPackage(Packages.java.util);
    importPackage(Packages.java.text);
    importPackage(Packages.java.awt);

    importPackage(Packages.org.jfree.chart);
    importPackage(Packages.org.jfree.chart.plot);
    importPackage(Packages.org.jfree.data);
    importPackage(Packages.org.jfree.data.general);

    var dataset = createDataSet();
    // Store the dataset, so the other script can retrieve it
    bsf.registerBean("dataset", dataset);

    // create the chart...
    var chart = null;
    chart = ChartFactory.createStackedBarChart(
        "World Population Chart",
        "Age Group",     // domain axis label
        "Population (millions)",  // range axis label
        dataset,         // dataset
        PlotOrientation.HORIZONTAL,
        true,            // include legend
        true,            // tooltips
        false            // urls
    );

    
var labelPanel = me.getComponent("jpanel4"); //

Remove

the

dummy label that
    
    was

    use to show a
    graph
    image
    in

    composer
    labelPanel.removeAll();
    if
    (

    chart ! = 
              
     

     null ) {
    labelPanel.setLayout(new BorderLayout());  var
    chartPanel = 
          
                 
              
                  new
        ChartPanel(chart,
        false);            // Add the
        chart            to our
        panel            labelPanel.add(chartPanel, BorderLayout.CENTER);
    }

    var slider = 
    me.getComponent("jslider1"); // Set a value on the slider // By doing so, the slider OnChange
    event

    will be trigger // and the chart
        will shows
        accordingly slider.setValue(2007);  //me.say("End Initialize"); }
        function createDataSet() { // Initialize the dataset
        for the
    chart

    var dataset = 
          
              
          
    
     


new DefaultKeyedValues2DDataset(); dataset.addValue(0.1,
    "Female", "100+"); dataset.addValue(-0.1, "Male", "100+"); for (
    
    var j =  
      
      
       0;  j <  10; j++ ) {
        var ageGroup = "";
        switch (j) {
            case 0: ageGroup = "90-99"; break;
            case 1: ageGroup = "80-89"; break;
            case 2: ageGroup = "70-79"; break;
            case 3: ageGroup = "60-69"; break;
            case 4: ageGroup = "50-59"; break;
            case 5: ageGroup = "40-49"; break;
            case 6: ageGroup = "30-39"; break;
            case 7: ageGroup = "20-29"; break;
            case 8: ageGroup = "10-19"; break;
            case 9: ageGroup = "0-9"; break;
        }
        dataset.addValue(0.1, "Female", ageGroup);
        dataset.addValue(-0.1, "Male", ageGroup);
    }
    return dataset;
}

function initializeIt() {
    // set the classpath so classes can be found
    var tag = bsf.lookupBean ("tag");
    var myContext = tag.getPropertyInTree("context");
    
    if ( myContext != null ) {
        importClass(Packages.com.ultrid.xproto.XProto);
        var runner = XProto.sharedInstance;
        var homeDir = java.lang.System.getProperty("user.home");
        myContext = homeDir+"/.protoloop"+myContext;
        runner.addDirectoryToClassPath(homeDir+"/.protoloop");
        runner.addFileToClassPath(myContext + "lib/jcommon-1.0.12.jar");
        runner.addFileToClassPath(myContext + "lib/jfreechart-1.0.6.jar");
    }
}

function createDataArray() {
    // Reference http://esa.un.org/unpp/index.asp?panel=2
    // "Male",1950," 00-04",172440
    // "Female",1950," 00-04",164293
    // "Male",1950," 05-09",138073
    // "Female",1950," 05-09",132467
    
    var populationData = 
    [172440,164293,138073,132467,132510,126280,123086,117512,113098,109691,
    98051,98343,83841,83778,80925,82598,73468,74668,63461,64451,
    52996,55081,42798,46213,34684,39443,25235,30438,16680,21537,
    9325,13226,3630,5736,1377,2396,361,692,61,130,
    7,17,206651,198228,161245,153191,135375,129536,129740,123897,
    119280,114627,109475,106669,94631,95204,80007,80284,76729,79118,
    68234,70535,57977,60967,46085,50275,36663,41444,27681,33224,
    18356,23685,10482,14662,4542,7142,1339,2338,351,675,
    59,126,7,16,220391,211270,194778,186107,158395,150367,
    132637,127023,126415,121359,115884,111569,106266,103625,91096,92027,
    76137,77065,72182,75565,63145,66908,51609,56570,39146,45108,
    29643,35398,20421,26331,11762,16539,5152,8105,1705,2997,
    350,676,59,126,6,16,245172,234264,209880,200099,
    191831,182823,155739,148109,129552,124612,123522,118781,112930,108666,
    103220,100793,87609,89062,71993,73739,67136,71725,57135,62646,
    44536,51244,31512,38953,22254,28668,13315,18838,5904,9428,
    1982,3528,457,899,60,129,7,16,265955,253991,
    235953,224564,207347,197138,189197,180556,152222,145874,126813,121998,
    120818,116463,110051,106071,100061,98176,83989,86223,67541,70440,
    61546,67672,50169,57526,36792,45316,23574,31891,14826,21058,
    6961,11270,2359,4320,551,1118,81,181,7,18,
    277670,265338,257678,244949,233466,221620,204914,194654,185989,177988,
    150126,143821,124709,119868,118344,114377,107106,103552,96630,95551,
    79637,83273,62296,66810,54516,62363,41839,51181,27883,37370,
    15560,23557,7852,12921,2827,5363,672,1437,100,237,
    9,25,279479,266794,269129,256388,255053,242505,230654,219426,
    202096,192214,183472,175619,148182,142393,121883,117357,115705,112481,
    103257,100800,92178,92542,74136,79582,55534,61859,45656,55334,
    32486,43315,19118,28815,8311,14939,3181,6392,813,1888,
    127,328,13,36,301130,285500,270965,258243,266781,254168,
    252906,240668,227649,217189,199113,190087,180853,173595,145647,140547,
    118929,115328,111689,109942,98255,97690,85697,88469,66500,74272,
    47044,55440,35794,47200,22093,33109,10262,17873,3442,7352,
    906,2260,154,452,17,54,324256,306514,293496,277952,
    268859,256383,264336,252341,249250,238162,224388,214913,196661,188263,
    177919,171522,142394,138289,115319,112856,106705,106688,91747,93514,
    77299,82990,56912,67089,37237,47347,24964,36682,12264,21199,
    4389,9094,1064,2765,183,573,22,76,323935,305447,
    317139,299439,291563,276274,266613,254826,260265,249686,245162,235534,
    220892,212779,192981,186047,173829,168967,138263,135823,110419,109853,
    99915,102543,83206,88011,66626,75491,45527,57850,26392,37066,
    14178,23890,5423,11128,1401,3557,228,747,27,102,
    320434,301212,317138,298637,315130,297700,289642,274975,263197,252582,
    256117,246872,240973,232859,216669,210340,188539,183560,168556,166021,
    132323,132351,103742,105866,90879,96859,72196,80357,53661,65401,
    32983,46246,16099,25581,6804,13517,1881,4704,324,1020,
    36,142,321810,302261,314051,294903,315069,296925,312742,296284,
    286103,272893,259101,249807,251936,243907,236465,229967,211559,207248,
    182663,180185,161606,162085,124612,127749,95082,100381,79369,88991,
    58927,70216,39475,52721,20792,32925,8103,14996,2529,6089,
    474,1481,56,212,330433,310712,316089,296632,312374,293421,
    313274,295664,309561,294333,282229,270183,254840,246560,247152,240577,
    231083,226613,205442,203667,175429,176026,152625,156732,114779,121611,
    83904,92738,65324,78275,43974,57187,25241,37941,10732,19867,
    3127,7082,664,2049,85,327,336581,316720,325083,305616,
    314478,295241,310653,292228,310408,293946,305914,291818,278001,266950,
    250164,243218,241857,237184,225030,222980,198071,199375,166263,170594,
    141171,149645,102025,113042,70004,82276,49303,64356,28618,41790,
    13275,23301,4247,9725,853,2528,122,481,336411,316770,
    331701,312173,323599,304368,312855,294145,307988,290682,307055,291621,
    301860,288625,273377,263522,245061,239849,235939,233596,217708,218656,
    188615,193727,154428,163343,126123,139608,85927,101098,53724,68495,
    32581,47641,15357,26230,5370,11680,1181,3601,162,639,
    331646,312515,332047,312791,330369,311084,322081,303379,310310,292703,
    304875,288518,303293,288585,297317,285181,268234,260046,239327,236316,
    228685,229315,208102,212913,176104,186071,138671,152973,106814,125423,
    66707,85097,36197,51630,17787,30418,6348,13514,1526,4454,
    221,921,324632,306575,327798,309075,330882,311865,328986,310227,
    319644,302031,307332,290621,301334,285615,298996,285270,292192,281679,
    262392,256430,232226,232143,219062,223626,195125,205030,159105,174954,
    118224,138166,83444,106206,45599,65101,20218,33787,7499,15974,
    1843,5312,289,1199,318883,301773,321273,303638,326781,308294,
    329638,311138,326678,308989,316774,300031,303907,287776,297248,282404,
    294117,281869,286295,277998,255059,252141,222730,226587,205938,215750,
    177221,193423,136679,158849,93171,117860,57470,81806,25945,43381,
    8770,18289,2229,6405,356,1490,317040,300453,315961,299292,
    320400,302992,325655,307670,327474,310009,323947,307087,313475,297257,
    299968,284611,292625,279108,288510,278305,278808,273594,245160,246396,
    209742,218879,187709,204056,153205,176396,108699,136484,64879,91736,
    32958,54958,11495,24003,2682,7591,437,1839,314526,298418,
    314492,298375,315217,298767,319386,302463,323638,306645,324924,308235,
    320820,304429,309674,294153,295512,281362,287316,275670,281346,274052,
    268592,267660,231510,238389,191674,207390,163094,186783,122832,152503,
    76593,107310,37771,62512,14741,30607,3601,10205,535,2258,
    309519,294005,312331,296702,313864,297958,314307,298328,317512,301543,
    321285,305021,322020,305753,317214,301454,305375,290965,290408,277998,
    280524,271599,271523,268333,254355,259337,212347,226385,167188,190357,
    131652,162348,87423,120943,45262,74137,17171,35380,4660,13033,720,3049];
    
    // Strore the data table so the OnChange script can retrieve and use it
    bsf.registerBean("populationData", populationData);
}

Script: SetChart.js


var me = bsf.lookupBean ("me");
// Get the slider by it's id
var slider = me.getComponent("jslider1");

var isAdjusting = slider.getValueIsAdjusting();

// If the slider is not adjusting
if ( !isAdjusting ) {
    // Get the value we select on slider
    var value = slider.getValue();
    
    // Retrieve our dataset previously save
    var dataset = bsf.lookupBean("dataset");
    if ( dataset != null ) {
        var year = value;
        
var nbyear =  
      
year -  1950;

var years = 

      
 (nbyear - (nbyear %
    5))/5; // retrieve the offset in data table
    var offset = 
    
         
     (years  *
    42)+42; // Retrieve our populationData previously save
        var pd = bsf.lookupBean("populationData");
        var femaleTotal =   pd[offset-1];
        var maleTotal =     
              
         pd[offset-2];  // data are
        
        in thousands, we display in millions
        dataset.setValue(pd[offset-1]/1000, "Female",  "100+");
        dataset.setValue(-pd[offset-2]/1000, "Male",  "100+");
        offset - = 
        
                
          
        2; for (
        var j= 
           0;  j <  10; j++ ) {
            var ageGroup = "";
            switch (j) {
                case 0: ageGroup = "90-99"; break;
                case 1: ageGroup = "80-89"; break;
                case 2: ageGroup = "70-79"; break;
                case 3: ageGroup = "60-69"; break;
                case 4: ageGroup = "50-59"; break;
                case 5: ageGroup = "40-49"; break;
                case 6: ageGroup = "30-39"; break;
                case 7: ageGroup = "20-29"; break;
                case 8: ageGroup = "10-19"; break;
                case 9: ageGroup = "0-9"; break;
            }
            var female = pd[offset-1]+pd[offset-3];
            femaleTotal += female;
            var male = pd[offset-2]+pd[offset-4];
            maleTotal += male;
            dataset.setValue(female/1000, "Female", ageGroup);
            dataset.setValue(-male/1000, "Male", ageGroup);
            offset -= 4;
        }
        var pattern = "##,###.###";
        var myFormatter = new DecimalFormat(pattern);

        var maleLbl = me.getComponent("jlabel7");
        var output = myFormatter.format(maleTotal/1000);
        maleLbl.setText(output+" millions");
        var femaleLbl = me.getComponent("jlabel8");
        output = myFormatter.format(femaleTotal/1000);
        femaleLbl.setText(output+" millions");
        var totalLbl = me.getComponent("jlabel9");
        output = myFormatter.format((femaleTotal+maleTotal)/1000);
        totalLbl.setText(output+" millions");
        //me.say("End SetChart");
    }
}