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 !!!



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) |
    "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
    "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



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:




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 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 id="rowrows" style="display:none">No. %row% of %rows%</div>              <!-- display actual row and number rows retrieved -->


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({
         "%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

    // set master roda_dbwindow
    // save parameters as instance vars of roda_lb

    // eventually set additional retrieval args in sql of rdbw_master
    // ..........
    // call retrieve for master roda_dbwindow


<!-- HTML -->

<!-- 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.