Calibration Assignment Submission (Firebrick JS): Difference between revisions

From Expertiza_Wiki
Jump to navigation Jump to search
No edit summary
No edit summary
Line 5: Line 5:
{{Infobox software|name = Firebrick JS|author = Steven Masala|released = {{start date and age|2014|09|07|df=yes}}|latest release version = 0.13.12|latest release date = {{start date and age|2015|11|13}}|status = Active Development|Written in = Javascript|Type = Javascript Library|website = http://www.firebrickjs.com/}}<!-- EDIT BELOW THIS LINE -->
{{Infobox software|name = Firebrick JS|author = Steven Masala|released = {{start date and age|2014|09|07|df=yes}}|latest release version = 0.13.12|latest release date = {{start date and age|2015|11|13}}|status = Active Development|Written in = Javascript|Type = Javascript Library|website = http://www.firebrickjs.com/}}<!-- EDIT BELOW THIS LINE -->


Firebrick JS is a [[Model–view–controller|MVC]] structure built on top of [[JavaScript]], used to provide elegant and useful user interface elements for any web applications. It is an [[open source]] software that is simply a [[Bootstrap (front-end framework)|bootstrap]] based component library and [[Model–view–controller|MVC]]/[[Model–view–viewmodel|MVVM]] framework.<ref name=":0">{{cite web|title=FireBrickJS Documentation|url=http://www.firebrickjs.com/documentation|website=FireBrick|publisher=FireBrick}}</ref> Firebrick uses [[jQuery]], [[Knockout (web framework)|Knockout JS]] and [http://requirejs.org/ Require JS] to provide these user interface element.<ref name=":0" /> Examples of the type of interfaces currently supported by Firebrick JS include data fields, buttons, different types of display and alert boxes, containers, navigation panels and editable tables. By including Firebrick JS, a web developer has access to all the supported elements and can include them in the web application, thus reducing redundant code.
Firebrick JS is a [[Model–view–controller|MVC]] structure built on top of [[JavaScript]], used to provide elegant and useful user interface elements for any web applications. It is an [[open source]] software that is simply a [[Bootstrap (front-end framework)|bootstrap]] based component library and [[Model–view–controller|MVC]]/[[Model–view–viewmodel|MVVM]] framework.<ref name="FireBrickJS Documentation">[http://www.firebrickjs.com/documentation|website=FireBrick|publisher=FireBrick]</ref> Firebrick uses [[jQuery]], [[Knockout (web framework)|Knockout JS]] and [http://requirejs.org/ Require JS] to provide these user interface element.<ref name=":0" /> Examples of the type of interfaces currently supported by Firebrick JS include data fields, buttons, different types of display and alert boxes, containers, navigation panels and editable tables. By including Firebrick JS, a web developer has access to all the supported elements and can include them in the web application, thus reducing redundant code.


Firebrick JS uses another framework in conjunction, called [http://smasala.github.io/firebrick.ui/ Firebrick UI] which is an extendable User Interface component library to provide these interfaces.
Firebrick JS uses another framework in conjunction, called [http://smasala.github.io/firebrick.ui/ Firebrick UI] which is an extendable User Interface component library to provide these interfaces.

Revision as of 20:02, 8 September 2016

Template:AFC comment


Template:Infobox software

Firebrick JS is a MVC structure built on top of JavaScript, used to provide elegant and useful user interface elements for any web applications. It is an open source software that is simply a bootstrap based component library and MVC/MVVM framework.<ref name="FireBrickJS Documentation">[1]</ref> Firebrick uses jQuery, Knockout JS and Require JS to provide these user interface element.<ref name=":0" /> Examples of the type of interfaces currently supported by Firebrick JS include data fields, buttons, different types of display and alert boxes, containers, navigation panels and editable tables. By including Firebrick JS, a web developer has access to all the supported elements and can include them in the web application, thus reducing redundant code.

Firebrick JS uses another framework in conjunction, called Firebrick UI which is an extendable User Interface component library to provide these interfaces.

Overview

Firebrick JS started development in September 2014 and are currently at version 0.13.12 as of February 2016.<ref></ref> It was created by Steven Masala along with his team. It is one of the many flavors of JavaScript MVC frameworks. What makes Firebrick JS something to look out for is that it utilizes the frameworks of jQuery, Knockout JS and Require JS to built it's own frameworks.

jQuery is a lightweight JavaScript library which provides the users more functionality with less code.<ref></ref> It provides the user with in built methods that a user can call with a single line of code. This saves the user many lines of codes and also facilitates reusability.

Knockout is a JavaScript implementation which provides MVVM patterns and templates . The underlying principles are therefore:

  • a clear separation between domain data, view components and data to be displayed
  • the presence of a clearly defined layer of specialized code to manage the relationships between the view components<ref></ref>

Require JS is a JavaScript file and module loader. It is optimized for in-browser use, but it can be used in other JavaScript environments, like Rhino and Node.<ref></ref>

Usage

Firebrick JS can either be downloaded via GitHub

Alternatively and preferably the libraries can be downloaded with bower

	bower install firebrick

Firebrick JS controllers help in designing the UI of an HTML website. Examples of these UI elements include:

Username Input:

define( [ "text!./Input.html", "Firebrick.ui/containers/Panel", "Firebrick.ui/containers/FormPanel", "Firebrick.ui/containers/Box", "Firebrick.ui/fields/Input", "../ComponentTemplate" ], function( input ) {
	"use strict";
	return Firebrick.defineView( "FBJS.view.components.fields.Input", {
		extend: "fbjs.componenttemplate",
		title: "Input Field",
		topTitle: input,
		demo: {
			sName: "containers.formpanel",
			title: "Demo",
			collapsible: true,
			items: [{
				sName: "fields.input",
				inputAddon: true,
				iconClass: "glyphicon-home",
				label: "Username",
				placeholder: "Enter Username",
				tooltip: "tooltip!"
			},{
				sName: "fields.input",
				inplaceEdit: true,
				label: "Username",
				placeholder: "Enter Username",
				value: "'John Doe'",
				tooltip: "tooltip!"
			}]
		}
	});
});

As of now Firebrick JS has a good built-in API that can be used to handle events, prep applications, load different templates, etc.

Other UI elements and renditions of Firebrick JS can be found on this website.

See also

References

<references/>