Alloy is a new application framework by Appcelerator for Titanium.
It provides a nice MVC framework for developers that are building Titanium apps.
June 10, 2012 - Unstable
The following are the main goals for Alloy:
Widgets.Alloy is available as a Node.JS NPM module by running the following command:
[sudo] npm install -g alloy
To install your own local copy (with executable), clone this repository, navigate to the top level directory, and install via:
[sudo] npm install -g .
To create an Alloy enabled app, you must first create a project in Titanium Studio or via the Titanium CLI. While in a console, navigate to the root directory of your application and run the following command in the console
alloy new .
Alternatively, you can specify an argument as the second parameter to the location of a Titanium project directory.
As part of Alloy-enabling your Titanium project, Alloy will install a special compiler plugin that will help Studio or the CLI know how to use the Alloy compiler. NOTE: this currently only works on OSX and will be resolved prior to the production release.
Your new Alloy project will have a new folder named app that will contain the skeleton Alloy app.
Alloy has directories that should be familiar if you've used any of the popular web MVC frameworks like Ruby on Rails.
Alloy prefers to use convention over configuration for simplicity.
You can run a Titanium project that is using Alloy like any normal build. However, you can also use Alloy's command line tool to build from the command line.
alloy compile
If you run this from the projects directory, it will compile the files to the correct location automatically.
To generate an empty view and the associated style files, you can run the following command:
alloy generate view <name>
To generate an empty controller, you can run the following command:
alloy generate controller <name>
To generate a model, you can run the following command:
alloy generate model <name> [column_name:type, ...]
For example:
alloy generate model todo name:string active:boolean
When you generate a model, a migration file is automatically provided with the initial model details.
To generate a standalone migration for a specific model, you can run the following command:
alloy generate migration <name>
This will create a timestamp-ordered migration file for the model specified.
To generate a basic widget, you run the following command
alloy generate widget <name>
This will create a default widget in your projects's app/widgets path.
You are required to only define one file at a minimum, which is the default view file, index.xml, which must be placed in the views folder.
In Alloy, the controller (which is optional) must be named with the same name as the view with the .js file extension and placed in the controllers folder.
In alloy, you do not provide an app.js as it will be automatically generated.
In Alloy, any view styles will automatically be loaded from a file with the same name as the view and an .json file extension and located in the styles directory. The file format is JSON. Each of the objects in the view that you want to be referenceable either through styling or programmatically must have an id attribute on the object.
You define a style in the JSON like this:
{
"#a" : {
"backgroundColor" : "red",
"width": Ti.UI.FILL,
"height": "100"
},
"#b" : {
"width":Ti.UI.SIZE,
"height":Ti.UI.SIZE
},
"#t" : {
"width":Ti.UI.FILL,
"height":Ti.UI.SIZE,
"color":"black"
}
}
And then you would define the view such as:
<View id="a">
<Button id="b">Hello</Button>
<Label id="t"></Label>
</View>
Note, you can use Titanium.UI constants in your JSON file.
In your controller, you can reference the view such as:
$.a.backgroundColor = "blue";
$.b.addEventListener("click",function(e){
$.t.text = "You clicked a button";
});
All objects which have an id in your view will automatically be defined and available as a property in the special variable $ in your controller. For example, if you use the id foo, your object would be available as $.foo.
Alloy separates the structural elements of a View from the styling components of the View -- much like the difference between HTML and CSS.
You can use the following CSS attributes in your style name: Classes (prefix by .), Object Name (name of the Object Type such as Button) or ID (prefix by #). The ID attribute will always take precedence.
For example:
{
"Button": {
"width":Ti.UI.SIZE,
"height":Ti.UI.SIZE,
"borderColor":"red"
},
".b" : {
"width": "100",
"b":true
},
".c" : {
"height": "50",
"b":false
},
"#b" : {
"width": Ti.UI.FILL,
"borderColor":null
}
}
With the following XML:
<View>
<Button id="b" class="b c" />
</View>
Should result in the following code properties when merged:
{
"width": Ti.UI.FILL,
"height":Ti.UI.SIZE,
"b":false
}
A few notes on the code generation and style merging:
null values will be removed in any final styles to optimize code generation.By default, all UI components specified in your markup will be prefixed with the Ti.UI namespace for convenince.
<Button id="mybutton">button title</Button>
The above snippet would create a Ti.UI.Button. If you want to add a UI component to your markup hierarchy that is not part of the Ti.UI namespace, you can use the ns attribute.
<View ns="Ti.Map" id="map"/>
The above snippet would use Ti.Map as its namespace prefix, instead of the default Ti.UI, which would then give you a Ti.Map.View in your app.
Alloy allows you to decompose a View into multiple subviews. You would use the require attribute on a View element to import a separate view by name.
<View>
<View require="first" id="first"/>
<View require="second" id="second"/>
<View require="third" id="third"/>
</View>
In the above example, you should have 3 other view files named first.xml, second.xml and third.xml. Of course, these subviews could also import their own subviews, too.
For models, we specify the schema of our model using JSON as the name of the model ending with .json.
You should generate a model using the alloy generate model command so that you can get automatic migration support.
All model classes are automatically defined and available in your controller scope as the name of the model.
For example, if you defined a model named todo, it would be available as the same variable name under the $. object.
To create a new model object:
var todo = new $.Todo({
name:"hello",
done:false
});
todo.save();
Models inherit from Backbone.Model. NOTE: if the first character of a model is lower case, it will be automatically converted to uppercase for referencing the Model class.
Collections of your models are automatically also created with the plural name of your model class. For example, if you defined a model named todo, you could automatically create a collection of models by using the following code:
var list = new $.TodoCollection();
var results = list.find();
Collections inherit from Backbone.Collections.
In Alloy, you separate the application logic from the View logic (the C part of MVC) with Controllers.
Controllers automagically will have pre-defined your View objects, as long as you've added a unique id attribute on the XML.
Each id value will reference the corresponding Titanium object in your controller automatically.
For example, if you have a view named index.xml with the following:
<Window>
<Button id="b"></Button>
</Window>
You would then define a controller named index.js and you could automatically bind events inline in your controller code:
$.b.addEventListener("click",function(){
alert("You clicked the button");
});
// "exports" represents the top-level container for this view
exports.open();
If you don't add an id attribute to an element, it will not be referencable directly in your controller.
NOTE: it's import that you use unique id attributes across all your view files. If you don't, you will get a compiler error.
Sometimes it's necessary to provide properties and functions in your controller that can be used by other controllers as a well defined API.
To export them, you would set the in the exports object which is predefined for you in your controller.
exports.foo = function()
{
return 'a';
}
You would then use the name of the controller to reference this method such as:
$.index.foo();
Alloy supports the concept of a widget which is a package of MVC logic that can be reused inside an application.
The widget is defined in a separate 'widgets' subdirectory, but we would also support a widget distribution packaging much like modules today so that you could simply reference them and then they would automatically be found and imported either by searching for local widgets in the folder of the app or by scanning the titanium distribution, etc.
The widget would define its own views and controllers and they would work very similar to any normal application.
The widget controller would be able to export zero or more properties or methods that define the public interface for the widget.
Example of importing a widget:
<View>
<Widget require="com.foo.widget" id="foo"/>
</View>
The widget view styles can also be imported by the views JSON file by using a special widget ID pattern: <#widget_id #id>.
For example, if the widget was imported to the name foo and the internal ID of a control was b - the reference would be '#foo:#b'.
If your widget would like to export properties and/or functions, it should assign them to the exports variable of the widget.js.
In your app controller, you would then be able to access them referencing the widget reference and the name of the property.
For example, in your widget.js:
exports.calculatePie = function()
{
return 3.14;
}
Now, if your widget reference was foo as in the example above, you would access your function in your app controller such as:
$.foo.calculatePie();
See the Widget Example for an example of building and using a widget.
NOTE: we have not finalized the distribution packaging for an Alloy widget but it will be similar to native modules.
Alloy provides an ability to have project configurations stored as JSON which will be compiled and conditionalized at build time.
The configuration will be available in your app at runtime in the property $.CFG. The config file is generated under the config folder with the name config.json.
In the config file, you can specify a set of global key/value pairs, as well as conditional configuration based on build environment and/or operating system target. The order of precedence for key merging is global, env and then os.
Example config:
{
"global":
{
"foo":1
},
"env:development":
{
"foo":2
},
"env:test":
{
"foo":3
},
"env:production":
{
"foo":4
},
"os:ios":
{
"foo":5
},
"os:android":
{
"foo":6
}
}
Then, you can reference configuration at runtime in your code:
alert($.CFG.foo);
In the above example, when running under the iOS simulator, you should see 5 in the alert dialog box.
Alloy introduces a set of special variables which act like compiler directives. If you use these compiler constants, your code will be optimized at code generation/compilation and any non-reachable code will be removed. This allows you to specify code blocks which are efficiently handled or dynamically processed based on these compiler constants.
The following are the constants which are defined by Alloy:
Example of usage:
if (ENV_DEV && OS_IOS)
{
alert("You are running iOS in the simulator");
}
Alloy provides an ability for the project to hook and customize the compile process using a special JS file in the project root directory named alloy.jmk. This file can be used for common administration tasks or to fine tune the build process.
The JMK file is loaded automatically by the Alloy command line during compilation. To customize the build process, you call the task function with the event name and provide a function callback which will be called when the event is triggered by the compiler.
Currently, there are 3 main compiler tasks:
null or undefined to write the code unchanged.The function callback provides two arguments: event and logger.
The event object provides a set of values which may be useful for building tasks.
The logger object provides a reference to the logger which defins the following methods: debug, info, warn, error.
An example of a build file:
task("pre:compile",function(event,logger){
logger.info('building project at '+event.projectDir);
});
task("post:compile",function(event,logger){
logger.info('compile finished!');
});
You can control some settings of the compiler on a per project basis by modifying settings in the alloy.json in your root alloy app directory.
There's a lot of work to get Alloy to a release state. The following are some of the major items:
Many credits should be noted in the development of Alloy.
Alloy is developed by Appcelerator and the community and is Copyright (c) 2012 by Appcelerator, Inc. All Rights Reserved. Alloy is made available under the Apache Public License, version 2. See the LICENSE file for more information.
FAQs
TiDev Titanium MVC Framework
The npm package alloy receives a total of 2,109 weekly downloads. As such, alloy popularity was classified as popular.
We found that alloy demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 3 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Deno 2.2 enhances Node.js compatibility, improves dependency management, adds OpenTelemetry support, and expands linting and task automation for developers.
Security News
React's CRA deprecation announcement sparked community criticism over framework recommendations, leading to quick updates acknowledging build tools like Vite as valid alternatives.
Security News
Ransomware payment rates hit an all-time low in 2024 as law enforcement crackdowns, stronger defenses, and shifting policies make attacks riskier and less profitable.