Click here to Skip to main content
15,881,803 members
Search within:


Articles / Web Development / HTML
 
Article

eForms

Rate me:
Please Sign up or sign in to vote.
4.56/5 (8 votes)
6 Aug 2017CPOL34 min read 16.5K   315   12   4
Easy way to create a Single Page WebApp

Introduction

  • Make it easy to create a web-app that looks better than Windows program
  • Wide range of tools including easy form creation that can resize - drag - hide and show!
  • ActiveX-like controls - but easier and with NO DEPENDENCIES!
  • SMALL FILE! Downloading ONLY what is needed for the current page-app (it will be cached too!)
  • Inclusive of open forms ribbon with optional classic or digital clock
  • Multilingual support for every single text!
  • Custom styling for every piece - using ThemeEditor WebApi (can serve as example too)
  • Easy to program and use
  • Working with EFON - E-Forms Object Notation, which is Base64 object notation suitable for over-the-network transferring of ALL data

Changes from Previous Version

  • EF.Open() changed to suit OOP programming
  • EF.Run() changed to serve the Open function and to better initialize the SDK
  • ThemeEditor.htm API had a bug of saving images - it automatically saved them as base64 into variables leading to unnecessary enlarge the CSS file - this been corrected. Now it is very easy to create custom StyleSheet.

Overview

eForms (or its short name “EF”) derived from “Electronic Forms” is a Software Development Kit which contains set of controls and system for easy developing single or multi page web-app.

The name starting in a small “e” which looks like the symbol for “internet explorer” which became the symbol for internet/web, and this system is designed for web use.

Although developers are looking for clear and readable code, our goal is for a typical user it shall not be readable, but for the programmer it shall be clear enough for work. This is also a way to protect the code and the data.

Starting a New Project

First, let's take a look at the stylesheet that the SDK provides, and how easy it is to create themes.
The file ThemeEditor.htm that is included within this SDK can help to generate the final CSS along with necessary dynamic variables, using basic theme profile. The files that this compiler makes are ef.css and Style.js which shall be included in each new project. The content of Style.js which is a single EFON variable, shall be placed AFTER <script src="/ef/ef.js"></script>. Following are some examples, and you can have a look at each example HTML page.

Basic Empty Page

HTML
<html><head>
       <meta http-equiv="content-type" content="text/html; charset=UTF-8">
       <link rel="shortcut icon" href="efico.ico"></link>
       <link rel="StyleSheet" href="ef.css" type="text/css"></link>
       <script src="/ef/ef.js"></script>
       <script src="Style.js"></script>
       <script>

       // Our main program section.

       // Initialization function name can be any name, referred to from the EF.Run()
       function Init() {
            // More initialization stuff to do here.
       }
       </script>
</head>
<body onload="EF.Run(Init)">
<!—This section will be generated by the power of eForms, 
   you shall avoid editing this part. -->
</body></html>

IMPORTANT: Note the onload event in <body> with the function EF.Run(). This is a magical function that initializes the SDK. The parameter that this function receives is either a function to run first, or a string calling specific form type to first load (like in Microsoft Visual Studio C#), or a hash with some settings. If a hash is given, its properties are the same as for EF.Open() for launching new eForm - which will be described later.

NOTE: The initialization function EF.Run() needs to be called to initialize the SDK, but it does NOT have to be in <body> onload event, it can be called from within any other function. This function is responsible for launching Side Ribbon, Title and Footer. If a page is intended to NOT use these, can ignore the Run() function.

Image 1

Hello World Code Example

JavaScript
<html><head>
       <meta http-equiv="content-type" content="text/html; charset=UTF-8">
       <link rel="shortcut icon" href="efico.ico"></link>
       <link rel="StyleSheet" href="ef.css" type="text/css"></link>
       <script src="/ef/ef.js"></script>
       <script src="Style.js"></script>
       <script>

       // Initialize new eForm.
       function HelloWorld_Form() {

             /* "HelloWorld_Form" is a form OOP class name. 
                 This means that we are creating the prototype here, 
                 and to use the real eForm, we will need to call EF.Open() later, 
                 or use it by direct call from the EF.Run(). */

              var _=this;
              _.inf= {
                      // Form basic properties
                      w:300, // Width
                      h:300, // Height
                      txt:"Hello World", // Title text.

                      // Form optional properties
                      min:[100,100], // Minimum size [width,height]
                      max:[600,600], // Maximum size [width,height]

                      // Form preset children controls (also optional)
                      chl:{
                             // Text-box field
                             C1:["FLD",{
                                  x:16,y:16, // Position
                                  w:268,     // Width of field including label!
                                  max:32,    // Maxlength. If 0, will be readonly.
                                  anch:"LR", // Anchor (L=Left,R=Right,B=Bottom,T=Top)
                                  lbl:"Your name:" // Label associated with the control.
                             }],

                             // Combobox <Select>
                             C2:["CMB",{
                                  x:16,y:48,         // Position
                                  w:268,             // Width of field including label!
                                  alt:"Other...",    // Alternative option text.
                                  mlg:1,             // Indicates alternative field 
                                                     // is multilingual field
                                  max:32,            // Maxlength for the 
                                                     // alternative field.
                                  anch:"LR",         // Anchor (Left & Right)
                                  lbl:"Pick a color:", // Label element
                                  src:[              // Preset options list
                                       EF.L({"EN-US":"Red","ZH-CN":"?"}),
                                       EF.L({"EN-US":"Green","ZH-CN":"?"}),
                                       EF.L({"EN-US":"Blue","ZH-CN":"?"}),
                                       EF.L({"EN-US":"Yellow","ZH-CN":"?"}),
                                       EF.L({"EN-US":"White","ZH-CN":"?"}),
                                       EF.L({"EN-US":"Black","ZH-CN":"?"})
                                  ],
                             }],

                             // System Button
                             B1:["SBT",{
                                  x:16,y:188,        // position
                                  txt:"Click me!",   // text
                                  img:"Example.png", // image
                                  cbk:F2,            // onclick callback
                                  anch:"B",          // Anchor (Bottom)
                             }]
                      }
              };

              _.onload=function() {

                     // Manually-added controls
                     EF.Put("SBT","B2",{
                             x:128,y:188,txt:"Try to click me!",
                                   img:"Example.png",anch:"BR",
                             tp:"X" // Type "X" is disabled button. 
                                    // The image will be greyscaled.
                     },_.base);

                     // call to public functions:

                     // The Form DOM element sits in a magical variable eF 
                     // in the current class. Once the form is created, 
                     // this variable will be added to the new instance 
                     // of this class, allowing to communicate with the 
                     // eForm object itself. Below is an example for the 
                     // "Block()" function as part of eForm control:
                     _.eF.Block({txt:"Just sample progressbar",prg:1,min:0,max:100});
                     _.RR();
              }

              // Form-scope public function
              _.RR=function() {
                      _.base.blk.Prog('+');
                      if(_.base.blk.prg.value<100) setTimeout(_.RR,20);
                      else _.base.XBLK();
              }

              // Form-scope private functions
              function F1() { EF.Alert({txt:"Notification",msg:"Form loaded!"}); }
              function F2() { EF.Alert({txt:"Notification",msg:"Button clicked!"}); }
       }

       // The basic startup
       function Init() {
              EF.Open("HelloWorld_Form"); // Launch form using the magic 
                                          // function EF.Open().
              // It can take as parameter a string with the type of 
              // the form to open, then it will create an instance of 
              // that form type named by its type.
              // We could, however, use <body onload="EF.Run(‘HelloWorld_Form’)"> 
              // and remove this "Init()" function, as we have only one form 
              // that we want to open on page load.

              /* Forms directly on the desktop (document.body) 
                 will be stored on EF.chl[id].
              Deeper forms will be stored in EF.chl[parent form].chl[id] 
              and so on, as every form has chl parameters for incandescent children. */
       }
       </script>

</head>
<body onload="EF.Run(Init)">
</body></html>

Preview

Image 2

The page layout

Image 3

Dragged and resized

Image 4

The page with the ribbon

Image 5

Empty page

Controls

Placing Control

  • EF.Put(Control type, Name, Properties hash, Parent element)
  • Control type: 3 characters code, each of them is explained later
  • Name: The name for the control which shall be unique within parent element scope. The SDK will convert it to DOM id, as per parent element’s id up to root, i.e., If our control name is “x” and parent control name is “y” which is placed on form (parent control too) name “z” and form is placed on the document.body which means is the last parent in the loop, the full id of current control will be: “z_y_x”. Clearly that “_” is a path separator here.
  • Properties hash: depends on control type. Explanation for each control and its properties are later in this manual.
  • Parent element: Can be DOM object or full ID. Empty string or if omitted, represents document.body.

Note: After control creation, the given properties for creation no longer exist. For dynamic editing, it is typical JS/HTML editing or if manipulating the CSS. For typical application changes, most of the functions already built in within each control, in order to ease the programming. This way, for simple change, there is no need to update too many parts of the code/data.

Form

Open eForm on Top of document.body

EF.Open(“FormName”);

The above function will open a new instance of form class “FormName”.
Important note: Each form better to sit in NEW JavaScript file in local directory “frm”. The SDK will look if this class exists (means been loaded), and if not, will load the script for you.

Note: If the Open gets as parameter string, it will give the form the same name as the type, assuming it is a form that has only one instance. If you want to give a unique name and/or other parameters, the below hash will apply.

EF.Open({

typ: The form OOP class name. When string provided, the SDK will convert it to “typ:’FormName’”.

id: Unique form name, for the DOM id, it has the same behavior as mentioned above for “Put”.

x: Position X. If omitted, form will be horizontally centered.

y: Position Y. If omitted, form will be vertically centered.

v: Parameter object for the form initialization constructor.

pmt: Parameter object for the eForm “onload” event.

});

Note: All properties are optional except “typ”.

Declaring an eForm Class
JavaScript
Function FormName(A) {
      // The variable "A" here is the parameter object passed by variable v 
      // from the Open function.
      var _=this; // This can help us access the eForm class object from within 
                  // every internal function or element.
      _.inf={ };  // inf is a magical hash that contains form properties 
                  // with its controls. NOTE: It must remain exactly this 
                  // notation in order to be recognized by this SDK, 
                  // so don’t try to use different name for this hash.
      _.onload=function(B) {
           // This function is optional, and it is a magical function 
           // that will be called immediately when form instance has been created 
           // and all controls are placed.
           // The "B" parameter here is the parameter object passed by 
           // variable pmt from the Open function.
      }

      // More functions can be placed here, and they all will be belong to this class.

      // The Form DOM element is in parameter _.eF
      // This class sitting in _.eF.fnc therefore accessing public function of 
      // another eForm class will be easy using FormObject.fnc.FunctionName()
}
Basic properties for “inf”
  • w: Width of form
  • h: Height of form – not including the title bar
  • txt: Title text which can be multilingual. Though you can decide to hide title bar, this text can be seen in the ribbon icon.
Optional Properties for “inf”
  • min[width,height]: Minimal size. If omitted, form will have fixed size.
  • max[width,height]: Maximal size. If omitted, form will have fixed size.
  • xt: If set to 1, form title bar will be hidden.
  • drg: If set to 1, form will have no dragging option.
  • xcls: If set to 1, close button “X” will be hidden.
  • xhid: If set to 1, hide (minimize) button will be hidden.
  • blk: If set, will block parent element. This will give a little similar effect to a dialog-box form. This property is a hash which contains the following optional sub-properties:
    • txt: Displayed text on the blocker screen, can be multilingual field.
    • prg: If set to 1, will add progress bar element.
    • max: Progress maximum value (default: 100)
    • min: Progress minimum value (default: 0)
Public Functions
  • Focus(): Focus the form. The same can be achieved by double clicking a form element or when clicking on the form icon on the ribbon.
  • Open(v): Open child form as mentioned above. v represents variable hash.
  • Close(): Close the form. Shall avoid removing the <form> element using removeChild(), because the Close() function not only removes the Form element, but also checks for related forms and data, and cleans related memory parameters.
  • Val(v): This is a magic function that collects all fields of the form and returns a hash containing each field name as key, and value as value. If v is given as string, it can contain a list of field names to collect values from, to make a selective collection. List elements separated by comma.
  • Block(v): Block the form. Good for running long event that needs preventing the user from clicking buttons or editing fields on this form. Parameters for v are the same as for blk above.
  • XBLK(): Remove the blocker screen with the progress bar if was.
  • Rename(v): Rename the text in the title. v can be multilingual too.
Public Parameters
  • ctr: Controls hash. Control can be accessed by his name on current form. Names on current form shall be unique. No matter how deep the control in the hierarchy inside the form is, all controls sitting in this hash in 1st level.
  • PNT: Parent form (null or undefined if form is placed directly on document.body).
  • CHL: Child forms hash, like EF.CHL.
  • blk: Blocker screen element – null if not blocked.
Form Blocker – Public Parameters
  • lbl: Blocker text label DOM element
  • prg: Progress bar DOM element
  • prg.max: Maximum progress value
  • prg.min: Minimum progress value
  • prg.value: Progress current value
Form Blocker – Public Functions
  • Prog(m) for setting the progress. If m is a number, will set the progress value to m. If m is ‘+’, will increase the progress value in 1.
Open Child eForm to Existing eForm

Call “Open” from within form object, i.e., Parent form is initialized earlier via: EF.Open(“F1”); Then we create his child: EF.chl.F1.Open(“F2”); Note that the <Form> element and EF.chl.F1 here are the same, so can call “Open” on the <form> element, if been created using this SDK.

NOTE: Though it is possible to create a new form via EF.Put(“WIN”,”formName”,{ … },parent); it is recommended to use JavaScript eForm class and EF.Open().

Every new opened form is stored in EF.chl hash as child form of document.body, the name is the access key. Note that all created forms lie directly on document.body, regardless of who is the given parent. Therefore, a pnt “Parent” parameter exists here for help. There is no EF.pnt, as all direct forms on document.body technically have no parent. Incandescent forms already have pnt.

General Example
JavaScript
function F1() {
       var _=this;
       _.inf={ w:300,h:200,txt:"Form without titlebar",xt:1 };
}
function F2() {
       var _=this;
       _.inf={ w:300,h:200,txt:"Form with titlebar" };
}
function F3() {
       var _=this;
       _.inf={ w:300,h:200,txt:"Form without close button",xcls:1 };
}
function F4() {
       var _=this;
       _.inf={ w:300,h:200,txt:"Form without hide button",xhid:1 };
}
function F5() {
       var _=this;
       _.inf={ w:300,h:200,txt:"Form without any button",xcls:1,xhid:1 };
}
function F6() {
       var _=this;
       _.inf={ w:300,h:200,txt:"Blocked form" };
       _.onload=function() { _.eF.Block({txt:"No content available 
                             for clicking or editing!"}); }
}
function Init() {
       EF.Open({ typ:"F1",x:216,y:224 });
       EF.Open({ typ:"F2",x:216,y:456 });
       EF.Open({ typ:"F3",x:532,y:224 });
       EF.Open({ typ:"F4",x:532,y:456 });
       EF.Open({ typ:"F5",x:848,y:224 });
       EF.Open({ typ:"F6",x:848,y:456 });
}

Image 6

System Button

Control type code: “SBT”. This gives unified styling for all buttons in the system.

Basic Properties
  • x: Position X
  • y: Position Y
  • txt: Caption text
  • cbk: onclick event function
Optional Properties
  • img: Display image. If omitted, no image will be presented. Image file including extension, but not including full path, assuming that images are stored in “img” folder that sits in the same folder as the main *.htm file. Therefore, in HTML, the “src” value will be “img/”+img.
  • anch: Anchor. This “holds” the control in a way it will follow parent resizing direction, like in Microsoft Visual Studio. Value is string consisting of one or more of the following options: “L” Left, “R” Right, “T” Top, “B” Bottom, i.e., we want the button to stick to the bottom-right corner of the form, we will write anch:”BR” or anch:”RB”. The default is stick to left-top of the form, which means no effect will be taken, no matter if we specify “L” or “T” or “LT” or “TL” – they are all the same non effective notations.
  • Note: Despite system button has fixed size, anchors like “LR” or “TB” may lead to no effect.
  • tp: Button type. The default is typical active button. By specifying this variable, we want either: “X” which will create disabled button, or “A” if we want alert style button which is the same style that is used in Alert form.
  • Note: Disabled button image will be converted to gray scale. This is available only if working on the server and not in local computer, as “Cross Domain” issue may taint the canvas that the SDK is using to make the color conversion.
  • upk: If specified, will make the button file upload button. This property is a hash, containing the following sub-properties:
    • cgi: If is a string, it will be treated as CGI program path not including extension, then uploaded content will be sent to that script for processing. If omitted, the uploaded files will stay in memory as Blobs.
    • cbk: A function to perform when content is loaded to memory or sent to the specified CGI script.
    • mul: If set to 1, will allow select and upload many files at once, not only single file.
  • This will create internal variable ftp in the button object. This variable is a hash that holds per file the following parameters (filename is the key):
    • f: fileReader JS object
    • z: file size in bytes
    • t: file MIME type

A key named “_” holds array of all filenames in the hash.

Example – Dynamic Creation
JavaScript
var C=EF.Put("SBT","B1",{ x:16,y:16,txt:"Typical",img:"Example.png", Clicked });

Image 7

Example – On Form Creation
JavaScript
function ButtonExampleForm() {
        var _=this;
        _.inf={ w:240,h:240,txt:"System Buttons",chl:{
               B1:["SBT",{ x:16,y:16,txt:"Typical",img:"Example.png",cbk:Clicked }],
               B2:["SBT",{ x:128,y:16,txt:"Disabled",
                          img:"Example.png",cbk:Clicked,tp:"X" }],
               B3:["SBT",{ x:16,y:128,txt:"Alert",
                           img:"Example.png",cbk:Clicked,tp:"A" }],
               B4:["SBT",{ x:128,y:128,txt:"No image",cbk:Clicked }]
        }};
        function Clicked() { EF.Alert({txt:"Notification",
                             msg:"Thank you for clicking!"}); }
}

Image 8

Textbox Field

Control type code: “FLD”. The magic of this field upon <input type”text”> is not only the simplicity of writing this control, but also the functionality it gives and described below.

Basic Properties
  • x: Position x
  • y: Position y
  • w: width of field
  • max: Max input length. If this variable is 0, the field will be read-only.
Optional Properties

Note: The label control name will be the same, with “~L” suffix.

  • anch: Anchor, the same as in System Button. Here, anchor like “LR” or “RL” may result in extending the width of the field. Anchors like “TB” or “BT” are meaningless and will result in no effect, as this type of control has fixed height and is not multiline. For multiline, see Multiline Textbox below.
  • alg: Text alignment. The default is alignment to left, while these options available: “R” Right, “C” Center, “P” Password. Note: Password field does not need any special alignment, so its alignment is always left.
  • txt: Initial text value.
  • lbl: Will add label component. The value here is text only. This will make automatic calculation here for the total width – so the specified width here includes the label. This way, spacing between label and text-box fields are minimal, regardless of the language presented in the current browser settings, as the label width is dynamic.
  • acm: Special styled autocomplete feature. This is a small array of two components, which are:
    • 0: DB array of values from where to pick suggestions
    • 1: Max shown suggestions below the current field
  • enter: On <Enter> keypress event. This event is not listed in JavaScript core, and therefore is one of the added features.
  • chng: onchange event
  • clk: onclick event
  • tb: Tab index. This gives easy move from field to field by hitting <Tab> key.
Public Functions
  • Val(v): Set value to v. If v omitted, will return given field value
Example – Dynamic Creation
JavaScript
var C=EF.Put("FLD","C1",{ x:16,y:16,w:368,max:12,lbl:"Editable:" });

Image 9

Example – On Form Creation
JavaScript
function TextboxFormExample() {
        var _=this;
        _.inf={ w:400,h:400,txt:"Single line textbox",min:[400,300],max:[900,600],chl:{
               C1:["FLD",{ x:16,y:16,w:368,max:12,lbl:"Editable:" }],
               C2:["FLD",{ x:16,y:48,w:368,max:12,lbl:"Editable anchored:",anch:"LR" }],
               C3:["FLD",{ x:16,y:80,w:368,max:0,lbl:"Readonly" }],
               C4:["FLD",{
                       x:16,y:112,w:368,max:12,enter:EnterHitted,
                       chng:ContentChange,clk:Clicked
               }],
               C5:["FLD",{
                       x:16,y:144,w:368,max:12,lbl:"With auto complete:",anch:"LR",
                       acm:[[
                              "Green","Purple","White","Brown","Yellow",
                              "Grey","Red","Blue","Black","Orange"
                       ],4]
               }],
               C6:["FLD",{ x:16,y:176,w:368,max:12,lbl:"Password:",alg:"P" }],
               C7:["FLD",{ x:16,y:208,w:368,max:12,lbl:"Centered:",alg:"C" }],
               C8:["FLD",{ x:16,y:240,w:368,max:12,lbl:"To right:",alg:"R" }]
        }};
        function ContentChange() {
               EF.Alert({txt:"Notification",
               msg:"You changed the content to "+_.eF.ctr.C4.Val()+"!"});
        }
        function EnterHitted() { EF.Alert({txt:"Notification",
                 msg:"You hit keyboard <Enter> key!"}); }
        function Clicked() { EF.Alert({txt:"Notification",msg:"You clicked!"}); }
}

Image 10

The anchor effect:

Image 11

The autocomplete:

Image 12

Label

Control type code: “LBL”. This control is not related with any other control and count as separate control even if it had been created along with another control like Textbox or Combo Box.

Basic Properties
  • x: Position x
  • y: Position y
  • txt: Content text
Optional Properties
  • w: Gives fixed width. The height of the label will be as per field height, or if the content exceeded the given width and needs to wrap to new lines.
    Note: w shall be avoided when used in “lbl” property in another control.
  • alg: Text alignment. Available options here are “C” Centered, or “R” Right. This will take effect only if the label has fixed size (by setting w).
  • anch: Anchor. It will have no effect if this control had been created along with other control, like textbox or combo. If the anchor of the Textbox, for example, is “LR”, the anchor of the label can only remain “L”. If the anchor of the Textbox is “R”, then the label follows the Textbox with “R” anchor. Combination of “TB” or “BT” may resize the label if w been preset, but the text will remain aligned to top.
  • color: Can set the text color of the label. If array of 2 components is given, content will be:
    • 0: Text color
    • 1: Background color

Color values are CSS string.

Note: Label object can be styled by external CSS class, by internal CSS “Style” properties, or via JS using the DOM element that results from the Put. The DOM element is typical DIV, with absolute position and with settings of this SDK suitable to make it looks like a label.

Example – Dynamic Creation
JavaScript
var c=EF.Put("LBL","L1",{ x:16,y:16,txt:"Dynamic sized typical label" });

Image 13

Example – On Form Creation
JavaScript
function LabelExampleForm() {
        var _=this;
        _.inf={ w:400,h:208,txt:"Label",min:[400,208],max:[900,600],chl:{
               L1:["LBL",{x:16,y:16,txt:"Dynamic sized typical label"}],
               L2:["LBL",{x:16,y:48,txt:"Centered typical label",
                          w:368,alg:"C",anch:"LR"}],
               L3:["LBL",{x:16,y:80,txt:"Right aligned typical label",
                          w:368,alg:"R",anch:"LR"}],
               L4:["LBL",{x:16,y:112,txt:"Custom styled label",color:"#ff0000"}],
               L5:["LBL",{
                       x:16,y:144,txt:"Another custom styled label",
                                       color:["#ffff00","rgba(0,0,255,0.7)"]
               }],
               L6:["LBL",{x:16,y:176,txt:"External styling applied here"}]
        }};
        _.onload=function() {
               _.eF.ctr.L6.style.border="2px double rgb(0,255,0)";
               _.eF.ctr.L6.style.fontWeight="bold";
        }
}

Image 14

After resizing, based on Anchor Tag:

Image 15

Check Box

Control type code: “CHK”. Like a typical <input type=”checkbox”> but with preset label in the appropriate styling. The label here is part of the control and sits in <label> DOM element and not in a <div>. Like typical control in this SDK, simple way to create.

Basic Properties
  • x: Position x
  • y: Position y
  • txt: Label text. The label is accessed by id of the control + “~L” suffix.
Optional Properties
  • anch: Anchor. Because the nature of dynamic sized label, anchors like “LR”, “RL”, “TB” or “BT” are useless. The only available anchors are “R” Right, “B” Bottom, “RB” for both Right and Bottom. Note that “BR” is the same as “RB”.
  • chng: onchange event
Public Functions
  • Val(v): Set the checkbox value based on v, true or false. If omitted, this function will return the current checked status, true or false.
Example – Dynamic Creation
JavaScript
var c=EF.Put("CHK","C1",{ x:16,y:16,txt:"Check me",chng:Tick });

Image 16

Example – on Form Creation
JavaScript
function CheckboxExampleForm() {
        var _=this;
        _.inf={ w:200,h:100,txt:"Checkbox",min:[200,100],max:[900,600],chl:{
               C1:["CHK",{x:16,y:16,txt:"Check me",chng:Tick}]
        }};
        function Tick() {
               EF.Alert({txt:"Notification",
               msg:"Checkbox is checked? "+(_.eF.ctr.C1.Val()?"Yes":"No")});
        }
}

Image 17

Radio Button Group

Control type code: “RDO”. This gives a group of radio buttons aligned in a <fieldset> panel.

Note: The name of the control will be the name of the radio group in the form – this includes the hierarchy names, like for id.

Basic Properties
  • x: Position x
  • y: Position y
  • w: Width of fieldset panel
  • h: Height of fieldset panel

    Note: The size is including inner padding of 16px from each size, both horizontal and vertical. Therefore, inner size is smaller in 32px in width and in height.

  • rb: Array of labels text. Each of the created radions will have the id of the control + “_” + index. The label will have single radio id +”~L” suffix.
  • txt: Legend text.
Optional Properties
  • lw: Label width. This will help align the radio buttons to “jump” each fixed space. Only if the length exceeded the inner width of the panel, it will wrap to a new line.
  • sel: Selected radio index. If omitted, 1st radio in the group will be selected.
  • anch: Anchor for the entire panel. Every combination can take place here. Radios will realign in accordance.
  • chng: onchange callback
Public Functions
  • Val(v): Select radio based on index v. If v omitted, will return selected radio index.
Example – Dynamic Creation
JavaScript
var c=EF.Put("RDO","R1",{
        x:16,y:16,w:368,h:268,txt:"Not aligned radio group",rb:[
               "Red","Green","White","Purple","Orange","Blue",
               "Black","Cyan","Magenta","Sea green","Lawn green"
        ],anch:"LR"
});

Image 18

Example – On Form Creation
JavaScript
function RadioGroupExampleForm(A) {
        var _=this;
        _.inf={ w:400,h:468,txt:"Radio Groups",min:[150,468],max:[1200,900],chl:{
               R1:["RDO",{ x:16,y:16,w:368,h:168,
                    txt:"Not aligned radio group",rb:A,anch:"LR" }],
               R2:["RDO",{
                      x:16,y:200,w:368,h:268,txt:"Aligned radio group",
                      rb:A,anch:"LRTB",lw:120,sel:5
               }],
        }};

}

NOTE: Passing parameters to form constructor is only possible via keyword "v". This is an object that can get every value, so the constructor will only get 1 parameter. The initialization function here will then look like the following:

JavaScript
EF.Run({typ:'RadioGroupExampleForm',v:[
        "Red","Green","White","Purple","Orange","Blue",
        "Black","Cyan","Magenta","Sea green","Lawn green"
]});

Image 19

Wide resizing, how it affects the auto-alignment

Image 20

Picture Box

Control type code: “IMG”. This will create special <img> tag with many options, including image pixel manipulation. When a target *.htm file is loaded locally or if content is from another domain, the canvas it uses for manipulation may be tainted and therefore not usable. Suggest working with a server for these purposes.

Basic Properties
  • x: Position x
  • y: Position y
  • w: Image width
  • h: Image height
  • src: Initial image source, including full path
Optional Properties
  • anch: Anchor. All combinations are available.
  • clk: onclick event
  • onl: onload event
  • alg: Image alignment. The default is image with its original size, so if the size is smaller than the size given for the picture box, a background may be seen in a color of Field Background declared in the stylesheet. If the image size is bigger, scrollbars may appear. Values here can be:
  • S: Image will be stretched to the size of the picture box.
  • Z: Zoomed to fit the size of the picture box without breaking width and height ratio, so image content will not look deformed.
  • upk: Uploading image by click feature. If set to 1, will allow image uploading from local machine to this control. Only images are applicable. Supported formats are all formats that the browser supports.
Public Functions
  • Val(v): Sets image source based on v. All given images sit in “img” folder that sits in the same folder where the main *.htm file is. If v is omitted, will return the source image path (if has) or the image content as base64 if this is the value in “src”.
  • Raw(): Returns the image content as imageData object for pixel manipulation. For more information on pixel manipulation, see JavaScript documentation for Canvas.getContext(“2d”).getImageData().
  • FromData(v): Updates image source using imageData Object in v.
  • ToB64(): Returns image content as base64 URI encoded string for easy over the network transferring.
Example – Dynamic Creation
JavaScript
var c=EF.Put("IMG","IX",{ x:16,y:16,w:256,h:256,src:"img/Pic.jpg",anch:"LRTB" });

Image 21

Example – On Form Creation
JavaScript
function F1() {
       var _=this;
       _.inf={ w:288,h:288,txt:"Fixed size image",min:[80,80],max:[800,800],chl:{
               I:["IMG",{x:16,y:16,w:256,h:256,src:"img/Pic.jpg",anch:"LRTB"}]
       }};
}
function F2() {
       var _=this;
       _.inf={ w:288,h:288,txt:"Stretched image",min:[80,80],max:[800,800],chl:{
               I:["IMG",{x:16,y:16,w:256,h:256,src:"img/Pic.jpg",anch:"LRTB",alg:"S"}]
       }};
}
function F3() {
       var _=this;
       _.inf={ w:288,h:288,txt:"Zoomed image",min:[80,80],max:[800,800],chl:{
               I:["IMG",{x:16,y:16,w:256,h:256,src:"img/Pic.jpg",anch:"LRTB",alg:"Z"}]
       }};
}
function F4() {
       var _=this;
       _.inf={ w:288,h:288,txt:"Magical image - click it!",
               min:[80,80],max:[800,800],chl:{
               I:["IMG",{x:16,y:16,w:256,h:256,
               src:"img/Pic.jpg",anch:"LRTB",clk:Rework}]
       }};
       var itr=0;
       function Rework() {
               var V=EF.chl.F1.ctr.I.Raw();
               for(var y=0 ; y<V.height ; y++)
                       for(var x=0 ; x<V.width ; x++) {
                              var p=y*V.width*4+x*4,
                              c=Math.floor((V.data[p]+V.data[p+1]+V.data[p+2])/3);
                              if(itr%4==0) V.data[p]=V.data[p+1]=V.data[p+2]=c;
                              if(itr%4==1) { V.data[p]=c; V.data[p+1]=V.data[p+2]=0; }
                              if(itr%4==2) { V.data[p+1]=c; V.data[p]=V.data[p+2]=0; }
                              if(itr%4==3) { V.data[p+2]=c; V.data[p]=V.data[p+1]=0; }

                       }
               _.eF.ctr.I.FromData(V); itr++;
       }
}
function Init() {
       EF.Open({ typ:"F1",x:32,y:192 });
       EF.Open({ typ:"F2",x:352,y:192 });
       EF.Open({ typ:"F3",x:672,y:192 });
       EF.Open({ typ:"F4",x:992,y:192 });
}

Image 22

After form resizing:

Image 23

Image 24

Magical image – after click (custom effect – every pixel manipulation can be done):

Image 25

Canvas

Control type code: “CVS”. This will create a canvas element with advanced options. Extension is available on top of this control, for ComplexImage™ Manipulation. ComplexImage™ is a programming language for creating complex images, including 3D, shading, and so on.

Basic Properties
  • x: Position x
  • y: Position y
  • w: Canvas width
  • h: Canvas height
Optional Properties
  • anch: Anchor. All combinations are available.
Public Functions
  • Val(): Get image as URI encoded source
  • CTX(): Short writing for getContext(“2d”)
  • Raw(): Get imageData object of the canvas for pixel manipulation.

Trackbar

Control type code: “TRK”. Trackbar component with “min”/”max” labels.

Basic Properties
  • x: Position x
  • y: Position y
  • w: Width. The height is standard and depends on your browser.
  • min: Minimal value
  • max: Maximal value
  • step: Each movement step value
  • val: Starting value
Optional Properties
  • anch: Anchor tag. Combination of “TB” or “BT” has no effect
  • chng: onchange event
Public Functions
  • Val(v): Set the position of the trackbar. If v omitted, function will return its current position.
Example – Dynamic Creation
JavaScript
var c=EF.Put("TRK","C",{ x:16,y:16,w:288,min:0,max:10,step:1,val:5,anch:"LR" });

Image 26

Example – On Form Creation
JavaScript
function TrackbarExampleForm() {
        var _=this;
        _.inf={ w:320,h:120,txt:"Trackbar",min:[80,80],max:[800,200],chl:{
               C:["TRK",{x:16,y:16,w:288,min:0,max:10,step:1,val:5,anch:"LR"}]
        }};
}

Image 27

After resizing:

Image 28

Changing the value:

Image 29

Title Control

Control type code: “TIT”. This gives special styled label for in-form sectional title separation.

Basic Properties
  • x: Position x
  • y: Position y
  • w: Width. The height is constant and equal to twice form title height defined in stylesheet.
  • txt: Content text
Optional Properties
  • anch: Anchor tag. Combination of “TB” or “BT” has no effect.
  • mod: Specify the visibility of the title. The default is inset font. If this value is “O”, content font will be outset.
  • xclr: If set to 1, content font will be transparent with shadow effect. The default is colored font in readonly field BG color, with shadow effect.
Example – Dynamic Creation
JavaScript
var c=EF.Put("TIT","C1",{ x:16,y:16,w:368,txt:"Regular",anch:"LR" });

Image 30

Example – On Form Creation
JavaScript
function TitleControlExampleForm() {
        var _=this;
        _.inf={ w:400,h:400,txt:"Title control",min:[300,400],max:[1200,800],chl:{
               C1:["TIT",{x:16,y:16,w:368,txt:"Regular",anch:"LR"}],
               C2:["TIT",{x:16,y:96,w:368,txt:"Outset",anch:"LR",mod:"O"}],
               C3:["TIT",{x:16,y:176,w:368,
                    txt:"Regular but transparent",anch:"LR",xclr:1}],
               C4:["TIT",{
                       x:16,y:256,w:368,txt:"Both outset and transparent",
                       anch:"LR",mod:"O",xclr:1
               }],
        }};

}

Image 31

Panel Container

Control type code: “PAN”. Shorthand for <fieldset>, with solid system styling.

Basic Properties
  • x: Position x
  • y: Position y
  • w: Width
  • H: Height

Note: The size is including inner padding of 16px from each size, both horizontal and vertical. Therefore, inner size is smaller in 32px in width and in height.

Optional Properties
  • anch: Anchor tag. All combinations are available.
  • txt: Legend text. If omitted, no legend element will be generated.
  • chl: Deeper hash of child controls
Example – Dynamic Creation
JavaScript
var c=EF.Put("PAN","P",{ x:16,y:16,w:268,h:80,txt:"Fieldset",anch:"LRTB" });

Image 32

Example – On Form Creation
JavaScript
function FieldsetExampleForm() {
        var _=this;
        _.inf={ w:300,h:300,txt:"Fieldset",min:[200,200],max:[600,600],chl:{
               P:["PAN",{x:16,y:16,w:268,h:268,txt:"Fieldset",anch:"LRTB",chl:{
                       C1:["FLD",{x:16,y:16,w:236,max:4,lbl:"Label",anch:"LR"}],
                       C2:["FLD",{x:16,y:48,w:236,max:0,anch:"LR"}],
                       C3:["CVS",{x:16,y:80,w:128,h:128,anch:"LRTB"}]
               }}],
        }};
}

Image 33

Multiline Textbox

Control type code: “TAR”. Shorthand for <textarea> with solid system styling.

Basic Properties
  • x: Position x
  • y: Position y
  • w: Width
  • H: Height
  • max: Content maximal length in characters. If set to 0, will be read-only and have read-only field styling
Optional Properties
  • anch: Anchor tag. All combinations are available.
  • chng: onchange event
  • wrp: If set to 1, will disable word wrapping. The default is non-breaking word wrapping.
  • txt: Preset content
Public Functions
  • Val(v): Set content to v. If v omitted, function will return the content.
Example – Dynamic Creation
JavaScript
var c="EF.Put("TAR","P",{ x:16,y:16,w:368,h:368,max:30000,anch:"LRTB",txt: "" });
Example – On Form Creation
JavaScript
function F1(A) {
        var _=this;
        _.inf={ w:400,h:400,txt:"Multiline Textbox",min:[200,200],max:[600,600],chl:{
               P:["TAR",{x:16,y:16,w:368,h:368,max:30000,anch:"LRTB",txt:A}]
        }};
}
function F2(A) {
        var _=this;
        _.inf={
               w:400,h:400,txt:"Multiline Textbox - without word wrap",
               min:[200,200],max:[600,600],chl:{
                      P:["TAR",{x:16,y:16,w:368,h:368,
                          max:30000,anch:"LRTB",wrp:1,txt:A}]
               }
        };
}

function Init() {
        var TX="... Existing in its present form since 1985, 
                    the CE marking indicates that the manufacturer 
                    or importer claims compliance with the relevant EU 
                    legislation applicable to a product, regardless of 
                    where manufactured.\nBy affixing the CE marking on a product, 
                    a manufacturer is declaring, at its sole responsibility, 
                    conformity with all of the legal requirements to achieve 
                    CE marking which allows free movement and sale of the product 
                    throughout the European Economic Area.\nFor example, 
                    most electrical products must comply with the Low Voltage Directive 
                    and the EMC Directive; toys must comply with the Toy Safety Directive.
                    \nThe marking does not indicate EEA manufacture or that a product 
                    has been approved as safe by the EU or by another authority. 
                    The EU requirements may include safety, health, and environmental 
                    protection, and, if stipulated in any EU product legislation, 
                    assessment by a Notified Body or manufacture according to a 
                    certified production quality system.\nThe CE marking also 
                    indicates that the product complies with directives in relation to 
                    'Electro Magnetic Compatibility' - meaning the device 
                    will work as intended, without interfering with the use or function 
                    of any other device.\nNot all products need CE marking to be traded 
                    in the EEA; only product categories subject to relevant directives 
                    or regulations are required (and allowed) to bear CE marking. 
                    Most CE-marked products can be placed on the market subject only 
                    to an internal production control by the manufacturer 
                    (Module A; see Self-certification, below), with no independent 
                    check of the conformity of the product with EU legislation; 
                    ANEC has cautioned that, amongst other things, CE marking 
                    cannot be considered a \"safety mark\" for consumers. 
                    CE marking is a self-certification scheme. Retailers sometimes 
                    refer to products as \"CE approved\", but the mark 
                    does not actually signify approval. Certain categories of products 
                    require type-testing by an independent body to ensure conformity 
                    with relevant technical standards, but CE marking in itself 
                    does not certify that this has been done. ...";
        /* NOTE: Passing parameters to form constructor is only possible via keyword "v". 
        This is an object that can get every value, so the constructor will only 
        get 1 parameter. */
        EF.Open({ typ:"F1",x:16,y:192,v:TX });
        EF.Open({ typ:"F2",x:448,y:192,v:TX });
}

Image 34

After resizing the form:

Image 35

Combo Box

Control type code: “CMB”. It is more than just <select> element, but also has advanced features.

Basic Properties
  • x: Position x
  • y: Position y
  • w: Width. Height is the same as Single line Textbox
  • src: Options list
Optional Properties
  • alt: Alternative text field, if user want to select “other” option than those that exist in the list. The text appearing as “other…” is the value of this property that may change to anything else you may choose. Along with this property, there are other properties that can be used for supporting this special text field, see below.
  • srt: Sort mode. Available values are “A” Ascending, or “D” Descending. If omitted, items order in the list will remain in the same order as they enter.
  • all: Optional value for filtering purposes. For example: In a big table, we want to show only one category, and then we may use a combo box for selecting category. What if we want to remove the filter? We can still do it with the same combo: using “All” option. The text “All” is the value of this property that may change to anything else you may choose.
  • anch: Anchor tag. Combinations are the same as for Single line Textbox.
  • chng: onchange event.
  • sel: Default selected value or index. By default, the 1st item is selected.
  • lbl: Label text for associated label control, like in Single line Textbox.
  • tb: Tab index.
Alternative Text Field Properties
  • max: Maximum characters count in the “Other…” text field. The default is 128 characters.
  • acm: Autocomplete feature. Settings are the same as for Single line Textbox.
  • mlg: If set to 1, will force “Other…” field value to be Multilingual Textbox.
Public Functions
  • Sort(d): Sort the combo options list by direction d, values are “A” or “D” like in srt.
  • Add(d): Add an “option” to the combo box. If d is array, function will add all options in d, one by one, to the combo box.
  • Exists(value,r): Check if value exists within the options of this combo. Will return requested item’s index if exists, or -1 if not exists. If r set to “v”, it will return array of all matching items containing value as their part. If r is “i”, will make the same lookup like “v”, but return array of indexes instead of values.
  • Del(v): Remove item from the combo. v can be value or index. If v omitted, will remove the selected item.
  • Val(v): Select an item v or index v. If v omitted, function will return selected item value.
  • Clean(): Remove all items from the combo, except “Other” and “All” if exists.
  • Replace(old,new): Replace item old by item new. old can be also index, not limited to value.
  • toArray(): Return array of all items in the combo, excluding “All” and “Other”.
Example – Dynamic Creation
JavaScript
var c=EF.Put("CMB","P",{ x:16,y:16,w:268,lbl:"Typical: ",src:[
        "Orange","Peach","Banana","Apple","Strawberry",
        "Grape","Lemon","Watermelon","Appricot","Pear"
],anch:"LR",sel:6 });

Image 36

Example – On Form Creation
JavaScript
function ComboBoxExampleForm(X) {
        var _=this;
        _.inf={ w:300,h:300,txt:"Combo Box",min:[300,300],max:[600,600],chl:{
               C1:["CMB",{x:16,y:16,w:268,lbl:"Typical: ",src:X,anch:"LR",sel:6}],
               C2:["CMB",{x:16,y:48,w:268,lbl:"With alt.: ",
                    src:X,anch:"LR",alt:"New fruit..."}],
               C3:["CMB",{
                       x:16,y:80,w:268,lbl:"Multilingual alt.: ",
                       src:X,anch:"LR",alt:"New fruit...",mlg:1
               }],
               C4:["CMB",{x:16,y:112,w:268,lbl:"Sorted: ",
                    src:X,anch:"LR",srt:"A",sel:"Lemon"}]
        }};
}
EF.Run({typ:"ComboBoxExampleForm",v:[
        "Orange","Peach","Banana","Apple","Strawberry",
        "Grape","Lemon","Watermelon","Appricot","Pear"
]});

Image 37

Alternative selection:

Image 38

Sorted list:

Image 39

Note: The sort mode for numeric or alphabetic is automatic. The SDK knows to detect if the values compared are all numeric or not.

Multilingual Textbox

Control type code: “MLG”. This is a special control available only in eForms™, and is one of the OEM benefits of this SDK. This field allows declaring value that is multilingual, and the displayed value will be only the one matching browser’s language. The user decides which languages to support in each value. This helps to make the Web App multilingual in a very easy way.

Basic Properties
  • x: Position x
  • y: Position y
  • w: Width. Height is the same as Single line Textbox
Optional Properties
  • anch: Anchor tag. Combinations are the same as for Single line Textbox.
  • alg: Text alignment. Default is left alignment. Available values are the same as for Single line Textbox, except “P” for password, as this field is not suited for password field.
  • txt: Initial value. Despite multilingual field construction is a hash, to be stored as string and make it easier to transfer over the network is easier to convert it to EFON (E-Forms Object Notation) which is a special base64 notation of object. To use this, you may create a hash with language ISO code as key (upper-case), and then convert it to EFON. Here is an example:
var V=EF.L({
        "EN-US":"English text value",
        "ZH-CN":"Chinese text value",
        "ES-ES":"Spanish text value"
});
  • This will create ML object type in V. ML (MultiLingual) object type is also part of eForms SDK.
  • lbl: Label text for associated label control, like in Single line Textbox
  • tb: Tab index
  • chng: On change event
Public Functions
  • Val(v): Set the value to v. If v omitted, function will return control’s value as ML object.
Example – Dynamic Creation
JavaScript
var c=EF.Put("MLG","P",{ x:16,y:16,w:268,lbl:"Visible text: ",anch:"LR" });

Image 40

Example – On Form Creation
JavaScript
function MLG() {
        var _=this;
        _.inf={ w:300,h:100,txt:"Multilingual Textbox",min:[300,100],max:[800,100],chl:{
               C:["MLG",{x:16,y:16,w:268,lbl:"Visible text: ",anch:"LR"}]
        }};
}

Image 41

After clicking the field, can see the table of language values on the left, and the available languages on the right, with their flags for convenience:

Image 42

Note: Languages on the right panel are sorted for easy use. The window contains splitter container control which can be resized, so you can choose whether to increase or decrease each of the visible parts.

Note the “X” button, for removing language from the table on the left.

For selecting language, first scroll to see the requested language on screen and then click its flag. The language will be added to the table on the left, while the flag button will move to the top of the list for later convenience, as “common used languages” shall be first:

Image 43

The yellow selected line in the table is content-editable, so can enter a value there.

Image 44

After clicking “OK”, this is what will happen (English is shown as the browser language running this example is “EN-US” – American English):

Image 45

Splitter Container

Control type code: “SPL”. This is a double container with vertical or horizontal orientation and with option for both containers to resize.

Basic Properties
  • x: Position x
  • y: Position y
  • w: Total width
  • h: Total height
  • f: Left initial width or Top initial height (depend on orientation)
Optional Properties
  • ori: Define the orientation of the split. The default is horizontal orientation, when containers are 1 on left and 1 on right, with horizontal resizing bar. If this property is set to 1, the orientation will switch to vertical, which means 1 container on top and 1 on bottom with vertical resizing bar.
  • anch: Anchor tag. All combinations are available.
  • chl: Child controls. This property has this time array of two parts, one for 1st container and one for the 2nd:
    • 0: Left or Top container
    • 1: Right or Bottom container

Each of the elements mentioned above, shall have a hash of the controls, like usual. For manual adding controls, the DOM element of each of the containers is accessible via wing variable, which contains array of two parts, relation is the same as in chl.

Example – Dynamic Creation
JavaScript
var c=EF.Put("SPL","C",{ x:16,y:16,w:268,h:268,anch:"LRTB",f:120,chl:[
       /* First Container (Left) */
       {
               C1:["FLD",{x:16,y:16,w:80,max:7,anch:"LR"}],
               C2:["FLD",{x:16,y:48,w:80,max:7,anch:"LR"}],
               C3:["FLD",{x:16,y:80,w:80,max:7,anch:"LRB"}]
       },
       /* Second Container (Right) */
       {
               C4:["FLD",{x:16,y:16,w:80,max:7,anch:"LR"}],
               C5:["FLD",{x:16,y:48,w:80,max:7,anch:"LR"}],
               C6:["FLD",{x:16,y:80,w:80,max:7,anch:"LRB"}]
        }
] });

Image 46

Example – On Form Creation
JavaScript
function F1() {
        var _=this;
        _.inf={ w:300,h:300,txt:"Splitter container - Horizontal",
                min:[300,300],max:[600,600],chl:{
               C:["SPL",{ x:16,y:16,w:268,h:268,anch:"LRTB",f:120,chl:[
                       /* First Container (Left) */
                       {
                              C1:["FLD",{x:16,y:16,w:80,max:7,anch:"LR"}],
                              C2:["FLD",{x:16,y:48,w:80,max:7,anch:"LR"}],
                              C3:["FLD",{x:16,y:80,w:80,max:7,anch:"LRB"}]
                       },
                       /* Second Container (Right) */
                       {
                              C4:["FLD",{x:16,y:16,w:80,max:7,anch:"LR"}],
                              C5:["FLD",{x:16,y:48,w:80,max:7,anch:"LR"}],
                              C6:["FLD",{x:16,y:80,w:80,max:7,anch:"LRB"}]
                       }
               ] }]
        }};
}

function F2() {
        var _=this;
        _.inf={ w:300,h:300,txt:"Splitter container - Vertical",
                min:[300,300],max:[600,600],chl:{
               C:["SPL",{ x:16,y:16,w:268,h:268,anch:"LRTB",f:120,ori:1,chl:[
                       /* First Container (Top) */
                       {
                              C1:["FLD",{x:16,y:16,w:80,max:7,anch:"LR"}],
                              C2:["FLD",{x:16,y:48,w:80,max:7,anch:"LR"}],
                              C3:["FLD",{x:16,y:80,w:80,max:7,anch:"LRB"}]
                       },
                       /* Second Container (Bottom) */
                       {
                              C4:["FLD",{x:16,y:16,w:80,max:7,anch:"LR"}],
                              C5:["FLD",{x:16,y:48,w:80,max:7,anch:"LR"}],
                              C6:["FLD",{x:16,y:80,w:80,max:7,anch:"LRB"}]
                       }
               ] }]
        }};
}

function F3() {
        var _=this;
        _.inf={ w:300,h:300,txt:"Splitter container - Complex",
                min:[300,300],max:[600,600],chl:{
               CM:["SPL",{ x:16,y:16,w:268,h:268,anch:"LRTB",f:120,chl:[
                       /* First Container (Left) */
                       {
                              C1:["FLD",{x:16,y:16,w:80,max:7,anch:"LR"}],
                              C2:["FLD",{x:16,y:48,w:80,max:7,anch:"LR"}],
                              C3:["FLD",{x:16,y:80,w:80,max:7,anch:"LRB"}]
                       },
                       /* Second Container (Right) */
                       {
                              CD:["SPL",{ x:0,y:0,w:140,h:268,anch:"LRTB",
                                       f:120,ori:1,chl:[
                                      /* First Container (Top) */
                                      {
                                             C4:["FLD",{x:16,y:16,w:160,
                                                  max:15,anch:"LR"}],
                                             C5:["FLD",{x:16,y:48,w:160,
                                                  max:15,anch:"LR"}],
                                             C6:["FLD",{x:16,y:80,w:160,
                                                  max:15,anch:"LRB"}]
                                      },
                                      /* Second Container (Bottom) */
                                      {
                                             C7:["FLD",{x:16,y:16,w:160,
                                                  max:15,anch:"LR"}],
                                             C8:["FLD",{x:16,y:48,w:160,
                                                  max:15,anch:"LR"}],
                                             C9:["FLD",{x:16,y:80,w:160,
                                                  max:15,anch:"LRB"}]
                                      }
                              ] }]
                       }
               ] }]
        }};
}
function Init() {
        EF.Open({ typ:"F1",x:16,y:192 });
        EF.Open({ typ:"F2",x:332,y:192 });
        EF.Open({ typ:"F3",x:648,y:192 });
}

Image 47

After resizing:

Image 48

Image 49

Image 50

Table

Control type code: “TBL”. Not just simple <table> HTML tag, but closer to Microsoft Visual Studio DataGridView object with advanced options.

Basic Properties
  • x: Position x
  • y: Position y
  • w: Total width
  • h: Total height
  • col: columns list. Each column item in this array is a hash of optional properties, as follows:
    • tag: Capture text
    • w: Width of column
    • min: Minimal width for resizing
    • max: Maximal width for resizing
      Note: If one of the properties min or max is omitted, column will be of fixed size.
  • flt: If set, filter will be applied to the column. A filter is a combo box which contains all existing values in specific column, without repetition, with “ALL” option, named by default as “-“, unless specified in flt.all.
  • srt: Sort mode. If specified, column will have sort icon that allows to sort the table using this column ascending or descending. This property can be set for initial sort. Values can be “A” Ascending or “D” Descending.
    • hid: If set to 1, column will be hidden.
    • edt: If set to 1, column will be content editable – text box.
Optional Properties
  • anch: Anchor tag. All combinations are available.
  • lh: If set to 1, left column will have header styling to looks header column.
  • sel: Selection mode. By default, there is no row selection. This property can be set to “S” for single row selection, or “M” for multi-row selection. In this SDK, full row selection mode is applied, and selection styling does not apply to header cells.
  • chng: On selection change event
  • src: Source content, a 2D array of values to fill the table with
Public Functions
  • Sort(col): Sort the table based on specific column col. Sorting direction is taken based on the column current sort settings.
  • Add(Cells array): Add row to the table. Cells array length must fit the existing column count of the table.
    Note: The first column (index=0) is a key column. Values cannot duplicate among other rows! Trying to add row that its 1st cell value already exists in other rows in the 1st column, will result in updating that specific row. This is good for quick updating without the need of a first look up call. Note that the table 1st row is reserved, and not counts. Therefore, 1st valid row of the table will have “1” as index.
  • AddCol(Column data,Rows info): Add column to the table. Properties in Column data are the same as in single col property item. Rows info is optional, and is a list of all cells values in the new column, for all rows. Length must be equal to the existing rows count of the table.
  • Del(row): Delete row. If row is omitted, selected rows, if any, will be removed. row can be key or index.
  • Sel(row): Select/Deselect row. If selection mode is single, row can only be selected, while the other row will be automatically deselected. If selection mode is multi-row selection, selected row will be deselected. row can be key or index.
  • Clean(): Clears the table, keeping the reserved row.
  • Val(sel,Filter): Query for retrieving table content. If sel is “T”, the entire table is returned. If sel is number, will return column[sel] as array of cells. If sel omitted, function will return selected row as array of cells in single selection mode, or 2D array of selected rows in multi-row selection mode. Filter is optional for filtering use, it shall then contain query string of required columns, delimited by comma.
  • Exists(key): Check if specific row key exists. It will return row index if yes, or 0 if not exists. Row[0] is not valid – so there is no chance to have values there.
Accessible Elements
  • TableControl.tbl: The table DOM element itself
  • TableControl.hdr: The header table DOM element

Note: The purpose of separating the header from the table is for scrolling convenience. To achieve this feature just by JS/CSS is still hard work that this SDK saves from you.

Example – Dynamic Creation
JavaScript
var c=EF.Put("TBL","C",{ x:16,y:16,w:468,h:268,anch:"LRTB",sel:"S",col:[
        { tag:"Col A",w:80,min:80,max:400,srt:"A" },
        { tag:"Col B",w:80,srt:"A" },
        { tag:"Col C",w:80,hid:1 },
        { tag:"Col D",w:80,srt:"A",flt:1 },
        { tag:"Col E",w:80,min:80,max:400,srt:"D",flt:1 }
] });

Image 51

Example – On Form Creation
JavaScript
function F1(C) {
        var _=this;
        _.inf={ w:500,h:300,txt:"Table - typical",min:[100,100],max:[900,600],chl:{
               C:["TBL",{ x:16,y:16,w:468,h:268,anch:"LRTB",sel:"S",src:C,col:[
                       {tag:"Col A",w:80,min:80,max:400,srt:"A"},
                       {tag:"Col B",w:80,srt:"A"},
                       {tag:"Col C",w:80,hid:1},
                       {tag:"Col D",w:80,srt:"A",flt:1},
                       {tag:"Col E",w:80,min:80,max:400,srt:"D",flt:1}
               ] }]
        }};
}
function F2(C) {
        var _=this;
        _.inf={ w:500,h:300,txt:"Table - with row header",
                min:[100,100],max:[900,600],chl:{
               C:["TBL",{ x:16,y:16,w:468,h:268,anch:"LRTB",sel:"S",src:C,lh:1,col:[
                       {tag:"Col A",w:80,min:80,max:400,srt:"A"},
                       {tag:"Col B",w:80,srt:"A"},
                       {tag:"Col C",w:80},
                       {tag:"Col D",w:80,srt:"A",flt:1},
                       {tag:"Col E",w:80,min:80,max:400,srt:"D",flt:1}
               ] }]
        }};
}
function Init() {
        /* Tables arbitrary content 2D array */
        var C=[];
        for(var i=0 ; i<500 ; i++) {
               var E=[];
               for(var k=0 ; k<5 ; k++)
                       E.push(Math.floor(Math.random()*((k==0)?1000000:30))+"");
               C.push(E);
        }

        EF.Open({ typ:"F1",x:16,y:192,v:C });
        EF.Open({ typ:"F2",x:564,y:192,v:C });
}

Image 52

Items in combo filter are sorted (automatically, regardless of column sort mode):

Image 53

Filtered by one column:

Image 54

Filtered by two columns:

Image 55

Sorted:

Image 56

Column resized:

Image 57

Selected row:

Image 58

Scrolled vertically, header remains visible:

Image 59

TreeView

Control type code: “TRE”. This gives well-visualized tree-view control with optional line grids and icons.

Basic Properties
  • x: Position x
  • y: Position y
  • w: Total width
  • h: Total height
Optional Properties
  • anch: Anchor tag. All combinations are available.
  • xsel: If set to 1, disable node selection.
  • xlin: If set to 1, remove line grids.
  • chng: On selection change callback
  • ndh: Nodes hash for presetting. This hash keys are each node key, shall be unique within brothers scope. Properties are:
    • txt: Visible text
    • img: Icon for the node
    • sel: Icon that will show if this node is selected
    • nodes: sub-children, act the same as ndh
Public Functions
  • Val(v): Select node by key path v. If v omitted, function will return selected treenode DOM object.
  • Add(n,p): Add treenode n to parent node p. n is a hash of node properties, and p shall be key path.
  • Del(k): Remove node by key path k. k can be TreeNode object too. If k is omitted, selected node will be removed.
  • GetPath(): Will return selected node full path
  • GetNode(k): Will return TreeNode object from key path k
Useful Parameters
  • TreeView.SN: Selected node object
  • TreeNode.KY: Specific node unique key (not path!).
    Note: If, for example, specific node key is “E2”, and parent key is “D1”, and “D1” parent key is “C4”, the full path of “E2” node will then be: “C4_D1_E2”. Path separator is “_”. If the treeview name is “TV” and it sits directly on form named “F” which sits directly on document body, the full ID of the tree-view is then “F_TV”, hence the full ID of “E2” node will then be: “F_TV_C4_D1_E2”.
Example – Dynamic Creation
JavaScript
var c=EF.Put("TRE","T",{ x:16,y:16,w:468,h:268,anch:"LRTB" });
Example – On Form Creation
JavaScript
function TreeViewExampleForm() {
        var _=this;
        _.inf={ w:500,h:300,txt:"TreeView",min:[100,100],max:[1200,800],chl:{
               T:["TRE",{ x:16,y:16,w:468,h:268,anch:"LRTB",ndh:{
                       N1:{txt:"Colors",img:"tre/colors.png",nodes:{
                              N1:{txt:"Red"},
                              N2:{txt:"Green"},
                              N3:{txt:"Blue"},
                              N4:{txt:"White"},
                              N5:{txt:"Black"}
                       }},
                       N2:{txt:"Shapes",img:"tre/shapes.png",nodes:{
                              N1:{txt:"Circle"},
                              N2:{txt:"Square"},
                              N3:{txt:"Triangle"},
                              N4:{txt:"Octagon"},
                              N5:{txt:"Ellipse"}
                       }},
                       N3:{txt:"Countries",img:"tre/countries.png",nodes:{
                              N1:{txt:"Germany",nodes:{
                                      N1:{txt:"Dusseldorf"},
                                      N2:{txt:"Berlin"},
                                      N3:{txt:"Bonn"},
                                      N4:{txt:"Koln"}
                              }},
                              N2:{txt:"U.S.A.",nodes:{
                                      N1:{txt:"New York"},
                                      N2:{txt:"Los Angeles"},
                                      N3:{txt:"Miami"},
                                      N4:{txt:"Chicago"}
                              }},
                              N3:{txt:"China",nodes:{
                                      N1:{txt:"Guangdong",img:"tre/center.png"},
                                      N2:{txt:"Liaoning"},
                                      N3:{txt:"Sichuan"},
                                      N4:{txt:"Shanghai"},
                                      N5:{txt:"Beijing"}
                              }},
                              N4:{txt:"Israel",nodes:{
                                      N1:{txt:"Tel-Aviv"},
                                      N2:{txt:"Jerusalem"},
                                      N3:{txt:"Eilat"}
                              }}
                       }}
               } }]
        }};
}

Image 60

Expanded:

Image 61

Selected node:

Image 62

Tab Page Selector

Control type code: “TAB”.

Basic Properties
  • x: Position x
  • y: Position y
  • w: Total width
  • h: Total height, including the title bar
  • tabs: Array of tab pages. Each value is an array of the following:
    • 0: Access key
    • 1: Text capture

Note: The reason I didn’t choose to use hash, is that elements in hash have no fixed order, and it may affect the order the tab pages are shown – which in most cases is critical for the user.

Optional Properties

Note: As tabs can be added and deleted, certain tab may “change” its actual index. This is why it is the best to use access key for manipulating tab pages.

  • anch: Anchor tag. All combinations are available.
  • sel: Selected tab. This value shall be access key, but it can also be index. If omitted, 1st tab will be selected.
  • chng: On tab page selection changed event
  • chl: Children controls for easy preset
Public Functions
  • Add(v): Add tab page which has key v[0], and capture text v[1].
  • Del(k): Remove tab with access key k. If k omitted, selected tab will be removed.
  • Select(k): Select tab by key k. k can also be index.
Useful Parameters
  • TabControl.wing[TabKey]: Specific TabPage object
  • TabControl.wing[TabKey].PG: TabPage internal page container
  • TabControl.wing[TabKey].innerText: The title of specific TabPage
Example – Dynamic Creation
JavaScript
var c=EF.Put("TAB","T",{ x:16,y:16,w:468,h:318,anch:"LRTB",tabs:[] });
Example – On Form Creation
JavaScript
function TabPagesExampleForm() {
        var _=this;
        _.inf={ w:500,h:350,txt:"Tab pages",min:[100,100],max:[1200,800],chl:{
               T:["TAB",{ x:16,y:16,w:468,h:318,anch:"LRTB",sel:"P3",tabs:[
                       ["P1","1st page"],
                       ["P2","2nd page"],
                       ["P3","3rd page"],
                       ["P4","4th page"]
               ],chl:[
                       {
                              C1:["FLD",{x:16,y:16,w:200,anch:"LR",max:0}],
                              C2:["FLD",{x:16,y:48,w:200,anch:"LR",max:32}],
                              C3:["IMG",{x:16,y:80,w:400,h:200,anch:"LRTB",
                                         src:"img/Pic.jpg"}]
                       },{
                              C4:["FLD",{x:16,y:16,w:300,anch:"LR",max:6}],
                              C5:["CHK",{x:16,y:48,txt:"Check it"}],
                              C6:["RDO",{x:16,y:80,w:200,h:150,
                                 rb:[ "Option A","Option B","Option C" ]}]
                       },{
                              C7:["FLD",{x:16,y:16,w:300,max:32,anch:"LR"}],
                              C8:["FLD",{x:16,y:48,w:250,max:0,anch:"LR"}],
                              C9:["FLD",{x:16,y:80,w:400,max:64,anch:"LRB"}]
                       },{
                              C10:["FLD",{x:16,y:16,w:300,max:32,alg:"R",anch:"LR"}],
                              C11:["PAN",{x:16,y:48,w:300,h:140,chl:{
                                      C11X:["IMG",{
                                             x:4,y:16,w:200,h:120,anch:"LRTB",
                                             src:"img/Pic.jpg",alg:"Z"
                                      }]
                              },anch:"LRTB",txt:"Settings"}],
                              C12:["SBT",{x:16,y:192,txt:"OK!",img:"OK.png",anch:"B"}]
                       }
               ] }]
        }};
}

Image 63

Color Picker

Control type code: “CPK”. Basically, it is a button that shows color, with option for modification. This control has a special color picker which allows also optional alpha channel.

Basic Properties
  • x: Position x
  • y: Position y
  • w: Control button width
  • txt: The title to appear on the color-picking dialog box
Optional Properties
  • alp: If set to 1, will add alpha channel. Default is RGB only.
  • anch: Button anchor tag. Combinations like “TB” or “BT” has no effect, due to fixed height of field control.
  • sel: Preset color. The default is white, fully opaque if alpha channel is applied.
  • chng: On color change event
  • rdo: If set to 1, will be read-only
  • lbl: Label text for associated label control, like in Single line Textbox
Public Functions
  • Val(v): Set color to be v. The value in v shall be array of [R,G,B] or [R,G,B,A], depends if alpha channel applicable. Each of the RGB channels value can be 0 to 255, alpha channel value is 0 (transparent) to 1 (opaque). If omitted, will return selected color as array of RGB or RGBA, depends if alpha channel is applicable or not.
Example – Dynamic Creation
JavaScript
var c=EF.Put("CPK","C",{ x:16,y:16,w:268,lbl:"Without alpha:",
              txt:"Color picker",sel:[255,255,0] });

Image 64

Example – On Form Creation
JavaScript
function ColorPickerExampleForm() {
        var _=this;
        _.inf={ w:300,h:100,txt:"Color pickers",chl:{
               C1:["CPK",{ x:16,y:16,w:268,lbl:"Without alpha:",
                           txt:"Color picker",sel:[255,255,0] }],
               C2:["CPK",{ x:16,y:48,w:268,lbl:"With alpha:",
                           txt:"Pick a color",alp:1,sel:[0,0,255,0.5] }]
        }};
}

Image 65

Can see that dark colors have white text, and light colors have black text for clear visibility. After clicking the blue button:

Image 66

After clicking the yellow button:

Image 67

Selecting color example:

Image 68

After clicking OK:

Image 69

Date Picker

Control type code: “CAL”. Basically, this field is to show date and time, with option for modification. This control has date and time picker. You can set it to pick only time, only date, or both.

Basic Properties
  • x: Position x
  • y: Position y
  • w: Control button width
  • txt: The text to appear on the date/time picker form
Optional Properties
  • anch: Button anchor tag. Combinations like “TB” or “BT” has no effect, due to fixed height of field control.
  • val: Preset value. This shall be timestamp of JavaScript, which is the number of milliseconds passed since 01-01-1970 midnight 00:00:00. If omitted, current date will be taken.
  • tm: If set to “y”, both “date” and “time” will be applicable. If set to “o”, only “time” will be applicable. If omitted, only “date” will be applicable.
  • lbl: Label text for associated label control, like in Single line Textbox.
  • rdo: If set to 1, will be read-only.
Public Functions
  • Val(v): Set the date and/or time of this control by timestamp v. If v is -1, this function will set the date to now. If v omitted, this function will return selected date and/or time, depending on what is applicable.
Useful Parameters
  • DateTimePicker.dto: A DateTime object.
Example – Dynamic Creation
JavaScript
var c=EF.Put("CAL","C",{ x:16,y:16,w:468,lbl:"Date only:",txt:"Pick date" });
Example – On Form Creation
JavaScript
function DateTimePickerExampleForm() {
        var _=this;
        _.inf={ w:500,h:150,txt:"Date and/or time pickers",chl:{
               C1:["CAL",{ x:16,y:16,w:468,lbl:"Date only:",txt:"Pick date" }],
               C2:["CAL",{ x:16,y:48,w:468,lbl:"Time only:",txt:"Pick time",tm:"o" }],
               C3:["CAL",{ x:16,y:80,w:468,lbl:"Date and time:",
                    txt:"Pick date and time",tm:"y" }]
        }};
}

Image 70

After clicking the 1st:

Image 71

After clicking the 2nd:

Image 72

After clicking the 3rd:

Image 73

<a id="TTP" name="TTP"></a>ToolTip

Can be added to each of the above controls, by specifying ttp property. This is balloon with option for error style or regular style. ttp is a hash containing the following properties:

Basic
  • msg: Content text
Optional
  • tit: Title text. If omitted, system will use preset text for tool tip.
  • at: Fade in time in 0.01 sec. If set to 0, balloon will immediately appear. Default is to 1 sec.
  • wt: Wait time AFTER mouse left the field (in ms). Default waiting time is 3000ms.
  • ot: Fadeout time - in 0.01 sec. If set to 0, balloon will immediately disappear. Default is 1 sec.
  • alr: If set to 1, class color will be for error style.
Example of Use
JavaScript
function ToolTipExampleForm() {
        var _=this;
        _.inf={ w:300,h:160,txt:"ToolTip",chl:{
               C1:["FLD",{ x:16,y:16,w:268,max:6,lbl:"User code:",ttp:{
                       tit:"Note:",
                       msg:"Typical user code starts with 1, VIP starts with 2."
               } }],
               C2:["SBT",{ x:16,y:48,txt:"Send",cbk:Validate }]
        }};
        function Validate() {
               var v=_.eF.ctr.C1.Val();
               if(v[0]!=="1" && v[0]!=="2") {
                      EF.Put("TTP","",{
                               tit:"Input error",
                               msg:"User code is wrong!",
                               alr:1
                      },_.eF.ctr.C1);
               }
        }
}

Basic – On Mouse Over:

Image 74

Error – after clicking “Send”:

Image 75

History

  • 1st August, 2017: Initial version

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


Written By
CrazyGao
Software Developer CrazyGao
China China
This member has not yet provided a Biography. Assume it's interesting and varied, and probably something to do with programming.

Comments and Discussions

 
First Prev Next
QuestionSorry, but I don't get it. Pin
snoopy0017-Aug-17 23:32
snoopy0017-Aug-17 23:32 
AnswerRe: Sorry, but I don't get it. Pin
CrazyGao8-Aug-17 0:24
professionalCrazyGao8-Aug-17 0:24 
QuestionSnippets Pin
Nelek6-Aug-17 19:06
protectorNelek6-Aug-17 19:06 
AnswerRe: Snippets Pin
Nelek6-Aug-17 20:18
protectorNelek6-Aug-17 20:18 
Last Visit: 31-Dec-99 18:00     Last Update: 19-Apr-24 12:53Refresh1

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

Permalink
Advertise
Privacy
Cookies
Terms of Use
Layout: fixed | fluid

Posted 1 Aug 2017

Article Copyright 2017 by CrazyGao
Everything else Copyright © CodeProject, 1999-2024

Web02 2.8:2024-04-02:1