kernel/log.js
enyo.setLogLevel: function(inLevel Sets the log level for this window if the input is a real number.
The log level is used as a watermark to control the amount of logging.
Setting the log level lower will prevent logging functions with a higher level from being executed.
enyo.log: function(Sends a log message to the console, if the current log level allows for it.
Objects are converted to JSON automatically.
Multiple arguments are coerced to String and joined with spaces.
enyo.warn: function(Same as log, except uses the console's warn method (if it exists).
enyo.error: function(Same as log, except uses the console's error method (if it exists).
kernel/lang.js
enyo.setObject: function(name, value, context Sets object name to value. name can use dot notation and intermediate objects are created as necessary.
// set foo.bar.baz to 3. If foo or foo.bar do not exist, they are created.
enyo.setObject("foo.bar.baz", 3);
Optionally, name can be relative to object context.
// create foo.zot and set foo.zot.zap to null.
enyo.setObject("zot.zap", null, foo);
enyo.getObject: function(name, create, context Gets object name. name can use dot notation. Intermediate objects are created if create argument is truthy.
// get the value of foo.bar, or undefined if foo doesn't exist.
var value = enyo.getObject("foo.bar");
// get the value of foo.bar. If foo.bar doesn't exist,
// it's assigned an empty object, which is returned.
var value = enyo.getObject("foo.bar", true);
Optionally, name can be relative to object context.
// get the value of foo.zot.zap, or undefined if foo.zot doesn't exist
var value = enyo.getObject("zot.zap", false, foo);
enyo.cap: function(inString Returns inString with the first letter capitalized.
enyo.uncap: function(inString Returns inString with the first letter un-capitalized.
enyo.isString: function(it Returns true if it is a string.
enyo.isFunction: function(it Returns true if it is a function.
enyo.isArray: function(it Returns true if it is an array.
enyo.indexOf: function(inElement, inArray Returns the index of the element in inArray that is equivalent (==) to inElement, or -1 if no element is found.
enyo.remove: function(inElement, inArray Removes the first element in inArray that is equivalent (==) to inElement.
enyo.forEach: function(inArray, inFunc, inContext Invokes inFunc on each element of inArray. Returns an array (map) of the return values from each invocation of inFunc. If inContext is specified, inFunc is called with inContext as this.
Aliased as enyo.map.
enyo.cloneArray: function(inArrayLike, inOffset, inStartWith Clones an existing Array, or converts an array-like object into an Array.
If inOffset is non-zero, the cloning is started from that index in the source Array. The clone may be appended to an existing Array by passing the existing Array as inStartWith.
Array-like objects have length properties, and support square-bracket notation ([]). Often array-like objects do not support Array methods, such as push or concat, and must be converted to Arrays before use. The special arguments variable is an example of an array-like object.
enyo.clone: function(obj Shallow-clones an object or an array.
enyo.mixin: function(target, source Copies custom properties from the source object to the target object. If target is falsey, an object is created. If source is falsey, the target or empty object is returned.
enyo.bind: function(scope, method Returns a function closure that will call (and return the value of) function method, with scope as this.
Method can be a function or the string name of a function-valued property on scope.
Arguments to the closure are passed into the bound function.
// a function that binds this to this.foo
var fn = enyo.bind(this, "foo");
// the value of this.foo(3)
var value = fn(3);
Optionally, any number of arguments can be prefixed to the bound function.
// a function that binds this to this.bar, with arguments ("hello", 42)
var fn = enyo.bind(this, "bar", "hello", 42);
// the value of this.bar("hello", 42, "goodbye");
var value = fn("goodbye");
Functions can be bound to any scope.
// binds function 'bar' to scope 'foo'
var fn = enyo.bind(foo, bar);
// the value of bar.call(foo);
var value = fn();
kernel/Oop.js
enyo.kind: function(inProps Creates a JavaScript constructor function with a prototype defined by inProps.
enyo.kind makes it easy to build a constructor-with-prototype (like a class) that has advanced features like prototype-chaining (inheritance).
A plug-in system is included for extending the abilities of the kind generator, and constructors are allowed to perform custom operations when subclassed.
Generally the properties defined in inProps are copied directly to the generated prototype, but certain property names trigger special processing.
Examples of special properties are:
name: the name property defines the name of the created constructor in the global namespace (intermediate objects are created automatically). name is not copied directly to the prototype, but is instead stored as kindName.
// Creates a function MyNamespace.MyKind with a prototype.
// MyNamespace.MyKind.prototype.kindName is set to "MyNamespace.MyKind".
// MyNamespace.MyKind.prototype.plainProperty is set to "foo".
enyo.kind({
name: "MyNamespace.MyKind"
plainProperty: "foo"
});
// Make an instance of the new kind
var myk = new MyNamespace.MyKind();
kind: the name of or reference to a kind to derive from, like a super-class. The new constructor's prototype is chained to the prototype specified by kind, and the base property in the new prototype is set to reference the kind constructor.
// Create a function MyKind with a prototype, derived from enyo.Object.
// MyKind.prototype.kindName is set to "MyKind".
// MyKind.prototype.base is set to enyo.Object.
enyo.kind({
name: "MyKind",
kind: enyo.Object
});
constructor: a function to call when a new instance is created. Actually stored on the prototype as _constructor.
// Create a function MyKind with a prototype, derived from enyo.Object.
// _constructor_ is called when an instance is created.
enyo.kind({
name: "MyKind",
kind: enyo.Object,
constructor: function() {
this.instanceArray = [];
// call the constructor inherited from Object
this.inherited(arguments);
}
});
statics: properties from any statics object are copied onto the constructor directly, instead of the prototype.
// Create a kind with a static method.
enyo.kind({
name: "MyKind",
statics: {
info: function() {
return "MyKind is a kind with statics.";
}
}
});
// invoke the static info() method of MyKind
console.log(MyKind.info());
Certain kinds in the framework define their own special properties. For example, see the published property supported by enyo.Object.
The inherited feature allows you to easily call the super-kind method for any method that has been overridden.
enyo.kind({
name: "MyKind",
doWork: function() {
this.work++;
}
});
enyo.kind({
name: "MyDerivedKind",
kind: "MyKind",
doWork: function() {
if (this.shouldDoWork) {
this.inherited(arguments);
}
}
});
The first argument to inherited is required to be the literal arguments, which is a special JavaScript variable that contains information about the executing function.
kernel/Object.js
enyo.Object implements the property publishing system for Components. Published properties are declared by providing a published property within a call to enyo.kind. Getter and setter methods are automatically generated for properties declared in this manner.
enyo.kind({
name: "MyObject",
kind: enyo.Object,
// declare 'published' properties
published: {
myValue: 3
},
// these methods will be automatically generated:
// getMyValue: function() ...
// setMyValue: function(inValue) ...
// optional method that is fired whenever setMyValue is called
myValueChanged: function(inOldValue) {
this.delta = this.myValue - inOldValue;
}
});
In the above example, myValue becomes a regular property on the MyObject prototype (with a default value of 3), and the getter and setter methods are generated as noted in the comments.
myobj = new MyObject();
var x = myobj.getMyValue(); // x gets 3
You may choose to declare a changed method to observe set calls on a property. The myValueChanged method in the example above is called whenever setMyValue is called.
myobj.setMyValue(7); // myValue becomes 7; myValueChanged side-effect sets delta to 4
Changed methods are called whenever setters are invoked, whether the actual value has changed or not.
Published properties are stored as regular properties on the object prototype, so it's possible to query or set their values directly (changed methods are not called if you set a property directly).
var x = myobj.myValue;
enyo.Object also provides some utility functions for all of its subkinds.
error: function(Same as log, except uses the console's error method (if it exists).
log: function(Sends a log message to the console, prepended with the name of the kind and method from which log was invoked. Multiple arguments are coerced to String and joined with spaces.
enyo.kind({
name: "MyObject",
kind: enyo.Object,
hello: function() {
this.log("says", "hi");
// shows in the console: MyObject.hello: says hi
}
});
warn: function(Same as log, except uses the console's warn method (if it exists).
kernel/Component.js
enyo.Component is the fundamental building block for Enyo applications. Components are designed to fit together, so complex behaviors can be composed from smaller bits of functionality.
Component constructors take a single argument, a JavaScript object that defines various properties to initialize on the Component. Sometimes we call this argument a Component configuration.
// create a new component, initialize its name property to 'me'.
var c = new enyo.Component({
name: "me"
});
When a Component is instantiated, configurations in its components property are instantiated, too. For example,
// create a new component, which has one of its own components
var c = new enyo.Component({
name: "me",
components: [
{kind: "Component", name: "other"}
]
});
In this case, when me is created, other is created, too, and we say that me owns other. In other words, the owner property of other equals me. Notice that you can specify the kind of other explicitly in its configuration block, to tell me what constructor to use to create other.
Note that kind values can be references to actual kinds or string-names of kinds. Kind names that do not resolve directly to kinds are looked up in default namespaces. In this case, kind: "Component" resolves to enyo.Component.
Ownership allows components to be organized into trees. For example,
Note that, when designing code, a Component should only be concerned with the Components it owns (one level down). The coder never needs to concern herself with the complex tree structure that will exist at runtime. For example, Component A will never reference Component E directly; it will only access the interface supplied by Component C.
The ownership status of a Component is controlled by the owner property. In other words, to change ownership of a Component, use the setOwner method.
Every Component has a name. A Component's name must be unique among all Components in its owner. In other words, a Component can't own two components with the same name. A Component can access its owned components by name using the $ hash.
For example, if a Component owns components named 'componentB' and 'componentC', it can refer to them with code like this:
someMethod: function() {
this.$.componentB.doWork();
this.$.componentC.doWork();
}
Sometimes we refer to the set of objects in the $ hash as the scope of a Component.
Note that all Components visible in the components property will be owned by the top level component. For example,
// create a new component, which owns several components
var c = new enyo.Component({
name: "me",
components: [
{name: "other", components: [
{name: "third"},
{name: "fourth"}
]}
]
});
Although Components third and fourth are nested inside the configuration for other, they are still owned by me. This concept is important; it means that whatever Components you can see listed are in scope.
The me component might have a complex configuration, but at a glance I can see that it has access to other, third, and fourth to get its work done. Those objects will available in the $ hash.
A Component can send a message to its owner using the event mechanism. A Component exposes events as string properties whose names begin with 'on'. To listen to messages, a Component can assign the name of one of its methods to the event property of an owned Component.
For example, the WebService component has an onSuccess property. The owner of a WebService can set onSuccess to the name of a method to be called when the WebService operation completes successfully.
// create a new component, which has a Component of its own, and listens to an event
var c = new enyo.Component({
name: "MyComponent",
components: [
{kind: "WebService", onSuccess: "webSuccess"}
],
webSuccess: function(inSender) {
this.log(inSender.name, "was successful");
}
});
We call webSuccess the delegate for the success event of the WebService. Because the event properties take names of methods, we call the event property values named delegates.
Note that the webSuccess method takes an argument called inSender which refers to the object that generated the event. Different events may supply additional arguments, but they all supply inSender as the first argument.
Component events are not exactly the same as the DOM events you may be used to. In particular, Component events do not bubble. However, Enyo does make many DOM events available as Component events. Components do not in general represent DOM nodes, but Controls do; see the Control documentation for more information.
When a Component is instantiated, and after all constructors are executed, the create method is invoked. During Component.create, all owned Components are created.
Subclasses of Component often override create to do initialization tasks. If you override Component, make sure to call the inherited create method, and remember that owned components (and the $ hash) are only ready after the inherited method has returned.
enyo.kind({
name: "MyComponent",
kind: enyo.Component,
create: function() {
// I can do tasks before my components are created
this.inherited(arguments);
// ... or I can do tasks after, my $ hash is ready now
}
});
To delete a Component, use the destroy method. Calling destroy on a component will remove it from all framework bookkeeping, and in particular will set owner to NULL. Generally this is enough to allow the object to be garbage collected, unless you have maintained a reference to it yourself.
allDone: function() {
// remove workComponent, and do any cleanup
this.$.workComponent.destroy();
// now this.$.workComponent is undefined
}
You may override the destroy method to include custom clean-up code. Again, you must make sure to call the inherited method before returning.
The createComponent and createComponents methods are included to create Components dynamically. Refer to the inline documentation on those methods for more information.
owner: null name: "" create: function(inProps createComponent: function(inInfo, inMoreInfo Creates and returns a Component as defined by the combination of inInfo and inMoreInfo. The created Component passes through initialization machinery provided by the creating Component, which may supply special handling. Unless the owner is explicitly specified, the new Component will be owned by this. Properties in inInfo override properties in inMoreInfo.
// create a new component named _dynamic_ owned by _this_
// (will be available as this.$.dynamic).
this.createComponent({name: "dynamic"});
// create a new component named _another_ owned by _other_
// (will be available as other.$.another).
this.createComponent({name: "another"}, {owner: other});
createComponents: function(inInfos, inCommonInfo Creates Components as defined by the array of configurations inInfo. Each configuration in inInfo is combined with inCommonInfo as described in createComponent. createComponents has no return value.
// ask foo to create components _bar_ and _zot_, but set the owner of
// both components to _this_.
this.$.foo.createComponents([
{name: "bar"},
{name: "zot"}
], {owner: this});
destroy: function(Removes this Component from its owner (sets owner to null) and does any cleanup. The Component is flagged with a destroyed: true property. Usually the Component will be suitable for garbage collection after being destroyed, unless user code keeps a reference to it.
destroyComponents: function(Destroys all owned components.
getComponents: function(Returns an Array of owned components. In other words, converts the $ hash into an array and returns the array.
error, log, warn
g11n/base/javascript/g11n.js
enyo.g11n.currentLocale: function(currentLocale Returns an enyo.g11n.Locale instance containing the current device locale for the user interface.
enyo.g11n.formatLocale: function(formatLocale Returns an enyo.g11n.Locale instance containing the current device locale used while formatting the following items:
enyo.g11n.phoneLocale: function(phoneLocale Returns an enyo.g11n.Locale instance containing the current device phone locale. The phone locale acts like a "home" locale for parsing and formatting phone numbers that do not have an explicit country code in them. The phone number of this device should be issued by a carrier in this locale.
enyo.g11n.setLocale: function(setLocale Sets the framework's idea of the various current locales.
The params object may contain one or more of the following properties:
Each property should be set to a string that is the specifier for that locale.
g11n/base/javascript/fmts.js
enyo.g11n.Fmts: function(Fmts Creates an instance of a formats information object.
Returns an instance of a formats information object. This instance has various pieces of information about the given locale.
enyo.g11n.Fmts.prototype.isAmPm: function(Indicates whether or not the user is currently using a 12-hour or 24-hour clock on this device.
Returns true if 12-hour, and false for 24-hour.
enyo.g11n.Fmts.prototype.isAmPmDefault: function(Return true if this locale uses a 12-hour clock to format times, or false for a 24-hour clock.
enyo.g11n.Fmts.prototype.getFirstDayOfWeek: function(Returns the day of the week that represents the first day of the week in the current locale. The numbers represent the days of the week as follows:
enyo.g11n.Fmts.prototype.getDateFieldOrder: function(Returns the order of the fields in a formatted date for the current locale. This function returns an array of strings arranged in the correct order. The strings are as follows:
enyo.g11n.Fmts.prototype.getTimeFieldOrder: function(Returns the order of the fields in a formatted time for the current locale. This function returns an array of strings arranged in the correct order. The strings are as follows:
The last string represents where the AM or PM marker should go for 12-hour clocks.
enyo.g11n.Fmts.prototype.getMonthFields: function(Returns the medium-sized abbreviation for the month names in this locale. In most locales, these are the 3-letter abbreviations of the month names.
enyo.g11n.Fmts.prototype.getAmCaption: function(Returns the string for AM in the current locale, or the default "AM" if it cannot be found.
enyo.g11n.Fmts.prototype.getPmCaption: function(Returns the string for PM in the current locale, or the default "PM" if it cannot be found.
enyo.g11n.Fmts.prototype.getMeasurementSystem: function(Returns the measurement system for the current locale. The possible values are "uscustomary", "imperial", and "metric". The default is "metric" if not otherwise specified in the formats config file.
enyo.g11n.Fmts.prototype.getDefaultPaperSize: function(Returns the default paper size for printers in the current locale. The possible values are "letter" (ie. 8½" x 11") or "A4" (210mm × 297mm). The default is "A4" if not otherwise specified in the formats config file.
enyo.g11n.Fmts.prototype.getDefaultPhotoSize: function(Returns the default photo size for printers in the current locale. The possible values are "10X15CM" (ie. 10 by 15 cm), "4x6" (4 x 6 inches), or "L" (roughly 9 × 13 cm). The default is "10X15CM" if not otherwise specified in the formats config file.
enyo.g11n.Fmts.prototype.getDefaultTimeZone: function(Returns the zone ID of the default time zone for the locale. For many locales, there are multiple time zones. This function returns the one that either is the most important or contains the largest population. If the current formats object is for an unknown locale, the default time zone is GMT (Europe/London).
g11n/base/javascript/locale.js
enyo.g11n.Locale: function(Locale Creates a new locale instance.
The specifier parameter (spec) has the following format:
[language]_[region][_variant]
That is, the language, region, and variant are optional parts separated by underscores. The language is given by the 2-letter ISO 639 language code, and the region is given by the 2-letter ISO 3166 country code, lower-cased. The variant can be any string that contains any ASCII letter characters and no spaces or underscores.
In webOS, the region is expressed as a lower-case code for historical reasons. While we continue to use lower-case codes for backwards compatibility, the Locale constructor also accepts upper-case ISO-compliant codes in the locale specifier argument.
enyo.g11n.Locale.prototype.getLocale: function(Returns the entire locale spec for the current locale.
enyo.g11n.Locale.prototype.getLanguage: function(Returns the language of this locale.
enyo.g11n.Locale.prototype.getRegion: function(Returns the region of this locale.
enyo.g11n.Locale.prototype.getVariant: function(Returns the variant of this locale, if any.
enyo.g11n.Locale.prototype.toString: function(Returns the locale spec.
enyo.g11n.Locale.prototype.toISOString: function(Returns the locale, specifying the region and variant upper-cased to conform to ISO standards. The spec returned from this function can then be used with other libraries of international routines such as ICU.
enyo.g11n.Locale.prototype.isMatch: function(otherLocale Returns whether or not the current locale is compatible with the other locale. To be compatible means that one locale can be substituted for the other for translations and localized files.
enyo.g11n.Locale.prototype.equals: function(otherLocale Returns true if this locale exactly matches the other locale. Locales that are equal necessarily match (i.e., they are compatible), but locales that are compatible are not necessarily equal.
enyo.g11n.Locale.prototype.useDefaultLang: function(If the current locale includes a region but no language, this function causes the locale to fill itself out with the default language for that region. For each region, one language is picked as the default. If the region does not have a default, the language of the current UI locale is used, and if that cannot be found, English is used.
g11n/base/javascript/loadfile.js
g11n/base/javascript/template.js
enyo.g11n.Template: function(template, pattern Returns a Template object that substitutes the strings into a specified string template.
The template parameter is a string to substitute into. The pattern parameter is an optional parameter that overrides the normal #{foo} substitution format.
g11n/base/javascript/resources.js
$L: function(inText Global translation function, for convenience. This is only useful to apps that want to translate strings to the current UI language. If you want to translate to a different language, or if you want to translate strings for a library or package, you need to create a Resources object instead, and call its $L method.
If the string does not have a translation in the current language, the argument is returned as-is.
enyo.g11n.Resources: function(params Creates a new bundle of resource strings. The params object may contain the following:
enyo.g11n.Resources.prototype.getResource: function(path Gets a localized file.
This will search the resources directory looking for the localized version of the file. The sequence of places where it looks for the file is as follows:
If the file cannot be found, this function returns undefined.
enyo.g11n.Resources.prototype.$L: function(stringToLocalize Retrieves a translated string. If the string to localize is not found in the resources, the original argument is returned unmodified. This means that is always safe to call $L because this method will always return something useful.
g11n/base/javascript/character.js
enyo.g11n.Char.isIdeo: function(isIdeo Returns true if the first character in the string is an Asian ideographic character.
enyo.g11n.Char.isPunct: function(isPunct Returns true if the first character in the string is a punctuation character.
enyo.g11n.Char.isSpace: function(isSpace Returns true if the first character in the string is a whitespace character.
enyo.g11n.Char.toUpper: function(toUpper Upper-cases every character in a string.
Upper-case every character in a string according to the rules of the given locale. If the locale is not given, the current locale is used.
Returns a string containing the same content as the original parameter, but with all characters upper-cased
enyo.g11n.Char.isLetter: function(isLetter Returns true if the first character in the string is a letter character.
enyo.g11n.Char.getIndexChars: function(getIndexChars Returns an array of strings containing all of the alphabetic characters that are used as index characters for the current locale. The characters are returned in the order they should appear in the index. An index character is a character under which multiple items in a list may be categorized. In most languages, accented versions of a character are considered a variant of the base character, so list items are grouped together under the same base character. In other locales, accented characters are considered to be separate from the unaccented base character, and list items starting with the accented character should be grouped under a separate header. The symbol "#" is appended to the end of the list as the placeholder character representing all strings that do not start with any of the alphabetic index chars.
Returns an array of strings containing all the index characters in order
enyo.g11n.Char.getBaseString: function(getBaseString Converts every character in a string to its corresponding base character according to the rules of the given locale.
The base character is defined to be a version of the same character in the list of alphabetic index chars as returned by getIndexChars that usually does not have any accents or diacriticals unless the language considers the character with the accent to be a character distinct from the unaccented version.
Returns a string containing the same content as the original parameter, but with all characters replaced by their base characters.
g11n/base/javascript/timezone.js
enyo.g11n.TzFmt: function(params Creates a new timezone format instance.
The params argument is a string that is a timezone id specifier. The specifier has the following format:
Zone name (see man tzfile), daylight savings supported, offset from UTC.
getCurrentTimeZone: function(Returns the current timezone of the device. The timezone is updated whenever it is changed by the user (if set manually), or by the network (if set automatically).
Returns the name of the timezone.
setTZ: function(This set of functions caches the current timezone name (e.g., "PST"). The default value of subscribe is false, since the timezone most likely will not change frequently.
This is for use by DateFmt() in the globalization framework, which needs the current timezone for the 'zzz' specifier.
toString: function(Returns the timezone as a string.
g11n/base/javascript/datetime.js
enyo.g11n.DateFmt: function(params Creates a new date formatter object.
If params is passed as a string, then the string should specify the custom date format to use. If params is specified as an object, the object may contain the following properties:
The codes to use when specifying custom date or time formats are the following:
Please note that the current formatter only supports formatting dates in the Gregorian calendar.
Returns a date formatter object that formats dates according to the given parameters.
enyo.g11n.DateFmt.prototype.toString: function(Returns the format string that this formatter instance uses to format dates.
enyo.g11n.DateFmt.prototype.isAmPm: function(Returns true if the current formatter uses a 12-hour clock to format times.
enyo.g11n.DateFmt.prototype.isAmPmDefault: function(Returns true if the locale of this formatter uses a 12-hour clock to format times.
enyo.g11n.DateFmt.prototype.getFirstDayOfWeek: function(Returns the day of the week that represents the first day of the week in the current locale. The numbers represent the days of the week as follows:
enyo.g11n.DateFmt.prototype.format: function(date format(date): Formats a date according to the format set up in the constructor of this formatter instance.
Returns a string with the date formatted according to the format set up for this formatter instance.
enyo.g11n.DateFmt.prototype.formatRelativeDate: function(date, options Formats a date as relative to another date.
This method formats a date as being relative to another date. If the two dates are close in time, the time distance between them is given rather than a formatted date. If the two dates are not close, then the date is formatted as per the format set up for this formatter instance.
The options object can have the following properties:
The relative dates/times are as follows:
When strings are returned as relative, the text in them is already localized to the current locale.
Returns a string with the relative date.
enyo.g11n.DateFmt.prototype.formatRange: function(dateStart, dateEnd Formats a pair of dates as a date range.
This method formats a pair of dates as a date/time range from start to end using the settings of the formatter object to guide the formatting.
The format of the output string is determined as follows:
The order of the month, date, and year components in the above formats and the text of the separators are locale-dependent. For example, if the start date is September 2, 2011, and the end date is September 5, 2011, the ranges would be:
The length of the month abbreviations is determined by the date length with which the current formatter object was constructed. If the end date precedes the start date, the dates will be switched so that the earlier date becomes the start date. The text in the returned string will be localized to the locale of the formatter instance.
Returns a string with the date/time range.
g11n/base/javascript/numberfmt.js
enyo.g11n.NumberFmt: function(options Creates a formatter object that formats numbers according to the given options. Once the formatter object is created, it is intended to be immutable so that you can create multiple formatters for different purposes, and they will not conflict with each other.
The options object may include any of the following properties:
enyo.g11n.NumberFmt.prototype.format: function(number Converts a number into a string, using the proper locale-based format for numbers. If the parameter is passed in as a string containing a number, it will be parsed into a number first before being formatted back into a string. If the parameter is not a number or a string containing a valid number, the value "undefined" is returned.
Returns the input number formatted as a string using the current locale formatting and the current option settings for the formatter.
g11n/base/javascript/duration.js
enyo.g11n.DurationFmt: function(params Creates a new duration (time interval) formatter object.
params may contain the following properties:
The styles form progressively longer strings. Examples of each style for US English:
The format, the language of the words in the text, and the separator characters are correct for the given locale.
Returns a duration formatter object that can format time intervals according to the given parameters.
enyo.g11n.DurationFmt.prototype.format: function(duration Formats a duration (time interval) according to the format set up in the constructor of this formatter instance.
The duration object may contain any or all of these properties:
Each property should have an integer value, or else be left out completely.
If any property is left out of the duration object or has the value of 0, it will not be included in the formatted string output. The only exceptions are 0 minutes or 0 seconds in the short and medium formats. In those cases, double zeros are included to make the time correct.
Example: 14 hours even would be formatted in US English as
If any of the properties contain a number that is too big for the field, this formatter will NOT recalculate. It is up to the caller to make sure the elements are in the desired range. This formatter also will not truncate any propeties to approximate a time interval. If an approximate time interval is desired, it is up to the caller to leave off fields in the duration parameter.
This also means it is possible to format a duration with a relatively large number in any property without its being "wrapped" down to the normal range for that property when formatted as a time of day or as a normal day of the year.
Example: A process that took 174 hours and 23 seconds to complete would be formatted as
The 174 hours is NOT brought down to the the normal daily range for hours of 0-24.
Returns a string with the date formatted according to the style and locale set up for this formatter instance. If the duration parameter is empty or undefined, an empty string is returned.
dom/dom.js
enyo.byId: function(id, doc Shortcut to call getElementById() if id is a string, otherwise returns id. doc is optional, refers to document if not provided.
enyo.stopEvent: function(inEvent enyo.getCookie: function(inName Gets a named value from the document cookie.
enyo.setCookie: function(inName, inValue, inProps Sets a named value into the document cookie, with properties.
Properties in the optional inProps argument are attached to the cookie. inProps may have an expires property, which can be a number of days, a Date object, or a UTC time string.
To remove a cookie, use an inProps value of { "Max-Age": 0 }.
If developing in the Google Chrome browser with a local file as your application,
start Chrome with the --enable-file-cookies switch to allow cookies to be set.
_findTarget: function(inNode, inX, inY calcBorderExtents: function(inNode calcMarginExtents: function(inNode calcNodeOffset: function(inNode, inParentNode findTarget: function(inControl, inX, inY getClipboard: function(inCallback getComputedStyle: function(inNode getComputedStyleValue: function(inNode, inProperty, inComputedStyle setClipboard: function(inText Copies a string to the system clipboard.
dom/util.js
enyo.macroize: function(inText, inMap, inPattern Populates a string template with data values.
Returns a copy of inText, with macros defined by inPattern replaced by named values in inMap.
inPattern may be omitted, in which case the default macro pattern is used. The default pattern matches macros of the form
{$name}
Example:
// returns "My name is Barney."
enyo.macroize("My name is {$name}.", {name: "Barney"});
Dot notation is supported, like so:
var info = {
product_0: {
name: "Gizmo"
weight: 3
}
}
// returns "Each Gizmo weighs 3 pounds."
enyo.macroize("Each {$product_0.name} weighs {$product_0.weight} pounds.", info);
enyo.objectToQuery: function(map Takes a name/value mapping object and returns a string representing a URL-encoded version of that object.
Example:
{
username: "foo",
password: "bar"
}
"username=foo&password=bar"
enyo.irand: function(inRange Generates a random integer greater than or equal to zero, but less than inRange.
enyo.call: function(inObject, inMethod, inArguments Calls named method inMethod (String) on inObject with optional arguments inArguments (Array), if the object and method exist.
enyo.call(window.Worker, "doWork", [3, "foo"]);
enyo.asyncMethod: function(inScope, inMethod Calls method inMethod on inScope asynchronously. Uses window.setTimeout with minimum delay, usually around 10ms.
Additional arguments are passed directly to inMethod.
enyo.nextTick: function(inScope, inMethod Calls method inMethod on inScope asynchronously. Uses window.postMessage() if possible, to get shortest possible delay.
Additional arguments are passed directly to inMethod.
enyo.job: function(inJobName, inJob, inWait Invokes function inJob after inWait milliseconds have elapsed since the last time inJobName was referenced.
Jobs can be used to throttle behaviors. If some event can occur once or multiple times, but we want a response to occur only once every so many seconds, we can use a job.
onscroll: function() {
// updateThumb will be called but only when 1s has elapsed since the
// last onscroll
enyo.job("updateThumb", enyo.bind(this, "updateThumb"), 1000);
}
enyo.job.stop: function(inJobName Cancels the named job, if it has not already fired.
enyo.time: function(inName Starts a timer with the given name.
enyo.timeEnd: function(inName Ends a timer with the given name and returns the number of milliseconds elapsed.
applyFilterHighlight: function(inText, inSearchText, inClassName escapeHtml: function(inText Returns string with ampersand, less-than, and greater-than characters replaced with HTML entities, e.g., '<code>"This & That"</code>' becomes '<code>"This & That"</code>'
escapeHtmlAttribute: function(inText Returns string with ampersand and double quote characters replaced with HTML entities, e.g., 'hello from "Me & She"' becomes 'hello from "Me & She"'.
stripQuotes: function(inString Returns string with leading and trailing quote characters removed, e.g., "foo" becomes foo.
trim: function(inString Returns string with whitespace at start and end removed.
dom/json.js
parse: function(inJson Returns a JavaScript object for a given JSON string, using native stringify routine if it's available. inJson is the JSON string to be converted to a JavaScript object.
stringify: function(inValue, inReplacer, inSpace Returns a JSON string for a given object, using native stringify routine if it's available. inValue is the Object to be converted to JSON. inReplacer is the optional value inclusion array or replacement function. inSpace is the optional number or string to use for pretty-printing whitespace.
dom/xhr.js
enyo.xhrGet: function(inArgs Performs an XMLHttpRequest GET with features described as inArgs. Supported properties for inArgs are:
enyo.xhrPost: function(inArgs Performs an XMLHttpRequest POST with features described as inArgs. Supported properties for inArgs are:
headers: Request headers, an object with header names as keys. You should provide at least a "Content-Type" field here to identify the format of your POST data, e.g.,
{ "Content-Type":"application/x-form-urlencoded". }
dom/Animation.js
duration: 350 tick: 10 repeat: 0 easingFunc: enyo.easing.cubicOut alwaysAnimate: false onBegin: "" onAnimate: "" onStop: "" onEnd: "" destroy: function(isAnimating: function(play: function(inStart, inEnd setNode: function(inNode stop: function(owner, name
create, createComponent, createComponents, destroy, destroyComponents, getComponents
error, log, warn
dom/Dispatcher.js
dispatch: function(e findDefaultTarget: function(e findDispatchTarget: function(inNode enyo.dispatch: function(inEvent enyo.bubble: function(e dom/ApplicationEvents.js
Events that have no explicit target flow to instances of this component.
Create an ApplicationEvents wherever you want to handle these global events. Note that a global event will flow to all instances of ApplicationEvents, so application code will need to handle conflicts.
Example:
...
components: [
{kind: "ApplicationEvents", onWindowRotated: "windowRotated"}
...
],
...
windowRotated: function(inSender) {
// do work when orientation changes
}
onLoad: ''
Sent after window has completed loading
onUnload: ''
Sent when window is closed
onError: ''
Sent when the window cannot be loaded properly
onWindowActivated: ''
Sent when user brings window to the front
onWindowDeactivated: ''
Sent when user leaves the window
onWindowParamsChange: ''
Sent when window parameters are changed via enyo.windows methods activateWindow or setWindowParams
onApplicationRelaunch: ''
Sent when the application has been relaunched by the system manager
onWindowRotated: ''
Sent when user rotates device
onOpenAppMenu: ''
Sent when user taps on app menu area or hits the app menu key (ctrl+tilde) on desktop
onCloseAppMenu: ''
Sent when the app menu is dismissed
onKeyup: '' Sent for DOM keyup event
onKeydown: '' Sent for DOM keydown event
onKeypress: '' Sent for DOM keypress event
onBack: '' Sent when user makes a back gesture or hits ESC key on desktop
owner, name
create, createComponent, createComponents, destroy, destroyComponents, getComponents
error, log, warn
dom/Gesture.js
enyo.gesture provides an event filter hooked into the enyo dispatcher. This intercepts some DOM events and turns them into special synthesized events.
There are no public methods defined.
dom/DomNode.js
enyo.DomNode is an HTML DomNode abstraction.
enyo.DomNode is designed to represent much of the state of a DomNode, including nodeTag, attributes, and styles, without needing to be mapped to an actual node in DOM.
Virtualizing the DOM in this way allows us to optimize DOM rendering by managing changes in enyo.DomNode objects and propagating those changes into the actual document only when necessary or convenient. Additionally, it serves as a local cache for certain information that can be costly to gather directly from the DOM itself.
Controls in Enyo are an extension of Components into UI. enyo.DomNode is the first step in crafting Component into Control.
showing: true Controls the display of this object.
The showing property and the setShowing(), show(), and hide() methods are only conveniences for quickly setting or removing display: none style.
The value of showing does not imply an object is actually visible or even rendered in DOM, it simply reflects this state of this specific style as a convenience.
For any actual DOM node represented by this object, other CSS classes or custom selectors could cause the display property of the computedStyle to be out sync with showing.
Also, note that showing has lower precedence than other ways for setting the display style for this object
For example, if showing is false,
this.applyStyle("display", null);
will immediately display the object without changing the value of showing.
Note that the getShowing() method tests the display style of the node and resets the showing property as needed before returning its value.
prepend: false
If true, this node is prepended to its parent; otherwise, it's appended.
addClass: function(inClass Adds CSS class name inClass to the className attribute of this object.
// add the highlight class to this object
this.addClass("highlight");
addRemoveClass: function(inClass, inTrueToAdd Adds or removes CSS class name inClass from the className attribute of this object based on the value of inTrueToAdd.
// add or remove the highlight class, depending on the "highlighted" property
this.addRemoveClass("highlight", this.highlighted);
addStyles: function(inStyles Adds CSS styles to the set of styles assigned to this object.
inStyles is a string containing CSS styles in text format.
this.$.box.addStyles("background-color: red; padding: 4px;");
applyStyle: function(inStyle, inValue Applies a single style value to this object.
this.$.box.applyStyle("z-index", 4);
You can remove a style (restore it to default) by setting its value to null.
this.$.box.applyStyle("z-index", null);
getClassName: function(Returns the className attribute (string).
hasClass: function(inClass Returns true if the className attribute contains a class matching inClass.
// returns true if _className_ is "bar foo baz", but false for "barfoobaz"
var hasFooClass = this.$.control.hasClass("foo");
hasNode: function(Returns the DOM node that has been created and rendered for the object. If this node doesn't exist, returns null. After this call, the node property will be valid and can be checked directly.
If hasNode() isn't null, the node property refers to a valid DOM node; otherwise, the node property should not be accessed.
A DomNode object will only have a valid node after it has been rendered.
if (this.hasNode()) {
console.log(this.node.nodeType);
}
removeClass: function(inClass Removes CSS class name inClass from the className attribute of this object.
inClass must have no leading or trailing spaces.
Using a compound class name is supported, but the name is treated atomically. For example, given "a b c", removeClass("a b") will produce "c", but removeClass("a c") will produce "a b c".
// remove the highlight class from this object
this.removeClass("highlight");
setAttribute: function(inName, inValue Sets the value of an attribute on this object. Set inValue to null to remove an attribute.
// set the tabIndex attribute for this DomNode
this.setAttribute("tabIndex", 3);
// remove the index attribute
this.setAttribute("index", null);
setClassName: function(inClassName Replaces the className attribute. The className attribute represents the CSS classes assigned to this object. Note that a className can be a string that contains multiple classes. The className nomenclature comes from the DOM standards.
this.$.control.setClassName("box blue-border highlighted");
setStyle: function(inStyle Replaces the set of CSS styles assigned to this object.
inStyle is a string containing CSS styles in text format.
this.$.box.setStyle("color: black;");
owner, name
create, createComponent, createComponents, destroy, destroyComponents, getComponents
error, log, warn
dom/DomNodeBuilder.js
The DomNodeBuilder kind extends the DomNode component by providing methods for rendering.
Rendering refers to the process of generating actual DOM content as described by the component.
These rendering methods are important for Controls, all of which descend from DomNodeBuilder. Note that a single control typically represents a tree of other controls. Rendering the root generally renders the entire tree.
It's common to render an entire application into a document body, like so:
new MyApp().renderInto(document.body);
On any DomNodeBuilder-derived object, you can set the canGenerate property to false to inhibit HTML generation. It defaults to undefined.
allowHtml: false
When false, content is treated as plain text; when true, it's treated as HTML. Only set this to true when you trust the content because you generated it yourself or because you've already stripped off potentially malicious tags.
content: ""
The content that will be put inside the DOM node created
hide: function(Hides this node (alias for setShowing(false)).
render: function(Renders this object into DOM, generating a DOM node if needed.
renderInto: function(inParentNode Renders this object into the existing DOM node referenced by inParentNode.
rendered: function(Called whenever this object has been rendered. Override this method to perform tasks that require access to an actual DOM node.
rendered: function() {
this.inherited(arguments);
if (this.hasNode()) {
this.nodeHeight = this.node.offsetHeight;
}
}
show: function(Shows this node (alias for setShowing(true)).
showing, prepend
owner, name
addClass, addRemoveClass, addStyles, applyStyle, getClassName, hasClass, hasNode, removeClass, setAttribute, setClassName, setStyle
create, createComponent, createComponents, destroy, destroyComponents, getComponents
error, log, warn
dom/ContainedDomBuilder.js
ContainedDomBuilder extends DomNodeBuilder with the ability to be contained by Controls.
Containment is similar to ownership for Components. Whereas ownership defines the messaging and lifecycle relationships for components, containment defines layout and behavioral relationships.
A ContainedDomBuilder can have a container. Containers are Control kinds, which are themselves ContainedDomBuilders. Therefore, Controls contain other Controls, and can be composed into a tree.
Containment is similar to the parent/child relationship in DOM, but the DOM parent/child relationship tends to be more complicated.
The container concept simplifies managing complex UI.
See enyo.Control for more information.
className: "" container: null parent: null addContent: function(inContent, inDelim getOffset: function(isDescendantOf: function(inAncestor allowHtml, content
showing, prepend
owner, name
hide, render, renderInto, rendered, show
addClass, addRemoveClass, addStyles, applyStyle, getClassName, hasClass, hasNode, removeClass, setAttribute, setClassName, setStyle
create, createComponent, createComponents, destroy, destroyComponents, getComponents
error, log, warn
dom/Control.js
enyo.Control is a Component descendent that can be represented visually and can receive UI events.
Typically, a Control's visual representation corresponds to a node (and all its children) in DOM, but you are highly encouraged to consider only the higher level Control and Component hierarchies when designing Enyo applications, since these representations are much simpler than the actual DOM.
Control inherits from DomBuilder the ability to maintain its state, whether it's been rendered (represented in DOM) or not. This virtualization lets Enyo optimize actual DOM access and, in most cases, frees the coder from having to worry about DOM state.
layoutKind: "" onclick: "" onmousedown: "" onmouseup: "" broadcastMessage: function(inMessageName, inArgs Send a message to me and all my controls
destroyControls: function(Destroys 'managed controls', the same set of controls returned by getControls.
getControls: function(Returns the 'non-private managed controls', which is not actually the same as the 'controls' array (note: this is a problem of taxonomy).
indexOfControl: function(inControl Returns the index of a given managed control in a component's list of controls. @param inControl {Component} A managed control. @errata Current implementation returns index in this.controls, but index in this.getControls() makes more sense.
resized: function(Call after this control has been resized to allow it to process the size change. Implement a "resizeHandler" method to respond to being resized.
className, container, parent
allowHtml, content
showing, prepend
owner, name
addContent, getOffset, isDescendantOf
hide, render, renderInto, rendered, show
addClass, addRemoveClass, addStyles, applyStyle, getClassName, hasClass, hasNode, removeClass, setAttribute, setClassName, setStyle
create, createComponent, createComponents, destroy, destroyComponents, getComponents
error, log, warn
compatibility/webkitGesture.js
compatibility/webosGesture.js
base/layout/Grid.js
layoutKind
className, container, parent
allowHtml, content
showing, prepend
owner, name
onclick, onmousedown, onmouseup
broadcastMessage, destroyControls, getControls, indexOfControl, resized
addContent, getOffset, isDescendantOf
hide, render, renderInto, rendered, show
addClass, addRemoveClass, addStyles, applyStyle, getClassName, hasClass, hasNode, removeClass, setAttribute, setClassName, setStyle
create, createComponent, createComponents, destroy, destroyComponents, getComponents
error, log, warn
base/layout/HLayout.js
flow: function(base/layout/FlexLayout.js
A layout type that encapsulates the flexible box model exposed by CSS3.
Flex layouts are particularly useful for designs that need to fit objects to spaces. For example, say you have a header, middle section, and footer, and you want the header and footer to be always visible, with the middle section taking up the remaining space.
Note: Traditional HTML is not good at this kind of structure. In HTML, the sizing of objects generally proceeds from the inside out, which is, in a way, the opposite of fitting objects to a fixed space. (This dichotomy in the approach to layout is something that comes up regularly in discussions of Web-centric vs. desktop-centric applications.)
The FlexLayout aligns controls into vertically- or horizontally-stacked boxes. When the flex property is set on a control in a FlexLayout, the control expands to fill the available space not occupied by other controls. If multiple controls have their flex property set, they share the available space, each taking the fraction specified by its own flex value divided by the total flex value. For example, a control with flex: 5 in a layout with a total flex of 20 will take up one-quarter (i.e., 5/20) of the available space.
The pack property specifies how controls are aligned with respect to the main axis. Similarly, the align property specifies how controls are aligned along the orthogonal axis.
See enyo.HFlexLayout and enyo.VFlexLayout.
A horizontal flexible layout that displays controls left-to-right.
To create a caption with natural width, followed by a set of three equally-spaced buttons to the right, try:
{layoutKind: "HFlexLayout", style: "width: 500px;", components: [
{content: "Here are some buttons:"},
{kind: "Button", flex: 1, caption: "Left"},
{kind: "Button", flex: 1, caption: "Center"},
{kind: "Button", flex: 1, caption: "Right"}
]}
To control the alignment left-to-right, change the pack property's value. To control the alignment top-to-bottom, change the align property's value. For example, this creates a a set of horizontally-centered buttons positioned at the bottom of the container.
{kind: "Control", layoutKind: "HFlexLayout", style: "width: 300px; height: 500px;",
pack: "center", align: "end", components: [
{kind: "Button", caption: "Left"},
{kind: "Button", caption: "Right"}
]}
A vertical flexible layout that displays controls top-to-bottom.
To create a caption with natural height, followed by a set of three equally-spaced buttons below, try:
{layoutKind: "VFlexLayout", style: "height: 500px;", components: [
{content: "Here are some buttons:"},
{kind: "Button", flex: 1, caption: "Top"},
{kind: "Button", flex: 1, caption: "Middle"},
{kind: "Button", flex: 1, caption: "Bottom"}
]}
To control the alignment top-to-bottom, change the pack property's value. To control the alignment left-to-right, change the align property's value. For example, this creates a a set of vertically-centered buttons positioned at the right of the container.
{kind: "Control", layoutKind: "VFlexLayout", style: "width: 300px; height: 500px;",
pack: "center", align: "end", components: [
{kind: "Button", caption: "Top"},
{kind: "Button", caption: "Bottom"}
]}
An HFlexBox displays controls using an enyo.HFlexLayout.
It is equivalent to specifying a Control with layoutKind set to HFlexLayout.
layoutKind
className, container, parent
allowHtml, content
showing, prepend
owner, name
onclick, onmousedown, onmouseup
broadcastMessage, destroyControls, getControls, indexOfControl, resized
addContent, getOffset, isDescendantOf
hide, render, renderInto, rendered, show
addClass, addRemoveClass, addStyles, applyStyle, getClassName, hasClass, hasNode, removeClass, setAttribute, setClassName, setStyle
create, createComponent, createComponents, destroy, destroyComponents, getComponents
error, log, warn
An VFlexBox displays controls using an enyo.VFlexLayout.
It is equivalent to specifying a Control with layoutKind set to VFlexLayout.
layoutKind
className, container, parent
allowHtml, content
showing, prepend
owner, name
onclick, onmousedown, onmouseup
broadcastMessage, destroyControls, getControls, indexOfControl, resized
addContent, getOffset, isDescendantOf
hide, render, renderInto, rendered, show
addClass, addRemoveClass, addStyles, applyStyle, getClassName, hasClass, hasNode, removeClass, setAttribute, setClassName, setStyle
create, createComponent, createComponents, destroy, destroyComponents, getComponents
error, log, warn
base/scroller/ScrollStrategy.js
enyo.ScrollStrategy implements scrolling dynamics simulation. It is a helper kind used by other scroller kinds.
enyo.ScrollStrategy is not typically created in application code.
vertical: true horizontal: true onScrollStart: "scrollStart" onScroll: "scroll" onScrollStop: "scrollStop" start: function(owner, name
create, createComponent, createComponents, destroy, destroyComponents, getComponents
error, log, warn
base/scroller/ScrollFades.js
A scroller that provides a visual indication if content can be scrolled to the left, right, top, or bottom.
showHideFades: function(inScroller layoutKind
className, container, parent
allowHtml, content
showing, prepend
owner, name
onclick, onmousedown, onmouseup
broadcastMessage, destroyControls, getControls, indexOfControl, resized
addContent, getOffset, isDescendantOf
hide, render, renderInto, rendered, show
addClass, addRemoveClass, addStyles, applyStyle, getClassName, hasClass, hasNode, removeClass, setAttribute, setClassName, setStyle
create, createComponent, createComponents, destroy, destroyComponents, getComponents
error, log, warn
base/scroller/DragScroller.js
enyo.DragScroller is a base kind that integrates the scrolling simulation provided by enyo.ScrollStrategy into a Control.
enyo.ScrollStrategy is not typically created in application code.
horizontal: true Set to false to prevent horizontal scrolling.
vertical: true Set to false to prevent vertical scrolling.
layoutKind
className, container, parent
allowHtml, content
showing, prepend
owner, name
onclick, onmousedown, onmouseup
broadcastMessage, destroyControls, getControls, indexOfControl, resized
addContent, getOffset, isDescendantOf
hide, render, renderInto, rendered, show
addClass, addRemoveClass, addStyles, applyStyle, getClassName, hasClass, hasNode, removeClass, setAttribute, setClassName, setStyle
create, createComponent, createComponents, destroy, destroyComponents, getComponents
error, log, warn
base/scroller/BasicScroller.js
enyo.BasicScroller provides touch-based scrolling for controls placed inside it.
Note that applications will typically create an enyo.Scroller instead of an enyo.BasicScroller.
Scroller provides a viewport in which the user can drag or flick to scroll content. Note that a user can drag beyond a valid scroll position. When this occurs, the scroller moves with increased tension before returning to a valid position with an accompanying animation.
Note that the scrolling of content exceeding the size of the viewport is not automatic; for content to scroll, it must be placed inside a scroller control.
By default, content scrolls along both the vertical and horizontal axes.
Scrolling in either dimension can be turned on or off. In addition, a scroller can be set to allow scrolling only when content actually exceeds the scroller's dimensions.
By default, the vertical axis always scrolls, whether or not the content exceeds the scroller's height, while the horizontal axis scrolls only if content exceeds the scroller's width. This automatic scrolling for the horizontal axis is set via the autoHorizontal property. It can be enabled for the vertical axis by setting autoVertical to true.
These auto properties have precedence over the horizontal and vertical properties, which both default to true.
Thus, to disable horizontal scrolling, for example, set both the autoHorizontal and horizontal properties to false.
{kind: "BasicScroller", autoHorizontal: false, horizontal: false}
Scroll position can be set such that the scroller snaps to a position directly or such that the scroller animates to a position.
To set scroll position directly, without animation, set the scrollTop and scrollLeft properties.
buttonClick: function() {
// don't allow scrolling beyond a left position of 500
if (this.$.scroller.getScrollLeft() > 500) {
this.$.scroller.setScrollLeft(500);
}
}
To set scroll position with animation, use the scrollTo method.
buttonClick: function() {
if (this.$.scroller.getScrollTop() > 100 || this.$.scroller.getScrollLeft() > 300) {
this.$.scroller.scrollTo(100, 300);
}
}
It's also possible to ensure that a given scroll position is visible in a scroller's viewport by calling the scrollIntoView method. If the scroll position is in view, the scroll position does not change. If not, the scroll position is set to the given position.
A scroller control must have explicit dimensions. If it does not, it will simply expand to fit its content and will not provide scrolling. There are a number of ways to ensure that a scroller's dimensions are set, but most commonly, a scroller is placed inside a flex layout and given a flex value. For example,
{kind: "VFlexLayout", components: [
{kind: "PageHeader", content: "A bunch of info"},
// NOTE: the scroller has flex set to 1
{kind: "BasicScroller", flex: 1, components: [
{kind: "HtmlContent", srcId: "lotsOfText"}
]},
{kind: "Toolbar"}
]}
scrollTop: 0 scrollLeft: 0 autoHorizontal: true Enables horizontal scrolling only if content exceeds the scroller's width.
autoVertical: false Enables vertical scrolling only if content exceeds the scroller's height.
fpsShowing: false Display fps counter
accelerated: true Use accelerated scrolling.
onScrollStart: "" Event that fires when scrolling starts.
onBeforeScroll: "" Event that fires just before scroll position changes.
onScroll: "" Event that fires just after scroll position changes.
onScrollStop: "" Event that fires when scrolling stops.
getBoundaries: function(Returns an object describing the scroll boundaries, which are the dimensions of scrolling content. For example, if getBoundaries returns
{top: 0, left: 0, bottom: 1000, left: 1000}
then the scrolling content is 1000 by 1000.
isScrolling: function(Returns true if the scroller is scrolling when called.
scrollIntoView: function(inY, inX Ensures that the specified position is displayed in the viewport. If the position is not currently in view, the specified position is scrolled to directly, without animation.
scrollTo: function(inY, inX Animates a scroll to the specified position.
scrollToBottom: function(Sets the scroll position to the bottom of the content, without animation.
horizontal, vertical
layoutKind
className, container, parent
allowHtml, content
showing, prepend
owner, name
onclick, onmousedown, onmouseup
broadcastMessage, destroyControls, getControls, indexOfControl, resized
addContent, getOffset, isDescendantOf
hide, render, renderInto, rendered, show
addClass, addRemoveClass, addStyles, applyStyle, getClassName, hasClass, hasNode, removeClass, setAttribute, setClassName, setStyle
create, createComponent, createComponents, destroy, destroyComponents, getComponents
error, log, warn
base/scroller/Scroller.js
enyo.Scroller provides touch-based scrolling for controls placed inside it. See enyo.BasicScroller for more information.
In addition to providing all the functionality of a BasicScroller, enyo.Scroller ensures that the dimensions of the scroller content are at least as large as the dimensions of the scroller itself.
Since this is typically desirable--it allows a background image to expand to fit the scroller, for one thing--applications should generally use enyo.Scroller.
scrollTop, scrollLeft, autoHorizontal, autoVertical, fpsShowing, accelerated
horizontal, vertical
layoutKind
className, container, parent
allowHtml, content
showing, prepend
owner, name
onScrollStart, onBeforeScroll, onScroll, onScrollStop
onclick, onmousedown, onmouseup
getBoundaries, isScrolling, scrollIntoView, scrollTo, scrollToBottom
broadcastMessage, destroyControls, getControls, indexOfControl, resized
addContent, getOffset, isDescendantOf
hide, render, renderInto, rendered, show
addClass, addRemoveClass, addStyles, applyStyle, getClassName, hasClass, hasNode, removeClass, setAttribute, setClassName, setStyle
create, createComponent, createComponents, destroy, destroyComponents, getComponents
error, log, warn
base/scroller/TransformScroller.js
base/scroller/SnapScroller.js
enyo.SnapScroller is a scroller that snaps to the positions of the controls it contains. When dragged, the scroller moves normally; when a drag is finished, the scroller snaps to the scroll position of the control closest to the dragged position.
Snapping can only occur along one axis at a time. By default this is the horizontal axis. SnapScroller has an HFlexLayout, so its controls layout from left to right. Setting the layoutKind to VFlexLayout will enable vertical snapping. Here's an example:
{kind: "VFlexBox", components: [
{kind: "SnapScroller", flex: 1, components: [
{style: "background: red; width: 1000px;"},
{style: "background: white; width: 1000px;"},
{style: "background: blue; width: 1000px;"}
]}
]}
index: 0 Sets index to scroll directly (without animation) to the position of the control in scroller's list of controls at the value of index.
onSnap: "" Event that fires when the user finishes dragging and snapping occurs.
onSnapFinish: "" Event that fires when snapping and scroller animation completes.
next: function(Scrolls to the control following (right or bottom) the one currently in view.
previous: function(Scrolls to the control preceding (left or top) the one currently in view.
snapTo: function(inIndex Scrolls to the position of the control contained in the scroller's list of controls at inIndex.
scrollTop, scrollLeft, autoHorizontal, autoVertical, fpsShowing, accelerated
horizontal, vertical
layoutKind
className, container, parent
allowHtml, content
showing, prepend
owner, name
onScrollStart, onBeforeScroll, onScroll, onScrollStop
onclick, onmousedown, onmouseup
getBoundaries, isScrolling, scrollIntoView, scrollTo, scrollToBottom
broadcastMessage, destroyControls, getControls, indexOfControl, resized
addContent, getOffset, isDescendantOf
hide, render, renderInto, rendered, show
addClass, addRemoveClass, addStyles, applyStyle, getClassName, hasClass, hasNode, removeClass, setAttribute, setClassName, setStyle
create, createComponent, createComponents, destroy, destroyComponents, getComponents
error, log, warn
base/scroller/FadeScroller.js
scrollTop, scrollLeft, autoHorizontal, autoVertical, fpsShowing, accelerated
horizontal, vertical
layoutKind
className, container, parent
allowHtml, content
showing, prepend
owner, name
onScrollStart, onBeforeScroll, onScroll, onScrollStop
onclick, onmousedown, onmouseup
getBoundaries, isScrolling, scrollIntoView, scrollTo, scrollToBottom
broadcastMessage, destroyControls, getControls, indexOfControl, resized
addContent, getOffset, isDescendantOf
hide, render, renderInto, rendered, show
addClass, addRemoveClass, addStyles, applyStyle, getClassName, hasClass, hasNode, removeClass, setAttribute, setClassName, setStyle
create, createComponent, createComponents, destroy, destroyComponents, getComponents
error, log, warn
base/list/Flyweight.js
A control designed to be rendered multiple times. Typically, controls provide dynamic behavior in response to events and effect changes in rendering. Because flyweight is rendered multiple times, the question comes up: which rendering of the flyweight should update when an event occurs? To address this issue, whenever a DOM event is processed by a Flyweight object or any of its children, the flyweight automatically updates itself and its children to point to the rendering of itself in which the event occurred.
onNodeChange: "" onDecorateEvent: "" disableNodeAccess: function(enableNodeAccess: function(findNode: function(inNode setNodeByEvent: function(inEvent layoutKind
className, container, parent
allowHtml, content
showing, prepend
owner, name
onclick, onmousedown, onmouseup
broadcastMessage, destroyControls, getControls, indexOfControl, resized
addContent, getOffset, isDescendantOf
hide, render, renderInto, rendered, show
addClass, addRemoveClass, addStyles, applyStyle, getClassName, hasClass, hasNode, removeClass, setAttribute, setClassName, setStyle
create, createComponent, createComponents, destroy, destroyComponents, getComponents
error, log, warn
enyo.Flyweight.callWithoutNode: function(inControl, inFunc base/list/StateManager.js
base/list/RowServer.js
base/repeaters/Repeater.js
shouldDecorateRows: true Optionally decorate each row control with the row index, set via the "rowIndex" property. Decorating row items allows code to easily distinguish which row a control is in.
onSetupRow: "" layoutKind
className, container, parent
allowHtml, content
showing, prepend
owner, name
onclick, onmousedown, onmouseup
broadcastMessage, destroyControls, getControls, indexOfControl, resized
addContent, getOffset, isDescendantOf
hide, render, renderInto, rendered, show
addClass, addRemoveClass, addStyles, applyStyle, getClassName, hasClass, hasNode, removeClass, setAttribute, setClassName, setStyle
create, createComponent, createComponents, destroy, destroyComponents, getComponents
error, log, warn
base/repeaters/VirtualRepeater.js
A control that displays a repeating list of rows. It is suitable for displaying medium-sized lists (maximum of ~100 items). A flyweight strategy is employed to render one set of row controls as needed for as many rows as are contained in the repeater.
A VirtualRepeater's components block contains the controls to be used for a single row. This set of controls will be rendered for each row.
The onSetupRow event allows for customization of row rendering. Here's a simple example:
components: [
{kind: "VirtualRepeater", onSetupRow: "getItem", components: [
{kind: "Item", layoutKind: "HFlexLayout", components: [
{name: "caption", flex: 1},
{kind: "Button", onclick: "buttonClick"}
]}
]}
],
getItem: function(inSender, inIndex) {
if (inIndex < 100) {
this.$.caption.setContent("I am item: " + inIndex);
this.$.button.setCaption("Button" + inIndex);
return true;
}
}
In the above example, the control named "item" will be rendered for each row. When a row is rendered, the onSetupRow event is fired with the row index. The getItem method sets properties on controls in the row to customize the rendering of the row. Notice that it returns true if the index is less than 100. An onSetupRow handler must return true to indicate that the given row should be rendered. If it does not, the repeater will stop rendering.
Continuing with the above example, we have given the button an onclick handler. As previously noted, the button is rendered for each of the 100 rows. The onclick handler will fire for a click on any of the row buttons. It is common to need to know the exact row on which a user clicked. Events fired from within repeater rows contain this information in the rowIndex property of the DOM event object. For example:
buttonClick: function(inSender, inEvent) {
this.log("The user clicked on item number: " + inEvent.rowIndex);
}
accelerated: false stripSize: 10 onSetupRow: "" controlsToRow: function(inRowIndex Updates the repeater's controls to act as if they were rendered in the row with the given index. inRowIndex is the numeric index of the row to prepare.
fetchRowIndex: function(Fetches the index of the row that is currently receiving events.
fetchRowIndexByNode: function(inNode Fetches the row index for a node in a repeater row. inNode is a node that is contained in a repeater row. Returns the index of the row in which inNode exists.
fetchRowNode: function(inRowIndex Fetches the DOM node for the given row index.
renderRow: function(inRowIndex Re-renders the content for a given row. inRowIndex is the numeric index of the row to render.
layoutKind
className, container, parent
allowHtml, content
showing, prepend
owner, name
onclick, onmousedown, onmouseup
broadcastMessage, destroyControls, getControls, indexOfControl, resized
addContent, getOffset, isDescendantOf
hide, render, renderInto, rendered, show
addClass, addRemoveClass, addStyles, applyStyle, getClassName, hasClass, hasNode, removeClass, setAttribute, setClassName, setStyle
create, createComponent, createComponents, destroy, destroyComponents, getComponents
error, log, warn
base/controls/LazyControl.js
A control that optionally defers creation of its components based on the setting of the lazy property. Call validateComponents to create and render components.
componentsReady: function(Called after components are initialized. Use for initialization instead of create.
validateComponents: function(Ensures that components are created.
layoutKind
className, container, parent
allowHtml, content
showing, prepend
owner, name
onclick, onmousedown, onmouseup
broadcastMessage, destroyControls, getControls, indexOfControl, resized
addContent, getOffset, isDescendantOf
hide, render, renderInto, rendered, show
addClass, addRemoveClass, addStyles, applyStyle, getClassName, hasClass, hasNode, removeClass, setAttribute, setClassName, setStyle
create, createComponent, createComponents, destroy, destroyComponents, getComponents
error, log, warn
base/controls/Image.js
An image control displays an image specified via the src property. The src can be an absolute or relative url. It can also be a path relative to any loaded enyo package.
For example:
{kind: "Image", src: "http://www.example.com/image.jpg"},
{kind: "Image", src: "images/image.jpg"},
{kind: "Image", src: "$enyo-Heritage/images/popup-heritage.png"}
To change the image, use setSrc as follows:
buttonClick: function() {
this.$.image.setSrc("images/image2.jpg");
}
src: "$base-themes-default-theme/images/blank.gif" layoutKind
className, container, parent
allowHtml, content
showing, prepend
owner, name
onclick, onmousedown, onmouseup
broadcastMessage, destroyControls, getControls, indexOfControl, resized
addContent, getOffset, isDescendantOf
hide, render, renderInto, rendered, show
addClass, addRemoveClass, addStyles, applyStyle, getClassName, hasClass, hasNode, removeClass, setAttribute, setClassName, setStyle
create, createComponent, createComponents, destroy, destroyComponents, getComponents
error, log, warn
base/controls/Stateful.js
A control primitive that can add or remove a CSS class based on the boolean value of a given state.
Stateful is a base kind that is typically not itself created.
cssNamespace: "enyo" Prefix for css classes applied via setState.
setState: function(inState, inValue Adds or removes a CSS state class specified by inState. If inValue is true, the class is added; if false, it is removed. The CSS class name is formed by combining the value of the cssNamespace property, a "-" character, and the value of inState. For example:
this.$.stateful.setState("down", true);
With the default cssNamespace of "enyo", this applies the CSS class "enyo-down" to this control. Note that multiple state classes may be applied.
layoutKind
className, container, parent
allowHtml, content
showing, prepend
owner, name
onclick, onmousedown, onmouseup
broadcastMessage, destroyControls, getControls, indexOfControl, resized
addContent, getOffset, isDescendantOf
hide, render, renderInto, rendered, show
addClass, addRemoveClass, addStyles, applyStyle, getClassName, hasClass, hasNode, removeClass, setAttribute, setClassName, setStyle
create, createComponent, createComponents, destroy, destroyComponents, getComponents
error, log, warn
base/controls/CustomButton.js
A CustomButton is a button without any visual treatment. It should be used when a button primitive with unique appearance is desired. Typically, a CSS class is specified via the className property. CustomButton implements mouse handling for a well-defined set of states. Initialize a button as follows:
{kind: "CustomButton", caption: "OK", className: "myButton", onclick: "buttonClick"}
Set the toggling property to true to create a button with toggling behavior of down when clicked and up when clicked again.
caption: "" disabled: false isDefault: false down: false depressed: false hot: false toggling: false allowDrag: false cssNamespace
layoutKind
className, container, parent
allowHtml, content
showing, prepend
owner, name
onclick, onmousedown, onmouseup
setState
broadcastMessage, destroyControls, getControls, indexOfControl, resized
addContent, getOffset, isDescendantOf
hide, render, renderInto, rendered, show
addClass, addRemoveClass, addStyles, applyStyle, getClassName, hasClass, hasNode, removeClass, setAttribute, setClassName, setStyle
create, createComponent, createComponents, destroy, destroyComponents, getComponents
error, log, warn
base/controls/Button.js
The button control displays a themed button with a caption. If you need to display a button with custom visual treatment, use a custom button. Initialize a button as follows:
{kind: "Button", caption: "OK", onclick: "buttonClick"}
caption, disabled, isDefault, down, depressed, hot, toggling, allowDrag
cssNamespace
layoutKind
className, container, parent
allowHtml, content
showing, prepend
owner, name
onclick, onmousedown, onmouseup
setState
broadcastMessage, destroyControls, getControls, indexOfControl, resized
addContent, getOffset, isDescendantOf
hide, render, renderInto, rendered, show
addClass, addRemoveClass, addStyles, applyStyle, getClassName, hasClass, hasNode, removeClass, setAttribute, setClassName, setStyle
create, createComponent, createComponents, destroy, destroyComponents, getComponents
error, log, warn
base/controls/AjaxContent.js
A control that displays HTML loaded via an AJAX call to a remote url. Using an AjaxContent is a convenient way to specify a large amount of HTML.
Content is loaded asynchronously, and the onContentChanged event is fired when content is received.
{kind: "AjaxContent", url: "www.example.com/someText.html", onContentChanged: "ajaxContentChanged"}
To modify the value of the loaded content, implement the onContentChanged event and alter the value of the content property as follows:
ajaxContentChanged: function(inSender) {
// change content to be all uppercase
inSender.content = inSender.content.toUpperCase();
}
url: "" onContentChanged: "" layoutKind
className, container, parent
allowHtml, content
showing, prepend
owner, name
onclick, onmousedown, onmouseup
broadcastMessage, destroyControls, getControls, indexOfControl, resized
addContent, getOffset, isDescendantOf
hide, render, renderInto, rendered, show
addClass, addRemoveClass, addStyles, applyStyle, getClassName, hasClass, hasNode, removeClass, setAttribute, setClassName, setStyle
create, createComponent, createComponents, destroy, destroyComponents, getComponents
error, log, warn
base/controls/HtmlContent.js
A control that displays HTML content defined in a web page's HTML source. Using an HtmlContent is a convenient way to specify a large amount of HTML.
The content property of a control can be used to specify HTML content, but it's not desirable to place a large amount of content in a components block:
{content: "This is some short text"}
Instead, use an HtmlContent. In an application's index.html file:
<body>
<div id="myContent">This could be a large chunk of HTML.</div>
</body>
Then, in a kind's components block:
{kind: "HtmlContent", srcId: "myContent", onLinkClick: "htmlContentLinkClick"}
Note: Remember that in web page parsing, elements in the page defined after a <script> element aren't accessible to the script, as they've not yet been parsed and added to the DOM. So you should define those <div> elements in your body before your script tag is run to create the application objects.
HtmlContent provides special handling for links. Instead of navigating to the web page specified in a link when it is clicked, an onLinkClick event is generated. The second event argument is the URL of the link:
htmlContentLinkClick: function(inSender, inUrl) {
// do something when the link is clicked.
this.$.webView.setUrl(inUrl);
}
srcId: ""
optional ID of an element in the page from which to pull HTML content. If not set, this acts like an enyo.Control which has its allowHtml property set to true.
onLinkClick: ""
Event sent when a link inside the HtmlContent is clicked
layoutKind
className, container, parent
allowHtml, content
showing, prepend
owner, name
onclick, onmousedown, onmouseup
broadcastMessage, destroyControls, getControls, indexOfControl, resized
addContent, getOffset, isDescendantOf
hide, render, renderInto, rendered, show
addClass, addRemoveClass, addStyles, applyStyle, getClassName, hasClass, hasNode, removeClass, setAttribute, setClassName, setStyle
create, createComponent, createComponents, destroy, destroyComponents, getComponents
error, log, warn
base/controls/BasicInput.js
A text input primitive with default visual treatment. For example:
{kind: "BasicInput", value: "hello", onchange: "inputChange", onfocus: "inputFocus"}
The value property specifies the text displayed in the input. Note: the value property does not update as a user types. Instead, when the input blurs (loses focus), the value property updates and the onchange event is fired.
It is common to use getValue and setValue to get and set the value of an input; for example, to set the value of one input to that of another:
buttonClick: function() {
var x = this.$.input1.getValue();
this.$.input2.setValue(x);
}
value: "" disabled: false readonly: false placeholder: "" placeholderClassName: "" disabledClassName: "enyo-input-disabled" tabIndex: "" onfocus: "" onblur: "" onchange: "" onkeypress: "" forceBlur: function(inCallback, inSync Forces this input to be blurred (lose focus).
forceFocus: function(inCallback, inSync Forces the input to receive keyboard focus.
forceSelect: function(inCallback, inSync Forces selection of all text in this input.
layoutKind
className, container, parent
allowHtml, content
showing, prepend
owner, name
onclick, onmousedown, onmouseup
broadcastMessage, destroyControls, getControls, indexOfControl, resized
addContent, getOffset, isDescendantOf
hide, render, renderInto, rendered, show
addClass, addRemoveClass, addStyles, applyStyle, getClassName, hasClass, hasNode, removeClass, setAttribute, setClassName, setStyle
create, createComponent, createComponents, destroy, destroyComponents, getComponents
error, log, warn
base/controls/Input.js
A text input control that supports auto-correction and hint text, and has default visual styling. To create an Input:
{kind: "Input", hint: "type something here", onchange: "inputChange"}
The value property specifies the text displayed in the input. The onchange event fires only when the input blurs (loses focus). Listen for the oninput event to get notified as the input content changes.
It is common to use getValue and setValue to get and set the value of an input; for example, to set the value of one input to that of another:
buttonClick: function() {
var x = this.$.input1.getValue();
this.$.input2.setValue(x);
}
Note: To properly style an Input in a group, use a RowGroup, like so:
{kind: "RowGroup", components: [
{kind: "Input"},
{kind: "Input"},
{kind: "Input"}
]}
hint: enyo._$L("Tap Here To Type") value: "" tabIndex: "" spellcheck: true autocorrect: true autoKeyModifier: ""
Possible settings: "num-lock", "caps-lock", "shift-lock", "shift-single", "num-single"
autoCapitalize: "sentence"
Possible settings: "sentence", "title", "lowercase" (actual attribute is cap +)
autoEmoticons: false Set to true to enable auto-emoticons support.
autoLinking: false Set to true to enable auto-linking support.
autoWordComplete: true Set to false to disable automatic word completion.
inputType: ""
Specifies the 'type' attribute on the input field. On webOS, this modifies the virtual keyboard layout. Supported values are "email" and "url".
inputClassName: ""
CSS class to apply to the inner input control
focusClassName: "enyo-input-focus"
CSS class to apply on focus
spacingClassName: "enyo-input-spacing"
CSS class to apply to inner controls to control spacing
alwaysLooksFocused: false
Set to true to make the input look focused when it's not.
selection: null
The selection property is an object describing selected text. The start and end properties specify the zero-based starting and ending indexes of the selection. For example, if an input value is "Value" and getSelection returns {start: 1, end: 3}, then "al" is selected. To select "alu," call:
this.$.input.setSelection({start: 1, end: 4});
disabled: false changeOnInput: false
Set to true to fire the onchange event as well as the oninput event whenever the input content is changed.
keypressInputDelay: 0
Set to the number of milliseconds to delay the input event when a key is pressed. If another key is pressed within the delay interval, the input will be postponed and fired once only after the delay has elapsed without a key being pressed.
styled: true
Set to false to avoid any default styling from being applied.
selectAllOnFocus: false
Set to true to select all text when the input gains focus.
onfocus: "" onblur: "" onchange: "" oninput: "" onmousedown: "" onmouseup: "" onkeypress: ""
The onkeypress event can be used to filter out disallowed characters.
forceBlur: function(inCallback, inSync Forces this input to be blurred (lose focus).
forceFocus: function(inCallback, inSync Forces this input to be focused.
forceFocusEnableKeyboard: function(Forces this input to be focused and sets the keyboard to automatic mode.
forceSelect: function(inCallback, inSync Forces selection of all text in this input.
hasFocus: function(Returns true if the input has keyboard focus.
isEmpty: function(layoutKind
className, container, parent
allowHtml, content
showing, prepend
owner, name
onclick, onmousedown, onmouseup
broadcastMessage, destroyControls, getControls, indexOfControl, resized
addContent, getOffset, isDescendantOf
hide, render, renderInto, rendered, show
addClass, addRemoveClass, addStyles, applyStyle, getClassName, hasClass, hasNode, removeClass, setAttribute, setClassName, setStyle
create, createComponent, createComponents, destroy, destroyComponents, getComponents
error, log, warn
base/controls/InputBox.js
A box styled like an input control. Use to arrange a set of controls adjacent to an input with all of the controls appearing to be inside the input. Note that by default, InputBox has a layoutKind of HFLexLayout.
For example, to place controls to the left and right of an input:
{kind: "InputBox", components: [
{content: "Foo"},
{kind: "BasicRichText", flex: 1, className: "enyo-input-inner"},
{content: "Bar"}
]}
alwaysLooksFocused: false focusClassName: "enyo-input-focus" spacingClassName: "enyo-input-spacing" onfocus: "" onblur: "" alwaysLooksFocusedChanged: function(blurHandler: function(inSender, inEvent create: function(focusHandler: function(inSender, inEvent layoutKindChanged: function(spacingClassNameChanged: function(inOldValue layoutKind
className, container, parent
allowHtml, content
showing, prepend
owner, name
onclick, onmousedown, onmouseup
broadcastMessage, destroyControls, getControls, indexOfControl, resized
addContent, getOffset, isDescendantOf
hide, render, renderInto, rendered, show
addClass, addRemoveClass, addStyles, applyStyle, getClassName, hasClass, hasNode, removeClass, setAttribute, setClassName, setStyle
create, createComponent, createComponents, destroy, destroyComponents, getComponents
error, log, warn
base/controls/BasicRichText.js
A multi-line text input that supports rich formatting such as bold, italics, and underlining. Note that rich formatting can be disabled by setting the richContent property to false.
Use the value property to get or set the displayed text. The onchange event fires when the control blurs (loses focus).
Create a BasicRichText as follows:
{kind: "BasicRichText", value: "To <b>boldly</b> go..", onchange: "richTextChange"}
richContent: true getHtml: function(value, disabled, readonly, placeholder, placeholderClassName, disabledClassName, tabIndex
layoutKind
className, container, parent
allowHtml, content
showing, prepend
owner, name
onfocus, onblur, onchange, onkeypress
onclick, onmousedown, onmouseup
forceBlur, forceFocus, forceSelect
broadcastMessage, destroyControls, getControls, indexOfControl, resized
addContent, getOffset, isDescendantOf
hide, render, renderInto, rendered, show
addClass, addRemoveClass, addStyles, applyStyle, getClassName, hasClass, hasNode, removeClass, setAttribute, setClassName, setStyle
create, createComponent, createComponents, destroy, destroyComponents, getComponents
error, log, warn
base/controls/RichText.js
A multi-line text input that supports rich formatting such as bold, italics, and underlining. Note that rich formatting can be disabled by setting the richContent property to false.
Use the value property to get or set the displayed text. The onchange event fires when the control blurs (loses focus).
Create a RichText as follows:
{kind: "RichText", value: "To <b>boldly</b> go..", onchange: "richTextChange"}
A styled rich text control.
See <a href="#enyo.RichText">enyo.RichText</a> for more information.
richContent: true maxTextHeight: null selection: null
The selection property is a DOM Selection object describing the selected text. It cannot be set. Instead, the selection can be altered by manipulating the object directly via the DOM Selection object API. For example, this.$.richText.getSelection().collapseToEnd();
onchange: "" hint, value, tabIndex, spellcheck, autocorrect, autoKeyModifier, autoCapitalize, autoEmoticons, autoLinking, autoWordComplete, inputType, inputClassName, focusClassName, spacingClassName, alwaysLooksFocused, selection, disabled, changeOnInput, keypressInputDelay, styled, selectAllOnFocus
layoutKind
className, container, parent
allowHtml, content
showing, prepend
owner, name
onfocus, onblur, onchange, oninput, onmousedown, onmouseup, onkeypress
onclick, onmousedown, onmouseup
forceBlur, forceFocus, forceFocusEnableKeyboard, forceSelect, hasFocus, isEmpty
broadcastMessage, destroyControls, getControls, indexOfControl, resized
addContent, getOffset, isDescendantOf
hide, render, renderInto, rendered, show
addClass, addRemoveClass, addStyles, applyStyle, getClassName, hasClass, hasNode, removeClass, setAttribute, setClassName, setStyle
create, createComponent, createComponents, destroy, destroyComponents, getComponents
error, log, warn
base/controls/AnimatedImage.js
A control that animates based on its CSS background image. The className property should refer to a valid CSS class that defines a background image.
The background image should be constructed so that it contains a series of animation frames stacked vertically. The imageHeight property should be set to the height of an animation frame, and imageCount should be set to the number of frames.
The tick property changes animation speed by controlling the number of milliseconds between frames. Use the repeat property to set the number of times the animation should repeat. The default value of 0 indicates that the animation should repeat indefinitely.
Here's an example:
{kind: "AnimatedImage", className: "snoopyAnimation", imageHeight: "200", imageCount: "10"}
Call the start method to start the animation and the stop method to stop it:
startButtonClick: function() {
this.$.animatedImage.start();
},
stopButtonClick: function() {
this.$.animatedImage.stop();
}
imageCount: 0 imageHeight: 32 repeat: -1 easingFunc: enyo.easing.linear start: function(stop: function(layoutKind
className, container, parent
allowHtml, content
showing, prepend
owner, name
onclick, onmousedown, onmouseup
broadcastMessage, destroyControls, getControls, indexOfControl, resized
addContent, getOffset, isDescendantOf
hide, render, renderInto, rendered, show
addClass, addRemoveClass, addStyles, applyStyle, getClassName, hasClass, hasNode, removeClass, setAttribute, setClassName, setStyle
create, createComponent, createComponents, destroy, destroyComponents, getComponents
error, log, warn
base/controls/Iframe.js
An iframe control loads inline a web page specified by its url property.
{kind: "IFrame", url: "www.example.com"}
Note that when the user interacts with the page loaded in the iframe and navigates to a different web page, the value of the url property does not update. To retrieve the currently loaded page, call fetchCurrentUrl. To reload the page specified by the url property, call refresh.
For example, to reload the page corresponding to the url property if it's not the currently displayed URL:
buttonClick: function() {
if (this.$.iframe.getUrl() != this.$.iframe.fetchCurrentUrl()) {
this.$.iframe.refresh();
}
}
url: ""
URL of the web page to load in the iframe.
tabIndex: null fetchCurrentUrl: function(Returns the URL of the loaded page. This URL is not necessarily the same as the value of the url property because the value of this.url is not updated when a user navigates to a different URL by interacting with the loaded page.
goBack: function(Navigates to the previous web page in the history list.
goForward: function(Navigates to the next web page in the history list.
refresh: function(Reloads the page specified by the value of the url property. Note that this is not necessarily the same as the currently displayed URL because the url property does not update when the user interacts with the loaded page.
layoutKind
className, container, parent
allowHtml, content
showing, prepend
owner, name
onclick, onmousedown, onmouseup
broadcastMessage, destroyControls, getControls, indexOfControl, resized
addContent, getOffset, isDescendantOf
hide, render, renderInto, rendered, show
addClass, addRemoveClass, addStyles, applyStyle, getClassName, hasClass, hasNode, removeClass, setAttribute, setClassName, setStyle
create, createComponent, createComponents, destroy, destroyComponents, getComponents
error, log, warn
base/controls/PopupLayer.js
create: function(getChildContent: function(hasNode: function(render: function(rendered: function(teardownChildren: function(layoutKind
className, container, parent
allowHtml, content
showing, prepend
owner, name
onclick, onmousedown, onmouseup
broadcastMessage, destroyControls, getControls, indexOfControl, resized
addContent, getOffset, isDescendantOf
hide, render, renderInto, rendered, show
addClass, addRemoveClass, addStyles, applyStyle, getClassName, hasClass, hasNode, removeClass, setAttribute, setClassName, setStyle
create, createComponent, createComponents, destroy, destroyComponents, getComponents
error, log, warn
enyo.getPopupLayer: function(base/controls/BasicPopup.js
Base kind for popup controls. Generally not for direct use.
modal: false dismissWithClick: true dismissWithEscape: true shareScrim: true scrimWhenModal: true scrim: false scrimClassName: "" autoClose: false
Close automatically if the application is minimized. Note that the popup will also close automatically in this case if dismissWithClick is true.
onBeforeOpen: "" Event fired right before the popup is opened. If the popup's contained components are created lazily, they will be ready at this time. By handling this event, it's possible to affect popup contents before the popup is displayed.
inFirstOpen {Boolean} Flag indicating if this is the first time the popup has opened.
onOpen: "" Event fired after the popup has been opened.
onClose: "" Event fired after the popup is closed.
inEvent {Event} (optional) event that triggered the close. inReason {String} (optional) reason the popup was closed.
close: function(inEvent, inReason Closes the popup. The inReason argument describes why the popup was closed. Any control inside a popup that has a popupHandler property will close the popup when clicked and will pass the value of popupHandler as the reason the popup was closed. In addition, the popup can be closed automatically in some cases and will pass a message of the form "popup:reason" in this case. For example, when a popup is open and is destroyed, it is closed with the reason "popup:destroyed."
inEvent {Event} Event that triggered the close. inReason {String} Reason that this popup closed.
open: function(Opens the popup in its current position.
toggleOpen: function(If the popup is open, closes it; otherwise, opens it.
layoutKind
className, container, parent
allowHtml, content
showing, prepend
owner, name
onclick, onmousedown, onmouseup
componentsReady, initComponents, validateComponents
broadcastMessage, destroyControls, getControls, indexOfControl, resized
addContent, getOffset, isDescendantOf
hide, render, renderInto, rendered, show
addClass, addRemoveClass, addStyles, applyStyle, getClassName, hasClass, hasNode, removeClass, setAttribute, setClassName, setStyle
create, createComponent, createComponents, destroy, destroyComponents, getComponents
error, log, warn
base/controls/Popup.js
A popup is just floating elements embedded directly within the page context. It can popup/open at a specified position, and has support for modality and click to dismiss/close.
{kind: "Popup", components: [
{content: "Hello World!"},
{kind: "ListSelector", value: "Foo", items: ["Foo", "Bar", "Bot"]}
]}
To open the popup at the center:
openPopup: function() {
this.$.popup.openAtCenter();
}
If dismissWithClick is set to true (default) and modal is false (default), then clicking anywhere not inside the popup will dismiss/close the popup. Also, you can close the popup programmatically by doing this:
closePopup: function() {
this.$.popup.close();
}
showHideMode: "auto"
Controls how the popup will be shown and hidden:
auto: when open and close are called, the popup will be shown and hidden
manual: will not be shown or hidden; use this mode when controlling popup via custom animation
transition: will be shown when opened and hidden when a css transition completes; use this
mode when animating via css transitions.
openClassName: ""
CSS class that will be applied when the popup is open
showKeyboardWhenOpening: false
If true, shows the keyboard before opening the popup. Manual keyboard mode is enabled when the popup is opened and must be restored for the keyboard to work automatically. It is most common to use this option when an Input should be focused when the keyboard is shown. In this case, implement an onOpen handler for the popup and focus the input using the method forceFocusEnableKeyboard, e.g., this.$.input.forceFocusEnableKeyboard();
openAroundControl: function(inControl, inAlwaysBelow, inAlign Opens at the bottom, right of the specified control.
openAt: function(inRect, inReposition Opens at the location specified by a location relative to the viewport.
inRect {Object} rectangle specifying where to open the popup. May contain left, top or right, bottom properties. If both are specified left,top is used.
openAtCenter: function(Opens in the center of the viewport.
openAtControl: function(inControl, inOffset Opens at the location of the specified control. If there is space, the popup's top, left corner will be displayed at the top, left position of the control. Otherwise, the popup's bottom, right will be displayed at the bottom, right of the control.
inControl {Control} Control at whose location the popup will open.
inOffset {Object} Object that may contain left and top properties to specify an offset relative to the location the popup would otherwise be positioned.
openAtEvent: function(inEvent, inOffset Opens at the location of a mouse event (inEvent). The popup's position is automatically constrained so that it does not display outside the viewport.
inEvent {Object} Dom mouse event object at the position of which, popup will open
inOffset {Object} Object that may contain left and top properties to specify an offset relative to the location the popup would otherwise be positioned.
openNear: function(inDimensions, inAround, inAlwaysBelow modal, dismissWithClick, dismissWithEscape, shareScrim, scrimWhenModal, scrim, scrimClassName, autoClose
layoutKind
className, container, parent
allowHtml, content
showing, prepend
owner, name
onBeforeOpen, onOpen, onClose
onclick, onmousedown, onmouseup
close, open, toggleOpen
componentsReady, initComponents, validateComponents
broadcastMessage, destroyControls, getControls, indexOfControl, resized
addContent, getOffset, isDescendantOf
hide, render, renderInto, rendered, show
addClass, addRemoveClass, addStyles, applyStyle, getClassName, hasClass, hasNode, removeClass, setAttribute, setClassName, setStyle
create, createComponent, createComponents, destroy, destroyComponents, getComponents
error, log, warn
base/controls/Scrim.js
A scrim is used to temporarily disable an application's user interface. It covers the screen with a translucent layer.
It's possible to create a scrim in a components block, but this usage is not common. Typically, a scrim is shown using enyo.scrim.show().
To show a scrim for 5 seconds:
buttonClick: function() {
enyo.scrim.show();
setTimeout(enyo.scrim.hide, 5000);
}
To show a scrim while a service is in flight:
components: [
{kind: "PalmService", onResponse: "serviceResponse"},
{kind: "Button", caption: "Call Service", onclick: "buttonClick"}
],
buttonClick: function() {
this.$.service.call();
enyo.scrim.show();
},
serviceResponse: function() {
enyo.scrim.hide();
}
To show a scrim and then hide it when the user clicks on it:
components: [
{kind: "Button", caption: "Show scrim", onclick: "buttonClick"},
{kind: "Scrim", onclick: "scrimClick"}
],
buttonClick: function() {
this.$.scrim.show();
},
scrimClick: function() {
this.$.scrim.hide();
}
addRemoveShowingClassName: function(inAdd Adds or removes the specified class.
hideAtZIndex: function(inZIndex Hides scrim at the specified ZIndex.
setZIndex: function(inZIndex Sets scrim to show at the specified ZIndex.
showAtZIndex: function(inZIndex Shows scrim at the specified ZIndex.
layoutKind
className, container, parent
allowHtml, content
showing, prepend
owner, name
onclick, onmousedown, onmouseup
broadcastMessage, destroyControls, getControls, indexOfControl, resized
addContent, getOffset, isDescendantOf
hide, render, renderInto, rendered, show
addClass, addRemoveClass, addStyles, applyStyle, getClassName, hasClass, hasNode, removeClass, setAttribute, setClassName, setStyle
create, createComponent, createComponents, destroy, destroyComponents, getComponents
error, log, warn
base/controls/LabeledContainer.js
A simple container with a label specified by the label property. By default, layoutKind is set to HFlexBox, and thus the label is displayed to the left of the container's content. Change layoutKind to VFlexBox to place the label above the content. The label will fill any space not taken up by the content.
NOTE: If additional control over the styling of the label or container content is required, use separate controls instead of a LabeledContainer.
{kind: "LabeledContainer", label: "3 buttons", components: [
{kind: "Button", caption: "1"},
{kind: "Button", caption: "2"},
{kind: "Button", caption: "3"}
]}
label: "" layoutKind
className, container, parent
allowHtml, content
showing, prepend
owner, name
onclick, onmousedown, onmouseup
broadcastMessage, destroyControls, getControls, indexOfControl, resized
addContent, getOffset, isDescendantOf
hide, render, renderInto, rendered, show
addClass, addRemoveClass, addStyles, applyStyle, getClassName, hasClass, hasNode, removeClass, setAttribute, setClassName, setStyle
create, createComponent, createComponents, destroy, destroyComponents, getComponents
error, log, warn
base/controls/Progress.js
A virtual base class for anything with a range and position within that range, like a ProgressBar or Slider.
To set the progress, do this:
madeProgress: function(inValue) {
this.$.progress.setPosition(inValue);
}
The default range is 0-100, but it can be customized like so:
{kind: "Progress", minimum: 50, maximum: 220, position: 70}
This will make a progress with a range of 50-220 and an initial position of 70.
maximum: 100 The maximum value of the range.
minimum: 0 The minimum value of the range.
position: 0 The current progress.
snap: 1 The position will be rounded to a multiple of this property.
layoutKind
className, container, parent
allowHtml, content
showing, prepend
owner, name
onclick, onmousedown, onmouseup
broadcastMessage, destroyControls, getControls, indexOfControl, resized
addContent, getOffset, isDescendantOf
hide, render, renderInto, rendered, show
addClass, addRemoveClass, addStyles, applyStyle, getClassName, hasClass, hasNode, removeClass, setAttribute, setClassName, setStyle
create, createComponent, createComponents, destroy, destroyComponents, getComponents
error, log, warn
base/containers/Box.js
layoutKind
className, container, parent
allowHtml, content
showing, prepend
owner, name
onclick, onmousedown, onmouseup
broadcastMessage, destroyControls, getControls, indexOfControl, resized
addContent, getOffset, isDescendantOf
hide, render, renderInto, rendered, show
addClass, addRemoveClass, addStyles, applyStyle, getClassName, hasClass, hasNode, removeClass, setAttribute, setClassName, setStyle
create, createComponent, createComponents, destroy, destroyComponents, getComponents
error, log, warn
layoutKind
className, container, parent
allowHtml, content
showing, prepend
owner, name
onclick, onmousedown, onmouseup
broadcastMessage, destroyControls, getControls, indexOfControl, resized
addContent, getOffset, isDescendantOf
hide, render, renderInto, rendered, show
addClass, addRemoveClass, addStyles, applyStyle, getClassName, hasClass, hasNode, removeClass, setAttribute, setClassName, setStyle
create, createComponent, createComponents, destroy, destroyComponents, getComponents
error, log, warn
layoutKind
className, container, parent
allowHtml, content
showing, prepend
owner, name
onclick, onmousedown, onmouseup
broadcastMessage, destroyControls, getControls, indexOfControl, resized
addContent, getOffset, isDescendantOf
hide, render, renderInto, rendered, show
addClass, addRemoveClass, addStyles, applyStyle, getClassName, hasClass, hasNode, removeClass, setAttribute, setClassName, setStyle
create, createComponent, createComponents, destroy, destroyComponents, getComponents
error, log, warn
base/containers/BasicDrawer.js
A basic drawer control that animates vertically to open and close. The drawer may be opened by calling setOpen(true) or just open; it may be closed by calling setOpen(false) or just close. For example,
{kind: "Drawer", components: [
{content: "Now you see me now you don't"},
{kind: "Button", caption: "Close drawer", onclick: "closeDrawer"}
]}
Then, to close the drawer:
closeDrawer: function(inSender) {
this.$.drawer.close();
}
open: true Specifies whether the drawer should be open.
canChangeOpen: true Controls whether or not the value of the open property may be changed.
animate: true Set to false to avoid animations when the open state of a drawer changes.
onOpenChanged: "" Event that fires when a drawer opens or closes.
onOpenAnimationComplete: "" Event that fires when a drawer animation completes.
layoutKind
className, container, parent
allowHtml, content
showing, prepend
owner, name
onclick, onmousedown, onmouseup
broadcastMessage, destroyControls, getControls, indexOfControl, resized
addContent, getOffset, isDescendantOf
hide, render, renderInto, rendered, show
addClass, addRemoveClass, addStyles, applyStyle, getClassName, hasClass, hasNode, removeClass, setAttribute, setClassName, setStyle
create, createComponent, createComponents, destroy, destroyComponents, getComponents
error, log, warn
base/containers/Drawer.js
A drawer control with a label, which animates vertically to open and close. The drawer may be opened by calling setOpen(true) or just open; it may be closed by calling setOpen(false) or just close. For example,
{kind: "Drawer", caption: "Drawer", components: [
{content: "Now you see me now you don't"},
{kind: "Button", caption: "Close drawer", onclick: "closeDrawer"}
]}
Then, to close the drawer:
closeDrawer: function(inSender) {
this.$.drawer.close();
}
open: true Specifies whether the drawer should be open.
canChangeOpen: true Controls whether or not the value of the open property may be changed.
animate: true Set to false to avoid animations when the open state of a drawer changes.
captionClassName: "" CSS class to apply to the drawer caption.
caption: "" Caption to display above drawer content.
onOpenChanged: "" Event that fires when a drawer opens or closes.
onOpenAnimationComplete: "" Event that fires when a drawer animation completes.
close: function(Convenience method to close a drawer; equivalent to setOpen(false).
open: function(Convenience method to open a drawer; equivalent to setOpen(true).
toggleOpen: function(Toggles the open state of the drawer.
layoutKind
className, container, parent
allowHtml, content
showing, prepend
owner, name
onclick, onmousedown, onmouseup
broadcastMessage, destroyControls, getControls, indexOfControl, resized
addContent, getOffset, isDescendantOf
hide, render, renderInto, rendered, show
addClass, addRemoveClass, addStyles, applyStyle, getClassName, hasClass, hasNode, removeClass, setAttribute, setClassName, setStyle
create, createComponent, createComponents, destroy, destroyComponents, getComponents
error, log, warn
base/containers/Pane.js
Pane is designed to host a set of view controls and show one view at a time. Any view may be selected and shown as needed. When a view is selected, it animates into display based on the type of transition specified in the transitionKind property. By default, views fade in. To specify a Pane with views that fly in, try:
{kind: "Pane", transitionKind: "enyo.transitions.LeftRightFlyin", components: [
{kind: "mainView"},
{kind: "otherView"}
]}
While a view may be any kind of control, views are typically complex collections of controls. Therefore it's often convenient to create kinds for each view, as in the example above. Also note that each view will be sized to fit the dimensions of the pane.
By default, the first view is selected (displayed). There are several ways to select views; use whichever method is most convenient for the application. For example, to select a view by reference:
this.$.pane.selectView(this.$.otherView);
To select a view by name:
this.$.pane.selectViewByName("otherView");
To select by index:
this.$.pane.selectViewByIndex(1);
Pane also maintains a history list of views that have been selected. This list may be navigated using the back and next methods.
Frequently, an application will need to retrieve information about the currently selected view. A pane's view property references the currently selected view. The getViewName and getViewIndex methods return the name and index of the selected view, respectively.
The onSelectView event fires whenever the selected view changes. For example:
{kind: "Pane", onSelectView: "viewSelected", components: [
{kind: "mainView"},
{kind: "searchView"}
]}
In the following example, we stop search processing when the search view is hidden:
viewSelected: function(inSender, inView, inPreviousView) {
if (inPreviousView.name == "searchView") {
this.cancelSearch();
}
}
Pane also supports a performance-enhancing optimization that can defer the creation of views until they are selected. To enable this optimization, mark individual views with the lazy property set to true:
{kind: "Pane", components: [
{kind: "mainView"},
{kind: "otherView", lazy: true}
]}
You must use selectViewByName to select a view that has not yet been created:
this.$.pane.selectViewByName("otherView");
It's also possible to verify that a lazy marked view has been created without selecting it, by calling validateView(inName);
transitionKind: "enyo.transitions.Fade" onSelectView: "" Event that fires whenever a view is selected. The event contains the current view and previous view. For example:
viewSelected: function(inSender, inView, inPreviousView) {
inView.startProcessing();
inPreviousView.endProcessing();
}
onCreateView: "" Event that fires when a view is selected by name but does not exist in either the view list or the set of lazy marked views. Handle this event to dynamically create the view. The event contains the requested view name. For example:
paneCreateView: function(inSender, inName) {
if (inName == "searchView") {
this.$.pane.createComponent({kind: "searchView", owner: this});
}
}
back: function(e Pane maintains a history of selected views in the history property. The back method selects the previous view in the history.
getView: function(Returns the currently selected view.
getViewIndex: function(Returns the index of the currently selected view.
getViewName: function(Returns the name of the currently selected view.
next: function(Pane maintains a history of selected views in the history property. The next method selects the next view in the history. This method is typically called in conjunction with back.
selectView: function(inView, inSync Selects the view specified by the inView reference. Fires the onSelectView event. Set inSync to true to ensure that the view is selected sychronously.
selectViewByIndex: function(inIndex, inSync Selects the view with the index inIndex. Fires the onSelectView event. Set inSync to true to ensure that the view is selected sychronously.
selectViewByName: function(inName, inSync Selects the view with the name inName. Fires the onSelectView event. Set inSync to true to ensure that the view is selected sychronously.
validateView: function(inName Checks whether the view specified by inName exists. If it does not exist, attempts to create the view by name from the list of lazy marked views. If the view is not found, fires the onCreateView event, which can be implemented to dynamically create a view by name.
layoutKind
className, container, parent
allowHtml, content
showing, prepend
owner, name
onclick, onmousedown, onmouseup
broadcastMessage, destroyControls, getControls, indexOfControl, resized
addContent, getOffset, isDescendantOf
hide, render, renderInto, rendered, show
addClass, addRemoveClass, addStyles, applyStyle, getClassName, hasClass, hasNode, removeClass, setAttribute, setClassName, setStyle
create, createComponent, createComponents, destroy, destroyComponents, getComponents
error, log, warn
base/containers/PaneLayout.js
The layoutKind for a Pane.
base/containers/Transitions.js
A transition between two controls with no delay and no effect.
owner, name
create, createComponent, createComponents, destroy, destroyComponents, getComponents
error, log, warn
A transition between two controls that animates the new control sliding in from the right or left.
owner, name
create, createComponent, createComponents, destroy, destroyComponents, getComponents
error, log, warn
A transition between two controls that animates a fade between them.
owner, name
create, createComponent, createComponents, destroy, destroyComponents, getComponents
error, log, warn
base/containers/FloatingHeader.js
A header that floats over the content at the top of its parent. Specify header content using a components block or the content property.
{kind: "FloatingHeader", content: "Page Header"}
or
{kind: "FloatingHeader", layoutKind: "HFlexLayout", components: [
{content: "Header", flex: 1},
{kind: "Button", caption: "Go"}
]}
layoutKind
className, container, parent
allowHtml, content
showing, prepend
owner, name
onclick, onmousedown, onmouseup
broadcastMessage, destroyControls, getControls, indexOfControl, resized
addContent, getOffset, isDescendantOf
hide, render, renderInto, rendered, show
addClass, addRemoveClass, addStyles, applyStyle, getClassName, hasClass, hasNode, removeClass, setAttribute, setClassName, setStyle
create, createComponent, createComponents, destroy, destroyComponents, getComponents
error, log, warn
base/services/BasicService.js
An enyo.BasicService manages interaction with a process whose response is available asynchronously. When the process is complete, the onResponse event, containing the service response, fires. If the response was successful, the onSuccess event fires; if not, the onFailure event fires.
To initiate the service, call the request method. Any properties relevant to the request should be passed in the inProps object. Note that a BasicService makes no assumptions about the actual asynchronous process. Instead, the request method creates an enyo.Request component, which manages the service request. A service may specify a requestKind, which is the kind for the request component. For example:
{kind: "Service", onResponse: "serviceResponse"}
To initiate this service, do the following:
buttonClick: function() {
this.$.service.request({index: 27, message: ""});
},
serviceResponse: function(inSender, inResponse, inRequest) {
// process response
}
service: "" The name of the service. This information is delegated to the Request component.
timeout: 0 The timeout, specified in milliseconds, after which the service should return a failure condition. If a request times out, the request object will have its didTimeout property set to true. A zero value indicates that no timeout will be checked.
onSuccess: ""
(inSender, inResponse, inRequest) Event sent when request returns as successful
onFailure: ""
(inSender, inResponse, inRequest) Event sent when request returns as failure
onResponse: ""
(inSender, inResponse, inRequest) Event sent always when request returns, whether successful or not
cancel: function(Cancels all requests.
request: function(inProps Returns a new service Request component.
owner, name
create, createComponent, createComponents, destroy, destroyComponents, getComponents
error, log, warn
An enyo.Request component is an abstract kind that manages a single asynchronous process. Request components are typically customized to perform specific tasks, like making an AJAX call.
Request components are not typically created on their own. Instead, they are made by an enyo.Service.
The call method should be implemented to initiate the request processing. The receive method should be called with the response. For example, the following simply calls the receive method with some dummy data:
call: function() {
var dummyRequest = enyo.bind(this, "receive", {result: "ok"});
setTimeout(dummyRequest, 100);
}
onRequestSuccess: "responseSuccess" onRequestFailure: "responseFailure" onRequestResponse: "response" call: function(Initiates the request.
isFailure: function(inResponse Called to determine if the response was a failure; usually overridden by specific Request types.
receive: function(inResponse Processes the request's response.
owner, name
create, createComponent, createComponents, destroy, destroyComponents, getComponents
error, log, warn
base/services/Service.js
An enyo.Service manages interaction with a process whose response is available asynchronously. See enyo.BasicService for more information.
In addition to the functionality of enyo.BasicService, enyo.Service adds support for making multiple request calls. Use the call method to initiate a service call. The call method takes two arguments. The first, inParams, is the parameters the request should use to make the service request; the second, inProps, can optionally customize the request itself. It's most common to pass event handler delegate names via call.
Here's an example:
{kind: "Service", service: "importantService", onResponse: "genericResponse"}
The service could be called in a variety of ways:
this.$.service.call({index: 5});
In this case, the genericResponse method will be called with the service response.
this.$.service.call({index: 10}, {onResponse: ""});
call: function(inParams, inProps Calls a service.
inParams {Object} Parameters to send to the service.
inProps {Object} (optional) Properties to set on the service call request, can include: onSuccess, onFailure, onResponse, name. You can pass additional properties here that will be visible in the event handlers via the inRequest argument.
cancelCall: function(inName Cancels a specific service call request.
inName {String} Name of the service call to cancel.
service, timeout
owner, name
onSuccess, onFailure, onResponse
cancel, request
create, createComponent, createComponents, destroy, destroyComponents, getComponents
error, log, warn
base/services/MockService.js
method: "" subscribe: false call: function(service, timeout
owner, name
onSuccess, onFailure, onResponse
call, cancelCall
cancel, request
create, createComponent, createComponents, destroy, destroyComponents, getComponents
error, log, warn
base/services/WebService.js
A web service component initiates and processes an AJAX request. This component is an abstraction of the XMLHttpRequest object.
To initialize a web service component:
{name: "getWeather", kind: "WebService",
url: "http://somewebsite.com/weather.json",
onSuccess: "gotWeather",
onFailure: "gotWeatherFailure"}
To initiate the AJAX request:
this.$.getWeather.call({location: "Sunnyvale CA"});
Note: You can set any of the published properties via the setter function (e.g., setUrl()). For example, if you need to change the URL before initiating the AJAX request, you can do this:
this.$.getWeather.setUrl("http://somewebsite.com/Sunnyvale+CA/weather.json");
this.$.getWeather.call();
The params argument of call() can take either a JS object or a string. The JS object form will be converted to an application/x-www-form-urlencoded automatically; use the string form if you need to pass arguments to the server in a different format, but be sure to also set this to your own string. Be sure to also set the contentType property.
(Please see the Published Properties section for a full list of available options.)
All 2xx responses are treated as success, as well as 0 and unknown status. To process the AJAX response:
gotWeather: function(inSender, inResponse, inRequest) {
this.results = inResponse;
}
If the handleAs property is set to "json" (default), the content of the responseText property will automatically be converted into a JavaScript object.
To handle failure:
gotWeatherFailure: function(inSender, inResponse, inRequest) {
console.log("got failure from getWeather");
}
A third parameter, inRequest, is always passed to the event handler
functions. It contains a lot of details about the request, including a
reference to the actual XHR object. For example, status code can be
retrieved via inRequest.xhr.status.
You can obtain HTTP response headers from the XHR object using getResponseHeader. For example, to get Content-Type in the response headers:
inRequest.xhr.getResponseHeader("Content-Type")
The default HTTP method is GET, to make a POST request, set method property to "POST". Here is an example of making a POST request:
{name: "login", kind: "WebService",
url: "http://myserver.com/login",
method: "POST",
onSuccess: "loginSuccess",
onFailure: "loginFailure"}
this.$.login.call({username: "foo", password: "bar"});
WebService requests to fetch local files will fail when using Google Chrome unless you start the browser
with the --allow-file-access-from-files command-line switch.
url: "" The URL for the service. This can be a relative URL if used to fetch resources bundled with the application.
method: "GET"
The HTTP method to use for the request. Defaults to GET. Supported values include "GET", "POST", "PUT", and "DELETE".
handleAs: "json" How the response will be handled.
Supported values are: "json", "text", "xml".
contentType: "application/x-www-form-urlencoded"
The Content-Type header for the request as a String.
sync: false If true, makes a synchronous (blocking) call, if supported. Synchronous requests are not supported on HP webOS.
headers: null Optional additional request headers as a JS object, e.g.,
{ "X-My-Header": "My Value", "Mood": "Happy" }, or null.
username: "" The optional user name to use for authentication purposes.
password: "" The optional password to use for authentication purposes.
service, timeout
owner, name
onSuccess, onFailure, onResponse
call, cancelCall
cancel, request
create, createComponent, createComponents, destroy, destroyComponents, getComponents
error, log, warn
base/media/sound.js
A component that allows you to play sound effects or other audio resources. This component is an abstraction of HTML 5 Audio object.
Initialize a sound component as follows:
{kind: "Sound", src: "http://mydomain.com/media/myfile.mp3"}
To play a sound, do this:
this.$.sound.play();
You can get a reference to the actual HTML 5 Audio object via this.$.sound.audio.
src: ""
URL of the sound file to play. Can be relative to the application's HTML file.
preload: true
If true, loads the sound file when the control is created, trading increased network/memory usage for decreased latency.
audioClass: null
(webOS only) Sound channel through which audio is played. Default channel is "defaultapp", which is used for application sounds. Use "media" for playback of music.
play: function(Plays the sound. If the sound is already playing, playback restarts at the beginning.
owner, name
create, createComponent, createComponents, destroy, destroyComponents, getComponents
error, log, warn
base/media/video.js
A control that allows you to play video. This component is an abstraction of HTML 5 Video.
Initialize a video component as follows:
{kind: "Video", src: "http://www.w3schools.com/html5/movie.mp4"}
To play a video, do this:
this.$.video.play();
You can get a reference to the actual HTML 5 Video element via this.$.video.hasNode().
src: ""
Source URL of the video file. Can be relative to the application's HTML file.
showControls: true
If true, shows controls for starting and stopping video playback.
autoplay: false
If true, video playback starts automatically.
loop: false
If true, when video playback finishes, it restarts from the beginning.
fitToWindow: false
(webOS only) If true, stretches the video to fill the entire window.
pause: function(Pauses (or, if already paused, resumes) video playback.
play: function(Begins (or, if paused, resumes) video playback.
layoutKind
className, container, parent
allowHtml, content
showing, prepend
owner, name
onclick, onmousedown, onmouseup
broadcastMessage, destroyControls, getControls, indexOfControl, resized
addContent, getOffset, isDescendantOf
hide, render, renderInto, rendered, show
addClass, addRemoveClass, addStyles, applyStyle, getClassName, hasClass, hasNode, removeClass, setAttribute, setClassName, setStyle
create, createComponent, createComponents, destroy, destroyComponents, getComponents
error, log, warn
palm/platform/startup.js
enyo.requiresWindow: function(inFunction enyo.hasWindow: function(palm/system/system.js
enyo.setAllowedOrientation: function(inOrientation Sets the allowed orientation.
inOrientation is one of 'up', 'down', 'left', 'right', or 'free'
enyo.getWindowOrientation: function(Returns the actual orientation of the window. One of 'up', 'down', 'left' or 'right'.
enyo.sendOrientationChange: function(enyo.setFullScreen: function(inMode On device, sets the full-screen mode of the window. If true, the system UI around the application is removed and you have access to the full display. Call with false to return to normal mode.
enyo.ready: function(Called by framework to tell webOS system that the UI is ready to display. This causes the transition from card with fading application icon to card with application user interface. Developers will usually not need to call this directly.
enyo.fetchAppId: function(Returns a string with the current application ID, e.g., "com.example.app.myapplication".
enyo.fetchAppRootPath: function(Returns a string with the URL that is the root path of the application.
enyo.fetchAppInfo: function(Returns the contents of the application's appinfo.json as a read-only JS object.
enyo.fetchFrameworkConfig: function(Returns the contents of the application's framework_config.json as a read-only JS object.
enyo.fetchRootFrameworkConfig: function(Returns the contents of the framework's framework_config.json as a read-only JS object.
enyo.fetchDeviceInfo: function(Returns the contents of the system's device information as a JS object. When running on a desktop browser, this will return undefined.
This returned object has these properties:
| bluetoothAvailable | Boolean | True if bluetooth is available on device |
| carrierName | String | Name of carrier |
| coreNaviButton | Boolean | True if physical core navi button available on device |
| keyboardAvailable | Boolean | True if physical keyboard available on device |
| keyboardSlider | Boolean | True if keyboard slider available on device |
| keyboardType | String | Keyboard type, one of 'QWERTY', 'AZERTY', AZERTY_FR', 'QWERTZ', QWERTZ_DE' |
| maximumCardWidth | Integer | Maximum card width in pixels |
| maximumCardHeight | Integer | Maximum card height in pixels |
| minimumCardWidth | Integer | Minimum card width in pixels |
| minimumCardHeight | Integer | Minimum card height in pixels |
| modelName | String | Model name of device in UTF-8 format |
| modelNameAscii | String | Model name of device in ASCII format |
| platformVersion | String | Full OS version string in the form "Major.Minor.Dot.Sub" |
| platformVersionDot | Integer | Subset of OS version string: Dot version number |
| platformVersionMajor | Integer | Subset of OS version string: Major version number |
| platformVersionMinor | Integer | Subset of OS version string: Minor version number |
| screenWidth | Integer | Width in pixels |
| screenHeight | Integer | Height in pixels |
| serialNumber | String | Device serial number |
| wifiAvailable | Boolean | True if WiFi available on device |
palm/system/keyboard.js
A collection of methods to deal with the virtual keyboard on webOS. The virtual keyboard has two modes, the automatic mode (the default), where the keyboard automatically appears when the user puts focus on a text input control, and a manual mode where the keyboard is shown and hidden under program control.
Since the keyboard appears on screen with your application, you can have the default mode where your app window resizes or an alternative mode where the keyboard is a popup over your window. The second mode may be preferred if resizing your UI is an expensive operation, but in that case you'll need to ensure that the user input area isn't positioned under the keyboard.
enyo.keyboard.setResizesWindow: function(inResizesWindow Set the keyboard mode to either resize the application window (default) or to be displayed on top of application content.
enyo.keyboard.setManualMode: function(inManual Set the keyboard to be in manual mode. When in manual mode, the keyboard will not automatically display when an element that can receive keys is focused or blurred. When in manual mode, it's possible to show or hide the keyboard via enyo.keyboard.show and enyo.keyboard.hide.
enyo.keyboard.suspend: function(enyo.keyboard.resume: function(enyo.keyboard.show: function(inType Show the keyboard. Requires that the keyboard is in manual mode; call enyo.keyboard.setManualMode(true) first.
inType {Integer} Indicates the keyboard style to show, values are:
enyo.keyboard.hide: function(Hide the keyboard. Requires that the keyboard is in manual mode; call enyo.keyboard.setManualMode(true) first.
enyo.keyboard.forceShow: function(inType Force the keyboard to show by setting manual keyboard mode and then showing the keyboard. See enyo.keyboard.show for inType values.
enyo.keyboard.forceHide: function(Force the keyboard to hide by setting manual keyboard mode and then hiding the keyboard.
enyo.keyboard.isShowing: function(Returns true if the keyboard is showing.
enyo.keyboard.isManualMode: function(Returns true if the keyboard is in manual mode.
palm/system/windows/windows.js
enyo.windows provides a variety of utility methods for interacting with application windows.
To open a window or activate an existing window, use the enyo.windows.activate. For example,
enyo.windows.activate(undefined, "SearchWindow");
Or, to open the window if it does not exist, add a url (the url may be absolute or relative).
enyo.windows.activate("search/index.html", "SearchWindow");
To facilitate communication between application windows, parameters can be sent. To send parameters to the window to be activated, add a params object:
enyo.windows.activate("search/index.html", "SearchWindow", {query: "oranges"});
Note that the activated window will fire a windowParamsChange event. The window parameters are available in the enyo.windowParams object. For example,
windowParamsChangeHandler: function() {
this.$.searchQueryInput.setValue(enyo.windowParams.query);
}
To send parameters to a window without activating it, use the setWindowParams method. For example,
var searchWindow = enyo.windows.fetchWindow("SearchWindow");
enyo.windows.setWindowParams(searchWindow, {safeSearch: true});
When a window is activated and deactivated by the user or system, corresponding events will fire on any created enyo.ApplicationEvents objects. To respond to activation, provide a listener for its onWindowActivated event; to respond to deactivation, provide a hander for onWindowDeactivated.
{kind: enyo.ApplicationEvents,
onWindowActivated: "wakeup",
onWindowDeactivated: "sleep"},
An application may be launched while it is already running (relaunch). By default, the application is simply brought into focus when this happens. This can occur either when a user launches the running application or a system service does so. In either case, new window params may be sent to the application. An application can customize its response to being relaunched based on this information by implementing a handler for the onApplicationRelaunch event as follows:
{kind: enyo.ApplicationEvents,
onApplicationRelaunch: "relaunchHandler"},
...
relaunchHandler: function(inSender, inEvent) {
if (enyo.windowParams.openSearchWindow = true) {
enyo.windows.activate("search/index.html", "SearchWindow");
return true;
}
},
...
Notice the event handler activates a window and then returns true. The return value indicates the event has been handled and the default action, focusing the root application window, should not occur.
The applicationRelaunch event is always sent to the root window of an application. The root window is, by default, the first window created by the application. That window-level handler passed on the event to the various enyo.ApplicationEvents objects that have been created.
When the application is headless (specifies noWindow: true in the appinfo) the root window is always the headless, non-displayed window. When the application is not headless, the root window may change. This occurs if the user closes the root window. In this case, the root window becomes the next opened window by the application. That window will now receive the applicationRelaunchHandler.
Applications should be careful to consider that on the root window, enyo.windowParams are set by the system. On other windows this object is private to the application. Applications can use the applicationRelaunch to note that enyo.windowParams have been changed by the system.
activate: function(inUrl, inName, inParams, inAttributes, inWindowInfo Activate an application window by name. If the window is not already open and a url is specified, the window will be opened.
Example:
enyo.windows.activate("search/index.html", "Search", {query: "oranges"});
activateWindow: function(inWindow, inParams Activate a window by window reference. Optionally send window params to the window.
Example:
enyo.windows.activateWindow(myWindow, {message: "Hello World"});
addBannerMessage: function(Adds a banner message; it will be displayed briefly before disappearing
deactivate: function(inName Deactivate a window by name.
deactivateWindow: function(inWindow Deactivate a window by reference.
fetchWindow: function(inName Returns a reference to the window object specified by the given name.
The specified name must correspond to a currently opened application window, i.e. a window in the list returned by enyo.windows.getWindows().
getActiveWindow: function(Returns a reference to the window object of the currently active application window.
getRootWindow: function(Returns the root application window.
getWindows: function(Returns an object listing the open windows by name, e.g.
{window1: <window object>, window2: <window object> }
openDashboard: function(inUrl, inName, inParams, inAttributes Opens an application dashboard.
openPopup: function(inUrl, inName, inParams, inAttributes, inHeight, throb Opens an application popup.
openWindow: function(inUrl, inName, inParams, inAttributes, inWindowInfo Opens an application window. This method can also be used to open a specialized window by specifying inAttributes and inWindowInfo.
Example:
enyo.windows.openWindow("search/index.html", "Search", {query: "oranges"});
removeBannerMessage: function(inId Removes a banner message
* inId: returned by addBannerMessage
renameWindow: function(inWindow, inName Renames a window. Note that the final window name could be different than that specified, if a collision occurs
setWindowParams: function(inWindow, inParams Send parameters to the given window. Application windows can communicate by sending window parameters to each other. Note, this method does not activate the window; if you want to activate the window use enyo.windows.activate.
The window specified by inWindow will fire a windowParamsChange event asynchronously which can be implemented to perform work related to window parameters changing.
setWindowProperties: function(inWindow, inProps Set webOS system properties of the window. Pass in a window reference (use 'window' for self) to modify and JS object with name/value pairs as inProps.
Possible property values include:
| blockScreenTimeout | Boolean. If true, the screen will not dim or turn off in the absence of user activity. If false, the timeout behavior will be reinstated. |
| setSubtleLightbar | Boolean. If true, the light bar will be made somewhat dimmer than normal. If false, it will return to normal. |
| fastAccelerometer | Boolean. If true, the accelerometer rate will increase to 30 hz; false by default, rate is at 4 hz. Note fast rate is active only for apps when maximized. |
palm/system/windows/agent.js
palm/system/windows/browserAgent.js
palm/system/windows/events.js
palm/system/windows/manager.js
palm/system/setuplogging.js
palm/system/Dashboard.js
A component that manages a standard dashboard window in order to properly display a list of notification "layers". Public methods exist for adding and removing layers, which are objects of the following form:
{
icon: String, path to icon image for this layer.
title: First line of text, bold by default. HTML is automatically escaped.
text: Second line of text, HTML is automatically escaped.
}
If the layers stack is empty, the dashboard window is closed. When the stack is not empty, the data from the topmost layer will be displayed. If the stack size is greater than 1, the size will be displayed in a little blue badge over the icon.
Applications can create instances of this component for the various types of dashboards they require.
For example, email uses one per email account, and one for the unified "all inboxes".
Then apps can push/pop notification layers as appropriate.
The component handles all logic for window creation, destruction, and UI display.
layers: null Array of layer objects specifying contents of dashboard.
smallIcon: "" Optional path to small icon to display when this dashboard window is hidden.
onIconTap: "" Fired when user taps the icon portion of a dashboard. Event includes the top layer object, and mouse event.
onMessageTap: "" Fired when user taps the message portion of a dashboard. Event includes the top layer object, and mouse event.
onTap: "" Fired when user taps anywhere in a dashboard. Event includes the top layer object, and mouse event.
onUserClose: "" Fired when user swipes away the dashboard (or the last layer). NOT sent when it is programmatically closed by emptying the layer stack.
onLayerSwipe: "" Fired when user swipes a dashboard layer away, unless it's the last one (that's onUserClose instead). Event includes the top layer object.
onDashboardActivated: "" Fired when the dashboard window is displayed/maximized.
onDashboardDeactivated: "" Fired when user dashboard window is concealed/minimized.
create: function(dbActivated: function(inSender dbDeactivated: function(inSender dbTapped: function(inSender, topLayer, event destroy: function(iconTapped: function(inSender, topLayer, event layerSwiped: function(inSender, topLayer msgTapped: function(inSender, topLayer, event pop: function(push: function(layer setLayers: function(layers updateWindow: function(userClosed: function(inSender owner, name
create, createComponent, createComponents, destroy, destroyComponents, getComponents
error, log, warn
palm/system/CrossAppUI.js
A CrossAppUI control is used for displaying UI that resides outside the application itself (filepicker, people picker, etc).
{kind: "CrossAppUI", app: "com.palm.app.statusbar", showing:false, params:...}
app: "" path: "" String. id of the app whose UI will be displayed.
params: null String. Relative path from the target app's main index file to the index file to be displayed.
onResult: "" appChanged: function(checkLoad: function(create: function(destroy: function(gotAppInfo: function(inSender, response handleMessage: function(e paramsChanged: function(pathChanged: function(rendered: function(url, tabIndex
layoutKind
className, container, parent
allowHtml, content
showing, prepend
owner, name
onclick, onmousedown, onmouseup
fetchCurrentUrl, goBack, goForward, refresh
broadcastMessage, destroyControls, getControls, indexOfControl, resized
addContent, getOffset, isDescendantOf
hide, render, renderInto, rendered, show
addClass, addRemoveClass, addStyles, applyStyle, getClassName, hasClass, hasNode, removeClass, setAttribute, setClassName, setStyle
create, createComponent, createComponents, destroy, destroyComponents, getComponents
error, log, warn
palm/system/CrossAppResult.js
A CrossAppTarget control is used to communicate with the "caller" who has invoked some UI using the CrossAppUI component.
{kind: "CrossAppTarget", onParamsChange:"myHandleNewParams"}
sendResult: function(params owner, name
create, createComponent, createComponents, destroy, destroyComponents, getComponents
error, log, warn
palm/system/FilePicker.js
A FilePicker control is used for allowing the user to choose files using the standard picker UI.
The onPickFile event fires with a response from the file picker if/when the user chooses a file. The response object is an array of objects indicating chosen files:
[
{
fullPath: // Absolute File Path.
iconPath: // Absolute File Path with ExtractFS prefix.
attachmentType: // File Type (image, document, audio, video)
size: // File Size in Bytes.
},
{
...
},
...
]
fileType: undefined Optional string or array. Limits displayed files to the given type (or types).
Possible types are: 'image', 'audio', 'video', 'document'.
previewLabel: undefined Optional free form string to override the default string displayed at the top panel.
extensions: undefined Optional array of file extension strings, used to filter displayed files.
allowMultiSelect: false Optional boolean indicating if selection of multiple files is allowed.
currentRingtonePath: undefined Optional string contains the current ringtone absolute file path.
cropWidth: undefined Optional int to set the width of the crop window.
cropHeight: undefined Optional int to set the height of the crop window.
onPickFile: "" Sent with a response from the file picker (see above) when the user chooses a file.
handleResult: function(inSender, result pickFile: function(Activates the modal FilePicker UI.
updateParams: function(showHideMode, openClassName, showKeyboardWhenOpening
modal, dismissWithClick, dismissWithEscape, shareScrim, scrimWhenModal, scrim, scrimClassName, autoClose
layoutKind
className, container, parent
allowHtml, content
showing, prepend
owner, name
onBeforeOpen, onOpen, onClose
onclick, onmousedown, onmouseup
openAroundControl, openAt, openAtCenter, openAtControl, openAtEvent, openNear
close, open, toggleOpen
componentsReady, initComponents, validateComponents
broadcastMessage, destroyControls, getControls, indexOfControl, resized
addContent, getOffset, isDescendantOf
hide, render, renderInto, rendered, show
addClass, addRemoveClass, addStyles, applyStyle, getClassName, hasClass, hasNode, removeClass, setAttribute, setClassName, setStyle
create, createComponent, createComponents, destroy, destroyComponents, getComponents
error, log, warn
palm/layout/OrderedLayout.js
palm/controls/Spinner.js
A control that displays a spinner animation to indicate that activity is taking place.
It's typical to show and hide the spinner to indicate activity. The spinner animation will automatically start when the spinner is shown. It's also possible to call start and stop to control the animation directly.
For example, to show a spinner while a service response is being requested:
components: [
{kind: "PalmService", onResponse: "serviceResponse"},
{kind: "Button", caption: "Call Service", onclick: "buttonClick"},
{kind: "Spinner"}
],
buttonClick: function() {
this.$.service.call();
this.$.spinner.show();
},
serviceResponse: function() {
this.$.spinner.hide();
}
Note, extra care must be taken to use a Spinner in a list item. The spinner animation must be started manually, asynchronous to list rendering. It's possible to do this as follows:
setupRow: function(inSender, inIndex) { if (this.data[inIndex].busy) { enyo.asyncMethod(this, "startSpinner", inIndex); } }, startSpinner: function(inIndex) { this.$.list.prepareRow(inIndex); this.$.spinner.show(); }
imageCount, imageHeight, repeat, easingFunc
layoutKind
className, container, parent
allowHtml, content
showing, prepend
owner, name
onclick, onmousedown, onmouseup
start, stop
broadcastMessage, destroyControls, getControls, indexOfControl, resized
addContent, getOffset, isDescendantOf
hide, render, renderInto, rendered, show
addClass, addRemoveClass, addStyles, applyStyle, getClassName, hasClass, hasNode, removeClass, setAttribute, setClassName, setStyle
create, createComponent, createComponents, destroy, destroyComponents, getComponents
error, log, warn
A control that displays a large spinner animation to indicate that activity is taking place.
imageCount, imageHeight, repeat, easingFunc
layoutKind
className, container, parent
allowHtml, content
showing, prepend
owner, name
onclick, onmousedown, onmouseup
start, stop
broadcastMessage, destroyControls, getControls, indexOfControl, resized
addContent, getOffset, isDescendantOf
hide, render, renderInto, rendered, show
addClass, addRemoveClass, addStyles, applyStyle, getClassName, hasClass, hasNode, removeClass, setAttribute, setClassName, setStyle
create, createComponent, createComponents, destroy, destroyComponents, getComponents
error, log, warn
palm/controls/button/NotificationButton.js
A button styled to go in a dashboard.
{kind: "NotificationButton", label: "Snooze"}
caption, disabled, isDefault, down, depressed, hot, toggling, allowDrag
cssNamespace
layoutKind
className, container, parent
allowHtml, content
showing, prepend
owner, name
onclick, onmousedown, onmouseup
setState
broadcastMessage, destroyControls, getControls, indexOfControl, resized
addContent, getOffset, isDescendantOf
hide, render, renderInto, rendered, show
addClass, addRemoveClass, addStyles, applyStyle, getClassName, hasClass, hasNode, removeClass, setAttribute, setClassName, setStyle
create, createComponent, createComponents, destroy, destroyComponents, getComponents
error, log, warn
palm/controls/button/IconButton.js
A Button with Enyo styling, an image in the button, and an optional text label below it.
{kind: "IconButton", label: "I am a label", icon: "images/foo.png"}
icon: "" iconIsClassName: false If false then the icon property specifies an image file path; if true, it is a css className.
caption, disabled, isDefault, down, depressed, hot, toggling, allowDrag
cssNamespace
layoutKind
className, container, parent
allowHtml, content
showing, prepend
owner, name
onclick, onmousedown, onmouseup
setState
broadcastMessage, destroyControls, getControls, indexOfControl, resized
addContent, getOffset, isDescendantOf
hide, render, renderInto, rendered, show
addClass, addRemoveClass, addStyles, applyStyle, getClassName, hasClass, hasNode, removeClass, setAttribute, setClassName, setStyle
create, createComponent, createComponents, destroy, destroyComponents, getComponents
error, log, warn
palm/controls/button/Pushable.js
A Control that gets a gray highlight on mouse down. It generates an ondown event on mouse down, and an onup event on mouse up.
{kind: "Pushable", content: "push me", ondown: "pushableDown", onup: "pushableUp"}
pushableDown: function(inSender) {
this.log(inSender.content + "is down");
},
pushableUp: function(inSender) {
this.log(inSender.content + "is up");
}
ondown: "" onup: "" layoutKind
className, container, parent
allowHtml, content
showing, prepend
owner, name
onclick, onmousedown, onmouseup
broadcastMessage, destroyControls, getControls, indexOfControl, resized
addContent, getOffset, isDescendantOf
hide, render, renderInto, rendered, show
addClass, addRemoveClass, addStyles, applyStyle, getClassName, hasClass, hasNode, removeClass, setAttribute, setClassName, setStyle
create, createComponent, createComponents, destroy, destroyComponents, getComponents
error, log, warn
palm/controls/button/ActivityButton.js
A Button that has a Spinner as an activity indicator. Use setActive() to start or stop the spinner.
{kind: "ActivityButton", caption: "Hit me to spin", onclick: "toggleActivity"}
toggleActivity: function(inSender) {
var a = inSender.getActive();
inSender.setActive(!a);
}
active: false caption, disabled, isDefault, down, depressed, hot, toggling, allowDrag
cssNamespace
layoutKind
className, container, parent
allowHtml, content
showing, prepend
owner, name
onclick, onmousedown, onmouseup
setState
broadcastMessage, destroyControls, getControls, indexOfControl, resized
addContent, getOffset, isDescendantOf
hide, render, renderInto, rendered, show
addClass, addRemoveClass, addStyles, applyStyle, getClassName, hasClass, hasNode, removeClass, setAttribute, setClassName, setStyle
create, createComponent, createComponents, destroy, destroyComponents, getComponents
error, log, warn
palm/controls/button/GrabButton.js
caption, disabled, isDefault, down, depressed, hot, toggling, allowDrag
cssNamespace
layoutKind
className, container, parent
allowHtml, content
showing, prepend
owner, name
onclick, onmousedown, onmouseup
setState
broadcastMessage, destroyControls, getControls, indexOfControl, resized
addContent, getOffset, isDescendantOf
hide, render, renderInto, rendered, show
addClass, addRemoveClass, addStyles, applyStyle, getClassName, hasClass, hasNode, removeClass, setAttribute, setClassName, setStyle
create, createComponent, createComponents, destroy, destroyComponents, getComponents
error, log, warn
palm/controls/input/PasswordInput.js
A text input control for typing in passwords and other confidential information. Inputted characters are masked. The value of the input can still be retrieved via getValue, e.g.:
buttonClick: function() {
var password = this.$.passwordInput.getValue();
}
hint, value, tabIndex, spellcheck, autocorrect, autoKeyModifier, autoCapitalize, autoEmoticons, autoLinking, autoWordComplete, inputType, inputClassName, focusClassName, spacingClassName, alwaysLooksFocused, selection, disabled, changeOnInput, keypressInputDelay, styled, selectAllOnFocus
layoutKind
className, container, parent
allowHtml, content
showing, prepend
owner, name
onfocus, onblur, onchange, oninput, onmousedown, onmouseup, onkeypress
onclick, onmousedown, onmouseup
forceBlur, forceFocus, forceFocusEnableKeyboard, forceSelect, hasFocus, isEmpty
broadcastMessage, destroyControls, getControls, indexOfControl, resized
addContent, getOffset, isDescendantOf
hide, render, renderInto, rendered, show
addClass, addRemoveClass, addStyles, applyStyle, getClassName, hasClass, hasNode, removeClass, setAttribute, setClassName, setStyle
create, createComponent, createComponents, destroy, destroyComponents, getComponents
error, log, warn
palm/controls/input/RoundedInput.js
hint, value, tabIndex, spellcheck, autocorrect, autoKeyModifier, autoCapitalize, autoEmoticons, autoLinking, autoWordComplete, inputType, inputClassName, focusClassName, spacingClassName, alwaysLooksFocused, selection, disabled, changeOnInput, keypressInputDelay, styled, selectAllOnFocus
layoutKind
className, container, parent
allowHtml, content
showing, prepend
owner, name
onfocus, onblur, onchange, oninput, onmousedown, onmouseup, onkeypress
onclick, onmousedown, onmouseup
forceBlur, forceFocus, forceFocusEnableKeyboard, forceSelect, hasFocus, isEmpty
broadcastMessage, destroyControls, getControls, indexOfControl, resized
addContent, getOffset, isDescendantOf
hide, render, renderInto, rendered, show
addClass, addRemoveClass, addStyles, applyStyle, getClassName, hasClass, hasNode, removeClass, setAttribute, setClassName, setStyle
create, createComponent, createComponents, destroy, destroyComponents, getComponents
error, log, warn
palm/controls/input/ToolInput.js
hint, value, tabIndex, spellcheck, autocorrect, autoKeyModifier, autoCapitalize, autoEmoticons, autoLinking, autoWordComplete, inputType, inputClassName, focusClassName, spacingClassName, alwaysLooksFocused, selection, disabled, changeOnInput, keypressInputDelay, styled, selectAllOnFocus
layoutKind
className, container, parent
allowHtml, content
showing, prepend
owner, name
onfocus, onblur, onchange, oninput, onmousedown, onmouseup, onkeypress
onclick, onmousedown, onmouseup
forceBlur, forceFocus, forceFocusEnableKeyboard, forceSelect, hasFocus, isEmpty
broadcastMessage, destroyControls, getControls, indexOfControl, resized
addContent, getOffset, isDescendantOf
hide, render, renderInto, rendered, show
addClass, addRemoveClass, addStyles, applyStyle, getClassName, hasClass, hasNode, removeClass, setAttribute, setClassName, setStyle
create, createComponent, createComponents, destroy, destroyComponents, getComponents
error, log, warn
palm/controls/input/SearchInput.js
onCancel: "" iconClick: function(inputHandler: function(updateIconClass: function(valueChanged: function(hint, value, tabIndex, spellcheck, autocorrect, autoKeyModifier, autoCapitalize, autoEmoticons, autoLinking, autoWordComplete, inputType, inputClassName, focusClassName, spacingClassName, alwaysLooksFocused, selection, disabled, changeOnInput, keypressInputDelay, styled, selectAllOnFocus
layoutKind
className, container, parent
allowHtml, content
showing, prepend
owner, name
onfocus, onblur, onchange, oninput, onmousedown, onmouseup, onkeypress
onclick, onmousedown, onmouseup
forceBlur, forceFocus, forceFocusEnableKeyboard, forceSelect, hasFocus, isEmpty
broadcastMessage, destroyControls, getControls, indexOfControl, resized
addContent, getOffset, isDescendantOf
hide, render, renderInto, rendered, show
addClass, addRemoveClass, addStyles, applyStyle, getClassName, hasClass, hasNode, removeClass, setAttribute, setClassName, setStyle
create, createComponent, createComponents, destroy, destroyComponents, getComponents
error, log, warn
palm/controls/input/RoundedSearchInput.js
hint, value, tabIndex, spellcheck, autocorrect, autoKeyModifier, autoCapitalize, autoEmoticons, autoLinking, autoWordComplete, inputType, inputClassName, focusClassName, spacingClassName, alwaysLooksFocused, selection, disabled, changeOnInput, keypressInputDelay, styled, selectAllOnFocus
layoutKind
className, container, parent
allowHtml, content
showing, prepend
owner, name
onCancel
onfocus, onblur, onchange, oninput, onmousedown, onmouseup, onkeypress
onclick, onmousedown, onmouseup
iconClick, inputHandler, updateIconClass, valueChanged
forceBlur, forceFocus, forceFocusEnableKeyboard, forceSelect, hasFocus, isEmpty
broadcastMessage, destroyControls, getControls, indexOfControl, resized
addContent, getOffset, isDescendantOf
hide, render, renderInto, rendered, show
addClass, addRemoveClass, addStyles, applyStyle, getClassName, hasClass, hasNode, removeClass, setAttribute, setClassName, setStyle
create, createComponent, createComponents, destroy, destroyComponents, getComponents
error, log, warn
palm/controls/input/ToolSearchInput.js
hint, value, tabIndex, spellcheck, autocorrect, autoKeyModifier, autoCapitalize, autoEmoticons, autoLinking, autoWordComplete, inputType, inputClassName, focusClassName, spacingClassName, alwaysLooksFocused, selection, disabled, changeOnInput, keypressInputDelay, styled, selectAllOnFocus
layoutKind
className, container, parent
allowHtml, content
showing, prepend
owner, name
onCancel
onfocus, onblur, onchange, oninput, onmousedown, onmouseup, onkeypress
onclick, onmousedown, onmouseup
iconClick, inputHandler, updateIconClass, valueChanged
forceBlur, forceFocus, forceFocusEnableKeyboard, forceSelect, hasFocus, isEmpty
broadcastMessage, destroyControls, getControls, indexOfControl, resized
addContent, getOffset, isDescendantOf
hide, render, renderInto, rendered, show
addClass, addRemoveClass, addStyles, applyStyle, getClassName, hasClass, hasNode, removeClass, setAttribute, setClassName, setStyle
create, createComponent, createComponents, destroy, destroyComponents, getComponents
error, log, warn
palm/controls/input/RoundedInputBox.js
alwaysLooksFocused, focusClassName, spacingClassName
layoutKind
className, container, parent
allowHtml, content
showing, prepend
owner, name
onfocus, onblur
onclick, onmousedown, onmouseup
alwaysLooksFocusedChanged, blurHandler, create, focusHandler, layoutKindChanged, spacingClassNameChanged
broadcastMessage, destroyControls, getControls, indexOfControl, resized
addContent, getOffset, isDescendantOf
hide, render, renderInto, rendered, show
addClass, addRemoveClass, addStyles, applyStyle, getClassName, hasClass, hasNode, removeClass, setAttribute, setClassName, setStyle
create, createComponent, createComponents, destroy, destroyComponents, getComponents
error, log, warn
palm/controls/input/ToolInputBox.js
alwaysLooksFocused, focusClassName, spacingClassName
layoutKind
className, container, parent
allowHtml, content
showing, prepend
owner, name
onfocus, onblur
onclick, onmousedown, onmouseup
alwaysLooksFocusedChanged, blurHandler, create, focusHandler, layoutKindChanged, spacingClassNameChanged
broadcastMessage, destroyControls, getControls, indexOfControl, resized
addContent, getOffset, isDescendantOf
hide, render, renderInto, rendered, show
addClass, addRemoveClass, addStyles, applyStyle, getClassName, hasClass, hasNode, removeClass, setAttribute, setClassName, setStyle
create, createComponent, createComponents, destroy, destroyComponents, getComponents
error, log, warn
palm/controls/OrderedContainer.js
A control primitive that applies ordering CSS classes to its contents: enyo-first, enyo-middle, and enyo-last or enyo-single.
This can help facilitate CSS styling in cases where the styling of the first and last controls differs from that of the middle controls. This occurs, for example, when the top and bottom controls in a group have rounded corners but the middle controls do not.
{kind: "OrderedContainer", components: [
{name: "first", content: "first"},
{name: "middle", content: "middle"},
{name: "last", content: "last"}
]}
The above code produces a control named first with CSS class enyo-first, a control named middle with CSS class enyo-middle, and a control named last with CSS class enyo-last.
layoutKind
className, container, parent
allowHtml, content
showing, prepend
owner, name
onclick, onmousedown, onmouseup
broadcastMessage, destroyControls, getControls, indexOfControl, resized
addContent, getOffset, isDescendantOf
hide, render, renderInto, rendered, show
addClass, addRemoveClass, addStyles, applyStyle, getClassName, hasClass, hasNode, removeClass, setAttribute, setClassName, setStyle
create, createComponent, createComponents, destroy, destroyComponents, getComponents
error, log, warn
palm/controls/button/ToolButton.js
A button styled to go in a Toolbar with an icon in the center.
{kind: "ToolButton", icon: "images/foo.png"}
captionChanged: function(setState: function(inState, inValue icon, iconIsClassName
caption, disabled, isDefault, down, depressed, hot, toggling, allowDrag
cssNamespace
layoutKind
className, container, parent
allowHtml, content
showing, prepend
owner, name
onclick, onmousedown, onmouseup
setState
broadcastMessage, destroyControls, getControls, indexOfControl, resized
addContent, getOffset, isDescendantOf
hide, render, renderInto, rendered, show
addClass, addRemoveClass, addStyles, applyStyle, getClassName, hasClass, hasNode, removeClass, setAttribute, setClassName, setStyle
create, createComponent, createComponents, destroy, destroyComponents, getComponents
error, log, warn
palm/controls/button/ButtonHeader.js
A button with menu styling, meant to contain other components within.
{kind: "ButtonHeader", components: [
{content: "This text goes inside the button"}
]}
caption, disabled, isDefault, down, depressed, hot, toggling, allowDrag
cssNamespace
layoutKind
className, container, parent
allowHtml, content
showing, prepend
owner, name
onclick, onmousedown, onmouseup
setState
broadcastMessage, destroyControls, getControls, indexOfControl, resized
addContent, getOffset, isDescendantOf
hide, render, renderInto, rendered, show
addClass, addRemoveClass, addStyles, applyStyle, getClassName, hasClass, hasNode, removeClass, setAttribute, setClassName, setStyle
create, createComponent, createComponents, destroy, destroyComponents, getComponents
error, log, warn
palm/controls/button/ToggleButton.js
A control that looks like a switch with labels for two states. Each time a ToggleButton is tapped, it switches its state and fires an onChange event.
{kind: "ToggleButton", onLabel: "foo", offLabel: "bar", onChange: "buttonToggle"}
buttonToggle: function(inSender, inState) {
this.log("Toggled to state" + inState);
}
To find out the state of the button, use getState:
queryToggleState: function() {
return this.$.toggleButton.getState();
}
state: false onLabel: enyo._$L("On") offLabel: enyo._$L("Off") disabled: false onChange: "" The onChange event fires when the user changes the state of the toggle button, but not when the state is changed programmatically.
layoutKind
className, container, parent
allowHtml, content
showing, prepend
owner, name
onclick, onmousedown, onmouseup
broadcastMessage, destroyControls, getControls, indexOfControl, resized
addContent, getOffset, isDescendantOf
hide, render, renderInto, rendered, show
addClass, addRemoveClass, addStyles, applyStyle, getClassName, hasClass, hasNode, removeClass, setAttribute, setClassName, setStyle
create, createComponent, createComponents, destroy, destroyComponents, getComponents
error, log, warn
palm/controls/button/CheckBox.js
A box that shows or hides a check mark when clicked. The onChange event is fired when it is clicked. Use getChecked() to fetch the checked status.
{kind: "CheckBox", onChange: "checkboxClicked"}
checkboxClicked: function(inSender) {
if (inSender.getChecked()) {
this.log("I've been checked!");
}
}
checked: false onChange: '' The onChange event fires when the user checks or unchecks the checkbox, but not when the state is changed programmatically.
caption, disabled, isDefault, down, depressed, hot, toggling, allowDrag
cssNamespace
layoutKind
className, container, parent
allowHtml, content
showing, prepend
owner, name
onclick, onmousedown, onmouseup
setState
broadcastMessage, destroyControls, getControls, indexOfControl, resized
addContent, getOffset, isDescendantOf
hide, render, renderInto, rendered, show
addClass, addRemoveClass, addStyles, applyStyle, getClassName, hasClass, hasNode, removeClass, setAttribute, setClassName, setStyle
create, createComponent, createComponents, destroy, destroyComponents, getComponents
error, log, warn
palm/controls/PrevNextBanner.js
A control with previous and next buttons to the left and right of a content area, which can contain other controls. The onPrevious and onNext events fire when the respective buttons are clicked.
previousDisabled: false nextDisabled: false onPrevious: "" onNext: "" layoutKind
className, container, parent
allowHtml, content
showing, prepend
owner, name
onclick, onmousedown, onmouseup
broadcastMessage, destroyControls, getControls, indexOfControl, resized
addContent, getOffset, isDescendantOf
hide, render, renderInto, rendered, show
addClass, addRemoveClass, addStyles, applyStyle, getClassName, hasClass, hasNode, removeClass, setAttribute, setClassName, setStyle
create, createComponent, createComponents, destroy, destroyComponents, getComponents
error, log, warn
palm/controls/WebView.js
A control that shows web content with built-in scroller.
{kind: "WebView"}
The URL to load can be specified when declaring the instance, or by calling setUrl.
{kind: "WebView", url: "http://www.google.com"}
goToUrl: function(inUrl) {
this.$.webView.setUrl(inUrl);
}
identifier: ""
Page identifier, used to open new WebViews for new window requests.
url: ""
URL for page, updated as user navigates. Relative URLs are not allowed.
minFontSize: 16
Smallest font size shown on the page, used to stop text from becoming unreadable.
enableJavascript: true
Boolean. If true, allows page to run JavaScript.
blockPopups: true
Boolean. If false, allows page to request that new windows be opened.
acceptCookies: true
Boolean. If true, allows WebView to accept cookies from server.
redirects: []
Array of URL redirections specified as {regexp: string, cookie: string, enable: boolean}
networkInterface: ""
The network interface.
ignoreMetaTags: false
Boolean. If true, page ignores viewport-related meta tags.
cacheAdapter: true
Boolean. If true (default), WebKit will cache the plugin when the node is hidden. If your app explicitly destroys the plugin outside the app lifecycle, you must set this to false.
onMousehold: "" onResized: "" onPageTitleChanged: "" onUrlRedirected: "" onSingleTap: "" onLoadStarted: "" onLoadProgress: "" onLoadStopped: "" onLoadComplete: "" onFileLoad: "" onAlertDialog: "" onConfirmDialog: "" onPromptDialog: "" onSSLConfirmDialog: "" onUserPasswordDialog: "" onNewPage: "" onPrint: "" onEditorFocusChanged: "" onError: "" onDisconnected: "" acceptDialog: function(Accepts the current dialog.
cancelDialog: function(Cancels the current dialog.
clearCache: function(Clears the browser cache.
clearCookies: function(Clears cookies.
clearHistory: function(Clears browser history.
deleteImage: function(inPath Deletes an image from the file system.
disconnect: function(Disconnects this WebView from the browser server.
generateIconFromFile: function(inPath, inIconPath, inLeft, inTop, inWidth, inHeight Generates an icon from an image in the file system. Only works with PNG files.
goBack: function(Goes back one entry in history.
goForward: function(Goes forward one entry in history.
insertStringAtCursor: function(inString If in an editable field, inserts a string at the current cursor position.
printFrame: function(inName, inJobId, inWidth, inHeight, inDpi, inLandscape, inReverseOrder Shows the print dialog to print the current page.
reloadPage: function(Reloads the current page.
resizeImage: function(inFromPath, inToPath, inWidth, inHeight Resizes an image in the file system.
saveImageAtPoint: function(inLeft, inTop, inDirectory, inCallback Saves to the file system the image at the specified position.
sendDialogResponse: function(inResponse Responds to the current dialog.
stopLoad: function(Stops loading the current page.
layoutKind
className, container, parent
allowHtml, content
showing, prepend
owner, name
onclick, onmousedown, onmouseup
broadcastMessage, destroyControls, getControls, indexOfControl, resized
addContent, getOffset, isDescendantOf
hide, render, renderInto, rendered, show
addClass, addRemoveClass, addStyles, applyStyle, getClassName, hasClass, hasNode, removeClass, setAttribute, setClassName, setStyle
create, createComponent, createComponents, destroy, destroyComponents, getComponents
error, log, warn
palm/controls/image/sizeable.js
palm/controls/image/SizeableImage.js
A control designed to view an image, with support for zooming. It is meant to be placed inside a Scroller.
{kind: "Scroller", components: [
{kind: "SizeableImage", src: "images/tree.jpg"}
]}
The zoom level can be changed with setZoom.
src: "" zoom: 1 autoSize: true maxZoomRatio: 2 onImageLoaded: "" layoutKind
className, container, parent
allowHtml, content
showing, prepend
owner, name
onclick, onmousedown, onmouseup
broadcastMessage, destroyControls, getControls, indexOfControl, resized
addContent, getOffset, isDescendantOf
hide, render, renderInto, rendered, show
addClass, addRemoveClass, addStyles, applyStyle, getClassName, hasClass, hasNode, removeClass, setAttribute, setClassName, setStyle
create, createComponent, createComponents, destroy, destroyComponents, getComponents
error, log, warn
src, zoom, autoSize, maxZoomRatio
layoutKind
className, container, parent
allowHtml, content
showing, prepend
owner, name
onImageLoaded
onclick, onmousedown, onmouseup
broadcastMessage, destroyControls, getControls, indexOfControl, resized
addContent, getOffset, isDescendantOf
hide, render, renderInto, rendered, show
addClass, addRemoveClass, addStyles, applyStyle, getClassName, hasClass, hasNode, removeClass, setAttribute, setClassName, setStyle
create, createComponent, createComponents, destroy, destroyComponents, getComponents
error, log, warn
palm/controls/image/ScrollingImage.js
A control designed to view an image, with support for zooming and panning.
{kind: "ScrollingImage", src: "images/tree.jpg"}
src, zoom, autoSize, maxZoomRatio
layoutKind
className, container, parent
allowHtml, content
showing, prepend
owner, name
onImageLoaded
onclick, onmousedown, onmouseup
broadcastMessage, destroyControls, getControls, indexOfControl, resized
addContent, getOffset, isDescendantOf
hide, render, renderInto, rendered, show
addClass, addRemoveClass, addStyles, applyStyle, getClassName, hasClass, hasNode, removeClass, setAttribute, setClassName, setStyle
create, createComponent, createComponents, destroy, destroyComponents, getComponents
error, log, warn
palm/controls/image/CroppableImage.js
A control designed to crop a zoomable, pannable image.
onCrop returns the parameters necessary to crop the image
{
suggestedXtop: left pixel start of the cropped image
suggestedYtop: top pixel start of the cropped image
suggestedScale: zoom%
suggestedXsize: rounded X size of the cropped image
suggestedYsize: rounded Y size of the cropped image
sourceWidth: original image width
sourceHeight: original image height
sourceImage: absolute path to the image
focusX: center of the cropped image in relation to width
focusY: center of the cropped image in relation to height
}
Use a CroppableImage like so:
{kind: "VFlexBox", components: [
{kind: "CroppableImage" src:"image.jpg", flex:1, onCrop "cropHandler"},
{kind: "Button", onclick:"crop"}
]}
crop: function() { this.$.croppableImage.getCropParams() }
onCrop: "" getCropParams: function(src, zoom, autoSize, maxZoomRatio
layoutKind
className, container, parent
allowHtml, content
showing, prepend
owner, name
onImageLoaded
onclick, onmousedown, onmouseup
broadcastMessage, destroyControls, getControls, indexOfControl, resized
addContent, getOffset, isDescendantOf
hide, render, renderInto, rendered, show
addClass, addRemoveClass, addStyles, applyStyle, getClassName, hasClass, hasNode, removeClass, setAttribute, setClassName, setStyle
create, createComponent, createComponents, destroy, destroyComponents, getComponents
error, log, warn
palm/controls/BasicCarousel.js
A control that provides the ability to slide back and forth between different views. If you have many views in the carousel, use Carousel.
{kind: "BasicCarousel", flex: 1, components: [
{kind: "View1"},
{kind: "View2"},
{kind: "View3"}
]}
The default orientation of BasicCarousel is horizontal. You can change to vertical by setting layoutKind to "VFlexLayout".
{kind: "BasicCarousel", layoutKind: "VFlexLayout", flex: 1, components: [
{kind: "View1"},
{kind: "View2"},
{kind: "View3"}
]}
views: [] dragSnapThreshold: 0.01 addViews: function(inViews Adds additional views to the carousel. @param {Object} inViews
resize: function(Handles size changes. This method can be hooked up to a resizeHandler.
resizeHandler: function(Event handler for resize; if we're the root component, we'll automatically resize.
index
scrollTop, scrollLeft, autoHorizontal, autoVertical, fpsShowing, accelerated
horizontal, vertical
layoutKind
className, container, parent
allowHtml, content
showing, prepend
owner, name
onSnap, onSnapFinish
onScrollStart, onBeforeScroll, onScroll, onScrollStop
onclick, onmousedown, onmouseup
next, previous, snapTo
getBoundaries, isScrolling, scrollIntoView, scrollTo, scrollToBottom
broadcastMessage, destroyControls, getControls, indexOfControl, resized
addContent, getOffset, isDescendantOf
hide, render, renderInto, rendered, show
addClass, addRemoveClass, addStyles, applyStyle, getClassName, hasClass, hasNode, removeClass, setAttribute, setClassName, setStyle
create, createComponent, createComponents, destroy, destroyComponents, getComponents
error, log, warn
palm/controls/Carousel.js
fetchCurrentView: function(Returns the currently displayed view.
fetchView: function(inViewPos Fetches the view corresponding to the view position "center", "left" or "right". "center" would always refer to the view currently displayed. "left" and "right" would be the left/right of currently displayed. Use this function to update the view already being shown. @param {String} position of the view to be fetched. Possible values are "center", "left" or "right".
views, dragSnapThreshold
index
scrollTop, scrollLeft, autoHorizontal, autoVertical, fpsShowing, accelerated
horizontal, vertical
layoutKind
className, container, parent
allowHtml, content
showing, prepend
owner, name
onSnap, onSnapFinish
onScrollStart, onBeforeScroll, onScroll, onScrollStop
onclick, onmousedown, onmouseup
addViews, resize, resizeHandler
next, previous, snapTo
getBoundaries, isScrolling, scrollIntoView, scrollTo, scrollToBottom
broadcastMessage, destroyControls, getControls, indexOfControl, resized
addContent, getOffset, isDescendantOf
hide, render, renderInto, rendered, show
addClass, addRemoveClass, addStyles, applyStyle, getClassName, hasClass, hasNode, removeClass, setAttribute, setClassName, setStyle
create, createComponent, createComponents, destroy, destroyComponents, getComponents
error, log, warn
A control that provides the ability to slide back and forth between different views without having to load all the views initially.
A single carousel could contain thousands of views/images. Loading all of them into memory at once would not be feasible. Carousel solves this problem by only holding onto the center view (C), the previous view (P), and the next view (N). Additional views are loaded as the user flips through the items in the Carousel.
| 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 |
P C N
To initialize a carousel:
{kind: "Carousel", flex: 1, onGetLeft: "getLeft", onGetRight: "getRight"}
Use setCenterView to set the center view, and the onGetLeft and onGetRight events to build a scrolling list of views.
create: function() {
this.inherited(arguments);
this.$.carousel.setCenterView(this.getView(this.index));
},
getView: function(inIndex) {
return {kind: "HFlexBox", align: "center", pack: "center", content: inIndex};
},
getLeft: function(inSender, inSnap) {
inSnap && this.index--;
return this.getView(this.index-1);
},
getRight: function(inSender, inSnap) {
inSnap && this.index++;
return this.getView(this.index+1);
}
onGetLeft: "" Gets the left view and also indicates if it is fired after a left transition.
onGetRight: "" Gets the right view and also indicates if it is fired after a right transition.
setCenterView: function(inInfo Sets the view to be used as the center view. This function will create the center view and fires events onGetLeft and onGetRight to get the view infos for creating left and right views. @param {Object} inInfo A config block describing the view control.
views, dragSnapThreshold
index
scrollTop, scrollLeft, autoHorizontal, autoVertical, fpsShowing, accelerated
horizontal, vertical
layoutKind
className, container, parent
allowHtml, content
showing, prepend
owner, name
onSnap, onSnapFinish
onScrollStart, onBeforeScroll, onScroll, onScrollStop
onclick, onmousedown, onmouseup
fetchCurrentView, fetchView
addViews, resize, resizeHandler
next, previous, snapTo
getBoundaries, isScrolling, scrollIntoView, scrollTo, scrollToBottom
broadcastMessage, destroyControls, getControls, indexOfControl, resized
addContent, getOffset, isDescendantOf
hide, render, renderInto, rendered, show
addClass, addRemoveClass, addStyles, applyStyle, getClassName, hasClass, hasNode, removeClass, setAttribute, setClassName, setStyle
create, createComponent, createComponents, destroy, destroyComponents, getComponents
error, log, warn
palm/controls/VirtualCarousel.js
A control that displays a scrolling list of views. VirtualCarousel is optimized such that only three views are created even if the actual number of views is infinite. VirtualCarousel doesn't employ a flyweight strategy but does take into account the fact that object creation is expensive. A new view will not be created if there is an old view that can be reused.
To initialize VirtualCarousel, use renderViews. The onSetupView event
allows for updating the view for a given view index. The view returned in the event could be
an old view that is not suitable for the given index, so is the user's responsiblitiy to update
the view. Here's a simple example:
{name: "carousel", kind: "VirtualCarousel", flex: 1, onSetupView: "setupView"}
rendered: function() {
this.inherited(arguments);
var selectedViewIndex = 5;
this.$.carousel.renderViews(selectedViewIndex);
},
setupView: function(inSender, inView, inViewIndex) {
if (inViewIndex > 0 && inViewIndex < 30) {
inView.setHeader("Hello " + inViewIndex);
return true;
}
}
An onSetupView handler must return true to indicate that the given view should be rendered.
The onSnap event fires when the user finishes dragging and snapping occurs.
onSnapFinish fires when snapping and scroller animation completes.
To get a handle for the currently displayed view, use fetchCurrentView().
For example, to get the current displayed view after snapping is completed:
{name: "carousel", kind: "VirtualCarousel", flex: 1, onSetupView: "setupView", onSnapFinish: "snapFinish"}
snapFinish: function(inSender) {
var view = this.$.carousel.fetchCurrentView();
}
To move the view programmatically, use next() or previous().
onSetupView: "" renderViews: function(inIndex, inForceCreate views, dragSnapThreshold
index
scrollTop, scrollLeft, autoHorizontal, autoVertical, fpsShowing, accelerated
horizontal, vertical
layoutKind
className, container, parent
allowHtml, content
showing, prepend
owner, name
onSnap, onSnapFinish
onScrollStart, onBeforeScroll, onScroll, onScrollStop
onclick, onmousedown, onmouseup
fetchCurrentView, fetchView
addViews, resize, resizeHandler
next, previous, snapTo
getBoundaries, isScrolling, scrollIntoView, scrollTo, scrollToBottom
broadcastMessage, destroyControls, getControls, indexOfControl, resized
addContent, getOffset, isDescendantOf
hide, render, renderInto, rendered, show
addClass, addRemoveClass, addStyles, applyStyle, getClassName, hasClass, hasNode, removeClass, setAttribute, setClassName, setStyle
create, createComponent, createComponents, destroy, destroyComponents, getComponents
error, log, warn
palm/controls/image/ViewImage.js
A ScrollingImage that is specially designed to work in a Carousel.
{kind: "Carousel", flex: 1, components: [
{kind: "ViewImage", src: "images/01.png"},
{kind: "ViewImage", src: "images/02.png"},
{kind: "ViewImage", src: "images/03.png"}
]}
accelerated: true onImageLoaded: "imageLoaded" src, zoom, autoSize, maxZoomRatio
layoutKind
className, container, parent
allowHtml, content
showing, prepend
owner, name
onImageLoaded
onclick, onmousedown, onmouseup
broadcastMessage, destroyControls, getControls, indexOfControl, resized
addContent, getOffset, isDescendantOf
hide, render, renderInto, rendered, show
addClass, addRemoveClass, addStyles, applyStyle, getClassName, hasClass, hasNode, removeClass, setAttribute, setClassName, setStyle
create, createComponent, createComponents, destroy, destroyComponents, getComponents
error, log, warn
palm/controls/image/ImageView.js
A Carousel that is designed to view an image full-screen, with support for zooming and panning, while optionally moving between additional images. It can be used to display a single image, or a set of images that may be flipped through.
{kind: "ImageView", flex: 1, onGetLeft: "getLeft", onGetRight: "getRight"}
Use centerSrc to specify the center image, and the onGetLeft and onGetRight events to build a scrolling list of images.
create: function() {
this.inherited(arguments);
this.$.imageView.setCenterSrc(this.getImageUrl(this.index));
},
getImageUrl: function(inIndex) {
var n = this.images[inIndex];
if (n) {
return "images/" + n;
}
},
getLeft: function(inSender, inSnap) {
inSnap && this.index--;
return this.getImageUrl(this.index-1);
},
getRight: function(inSender, inSnap) {
inSnap && this.index++;
return this.getImageUrl(this.index+1);
}
images: [] centerSrc: "" addImages: function(inImages Adds additional images to the ImageView. @param {Object} inImages
views, dragSnapThreshold
index
scrollTop, scrollLeft, autoHorizontal, autoVertical, fpsShowing, accelerated
horizontal, vertical
layoutKind
className, container, parent
allowHtml, content
showing, prepend
owner, name
onGetLeft, onGetRight
onSnap, onSnapFinish
onScrollStart, onBeforeScroll, onScroll, onScrollStop
onclick, onmousedown, onmouseup
setCenterView
fetchCurrentView, fetchView
addViews, resize, resizeHandler
next, previous, snapTo
getBoundaries, isScrolling, scrollIntoView, scrollTo, scrollToBottom
broadcastMessage, destroyControls, getControls, indexOfControl, resized
addContent, getOffset, isDescendantOf
hide, render, renderInto, rendered, show
addClass, addRemoveClass, addStyles, applyStyle, getClassName, hasClass, hasNode, removeClass, setAttribute, setClassName, setStyle
create, createComponent, createComponents, destroy, destroyComponents, getComponents
error, log, warn
palm/controls/Divider.js
A labeled divider with icon.
icon: "" URL for an image to be used as the divider's icon.
iconBorderCollapse: true caption: "Divider" layoutKind
className, container, parent
allowHtml, content
showing, prepend
owner, name
onclick, onmousedown, onmouseup
broadcastMessage, destroyControls, getControls, indexOfControl, resized
addContent, getOffset, isDescendantOf
hide, render, renderInto, rendered, show
addClass, addRemoveClass, addStyles, applyStyle, getClassName, hasClass, hasNode, removeClass, setAttribute, setClassName, setStyle
create, createComponent, createComponents, destroy, destroyComponents, getComponents
error, log, warn
palm/controls/AlphaDivider.js
A divider designed to show a single letter as its caption. For example:
{kind: "AlphaDivider", caption: "S"}
caption: "" captionChanged: function(create: function(layoutKind
className, container, parent
allowHtml, content
showing, prepend
owner, name
onclick, onmousedown, onmouseup
broadcastMessage, destroyControls, getControls, indexOfControl, resized
addContent, getOffset, isDescendantOf
hide, render, renderInto, rendered, show
addClass, addRemoveClass, addStyles, applyStyle, getClassName, hasClass, hasNode, removeClass, setAttribute, setClassName, setStyle
create, createComponent, createComponents, destroy, destroyComponents, getComponents
error, log, warn
palm/controls/Header.js
A control styled as a header fitting across the top of the application region.
Content for Header can be specified either via the content property or by placing components in the Header. For example,
{kind: "Header", content: "Header"}
or
{kind: "Header", components: [
{content: "Header", flex: 1},
{kind: "Button", caption: "Right-aligned button"}
]}
layoutKind
className, container, parent
allowHtml, content
showing, prepend
owner, name
onclick, onmousedown, onmouseup
broadcastMessage, destroyControls, getControls, indexOfControl, resized
addContent, getOffset, isDescendantOf
hide, render, renderInto, rendered, show
addClass, addRemoveClass, addStyles, applyStyle, getClassName, hasClass, hasNode, removeClass, setAttribute, setClassName, setStyle
create, createComponent, createComponents, destroy, destroyComponents, getComponents
error, log, warn
palm/controls/PageHeader.js
A control styled as a header fitting across the top of the application window.
Content for PageHeader can be specified either via the content property or by placing components in the PageHeader. For example,
{kind: "PageHeader", content: "Header"}
or
{kind: "PageHeader", components: [
{content: "Header", flex: 1},
{kind: "Button", caption: "Right-aligned button"}
]}
layoutKind
className, container, parent
allowHtml, content
showing, prepend
owner, name
onclick, onmousedown, onmouseup
broadcastMessage, destroyControls, getControls, indexOfControl, resized
addContent, getOffset, isDescendantOf
hide, render, renderInto, rendered, show
addClass, addRemoveClass, addStyles, applyStyle, getClassName, hasClass, hasNode, removeClass, setAttribute, setClassName, setStyle
create, createComponent, createComponents, destroy, destroyComponents, getComponents
error, log, warn
palm/controls/Toolbar.js
A container for items presented at the bottom of the screen. By default, the items are instances of ToolButton.
Example toolbar with three buttons equally spaced apart:
{kind: "Toolbar", components: [
{caption: "foo"},
{kind: "Spacer"},
{caption: "bar"},
{kind: "Spacer"},
{caption: "baz"}
]}
Other controls to put in a Toolbar are RadioToolButtonGroup and ToolButtonGroup.
fadeOnKeyboard: false Fade the toolbar into view when the virtual keyboard is hidden or raised
layoutKind
className, container, parent
allowHtml, content
showing, prepend
owner, name
onclick, onmousedown, onmouseup
broadcastMessage, destroyControls, getControls, indexOfControl, resized
addContent, getOffset, isDescendantOf
hide, render, renderInto, rendered, show
addClass, addRemoveClass, addStyles, applyStyle, getClassName, hasClass, hasNode, removeClass, setAttribute, setClassName, setStyle
create, createComponent, createComponents, destroy, destroyComponents, getComponents
error, log, warn
palm/controls/Item.js
A control designed to display a group of stacked items, typically used in lists. Items have small guide lines between them and, by default, are highlighted when tapped. Set tapHighlight to false to prevent the highlighting.
{flex: 1, name: "list", kind: "VirtualList", onSetupRow: "listSetupRow", components: [
{kind: "Item", onclick: "listItemClick"}
]}
tapHighlight: false disabled: false cssNamespace
layoutKind
className, container, parent
allowHtml, content
showing, prepend
owner, name
onclick, onmousedown, onmouseup
setState
broadcastMessage, destroyControls, getControls, indexOfControl, resized
addContent, getOffset, isDescendantOf
hide, render, renderInto, rendered, show
addClass, addRemoveClass, addStyles, applyStyle, getClassName, hasClass, hasNode, removeClass, setAttribute, setClassName, setStyle
create, createComponent, createComponents, destroy, destroyComponents, getComponents
error, log, warn
palm/controls/SwipeableItem.js
An item that can be swiped to show an inline confirmation prompt with confirm and cancel buttons. It is typically used to support swipe-to-delete in lists.
The onConfirm event is fired when the user taps the confirm button, or when the user swipes the item while confirmRequired is false. The event provides the index of the item. For example:
components: [
{flex: 1, name: "list", kind: "VirtualList", onSetupRow: "listSetupRow", components: [
{kind: "SwipeableItem", onConfirm: "deleteItem"}
]}
],
deleteItem: function(inSender, inIndex) {
// remove data
this.someData.splice(inIndex, 1);
}
swipeable: true Set to false to prevent swiping.
confirmRequired: true
If false, no confirm prompt is displayed, and swipes immediately trigger an onConfirm event.
confirmCaption: enyo._$L("Delete")
Caption shown for the confirm button in the confirm prompt.
cancelCaption: enyo._$L("Cancel")
Caption shown for the cancel button in the confirm prompt.
confirmShowing: false confirmWhenAutoHidden: false
If the confirm prompt is automatically hidden--for example, in a list context when a confirm prompt is shown for another row--automatically send an onConfirm event.
allowLeft: true
Allows the item to be swiped to the left.
onConfirm: "" Event fired when the user clicks the confirm button or, if confirmRequired is false, when the item is swiped. The event includes the index of the swiped item.
onCancel: "" Event fired when the user clicks the cancel button in the confirm prompt. The event includes the index of the swiped item.
onSwipe: "" Event fired when the user swipes the item. The event includes the index of the swiped item.
onConfirmShowingChanged: "" Event fired when the confirm prompt is shown or hidden.
onDrag: "" Event fired repeatedly as the item is dragged. Includes the total x pixel delta from at-rest position.
tapHighlight, disabled
cssNamespace
layoutKind
className, container, parent
allowHtml, content
showing, prepend
owner, name
onclick, onmousedown, onmouseup
setState
broadcastMessage, destroyControls, getControls, indexOfControl, resized
addContent, getOffset, isDescendantOf
hide, render, renderInto, rendered, show
addClass, addRemoveClass, addStyles, applyStyle, getClassName, hasClass, hasNode, removeClass, setAttribute, setClassName, setStyle
create, createComponent, createComponents, destroy, destroyComponents, getComponents
error, log, warn
palm/controls/menu/Menu.js
A control that displays a set of items in a popup.
{kind: "Menu"}
Items can be specified as child components of the Menu:
{kind: "Menu", components: [
{caption: "Palm"},
{caption: "Yahoo"},
{caption: "Facebook"}
]}
Items can also be set with setItems, like this:
this.$.menu.setItems(["Palm", "Yahoo", "Facebook"]);
By default, items are instances of MenuItem. But you can change this to use different kinds for items. Here is an example using MenuCheckItem:
{kind: "Menu", defaultKind: "MenuCheckItem"}
To open the popup menu at the center, do the following:
openPopup: function() {
this.$.menu.openAtCenter();
}
autoCloseSubItems: true showHideMode, openClassName, showKeyboardWhenOpening
modal, dismissWithClick, dismissWithEscape, shareScrim, scrimWhenModal, scrim, scrimClassName, autoClose
layoutKind
className, container, parent
allowHtml, content
showing, prepend
owner, name
onBeforeOpen, onOpen, onClose
onclick, onmousedown, onmouseup
openAroundControl, openAt, openAtCenter, openAtControl, openAtEvent, openNear
close, open, toggleOpen
componentsReady, initComponents, validateComponents
broadcastMessage, destroyControls, getControls, indexOfControl, resized
addContent, getOffset, isDescendantOf
hide, render, renderInto, rendered, show
addClass, addRemoveClass, addStyles, applyStyle, getClassName, hasClass, hasNode, removeClass, setAttribute, setClassName, setStyle
create, createComponent, createComponents, destroy, destroyComponents, getComponents
error, log, warn
palm/controls/menu/MenuItem.js
A labeled item with icon. It is meant to go inside a Menu.
caption: "" value: undefined icon: "" orderStyle: "" open: false disabled: false hideIcon: false tapHighlight: true onclick: "menuItemClick" layoutKind
className, container, parent
allowHtml, content
showing, prepend
owner, name
onclick, onmousedown, onmouseup
broadcastMessage, destroyControls, getControls, indexOfControl, resized
addContent, getOffset, isDescendantOf
hide, render, renderInto, rendered, show
addClass, addRemoveClass, addStyles, applyStyle, getClassName, hasClass, hasNode, removeClass, setAttribute, setClassName, setStyle
create, createComponent, createComponents, destroy, destroyComponents, getComponents
error, log, warn
An labeled item with icon and checkmark. It is meant to go inside a Menu.
checked: false caption, value, icon, orderStyle, open, disabled, hideIcon, tapHighlight
layoutKind
className, container, parent
allowHtml, content
showing, prepend
owner, name
onclick
onclick, onmousedown, onmouseup
broadcastMessage, destroyControls, getControls, indexOfControl, resized
addContent, getOffset, isDescendantOf
hide, render, renderInto, rendered, show
addClass, addRemoveClass, addStyles, applyStyle, getClassName, hasClass, hasNode, removeClass, setAttribute, setClassName, setStyle
create, createComponent, createComponents, destroy, destroyComponents, getComponents
error, log, warn
palm/controls/popup/PopupSelect.js
A Menu with support for selection.
{kind: "PopupSelect", onSelect: "popupSelect"}
The onSelect event is fired when a selection is made, like so:
popupSelect: function(inSender, inSelected) {
var value = inSelected.getValue();
}
items: []
An array of config objects or strings representing items. Note that specified components are automatically added to the items array. Items are owned by the PopupSelect and therefore event handlers should not be specified on them. Use the onSelect event to respond to an item selection.
selected: null onSelect: "" componentsReady: function(importProps: function(inProps autoCloseSubItems
showHideMode, openClassName, showKeyboardWhenOpening
modal, dismissWithClick, dismissWithEscape, shareScrim, scrimWhenModal, scrim, scrimClassName, autoClose
layoutKind
className, container, parent
allowHtml, content
showing, prepend
owner, name
onBeforeOpen, onOpen, onClose
onclick, onmousedown, onmouseup
openAroundControl, openAt, openAtCenter, openAtControl, openAtEvent, openNear
close, open, toggleOpen
componentsReady, initComponents, validateComponents
broadcastMessage, destroyControls, getControls, indexOfControl, resized
addContent, getOffset, isDescendantOf
hide, render, renderInto, rendered, show
addClass, addRemoveClass, addStyles, applyStyle, getClassName, hasClass, hasNode, removeClass, setAttribute, setClassName, setStyle
create, createComponent, createComponents, destroy, destroyComponents, getComponents
error, log, warn
palm/controls/popup/PopupList.js
A PopupSelect that renders items inside a VirtualRepeater.
{kind: "PopupList", onSelect: "popupSelect"}
To set items, use setItems:
this.$.popupList.setItems([
"Jan", "Feb", "Mar", "Apr", "May", "Jun",
"Jul", "Aug", "Sep", "Oct", "Nov", "Dec"
]);
onSetupItem: "" items, selected
autoCloseSubItems
showHideMode, openClassName, showKeyboardWhenOpening
modal, dismissWithClick, dismissWithEscape, shareScrim, scrimWhenModal, scrim, scrimClassName, autoClose
layoutKind
className, container, parent
allowHtml, content
showing, prepend
owner, name
onSelect
onBeforeOpen, onOpen, onClose
onclick, onmousedown, onmouseup
componentsReady, importProps
openAroundControl, openAt, openAtCenter, openAtControl, openAtEvent, openNear
close, open, toggleOpen
componentsReady, initComponents, validateComponents
broadcastMessage, destroyControls, getControls, indexOfControl, resized
addContent, getOffset, isDescendantOf
hide, render, renderInto, rendered, show
addClass, addRemoveClass, addStyles, applyStyle, getClassName, hasClass, hasNode, removeClass, setAttribute, setClassName, setStyle
create, createComponent, createComponents, destroy, destroyComponents, getComponents
error, log, warn
palm/controls/popup/ModalDialog.js
A fixed width Popup, with a header, designed to be used as an interactive dialog box.
{kind: "ModalDialog", caption: "Dialog Title"}
caption: "" contentHeight: ""
Height to apply to the content of the popup. Specify a value for this when the popup's content should be explicitly, rather than naturally, sized.
contentClassName: ""
Name of a CSS class to apply to the content of the popup.
calcContentSizeDelta: function(captionChanged: function(componentsReady: function(contentClassNameChanged: function(inOldValue contentHeightChanged: function(create: function(layoutKindChanged: function(showHideMode, openClassName, showKeyboardWhenOpening
modal, dismissWithClick, dismissWithEscape, shareScrim, scrimWhenModal, scrim, scrimClassName, autoClose
layoutKind
className, container, parent
allowHtml, content
showing, prepend
owner, name
onBeforeOpen, onOpen, onClose
onclick, onmousedown, onmouseup
openAroundControl, openAt, openAtCenter, openAtControl, openAtEvent, openNear
close, open, toggleOpen
componentsReady, initComponents, validateComponents
broadcastMessage, destroyControls, getControls, indexOfControl, resized
addContent, getOffset, isDescendantOf
hide, render, renderInto, rendered, show
addClass, addRemoveClass, addStyles, applyStyle, getClassName, hasClass, hasNode, removeClass, setAttribute, setClassName, setStyle
create, createComponent, createComponents, destroy, destroyComponents, getComponents
error, log, warn
palm/controls/CustomListSelector.js
A control that provides a display similar to an HTML select, used to select one item from a set of many choices. When the CustomListSelector is tapped, a scrolling popup of available choices is shown. The user taps an item to select it, closing the popup and changing the displayed item to the selected one.
The items for a CustomListSelector can be specified as an array of strings or objects specifying a caption and a value. For example:
components: [
{kind: "CustomListSelector", value: 2, onChange: "itemChanged", items: [
{caption: "One", value: 1},
{caption: "Two", value: 2},
{caption: "Three", value: 3},
]}
],
itemChanged: function(inSender, inValue, inOldValue) {
this.setSomeOption(inValue);
}
The onChange event fires when the selected item changes. Note that the onSelect event fires whenever an item is selected.
The value of a CustomListSelector may be set directly or retrieved as follows:
buttonClick: function() {
if (this.$.customListSelector.getValue() > 10) {
this.$.customListSelector.setValue(10);
}
}
Note that you cannot set a value not in the items list.
The property hideItem can be used to hide the displayed item.
value: undefined The currently selected value.
items: [] An array of strings or objects specifying the item choices. If objects are specified, they are component configurations and do not specify a kind. Typically, a caption and value are specified.
label: "" A label descibing the set of available choices. It is shown to the left of the drop-down arrow.
hideItem: false Hides the displayed item.
hideArrow: false Hides the drop-down arrow.
disabled: false popupAlign: "right" Determines with which side of the list selector to align the popup; defaults to right, can also be left.
contentPack: "start" Determines if the content of the list selector is packed to start (default), middle, or end.
onChange: "" Event fired when the selected value changes. The event sends both the current and previous values.
onSelect: "" Event fired whenever an item is selected, even if it is the same item that was previously selected.
layoutKind
className, container, parent
allowHtml, content
showing, prepend
owner, name
onclick, onmousedown, onmouseup
broadcastMessage, destroyControls, getControls, indexOfControl, resized
addContent, getOffset, isDescendantOf
hide, render, renderInto, rendered, show
addClass, addRemoveClass, addStyles, applyStyle, getClassName, hasClass, hasNode, removeClass, setAttribute, setClassName, setStyle
create, createComponent, createComponents, destroy, destroyComponents, getComponents
error, log, warn
palm/controls/ListSelector.js
A control that provides a display similar to an HTML select, used to select one item from a set of many choices. When the ListSelector is tapped, a scrolling popup of available choices is shown. The user taps an item to select it, closing the popup and changing the displayed item to the selected one.
The items for a ListSelector can be specified as an array of strings or objects specifying a caption and a value. For example:
components: [
{kind: "ListSelector", value: 2, onChange: "itemChanged", items: [
{caption: "One", value: 1},
{caption: "Two", value: 2},
{caption: "Three", value: 3},
]}
],
itemChanged: function(inSender, inValue, inOldValue) {
this.setSomeOption(inValue);
}
ListSelector uses PopupList, which uses VirtualRepeater to render items to optimize creation and rendering time. This makes ListSelector less customizable; for example, it can't have different kinds for items. If you need to customize ListSelector, use CustomListSelector.
The onChange event fires when the selected item changes. Note that the onSelect event fires whenever an item is selected.
The value of a ListSelector may be set directly or retrieved as follows:
buttonClick: function() {
if (this.$.listSelector.getValue() > 10) {
this.$.listSelector.setValue(10);
}
}
Note that you cannot set a value not in the items list.
The property hideItem can be used to hide the displayed item.
value, items, label, hideItem, hideArrow, disabled, popupAlign, contentPack
layoutKind
className, container, parent
allowHtml, content
showing, prepend
owner, name
onChange, onSelect
onclick, onmousedown, onmouseup
broadcastMessage, destroyControls, getControls, indexOfControl, resized
addContent, getOffset, isDescendantOf
hide, render, renderInto, rendered, show
addClass, addRemoveClass, addStyles, applyStyle, getClassName, hasClass, hasNode, removeClass, setAttribute, setClassName, setStyle
create, createComponent, createComponents, destroy, destroyComponents, getComponents
error, log, warn
palm/controls/button/RadioGroup.js
A group of RadioButton objects laid out horizontally. Within the same radio group, tapping on one radio button will release any previously tapped radio button. The onChange event is fired when the selected radio button is changed.
{kind: "RadioGroup", onChange: "radioButtonSelected", components: [
{caption: "foo"},
{caption: "bar"},
{caption: "baz"}
]}
To get the value (or index) of the currently selected button, use getValue():
radioButtonSelected: function(inSender) {
this.log("Selected button" + inSender.getValue());
}
value: 0 onChange: "" layoutKind
className, container, parent
allowHtml, content
showing, prepend
owner, name
onclick, onmousedown, onmouseup
broadcastMessage, destroyControls, getControls, indexOfControl, resized
addContent, getOffset, isDescendantOf
hide, render, renderInto, rendered, show
addClass, addRemoveClass, addStyles, applyStyle, getClassName, hasClass, hasNode, removeClass, setAttribute, setClassName, setStyle
create, createComponent, createComponents, destroy, destroyComponents, getComponents
error, log, warn
palm/controls/button/RadioButton.js
An IconButton meant to go inside a RadioGroup. The value property identifies the button in the group. If this property is not set, the index of the button is used.
{kind: "RadioButton", value: "foo"}
value: "" depressed: false onmousedown: "" icon, iconIsClassName
caption, disabled, isDefault, down, depressed, hot, toggling, allowDrag
cssNamespace
layoutKind
className, container, parent
allowHtml, content
showing, prepend
owner, name
onclick, onmousedown, onmouseup
setState
broadcastMessage, destroyControls, getControls, indexOfControl, resized
addContent, getOffset, isDescendantOf
hide, render, renderInto, rendered, show
addClass, addRemoveClass, addStyles, applyStyle, getClassName, hasClass, hasNode, removeClass, setAttribute, setClassName, setStyle
create, createComponent, createComponents, destroy, destroyComponents, getComponents
error, log, warn
palm/controls/button/TabGroup.js
A TabGroup is a RadioGroup with tab bar styling.
value
layoutKind
className, container, parent
allowHtml, content
showing, prepend
owner, name
onChange
onclick, onmousedown, onmouseup
broadcastMessage, destroyControls, getControls, indexOfControl, resized
addContent, getOffset, isDescendantOf
hide, render, renderInto, rendered, show
addClass, addRemoveClass, addStyles, applyStyle, getClassName, hasClass, hasNode, removeClass, setAttribute, setClassName, setStyle
create, createComponent, createComponents, destroy, destroyComponents, getComponents
error, log, warn
palm/controls/button/TabButton.js
A TabButton is a RadioButton meant to go inside a TabGroup.
value, depressed
icon, iconIsClassName
caption, disabled, isDefault, down, depressed, hot, toggling, allowDrag
cssNamespace
layoutKind
className, container, parent
allowHtml, content
showing, prepend
owner, name
onmousedown
onclick, onmousedown, onmouseup
setState
broadcastMessage, destroyControls, getControls, indexOfControl, resized
addContent, getOffset, isDescendantOf
hide, render, renderInto, rendered, show
addClass, addRemoveClass, addStyles, applyStyle, getClassName, hasClass, hasNode, removeClass, setAttribute, setClassName, setStyle
create, createComponent, createComponents, destroy, destroyComponents, getComponents
error, log, warn
palm/controls/menu/AppMenu.js
An application menu that appears in the upper left corner of the screen when the user taps the left-hand side of the status bar.
By default, an application menu's items are instances of AppMenuItem.
Example menu with two items and a submenu:
{kind: "AppMenu", components: [
{caption: "New Card", onclick: "openNewCard"},
{caption: "Help"},
{caption: "Find", components: [
{caption: "Find Next"},
{caption: "Find Prev"}
]}
]}
To signal that the app menu should be shown, an "openAppMenu" event is fired to the application. When it should be hidden, a "closeAppMenu" event is fired. An application should implement methods to respond to these events as follows:
openAppMenuHandler: function() {
this.$.appMenu.open();
},
closeAppMenuHandler: function() {
this.$.appMenu.close();
}
automatic: true autoCloseSubItems
showHideMode, openClassName, showKeyboardWhenOpening
modal, dismissWithClick, dismissWithEscape, shareScrim, scrimWhenModal, scrim, scrimClassName, autoClose
layoutKind
className, container, parent
allowHtml, content
showing, prepend
owner, name
onBeforeOpen, onOpen, onClose
onclick, onmousedown, onmouseup
openAroundControl, openAt, openAtCenter, openAtControl, openAtEvent, openNear
close, open, toggleOpen
componentsReady, initComponents, validateComponents
broadcastMessage, destroyControls, getControls, indexOfControl, resized
addContent, getOffset, isDescendantOf
hide, render, renderInto, rendered, show
addClass, addRemoveClass, addStyles, applyStyle, getClassName, hasClass, hasNode, removeClass, setAttribute, setClassName, setStyle
create, createComponent, createComponents, destroy, destroyComponents, getComponents
error, log, warn
palm/controls/menu/AppMenuItem.js
create: function(caption, value, icon, orderStyle, open, disabled, hideIcon, tapHighlight
layoutKind
className, container, parent
allowHtml, content
showing, prepend
owner, name
onclick
onclick, onmousedown, onmouseup
broadcastMessage, destroyControls, getControls, indexOfControl, resized
addContent, getOffset, isDescendantOf
hide, render, renderInto, rendered, show
addClass, addRemoveClass, addStyles, applyStyle, getClassName, hasClass, hasNode, removeClass, setAttribute, setClassName, setStyle
create, createComponent, createComponents, destroy, destroyComponents, getComponents
error, log, warn
palm/controls/menu/HelpMenu.js
Menu item for Help. Should be used by an application to provide user access to additional help content. It is meant to be used inside an enyo.AppMenu.
{kind: "AppMenu", components: [
{kind: "EditMenu"},
{kind: "HelpMenu", target: "http://help.palm.com/phone/index.html"}
]}
For internal HP/Palm applications, this will start the on-device Help application. If the target points outside the palm.com domain, this will instead launch the web browser to display the content.
target: "" itemClick: function(caption, value, icon, orderStyle, open, disabled, hideIcon, tapHighlight
layoutKind
className, container, parent
allowHtml, content
showing, prepend
owner, name
onclick
onclick, onmousedown, onmouseup
create
broadcastMessage, destroyControls, getControls, indexOfControl, resized
addContent, getOffset, isDescendantOf
hide, render, renderInto, rendered, show
addClass, addRemoveClass, addStyles, applyStyle, getClassName, hasClass, hasNode, removeClass, setAttribute, setClassName, setStyle
create, createComponent, createComponents, destroy, destroyComponents, getComponents
error, log, warn
palm/controls/button/ToolButtonGroup.js
A container for a group of buttons designed to go inside a Toolbar. The buttons are laid out horizontally.
By default, the components in a menu toolbar are instances of GroupedToolButton.
{kind: "Toolbar", components: [
{kind: "ToolButtonGroup", components: [
{icon: "images/menu-icon-back.png", onclick: "goBack"},
{icon: "images/menu-icon-forward.png", onclick: "goForward"},
{icon: "images/menu-icon-refresh.png", onclick: "refresh"}
]}
]}
layoutKind
className, container, parent
allowHtml, content
showing, prepend
owner, name
onclick, onmousedown, onmouseup
broadcastMessage, destroyControls, getControls, indexOfControl, resized
addContent, getOffset, isDescendantOf
hide, render, renderInto, rendered, show
addClass, addRemoveClass, addStyles, applyStyle, getClassName, hasClass, hasNode, removeClass, setAttribute, setClassName, setStyle
create, createComponent, createComponents, destroy, destroyComponents, getComponents
error, log, warn
palm/controls/menu/EditMenu.js
A submenu with items to perform select all, cut, copy, and paste commands. It is meant to go inside an AppMenu.
{kind: "AppMenu", components: [
{kind: "EditMenu"},
{caption: "Some other item"}
]}
autoDisableItems: true If true, edit menu items will automatically disable if the focused element does not support editing. This setting will override the individual item disabled properties.
selectAllDisabled: false cutDisabled: false copyDisabled: false pasteDisabled: false showShortcuts: false onSelectAll: "" onCut: "" onCopy: "" onPaste: "" caption, value, icon, orderStyle, open, disabled, hideIcon, tapHighlight
layoutKind
className, container, parent
allowHtml, content
showing, prepend
owner, name
onclick
onclick, onmousedown, onmouseup
create
broadcastMessage, destroyControls, getControls, indexOfControl, resized
addContent, getOffset, isDescendantOf
hide, render, renderInto, rendered, show
addClass, addRemoveClass, addStyles, applyStyle, getClassName, hasClass, hasNode, removeClass, setAttribute, setClassName, setStyle
create, createComponent, createComponents, destroy, destroyComponents, getComponents
error, log, warn
palm/controls/menu/EditMenuItem.js
palm/controls/button/GroupedToolButton.js
An IconButton with menu styling. It is meant to go inside a ToolButtonGroup.
icon, iconIsClassName
caption, disabled, isDefault, down, depressed, hot, toggling, allowDrag
cssNamespace
layoutKind
className, container, parent
allowHtml, content
showing, prepend
owner, name
onclick, onmousedown, onmouseup
setState
broadcastMessage, destroyControls, getControls, indexOfControl, resized
addContent, getOffset, isDescendantOf
hide, render, renderInto, rendered, show
addClass, addRemoveClass, addStyles, applyStyle, getClassName, hasClass, hasNode, removeClass, setAttribute, setClassName, setStyle
create, createComponent, createComponents, destroy, destroyComponents, getComponents
error, log, warn
palm/controls/button/RadioToolButton.js
A RadioToolButton with toolbar styling. It is meant to go inside a RadioToolButtonGroup.
value, depressed
icon, iconIsClassName
caption, disabled, isDefault, down, depressed, hot, toggling, allowDrag
cssNamespace
layoutKind
className, container, parent
allowHtml, content
showing, prepend
owner, name
onmousedown
onclick, onmousedown, onmouseup
setState
broadcastMessage, destroyControls, getControls, indexOfControl, resized
addContent, getOffset, isDescendantOf
hide, render, renderInto, rendered, show
addClass, addRemoveClass, addStyles, applyStyle, getClassName, hasClass, hasNode, removeClass, setAttribute, setClassName, setStyle
create, createComponent, createComponents, destroy, destroyComponents, getComponents
error, log, warn
palm/controls/button/RadioToolButtonGroup.js
A group of RadioToolButton objects with toolbar styling.
{kind: "RadioToolButtonGroup", components: [
{icon: "images/foo.png"},
{label: "bar"},
{icon: "images/baz.png"}
]}
Also see RadioGroup for more examples.
value
layoutKind
className, container, parent
allowHtml, content
showing, prepend
owner, name
onChange
onclick, onmousedown, onmouseup
broadcastMessage, destroyControls, getControls, indexOfControl, resized
addContent, getOffset, isDescendantOf
hide, render, renderInto, rendered, show
addClass, addRemoveClass, addStyles, applyStyle, getClassName, hasClass, hasNode, removeClass, setAttribute, setClassName, setStyle
create, createComponent, createComponents, destroy, destroyComponents, getComponents
error, log, warn
palm/controls/picker/PickerButton.js
A button that serves as a base control for Picker.
focus: false onFocusChange: "" caption, disabled, isDefault, down, depressed, hot, toggling, allowDrag
cssNamespace
layoutKind
className, container, parent
allowHtml, content
showing, prepend
owner, name
onclick, onmousedown, onmouseup
setState
broadcastMessage, destroyControls, getControls, indexOfControl, resized
addContent, getOffset, isDescendantOf
hide, render, renderInto, rendered, show
addClass, addRemoveClass, addStyles, applyStyle, getClassName, hasClass, hasNode, removeClass, setAttribute, setClassName, setStyle
create, createComponent, createComponents, destroy, destroyComponents, getComponents
error, log, warn
palm/controls/picker/Picker.js
A control offering a selection of items.
A picker can be initialized with a simple array of strings, like so:
{kind: "Picker", value: "name", items: ["title", "name", "first last", "bool"], onChange: "pickerPick"}
You can also specify caption and value seperately, like so:
{kind: "Picker", value: "am", items: [
{caption: "A.M.", value: "am"},
{caption: "P.M.", value: "pm"}
]}
The selected item can be retrieved by calling getValue, like so:
pickerPick: function(inSender) {
this.fieldType = this.$.picker.getValue();
}
value: "" textAlign: "center" items: [] An array of simple strings representing items.
scrim: false modal: true onChange: "" focus
caption, disabled, isDefault, down, depressed, hot, toggling, allowDrag
cssNamespace
layoutKind
className, container, parent
allowHtml, content
showing, prepend
owner, name
onFocusChange
onclick, onmousedown, onmouseup
setState
broadcastMessage, destroyControls, getControls, indexOfControl, resized
addContent, getOffset, isDescendantOf
hide, render, renderInto, rendered, show
addClass, addRemoveClass, addStyles, applyStyle, getClassName, hasClass, hasNode, removeClass, setAttribute, setClassName, setStyle
create, createComponent, createComponents, destroy, destroyComponents, getComponents
error, log, warn
palm/controls/picker/IntegerPicker.js
A control that allows selection from a single integer field. The default selection range is 0-9. You can adjust the range by setting the min and max properties.
{kind: "IntegerPicker", label: "rating", min: 0, max: 10, onChange: "pickerChange"}
The selected integer can be retrieved by calling getValue, like so:
pickerPick: function(inSender) {
var rating = this.$.integerPicker.getValue();
}
label: "value" value: 0 min: 0 max: 9 onChange: "" layoutKind
className, container, parent
allowHtml, content
showing, prepend
owner, name
onclick, onmousedown, onmouseup
broadcastMessage, destroyControls, getControls, indexOfControl, resized
addContent, getOffset, isDescendantOf
hide, render, renderInto, rendered, show
addClass, addRemoveClass, addStyles, applyStyle, getClassName, hasClass, hasNode, removeClass, setAttribute, setClassName, setStyle
create, createComponent, createComponents, destroy, destroyComponents, getComponents
error, log, warn
palm/controls/picker/PickerGroup.js
A container used to group multiple Pickers together.
{kind: "PickerGroup", label: "preferences", onChange: "pickerPick", components: [
{name: "searchEnginePicker", value: "Google", items: ["Google", "Yahoo", "Bing"]},
{name: "contactTypePicker", value: "Mail", items: ["Mail", "IM", "Text"]}
]}
The selected items can be retrieved by calling getValue, like so:
pickerPick: function(inSender) {
this.searchEngine = this.$.searchEnginePicker.getValue();
this.contactType = this.$.contactTypePicker.getValue();
}
label: "" labelClass: "" onChange: "" layoutKind
className, container, parent
allowHtml, content
showing, prepend
owner, name
onclick, onmousedown, onmouseup
broadcastMessage, destroyControls, getControls, indexOfControl, resized
addContent, getOffset, isDescendantOf
hide, render, renderInto, rendered, show
addClass, addRemoveClass, addStyles, applyStyle, getClassName, hasClass, hasNode, removeClass, setAttribute, setClassName, setStyle
create, createComponent, createComponents, destroy, destroyComponents, getComponents
error, log, warn
palm/controls/picker/TimePicker.js
A PickerGroup that offers selection of the hour and minutes, with an optional AM/PM selector. The TimePicker uses the JavaScript Date object to represent the chosen time.
{kind: "TimePicker", label: "start time", onChange: "pickerPick"}
The selected time can be retrieved by calling getValue, like so:
pickerPick: function(inSender) {
var startTime = this.$.timePicker.getValue();
}
To enable 24-hour mode, do this:
{kind: "TimePicker", label: "start time", is24HrMode: true, onChange: "pickerPick"}
label: enyo._$L("time") value: null minuteInterval: 1 is24HrMode: null label, labelClass
layoutKind
className, container, parent
allowHtml, content
showing, prepend
owner, name
onChange
onclick, onmousedown, onmouseup
broadcastMessage, destroyControls, getControls, indexOfControl, resized
addContent, getOffset, isDescendantOf
hide, render, renderInto, rendered, show
addClass, addRemoveClass, addStyles, applyStyle, getClassName, hasClass, hasNode, removeClass, setAttribute, setClassName, setStyle
create, createComponent, createComponents, destroy, destroyComponents, getComponents
error, log, warn
palm/controls/picker/DatePicker.js
A PickerGroup that offers selection of the month, day and year. The DatePicker uses the JavaScript Date object to represent the chosen date.
{kind: "DatePicker", label: "birthday", onChange: "pickerPick"}
The selected date can be retrieved by calling getValue, like so:
pickerPick: function(inSender) {
var bDate = this.$.datePicker.getValue();
}
The year range can be adjusted by setting the minYear and maxYear properties, like so:
{kind: "DatePicker", label: "birthday", minYear: 1900, maxYear: 2011, onChange: "pickerPick"}
label: enyo._$L("date") value: null hideDay: false hideMonth: false hideYear: false minYear: 1900 maxYear: 2099 label, labelClass
layoutKind
className, container, parent
allowHtml, content
showing, prepend
owner, name
onChange
onclick, onmousedown, onmouseup
broadcastMessage, destroyControls, getControls, indexOfControl, resized
addContent, getOffset, isDescendantOf
hide, render, renderInto, rendered, show
addClass, addRemoveClass, addStyles, applyStyle, getClassName, hasClass, hasNode, removeClass, setAttribute, setClassName, setStyle
create, createComponent, createComponents, destroy, destroyComponents, getComponents
error, log, warn
palm/controls/progress/ProgressBar.js
A control that shows the current progress of a process in a horizontal bar. By default, it animates progress changes.
{kind: "ProgressBar"}
{kind: "ProgressBar", animationPosition: false}
See Progress for usage examples.
animatePosition: true Controls whether progress changes are animated.
onBeginAnimation: "" onEndAnimation: "" setPositionImmediate: function(inPosition Set position immediately to the given position, bypassing animation.
maximum, minimum, position, snap
layoutKind
className, container, parent
allowHtml, content
showing, prepend
owner, name
onclick, onmousedown, onmouseup
broadcastMessage, destroyControls, getControls, indexOfControl, resized
addContent, getOffset, isDescendantOf
hide, render, renderInto, rendered, show
addClass, addRemoveClass, addStyles, applyStyle, getClassName, hasClass, hasNode, removeClass, setAttribute, setClassName, setStyle
create, createComponent, createComponents, destroy, destroyComponents, getComponents
error, log, warn
palm/controls/progress/ProgressBarItem.js
A progress bar that looks like a list item.
{kind: "ProgressBarItem"}
See Progress for usage examples.
create: function(animatePosition
maximum, minimum, position, snap
layoutKind
className, container, parent
allowHtml, content
showing, prepend
owner, name
onBeginAnimation, onEndAnimation
onclick, onmousedown, onmouseup
setPositionImmediate
broadcastMessage, destroyControls, getControls, indexOfControl, resized
addContent, getOffset, isDescendantOf
hide, render, renderInto, rendered, show
addClass, addRemoveClass, addStyles, applyStyle, getClassName, hasClass, hasNode, removeClass, setAttribute, setClassName, setStyle
create, createComponent, createComponents, destroy, destroyComponents, getComponents
error, log, warn
palm/controls/progress/ProgressButton.js
A progress bar that looks like a list item.
{kind: "ProgressButton"}
See Progress for usage examples.
cancelable: true onCancel: "" cancelableChanged: function(create: function(animatePosition
maximum, minimum, position, snap
layoutKind
className, container, parent
allowHtml, content
showing, prepend
owner, name
onBeginAnimation, onEndAnimation
onclick, onmousedown, onmouseup
setPositionImmediate
broadcastMessage, destroyControls, getControls, indexOfControl, resized
addContent, getOffset, isDescendantOf
hide, render, renderInto, rendered, show
addClass, addRemoveClass, addStyles, applyStyle, getClassName, hasClass, hasNode, removeClass, setAttribute, setClassName, setStyle
create, createComponent, createComponents, destroy, destroyComponents, getComponents
error, log, warn
palm/controls/progress/Slider.js
A control that presents a range of selection options in the form of a horizontal slider with a control knob that can be tapped and dragged to the desired location.
{kind: "Slider", onChanging: "sliderChanging", onChange: "sliderChange"}
The onChanging event is fired when dragging the control knob. The onChange event is fired when the position is set, either by finishing a drag or by tapping the bar.
tapPosition: true Controls whether position may be set by tapping an arbitrary position on the bar. If false, position may only be set by dragging the knob.
onChange: "" onChanging: "" animatePosition
maximum, minimum, position, snap
layoutKind
className, container, parent
allowHtml, content
showing, prepend
owner, name
onBeginAnimation, onEndAnimation
onclick, onmousedown, onmouseup
setPositionImmediate
broadcastMessage, destroyControls, getControls, indexOfControl, resized
addContent, getOffset, isDescendantOf
hide, render, renderInto, rendered, show
addClass, addRemoveClass, addStyles, applyStyle, getClassName, hasClass, hasNode, removeClass, setAttribute, setClassName, setStyle
create, createComponent, createComponents, destroy, destroyComponents, getComponents
error, log, warn
palm/controls/progress/ProgressSlider.js
A control that combines a Slider with a ProgressBar.
{kind: "ProgressSlider"}
The lockBar, barPosition, barMinimum, and barMaximum properties can be used to constrain user input. The barPosition, barMinimum, and barMaximum properties are only active when lockBar is true.
For example, to make a progress slider that allows dragging between 50 and 70, do this:
{kind: "ProgressSlider", lockBar: true, barMinimum: 50, barMaximum: 70}
To make a progress slider that snaps to multiples of 10, do this:
{kind: "ProgressSlider", lockBar: true, snap: 10}
lockBar: false barPosition: 0 altBarPosition: 0 barMinimum: 0 barMaximum: 100 tapPosition
animatePosition
maximum, minimum, position, snap
layoutKind
className, container, parent
allowHtml, content
showing, prepend
owner, name
onChange, onChanging
onBeginAnimation, onEndAnimation
onclick, onmousedown, onmouseup
setPositionImmediate
broadcastMessage, destroyControls, getControls, indexOfControl, resized
addContent, getOffset, isDescendantOf
hide, render, renderInto, rendered, show
addClass, addRemoveClass, addStyles, applyStyle, getClassName, hasClass, hasNode, removeClass, setAttribute, setClassName, setStyle
create, createComponent, createComponents, destroy, destroyComponents, getComponents
error, log, warn
palm/controls/ConfirmPrompt.js
A prompt with confirm and cancel buttons. The onConfirm and onCancel events fire when the user clicks the confirm and cancel buttons, respectively.
confirmCaption: enyo._$L("Confirm") cancelCaption: enyo._$L("Cancel") onConfirm: "confirmAction" onCancel: "cancelAction" layoutKind
className, container, parent
allowHtml, content
showing, prepend
owner, name
onclick, onmousedown, onmouseup
broadcastMessage, destroyControls, getControls, indexOfControl, resized
addContent, getOffset, isDescendantOf
hide, render, renderInto, rendered, show
addClass, addRemoveClass, addStyles, applyStyle, getClassName, hasClass, hasNode, removeClass, setAttribute, setClassName, setStyle
create, createComponent, createComponents, destroy, destroyComponents, getComponents
error, log, warn
A prompt with confirm and cancel buttons that scrims the rest of the application when shown.
confirmCaption: enyo._$L("Confirm") cancelCaption: enyo._$L("Cancel") onConfirm: "" onCancel: "" layoutKind
className, container, parent
allowHtml, content
showing, prepend
owner, name
onclick, onmousedown, onmouseup
broadcastMessage, destroyControls, getControls, indexOfControl, resized
addContent, getOffset, isDescendantOf
hide, render, renderInto, rendered, show
addClass, addRemoveClass, addStyles, applyStyle, getClassName, hasClass, hasNode, removeClass, setAttribute, setClassName, setStyle
create, createComponent, createComponents, destroy, destroyComponents, getComponents
error, log, warn
palm/controls/Spacer.js
A control that fills the space between other controls in a flex layout by setting its flex property to 1. For example:
{kind: "HFlexBox", components: [
{kind: "Button", caption: "On the left"},
{kind: "Spacer"},
{kind: "Button", caption: "On the right"}
]}
layoutKind
className, container, parent
allowHtml, content
showing, prepend
owner, name
onclick, onmousedown, onmouseup
broadcastMessage, destroyControls, getControls, indexOfControl, resized
addContent, getOffset, isDescendantOf
hide, render, renderInto, rendered, show
addClass, addRemoveClass, addStyles, applyStyle, getClassName, hasClass, hasNode, removeClass, setAttribute, setClassName, setStyle
create, createComponent, createComponents, destroy, destroyComponents, getComponents
error, log, warn
palm/controls/Hybrid.js
This control used to instantiate a PDK hybrid object within a Enyo application.
In order to have mouse events passed to the hybrid plugin, you need to add your own requiresDomMousedown property to the control with the value true.
Non-visible plugins are supported with width and height of 0. They are still in the DOM of the page, and re-rendering them will cause the plugin executable to be shutdown and restarted. The enyo.Hybrid code will automatically apply a "float: left" style to 0-size plugins so they don't interfere with page layout.
If you use a hybrid in a non-webOS context, only the width and height properties are used, creating an inert object with no methods or behavior. This is mainly useful for testing how the control interacts with your application layout.
executable: "" REQUIRED: name of plugin executable to run
params: [] an array of strings; if provided, used as command line parameters to plugin
alphaBlend: false set to true to enable premultiplied alpha-blending for plugins. Enable if you want to blend the plugin display contents with the HTML elements below it on the page. Set to false for faster drawing.
killTransparency: false set to true to stop plugin layer from clearing transparency information from display surface. Should always be used with alphaBlend: false. Used to allow showing video layer from video tag playback through a hybrid object.
cachePlugin: false if true, plugin will remain alive when hidden. Useful if you're hosting this in a pane or other part of the page where you don't want the plugin process to be killed and restarted later.
allowKeyboardFocus: false if true, allows plugin to get focus when tapped by setting its tabIndex property
passTouchEvents: false if true, plugin will register for touch events from WebKit
bgcolor: null background color to use for displaying plugin before initial draw or during resize. It's a string of the form, "rrggbb" using hex digits, with "000000" being black, "FFFFFF" being white. If null, use default gray color. This can only be set at creation time.
height: 0 height of the plugin object
width: 0 width of the plugin object
onPluginReady: "" sent when the plugin has is ready to allow method calls. This is either signaled directly by
remoteadapter on newer webOS builds or signaled by the plugin code using PDL_CallJS() to call the
"ready" method.
onPluginConnected: "" sent when the plugin executable has been started and has a made a connection back to the plugin.
onPluginDisconnected: "" sent when the plugin executable has disconnected, usually due to the process ending.
addCallback: function(name, callback, defer Add a callback function to the plugin object that can be called by PDL_CallJS() from the plugin.
name is a string, the name to use for the callback method on the plugin. callback is a function that
will be called with "this" pointing to the actual DOM node of the plugin, so use enyo.bind to redirect it
to the appropriate context. The defer parameter is an optional boolean. If true, the callback will be
called asynchronously so it can make calls back into the plugin.
callPluginMethod: function(methodName Call a method on the plugin with the result returned immediately to the caller. The arguments to the method are supplied as arguments to this function after the method name as a string. If the hybrid plugin is not ready for calls, this will throw an exception.
callPluginMethodDeferred: function(callback, methodName Call a method on the plugin with the result returned through a callback function. If the hybrid plugin is not ready for calls, this will defer the call to be done after the plugin is ready. You can pass null as the callback if you don't care about the result.
focus: function(tell the system to put focus on the hybrid window and show the on-screen keyboard if available
layoutKind
className, container, parent
allowHtml, content
showing, prepend
owner, name
onclick, onmousedown, onmouseup
broadcastMessage, destroyControls, getControls, indexOfControl, resized
addContent, getOffset, isDescendantOf
hide, render, renderInto, rendered, show
addClass, addRemoveClass, addStyles, applyStyle, getClassName, hasClass, hasNode, removeClass, setAttribute, setClassName, setStyle
create, createComponent, createComponents, destroy, destroyComponents, getComponents
error, log, warn
palm/containers/Group.js
A control used to show a series of controls visually grouped together. A group can optionally describe itself with a caption.
Here's an example:
{kind: "Group", caption: "Audio/Video Options", components: [
{kind: "HFlexBox", components: [
{content: "Sound", flex: 1},
{kind: "ToggleButton"}
]},
{kind: "HFlexBox", components: [
{content: "Video", flex: 1},
{kind: "ToggleButton"}
]}
]}
caption: "" contentFit: false If true, then the group's content is expanded to fit the size of the group. This should be used when the group is given an explicit size and its content should fit to that size.
layoutKind
className, container, parent
allowHtml, content
showing, prepend
owner, name
onclick, onmousedown, onmouseup
broadcastMessage, destroyControls, getControls, indexOfControl, resized
addContent, getOffset, isDescendantOf
hide, render, renderInto, rendered, show
addClass, addRemoveClass, addStyles, applyStyle, getClassName, hasClass, hasNode, removeClass, setAttribute, setClassName, setStyle
create, createComponent, createComponents, destroy, destroyComponents, getComponents
error, log, warn
palm/containers/RowGroup.js
A Group in which each control is automatically displayed in an Item, so they have small guide lines between them.
Here's an example:
{kind: "RowGroup", caption: "Audio/Video Options", components: [
{layoutKind: "HFlexLayout", components: [
{content: "Sound", flex: 1},
{kind: "ToggleButton"}
]},
{layoutKind: "HFlexLayout", components: [
{content: "Video", flex: 1},
{kind: "ToggleButton"}
]}
]}
constructor: function(hideRow: function(inIndex Hide the row at the given inIndex.
showRow: function(inIndex Show the row at the given inIndex.
caption, contentFit
layoutKind
className, container, parent
allowHtml, content
showing, prepend
owner, name
onclick, onmousedown, onmouseup
broadcastMessage, destroyControls, getControls, indexOfControl, resized
addContent, getOffset, isDescendantOf
hide, render, renderInto, rendered, show
addClass, addRemoveClass, addStyles, applyStyle, getClassName, hasClass, hasNode, removeClass, setAttribute, setClassName, setStyle
create, createComponent, createComponents, destroy, destroyComponents, getComponents
error, log, warn
addRemoveOrderClassName: function(inClass, inAdd setOrderStyle: function(inClass tapHighlight, disabled
cssNamespace
layoutKind
className, container, parent
allowHtml, content
showing, prepend
owner, name
onclick, onmousedown, onmouseup
setState
broadcastMessage, destroyControls, getControls, indexOfControl, resized
addContent, getOffset, isDescendantOf
hide, render, renderInto, rendered, show
addClass, addRemoveClass, addStyles, applyStyle, getClassName, hasClass, hasNode, removeClass, setAttribute, setClassName, setStyle
create, createComponent, createComponents, destroy, destroyComponents, getComponents
error, log, warn
palm/containers/DividerDrawer.js
A drawer with its caption styled to look like a divider. An arrow button shows the open state of the drawer.
A caption and an icon for the caption may be provided.
icon: "" URL for an image to be used as the icon.
caption: "" open, canChangeOpen, animate, captionClassName, caption
layoutKind
className, container, parent
allowHtml, content
showing, prepend
owner, name
onOpenChanged, onOpenAnimationComplete
onclick, onmousedown, onmouseup
close, open, toggleOpen
broadcastMessage, destroyControls, getControls, indexOfControl, resized
addContent, getOffset, isDescendantOf
hide, render, renderInto, rendered, show
addClass, addRemoveClass, addStyles, applyStyle, getClassName, hasClass, hasNode, removeClass, setAttribute, setClassName, setStyle
create, createComponent, createComponents, destroy, destroyComponents, getComponents
error, log, warn
palm/containers/Toaster.js
A Popup that displays a set of controls over other content. A toaster attaches to the bottom, left, right, or top of the screen and, when shown, slides in from off the screen.
Note, it's typically a good idea to control the vertical position of the toaster by giving it an absolute top and/or bottom position via css.
To show a toaster asking the user to confirm a choice, try the following:
components: [
{kind: "Button", caption: "Confirm choice", onclick: "showToaster"},
{kind: "Toaster", flyInFrom: "right", components: [
{content: "Are you sure?"},
{layoutKind: "HFlexLayout", pack: "center", components: [
{kind: "Button", caption: "OK", onclick: "confirmClick"},
{kind: "Button", caption: "Cancel", onclick: "cancelClick"}
]}
]}
],
showToaster: function() {
this.$.toaster.open();
},
confirmClick: function() {
// process confirmation
this.doConfirm();
// then close dialog
this.$.toaster.close();
},
cancelClick: function() {
this.$.toaster.close();
}
flyInFrom: "bottom" Direction from which the toaster should fly in when it is opened. One of: "bottom", "top", "left", or "right"
showHideMode, openClassName, showKeyboardWhenOpening
modal, dismissWithClick, dismissWithEscape, shareScrim, scrimWhenModal, scrim, scrimClassName, autoClose
layoutKind
className, container, parent
allowHtml, content
showing, prepend
owner, name
onBeforeOpen, onOpen, onClose
onclick, onmousedown, onmouseup
openAroundControl, openAt, openAtCenter, openAtControl, openAtEvent, openNear
close, open, toggleOpen
componentsReady, initComponents, validateComponents
broadcastMessage, destroyControls, getControls, indexOfControl, resized
addContent, getOffset, isDescendantOf
hide, render, renderInto, rendered, show
addClass, addRemoveClass, addStyles, applyStyle, getClassName, hasClass, hasNode, removeClass, setAttribute, setClassName, setStyle
create, createComponent, createComponents, destroy, destroyComponents, getComponents
error, log, warn
palm/containers/Dialog.js
A Popup that displays a set of controls over other content. A dialog attaches to the bottom of the screen and, when shown, animates up from the bottom of the screen.
To show a dialog asking the user to confirm a choice, try the following:
components: [
{kind: "Button", caption: "Confirm choice", onclick: "showDialog"},
{kind: "Dialog", components: [
{content: "Are you sure?"},
{layoutKind: "HFlexLayout", pack: "center", components: [
{kind: "Button", caption: "OK", onclick: "confirmClick"},
{kind: "Button", caption: "Cancel", onclick: "cancelClick"}
]}
]}
],
showDialog: function() {
this.$.dialog.open();
},
confirmClick: function() {
// process confirmation
this.doConfirm();
// then close dialog
this.$.dialog.close();
},
cancelClick: function() {
this.$.dialog.close();
}
flyInFrom
showHideMode, openClassName, showKeyboardWhenOpening
modal, dismissWithClick, dismissWithEscape, shareScrim, scrimWhenModal, scrim, scrimClassName, autoClose
layoutKind
className, container, parent
allowHtml, content
showing, prepend
owner, name
onBeforeOpen, onOpen, onClose
onclick, onmousedown, onmouseup
openAroundControl, openAt, openAtCenter, openAtControl, openAtEvent, openNear
close, open, toggleOpen
componentsReady, initComponents, validateComponents
broadcastMessage, destroyControls, getControls, indexOfControl, resized
addContent, getOffset, isDescendantOf
hide, render, renderInto, rendered, show
addClass, addRemoveClass, addStyles, applyStyle, getClassName, hasClass, hasNode, removeClass, setAttribute, setClassName, setStyle
create, createComponent, createComponents, destroy, destroyComponents, getComponents
error, log, warn
palm/containers/DialogPrompt.js
A special Dialog designed to prompt the user to answer a question affirmatively or negatively. It displays a title and message, along with accept and cancel buttons.
The title, message, acceptButtonCaption, and cancelButtonCaption can all be set as needed.
The onAccept and onCancel events are fired when the user clicks the accept and cancel buttons, respectively.
Here's an example:
{
kind: "DialogPrompt",
title: "Mood Prompt",
message: "Are you having a good day?",
acceptButtonCaption: "Yes",
cancelButtonCaption: "No",
onAccept: "fetchMoreWork",
onCancel: "fetchABreak"
}
title: "" message: "" acceptButtonCaption: enyo._$L("OK") cancelButtonCaption: enyo._$L("Cancel") onAccept: "" onCancel: "" open: function(inTitle, inMessage, inAcceptButtonCaption, inCancelButtonCaption flyInFrom
showHideMode, openClassName, showKeyboardWhenOpening
modal, dismissWithClick, dismissWithEscape, shareScrim, scrimWhenModal, scrim, scrimClassName, autoClose
layoutKind
className, container, parent
allowHtml, content
showing, prepend
owner, name
onBeforeOpen, onOpen, onClose
onclick, onmousedown, onmouseup
openAroundControl, openAt, openAtCenter, openAtControl, openAtEvent, openNear
close, open, toggleOpen
componentsReady, initComponents, validateComponents
broadcastMessage, destroyControls, getControls, indexOfControl, resized
addContent, getOffset, isDescendantOf
hide, render, renderInto, rendered, show
addClass, addRemoveClass, addStyles, applyStyle, getClassName, hasClass, hasNode, removeClass, setAttribute, setClassName, setStyle
create, createComponent, createComponents, destroy, destroyComponents, getComponents
error, log, warn
palm/containers/SlidingView.js
A view that slides back and forth and is designed to be a part of a SlidingPane.
SlidingView objects have a "dragAnywhere" property, whose default value is true. This allows the user to drag the view from any point inside the panel that is not already a draggable region (e.g., a Scroller). If dragAnywhere is set to false, then the view can still be dragged via any control inside it whose "slidingHandler" property is set to true.
The "peekWidth" property specifies the amount the paneview should be offset from the left when it is selected. This allows controls on the underlying view object to the left of the selected one to be partially revealed.
SlidingView has some other published properties that are less frequently used. The "minWidth" property specifies a minimum width for view content, and "edgeDragging" lets the user drag the view from its left edge. (The default value of edgeDragging is false.)
The last view in a SlidingPane is special, it is resized to fit the available space. The onResize event is fired when this occurs.
dragAnywhere: true Can drag panel from anywhere (note: does not work if there's another drag surface (e.g. scroller)).
edgeDragging: false Can drag/toggle by dragging on left edge of sliding panel.
fixedWidth: false Whether content width should or should not be adjusted based on size changes.
minWidth: 0 Minimum content width.
peekWidth: 0 Amount we should be shifted right to reveal panel underneath us when selected.
dismissible: false Whether or not the view may be dragged right to dismiss it
onResize: "" layoutKind
className, container, parent
allowHtml, content
showing, prepend
owner, name
onclick, onmousedown, onmouseup
broadcastMessage, destroyControls, getControls, indexOfControl, resized
addContent, getOffset, isDescendantOf
hide, render, renderInto, rendered, show
addClass, addRemoveClass, addStyles, applyStyle, getClassName, hasClass, hasNode, removeClass, setAttribute, setClassName, setStyle
create, createComponent, createComponents, destroy, destroyComponents, getComponents
error, log, warn
palm/containers/SlidingPane.js
A control designed to present a horizontal layout of SlidingView controls, which are panel controls that can slide one on top of another. The user can drag the views left and right and they'll stay connected. If a view is moved to the far left, it will cover any views to the left of it.
SlidingViews can have explicit width or be flexed. In either case, they are displayed in SlidingPane's client region, which is an HFlexBox. The view on the far right is special--it will always behave as flexed unless its fixedWidth property is set to true.
SlidingPane exposes the same selection methods as Pane. The selected view is the one displayed at the far left of the group.
SlidingGroup also has two layout modes--the normal layout, in which views are placed left-to-right, and a narrow layout, in which views are stacked, taking up the entire width of the SlidingPane. A SlidingPane can automatically toggle between these layouts if its resize method is hooked up to respond to window resizing. The "multiViewMinWidth" property has a default value of 500 and is the pivot point between the two layouts.
Here's an example:
{kind: "SlidingPane", flex: 1, components: [
{name: "left", width: "320px"},
{name: "middle", width: "320px", peekWidth: 68},
{name: "right", flex: 1, onResize: "slidingResize"}
]}
multiView: true multiViewMinWidth: 500 canAnimate: true dismissDistance: 100 onSlideComplete: "" transitionKind
layoutKind
className, container, parent
allowHtml, content
showing, prepend
owner, name
onSelectView, onCreateView
onclick, onmousedown, onmouseup
back, getView, getViewIndex, getViewName, next, selectView, selectViewByIndex, selectViewByName, validateView
broadcastMessage, destroyControls, getControls, indexOfControl, resized
addContent, getOffset, isDescendantOf
hide, render, renderInto, rendered, show
addClass, addRemoveClass, addStyles, applyStyle, getClassName, hasClass, hasNode, removeClass, setAttribute, setClassName, setStyle
create, createComponent, createComponents, destroy, destroyComponents, getComponents
error, log, warn
palm/services/PalmService.js
An asynchronous controller handling Palm Service (LS2) requests.
An Enyo service call is typically created in two parts: a component declaration and a method invocation on that component. The component describes the service endpoint and, optionally, how the results will be handled. The method invocation kicks it all off. The purpose of the component declaration is the same as for all components: to bring important flow information to the top level and refactor boilerplate code.
Add a Service component to describe as much as you know ahead of time about the request and its handling:
{
name: "listAccounts",
kind: "PalmService",
service: "palm://com.palm.service.accounts/",
method: "listAccounts",
onSuccess: "gotAccounts",
onFailure: "genericFailure",
subscribe: false
}
Declaring the component does not actually start a service request; it just sets everything up beforehand, so you can make the request later with a minimum of configuration. Be sure to hang the component off the most appropriate owner--the owner's lifecycle should fit the desired lifetime of the service call.
Call the service with some parameters:
this.$.listAccounts.call({
capability: "MAIL"
});
Handle the response in your onSuccess/onFailure/onResponse handler:
gotAccounts: function(inSender, inResponse) {
console.log("got these accounts: " + enyo.json.stringify(inResponse));
}
Response handlers are just specialized event handlers, so inSender here is the service. For PalmService objects, inResponse is a pre-parsed JavaScript object.
The different response events are fired under the following conditions:
You can also defer assignment of all the other properties of the request until the call is actually made. This is handy when you want to re-use a single service for different kinds of requests:
{name: "accounts", kind: "PalmService", onFailure: "genericFailure"}
...
this.$.accounts.call(
{
capability: "MAIL"
},
{
method: "listAccounts",
onSuccess: "gotAccounts"
}
);
this.$.accounts.call(
{
...
},
{
method: "createAccount",
onSuccess: "createdAccount"
}
);
If you are calling a subscription service, you must set the "subscribe" property to true. This will add a "subscribe":true value to the params of the service call and also tell the PalmService object to defer the automatic destruction behavior that it normally happens after your response callback. You can call the destroy method of the PalmService component when you want to unsubscribe from the service.
method: "" name of method to call
subscribe: null should be true if you're calling a method that returns multiple results
resubscribe: false set to true to have your subscription automatically restarted when it gets a failure response
params: null object containing parameters for the service call
service, timeout
owner, name
onSuccess, onFailure, onResponse
call, cancelCall
cancel, request
create, createComponent, createComponents, destroy, destroyComponents, getComponents
error, log, warn
owner, name
onRequestSuccess, onRequestFailure, onRequestResponse
call, isFailure, receive
create, createComponent, createComponents, destroy, destroyComponents, getComponents
error, log, warn
palm/services/PalmServices.js
system: "palm://com.palm.systemservice/" telephony: "palm://com.palm.telephony/" database: "luna://com.palm.db/" application: "palm://com.palm.applicationManager/" accounts: "palm://com.palm.service.accounts/" palm/services/SystemService.js
A PalmService that allows applications to access various system settings.
{kind: "enyo.SystemService"}
method, subscribe, resubscribe, params
service, timeout
owner, name
onSuccess, onFailure, onResponse
call, cancelCall
cancel, request
create, createComponent, createComponents, destroy, destroyComponents, getComponents
error, log, warn
palm/services/DbService.js
A PalmService with some handy features:
Use DbService like most PalmServices:
{name: "findDoodads", kind: "DbService", dbKind: "com.palm.doodad:1", method: "find", onSuccess: "gotDoodads"}
To call the service:
this.$.findDoodads.call({
query: {
// notice that 'from' is not needed since 'dbKind' is in the component
where: [...],
orderBy: "name",
limit: 10
}
});
dbKind: "" reCallWatches: false resubscribe: true onWatch: "" method, subscribe, resubscribe, params
service, timeout
owner, name
onSuccess, onFailure, onResponse
call, cancelCall
cancel, request
create, createComponent, createComponents, destroy, destroyComponents, getComponents
error, log, warn
onRequestWatch: "responseWatch" isWatch: function(inResponse processResponse: function(owner, name
onRequestSuccess, onRequestFailure, onRequestResponse
call, isFailure, receive
create, createComponent, createComponents, destroy, destroyComponents, getComponents
error, log, warn
palm/services/TempDbService.js
dbKind, reCallWatches, resubscribe
method, subscribe, resubscribe, params
service, timeout
owner, name
onWatch
onSuccess, onFailure, onResponse
call, cancelCall
cancel, request
create, createComponent, createComponents, destroy, destroyComponents, getComponents
error, log, warn
palm/services/MockPalmService.js
palm/services/bridge/WebosConnect.js
create: function(defer: function(inArgs execute: function(inCommand, inDataCallback, inDisconnectCallback executeNovacomCommand: function(inCommand, inDataCallback, inDisconnectCallback flush: function(getFile: function(inSrc, inDst isReady: function(putFile: function(inSrc, inDst owner, name
create, createComponent, createComponents, destroy, destroyComponents, getComponents
error, log, warn
palm/services/bridge/WebOsPalmServiceBridge.js
onData: "" call: function(inUrl, inJson cancel: function(create: function(createCallbacks: function(destroy: function(destroyCallbacks: function(execute: function(inCommand gotData: function(inResponse gotDisconnect: function(owner, name
create, createComponent, createComponents, destroy, destroyComponents, getComponents
error, log, warn
createBridge: function(webosData: function(inSender, inResponse owner, name
onRequestWatch
onRequestSuccess, onRequestFailure, onRequestResponse
isWatch, processResponse
call, isFailure, receive
create, createComponent, createComponents, destroy, destroyComponents, getComponents
error, log, warn
palm/list/VirtualScroller.js
palm/list/Buffer.js
palm/list/DisplayBuffer.js
palm/list/DomBuffer.js
palm/list/BufferedScroller.js
palm/list/ScrollingList.js
Manages a long list by rendering only small portions of the list at a time. Uses flyweight strategy via onSetupRow. We suggest users stick to the derived kind VirtualList instead. VirtualList introduces a paging strategy for backing data, but it can be ignored if it's not needed.
onSetupRow: "" sent with arguments (inSender,inIndex) to ask owner to prepare the row with specificed index by setting the properties of the objects in the list's components. Return true if you should keep getting more onSetupRow events for more items.
fetchRowIndex: function(return the index of the active row
prepareRow: function(inIndex move the active index of the list to inIndex where it can be altered
punt: function(completely reset the list so that it reloads all data and rerenders
refresh: function(redraw any visible items in the list to reflect data changes without adjusting the list positition
reset: function(clear the list's internal state and refresh
update: function(adjust rendering buffers to fit display
updateRow: function(inIndex indicate that a row has changed so the onSetupRow callback will be called for it
layoutKind
className, container, parent
allowHtml, content
showing, prepend
owner, name
onclick, onmousedown, onmouseup
broadcastMessage, destroyControls, getControls, indexOfControl, resized
addContent, getOffset, isDescendantOf
hide, render, renderInto, rendered, show
addClass, addRemoveClass, addStyles, applyStyle, getClassName, hasClass, hasNode, removeClass, setAttribute, setClassName, setStyle
create, createComponent, createComponents, destroy, destroyComponents, getComponents
error, log, warn
palm/list/Selection.js
This is used to manage row selection state for lists.
multi: false if true, allow multiple selections
onSelect: "" Fires when an item is selected.
{kind: "Selection", onSelect: "selectRow"...
...
selectRow: function(inSender, inKey, inPrivateData) {
...
inKey is whatever key was used to register the selection, usually a row index.
inPrivateData references data registered with this key by the code that made the selection.
onDeselect: "" Fires when an items is deselected.
{kind: "Selection", onSelect: "deselectRow"...
...
deselectRow: function(inSender, inKey, inPrivateData)
...
inKey is whatever key was used to request the deselection, usually a row index.
inPrivateData references data registered with this key by the code that made the original selection.
onChange: "" Sent when selection changes (but not when the selection is cleared).
clear: function(remove all selections
deselect: function(inKey deselect a row
isSelected: function(inKey returns true if the inKey row is selected
select: function(inKey, inData select a row. If the selection has the multi property set to false, it will also deselect the previous selection.
setByKey: function(inKey, inSelected, inData manually set a row to selected or unselected
toggle: function(inKey, inData toggle selection for a row. If the multi is false, toggling a selection on will deselect the previous selection
owner, name
create, createComponent, createComponents, destroy, destroyComponents, getComponents
error, log, warn
palm/list/VirtualList.js
A control that displays a scrolling list of rows. It is suitable for displaying very large lists. VirtualList is optimized such that only a small portion of the list is rendered at a given time. A flyweight strategy is employed to render one set of list row controls as needed for as many rows as are contained in the list.
Note: Because a VirtualList contains a Scroller, it must have a fixed size. If a list with variable height is required, use an enyo.VirtualRepeater.
A VirtualList's components block contains the controls to be used for a single row. This set of controls will be rendered for each row.
The onSetupRow event allows for customization of row rendering. Here's a simple example:
components: [
{kind: "VirtualList", onSetupRow: "setupRow", components: [
{kind: "Item", layoutKind: "HFlexLayout", components: [
{name: "caption", flex: 1},
{kind: "Button", onclick: "buttonClick"}
]}
]}
],
setupRow: function(inSender, inIndex) {
if (inIndex < 100) {
this.$.caption.setContent("I am item: " + inIndex);
this.$.button.setCaption("Button" + inIndex);
return true;
}
}
In the above example, the control named "item" will be rendered for each row. When a row is rendered, the onSetupRow event is fired with the row index. The setupRow method sets properties on controls in the row to customize the rendering of the row. Notice that it returns true if the index is less than 100. An onSetupRow handler must return true to indicate that the given row should be rendered. If it does not, the list will stop rendering.
Continuing with the above example, we have given the button an onclick handler. As previously noted, the button is rendered for each of the 100 list rows. The onclick handler will fire for a click on any of the row buttons. It is common to need to know the exact row on which a user clicked. Events fired from within list rows contain this information in the rowIndex property of the DOM event object. For example:
buttonClick: function(inSender, inEvent) {
this.log("The user clicked on item number: " + inEvent.rowIndex);
}
Sometimes a list row will need to be modified. For example, if a user clicks on a row, the application might want to indicate that the row has been selected by making a color change. In this case, a row item could have an onclick handler that stores the index of the selected row. The onSetupRow handler would use this information to decorate the selected row. To instruct the list to render, call the refresh method. Here's an example:
itemClick: function(inSender, inEvent) {
this.selectedRow = inEvent.rowIndex;
},
setupRow: function(inSender, inIndex) {
// check if the row is selected
var isRowSelected = (inIndex == this.selectedRow);
// color the row if it is
this.$.item.applyStyle("background", isRowSelected ? "blue" : null);
// ...
}
It's common for an application to have a set of data that should be displayed as a list. Here's an example that uses an array of data to display list rows:
data: [
{color: "Green", action: "Go"},
{color: "Yellow", action: "Go Faster"}
{color: "Red", action: "Stop"}
],
setupRow: function(inSender, inIndex) {
var row = this.data[inIndex];
if (row) {
this.$.caption.setContent("When you see a " + row.color + " light:");
this.$.button.setCaption(row.action);
return true;
}
}
Sometimes it isn't practical to gather all the data that needs to be rendered in a list, all at one time. VirtualList provides the onAcquirePage event to allow an application to perform work, such as retrieving data, when a section of the list needs to be rendered. The number of items VirtualList expects to be in each page is determined by the pageSize property.
For example, this service call could be made to acquire some data for a page of list items:
{kind: "VirtualList", onAcquirePage: "acquireListPage", onSetupRow: "setupRow", components: [
// ...
acquireListPage: function(inSender, inPage) {
var index = inPage * inSender.pageSize;
// if we don't have data for this page...
if (!this.data[index]) {
// get it from a service
this.$.service.call({index: index}, {index: index, onSuccess: "dataResponse"})
}
}
In this case, the data is not available until the service responds. We've passed the index of the data row to retrieve to the service request object, so we can use it to populate our data array when the service responds.
Again, when the list should be re-rendered, call the refresh method.
dataResponse: function(inSender, inResponse, inRequest) {
// put the retrieved data into the application's store of data (method omitted)
this.storeData(inRequest.index, inResponse.results);
//
// prompt the list to render.
this.$.list.refresh();
}
lookAhead: 2 pageSize: 10 onAcquirePage: "" onDiscardPage: "" getSelection: function(Returns the selection component (enyo.Selection) that manages the selection state for this list.
isSelected: function(inRowIndex Get the selection state for the given row index.
select: function(inRowIndex, inData Set the selection state for the given row index.
setMultiSelect: function(inMulti Enable/disable multi-select mode
layoutKind
className, container, parent
allowHtml, content
showing, prepend
owner, name
onSetupRow
onclick, onmousedown, onmouseup
fetchRowIndex, prepareRow, punt, refresh, reset, update, updateRow
broadcastMessage, destroyControls, getControls, indexOfControl, resized
addContent, getOffset, isDescendantOf
hide, render, renderInto, rendered, show
addClass, addRemoveClass, addStyles, applyStyle, getClassName, hasClass, hasNode, removeClass, setAttribute, setClassName, setStyle
create, createComponent, createComponents, destroy, destroyComponents, getComponents
error, log, warn
palm/list/dbUtil.js
palm/list/DbPages.js
palm/list/DbList.js
A control designed to display data stored in a mojodb database as a list of rows. A DbList uses an enyo.VirtualList to manage list rendering.
pageSize: 20 desc: false onQuery: "" Fires when a database query should be made. DbList maintains a store of database data but does not directly interact with the database. Use an enyo.DbService or compatible kind to perform the database query.
Handlers have this signature:
function(inSender, inQuery)
inSender {Object} This object
inQuery {Object} Database query to perform.
onSetupRow: "" Fires when a row is to be rendered. Handler should populate row controls with relevant data as needed.
Handlers have this signature:
function(inSender, inRecord, inIndex)
inSender {Object} This object
inRecord {Object} Object containing row data.
inIndex {Integer} Index of the row.
punt: function(reset: function(lookAhead, pageSize
layoutKind
className, container, parent
allowHtml, content
showing, prepend
owner, name
onAcquirePage, onDiscardPage
onSetupRow
onclick, onmousedown, onmouseup
getSelection, isSelected, select, setMultiSelect
fetchRowIndex, prepareRow, punt, refresh, reset, update, updateRow
broadcastMessage, destroyControls, getControls, indexOfControl, resized
addContent, getOffset, isDescendantOf
hide, render, renderInto, rendered, show
addClass, addRemoveClass, addStyles, applyStyle, getClassName, hasClass, hasNode, removeClass, setAttribute, setClassName, setStyle
create, createComponent, createComponents, destroy, destroyComponents, getComponents
error, log, warn
palm/list/DbRepeaterList.js
pageSize: 50 stripSize: 20 onQuery: "" onSetupRow: "" build: function(create: function(fetch: function(inRow getItem: function(inSender, inIndex punt: function(queryResponse: function(inResponse, inRequest refresh: function(rendered: function(reset: function(scrollToBottom: function(stripSizeChanged: function(inSender updateRow: function(inIndex layoutKind
className, container, parent
allowHtml, content
showing, prepend
owner, name
onclick, onmousedown, onmouseup
broadcastMessage, destroyControls, getControls, indexOfControl, resized
addContent, getOffset, isDescendantOf
hide, render, renderInto, rendered, show
addClass, addRemoveClass, addStyles, applyStyle, getClassName, hasClass, hasNode, removeClass, setAttribute, setClassName, setStyle
create, createComponent, createComponents, destroy, destroyComponents, getComponents
error, log, warn
palm/list/MockDb.js
palm/tellurium/loader.js
palm/tellurium/service.js
palm/tellurium/events.js
palm/tellurium/enyo-events.js
setup: function(types: keyup: "key"keydown: "key"keypress: "key"mouseup: "mouse"mousedown: "mouse"mousehold: "mouse"mouserelease: "mouse"click: "mouse"flick: "flick"dragStart: "drag"keyDetails: type: truekeyCode: truekeyIdentifier: truectrlKey: truealtKey: trueshiftKey: truemetaKey: truemouseDetails: type: truedetail: truescreenX: truescreenY: truepageX: truepageY: trueclientX: trueclientY: truectrlKey: truealtKey: trueshiftKey: truemetaKey: truebutton: truehandle: function(inType, inEvent makeDragPayload: function(inEvent makeFlickPayload: function(inEvent makeKeyPayload: function(inEvent makeMousePayload: function(inEvent mixinPayloadDetails: function(inPayload, inEvent, inDetails setup: function(types: onSelectView: enyo.PanemakeSelectViewPayload: function(inView, inLastView setup: function(setupHandler: function(inPrototype, inName wrapEvent: function(inPrototype, inMethod, inOriginal, inName, inPayloadHandler palm/tellurium/locator.js
palm/tellurium/dom.js
palm/tellurium/cards.js
palm/tellurium/widgets.js
palm/tellurium/startup.js
g11n/address/javascript/address.js
enyo.g11n.Address: function(address, params Creates a new Address instance and parses a physical address.
locale to use to parse the address. If not specified, this function will use the current locale.
This function parses a physical address written in a free-form string. It returns an object with a number of properties from the list below that it may have extracted from that address.
The following is a list of properties that the algorithm will return:
For any individual property, if the address does not contain that property, it is left out.
When an address cannot be parsed properly, the entire address will be placed into the streetAddress property.
Returns an object with the various properties listed above.
g11n/address/javascript/format.js
enyo.g11n.AddressFmt: function(params Creates a new formatter object to format physical addresses in a particular way.
The params object may contain the following properties, both of which are optional:
Returns a formatter instance that can format multiple addresses.
enyo.g11n.AddressFmt.prototype.format: function(address This function formats a physical address (enyo.g11n.Address instance) for display. Whitespace is trimmed from the beginning and end of final resulting string, and multiple consecutive whitespace characters in the middle of the string are compressed down to 1 space character.
If the Address instance is for a locale that is different than the locale for this formatter, then a hybrid address is produced. The country name is located in the correct spot for the current formatter's locale, but the rest of the fields are formatted according to the default style of the locale of the actual address.
Example: Consider a mailing address for a location in China. If formatted for the U.S., the address may have "People's Republic of China" in English as the last line. However, if the address is formatted for China, the country will appear in the first line of the address. In the US, the country is on the last line, but in China the country is usually on the first line.
Returns a String containing the formatted address.
g11n/name/javascript/name.js
enyo.g11n.Name: function(name, params Parses a personal name written in a free-form string.
This constructor returns an object with a number of properties from the list below, which it may have extracted from that name. Because some properties (e.g., "middleName") may contain multiple names, each property may be a single string with spaces and punctuation in the middle of it.
If any names cannot be assigned to one of these properties, they will be be inserted into the "givenName" property.
The following is a list of name properties that the algorithm will return:
For any individual property, if there are multiple names for that property, they will be returned as a single string with the original punctuation preserved. For example, if the name is "John Jacob Jingleheimer Schmidt", there are two middle names and they will be returned as the string: "Jacob Jingleheimer"
Suffixes may be optionally appended to names using a comma. If commas appear in the original name, they will be preserved in the output of the suffix property so that they can be reassembled again later by NameFmt.format() properly.
For any titles or honorifics that are considered a whole, the name is returned as a single string. For example, if the name to parse is "The Right Honourable James Clawitter", the honorific would be returned as a prefix with the whole string "The Right Honourable".
When a compound name is found in the name string, the conjunction is placed in the givenName property.
Example: "John and Mary Smith"
output:
{
givenName: "John and Mary",
familyName: "Smith"
}
This can be considered to be two names: "John Smith and Mary Smith". Without conjunctions, the words "and Mary" would have been considered middle names of the person "John Smith".
There are a few special cases where the name is parsed differently from what the rules of the given locale would imply. If the name is composed entirely of Asian characters, it is parsed as an Asian name, even in non-Asian locales. If the locale is an Asian locale, and the name is composed entirely of Latin alphabet characters, the name is parsed as a generic Western name (using US/English rules). In this way, Asian and western names can be mixed in the same list, and they will all be parsed reasonably correctly.
When a name cannot be parsed properly, the entire name will be placed into the givenName property.
Returns an object with the various properties listed above.
g11n/name/javascript/format.js
enyo.g11n.NameFmt: function(params Identifiers for use with the length property of the formatter parameters.
Creates a formatter object that formats personal names for display.
The params object can contain the following properties:
The style parameter should be passed as one of the following:
format: function(name Formats an enyo.g11n.Name instance for display.
If the name does not contain all the parts required for the style, those parts will be left blank.
There are two basic styles of formatting: European and Asian. If the formatter object is set for European style, but an Asian name is passed to the format method, then this method will format the Asian name with a generic Asian template. Similarly, if the formatter is set for an Asian style, and a European name is passed to the format method, the formatter will use a generic European template.
This means it is always safe to format any name with a formatter for any locale. You should always get something reasonable as output.
This method returns a string containing the formatted name.
g11n/phone/base/javascript/utils.js
g11n/phone/base/javascript/phoneloc.js
g11n/phone/base/javascript/plan.js
enyo.g11n.NumPlan: function(params Returns info about the dialing/numbering plan of a particular locale.
It is up to the callers to release the JSON files from the cache.
g11n/phone/base/javascript/states.js
g11n/phone/format/javascript/styles.js
getStyle: function(getStyle Returns the style with the given name, or the default style if there is no style with that name.
enyo.g11n.FmtStyles.getRegions: function(getRegions Returns an array of regions supported by this phone formatter. Each item in the array has a lower-cased ISO "countryCode" and a "countryName" property.
The countryName property is in English, not localized.
g11n/phone/format/javascript/format.js
enyo.g11n.PhoneFmt: function(params Creates a new phone number formatter object that formats numbers according to the parameters.
The params object may contain zero or more of the following parameters:
Some regions have more than one style of formatting, and the style parameter selects which style the user prefers. The style names can be found by calling FmtStyles.getExamples().
If the MCC is given, numbers will be formatted in the manner of the country specified by the MCC. If it is not given, but the locale is, the manner of the country in the locale will be used. If neither the locale nor MCC is given, then the country of the phone locale for the device is used.
g11n/phone/parse/javascript/handler.js
g11n/phone/parse/javascript/phone.js
enyo.g11n.PhoneNumber: function(number, params Creates a new PhoneNumber instance that parses the phone number parameter for its constituent parts, and stores them as separate fields in the returned object.
The params object may include these properties:
This function is locale-sensitive, and will assume any number passed to it is appropriate for the given locale. If the MCC is given, this method will assume that numbers without an explicit country code have been dialled within the country given by the MCC. This affects how things like area codes are parsed. If the MCC is not given, this method will use the given locale to determine the country code. If the locale is also not explicitly given, then this function uses the current phone region as the default.
The input number may contain any formatting characters for the given locale. Each field that is returned in the JSON object is a simple string of digits with all formatting and whitespace characters removed.
The number is broken down into its parts, regardless of whether it contains formatting characters. If a particular part cannot be extracted from the given number, the field will not be returned as a field in the object. If no fields can be extracted from the number at all, then all digits found in the string will be returned in the subscriberNumber field. If the number parameter contains no digits, an empty object is returned.
The output JSON has the following fields:
The following rules determine how the number is parsed:
Example: parsing the number "+49 02101345345-78" will yield the following properties:
{
iddPrefix: "+",
countryCode: "49",
areaCode: "02101",
subscriberNumber: "345345",
extension: "78"
}
Note that in this example, because international direct dialing is explicitly used in the number, the part of this number after the IDD prefix and country code will be parsed exactly the same way in all locales with German rules (country code 49).
Regions currently supported are:
compare: function(other This routine will compare two phone numbers in a locale-sensitive manner to see if they possibly reference the same phone number.
In many places, there are multiple ways to reach the same phone number. In North America for example, you might have a number with the trunk access code of "1" and another without, and they reference the exact same phone number. This is considered a strong match. For a different pair of numbers, one may be a local number and the other a full phone number with area code, which may reference the same phone number if the local number happens to be located in that area code. However, you cannot say for sure if it is in that area code, so it will be considered a somewhat weaker match.
Similarly, in other countries, there are sometimes different ways of reaching the same destination, and the way that numbers match depends on the locale.
The various phone number fields are handled differently for matches. There are various fields that do not need to match at all. For example, you may enter "00" or "+" into your phone to start international direct dialing, so the iddPrefix field does not need to match at all.
Typically, fields that require matches need to match exactly if both sides have a value for that field. If both sides specify a value and those values differ, that is a strong non-match. If one side does not have a value and the other does, that causes a partial match, because the number with the missing field may possibly have an implied value that matches the other number. For example, the numbers "650-555-1234" and "555-1234" have a partial match as the local number "555-1234" might possibly have the same 650 area code as the first number, and might possibly not. If both sides do not specify a value for a particular field, that field is considered matching.
The values of the following fields are ignored when performing matches:
The values of the following fields matter if they do not match:
Returns a non-negative integer describing the percentage quality of the match. 100 means a very strong match (100%), while lower numbers are less and less strong, down to 0, meaning no match at all.
equals: function(equals Determines whether or not the other phone number is exactly equal to the current one.
The difference between the compare method and the equals method is that the compare method compares normalized numbers with each other and returns the degree of match, whereas the equals operator returns true if and only if the two numbers contain the same fields and the field values are exactly the same. Functions and other non-phone number properties are not compared.
g11n/phone/geo/javascript/geo.js
enyo.g11n.GeoLocator: function(params Creates a new geo locator instance that behaves according to the given parameters.
The params object may contain zero or more of the following properties:
If the MCC is not available, this method will fall back to the passed-in locale parameter if it is available.
If the locale parameter is also not available, this method relies on the default phone region of the device.