Calibration Assignment Submission (Firebrick JS): Difference between revisions

From Expertiza_Wiki
Jump to navigation Jump to search
No edit summary
 
(4 intermediate revisions by the same user not shown)
Line 1: Line 1:
{{AFC comment|1=Improve sourcing.  Wikipedia is not a reference but a wikilink.  The company's own web site is not a source but an external link.  Add sources. [[User:Robert McClenon|Robert McClenon]] ([[User talk:Robert McClenon|talk]]) 22:49, 8 February 2016 (UTC)}}
Firebrick JS is a [https://en.wikipedia.org/wiki/Model%E2%80%93view%E2%80%93controller MVC] structure built on top of [https://en.wikipedia.org/wiki/JavaScript JavaScript], used to provide elegant and useful user interface elements for any web applications. It is an [https://en.wikipedia.org/wiki/Open_source open source] software that is simply a [https://en.wikipedia.org/wiki/Bootstrap_(front-end_framework) bootstrap] based component library and [https://en.wikipedia.org/wiki/Model%E2%80%93view%E2%80%93controller MVC]/[https://en.wikipedia.org/wiki/Model%E2%80%93view%E2%80%93viewmodel MVVM] framework.<ref name="FireBrickJS Documentation">[http://www.firebrickjs.com/documentation|website=FireBrick|publisher=FireBrick "FireBrickJS Documentation"]</ref> Firebrick uses [https://en.wikipedia.org/wiki/JQuery jQuery], [https://en.wikipedia.org/wiki/Knockout_(web_framework) Knockout JS] and [http://requirejs.org/ Require JS] to provide these user interface element. 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.
 
----
 
{{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="FireBrickJS Documentation">[http://www.firebrickjs.com/documentation|website=FireBrick|publisher=FireBrick "FireBrickJS Documentation"]</ref> Firebrick uses [[jQuery]], [[Knockout (web framework)|Knockout JS]] and [http://requirejs.org/ Require JS] to provide these user interface element. 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.
Line 26: Line 20:
Firebrick JS controllers help in designing the UI of an HTML website. Examples of these UI elements include:
Firebrick JS controllers help in designing the UI of an HTML website. Examples of these UI elements include:


Username Input:                                                                                                                      <syntaxhighlight lang="javascript">
Username Input:                                                                                                                       
<pre>
define( [ "text!./Input.html", "Firebrick.ui/containers/Panel", "Firebrick.ui/containers/FormPanel", "Firebrick.ui/containers/Box", "Firebrick.ui/fields/Input", "../ComponentTemplate" ], function( 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";
"use strict";
Line 55: Line 50:
});
});
});
});
</syntaxhighlight>As of now Firebrick JS has a good [http://smasala.github.io/firebrick/docs/index.html built-in API] that can be used to handle events, prep applications, load different templates, etc.
</pre>
As of now Firebrick JS has a good [http://smasala.github.io/firebrick/docs/index.html 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 [http://www.firebrickjs.com/components this website].
Other UI elements and renditions of Firebrick JS can be found on [http://www.firebrickjs.com/components this website].
Line 61: Line 57:
== See also ==
== See also ==
* [http://smasala.github.io/firebrick.ui/ Firebrick UI]
* [http://smasala.github.io/firebrick.ui/ Firebrick UI]
* [[JavaScript]]
* [https://en.wikipedia.org/wiki/JavaScript JavaScript]


== References ==
== References ==
<references/>
<references/>

Latest revision as of 20:17, 8 September 2016

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">"FireBrickJS Documentation"</ref> Firebrick uses jQuery, Knockout JS and Require JS to provide these user interface element. 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 name="smasala/firebrick">"smasala/firebrick" 2016-02-15</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 name="jQuery Introduction">"jQuery Introduction" 2016-02-05</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 name="Knockout (web framework)">"Knockout (web framework)"</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 name="RequireJS">"RequireJS" 2016-02-05</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/>