DConfig 
SourceForge.net Logo PHP Logo

Dynamic Configuration Toolkit


Web Demo

  1. Prerequisites
  2. Start Derby Database Server
  3. Deploy Web Demo War File to Apache Tomcat
  4. Startup Tomcat Web Server
  
  5. Run JSP DConfigReader / DConfigWriter Web Demo
      5.1 Open dconfigReaderWriter.jsp page
      5.2 Search DConfig Data
      5.3 Change Data from JSP page
      5.4 Change Data from GUI Editor
      5.5 Create new DConfig data in jsp page
  
  6. Run Struts / Yahoo UI Ajax Web Demo
      6.1 Open Struts / Yahoo UI Ajax Demo Page
      6.2 Search DConfig Key through Ajax
      6.3 Search DConfig Attribute through Ajax
  
  7. Run JSF Web Demo Using DConfig GUI Editor
      7.1 Open JSF Web Demo Page
      7.2 Select Search Tab
      7.3 Launch DConfig GUI Editor
      7.4 Config Derby JBDC Driver
      7.5 Config Connection Wizard
      7.6 Update Config Values
      7.7 Refresh DConfig Cache
      7.8 View the Changes On the Fly
  
  8. Run JSF Web Demo Without DConfig GUI Editor
      8.1 Preferences Tab
      8.2 Submit Preferences
      8.3 View the Changes On the Fly
  9. Shutdown Tomcat
10. Shutdown Derby Database Server

1. Prerequisites      

Download dconfig-1.0-*bin.zip unzip it to a folder.

The Dynamic Configuration Toolkit Web Demo were written in JSF, Java Server Faces, and default database using Java DB / Apache Derby.

JDK - Java SE 5.0 is required, which can be downloaded from http://java.sun.com/javase/downloads/index.jsp.

Web Server - Apache Tomcat 5.* or later or Servlet 2.4+/JSP 2.0+ compliant web servers. However, this document is written for Apache Tomcat web server. If you're using a different web server, please consult related document to see how to deploy a war file to your web server.

Apache Tomcat can be obtained from http://tomcat.apache.org/.

2. Start Derby Database Server      

Change to dconfig-1.x /path/to/unzipped/dconfig-1.x/dconfig-db/src/script.
run 
    $ chmod u+x *.sh
    $ ./derby-startup.sh  (Linux)
or 
    derby-startup.bat   (Windows)

Sample output:
[dconfig-db/src/script]$ ./derby-startup.sh
java -cp ../../lib/derby.jar:../../derbynet.jar 
org.apache.derby.drda.NetworkServerControl start -h localhost -p 1527
Server is ready to accept connections on port 1527.

3. Deploy Web Demo War File to Apache Tomcat      

Remove previous copies if any: 
rm -rf    /path/to/tomcat-home/webapps/dconfig* (Linux)
del /s /f \path\to\tomcat-home\webapps\dconfig* (Windows)

Copy /path/to/unzipped/dconfig-1.x/dconfig-webdemo/dconfig-webdemo.war to /path/to/tomcat-home/webapps
Copy /path/to/unzipped/dconfig-1.x/dconfig-ui-jnlp/dconfig-ui-jnlp.war to /path/to/tomcat-home/webapps

4. Startup Tomcat Web Server      

Run
    /path/to/tomcat-home/bin/startup.sh (Linux)
or
    \path\to\tomcat-home\bin\startup.bat (Windows)

5. Run JSP DConfigReader / DConfigWriter Web Demo      

5.1 Open dconfigReaderWriter.jsp page      

Points browser to http://localhost:8080/dconfig-webdemo/jsp/dconfigReaderWriter.jsp

where 8080 is the default port number. Replace it with the actual port number if different. You can view dconfigReaderWriter.jsp source code here.
When the page shows up, it looks like the following image:
dconfigReaderWriter-startup.png
If DConfig Demo database has yet to be created, click Create Derby Demo Database button.

5.2 Search DConfig Data      

Type 'config.view.demo.page1' in the key name input box, enter 'tab names' in the attribute name input box

dconfigReaderWriter-enterSearchData.png
Click Searc from Cache button.
dconfigReaderWriter-searchResults.png
In the above screen shot, Data Type has been changed to 'String Array'; Attribute Value box is populated with 'Database&^#;DConfig UI - JNLP&^#;Refresh&^#;Search&^#;Results', where &^#; is the array element delimiter; Array elements shows the actual array items without delimiler &^#;

Now click Launch DConfig GUI Editor link, follow steps described in 6.3, 6.4 and 6.5 to launch DConfig GUI Editor and connect to Derby Demo database. Once DConfig GUI Editor is up, select key config.view.demo.page1, switch to update mode by click viewMode.png toolbar button, and click on the value column of attribute 'tab names':
dconfigReaderWriter-Editor-tabNames-a.png

5.3 Change Data from JSP page      

In the Attribute Value box, change 'Search' to 'My Search', click Write to DB / Cache button, you should see something like the following screen shot:

dconfigReaderWriter-write-read.png
Now switch to DConfig GUI Editor, click Close button to close the Edit Array Value. Press F5 button to refresh data; click on the value column of attribute 'tab names' again, notice that 'My Search' appears:
dconfigReaderWriter-Editor-tabNames-b.png

5.4 Change Data from GUI Editor      

On the GUI Editor, select 'Results' array element, click edit-selected-entry.png Edit Selected Entry button; change the value to 'My Results'. Click Close button twice, then click save.png Save button:

dconfigReaderWriter-Editor-tabNames-MyResults.png
Switch back to dconfigReaderWriter web page, click on Reload DConfig Cache, and Search from Cache buttons:
dconfigReaderWriter-reloadCache-search.png
Notice that 'My Results' is displayed in web page.

5.5 Create new DConfig data in jsp page      

In the DConfigReader / DCoonfigWriter Demo page, enter 'test.admin.application' in the Key Name inpiut box, enter 'max users' in the Attribute Name input box. Complete the rest fields according to the following screen shot:

dconfigReaderWriter-new-data.png
Click Write to DB / Cache button. Switch back to DConfig GUI Editor, select root node, press F5 to refresh the view. You should see that the new data has been added to the DConfig GUI view:
dconfigReaderWriter-Editor-new-data.png
You can use DConfigReader / DCoonfigWriter Demo page along with 6. Run JSF Web Demo Using DConfig GUI Editor and 7. Run JSF Web Demo Without DConfig GUI Editor.

6. Run Struts / Yahoo UI Ajax Web Demo      

6.1 Open Struts / Yahoo UI Ajax Demo Page      

Points browser to http://localhost:8080/dconfig-webdemo/dconfigDemo.do

where 8080 is the default port number. Replace it with the actual port number if different.
When the page shows up, click on the DConfigReader/Writer tab.
Struts Demo

6.2 Search DConfig Key through Ajax      

Type c in the key name input field, an ajax query is sent to the server side action class. A Yahoo UI auto-complete list is populated with the returned keys. See following screen shot:
Struts Demo

6.3 Search DConfig Attribute through Ajax      

Select config.view.demo.page1 from the list, type * in the attribute name input field, an ajax query is sent to the server side action class. A Yahoo UI auto-complete list is populated with the returned attributs. See following screen shot:
Struts Demo
Select tab names from the list, you may follow steps similar from 5.2 to 5.5 to continue on the struts / yui ajax demo.

7. Run JSF Web Demo Using DConfig GUI Editor      

7.1 Open JSF Web Demo Page      

Points browser to http://localhost:8080/dconfig-webdemo/

where 8080 is the default port number. Replace it with the actual port number if different.
When the page shows up, click on the Database tab (if not already is).
Database Tab
Click on the Create Derby Demo Database button to create a demo database.

You should see Derby database started successfully message shortly.

Source 1. Code Analysis - Create Derby Demo Database JSF backing bean code

The following JSF backing bean code will be executed after Create Derby Demo Database button is clicked:

import org.moonwave.dconfig.*;

public String btnCreateDemoDB_action() {
	LibInitializer.initialize();
	AppState.setDemo(true);
	AppState.setDerby(true);
	DemoDbManager.startup();
	if (new DemoDataPopulator().populate()) { // create DB schema
	        log.info("run DemoDataPopulator().populate() ok");
	        setStatus("Derby database started successfully.");
	        CacheManager.load();
	} else {
	        log.error("run DemoDataPopulator().populate() failed");                
	        setStatus("Failed to create Derby database. Check log file for details.");
	}
	return null;
}

7.2 Select Search Tab      

Select Search Tab
tab-search
Click Sample Query link, then click Execute Query button. You should see results table is displayed under Results Tab. The results table is displayed as 10 rows, 6 columns per page as shown below.
tab-results

7.3 Launch DConfig GUI Editor      

Select DConfig UI - JNLP tab.
tab-jnlp
Source 2. Code Analysis - JSP code to launch DConfig GUI Editor

Use the following code in JSP page to launch DConfig GUI Editor:

<a href="/dconfig-ui-jnlp/dconfig.jnlp"><img border=0 src="webstart_small.gif">Launch DConfig Editor</a>


Click the Launch button or Launch DConfig Editor link, at the Opening dconfig.jnlp popup box (if jnlp file type has not been linked to javaws), select Open with Browse.... From the file chooser, select javaws from JRE_HOME/javaws directory, click Open, then click OK buttons to continue.
openjnlp
Since the certificate from this web demo is not issued from Certification Authorities, such as VeriSign, Thawte, Entrust, etc., a Wainging - Security popup box will be shown up as below, click the Run button to proceed. The DConfig Editor should be launched shortly once all the downloads are completed. warning

7.4 Config Derby JDBC Driver      

From DConfig Editor, select Tools Driver Manager... to configure the JDBC drivers.
Click JavaDB/Derby server in the Driver Name list. Click the folder icon at the end of JDBC Driver | Driver File Path.
derby-driver
Select jar file /path/to/unzipped/dconfig-1.x/dconfig-db/lib/derbyclient.jar. Click Open and close dialog.
derbyclient

7.5 Config Connection Wizard      

Select Tools | DB Connection... to configure a connection.
dconfig schema
Click Add a new connection button, enter or select the following info:
Alias:          derby-demo
JDBC Driver:    JavaDB/Derby server
Database URL:   jdbc:derby://localhost:1527/dcfgdemo;create=true
User Name:      app
Password:       app
Check both Save Password and Set as default connnection.
Click Save Changes button (the 2nd vertical button).

Click Connection button.
or
Click top-right X to close the dialog, then Click the 3rd toolbar button to the right (Connection to default database or open connection wizard toolbar), the DConfig Editor should connect the demo Derby database with tree populated.

7.6 Update Config Values      

Expands to config.view.demo.page1 tree node from the DConfig Editor, click the Update / View mode toggle button, the last one on the toolbar, to switch the Editor to the update mode.

Click value column of the '#Rows per page' attribute, change the value to 8; Press Close button to close Edit Value window.
edit-visible-rows
Click value column of the 'tab names' attribute, change 'Search' to 'My Search'; Press Close button twice to close Edit Value(s) windows.
dconfig schema
Click value column of the 'visible columns' attribute, change data from 1, 2, 3, 4, 5, 6 to 1, 2, 3, 4, 5 by select 6 and click delete-button button.
edit-visible-cols

Click the toolbar Save button save-button.

7.7 Refresh DConfig Cache      

Select Refresh Tab. Click Reload DConfig Cache (Reload Dynamic Configuration Data) link. tab-refresh
Source 3. Code Analysis - Refresh DConfig Caches

Reload DConfig cache using the following method:

org.moonwave.dconfig.dao.CacheManager.load();

The complete action code in JSF backing bean:

#import org.moonwave.dconfig.dao.CacheManager;
#import org.moonwave.dconfig.util.Timer;

public String linkReloadDconfigCache_action() {
    Timer timer = new Timer();
    if (CacheManager.load()) {
        setStatus("Reload DConfig cache" + timer.toMilliseconds());
    } else {
        setStatus("Reload DConfig cache failed");
    }
    return null;
}

org.moonwave.dconfig.dao.CacheManager.load() loads all DConfig data from database and saves them into memory, this ensures that all DConfigReader methods work really fast and have no performance issue for repeat calls, even inside a inner loop.

7.8 View the Changes on the Fly      

You may have notice that the 4th tab name has changed from Search to My Search.
Select Results tab. The table now display as 8 rows, 5 columns per page.
view-changes-on-fly

You may repeat steps 7.6 to 7.8 to adjust the mentioned attribute values to see the dynamic feature offered by Dynamic Configuration Toolkit.

Source 4. Code Analysis - Use DConfigReader to display data, set up layout on the fly
/**
 * Callback method that is called just before rendering takes place.
 * This method will only be called for the page that will actually be rendered
 * (and not, for example, on a page that handled a postback and then navigated 
 * to a different page). Customize this method to allocate resources that will
 * be required for rendering this page.
*/
public void prerender() {
    String[] tabeNames = DConfigReader.getStringArray("config.view.demo.page1", "tab names");
    if (tabeNames.length == 5) {
        int i = 0;                         // Default tab names:
        this.tab1.setText(tabeNames[i++]); // Database
        this.tab2.setText(tabeNames[i++]); // DConfig UI - JNLP
        this.tab3.setText(tabeNames[i++]); // Refresh
        this.tab4.setText(tabeNames[i++]); // Search
        this.tab5.setText(tabeNames[i++]); // Results
    }
    ...
    // set up rows per page
    int rowsPerPage = DConfigReader.getInteger("config.view.demo.page1", "#Rows Per Page", 5);
    tableRowGroup1.setRows(rowsPerPage);   
    ...
    // set up visible columns
    try {
        int[] visibleColumns = DConfigReader.getIntegerArray("config.view.demo.page1", "visible columns");
        for (int i = 0; i < visibleColumns.length; i++) {
            int col = visibleColumns[i];
            columns[col].setVisible(true); //set up visible columns
        }
    } catch (Exception e) {
    }
}

DConfigReader methods read DConfig data from memory caches, which are populated by org.moonwave.dconfig.dao.CacheManager.load().
Application use code something like these to retrieve attribute values:

String[] tabeNames = DConfigReader.getStringArray("config.view.demo.page1", "tab names");
int rowsPerPage = DConfigReader.getInteger("config.view.demo.page1", "#Rows Per Page", 5);
int[] visibleColumns = DConfigReader.getIntegerArray("config.view.demo.page1", "visible columns");

8. Run JSF Web Demo Without DConfig GUI Editor      

8.1 Preferences Tab      

Select Preferences tab, you will see the initial screen like the following:

tab-preferences-start

8.2 Submit Preferences      

Change '#Rows per page' attribute value to 6;
Change tab name for Tab5 from 'Results' to 'My Results';
Uncheck Column 4 (Data Type);
Check Auto Refresh DConfig Data after Submit;
Press Submit Preferences button.
tab-preferences-submit

Source 6. Code Analysis - Submit Preferences JSF backing bean code
/**
 *  Process the Submit Preferences button click action. Return value is a navigation
 *  case name where null will return to the same page.
 */
public String btnSubmitPreferences_action() {
    try {
        // save '#Rows Per Page'
        int rowsPerPage = Integer.parseInt(this.txtRowsPerPage.getText().toString());
        DConfigWriter.writeInteger("config.view.demo.page1", "#Rows Per Page", rowsPerPage);

        // save 'tab names'
        String[] sArray = new String[5];
        sArray[0] = this.txtTabname1.getText().toString();
        sArray[1] = this.txtTabname2.getText().toString();
        sArray[2] = this.txtTabname3.getText().toString();
        sArray[3] = this.txtTabname4.getText().toString();
        sArray[4] = this.txtTabname5.getText().toString();
        DConfigWriter.writeStringArray("config.view.demo.page1", "tab names", sArray);

        // save 'visible columns'
        int[] iArray = new int[6];
        int count = 0;
        if (this.ckCol1.isChecked())
            iArray[count++] = 1;
        if (this.ckCol2.isChecked())
            iArray[count++] = 2;
        if (this.ckCol3.isChecked())
            iArray[count++] = 3;
        if (this.ckCol4.isChecked())
            iArray[count++] = 4;
        if (this.ckCol5.isChecked())
            iArray[count++] = 5;
        if (this.ckCol6.isChecked())
            iArray[count++] = 6;
        DConfigWriter.writeIntegerArray("config.view.demo.page1", "visible columns", iArray);
                
        setStatus("Write DConfig data into database successful");
    } catch (Exception e) {
        setStatus("Failed to write DConfig data into database");
        log.error(e, e);
    }
    // reload DConfig data into memory automatically
    if (this.ckAutoReload.isChecked()) {
        CacheManager.load();
    }
    return null;
}


8.3 View the changes on the fly      

You may have notice that the 5th tab name has changed from Results to 'My Results'.
Select 'My Results' tab. The table now display as 6 rows, 4 columns per page.
view-changes-on-fly-2

You may repeat steps 8.2 to 8.3 to adjust the mentioned attribute values to see the dynamic feature offered by Dynamic Configuration Toolkit.

9. Shutdown Tomcat      

/path/to/tomcat-home/bin/shutdown.sh (Linux)
or
/path/to/tomcat-home/bin/shutdown.bat (Windows)

10. Shutdown Derby Database Server      

Open a new teminal or command console.
cd /path/to/unzipped/dconfig-1.x/dconfig-db/src/script.
run 
    ./derby-shutdown.sh  (Linux)
or 
    derby-shutdown.bat   (Windows)
Sample output
[dconfig-db/src/script]$ ./derby-shutdown.sh
java -cp ../../lib/derby.jar:../../lib/derbynet.jar 
org.apache.derby.drda.NetworkServerControl shutdown -h localhost -p 1527
Shutdown successful.
A directory called dcfgdemo is generated by Derby database server, you can safely remove the directory. If you don't remove it, start Derby server again, dcfgdemo database will be loaded automatically next time.