Widget Framework

We are in the process of porting our existing widgets to become controls within the Web Expression Language. In the meantime, you have two options for including our existing set of widgets in your application

Use Old Syntax

You can still use the original widget syntax like so:

<app:iterator property="rows" on="r:user.response then execute">
	<html:div>#{first_name} #{last_name}</html:div>
</app:iterator>

Use Web Expression Language

Or you can use the Web Expression Language’s set attribute:

<div set="control[app:iterator]" property="rows" on="r:user.response then execute">
	<div>#{first_name} #{last_name}</div>
</div>

The benefit of the latter approach is that you no longer have to use <html:div> when declaring the inner content for a widget.

Widget Framework Overview

The Widget Framework is a Javascript API for creating new widgets and for wrapping existing third-party widgets from providers like Yahoo and ExtJS. Appcelerator comes with a number of pre-built widgets to jumpstart your web development efforts. Appcelerator widgets can be added to your application via simple markup - no Javascript is required!

Using Widgets in your Application

Appcelerator widgets are easy to add to your application. First you need to add the appropriate namespace definition to the top of your HTML file:

<html xmlns="http://www.w3.org/1999/xhtml" xmlns:app="http://www.appcelerator.org">

All Appcelerator widgets are in the app namespace.

The namespace definition is only required if you use the OLD SYNTAX

Now, you’re ready to add a widget. Here’s an example of the calendar widget. This particular widget is a YUI widget that was wrapped to be an Appcelerator widget

Here’s the code:

<app:calendar title="Pick a Date" on="l:show.calendar then execute" inputId="mydate" close="true">
</app:calendar>
<input type="text" id="mydate" value="click me" on="focus then l:show.calendar"/>
<input type="button" on="click then l:show.calendar" value="set date"/>

Here’s the same calendar example using the Web Expression Language’s set attribute:

Here’s the code:

<div set="control[app:calendar]" title="Pick a Date" 
	on="l:show.calenda2r then execute" inputId="mydate2" close="true">
</div>
<input type="text" id="mydate2" value="click me" on="focus then l:show.calendar2"/>
<input type="button" on="click then l:show.calendar2" value="set date"/>

Creating a new Widget

Creating Appcelerator widgets does require that you know Javascript, but it’s easy to learn. For more information on creating new widgets or integrating existing third-party widgets see our Reference Guide.

Pre-built Widgets

The Widget Reference section contains documentation for pre-built widgets.