cwUi.cpp,ui.js,ui.css,ui.cfg : Added row,col,panel div aliases.

cwUi.cpp

@@ -376,6 +376,8 @@ namespace cw
       ele_t*      ele         = nullptr;
       char*       eleName     = nullptr;
       object_t*   o           = srcObj->duplicate(); // duplicate the rsrc object so that we can modify it.
+      const char* divAliasA[] = { "row","col","panel",nullptr };
+      bool        divAliasFl  = false;
 
       if( !o->is_dict() )
         return cwLogError(kSyntaxErrorRC,"All ui element resource records must be dictionaries.");
@@ -401,12 +403,14 @@ namespace cw
         goto errLabel;
       }
 
+      // insert the UuId node
       if( o->insertPair("uuId",ele->uuId) == nullptr )
       {
         rc = cwLogError(kOpFailRC,"The 'uuid' node insertion failed on UI element '%s'.",cwStringNullGuard(eleName));
         goto errLabel;
       }
 
+      // Insert the appId node
       if( ele->appId != kInvalidId )
       {
         if( o->insertPair("appId",ele->appId) == nullptr )
@@ -416,39 +420,52 @@ namespace cw
         }
       } 
 
+      // Insert the parentId node
       if( o->insertPair("parentUuId",parentEle->uuId) == nullptr )
       {
         rc = cwLogError(kOpFailRC,"The 'parentUuId' node insertion failed on UI element '%s'.",cwStringNullGuard(eleName));
         goto errLabel;
       }
 
+      // Insert the 'op':'create' operation node
       if( o->insertPair("op","create") == nullptr )
       {
         rc = cwLogError(kOpFailRC,"The 'op' node insertion failed on UI element '%s'.",cwStringNullGuard(eleName));
         goto errLabel;
       }
 
+      // Insert the 'type':'<ele_type>' node
       if( o->insertPair("type",eleType) == nullptr )
       {
         rc = cwLogError(kOpFailRC,"The 'eleType' node insertion failed on UI element '%s'.",cwStringNullGuard(eleName));
         goto errLabel;
       }
 
+      // Convert the object to a JSON string
       if( o->to_string(p->buf,p->bufN) >= p->bufN )
       {
         rc = cwLogError(kOpFailRC,"Conversion to JSON string failed on UI element '%s'.",cwStringNullGuard(eleName));
         goto errLabel;
       }
 
+      // Send the JSON msg to the browser
       if((rc =  _websockSend( p, wsSessId, p->buf )) != kOkRC )
       {
         rc = cwLogError(rc,"The creation request send failed on UI element '%s'.", cwStringNullGuard(eleName));
         goto errLabel;
       }
 
+      // is this element a 'div' alias?
+      for(unsigned i=0; divAliasA[i]!=nullptr; ++i)
+        if( textCompare(divAliasA[i],eleType) == 0 )
+        {
+          divAliasFl = true;
+          break;
+        }
+      
       
       // if this element has a list of children then create them here
-      if( co != nullptr || textCompare(eleType,"div")==0 )
+      if( co != nullptr || divAliasFl )
       {
         // Note that 'div's need not have an explicit 'children' node.
         // Any child node of a 'div' with a dictionary as a value is a child control.

html/uiTest/css/ui.css

@@ -54,14 +54,21 @@ label {
     width: 50px;
 }
 
-.panel {
+.uiPanel {
     background-color: LightBlue;
 }
-.row  {
 
+.uiRow  {    
     display: flex;
     flex-direction: row;
     align-items: center;
     background-color: LightBlue;
 }
 
+.uiRow  {    
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    background-color: LightBlue;
+}
+

html/uiTest/js/ui.js

@@ -320,16 +320,6 @@ function ui_create_ctl( parent_ele, ele_type, label, d, dfltEleClassName )
     return ui_create_ele( div_ele, ele_type, d, dfltEleClassName );
 }
 
-function ui_set_class_name( ele, d, dfltClassName )
-{
-    if( d.hasOwnProperty("className") )
-	ele.className = d.className;
-    else
-	ele.className = dfltClassName
-
-    return ele
-}
-
 function ui_create_div( parent_ele, d )
 {
     var div_ele =  ui_create_ele( parent_ele, "div", d, "uiDiv" );
@@ -350,6 +340,40 @@ function ui_create_div( parent_ele, d )
     return div_ele;
 }
 
+function ui_create_panel_div( parent_ele, d )
+{
+    d.type = "div"
+    var div_ele =  ui_create_div( parent_ele, d );
+
+    if( !d.hasOwnProperty('className') )
+	div_ele.className = "uiPanel"
+
+    return div_ele
+}
+
+function ui_create_row_div( parent_ele, d )
+{
+    d.type = "div"
+    var div_ele =  ui_create_div( parent_ele, d );
+
+    if( !d.hasOwnProperty('className') )
+	div_ele.className = "uiPanel"
+
+    return div_ele
+}
+
+function ui_create_col_div( parent_ele, d )
+{
+    d.type = "div"
+    var div_ele =  ui_create_div( parent_ele, d );
+
+    if( !d.hasOwnProperty('className') )
+	div_ele.className = "uiPanel"
+
+    return div_ele
+}
+
+
 function ui_create_title( parent_ele, d )
 {
     return ui_create_ele( parent_ele, "label", d, "uiTitle" );
@@ -570,6 +594,18 @@ function ui_create( d )
 	    ele = ui_create_div( parent_ele, d )
 	    break;
 
+	    case "panel":
+	    ele = ui_create_panel_div( parent_ele, d )
+	    break;
+
+	    case "row":
+	    ele = ui_create_row_div( parent_ele, d )
+	    break;
+
+	    case "col":
+	    ele = ui_create_col_div( parent_ele, d )
+	    break;
+
 	    case "title":
 	    ele = ui_create_title( parent_ele, d )
 	    break;

html/uiTest/ui.cfg

@@ -3,14 +3,12 @@
 
   parent: "uiDivId"
 
-  div: {
+  panel: {
 
     name: "panelDivId",
-    className: "panel",
     title: "My resource based panel",
 
-    div: {
-    	 className: "row",
+    row: {
          button:{ name: myBtn1Id,   title:"Push Me"  },
     	 check:{  name: myCheck1Id, title:"Check Me" },
 	}