mortoray and kristianhasselknippe Adding several description.yaml files (#48)
* Adding several description.yaml files

* added description.yaml to Lifecycle

* added description.yaml to Gestures/Swipe

* added description.yaml to Camera

* added description.yaml to Controls/ButtonWithImage

* added description.yaml for DropdownMenu

* added description.yaml for EdgeNavigator

* added description.yaml to FileBrowser

* add description.yaml to FilterOnObservableCondition

* added description.yaml to GeoLocation

* Added description.yaml to /RelativeTo

* fix typos

* patch names, simplify text
Latest commit 7a78a08 Mar 27, 2017

A component with custom events

This example creates a number pad entry component showing how to define and raise user events. It builds a second higher level component showing how to structure components into usable high-level controls.


The core control is the NumberPad which defines a simple panel of 10 digits and two control actions. A user of this control will listen to the various events that it publishes. One such event is the NumberSelected event:

<UserEvent ux:Name="numberSelected" />

When the user presses one of the numbers the JS code raises the event:


The number is provided as a named argument. A listener to the event gets this value as an argument. For example, in the MainView.ux use it sets a text value to the number and pulses it's display.

function selected(args) {
	current.value = args.number;

Convenience Triggers

For convenience the NumberPad.ux also defines a trigger for each of the events it raises. For example:

<OnUserEvent ux:Class="NumberSelected" Name="numberSelected" />

This allows these events to be responded to in UX with a nice name instead of just having OnUserEvent everywhere. In MainView.ux the demo respnds to this event:

	<NumberSelected Handler="{selected}" />

There is no need to define these custom triggers. You can use OnUserEvent directly with the appropriate EventName. This may be more desirable if you have only one responder to a particular event.


NumberEntry is a component that connects the NumberPad to a Text control. It demonstrates how to handle all the messages from the NumberPad.