Database driven listboxes

1. Download and install the new rodakino version

We reuse the Tables from Tutorial #2: Field validation in rodakino RAD

You find the new version here: rodakino_0_2_1.tgz

Also look here for  rodakino RAD download and installation . Be sure to install rodakino_0_2_1.tgz, not an older one !!!

 

Goal:

We display a "rodakino listbox" containing the possible Country Abbreviations from the database and the user selects one of the values by clicking/doubleclicking it.

 

2. We need two database tables

Both tables already exist where used in Tutorial #2, Field validation

$> psql -U node node

node=> \d COUNTRIES
              Table "public.countries"
     Column     |         Type          | Modifiers
----------------+-----------------------+-----------
 country_abbrev | character varying(10) | not null
 country_name   | character varying(70) |
Indexes:
    "pk_countries" PRIMARY KEY, btree (country_abbrev)
Referenced by:
    TABLE "zipcodes_adv" CONSTRAINT "fk01_zipcodes_adv" FOREIGN KEY (country_abbrev) REFERENCES countries(country_abbrev)

 

node=> \d ZIPCODES_ADV
            Table "public.zipcodes_adv"
     Column     |         Type          | Modifiers
----------------+-----------------------+-----------
 country_abbrev | character varying(10) | not null
 zipcode        | character varying(10) | not null
 city           | character varying(50) | not null
Indexes:
    "pk_zipcodes_adv" PRIMARY KEY, btree (country_abbrev, zipcode, city)
Foreign-key constraints:
    "fk01_zipcodes_adv" FOREIGN KEY (country_abbrev) REFERENCES countries(country_abbrev)

 

2. The rodakino window rw_zipcodes_adv.hbs

This window exists and is already working and can be called from the rodakino menu.

You find it in the usual place in folder

.../rodakino/app/roda_windows/rw_zipcodes_adv.

 

You reach it with "My Menu" -> "Advanced Zipcodes".

zipcodes adv

As you see, we had to add a rodakino listbox button next to the Country Abbreviation.

The rodakino database window also already exists.

You find it in the usual place, which is:

.../rodakino/app/roda_dbwindows/rdbw_zipcodes_adv.hbs

.../rodakino/app/roda_dbwindows/rdbw_zipcodes_adv_css.hbs

 

3. The rodakino listbox button

We added the following line to rdbw_zipcodes_adv.hbs:

...

<div class="roda_lb_button" roda_lb_field="COUNTRY_ABBREV" roda_lb="rlb_country_abbrev" roda_lb_return="COUNTRY_ABBREV:1,COUNTRY_NAME:2">Rodakino listbox</div>

...

I'll explain:

* class="roda_lb_button"  is the name for css to format the button and for rodakino to find it, so never change this name!

* roda_lb_field="COUNTRY_ABBREV" descibes, which field is the target of the listbox.

* roda_lb="rlb_country_abbrev"  is the name of the rodakino listbox, which the button has to call - see below.

* roda_lb_return="COUNTRY_ABBREV:1,COUNTRY_NAME:2": When the user has selected a row in the rodakino listbox, then put the content of the first field of that row into field

  COUNTRY_ABBREV and and the second field into COUNTRY_NAME. So, if the user selected "UKR", also "Ukraine" is filled in automatically.

 

4. The rodakino listbox rlb_country_abbrev

Rodakino listboxes live in their own directory, .../rodakino/app/ roda_listboxes. So, out listbox is in .../rodakino/app/ roda_listboxes/rlb_country_abbrev.

A rodakino listbox in its essence is just a roda-window and a roda-dbwindow, as there is no need to reinvent the weel, but all together in the same directory.

 

The roda-db-window rdbw_country_abbrev is rather simple, as we dont need the query template:

{{> roda_listboxes/rlb_country_abbrev/rdbw_country_abbrev_css}}               <!-- include my stylesheet -->

<div id="rdbw_country_abbrev">                                                       <!-- thats my name, must be unique among all rdbw's -->
  <div id="row_table">                                                                <!-- container for the rdbw, name must NOT be changed -->
    <div id="row_header">                                                          <!-- container for the headlines, name must NOT be changed -->
      <div class="r_header" >Country-Abb.</div>
      <div class="r_header" >Country Name</div>
    </div>
    <div id="row_data">                                                             <!-- container for the data from postgres, name must NOT be changed -->
      <div id="row_template" class="roda_row", rownum="0" style="display:none">   <!-- template definition for one database row, name must NOT be changed -->
        <div class="roda_field"><input type="text" name="COUNTRY_ABBREV" maxlength="10" value=""></div>
        <div class="roda_field"><input type="text" name="COUNTRY_NAME" maxlength="70" value=""></div>
      </div>
    </div>
  </div>
  <div id="rowrows" style="display:none">No. %row% of %rows%</div>              <!-- display actual row and number rows retrieved -->
</div>

 

The roda-window rlb_country_abbrev is rather simple too, no need for insert/update/delete statements:

<script type="text/javascript">
  // create instance of rodakino listbox
  var rdbw_master = $("#rdbw_country_abbrev").roda_dbwindow({
    sql: "select COUNTRY_ABBREV,COUNTRY_NAME from COUNTRIES " +
         "%WHERE_CLAUSE% order by 1"
  });

  function onDivLoad(myName,rowFields,myField,actRow,returnFields) {
    // function is called on ajax success after load
    console.log('rlb_country_abbrev.onDivLoad.1 myName: '+ myName);

    // i am the active roda_window. !! necessary for roda_menubar to work !!
    act_roda_window = myName;

    // resize the dialog
    $("#"+myName).roda_window("option","height",550);
    $("#"+myName).roda_window("option","width",660);

    // set master roda_dbwindow
    $("#"+myName).roda_window("option","rdbw_master","rdbw_country_abbrev");
 
    // save parameters as instance vars of roda_lb
    $("#"+myName).roda_window("option","rowFields",rowFields);
    $("#"+myName).roda_window("option","myField",myField);
    $("#"+myName).roda_window("option","actRow",actRow);
    $("#"+myName).roda_window("option","returnFields",returnFields);

    
    // eventually set additional retrieval args in sql of rdbw_master
    // ..........
    // call retrieve for master roda_dbwindow
    rdbw_master.roda_dbwindow("retrieve",true);
  }

</script>

<!-- HTML -->
<h4>Countries</h4>

<!-- import Code of rodakino listbox roda_dbwindow -->
{{> roda_listboxes/rlb_country_abbrev/rdbw_country_abbrev }}

 

That's all!

 

You like it - leave me a message.