[ALOY-684] Interface for dynamically creating styled UI elements

GitHub Issuen/a
Resolution Date2013-06-07T21:08:55.000+0000
Affected Version/sn/a
Fix Version/sAlloy 1.2.0, 2013 Sprint 12
ComponentsRuntime, Styling
Labelsnotable, qe-testadded
ReporterTony Lukasavage


var ctr = 0;
var classes = [
	['shadow', 'big'],
	['big', 'shadow'],
	['big', 'blue', 'shadow'],
	'big blue shadow'

function addNewLabel(e) {
	var index = ctr % classes.length;

	// Alloy.createView() for creating new titanium view proxies with a 
	// given set of style attributes to determine which styles should be
	// applied.
	var label = Alloy.UI.create(
		// the name of the controller from which to reference styles

		// The Titanium API to use for the creation. In this case we use "Label"
		// but the full "Ti.UI.Label" would work as well. Like in the XML,
		// implicit namespaces and defaults will be checked if an explicit
		// namespace is not given.
		// The 2nd parameter is an object that holds style information, like id
		// and classes, as well as the typical parameters you would pass to a
		// Titanium proxy. This allows the creation and property application to
		// be done in a single command, making for the best runtime performance. 
			// style attributes
			classes: classes[index],
			id: 'newLabel' + (ctr+1),

			// basic proxy properties that apply to Label
			text: 'this is label #' + (ctr+1),
			touchEnabled: false


Internally, Alloy.createView() would use the runtime version of generateStyleParams to apply the appropriate styles based on the given options.


  1. Tony Lukasavage 2013-06-07 PR: https://github.com/appcelerator/alloy/pull/149 test app: https://github.com/appcelerator/alloy/tree/master/test/apps/testing/ALOY-684 Functionally testing should involve successfully running the app on all supported platforms. While running, repeatedly click the main window. The result should be that a dynamically styled label should appear on the screen after each click. The style of the label should be impacted by the current array of styles applied to it, found in the *classes* array variable in the *app/controllers/index.js* controller.

JSON Source