UI data binding: Difference between revisions

Content deleted Content added

Inline

Latest revision as of 16:47, 20 September 2021

UI data binding is a software design pattern to simplify development of GUI applications. UI data binding binds UI elements to an application domain model. Most frameworks employ the Observer pattern as the underlying binding mechanism. To work efficiently, UI data binding has to address input validation and data type mapping.

A bound control is a widget whose value is tied or bound to a field in a recordset (e.g., a column in a row of a table). Changes made to data within the control are automatically saved to the database when the control's exit event triggers.

Example

<TextBlock Text="{Binding Username}" />

public class ExampleViewModel
{
    public string Username { get; set; }
}

Data binding frameworks and tools

Delphi

DSharp third-party data binding tool^{[citation needed]}
OpenWire Visual Live Binding - third-party visual data binding tool

Java

JFace Data Binding
JavaFX Property^[1]

.NET

Windows Forms data binding overview
WPF data binding overview
Unity 3D data binding framework (available in modifications for NGUI, iGUI and EZGUI libraries)^{[citation needed]}

JavaScript

Angular
AngularJS
Backbone.js
Ember.js
Datum.js^[2]
knockout.js
Meteor, via its Blaze live update engine^[3]
OpenUI5
React
Vue.js

References

^ "Using JavaFX Properties and Binding | JavaFX 2 Tutorials and Documentation".
^ "Datum.js". Retrieved 7 November 2016.
^ "Meteor Blaze". Meteor Blaze is a powerful library for creating live-updating user interfaces. Blaze fulfills the same purpose as Angular, Backbone, Ember, React, Polymer, or Knockout, but is much easier to use. We built it because we thought that other libraries made user interface programming unnecessarily difficult and confusing.

This computer-programming-related article is a stub. You can help Wikipedia by expanding it.

This database-related article is a stub. You can help Wikipedia by expanding it.

[1] "Using JavaFX Properties and Binding | JavaFX 2 Tutorials and Documentation".

[2] "Datum.js". Retrieved 7 November 2016.

[3] "Meteor Blaze". Meteor Blaze is a powerful library for creating live-updating user interfaces. Blaze fulfills the same purpose as Angular, Backbone, Ember, React, Polymer, or Knockout, but is much easier to use. We built it because we thought that other libraries made user interface programming unnecessarily difficult and confusing.

[1]

[2]

[3]

@@ Line 1: / Line 1: @@
-{{Unreferenced|date=March 2009}}
+{{Refimprove|date=February 2015}}
 '''UI data binding''' is a [[Design pattern (computer science)|software design pattern]] to simplify development of [[GUI]] applications.  UI [[data binding]] binds UI elements to an application [[domain model]]. Most frameworks employ the [[Observer pattern]] as the underlying binding mechanism.  To work efficiently, UI data binding has to address [[Data validation|input validation]] and data type mapping.
-A ''bound control'' is a [[GUI widget|widget]] whose value is tied or [[data binding|bound]] to a field in a [[recordset]] (i.e., a [[column (database)|column]] in a [[row (database)|row]] of a [[table (database)|table]]).  Changes made to data within the control are automatically saved to the database when the control's exit [[event trigger]]s.
+A ''bound control'' is a [[GUI widget|widget]] whose value is tied or [[data binding|bound]] to a field in a [[recordset]] (e.g., a [[column (database)|column]] in a [[row (database)|row]] of a [[table (database)|table]]).  Changes made to data within the control are automatically saved to the database when the control's exit [[event trigger]]s.
+== Example ==
+<syntaxhighlight lang="xml">
+<TextBlock Text="{Binding Username}" />
+</syntaxhighlight>
+<syntaxhighlight lang="csharp">
+public class ExampleViewModel
+{
+    public string Username { get; set; }
+}
+</syntaxhighlight>
 == Data binding frameworks and tools ==
+=== [[Delphi (programming language)|Delphi]] ===
-===Cocoa & Cocoa Touch===
+* [[DSharp (data binding)|DSharp]] third-party data binding tool{{cn|date=December 2016}}
-* ReactiveCocoa [https://github.com/ReactiveCocoa/ReactiveCocoa]
+* [[OpenWire (library)|OpenWire]] Visual Live Binding - third-party visual data binding tool
-=== [[Embarcadero Delphi|Delphi]] ===
-* LiveBindings [http://docwiki.embarcadero.com/RADStudio/XE4/en/LiveBindings_in_RAD_Studio]
-* [[DSharp]] 3rd party Data Binding tool [https://code.google.com/p/delphisorcery/source/checkout]
-* [[OpenWire (library)|OpenWire]] Visual Live Binding - 3rd party Visual Data Binding tool [http://www.mitov.com/products/openwirelivebindings]
 === Java ===
+* [[JFace]] Data Binding
-* JSR-227 A Standard Data Binding & Data Access Facility for J2EE [http://jcp.org/en/jsr/detail?id=227]
+* [[JavaFX]] Property<ref>{{Cite web | url=https://docs.oracle.com/javafx/2/binding/jfxpub-binding.htm |title = Using JavaFX Properties and Binding &#124; JavaFX 2 Tutorials and Documentation}}</ref>
-* [[JFace]] Data Binding [http://wiki.eclipse.org/index.php/JFace_Data_Binding]
-* [[JGoodies]] Binding [http://www.jgoodies.com/freeware/libraries/binding/]
 === .NET ===
-* [[Windows Forms]] data binding overview [http://msdn.microsoft.com/en-us/library/aa984214.aspx]
+* [[Windows Forms]] data binding overview
-* [[Windows Presentation Foundation|WPF]] data binding overview [http://msdn.microsoft.com/en-us/library/ms752347.aspx]
+* [[Windows Presentation Foundation|WPF]] data binding overview
-* Unity 3D data binding framework (available in modifications for NGUI, iGUI and EZGUI libraries) [http://tools.artofbytes.com/]
+* Unity 3D data binding framework (available in modifications for NGUI, iGUI and EZGUI libraries){{cn|date=December 2016}}
-=== Flex ===
-* Flex data binding [http://help.adobe.com/en_US/flex/using/WS2db454920e96a9e51e63e3d11c0bf69084-7fe7.html]
 === JavaScript ===
+* [[Angular_(web_framework)|Angular]]
-* [http://knockoutjs.com/ knockout.js]
+* [[AngularJS]]
-* [http://backbonejs.org/ Backbone.js]
-* [http://emberjs.com/ Ember.js]
+* [[Backbone.js]]
-* [http://canjs.com/ Can.js]
+* [[Ember.js]]
+* Datum.js<ref>{{cite web |url=http://datumjs.com|title=Datum.js|access-date=7 November 2016}}</ref>
-* [http://rivetsjs.com/ Rivets.js]
+* [[knockout.js]]
-* [http://lava.codeplex.com/ Lava JS]
+* [[Meteor (web framework)|Meteor]], via its ''Blaze'' live update engine<ref>{{cite web|title=Meteor Blaze|url=https://www.meteor.com/blaze|quote=Meteor Blaze is a powerful library for creating live-updating user interfaces. Blaze fulfills the same purpose as Angular, Backbone, Ember, React, Polymer, or Knockout, but is much easier to use. We built it because we thought that other libraries made user interface programming unnecessarily difficult and confusing.}}</ref>
-* [[Angular.js|AngularJS]]
+* [[OpenUI5]]
+* [[React (JavaScript library)|React]]
+* [[Vue.js]]
 ==See also==
-*[[Data binding]]
+* [[Data binding]]
+==References==
+{{Reflist}}
 [[Category:Data management]]
 [[Category:Software design patterns]]
 {{compu-prog-stub}}