Archive for Dojo

Advanced Web Controls, TreeView/Flexgrid


The upcoming 2010 release of the WebClient i+ platform will contain optional support for advanced Dojo controls such as the TreeView and FlexGrid components. The TreeView component is self-explanatory. The FlexGrid component is an advanced grid with the ability of adding columns dynamically, advanced font/display formatting, adding images to cells, and more (see the CA Plex Active pattern library documentation for a full description of capabilities). Adding Web generation support for your existing CA Plex applications with TreeViews and FlexGrids will be simple in most cases – just add inheritance and off you go – no code or panel changes required.

Here is a screen print of the new components:


Here is an example of the steps you will go through to implement in the Business Fundamentals sample model.

First, add WebClient inheritance



Second, generate and build as normal.

Final result in a browser. Yes, it is that easy.


If you are interested in becoming an alpha or beta tester for this capability, drop us a line at info@adcaustintech.com. The Alpha program starts May 1.

Interactive Validation with Regular Expressions

In the past, web designers were forced by technology into web pages that looked like the “complaint” page below. After hitting the submit button, the web pages was validated by the server and the page refreshed with errors posted back as a list. The user had to interpret the error messages to figure out which field was in error, and then determine how to correct it. This could be a tedious and time consuming process.

complaint

However, with the advent of RIA and Ajax, web pages are now undergoing an evolution towards more interactive validations. Web forms are now providing immediate feedback on errors through java script techniques, leading to faster entry of information and a more pleasurable user experience.

WebClient make it straightforward to implement browser-side validations through the use of regular expressions, which are overtaking old style edit masks as the modern de-facto standard for validating data. With this style of validation, you can provide immediate feedback to the user on simple data entry errors, including complex data types like phone numbers and urls. Please see the picture below for an example of email address validation.

regexpscreen1

Using regular expressions in WebClient is simple, and can be accomplished in three steps:

First, create a custom WebClient control template, copying the code from WebEdit.ctrl.

webedit

Second, insert the regular expression into the control template

addlines1

Here are the lines in text so you can cut and paste:

regExp="w+([-+.]w+)*@w+([-.]w+)*.w+([-.]w+)*([,;]s*w+([-+.]w+)*@w+([-.]w+)*.w+([-.]w+)*)*"
invalidMessage="Invalid Email Address <BR>Example:joesmith@org.com"

Third, direct Plex to generate specific field validations on the appropriate panel field in the Plex model.

panelcontrolname1

Generate and build, and you are done. Here are some additional regular expressions for you. Many other regular expressions are available on the web, just google “regular expressions”

  • Phone number – ^(?:([2-9]d{2}) ?|[2-9]d{2}(?:-?| ?))[2-9]d{2}[- ]?d{4}$
  • 5 digit zip – ^d{5}$
  • 9 digit zip – ^d{5}([-]d{4})?$

Custom template example, changing grid columns to links

Here is an example of creating a custom template in WebClient.

WebClient Ajax grids use a standard Plex model where the user highlights the row to operate on, and then presses a button to drill into other functions. What if you want to use a link model to accomplish the same thing?

Here is an example of a custom grid template that will give you that classic HTML table look with an embedded link in the table:

 

/(!CSSInit)
 table th {
  background-color: #eeeecc;
  border-bottom: 1px solid blue;
 }
/(!CSSInit)

 

<table style=”/(!DefaultCSS:nc:withPos=/(!Param:default))”>
   <tr>
     /(!AttachPoint:name=ColumnsArea:inlinetemplate)
       <th>
         /(!Text)
       </th>
     /(!AttachPoint)
    
     <th>&nbsp;</th>
   </tr>

 

  /(!This)
    <tr>
      /(!AttachPoint:name=CellsArea:inlinetemplate)
        <td>
          /(!Template)
        </td>
      /(!AttachPoint)
     
      <td>
        <a href=”#” onclick=”
         dojo.xhrGet({
    form: mainform,
    content: { _type: ‘json’, /(!NameID): /(ROWNUM), ctlact: ‘Changebutton:Pressed’, pnlid: pnlid },
    load: function(data, ioArgs) {
     data.main(data);
    },
    preventCache: true,
    handleAs: ‘json’ 
   });
  “>Edit Details</a>
   </td>
    </tr>
  /(!This)
</table>

 

If you save this template as TableGrid.ctrl, place it on the classpath, then you can reference by setting the control name of the grid as follows:

 

Grid1P:MainArea:template=TableGrid:default

 

The “Edit Details” grid link will send the Pressed physical event to the button named Changebutton.

 
 
© 2013 CM First Group - All rights reserved