General Interface Blog

GI Forums and Blogs Have Moved to www.generalinterface.org

dhwang — Tue, 12 Jan 2010 19:59:50 GMT

General Interface Forums and Blogs have Moved

If you didn't already know, as part of the GI Open Source contribution to Dojo Foundation, General Interface forums and blogs are now hosted on www.generalinterface.org.

GI developers and contributors will continue the blogs and forums post on the new site.

You can access the new forums at General Interface Forums

The new blogs are at GI contributor blogs

Here's an RSS URL

Look for news on GI 3.8 releases, GI 3.9 features and latest on GI 4.0 on www.generalinterface.org.

This will be my last blog on TIBCommunity, but not the last blog for GI. So we look forward to seeing all developers on the new General Interface Forums

Creating a Firebug Log Handler

dhwang — Tue, 21 Jul 2009 19:49:51 GMT

I had this in the draft for a while.. It is actually no longer relavant in 3.7.1. However, I think it may be relavant in a different context of how to create your own custom log handler. So I'm post this now..

While GI always had its own log monitor, it is still useful to be able to log to Firebug which is the single most useful development tool for web devlopers. This is a new log handle introduced in GI 3.7.1, however, what if you're not using 3.7.1? Well the code will still work previous version of GI

It is important that this class be loaded at the very beginning, so you want to add this to the JSX/js/fx/jsx.js file

/**
 * Handles a logging record by sending it to the Firebug console.
 */
jsx3.Class.defineClass('jsx3.util.ConsoleHandler', jsx3.util.Logger.FormatHandler,  nul l,
    function(ConsoleHandler, ConsoleHandler_prototype) {
 
  // maps logger levels to console method names
  var methods = [nul l, "error", "error", "warn", "info", "debug", "debug"];
 
  ConsoleHandler_prototype.handle = function(objRecord) {
    if (window.console) {
      var method = methods[objRecord.getLevel()];
      if (method) {
        try {
          console[method](this.format(objRecord));
        } catch (e) {}
      }
    }
  };
 
});

Logger.xml


  <!-- Logs messages to the Firebug console, when available. -->
  <handler name="console" class="jsx3.util.ConsoleHandler"/>

 <!-- The global logger. -->
  <logger name="global" level="INFO">
    <handler-ref name="memory"/>
    <handler-ref name="console"/>
    <handler-ref name="ide"/>
    <handler-ref name="fatal"/>
    <!--<handler-ref name="appMonitor1"/>-->
  </logger>

How to disable rows, columns or cells edit masks in a Grid matrix.

dhwang — Fri, 10 Jul 2009 23:47:27 GMT

To disable edit masks for the entire row in a Matrix - Grid, set event property "Before Edit" with following code fragment (follwing sample disables the non-always on edit mask ,such as menu and select/combo.

Always on edit mask, such as checkbox and button, are disabled by the jsxdisabled="1" in the record row. E.g.

]]>


if (this.getRecord(strRECORDID).jsxdisabled == 1) false;

To disable Non-always-on edit mask of an entire column in a Matrix - Grid, set event property "Before Edit" (Following code disables the "comboColumn" by evaluating to false in "Before Edit" event handler).

NOTE

These sample code fragment goes into the event handler it self, but the code fragment is not part of a function, so should not use return statement. It should simply evaluate to true or false.


if (objCOLUMN.getName() == "comboColumn") false; else {jsx3.log('EVENT: (jsxbeforeedit). Record: ' + strRECORDID); }

Follow similar logic to disable edit mask of a cell based on different factors such as the value of the another column. In "Befor Edit" event property, this code


if (this.getRecord(strRECORDID).status == "Deployed" && objCOLUMN.getName() == "selectMachine" ) false;

will disable the "selectMachine" cell (column) if status cell (column) has the value "Deployed".

Update

I realized that this blog post was not clear enough regarding how different Edit Mask are disabled. First there are two types of edit masks in Matrix (editable grid Matrix control).

The first type is the "always-on" edit mask such as : button, checkbox, radio button, etc. An always-on edit mask is always displayed without user action.

The second type is the "non-always-on" edit mask such as : textbox, select, datepicker, etc. These editmask are display only when user focus on the cell.

How to do asynchronous XML resource loading.

dhwang — Thu, 11 Jun 2009 21:16:02 GMT

Some of the FAQ that user have on XML resource are: Is there a build in way of doing asynchronous loading and caching of XML document? , How do I fetch xml document into the application cache asynchronously ? and How can I make sure that what I load myself will be used by GI instead loading again from the web server?

Well, quick answer is : Yes, use

jsx3.app.Cache.getOrOpenAsync(strURL)

Asynchronous Loading

Cache documents can be loaded asychronously with the getOrOpenAsync() method. This method returns the corresponding document synchronously if it already exists in the cache. If the document does not exist in the cache, then it is loaded asynchronously and the method returns a placeholder document. The namespace URI of this placeholder document is Cache.XSDNS and its root node name is "loading".

Method getOrOpenAsync(strURL, strId, objClass) Asynchronously loads an xml document and stores it in this cache.

Parameters:

strURL {String | jsx3.net.URI} – url (relative or absolute) the URI of the document to open.
strId – the id under which to store the document. If this parameter is not provided, thestrURL parameter is used as the id.
objClass {jsx3.lang.Class} – jsx3.xml.Document (default value) or one of its subclasses. The class with which to instantiate the new document instance.

Returns:

{jsx3.xml.Document} – the document retrieved from the cache or a placeholder document if the document is in the process of loading asynchronously.

Since:

3.5

GI Performance Tuning

dhwang — Tue, 02 Jun 2009 00:18:37 GMT

On GI Performance Tuning

Performance is a big topic. A while ago I saw a blog on GI performance turning, see Sunil's blog, , which hits on some basic point of AJAX application optimization. The GI documentation also devotes two entire Chapters on this topic (Optimizing Application Performance and Optimizing Load Performance ). There's also a video tutorial on this Video 6: Optimize Performance. So, as you can see this is an important topic and a frequently asked question.

Basically there are 3 major type of performance issues that concerns GI application

1 Resource loading performance
2 HTML rendering time performance
3 Data parsing and handling

For the first type of issue, the answer in a nut shell is "asynchronous, asynchronous, asynchronous". However this very AJAX answer is not the whole picture.

Make AJAX Cacheable.

One of the cited benefits of Ajax is that it provides instantaneous feedback to the user because it requests information asynchronously from the backend web server. However, using Ajax is no guarantee that the user won't be twiddling his thumbs waiting for those asynchronous JavaScript and XML responses to return. In many applications, whether or not the user is kept waiting depends on how Ajax is used. For example, in a web-based email client the user will be kept waiting for the results of an Ajax request to find all the email messages that match their search criteria. It's important to remember that "asynchronous" does not imply "instantaneous".

Before GI 3.6, XML resources on Internet Explorer are loaded by GI using native MSXML3 Document ActiveX object's load method, which is not same as XMLHTTPRequest object. From version GI 3.3 to 3.5, GI forces the use of cache XML when a cache copy is present and regardless of the HTTP cache control metadata( Understanding IE Caching and GI 3.3-3.5. ) This was done as a workaround for an IE6 defect. From GI 3.6 and later, GI uses the XMLHTTPRequest to load XML resource and thus subject to the same caching rules.

What is not known to some developer is that resouces loaded over HTTP are not cached by the browser if it is not properly configured, expiration time and HTTP cache control are key to the use of browser cache.

What is often forgotten is that regarless of whether your application is AJAX enabled or not, it is in the end still a web-based application. This means that the standard HTML page optimization techniques still applies. These are things like (as found by Yahoo performance team, these are my top 4):

1 Add Expires header (and or HTTP Cache control header)
2 Gzip components
3 Minify Javascript
4 Configure ETags

See the full list at Yahoo performance rules, and the Special Rule for AJAX Make AJAX Cacheable.

As for the last type of issue on Data handling, what is often forgotten by AJAX developers is that the browser (especially older browser like IE6) was never designed to run a full fledge application or handle hundreds of megs of data. So developer should remember to keep the heavy lifting on the server and allow the the client GI application to fetch only the neccessary data when it's needed.

Using hide / show, (setting "visibility")

One of the optimization technique I've seen for HTML rendering is to use the "Visibility" property. What the developer should know about this technique is that GI has a dual DOM architecture. This means that GI is architected to use a secondary abstraction DOM used to model and keep track of GI objects. So making the object "hidden" does not remove it from the GI DOM model. On top of that, while the HTML is not visibly rendered, they are still present in the HTML DOM, which means that any DOM operation on the element will still be affected. In short, this technique should not be applied blindly everywhere. A good example is the the Tab UI control which employs this technique to hide/show the tab panes. A bad example is where the application load every canvas in an application and hides them, regardless of whether the compnents/canvas will ever be shown.

TBD : how application layout and flow design can affect performance, good and bad.

Doubts about using AMP as oppose to just using plain simple jsx3.lang classes and packages

dhwang — Wed, 27 May 2009 03:03:56 GMT

Does AMP make application harder to maintain? Is it worth re-implementing an existing application using AMP? When do you decide you need AMP as oppose to simple classes and packages?

Thiese were some of the questions and doubts that comes up during discussions on AMP. However, using AMP is really not an either or choice. You can keep using classes and packages. What you need to be aware of are the new programming facilities, the jsx3.$ functions. Especially the Asynchronous Programming Utilities

In Short, Why use AMP? Well ..

> An application's main definition XML in an AMP application can be made up of several source code files that are developped separately and then assembled together. Saving time since it is not necessary to recompose the complete application, when making a single change, but only the file that contains the change.

> There is a difference between complexity and maintainability. Making the assumption that the complexity of the underlying framework will lead to higher cost in maintenance is too simplistic.

> In the old way, coordinating the integration of a large complex application becomes a major task when everything you do may affect someone else.

Builder and AMP integration :

1. Creating AMP based application is a distributed process by nature. AMP based application are best suited for a large scale development with large number of team members. The fact that you cannot see the overall application when you work on one module should not affect the developer since he will be focused only on his module.
2. When developing using AMP, you can continue to develop GUI prototypes with Builder, which is essentially what the visual environment is good at.

> An investment in time and resource must be made to convert an application to AMP based design. There is definitely effort needed to design the proper extension point abstractions.

1. However, when the conversion work is done, the application becomes much easier to add functionality to and maintain than it would ever be using a different architectural design
2. In the case of GI builder, we're now able to disable or add new functionality into Builder without fear of inadvertently breaking the other functionalities within GI Builder.
3. The performance improvement for GI Builder over HTTP is probably at least double of what it was before.

> The architectural constraints that AMP imposes actually makes code easier to maintain and less brittle. For example, interactions between plug-ins are well defined and limited in AMP, which encourages loosely coupled application components. When using AMP correctly, spaghetti code is must less likely to occur and would never span plug-ins, greatly reducing developer burden in maintaining not just their own code but also those of others.

> Performance improvement using AMP architecture comes from

1. Forcing good design and coding practice in a asychronous environment.
2. Defining publish / subscribe interface that allow one to many communications and fully loosely coupled module
3. Allowing feature/extension based load (plug-in) and play, which can lead to smaller run-time application size.

> The well defined modular interface in AMP means that what was not possible before can now be done, such as : integrating the application without some of it parts, adding or removing parts and running a partially complete application.

Running multiple instance of same application on the same page

dhwang — Fri, 17 Apr 2009 18:52:31 GMT

This is a situaion that comes up often in portal deployment where multiple GI application could be loaded at the same time. GI provides a deployment configuration that allows you to run multiple instance of the same application.

jsxappns Application namespace. For example, jsxappns="myAPP". Since every application deployed on a single page must have a unique namespace, overriding the namespace can be useful when an application is multi-instantiated on the same page. However, the application must be written to never reference its namespace directly.

This configuration is set at the launch script tag for GI. you can find more information here Deployment Parameters

However, the developer often times build into their application code direct reference to the server name, since that is the easy way.

So, for an application to be runnable in a multi-instance deployment, the developer must take care not to use a static application server reference.

For example, you should design the code to be flexible by specifying the app server as a parameter to methods that requires it.

Here's a theme loader method

 Service.loadTheme = function(objGUI, server)  {
    server.loadInclude(server.resolveURI("jss/mydyna.xml?"+new Date().getTime()),  "mydyna_xml", "jss"); 
    server.getBodyBlock().repaint()
 }

Now how do you get the server instance without refering to a static name? If the method is invoked thought a GUI object interaction the answer is there. Each GUI object are initialized in the application server context it was started from, so it can invoke objGUI.getServer() instead of doing a static name reference.

Service.loadTheme2 = function(objButton) {
   var server =   objButton.getServer(); 
   server.loadInclude(server.resolveURI("jss/mydyna2.xml?"+new Date().getTime()), mydyna_xml", "jss"); 
   server.getBodyBlock().repaint();
 }

What if the method is not invoked through GUI interaction? The server instance can be obtained during execution of

- Project "onload" execution and accessible through this pointer (e.g. myOnLoadFunction(this);
- During deserialization of the app canvas, the onAfterDeserialized is passed the top GUI object as objJSX.

So you can use either place to initialize


<serialization xmlns="urn:tibco.com/v3.0" jsxversion="3.7">
  <name/>
  <icon/>
  <description/>
  <onBeforeDeserialize/>
  <onAfterDeserialize>eg.service.setServer( objJSX.getNS(), objJSX.getServer();</onAfterDeserialize>
</serialization>

jsx3.lang.Package.definePackage(
  "eg.service",                //the full name of the package to create
  function(service) {          //name the argument of this function
    service.APP = {}; // application server instance
    
    service.setServer = function(name, server) {
     service.APP[name] = server;    
    }
 
    service.getServer = function(name) {
      return service.APP[name];
    }
 
 Service.loadTheme1 = function(objButton) {
   var server =   service.getServer(objButton.getNS());
   server.loadInclude(server.resolveURI("jss/mydyna.xml?"+new Date().getTime()), "mydyna_xml", "jss"); 
   server.getBodyBlock().repaint();
 }
 
Service.loadTheme2 = function(objButton) {
   var server =   objButton.getServer(); 
   server.loadInclude(server.resolveURI("jss/mydyna2.xml?"+new Date().getTime()), mydyna_xml", "jss"); 
   server.getBodyBlock().repaint();
 }
});

Object-Oriented Programming in JavaScript: Packages in TIBCO General Interface

dhwang — Tue, 10 Mar 2009 23:46:28 GMT

Object-Oriented Programming in JavaScript: Packages in TIBCO General Interface

The article, “ Object-Oriented Programming in JavaScript with TIBCO General Interface,” is an overview of the primary object-oriented constructs provided in TIBCO® General Interface™. In this blog post and several others to follow, a more detailed examination of other object-oriented constructs that TIBCO offers. The first object-oriented concept addressed is one sorely lacking in the JavaScript language but provided in TIBCO General Interface: packages.

A package, or namespace, is the construct that object-oriented languages use to organize related classes into a common group. Packages promote good code organization and prevent accidental name collisions by providing uniqueness to class names.

TIBCO General Interface goes one step further than other object-oriented frameworks in providing the ability to declare the package with code-defining methods and attributes relating to it.

In TIBCO General Interface, a package can be identified using the dot-separated reverse domain name convention; Unlike Java, it does not however need to be associated with a directory in the file system with the same name. GI framework does make use of package and defines them in a file named Package.js (like jsx3/lang/Package.js and jsx3/util/package.js), however this is an abitrary code organization choice and not a requirement.

The WSDL Mapping 2 sample shows code in a package named eg.WSDL2, which holds all static methods for the sample.

The Package class provides an introspectable API for JavaScript/JSX packages. It also provides a way of defining new packages.

An instance of this class may be obtained in one of the following ways (this class may not be instantiated directly):

>> jsx3.lang.jsxpackage
>> jsx3.Package.forName('jsx3.lang')

In this example, the JavaScript object jsx3.lang is known as the package "namespace," which is a plain JavaScript object and is analogous to the constructor property of a jsx3.Class.

The following is an example of how to define a new package called eg.tests:

jsx3.lang.Package.definePackage(  "eg.tests",   // the full name of the package to create  
function(tests) {                  // name the argument of this function "eg"
    // define a static method like this:
    tests.staticMethod = function() {      ...    };
    // define a static field like this:
    tests.STATIC_FIELD = "...";  }
 
);

In line 1 of the above example, the static method definePackage() on the jsx3.lang.Package class is called with two arguments: the name of the package and an initialization function for defining the package’s members.

Unlike classes, the package and its members can only be static in nature. Although you cannot instantiate a package, you can still reference it using the thiskeyword from within its methods. If any intermediary packages have not yet been defined when calling the definePackage() method, they are automatically defined in the creation of the new package. Furthermore, the definePackage() method can be called many times for the same package. Each call adds to the existing package rather than replacing the package’s existing members. The declaration of the package is optional, except where you desire introspection, which itself is subject for another in depth discussion.

TIBCO General Interface recommends that applications refrain from creating global methods and attributes in JavaScript, which in effect modify the window object. Doing so can cause name collisions and confusion when multiple projects are brought within the same JavaScript server. Rather, if global methods are necessary, add them to packages, instead.

For a fuller example of Package, consider the WSDL Mapping 2 sample.

jsx3.lang.Package.definePackage(
  "eg.wsdl2",                //the full name of the package to create
  function(wsdl2) {          //name the argument of this function
 
   /**
    * Executes the service mapping and subscribes functions to events.
    * call this method to begin the service call (eg.wsdl2.callGetHistoricalQuotes();)
    */
    wsdl2.callGetHistoricalQuotes = function() {
      //executes the service mapping
      var objService = wsdl2.APP.loadResource("sampleGetHistoricalQuotes_xml");
      objService.setOperationName("GetHistoricalQuotes");
 
      //since the server's response (a SOAP document) will be converted to CDF,
      //compile the mapping rules into XSLT for faster conversion
      objService.compile();
      
      //subscribe and call
      objService.subscribe(jsx3.net.Service.ON_SUCCESS, wsdl2.onGetHistoricalQuotesSuccess);
      objService.subscribe(jsx3.net.Service.ON_ERROR, wsdl2.onGetHistoricalQuotesError);
      objService.subscribe(jsx3.net.Service.ON_INVALID, wsdl2.onGetHistoricalQuotesInvalid);
      objService.doCall();
    };
 
   /**
    * {String} stores the feedback from the web service.
    */
    wsdl2.wsOutcome = "Success";
 
   /**
    * {String} stores the message sent from the web service if an error occurs.
    */
    wsdl2.wsMessage = "Error";
 
   /**
    * Repaints the grid control after successful web service call.
    *
    * @param objEvent {String} static field event type for successful response.
    */
    wsdl2.onGetHistoricalQuotesSuccess = function(objEvent) {
       if ( wsdl2.wsOutcome == "Success") {
         wsdl2.APP.getJSXByName("gridResults").repaintData();
         wsdl2.APP.alert("Success","The service call was successful.");
       }
       else {
         // An error was sent from the web service.
         wsdl2.APP.alert("Web Service Error: " + wsdl2.wsOutcome, "The web service sent the following error message: <br/><br/>" + wsdl2.wsMessage, null, "Close", {width:350, height:200});
       }
    };
 
   /**
    * Creates an alert box with HTTP status code on failed service call attempt.
    *
    * @param objEvent {String} static field event type for unsuccessful response.
    */
    wsdl2.onGetHistoricalQuotesError = function(objEvent) {
      var myStatus = objEvent.target.getRequest().getStatus();
      wsdl2.APP.alert("Error","The service call failed. The HTTP Status code is: " + myStatus);
    };
 
   /**
    * Creates an alert box if one or more restrictions fails during message generation.
    *
    * @param objEvent {String} static field event type for message generation.
    */
    wsdl2.onGetHistoricalQuotesInvalid = function(objEvent) {
      wsdl2.APP.alert("Invalid","The following message node just failed validation:\n\n" + objEvent.message);
    };
 
  }
);

Two items of NOTE that is not in the code

1. The sample project uses a package Static member(property) that is not explicitly declared "eg.wsdl2.APP"
2. This package code can be made more portable / reusable by adding a function parameter of objJSX to
callGetHistoricalQuotes

e.g.

// Add a new parmeter objJSX, which will be the button instance clicked that trigger this action 
wsdl2.callGetHistoricalQuotes = function(objJSX) {
var server = objJSX.getServer(); // app server instane of the GUI object.
// ...
 
objService.setNamespace(server); //Sets the namespace for the server/project to run the service instance within.
 
 
}

Sending elements selected in a Matrix grid with XML Mapping Utility

dhwang — Thu, 05 Feb 2009 22:23:09 GMT

Author: Luke Birdeau

The XML Mapping utility does allow you to specify which records in your CDF document actually get mapped. There is a API call exposed by the jsx3.net.Service class called setCDFRecords that can be called from a mapping rule. For example, assume you have a CDF document in the XML Cache called myXML:


<data jsxid="jsxroot">
<record jsxid="a" checked="1" jsxtext="a"/>
<record jsxid="b" checked="0" jsxtext="b"/>
<record jsxid="c" checked="1" jsxtext="c"/>
<record jsxid="d" checked="1" jsxtext="d"/>
</data>

Next, Create a CDF Document mapping rule using the XML Mapping Utility for the outbound message you are creating. Set its path/value field to: myXML. Add an additional mapping rule (a Script type this time) and set the following as its path/value:

setCDFRecords("record[@checked='1']");

Here is what happened:

Any time a CDF Document mapping is encountered, all record nodes that are immediate children of the root node (data) are placed in a collection (jsx3.util.Collection). Then when a CDF Record mapping is encountered, the first record in the collection is assigned as the CDF Context and the ensuing rules are run. When a CDF Attribute mapping is encountered, the record referenced by the CDF Context is used. The mapper then repeats this as long as there are more records in the collection. By calling setCDFRecords, you effectively tell the system to not use its default query:

currentRecordContext.selectNodes("record");

rather, use a custom query. In your case:

currentRecordContext.selectNodes("record[@checked='1']");

NOTE setCDFRecords() goes with your CDF Document mapping as an additional script mapping rule.

Example We want to map the jsxtext attribute from record with jsxselected checked to WSDL Schema structure


<element name = "PersonSearch">
<complexType>
<sequence>
<element name = "QueryTarget" type = "xsd:string" maxOccurs = "unbounded"/>
</sequence>
</complexType>
</element>

In the Mapping utility, select the rule tree node PersonSearch.

1. Add a CDF Document mapping and enter the name of the CDF Document you wish to map to (its cache id).
2. Next add a Script mapping to the PersonSearch node and set its value to:

setCDFRecords("record[@jsxselected='1']");

Next, select the rule named, QueryTarget.

1. Add a CDF Record Mapping (records don't need a value).
2. Next, add a CDF Attribute mapping and enter jsxtext as the named CDF attribute on that record that you want to map to.

So to recap, you should have two mappings on the PersonSearch rule and two mappings on the QueryTarget rule.

Top / header Checkbox on Matrix Column

dhwang — Tue, 28 Oct 2008 19:22:05 GMT

Simply adding HTML for a checkbox to a matrix Column header results in a checkbox that doesn;t get checked or unchecked in response to mouse clicks.

The challenge in the implementation is that the Matrix headers are designed to use the mousedown event to reorder columns and trigger sort behaviors. This means that the click event on the checkbox gets intercepted and canceled by the header and clicking on the checkbox never causes the checkbox to get checked.

To address, use the mousedown event on the checkbox to toggle the checked state (see code below). It is also critical to cancel event bubbling to stop the Matrix from sorting and reordering when the user's intention is to check or uncheck the box.

Lastly, note that the checkbox described below is XHTML compliant. This is important if you intend your app to ever run on an XHTML Web page (and it's simply good practice these days to author well-formed HTML).

 <input type="checkbox" 
onmousedown="this.checked = !this.checked; jsx3.gui.Event.wrap(event).cancelBubble();" 
onclick="jsx3.gui.Event.wrap(event).cancelBubble();return false;" 
onmouseup="jsx3.gui.Event.wrap(event).cancelBubble();" />

Darren Hwang (channeling Luke Birdeau)

Some useful Builder usage tips

dhwang — Tue, 21 Oct 2008 19:46:14 GMT

Reassign the "ctrl+s" hot key to "Save & Reload".(Goto Builder Menu "Tools" > "IDE Settings" > "IDE Hot Keys" , locate "Save & Reload" , double click and press CTRL S keys)

Quickly locate a component using "ctrl+click" on a GUI control in the canvas to select the component on the "Component Hiearchy" palette. (NOTE : the matrix component swallows the "ctrl+click". So in order to click select a matrix control, you must do the clik on the little grey patch under the vertical scrollbar where the events bubbling is not cancel)

Float the "Component Libraries" palette to give more display area for the "Properties Editor" and "Event Editor" palettes. (This is really just a preference, but I find it useful since you can see more of the properties at a glance).

Update

Context sensitive help press keys "alt+F1" while focusing on the component you like get help on (For example, component hiearchy tree) to open the HTML Doc page on the component.

Useful tools for AJAX application development

dhwang — Tue, 14 Oct 2008 00:21:03 GMT

These software tools provide additional assistance in developing tests:
1. For Internet Explorer, download and install the Developer Toolbar. This tool
provides a very useful DOM Explorer function that allows you to inspect the
generated HTML markup at runtime.
Microsoft Internet Explorer Developer toolbar

2. Download and install Visual Web Developer 2005 Express Edition. This web
IDE provides syntax highlighted editing for HTML, XML and JavaScript.
Visual Studio Express

3. For Firefox, the best debugging tool is

Firebug Addon

4. For Firefox, you can alternatively download and install the Web Developer toolbar.
Firefox Developer Toolbar add-on

5. Best IDE editor for Javascript is IntelliJ IDEA, but you need to pay license for this

6. If you use the Eclipse IDE, install the JSEclipse plug-in for JavaScript editing.
JSEclipse Editor plugin

7. Alternative free editor, try Notepad++ which supports more than two dozen different programming language editing. Also download the FunctionList plugin which will show you list of methods and class in an easy to access side pane.

Notepad++

How to do row highlight of Table row on mouse over

dhwang — Fri, 10 Oct 2008 00:45:24 GMT

Table Spyglass Event property enter this code.


var id = this.getId() + "_" + strRECORDID; 
if (id) document.getElementById(id).style.backgroundColor="yellow";
if (document.getElementById(this.lastid)) document.getElementById(this.lastid).style.backgroundColor=''; 
this.lastid = id;

Cooking with GI Properties (part 1)

vic — Wed, 13 Aug 2008 19:06:29 GMT

I'm a big fan of the various food network presentations that provide people new to cooking with simple recipes that introduce important concepts. And I also enjoy the way the presenters make elegant meals evolve from basic ingredients found in most kitchens. That got me to thinking about General Interface as the professional kitchen for cooking up tasty web applications and about how the GI Properties Editor is a way to display a collection of available ingredients for each of the on-screen components. I told you that I'm addicted to GI; even a cooking show can't keep me from thinking about it. In this segment, I'll review the various properties that relate to a core component of any GI application: the Block.

The official name of the Block component is the "jsx3.gui.Block" and I've picked it as our starter course because many of the other GI components base their characteristics on it through a scheme called inheritance. But inheritance is a topic better covered in another segment. The Properties Editor will change the list of available settings based on what is currently selected in the Builder Component Hierarchy and because I've added a Block to my new page, the Properties Editor starts right off with showing us that the "Object Type" is in fact the "jsx3.gui.Block". Having the object type prominently displayed is really helpful if you are looking at an application created by someone else and you are unfamiliar with how things are organized.

Gazing down the Properties Editor rows, the next item is the "ID". This is assigned by the system and is unique for all the items in your project. If you've done any web design without a tool like GI, you might have named one of your html tagged items in a similar fashion. Such as:

<span id="span_1">The Text</span>

GI's Integrated Development Environment, GI Builder, is doing the same thing under the hood. It is giving the newly created element an individual identification property so that it can be located without ambiguity.

The next property in the list is the new block instance's "Name". This is under your control and can be anything within reason. It can contain spaces and dashes and other characters, but I wouldn't get too wild with the names; just try to name it something that makes sense and follow a theme. My theme is making the first part a lower-case word and then make all the words after it with an initial capital letter and then lower-case, but without spaces. I think this is called Hungarian notation or Camel Case. My names look like "folderBlock" or "upperRightBlock" and are much more informative to me than names like "block" or "label".

Positioning

"Relative XY" is the next item in the property list. It isn't referring to a family member's chromosomes; it is a way to layout items contained within a block. If you choose "Relative", and there are multiple items contained within the block, they get adjusted from the left or top depending on how much space is allotted. Simply, if you have a block that is 300 pixel units by 300 pixel units (300px) as the container block, a.k.a. the parent, and you have 3 blocks within it that are all 100px wide and 100px high and each one's layout is set to "Relative", then you will see all three side-by-side. But should the parent block width be reset to 250px, you will instead see two blocks side-by-side and one all by itself on the next row down.

In contrast, if you change the property of each child block to "Absolute" then you'll notice that all three children are right on top of each other and all crowded into the top left of the parent block. To correct this pileup, set the "Left" and "Top" property values to make each one respect its sibling's personal space. The values can either be a percentage of the parent's width, as in 15%, or the value can be a number written in pixel units, such as 100. By setting the first Block with a "top" property of 100 and the "left" property to 100, you'll notice it move to that exact coordinate. The "Z-Index" property will adjust the other two components above or below the other one like a stack of pancakes. The higher the z-index, the higher the component will be positioned in the stack.

I find it easier to design forms by using the relative property setting and let the layout flow naturally rather than absolutely positioning the elements. I usually nest the form fields inside a 100% wide parent block that has a 30px height and then position a label with a 30% width and a textbox with a 70% width. I then copy that structure within the same parent and the rows fall below each other nicely. If I move one of the rows to another position in the group, I won't need to recalculate the top and left properties of every component group affected by the change as I would need to do if I used "absolute" positioning.

Block

The next grouping of properties is under the heading of "Block" and contains a frequently used setting called "Text/HTML". This setting allows you to type text into the field for on-screen display. Because displaying text is the bread and butter of most applications, this property field has a few other features worth noting. First, not only can you just display simple text, you can use HTML in the entry and it will be used exactly as you enter it. This enables you to use specialized tags in the application such as java applets or Vector Markup Language (VML) for graphics.

Second, GI Builder provides a way to associate a name with text and can store it in a separate file. When you enter the identifying name in the field and touch the TAB key, the Block displays the text from the lookup.

The lookup file is called a "Properties Bundle" and is much like a spreadsheet table where the left hand column is for the lookup name and has one or more adjacent columns to resolve the text associated with the name. The first adjacent column, named "Default", holds the text that you want to use if no other columns are present. You can then add other columns based on the short-cut name for browser supported languages; English is "en_EN" and Spanish is "es_ES" to name a few. To create the "Properties Bundle", use the File/New/Properties Bundle menu commands in GI Builder. Make sure to save it and set it to load when the project starts by selecting it in the Project Files palette with a right mouse and picking the "Auto Load" menu option.

By using the Properties Bundle file you've now separated the text from residing directly within the Block "Text/HTML" property, but it will still show up just as if you typed it right into the property field. One advantage of using this name/value lookup technique is that if you decide to make changes to the text, you only need to modify the Properties Bundle file rather than visiting each of the "Text/HTML" fields individually; it's a real time saver.

Finally, if you want your application to work in Montreal and you need to have all the text in French, just create another resolution field associated with the lookup name and have someone translate the values into the French language. When your application runs, the browser's language setting is inspected and if it matches the resolution column type, voila, Bob est votre Oncle!

The other property in this section is the "Tag" field and it sets the HTML tag name when rendering the on-screen markup. I've used this in the past to force a Block to render as a SPAN tag instead of a DIV by just typing the word "span" into the property field.

There are more properties to discuss, but I'll leave that for the next segment because I hear my oven timer buzzing in the kitchen. Or is that the smoke detector?

At the Water's Edge

vic — Thu, 31 Jul 2008 20:24:05 GMT

I was sitting on an empty beach last weekend watching the surf roll in, when all of a sudden five guys came to the water's edge right in front of me with skim boards. The youngest was about 10 years old and the oldest was his father. One by one they ran down the beach at full speed and dropped their boards onto the skinny water retreating back to sea and then jumped aboard, sliding along precariously until they flopped into the water. They were really having fun. I thought it looked easy and wanted to give it a try but I didn't know the first thing about how to get started. No sooner had that thought run through my mind, I saw another guy walk up to one of the surfers and ask if he could give it a try.

"So I just jump on it, right?" he asked. "Well, yeah, that's pretty much it" the skim board owner replied. I then watched the new guy run three steps, drop his borrowed board onto a thin layer of water, jump on it and then immediately fly over the front of the fully stopped board and tumble over the sand and into the water. He looked up from the frothing surf and said "I guess it's a little harder than it looks...I better quit before I bruise more than my ego." He gave the board back, thanked the guy and then continued his walk on down the beach. I started thinking that if he would have had a better understanding of the basic principles of skim boarding before he got started, it would have helped him tremendously.

In order to help you understand how to build Rich Internet Applications with General Interface, I want to open this segment with a few of the basic principles of web page construction and how they apply to GI.

The first thing to remember is that our goal is to put marks on the browser display. To do that without GI, we will need to create a page with a few lines of text written with formatting rules used by the browser to interpret our text and display it properly. The screen layout is described to the browser by following the Hypertext Markup Language (HTML) definition. The language is made up of symbols recognized by the browser and enclosed in angled brackets. The combination of angled brackets and keywords is called a "tag" and surrounds the text that we want to format. For instance, to make text bold, just add the "<b>" tag in front of the text element and "</b>" behind it to turn it off.

We start the formatting process with the <HTML> tag and close it with the </HTML> tag. We can organize the page by enclosing the content into sections. The main section is the "BODY" and is tagged with that same name.

<HTML>

</HTML>

We can create as many sections as we need inside the BODY and can use a variety of tags to denote the start and end of each section. The <div> tag will divide a logical group in the same way that you would use a paragraph to logically divide text. The <div> and <span> tags have no pre-defined formatting and are strictly there as a parent container for your other elements.

The formatting definitions also allow us to group characteristics into a property collection called a "style". By including the style property inside a tag we are instructing the browser to follow a standard definition called the Cascading Style Sheet (CSS). The CSS definition also allows us to position elements on the screen in an "absolute" placement from the top and left sides of the current container. For instance, if we want to place a "block" of text to start 10 pixel units from the top and 12 pixel units from the left we can define it in the style property in the tag that goes with the text.

Example:

<div style="position:absolute;top:10px;left:12px;">Hello</div>

By using a style "position" property value set to "absolute", the element can be placed anywhere on a page. The tag style can be further enhanced with the size of text, the font weight (bold, italics), color and many other choices. Storing these style properties gives you the ability to call them when needed and can help to unify multiple pages with the same type of formatting.

When you use General Interface Builder to create your page you are provided a pre-defined set of styles to format the components that you insert into the page. The style choices are exposed as a list of properties in a panel editor that changes according to the GI component you've selected. Most of the property fields have drop-down choices for you to pick from a set of values. For example, the "text-align" style property has "left", "center" and "right" alignment choices.

Builder saves your property choices and then converts them to the HTML tags for the browser to display. To demonstrate, I'll create a simple GI page with the "Block -Absolute" component picked from the Component Libraries palette and drop it into a blank page. A square grey box is displayed on the screen. At the bottom of the design area, a row of icons allows me to see the HTML that will be created at run-time. It shows as:

The process of converting the saved property values to HTML tags is just one of the functions GI Builder provides. Builder will also store your favorite property settings by a name that you give it and will lookup values assigned to that name when the page is displayed. This feature is called the "Dynamic Properties File" and has a nickname of JSS in homage to the CSS property idea. So instead of typing "Tahoma" as the font family name in the property editor field, you can use "appFont" as the name you assign to "Tahoma" in the dynamic properties file. When the page is displayed, GI will lookup the "appFont" name in the dynamic properties file and exchange it with the value you've assigned it.

Furthermore, each property editor field has a type associated with it and can be part of the dynamic property information. In the "appFont" example, the type of "jsxfontname" can also be assigned to the entry so that a right-mouse context menu can be called from the "Font Name" property editor field to filter all the dynamic property records that are of the same type. The resulting drop-down menu will display them for use along with system defined styles that usually have a "@" symbol as part of the name.

The benefit to using dynamic property values becomes clear if you change your mind often. For example, you might have created a text field for data entry and you want to put a label next to it. To make sure that it has a little breathing room between the components, you use the dynamic lookup for the margin property that uses "2px" but later change your mind to make it "4px" instead. All you need to do is change the single JSS entry and all the fields rebuild when they are repainted on the screen.

We now know that GI can help insulate us from having to write HTML tags with elaborate style properties to create a Rich Internet Application. And we know that by using the Properties Editor we can make the formatting changes we want use in our application, yet we don't know too much about those properties. In our next discussion, each one of the property elements will be covered so that we will have a better understanding of how to combine them for the exact look we want to achieve.