Skip to content

nowca/uiformelements.js

BranchesTags

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

3 Commits
development
development
 
 
doc
doc
 
 
production
production
 
 
LICENSE.txt
LICENSE.txt
 
 
README.html
README.html
 
 
README.md
README.md
 
 

Repository files navigation

UIFormElements.js

The version 0.8b is still in its beta state. Some attributes are not implemented. The library can be used for basic applications or educational tasks, such as prototyping, testing, learning, research or quick development.

aloha

This is a legacy-compatible HTML Form toolkit for prototyping or web-applications with simple form-elements.

It is sucessfully tested with Firefox 25 and Chromium 70 on Linux x64.

Check out the live-editor: https://nowca.github.io/uiformelements.js/development/live-editor/UILiveEditor.html


screenshot


Contents


Usage and examples

There are two methods to use the script:

  • Forms with HTML: Declarative HTML initialization

and:

  • Forms with JavaScript: Procedural JavaScript instructions

  • Declarative HTML example elements, with JS initialization:

/production/examples/example-declarative.html

  • Procedural JS example elements:

/production/examples/example-procedural.html

  • Application example with a calculator using JS-eval():

/production/examples/example-calculator-export.html

  • UICodeConsole.js-extension example, for exporting the generated form as static HTML:

/production/examples/examples-with-code-console.html


Forms with HTML: Declarative HTML initialization

Write a container-DIV node with its element-id and its contents and the HTML-attributes:

<div class="Layout" id="main-container">
    <div class="Tab" id="tab-group-1" title="Fieldset Tab Group">
    	<div class="Group" inline=true>
    		<div class="Label" id="label-1" inline=false>Labeltext</div>
    		 <div class="Button" id="button-1">OK</div>
    	</div>
    <div class="Tab" id="tab-group-2" title="Next Fieldset Tab Group">
        <div class="Checkbox" id="checkbox-1">First Checkbox</div>
        <div class="Checkbox" id="checkbox-2">Second Checkbox</div>
    </div>
    <div class="Tab" id="tab-group-3" title="Tab Group with Radio-buttons">
        <div class="RadioButton" id="radiobutton-1" name="radio-group">First Radio-Button</div>
        <div class="RadioButton" id="radiobutton-2" name="radio-group">Second Radio-Button</div>
    </div>
    <div class="Tab" id="tab-group-4" title="Tab Group with Sliders">
        <div class="Slider" id="ui-slider-1" min=0, max=100 value=75 step=1 inline=true></div>
        <div class="Label Value" bind="ui-slider-1" style="float: right;">{value}%</div>
    </div>
    <div class="Tab" id="tab-group-5" title="Tab Group with Lists">
        <div class="Label">Simple selection list:</div>
        <div class="DropdownList" id="dropdown-1" values="[entry-1, entry-2, entry-3]"></div>
        <div class="Label">Multiple selection list:</div>
        <div class="DropdownList" id="dropdown-2" multiple="true" values="[entry-1, entry-2, entry-3]"></div>
        
    </div>
    <div class="Tab" id="tab-group-5" title="Tab Group with Textfields">
        <div class="TextArea" id="textarea-1" rows="5" cols="30" placeholder="Placeholder text" style="resize: none"></div>
        <div class="TextInput" id="text-input-1" placeholder="Type in something" inline=true></div>
        <div class="Label Value" bind="text-input-1">Text: {value}</div>
    </div>
</div>

<div id="parent-root-node"></div>

→ and initialize it with the command:

UIFormElements.init("main-container");

→ or optional with a root-node to append the generated form to as a child-element:

var parentRootNode = document.getElementById("parent-root-node")
UIFormElements.init("main-container", parentRootNode);
  • the id of the container DIV-element
  • (optional) the HTML node to append the generated code, otherwise it will be appended on document.body

The HTML code will be transformed and replaced into compatible HTML code.


The TEMPLATE-tag can be used (instead the DIV-tag), to hide the draft node-tree from the documents rendered page in the browser window.


Forms with JavaScript: Procedural JavaScript instructions

Example:

var uiGroup = UIGroup().add([
	UIGroup().add([
	    UILabel({ id: "user-name", text: "Username: ", style: labelWidth }),
	    UITextInput({ placeholder: "Type in the username", size: 12, name: "username" })
	]),
	UIGroup().add([
	    UILabel({ id: "email-address", text: "E-Mail: ", style: labelWidth }),
	    UITextInput({ placeholder: "Type in the e-mail", size: 12, name: "email" })
	]),
	UIGroup().add([
	    UILabel({ id: "password", text: "Password: ", style: labelWidth }),
	    UITextInput({ id: "password-field", placeholder: "Type in the password", size: 12, name: "password", type: "password" }),
	    UICheckbox({ id: "showpass", text: "Show password", onchange: "showPassword()" })
	])
]);

var uiGroupHtmlElement = uiGroup.createHTMLElement();

document.body.appendChild(uiGroupHtmlElement);

All Objects contain the basic options:

{ id: "<string>", class: "<string>", name: "<string>", style: "<string>", disabled: "<boolean>" }

→ and some basic event handlers: onblur, onchange, oncontextmenu, onfocus, onclick, oninput, oninvalid, onreset, onsearch, onselect, onsubmit

{ onclick: "<string>" }

Form-Element-objects and attributes

There are several UI-Objects, for working with HTML Form-elements, that can be used.

All UI-Objects contain the .createHTMLElement(<attributes>) function, to get a returned HTML node with its attributes from the UI Object or new attributes.

You can read more about HTML Form Elements and their attributes at W3CSchools

All basic-element-attributes

Every element has its basic attributes and event-handlers:

JavaScript:

UI...({
    id: "<string>",
    class: "<string>",
    name: "<string>",
    style: "<string>",
    disabled: "<boolean>"
})

HTML:

<div id="..." class="Element" name="..." style="color: blue;" disabled=true></div>

Generate hashed element Id

<div id="<generateId>" class="Element" name="..." style="color: blue;" disabled=true></div>

Button

button

JavaScript:

UIButton({
    text: "<string>",
    type: "<string>"
})

HTML:

 <div class="Button">text</div>

Checkbox

checkbox

JavaScript:

UICheckbox({
    text: "<string>",
    value: "<value>",
    checked: "<boolean>"
})

HTML:

<div class="Checkbox"></div>

DropdownList

dropdown

JavaScript:

UIDropdownList({
    values: "<array>",
    size: "<number>",
    multiple: "<boolean>",
    selected: "<value>"
})

HTML:

<div class="DropdownList" values="[item-1, item-2, item-3]"></div>

Label

labeltext

JavaScript:

UILabel({
    text: "<string>",
    name: "<string>",
    value: "<value>",
    bind: "<string>"
})

HTML:

 <div class="Label">text</div>

RadioButton

radiobutton

JavaScript:

UIRadioButton({
    text: "<string>",
    name: "<string>",
    value: "<value>",
    checked: "<boolean>"
})

HTML:

<div class="RadioButton" name="radio-group">A</div>
<div class="RadioButton" name="radio-group">B</div>
<div class="RadioButton" name="radio-group">C</div>

Seperator

seperator

UISeperator()

Slider

slider

JavaScript:

UISlider({
    value: "<number>",
    min: "<number>",
    max: "<number>",
    step: "<number>"
})

HTML:

<div class="Slider" id="ui-slider" min=0, max=100 value=75 step=1 inline=true></div><div class="Label Value" bind="ui-slider">{value}</div>

TextArea

textarea

JavaScript:

UITextArea({
    text: "<string>",
    rows: "<number>",
    cols: "<number>",
    placeholder: "<string>"
})

HTML:

<div class="TextArea" rows="5" cols="30" placeholder="Placeholder text" style="resize: none"></div>

TextInput

textinput

JavaScript:

UITextInput({
    text: "<string>",
    name: "<string>",
    value: "<string>",
    placeholder: "<string>",
    type: "<string>",
    min: "<number>",
    max: "<number>",
    maxlength: "<number>",
    pattern: "<string>",
    readonly: "<boolean>",
    size: "<number>"
})

HTML:

<div class="TextInput" placeholder="Type in something"></div>

Group-objects

Group-objects can be used to group other elemental or group objects and display them in a container or form-element, like fieldset.

All group-objects contain the .add([<UIElement>, ...]) function to add them into the group-object.


Group

group

JavaScript:

UIGroup({ <attributes> })

HTML:

 <div class="Group" inline=true>
     ...
 </div>

Tab

tab

JavaScript:

UITab({ <attributes> })

HTML:

<div class="Tab" title="Tab title">
    ...          
</div>

Form

form

JavaScript:

UIForm({ <attributes> })

The same attributes like in the HTML <form> Tag

HTML:

<form class="Form" action="" method="get">
    ...          
</form>

Write a container-DIV node with its element-id and its contents and the HTML-attributes:


Options

You can set some options with the command:

UIFormElements.setConfig({
    userselect: false,      // switch off user-selection with the command
    theme: "SystemUIDark"   // set the color-theme
});

Themes

You can also set the theme with the configuration or the following command:

UIFormElements.changeTheme("SystemUI");

Available themes:

  • None

codeconsole

  • SystemUI

systemui

  • SystemUIDark

systemuidark

  • Chromium

chromium

  • Gimp

gimp

  • WindowsClassic

windowsclassic

  • DeepBlue

deepblue

  • Terminal

terminal

  • Custom

Use the custom template to create own color-themes


UICodeConsole.js extension

The extension can be used to export the generated HTML/JS and CSS sourcecode into exported HTML files to use the generated HTML Forms without the UIFormElements.js library.

codeconsole

Initialization

Just insert the JS-sourcefile into the HTML document:

<script src="path/to/ui-code-console.production.min.js"></script>`

Add the extension into the configuration:

UIFormElements.setConfig({
    userselect: false,
    theme: "SystemUI",
    extensions: [
        "UICodeConsole"
    ]
});

Now add the generated Form into the extension:

uiParentRootNode = document.getElementById("parent-root-node");

// add the form HTML output to the document node
uiParentRootNode.appendChild(uiForm.createHTMLElement());

// add the document node to the code console
UICodeConsole.add(declarativeRootNode);

Configuration options

Show UI Form highlight marker:

Show or hide the dotted highlighted-marker-border around the selected UI Form in the HTML document

Generate id on unset id:

Automatically generates ids for ui-elements without ids.

Export with HTML head + body:

Export the HTML document with or without the html document tags (head + body).

Export embedded CSS:

Export the HTML document with or without the releated embedded CSS styles.

Export events in <input oninput="..."> instead in </script>:

Exports binded events completely into the HTML tags instead as a appended script section at the bottom of the HTML document.

Export with formatted HTML spaces:

Exports the HTML document with or without the formatted spaced.

! Exporting code with HTML-spaces can cause HTML formatting problems and display issues in spacing of elements.


HTML and CSS export

The generated code is displayed in a text field and can be copied into the clipboard or downloaded as *.html document file. The related CSS-theme-file can be downloaded as a *.css file.


Buiding production files

You can build the minified production *.js and *.css files with the Node.js-builder, if you want to compile the modified source files in the development/ folder.

Node.js Linker and compressor

Use the package.json file in the Node.js program folder development/node-js-builder/. The CommonJS file in the configuration JSON-file uses babel-minify. It merges all the JS class and program files together into single files and compresses it into minifed production files.

Configuration and setup

Just install the dependency babel-minify with:

npm install

and run the build program with:

npm run build

You can also run build files to merge and process other *.* files out of the given configuration-files:

node build-production-files.js config/your-own-build-config.json

Development sources

https://www.w3schools.com/html/html_forms.asp
https://www.w3.org/
https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements
https://html.spec.whatwg.org/multipage/forms.html
https://www.chromium.org/
https://caniuse.com/


License

UIFormsElements.js and UICodeConsole.js are licenced under CC BY-NC-SA.


Third-party software

The UICodeConsole.js extension uses the following third-party software components:

The UIFormElements.js Live Editor application uses the following third-party software components:

The third-party software licences are in the related folders.

About

This is a legacy-compatible HTML Form toolkit for prototyping or web-applications with simple form-elements.

nowca.github.io/uiformelements.js/development/live-editor/UILiveEditor.html

Topics

ui html-forms form-elements

Resources

Readme

License

View license
Activity

Stars

0 stars

Watchers

0 watching

Forks

0 forks
Report repository

Releases

No releases published

Packages

 
 
 

Contributors

Languages