@maccesar/titools 5.2.5 → 5.4.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CONTRIBUTING.md +1 -1
- package/README.md +58 -97
- package/agents/ti-pro.md +4 -2
- package/commands/ti-audit.md +7 -5
- package/docs/examples.md +24 -13
- package/docs/knowledge-index.md +2 -1
- package/lib/config.js +1 -0
- package/package.json +1 -1
- package/skills/alloy-guides/SKILL.md +18 -179
- package/skills/alloy-guides/references/CLI_TASKS.md +17 -216
- package/skills/alloy-guides/references/CONCEPTS.md +27 -162
- package/skills/alloy-guides/references/CONTROLLERS.md +38 -236
- package/skills/alloy-guides/references/MODELS.md +47 -723
- package/skills/alloy-guides/references/MODELS_ADVANCED.md +21 -482
- package/skills/alloy-guides/references/VIEWS_DYNAMIC.md +12 -222
- package/skills/alloy-guides/references/VIEWS_STYLES.md +39 -358
- package/skills/alloy-guides/references/VIEWS_XML.md +36 -552
- package/skills/alloy-guides/references/WIDGETS.md +49 -127
- package/skills/alloy-howtos/SKILL.md +14 -169
- package/skills/alloy-howtos/references/best_practices.md +9 -113
- package/skills/alloy-howtos/references/cli_reference.md +18 -223
- package/skills/alloy-howtos/references/config_files.md +50 -133
- package/skills/alloy-howtos/references/debugging_troubleshooting.md +19 -63
- package/skills/alloy-howtos/references/samples.md +21 -138
- package/skills/ti-api/SKILL.md +10 -2
- package/skills/ti-api/references/api-android.md +36 -2
- package/skills/ti-api/references/api-app-platform.md +39 -3
- package/skills/ti-api/references/api-core.md +50 -18
- package/skills/ti-api/references/api-data-network.md +49 -35
- package/skills/ti-api/references/api-media.md +45 -27
- package/skills/ti-api/references/api-services.md +39 -9
- package/skills/ti-api/references/api-ui-android.md +33 -13
- package/skills/ti-api/references/api-ui-extras.md +41 -15
- package/skills/ti-api/references/api-ui-ios-animator.md +42 -26
- package/skills/ti-api/references/api-ui-ios.md +74 -2
- package/skills/ti-api/references/api-ui-lists.md +32 -16
- package/skills/ti-api/references/api-ui-text-input.md +34 -17
- package/skills/ti-api/references/api-ui-views.md +27 -1
- package/skills/ti-api/references/api-ui-windows-navigation.md +32 -18
- package/skills/ti-api/references/api-xml-global.md +66 -16
- package/skills/ti-create-release/SKILL.md +98 -0
- package/skills/ti-create-release/references/module-discovery.md +69 -0
- package/skills/ti-expert/references/adaptive-layouts.md +1 -1
- package/skills/ti-guides/SKILL.md +37 -76
- package/skills/ti-guides/references/advanced-data-and-images.md +122 -126
- package/skills/ti-guides/references/android-manifest.md +24 -83
- package/skills/ti-guides/references/app-distribution.md +31 -377
- package/skills/ti-guides/references/application-frameworks.md +127 -335
- package/skills/ti-guides/references/cli-reference.md +184 -633
- package/skills/ti-guides/references/commonjs-advanced.md +81 -231
- package/skills/ti-guides/references/compatibility-matrix.md +36 -75
- package/skills/ti-guides/references/hello-world.md +95 -70
- package/skills/ti-guides/references/hyperloop-native-access.md +52 -448
- package/skills/ti-guides/references/resources.md +174 -142
- package/skills/ti-guides/references/sdk-release-notes.md +28 -71
- package/skills/ti-guides/references/tiapp-config.md +222 -598
- package/skills/ti-howtos/SKILL.md +23 -123
- package/skills/ti-howtos/references/cross-platform-development.md +119 -324
- package/skills/ti-howtos/references/debugging-profiling.md +77 -445
- package/skills/ti-howtos/references/extending-titanium.md +199 -673
- package/skills/ti-howtos/references/local-data-sources.md +87 -300
- package/skills/ti-howtos/references/location-and-maps.md +86 -213
- package/skills/ti-howtos/references/media-apis.md +103 -223
- package/skills/ti-howtos/references/notification-services.md +86 -506
- package/skills/ti-howtos/references/remote-data-sources.md +97 -316
- package/skills/ti-howtos/references/using-modules.md +77 -133
- package/skills/ti-synthengine/SKILL.md +62 -111
- package/skills/ti-synthengine/assets/example/README.md +50 -59
- package/skills/ti-synthengine/assets/example/app.js +67 -65
- package/skills/ti-synthengine/assets/example/lib/sequenceOwner.js +39 -40
- package/skills/ti-synthengine/assets/example/lib/soundPreset.js +34 -0
- package/skills/ti-synthengine/assets/index.d.ts +122 -2
- package/skills/ti-synthengine/references/advanced-examples.md +4 -4
- package/skills/ti-synthengine/references/api.md +40 -18
- package/skills/ti-synthengine/references/audio-engine.md +15 -57
- package/skills/ti-synthengine/references/examples.md +63 -6
- package/skills/ti-synthengine/references/guide.md +61 -57
- package/skills/ti-synthengine/references/instruments-and-effects.md +15 -15
- package/skills/ti-synthengine/references/native-variation.md +53 -14
- package/skills/ti-synthengine/references/recipes-interaction.md +25 -20
- package/skills/ti-synthengine/references/recipes.md +19 -16
- package/skills/ti-synthengine/references/recommendations.md +12 -12
- package/skills/ti-synthengine/references/sound-api.md +197 -0
- package/skills/ti-synthengine/references/sound-design.md +7 -7
- package/skills/ti-synthengine/references/source-notes.md +62 -172
- package/skills/ti-synthengine/references/troubleshooting.md +17 -19
- package/skills/ti-synthengine/references/upgrade-2.0.0.md +40 -0
- package/skills/ti-ui/SKILL.md +28 -143
- package/skills/ti-ui/references/icons-and-splash-screens.md +74 -403
- package/skills/ti-ui/references/layouts-and-positioning.md +175 -402
- package/skills/ti-ui/references/listviews-and-performance.md +100 -703
- package/skills/ti-ui/references/platform-conventions.md +180 -0
- package/skills/ti-ui/references/user-interface.md +43 -0
- package/skills/alloy-guides/references/VIEWS_WITHOUT_CONTROLLERS.md +0 -102
- package/skills/alloy-howtos/references/custom_tags.md +0 -148
- package/skills/ti-guides/references/coding-best-practices.md +0 -149
- package/skills/ti-guides/references/javascript-primer.md +0 -414
- package/skills/ti-guides/references/reserved-words.md +0 -36
- package/skills/ti-guides/references/style-and-conventions.md +0 -103
- package/skills/ti-howtos/references/android-platform-deep-dives.md +0 -624
- package/skills/ti-howtos/references/automation-fastlane-appium.md +0 -96
- package/skills/ti-howtos/references/buffer-codec-streams.md +0 -162
- package/skills/ti-howtos/references/google-maps-v2.md +0 -172
- package/skills/ti-howtos/references/ios-map-kit.md +0 -149
- package/skills/ti-howtos/references/ios-platform-deep-dives.md +0 -611
- package/skills/ti-howtos/references/tutorials.md +0 -565
- package/skills/ti-howtos/references/web-content-integration.md +0 -287
- package/skills/ti-howtos/references/webpack-build-pipeline.md +0 -124
- package/skills/ti-synthengine/references/android-sim80-correction-evidence.zip +0 -0
- package/skills/ti-synthengine/references/android-sim80-correction.json +0 -162
- package/skills/ti-synthengine/references/audio-pipeline-validation.md +0 -19
- package/skills/ti-synthengine/references/bypass-physical-recheck-evidence.zip +0 -0
- package/skills/ti-synthengine/references/frontier-android-evidence.zip +0 -0
- package/skills/ti-synthengine/references/frontier-ipad-evidence.zip +0 -0
- package/skills/ti-synthengine/references/frontier-physical-validation.json +0 -1918
- package/skills/ti-synthengine/references/native-tone-repetition-validation.md +0 -59
- package/skills/ti-synthengine/references/native-variation-proposal.md +0 -182
- package/skills/ti-synthengine/references/native-variation-validation.md +0 -63
- package/skills/ti-synthengine/references/performance-review-evidence.zip +0 -0
- package/skills/ti-synthengine/references/performance-review.json +0 -1146
- package/skills/ti-synthengine/references/physical-validation.json +0 -1457
- package/skills/ti-synthengine/references/source-snapshot.json +0 -542
- package/skills/ti-synthengine/references/stats-performance.json +0 -2992
- package/skills/ti-synthengine/references/stats-performance.md +0 -82
- package/skills/ti-synthengine/references/studio-validation.json +0 -6202
- package/skills/ti-synthengine/references/unified-bypass-performance.json +0 -22425
- package/skills/ti-synthengine/references/unified-validation.json +0 -314
- package/skills/ti-ui/references/accessibility-deep-dive.md +0 -288
- package/skills/ti-ui/references/animation-and-matrices.md +0 -569
- package/skills/ti-ui/references/application-structures.md +0 -626
- package/skills/ti-ui/references/custom-fonts-styling.md +0 -549
- package/skills/ti-ui/references/event-handling.md +0 -401
- package/skills/ti-ui/references/gestures.md +0 -448
- package/skills/ti-ui/references/orientation.md +0 -374
- package/skills/ti-ui/references/platform-ui-android.md +0 -727
- package/skills/ti-ui/references/platform-ui-ios.md +0 -576
- package/skills/ti-ui/references/scrolling-views.md +0 -288
- package/skills/ti-ui/references/tableviews.md +0 -542
|
@@ -1,171 +1,36 @@
|
|
|
1
|
-
# Alloy
|
|
1
|
+
# Alloy concepts and project structure
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
Alloy is Titanium's MVC framework. A screen normally has an XML view for structure, a TSS file for style and a JavaScript controller for behavior. Alloy compiles them into ordinary Titanium JavaScript before the native build; the underlying Titanium API remains available.
|
|
4
4
|
|
|
5
|
-
|
|
5
|
+
Install Alloy separately with `npm install -g alloy`. Use Alloy for applications with several screens, shared styles, reusable controllers/widgets or persistent models. Classic is plain Titanium JavaScript and suits prototypes or small tools. `alloy new` converts an existing Classic project in place.
|
|
6
6
|
|
|
7
|
-
##
|
|
7
|
+
## Files and ownership
|
|
8
8
|
|
|
9
|
-
|
|
9
|
+
| Path | Purpose |
|
|
10
|
+
| --- | --- |
|
|
11
|
+
| `app/views/index.xml` | Initial XML hierarchy |
|
|
12
|
+
| `app/styles/app.tss` | Styles shared across the app |
|
|
13
|
+
| `app/styles/index.tss` | Styles for `index.xml` |
|
|
14
|
+
| `app/controllers/index.js` | Initial controller behavior |
|
|
15
|
+
| `app/models/` | Backbone model definitions and collections |
|
|
16
|
+
| `app/widgets/` | Reusable components |
|
|
17
|
+
| `app/lib/` | Plain CommonJS modules |
|
|
18
|
+
| `app/assets/` | Images and `semantic.colors.json` |
|
|
19
|
+
| `app/platform/` | Files copied into the native project |
|
|
20
|
+
| `app/themes/` | Build-time themes |
|
|
21
|
+
| `app/alloy.js` | Initializer, before the first controller |
|
|
22
|
+
| `app/config.json` | Application settings and compiler configuration |
|
|
23
|
+
| `plugins/ti.alloy/` | Compiler hook installed by `alloy new` |
|
|
24
|
+
| `tiapp.xml` | App identity, SDK, native configuration and deployment targets |
|
|
25
|
+
| `Resources/` | Generated output; never edit it |
|
|
26
|
+
| `build/` | Generated native project and compiled output |
|
|
10
27
|
|
|
11
|
-
|
|
28
|
+
Assets are referenced relative to `app/assets`: `app/assets/images/logo.png` becomes `images/logo.png`. Use `app/assets/android` and `app/assets/iphone` for platform-specific assets; only the matching assets enter the package. Native files under `app/platform` are copied without processing.
|
|
12
29
|
|
|
13
|
-
|
|
30
|
+
Commit source, assets, `tiapp.xml` and `DefaultIcon.png`. Do not commit `build/`, generated `Resources/`, or top-level `platform/` and `i18n/` in an Alloy project. `alloy new` writes their ignore rules. Keep keystores and signing credentials out of the repository.
|
|
14
31
|
|
|
15
|
-
|
|
32
|
+
The Classic template's initial `Resources/app.js` can remain after conversion; subsequent Alloy builds replace generated output. Do not change it to implement an Alloy screen.
|
|
16
33
|
|
|
17
|
-
For
|
|
34
|
+
For app identity, native permissions and signing, use `ti-guides`. For the view/controller/style relationship, read [XML views](./VIEWS_XML.md), [styles](./VIEWS_STYLES.md) and [controllers](./CONTROLLERS.md).
|
|
18
35
|
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
### Alloy: MVC with Backbone
|
|
22
|
-
|
|
23
|
-
Backbone.js is a lightweight MVC framework, originally designed for web applications. Alloy models are built on top of Backbone.js, taking advantage of Backbone's rich Model and Collection APIs. You define models using a Javascript file that exports a special JSON object, which uses Backbone's extend functionality to customize models and collections.
|
|
24
|
-
|
|
25
|
-
Alloy views are built from Titanium UI components. You define views using XML markup and style them using Alloy _Titanium Style Sheets (.tss)_, which abstracts the creation of these components without using Titanium API calls. Alloy generates the code to create your views.
|
|
26
|
-
|
|
27
|
-
Alloy controllers generally have a one-to-one relationship with Alloy views. Controllers directly use the Titanium SDK API without an abstraction layer. The controller has access to all of the view components.
|
|
28
|
-
|
|
29
|
-
Also, Alloy provides built-in support for Underscore.js, which provides a set of utility functions, such as array and iterative helpers.
|
|
30
|
-
|
|
31
|
-
## Alloy and the Titanium SDK
|
|
32
|
-
|
|
33
|
-
Alloy uses Titanium SDK to abstracts the creation of UI components through the use of XML markup and style sheets. If Alloy has not implemented a feature of the Titanium SDK or if the feature is not UI related, you can always use the Titanium SDK API in the Alloy controller code or create a CommonJS module to implement a feature. The table below lists what Alloy directly abstracts from the Titanium SDK.
|
|
34
|
-
|
|
35
|
-
For assets, such as images, any references to the `Resources` folder in the Titanium SDK documentation should be replaced with the `app/assets` folder to use it for Alloy. For example, the Icons and Splash Screens guide tells you to place files in either the `Resources/android` or `Resources/iphone` folder. For Alloy, the files should be placed in either the `app/assets/android` or `app/assets/iphone` folder.
|
|
36
|
-
|
|
37
|
-
### Titanium SDK to Alloy Mapping
|
|
38
|
-
|
|
39
|
-
| Titanium SDK Component | Alloy Component |
|
|
40
|
-
| --------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
41
|
-
| **Titanium.UI.\* Objects** (and others: `Ti.Android.Menu`, `Ti.Facebook.LoginButton`, `Ti.Map`, `Ti.Media.VideoPlayer`) | **XML element**. Remove the namespace. For some elements, you may need to assign the `ns` attribute. Some objects are implicitly assigned namespaces by Alloy. |
|
|
42
|
-
| `Titanium.UI.createButton();` | `<Button />` creates a button |
|
|
43
|
-
| | **TSS element**. Remove the namespace. |
|
|
44
|
-
| | `"Button":{ /* Button attributes */ }` |
|
|
45
|
-
| **Titanium Object properties** | **XML attribute** if the property can be expressed as a string, number or Titanium SDK constant. |
|
|
46
|
-
| `Titanium.UI.createButton({text: "Foobar", top: 0, width: Ti.UI.SIZE});` | `<Button title="Foobar" top="0" width="Ti.UI.SIZE"/>` |
|
|
47
|
-
| | **TSS attribute** if the property can be directly expressed as a string, number, Titanium SDK constant, dictionary or array. Indirectly, you can assign a method or value to the `Alloy.Globals` or `Alloy.CFG` namespace and reference it in the TSS file. |
|
|
48
|
-
| | `"Button":{ title: "Foobar", top: 0, width: Ti.UI.SIZE }` |
|
|
49
|
-
| **Titanium Object properties (proxy)** | Some properties that take Titanium objects can be expressed inline using XML tags (Property Mapping). See [VIEWS_XML.md](./VIEWS_XML.md#property-mapping). |
|
|
50
|
-
| **Titanium Object methods** | Use in the controller code. You need to define the `id` attribute of the object in the XML markup, so the object can be referenced in the controller. |
|
|
51
|
-
| `const button = Titanium.UI.createButton(); button.setTitle('Push Me!');` | `// Need to give the object an ID: <Button id="button" />` then `$.button.setTitle('Push Me!');` |
|
|
52
|
-
| **Titanium Object events** | XML attribute to bind a callback in the associated controller. Capitalize the first character of the event name and append 'on' to the beginning of the name. |
|
|
53
|
-
| `const button = Titanium.UI.createButton(); button.addEventListener('click', doClick);` | `<Button onClick="doClick"/>` (doClick needs to be declared in the associated controller) |
|
|
54
|
-
|
|
55
|
-
## Convention over Configuration
|
|
56
|
-
|
|
57
|
-
To simplify development, Alloy uses a directory structure and naming conventions to organize the application rather than configuration files. Alloy expects to find files in specific locations. Any folder or file not adhering to the below naming conventions is ignored by Alloy. For example, at generation time, Alloy will look for the mandatory files `app/views/index.xml` and `app/controllers/index.js`, then the optional corresponding file `app/styles/index.tss`. Alloy requires these files to create the initial view-controller `Resources/<platform>/alloy/controllers/index.js`.
|
|
58
|
-
|
|
59
|
-
The following is a list of directories and files that can be found in an Alloy project:
|
|
60
|
-
|
|
61
|
-
| Directory/File | Description |
|
|
62
|
-
| ----------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
63
|
-
| `app` | Contains the models, views, controllers and assets of the application. All work should be done here. |
|
|
64
|
-
| `app/alloy.jmk` | Build configuration file. See Build Configuration File (alloy.jmk). |
|
|
65
|
-
| `app/alloy.js` | Initializer file used to preconfigure components or override Alloy methods before the main controller is executed. |
|
|
66
|
-
| `app/config.json` | Project configuration file. See Project Configuration File (config.json). |
|
|
67
|
-
| `app/assets` | Contains image assets and other files that need to be copied into the `Resources` directory. Reference these files in the code without the 'app/assets' path (and without the platform-specific folder if it is inside one). |
|
|
68
|
-
| `app/controllers` | Contains controllers in the format `filename.js` to a corresponding view file `app/views/filename.xml`. |
|
|
69
|
-
| `app/i18n` | Since Alloy 1.8.0 and Titanium 5.2.0 Language Strings are sourced from `app/i18n` and Alloy will generate the `i18n` folder in the project root. |
|
|
70
|
-
| `app/lib` | Contains application-specific library code, typically in the CommonJS format. |
|
|
71
|
-
| `app/migrations` | Contains database migration files in the format `<DATETIME>_filename.js`. See Migrations for more information. |
|
|
72
|
-
| `app/models` | Contains model files in the format `filename.js`. |
|
|
73
|
-
| `app/platform` | Since Alloy 1.8.0 platform resources are sourced from `app/platform` and Alloy will generate the `platform` folder in the project root. |
|
|
74
|
-
| `app/specs` | Like the `app/lib` folder except it is only used if the deploy type is **not** production (since Alloy 1.2.0). |
|
|
75
|
-
| `app/styles` | Contains view styling in the format `filename.tss`, which is applied to a corresponding view file `app/views/filename.xml`. |
|
|
76
|
-
| `app/themes` | Contains themes to customize the assets and styles of the entire GUI. |
|
|
77
|
-
| `app/views` | Contains views in the format `filename.xml` with the optional corresponding files `app/controllers/filename.js` and `app/styles/filename.tss`. |
|
|
78
|
-
| `app/widgets` | Contains widget files. Each widget will have its own `app`-like directory structure. |
|
|
79
|
-
| `i18n` | Since Alloy 1.8.0 and Titanium 5.2.0 Language Strings are sourced from `app/i18n` and Alloy will generate the `i18n` folder in the project root. Before Alloy 1.8.0, the `i18n` folder was managed in the project root directly. |
|
|
80
|
-
| `Resources` | Contains the Titanium files generated by the Alloy interface from the `app` directory. All files will be overwritten each time the application is built. Since Alloy 1.3.0, Alloy creates a separate Titanium project for each platform you build for in the `Resources/<platform>` folder. |
|
|
81
|
-
|
|
82
|
-
**Notes:** the `lib`, `migrations`, `themes` and `widgets` folders are not automatically generated when creating a new project. The `migrations` and `widgets` folder will be generated by the Alloy command-line interface if any of those components are generated. The `lib` and `themes` folders will need to be manually created.
|
|
83
|
-
|
|
84
|
-
The `alloy.jmk` file is not automatically generated when creating a new project. Use the command-line interface to generate this file.
|
|
85
|
-
|
|
86
|
-
### Platform-Specific Resources
|
|
87
|
-
|
|
88
|
-
Controllers, views and styles can have platform-specific resources. Just add a folder named `android` or `ios` under the component folder and add your platform-specific files for Android or iOS into the folder, respectively.
|
|
89
|
-
|
|
90
|
-
For example, an iOS-specific view and an Android-specific controller would look like this:
|
|
91
|
-
|
|
92
|
-
```
|
|
93
|
-
app/
|
|
94
|
-
├── controllers/
|
|
95
|
-
│ ├── android/
|
|
96
|
-
│ │ └── index.js
|
|
97
|
-
│ └── index.js
|
|
98
|
-
└── views/
|
|
99
|
-
├── ios/
|
|
100
|
-
│ └── index.xml
|
|
101
|
-
└── index.xml
|
|
102
|
-
```
|
|
103
|
-
|
|
104
|
-
Alternatively, you can use special conditional code and attributes inside the controllers, views and styles to apply platform-specific code and components.
|
|
105
|
-
|
|
106
|
-
Also, the `assets` folder is laid out the same way as the `Resources` folder in a Titanium project for platform-specific files and density-specific images.
|
|
107
|
-
|
|
108
|
-
## Widgets
|
|
109
|
-
|
|
110
|
-
Widgets are self-contained components that can be easily dropped into Alloy-powered Titanium projects. They were conceived as a way to reuse code in multiple applications or to be used multiple times in the same application. Widgets have their own models, views, controllers, styles and assets and are laid out the same as the `app` directory in the Alloy project.
|
|
111
|
-
|
|
112
|
-
* For information on using widgets in a project, see Importing Widgets.
|
|
113
|
-
* For information on creating widgets, see Creating Widgets.
|
|
114
|
-
* To search publicly available widgets, visit gitTio.
|
|
115
|
-
|
|
116
|
-
## Builtins
|
|
117
|
-
|
|
118
|
-
Alloy comes with additional utilities used to simplify certain functions, such as animations, string manipulation, and display unit conversion. These utilities are referred to as 'builtins.' To use these utilities, the controller needs to call `require` with 'alloy' as the root directory. For example, to use an animation function to shake the current view by pressing the 'shake' button:
|
|
119
|
-
|
|
120
|
-
```javascript
|
|
121
|
-
const animation = require('alloy/animation');
|
|
122
|
-
$.shake.addEventListener('click', e => {
|
|
123
|
-
animation.shake($.view);
|
|
124
|
-
});
|
|
125
|
-
```
|
|
126
|
-
|
|
127
|
-
## Compilation Process
|
|
128
|
-
|
|
129
|
-
This section provides a brief overview of how the Alloy command-line interface converts the files in the `app` folder to a Titanium project in the `Resources/<platform>` folder for each platform you build your project for. Before Alloy 1.3.0, Alloy creates only one Titanium project in the `Resources` folder.
|
|
130
|
-
|
|
131
|
-
### Cleanup
|
|
132
|
-
|
|
133
|
-
The `Resources` folder is cleaned of any previous built files.
|
|
134
|
-
|
|
135
|
-
### Build Configuration
|
|
136
|
-
|
|
137
|
-
If the build configuration file, `alloy.jmk`, exists, it is loaded. The 'pre:load' task executes at this point if it is defined.
|
|
138
|
-
|
|
139
|
-
### Alloy Framework, Assets, and Lib
|
|
140
|
-
|
|
141
|
-
Alloy framework files, which include the Backbone.js and Underscore.js libraries, sync adapters and base controller class, are copied to the `Resources/<platform>/alloy` folder. The Alloy base library, `alloy.js`, is copied to the `Resources` folder. These files are necessary to run any Alloy project.
|
|
142
|
-
|
|
143
|
-
The project configuration file, `config.json`, is processed and copied to `Resources/<platform>/alloy/CFG.js`.
|
|
144
|
-
|
|
145
|
-
The files in the `assets` and `lib` folders, as well as the files in the theme's assets folder, are copied to the `Resources` folder.
|
|
146
|
-
|
|
147
|
-
The 'pre:compile' task executes at this point if it is defined.
|
|
148
|
-
|
|
149
|
-
### Model-View-Controller and Widget Generation
|
|
150
|
-
|
|
151
|
-
The model files are processed. The compiler creates a JavaScript file per model and copies them to the `Resources/<platform>/alloy/models` folder.
|
|
152
|
-
|
|
153
|
-
The widget files are processed. The compiler creates a folder per widget that contains JavaScript files per view-controller and copies them to the `Resources/<platform>/alloy/widgets` folder.
|
|
154
|
-
|
|
155
|
-
The style, view, and controller files, as well as the files in the theme's style folder and the `app.tss` global style file, are processed. The compiler creates a JavaScript file per view-controller and copies them to the `Resources/<platform>/alloy/controllers` folder.
|
|
156
|
-
|
|
157
|
-
### Main Application
|
|
158
|
-
|
|
159
|
-
Alloy creates a skeleton `app.js` file from a template. The contents of this file require some Alloy modules and calls the main view-controller `index.js`. If an initializer file, `alloy.js`, exists, the entire contents of the file are copied into the `app.js` file right before the call to initiate the main view-controller.
|
|
160
|
-
|
|
161
|
-
Before the file is written to the `Resources` directory, the 'compile:app.js' task executes if one is defined in the build configuration file.
|
|
162
|
-
|
|
163
|
-
### Code Optimization
|
|
164
|
-
|
|
165
|
-
The generated code is processed through UglifyJS to optimize the code for speed and compactness. The code is optionally beautified.
|
|
166
|
-
|
|
167
|
-
If the code is compiled for a specific platform, all conditional code that should not be executed for that platform is removed. For example, if the application contains code sections specifically for iOS but the application is compiled for an Android platform, all of the iOS conditional code is removed.
|
|
168
|
-
|
|
169
|
-
Required Alloy builtin libraries are copied to the `Resources/<platform>/alloy` folder and optimized in the same process as described before.
|
|
170
|
-
|
|
171
|
-
Then, the 'post:compile' task executes if it is defined in the build configuration file.
|
|
36
|
+
Sources: [Alloy](https://titaniumsdk.com/docs/alloy.md), [project structure](https://titaniumsdk.com/docs/build/project-structure.md), [first app](https://titaniumsdk.com/docs/build/first-app.md).
|
|
@@ -1,279 +1,81 @@
|
|
|
1
|
-
# Alloy
|
|
1
|
+
# Alloy controllers
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
A controller runs when `Alloy.createController()` constructs it. XML elements with IDs are available as `$.<id>`. The top-level element uses the controller filename as its ID unless XML supplies another ID: `$.index` is therefore not guaranteed when the root has an explicit ID.
|
|
4
4
|
|
|
5
|
-
|
|
5
|
+
## Arguments and events
|
|
6
6
|
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
In Alloy, controllers contain the application logic used to control the UI and communicate with the model. The following code contains the presentation logic (`index.js`) associated with the view (`index.xml`).
|
|
10
|
-
|
|
11
|
-
**app/controllers/index.js**
|
|
7
|
+
Read arguments at the top of the controller, including arguments received through `<Require>`:
|
|
12
8
|
|
|
13
9
|
```javascript
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
}
|
|
17
|
-
|
|
18
|
-
$.index.open();
|
|
19
|
-
```
|
|
20
|
-
|
|
21
|
-
**app/views/index.xml**
|
|
22
|
-
|
|
23
|
-
```xml
|
|
24
|
-
<Alloy>
|
|
25
|
-
<Window class="container">
|
|
26
|
-
<Label id="label" onClick="doClick">Hello, World</Label>
|
|
27
|
-
</Window>
|
|
28
|
-
</Alloy>
|
|
29
|
-
```
|
|
30
|
-
|
|
31
|
-
All UI elements which have an `id` attribute in a view are automatically defined and available as a property prefixed by the special variable `$` in the controller. The `$` is a reference to the controller. For example, the `$.label` prefix in the controller is used to access the `Ti.UI.Label` object instance in the view. This reference is used to directly access properties or methods of this object. For example, calling `$.label.hide()` hides the label from the view or you can change the label text with `$.label.text`.
|
|
32
|
-
|
|
33
|
-
To access external controllers and views, use the `Alloy.createController` and `Controller.getView` methods, respectively.
|
|
34
|
-
|
|
35
|
-
If the top-level UI object does not have an ID defined, reference it using the name of the controller prefixed by the `$`. Since the Window object in the view does not contain an ID, the controller uses `$.index` to grab the top-level UI object from the view. However, if an `id` attribute was defined, for example, `<Window id='window'>`, the controller needs to use `$.window` to gain access to the Window object; `$.index` will be undefined and the application will throw an error when calling `$.index.open()`.
|
|
36
|
-
|
|
37
|
-
### Events
|
|
38
|
-
|
|
39
|
-
Controllers extend `BackBone.Events` and as such can dispatch events.
|
|
40
|
-
|
|
41
|
-
For example, our index view could also require another controller to deliver the label and listen to an event:
|
|
42
|
-
|
|
43
|
-
**app/views/index.xml**
|
|
44
|
-
|
|
45
|
-
```xml
|
|
46
|
-
<Alloy>
|
|
47
|
-
<Window class="container">
|
|
48
|
-
<Require id="label" src="label" onNotify="doSomething" />
|
|
49
|
-
</Window>
|
|
50
|
-
</Alloy>
|
|
10
|
+
// app/controllers/detail.js
|
|
11
|
+
const noteId = $.args.id;
|
|
12
|
+
$.title.text = `Note ${noteId}`;
|
|
51
13
|
```
|
|
52
14
|
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
**app/views/label.xml**
|
|
56
|
-
|
|
57
|
-
```xml
|
|
58
|
-
<Alloy>
|
|
59
|
-
<Label id="label" onClick="passClick">Hello, World</Label>
|
|
60
|
-
</Alloy>
|
|
61
|
-
```
|
|
62
|
-
|
|
63
|
-
And that label-controller would in turn fire the notify event on itself so the index controller will receive it:
|
|
64
|
-
|
|
65
|
-
**app/controllers/label.js**
|
|
15
|
+
Use a named top-level function for an XML event handler:
|
|
66
16
|
|
|
67
17
|
```javascript
|
|
68
|
-
function
|
|
69
|
-
$.
|
|
18
|
+
function doGo() {
|
|
19
|
+
$.greeting.text = 'Going';
|
|
70
20
|
}
|
|
71
21
|
```
|
|
72
22
|
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
Controllers can inherit from other controllers by assigning them as a base (parent) controller: `exports.baseController = 'baseControllerName'`. As in the CommonJS model, the controller inherits any exported functions from the base controller. These functions can also be overwritten.
|
|
23
|
+
The view binds it with `onClick="doGo"`. See [XML views](./VIEWS_XML.md) for a complete screen.
|
|
76
24
|
|
|
77
|
-
|
|
25
|
+
## Creating and opening
|
|
78
26
|
|
|
79
|
-
|
|
27
|
+
A controller is not a Window. Construct it, then open its top-level Window:
|
|
80
28
|
|
|
81
29
|
```javascript
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
};
|
|
85
|
-
```
|
|
86
|
-
|
|
87
|
-
**app/views/animal.xml**
|
|
88
|
-
|
|
89
|
-
```xml
|
|
90
|
-
<Alloy>
|
|
91
|
-
<Label id="animalLabel">Animal</Label>
|
|
92
|
-
</Alloy>
|
|
30
|
+
const detail = Alloy.createController('detail', { id: 42 });
|
|
31
|
+
detail.getView().open();
|
|
93
32
|
```
|
|
94
33
|
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
**app/controllers/dog.js**
|
|
34
|
+
`getView()` returns the first top-level element. Alternatively, let the controller export the operation:
|
|
98
35
|
|
|
99
36
|
```javascript
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
alert("Bark!");
|
|
37
|
+
// app/controllers/detail.js
|
|
38
|
+
exports.open = () => {
|
|
39
|
+
$.detail.open();
|
|
104
40
|
};
|
|
105
41
|
```
|
|
106
42
|
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
Alloy introduces a set of special variables that act like compiler directives. Using these compiler constants optimizes the code at generation/compilation and any non-reachable code is removed.
|
|
43
|
+
The caller uses `detail.open()`. Do not also open the Window at controller top level: the two approaches would open it twice. Anything on `exports` is exposed on the returned controller.
|
|
110
44
|
|
|
111
|
-
|
|
45
|
+
## Cleaning up
|
|
112
46
|
|
|
113
|
-
|
|
114
|
-
* `OS_IOS` : true if the current compiler target is iOS
|
|
115
|
-
* `ENV_DEV` : true if the current compiler target is built for development (running in the simulator or emulator)
|
|
116
|
-
* `ENV_TEST` : true if the current compiler target is built for testing on a device
|
|
117
|
-
* `ENV_PRODUCTION` : true if the current compiler target is built for production (running after a packaged installation)
|
|
118
|
-
* `DIST_ADHOC` (since Alloy 1.4.0) : true if the current compiler target is built for iOS Ad Hoc distribution, for example, if you set the `-T dist-adhoc` option when building with the Titanium CLI. Note that `ENV_PRODUCTION` will be true too since this deployment is only for production builds.
|
|
119
|
-
* `DIST_STORE` (since Alloy 1.4.0) : true if the current compiler target is built for deployment to the Google Play Store or iTunes App Store, for example, if you set the `-T dist-store` option when building with the Titanium CLI. Note that `ENV_PRODUCTION` will be true too since this deployment is only for production builds.
|
|
47
|
+
Alloy does not automatically dispose of controllers. External listeners, timers and geolocation subscriptions can outlive the Window. Remove listeners using the same function reference, clear timers and stop subscriptions when their owner closes. `$.destroy()` removes generated model/view bindings; it does not remove your external listeners.
|
|
120
48
|
|
|
121
|
-
|
|
49
|
+
After completing location setup and authorization through `ti-howtos`, this illustrates listener ownership:
|
|
122
50
|
|
|
123
51
|
```javascript
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
title: 'Close'
|
|
127
|
-
});
|
|
128
|
-
|
|
129
|
-
closeButton.addEventListener('click', () => {
|
|
130
|
-
$.window.close();
|
|
131
|
-
});
|
|
132
|
-
|
|
133
|
-
$.window.leftNavButton = closeButton;
|
|
52
|
+
function onLocation(event) {
|
|
53
|
+
Ti.API.info(event);
|
|
134
54
|
}
|
|
135
|
-
```
|
|
136
|
-
|
|
137
|
-
### Passing Arguments
|
|
138
|
-
|
|
139
|
-
When initializing an external controller, you can pass arguments to customize it, for instance, `const controller = Alloy.createController('controller', {args1: 'foo'})`. In the external controller, the special variable `$.args` is used to receive the arguments. Before Alloy 1.6, you needed to use `arguments[0]`. For example, suppose you want to add multiple TableViewRow objects to a TableView object.
|
|
140
55
|
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
<Alloy>
|
|
147
|
-
<TableViewRow id="rowView"/>
|
|
148
|
-
</Alloy>
|
|
56
|
+
Ti.Geolocation.addEventListener('location', onLocation);
|
|
57
|
+
$.index.addEventListener('close', () => {
|
|
58
|
+
Ti.Geolocation.removeEventListener('location', onLocation);
|
|
59
|
+
$.destroy();
|
|
60
|
+
});
|
|
149
61
|
```
|
|
150
62
|
|
|
151
|
-
|
|
63
|
+
Here `index.xml` must own a Window addressed as `$.index`. A child controller without that lifecycle needs cleanup coordinated by its owner. Keep each controller's cleanup separate from any shared model still used by another screen.
|
|
152
64
|
|
|
153
|
-
|
|
154
|
-
$.rowView.title = $.args.title || '';
|
|
155
|
-
$.rowView.url = $.args.url || '';
|
|
156
|
-
```
|
|
65
|
+
## Shared code
|
|
157
66
|
|
|
158
|
-
|
|
67
|
+
`app/lib/` contains CommonJS modules:
|
|
159
68
|
|
|
160
69
|
```javascript
|
|
161
|
-
const
|
|
70
|
+
const format = require('/format');
|
|
162
71
|
```
|
|
163
72
|
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
**app/controllers/index.js**
|
|
73
|
+
The slash resolves against the application root, not the filesystem. Modules are available to controllers and widgets. Initialize shared state in `app/alloy.js`, before the first controller:
|
|
167
74
|
|
|
168
75
|
```javascript
|
|
169
|
-
|
|
170
|
-
for (let i=0; i<source.length; i++) {
|
|
171
|
-
const arg = {
|
|
172
|
-
title: source[i].postTitle,
|
|
173
|
-
url: source[i].postLink
|
|
174
|
-
};
|
|
175
|
-
data.push(Alloy.createController('row', arg).getView());
|
|
176
|
-
}
|
|
177
|
-
$.tableView.setData(data);
|
|
76
|
+
Alloy.Globals.apiRoot = 'https://example.com/api';
|
|
178
77
|
```
|
|
179
78
|
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
### Global Namespace
|
|
183
|
-
|
|
184
|
-
Controllers can store and access global variables using the `Alloy.Globals` namespace. For example, you can store an instance of a parent window in Globals and access it in another window.
|
|
185
|
-
|
|
186
|
-
Store the parent window:
|
|
187
|
-
|
|
188
|
-
```
|
|
189
|
-
$.index.open();
|
|
190
|
-
Alloy.Globals.parent = $.index;
|
|
191
|
-
```
|
|
192
|
-
|
|
193
|
-
Access the parent window in another controller:
|
|
194
|
-
|
|
195
|
-
```javascript
|
|
196
|
-
const parent = Alloy.Globals.parent;
|
|
197
|
-
parent.close();
|
|
198
|
-
```
|
|
199
|
-
|
|
200
|
-
Other non-controller JavaScript code can access the Globals variable but need to require the Alloy module. See [Extending Alloy](#extending-alloy-underscorejs-and-backbonejs) below.
|
|
201
|
-
|
|
202
|
-
## Initializer File (alloy.js)
|
|
203
|
-
|
|
204
|
-
The initializer file `app/alloy.js` can be used to execute some code near the beginning of the application's lifecycle. The contents of this file will be executed right before the initial `index.js` controller is loaded, allowing you to execute code before any UI components are loaded and to override built-in Alloy functions before they are executed. The code in this file also has access to the `Alloy` namespace.
|
|
205
|
-
|
|
206
|
-
For instance, the default `isTablet` method returns true if it is identified as an iPad, an Android device in the large or extra large group, or if either dimension exceeds 400 dp for Mobile Web application. To override that behavior, you can add the following code to `alloy.js`.
|
|
207
|
-
|
|
208
|
-
```
|
|
209
|
-
Alloy.isTablet = () => {
|
|
210
|
-
return !(Math.min(Ti.Platform.displayCaps.platformHeight, Ti.Platform.displayCaps.platformWidth) < 600);
|
|
211
|
-
}
|
|
212
|
-
```
|
|
213
|
-
|
|
214
|
-
## Library Code and CommonJS Modules
|
|
215
|
-
|
|
216
|
-
Some JavaScript code might not be suitable as controller code, since it does not have an associated view, or you want to separate it from the MVC framework for easier reusability. Create a folder called `lib` in the `app` directory of your Alloy project. Add your CommonJS modules or JavaScript code using the CommonJS format into the `lib` folder. These files are copied to the `Resources` folder, when compiling your Alloy project.
|
|
217
|
-
|
|
218
|
-
To use the library or CommonJS module, require it with the library name or module name without the 'app/lib' path and '.js' extension:
|
|
219
|
-
|
|
220
|
-
```javascript
|
|
221
|
-
const lib = require('library_name');
|
|
222
|
-
lib.foo();
|
|
223
|
-
```
|
|
224
|
-
|
|
225
|
-
> **⚠️ ⚠️ Warning**
|
|
226
|
-
> Titanium and Alloy do not support the Node.js concept of "folders as modules". That is, requiring a folder name does not automatically load the `index.js` or `index.json` file inside the folder, or use the `package.json` file to locate the main entry point. You need to explicitly require the file that serves as the main entry point to the library.
|
|
227
|
-
|
|
228
|
-
### Specs Folder
|
|
229
|
-
|
|
230
|
-
Starting with Alloy 1.2.0, you can add the `specs` folder to your project. Like the `lib` folder, use the `specs` folder to add files to your project, except the files are only used when the deployment type is **not** production.
|
|
231
|
-
|
|
232
|
-
Create a folder called `specs` in the `app` directory of your Alloy project. Add your files to the specs folder. These files are copied to the `Resources` folder, when compiling your Alloy project if the deployment type is **not** production.
|
|
233
|
-
|
|
234
|
-
Use the `ENV_PROD` variable to check if the application is running as a production target or not, before using the files in the `specs` folder.
|
|
235
|
-
|
|
236
|
-
```
|
|
237
|
-
if (!ENV_PROD) {
|
|
238
|
-
// Executes the fooFunction from the foo module
|
|
239
|
-
require('specs/foo').fooFuntion();
|
|
240
|
-
}
|
|
241
|
-
```
|
|
242
|
-
|
|
243
|
-
### Platform-Specific Library Folders
|
|
244
|
-
|
|
245
|
-
Starting with Alloy 1.5.0, you can also create platform-specific subfolders in the `lib` directory. Just add a folder named **android** or **ios** under the component folder and add your platform-specific files for Android or iOS into the folder, respectively. Do not include the platform-specific folder name when referencing the file.
|
|
246
|
-
|
|
247
|
-
```
|
|
248
|
-
app/
|
|
249
|
-
├──lib
|
|
250
|
-
│ ├──ios
|
|
251
|
-
│ │ └── library_name.js
|
|
252
|
-
│ └── library_name.js
|
|
253
|
-
├──models
|
|
254
|
-
├──styles
|
|
255
|
-
└──views
|
|
256
|
-
└── index.xml
|
|
257
|
-
```
|
|
258
|
-
|
|
259
|
-
### Extending Alloy, Underscore.js and Backbone.js
|
|
260
|
-
|
|
261
|
-
To access the Alloy API methods, such as `createController` and `createModel`, as well as Underscore.js and Backbone.js in CommonJS modules and JavaScript files in `app/lib`, you need to load those modules in to the library:
|
|
262
|
-
|
|
263
|
-
```javascript
|
|
264
|
-
const Alloy = require('alloy'), _ = require("alloy/underscore")._, Backbone = require("alloy/backbone");
|
|
265
|
-
|
|
266
|
-
// Alloy extended
|
|
267
|
-
Alloy.createController('foo').getView().open();
|
|
268
|
-
|
|
269
|
-
// Underscore extended
|
|
270
|
-
const even = _.find([1, 2, 3, 4, 5, 6], num => num % 2 === 0);
|
|
271
|
-
Ti.API.info(even);
|
|
272
|
-
|
|
273
|
-
// Backbone extended
|
|
274
|
-
const Book = Backbone.Model.extend();
|
|
275
|
-
const book = new Book({title: 'Ulysses', author: 'James Joyce'});
|
|
276
|
-
Ti.API.info(JSON.stringify(book));
|
|
277
|
-
```
|
|
79
|
+
For compiler constants, use [configuration](../../alloy-howtos/references/config_files.md#compile-time-constants).
|
|
278
80
|
|
|
279
|
-
|
|
81
|
+
Source: [controllers](https://titaniumsdk.com/docs/alloy/controllers.md).
|