OpenBiz & Cubi

Hi everybody

I would like to share my OB 2.4 enhancements I found useful while working on my current project:

1. Adding a CssClass attribute to EasyForm and FormReference clases
2. Client side validation

1. Adding a CssClass attribute to EasyForm and FormReference clases

I am using this feature to float the forms of EasyView or DynaView on the screen with no need to change the template. This way I can easyly change the look of the page (view). To support this I made these changes:

• class FormReference
  • Added new atribute public $m_CssClass;
  • Added $this->m_CssClass = $xmlArr["ATTRIBUTES"]["CSSCLASS"];  to constructor
  • chenged the InitAllForms method of EasyView to
    protected function InitAllForms()
       {
            foreach ($this->m_FormRefs as $formRef)
            {
                $formName = $formRef->m_Name;
                $formObj = BizSystem::ObjectFactory()->GetObject($formName);
                if ($formRef->m_SubForms && method_exists($formObj,"SetSubForms"))
                    $formObj->SetSubForms($formRef->m_SubForms);
                $formObj->m_CssClass .= " ".$formRef->m_CssClass;  
            }
       }
• Changed .tpl files to
  <form id='{$form.name}' name='{$form.name}'>
  <div class='easyForm {$form.cssClass}'>
  ...
  </div>
  </form>
• and finally added some stuff to openbiz.css file to float the form:
  div.easyForm {
      margin:5px;
      float:left;
      width:98%;
     }
  div.easyForm_float {
      width:45%;
      float:left;
  }
  div.easyForm_clear {
      clear:both;
  }

2. Client side validation

I was looking for some aesy-to-set-up validation and I ended up with http://tetlaw.id.au/view/javascript/really-easy-field-validation. To support this in OB 2.4 I made these changes:

• downloaded the validation.js to baseapp/js/validation1.5.4.1 folder
• moved the validatestyle.css of downloaded package to baseapp/css folder and customized it to
  .required {
      background-attachment:fixed;
      background:url(../images/warning_obj.gif) no-repeat 92% 0px;;
  }

  .validation-failed{
      border: 1px solid #FF3300;
  }
  .validation-passed{
  }

  .validation-advice, .custom-advice  {
      margin: 0px;
      padding: 2px 5px 2px 20px;
      color : #FFF;
      background-color:#FF3300;
      font-weight: bold;
      display:inline;
      white-space:nowrap;
     
  }

• validation.js
  • fixed initialize method of validation.js to
    Validation.prototype = {
        initialize : function(form, options){
           
            this.options = Object.extend({
                onSubmit : false,
                stopOnFirst : false,
                immediate : true,
                focusOnError : true,
                useTitles : true,
                onFormValidate : function(result, form) {},
                onElementValidate : function(result, elm) {}
            }, options || {});
            this.form = $(form);
           
            if(this.form == null) return;
           
            if(this.options.onSubmit) Event.observe(this.form,'submit',this.onSubmit.bind(this),false);
            if(this.options.immediate) {
                var useTitles = this.options.useTitles;
                var callback = this.options.onElementValidate;
               
                Form.getElements(this.form).each(function(input) { // Thanks Mike!
                    Event.observe(input, 'blur', function(ev) { Validation.validate(Event.element(ev),{useTitle : useTitles, onElementValidate : callback}); });
                });
            }
        }, ...
    ...
     
  • cahnged validate-alphanum to support UTF-8 characters
    ['validate-alphanum', 'Please use only letters (a-z) or numbers (0-9) only in this field. No spaces or other characters are allowed.', function(v) {
                    return Validation.get('IsEmpty').test(v) ||  /^([a-zA-Z0-9\u00A1-\uFFFF])+$/.test(v)
                }],...
    ...
     
• class Element
  • added new attribute public $m_ValidateForm;
  • Added $this->m_ValidateForm = isset($xmlArr["ATTRIBUTES"]["VALIDATEFORM"]) ? $xmlArr["ATTRIBUTES"]["VALIDATEFORM"] : null; to ReadMetaData method
  • changed Get Function method to
     protected function GetFunction()
       {
          $name = $this->m_Name;
          // loop through the event handlers
          $func = "";

          if ($this->m_EventHandlers == null)
             return null;
          foreach ($this->m_EventHandlers as $evthdl)
          {
             $ehName = $evthdl->m_Name;
             $event = $evthdl->m_Event;
             if (!$event) continue;
             // add direct URL support
             if ($evthdl->m_URL)
                $func .= " $event=\"loadPage('" . $evthdl->m_URL . "');\"";
             else if (strpos($evthdl->m_Function, "js:") === 0)
                $func .= " $event=\"".substr($evthdl->m_Function, 3).";\"";
             else {
                $temp = ($evthdl->m_FunctionType==null) ? "" : ",'".$evthdl->m_FunctionType."'";
                $validation = '';
                if($this->m_ValidateForm){
                    $validation =     "var valid = new Validation('$this->m_ValidateForm');
                    if(valid.form == null || valid.validate() == true)";
                }
                $func .= " $event=\"
                    SetOnElement('$name:$ehName');
                    $validation       
                    CallFunction('" . $evthdl->m_Function . "'$temp);\"";
     
                  }
          }

          $formobj = $this->GetFormObj();
          $func = Expression::EvaluateExpression($func, $formobj);

          return $func;
       }

• class ViewRenderer - UPDATE: This is only to support TABS
  • changed RenderSmarty method to:
    ...
    //$forms[] = $sHTML;
    $forms[] = "\n<div id='" . $formObj->m_Name . "_container'>\n" . $sHTML . "\n</div>\n";
    ...
• class EasyView
  • Added  BizSystem::ClientProxy()->AppendScripts("validate", "validation1.5.4.1/validation.js");
    BizSystem::ClientProxy()->AppendStyles("validatecss", "validatestyle.css"); to SetClientScripts method
• and finally added validation to easyform.xml for example:
  • <Element Name="fld_xy" Class="EditCombobox" FieldName="xy" Label="xy" Width="200" SelectFrom="1|2|3|4|5|6|7|8|9|10" CssClass="required validate-digits" HTMLAttr="title='This field is required.'"/>
  • and a MUST! is to add this to action panel to a button which shold fire validation
    <Element Name="btn_save" Class="Button" Text="Save" CssClass="button"  ValidateForm="the_full_name_of_this_form">
                <EventHandler Name="save_onclick" Event="onclick" Function="SaveRecord()"/>
            </Element>

That shold be it :)  Thomaz