Click here to Skip to main content
13,355,018 members (56,378 online)
Click here to Skip to main content
Add your own
alternative version

Stats

5.7K views
222 downloads
11 bookmarked
Posted 1 Aug 2017

eForms

, 6 Aug 2017
Rate this:
Please Sign up or sign in to vote.
Easy way to create Single Page WebApp

Introduction

  • Make it easy creating 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 DEPENDENTIES!
  • 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 transfering 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 looking for clear and readable code, our goal is for 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 new project

First, lets take a look on the stylesheet that the SDK provides, and how easy 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 on each example HTML page.

Basic empty page

<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() need 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.

Hello World Code Example

<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 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 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

The page layout:

Dragged and resized:

The page with the ribbon:

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: Are depend 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 no needs 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 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 is a form that has only one instance. If you want to give 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
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 magical function that will be called immediately when form instance 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 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 check for relat6ed forms and data, and cleans related memory parameters.

Val(v) This is 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 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 is the control in the hierarchy inside the form, 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 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 lies 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
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 });
}

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 consist 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 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:

        cbk: A function to perform when content is loaded to memory or sent to the specified CGI script.

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.

        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
var C=EF.Put("SBT","B1",{ x:16,y:16,txt:"Typical",img:"Example.png", Clicked });

Example – On form creation
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!"}); }
}

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

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 no 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 field are minimal, regardless to the language presented in the current browser settings, as the label width is dynamic.

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

acm: Special styled autocomplete feature. This is a small array of 2 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
var C=EF.Put("FLD","C1",{ x:16,y:16,w:368,max:12,lbl:"Editable:" });

Example – On form creation
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!"}); }
}

The anchor effect:

The autocomplete:

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 need 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

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

Example – On form creation
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";
        }
}

After resizing, based on Anchor Tag:

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
var c=EF.Put("CHK","C1",{ x:16,y:16,txt:"Check me",chng:Tick });

Example – On form creation
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")});
        }
}

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
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"
});

Example – On form creation
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 looks like the following:

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

Wide resizing, how affect the auto-alignment:

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): Set image source based on v. All given images sits 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 imformation on pixel manipulation, see JavaScript documentation for Canvas.getContext(“2d”).getImageData().

FromData(v): Update image source using imageData Object in v.

ToB64(): Return image content as base64 URI encoded string for easy over the network transferring.

Example – Dynamic creation
var c=EF.Put("IMG","IX",{ x:16,y:16,w:256,h:256,src:"img/Pic.jpg",anch:"LRTB" });

Example – On form creation
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 });
}

After form resizing:

 

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

Canvas

Control type code: “CVS”. This will create 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
var c=EF.Put("TRK","C",{ x:16,y:16,w:288,min:0,max:10,step:1,val:5,anch:"LR" });

Example – On form creation
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"}]
        }};
}

After resizing:

Changing the value:

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
var c=EF.Put("TIT","C1",{ x:16,y:16,w:368,txt:"Regular",anch:"LR" });

Example – On form creation
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
               }],
        }};

}

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
var c=EF.Put("PAN","P",{ x:16,y:16,w:268,h:80,txt:"Fieldset",anch:"LRTB" });

Example – On form creation
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"}]
               }}],
        }};
}

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
var c="EF.Put("TAR","P",{ x:16,y:16,w:368,h:368,max:30000,anch:"LRTB",txt: "" });
Example – On form creation
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 });
}

After resizing the form:

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 exists 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
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 });

Example – On form creation
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"
]});

Alternative selection:

Sorted list:

Note: The sort mode for numeric or alphabetic is automatic. The SDK know to detect is 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
var c=EF.Put("MLG","P",{ x:16,y:16,w:268,lbl:"Visible text: ",anch:"LR" });

Example – On form creation
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"}]
        }};
}

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:

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:

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

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

Splitter container

Control type code: “SPL”. This is 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 2 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 2 parts, relation is the same as in chl.

Example – Dynamic creation
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"}]
        }
] });

Example – On form creation
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 });
}

After resizing:

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
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 }
] });

Example – On form creation
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 });
}

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

Filtered by one column:

Filtered by 2 columns:

Sorted:

Column resized:

Selected row:

Scrolled vertically, header remains visible:

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
var c=EF.Put("TRE","T",{ x:16,y:16,w:468,h:268,anch:"LRTB" });
Example – On form creation
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"}
                              }}
                       }}
               } }]
        }};
}

Expanded:

Selected node:

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

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.

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.

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
var c=EF.Put("TAB","T",{ x:16,y:16,w:468,h:318,anch:"LRTB",tabs:[] });
Example – On form creation
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"}]
                       }
               ] }]
        }};
}

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 allow 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], depend 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, depend if alpha channel is applicable or not.

Example – Dynamic creation
var c=EF.Put("CPK","C",{ x:16,y:16,w:268,lbl:"Without alpha:",txt:"Color picker",sel:[255,255,0] });

Example – On form creation
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] }]
        }};
}

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

After clicking the yellow button:

Selecting color example:

After clicking OK:

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, depend of what is applicable.

Useful parameters

DateTimePicker.dto: A DateTime object.

Example – Dynamic creation
var c=EF.Put("CAL","C",{ x:16,y:16,w:468,lbl:"Date only:",txt:"Pick date" });
Example – On form creation
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" }]
        }};
}

After clicking the 1st:

 

After clicking the 2nd:

 

After clicking the 3rd:

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
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:

Error – after clicking “Send”:

License

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

Share

About the Author

CrazyGao
Software Developer CrazyGao
China China
No Biography provided

You may also be interested in...

Pro
Pro

Comments and Discussions

 
QuestionSorry, but I don't get it. Pin
snoopy0018-Aug-17 0:32
membersnoopy0018-Aug-17 0:32 
AnswerRe: Sorry, but I don't get it. Pin
CrazyGao8-Aug-17 1:24
professionalCrazyGao8-Aug-17 1:24 
QuestionSnippets Pin
Nelek6-Aug-17 20:06
protectorNelek6-Aug-17 20:06 
AnswerRe: Snippets Pin
Nelek6-Aug-17 21:18
protectorNelek6-Aug-17 21:18 

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 | Terms of Use | Mobile
Web04 | 2.8.180111.1 | Last Updated 7 Aug 2017
Article Copyright 2017 by CrazyGao
Everything else Copyright © CodeProject, 1999-2018
Layout: fixed | fluid