@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.
Files changed (138) hide show
  1. package/CONTRIBUTING.md +1 -1
  2. package/README.md +58 -97
  3. package/agents/ti-pro.md +4 -2
  4. package/commands/ti-audit.md +7 -5
  5. package/docs/examples.md +24 -13
  6. package/docs/knowledge-index.md +2 -1
  7. package/lib/config.js +1 -0
  8. package/package.json +1 -1
  9. package/skills/alloy-guides/SKILL.md +18 -179
  10. package/skills/alloy-guides/references/CLI_TASKS.md +17 -216
  11. package/skills/alloy-guides/references/CONCEPTS.md +27 -162
  12. package/skills/alloy-guides/references/CONTROLLERS.md +38 -236
  13. package/skills/alloy-guides/references/MODELS.md +47 -723
  14. package/skills/alloy-guides/references/MODELS_ADVANCED.md +21 -482
  15. package/skills/alloy-guides/references/VIEWS_DYNAMIC.md +12 -222
  16. package/skills/alloy-guides/references/VIEWS_STYLES.md +39 -358
  17. package/skills/alloy-guides/references/VIEWS_XML.md +36 -552
  18. package/skills/alloy-guides/references/WIDGETS.md +49 -127
  19. package/skills/alloy-howtos/SKILL.md +14 -169
  20. package/skills/alloy-howtos/references/best_practices.md +9 -113
  21. package/skills/alloy-howtos/references/cli_reference.md +18 -223
  22. package/skills/alloy-howtos/references/config_files.md +50 -133
  23. package/skills/alloy-howtos/references/debugging_troubleshooting.md +19 -63
  24. package/skills/alloy-howtos/references/samples.md +21 -138
  25. package/skills/ti-api/SKILL.md +10 -2
  26. package/skills/ti-api/references/api-android.md +36 -2
  27. package/skills/ti-api/references/api-app-platform.md +39 -3
  28. package/skills/ti-api/references/api-core.md +50 -18
  29. package/skills/ti-api/references/api-data-network.md +49 -35
  30. package/skills/ti-api/references/api-media.md +45 -27
  31. package/skills/ti-api/references/api-services.md +39 -9
  32. package/skills/ti-api/references/api-ui-android.md +33 -13
  33. package/skills/ti-api/references/api-ui-extras.md +41 -15
  34. package/skills/ti-api/references/api-ui-ios-animator.md +42 -26
  35. package/skills/ti-api/references/api-ui-ios.md +74 -2
  36. package/skills/ti-api/references/api-ui-lists.md +32 -16
  37. package/skills/ti-api/references/api-ui-text-input.md +34 -17
  38. package/skills/ti-api/references/api-ui-views.md +27 -1
  39. package/skills/ti-api/references/api-ui-windows-navigation.md +32 -18
  40. package/skills/ti-api/references/api-xml-global.md +66 -16
  41. package/skills/ti-create-release/SKILL.md +98 -0
  42. package/skills/ti-create-release/references/module-discovery.md +69 -0
  43. package/skills/ti-expert/references/adaptive-layouts.md +1 -1
  44. package/skills/ti-guides/SKILL.md +37 -76
  45. package/skills/ti-guides/references/advanced-data-and-images.md +122 -126
  46. package/skills/ti-guides/references/android-manifest.md +24 -83
  47. package/skills/ti-guides/references/app-distribution.md +31 -377
  48. package/skills/ti-guides/references/application-frameworks.md +127 -335
  49. package/skills/ti-guides/references/cli-reference.md +184 -633
  50. package/skills/ti-guides/references/commonjs-advanced.md +81 -231
  51. package/skills/ti-guides/references/compatibility-matrix.md +36 -75
  52. package/skills/ti-guides/references/hello-world.md +95 -70
  53. package/skills/ti-guides/references/hyperloop-native-access.md +52 -448
  54. package/skills/ti-guides/references/resources.md +174 -142
  55. package/skills/ti-guides/references/sdk-release-notes.md +28 -71
  56. package/skills/ti-guides/references/tiapp-config.md +222 -598
  57. package/skills/ti-howtos/SKILL.md +23 -123
  58. package/skills/ti-howtos/references/cross-platform-development.md +119 -324
  59. package/skills/ti-howtos/references/debugging-profiling.md +77 -445
  60. package/skills/ti-howtos/references/extending-titanium.md +199 -673
  61. package/skills/ti-howtos/references/local-data-sources.md +87 -300
  62. package/skills/ti-howtos/references/location-and-maps.md +86 -213
  63. package/skills/ti-howtos/references/media-apis.md +103 -223
  64. package/skills/ti-howtos/references/notification-services.md +86 -506
  65. package/skills/ti-howtos/references/remote-data-sources.md +97 -316
  66. package/skills/ti-howtos/references/using-modules.md +77 -133
  67. package/skills/ti-synthengine/SKILL.md +62 -111
  68. package/skills/ti-synthengine/assets/example/README.md +50 -59
  69. package/skills/ti-synthengine/assets/example/app.js +67 -65
  70. package/skills/ti-synthengine/assets/example/lib/sequenceOwner.js +39 -40
  71. package/skills/ti-synthengine/assets/example/lib/soundPreset.js +34 -0
  72. package/skills/ti-synthengine/assets/index.d.ts +122 -2
  73. package/skills/ti-synthengine/references/advanced-examples.md +4 -4
  74. package/skills/ti-synthengine/references/api.md +40 -18
  75. package/skills/ti-synthengine/references/audio-engine.md +15 -57
  76. package/skills/ti-synthengine/references/examples.md +63 -6
  77. package/skills/ti-synthengine/references/guide.md +61 -57
  78. package/skills/ti-synthengine/references/instruments-and-effects.md +15 -15
  79. package/skills/ti-synthengine/references/native-variation.md +53 -14
  80. package/skills/ti-synthengine/references/recipes-interaction.md +25 -20
  81. package/skills/ti-synthengine/references/recipes.md +19 -16
  82. package/skills/ti-synthengine/references/recommendations.md +12 -12
  83. package/skills/ti-synthengine/references/sound-api.md +197 -0
  84. package/skills/ti-synthengine/references/sound-design.md +7 -7
  85. package/skills/ti-synthengine/references/source-notes.md +62 -172
  86. package/skills/ti-synthengine/references/troubleshooting.md +17 -19
  87. package/skills/ti-synthengine/references/upgrade-2.0.0.md +40 -0
  88. package/skills/ti-ui/SKILL.md +28 -143
  89. package/skills/ti-ui/references/icons-and-splash-screens.md +74 -403
  90. package/skills/ti-ui/references/layouts-and-positioning.md +175 -402
  91. package/skills/ti-ui/references/listviews-and-performance.md +100 -703
  92. package/skills/ti-ui/references/platform-conventions.md +180 -0
  93. package/skills/ti-ui/references/user-interface.md +43 -0
  94. package/skills/alloy-guides/references/VIEWS_WITHOUT_CONTROLLERS.md +0 -102
  95. package/skills/alloy-howtos/references/custom_tags.md +0 -148
  96. package/skills/ti-guides/references/coding-best-practices.md +0 -149
  97. package/skills/ti-guides/references/javascript-primer.md +0 -414
  98. package/skills/ti-guides/references/reserved-words.md +0 -36
  99. package/skills/ti-guides/references/style-and-conventions.md +0 -103
  100. package/skills/ti-howtos/references/android-platform-deep-dives.md +0 -624
  101. package/skills/ti-howtos/references/automation-fastlane-appium.md +0 -96
  102. package/skills/ti-howtos/references/buffer-codec-streams.md +0 -162
  103. package/skills/ti-howtos/references/google-maps-v2.md +0 -172
  104. package/skills/ti-howtos/references/ios-map-kit.md +0 -149
  105. package/skills/ti-howtos/references/ios-platform-deep-dives.md +0 -611
  106. package/skills/ti-howtos/references/tutorials.md +0 -565
  107. package/skills/ti-howtos/references/web-content-integration.md +0 -287
  108. package/skills/ti-howtos/references/webpack-build-pipeline.md +0 -124
  109. package/skills/ti-synthengine/references/android-sim80-correction-evidence.zip +0 -0
  110. package/skills/ti-synthengine/references/android-sim80-correction.json +0 -162
  111. package/skills/ti-synthengine/references/audio-pipeline-validation.md +0 -19
  112. package/skills/ti-synthengine/references/bypass-physical-recheck-evidence.zip +0 -0
  113. package/skills/ti-synthengine/references/frontier-android-evidence.zip +0 -0
  114. package/skills/ti-synthengine/references/frontier-ipad-evidence.zip +0 -0
  115. package/skills/ti-synthengine/references/frontier-physical-validation.json +0 -1918
  116. package/skills/ti-synthengine/references/native-tone-repetition-validation.md +0 -59
  117. package/skills/ti-synthengine/references/native-variation-proposal.md +0 -182
  118. package/skills/ti-synthengine/references/native-variation-validation.md +0 -63
  119. package/skills/ti-synthengine/references/performance-review-evidence.zip +0 -0
  120. package/skills/ti-synthengine/references/performance-review.json +0 -1146
  121. package/skills/ti-synthengine/references/physical-validation.json +0 -1457
  122. package/skills/ti-synthengine/references/source-snapshot.json +0 -542
  123. package/skills/ti-synthengine/references/stats-performance.json +0 -2992
  124. package/skills/ti-synthengine/references/stats-performance.md +0 -82
  125. package/skills/ti-synthengine/references/studio-validation.json +0 -6202
  126. package/skills/ti-synthengine/references/unified-bypass-performance.json +0 -22425
  127. package/skills/ti-synthengine/references/unified-validation.json +0 -314
  128. package/skills/ti-ui/references/accessibility-deep-dive.md +0 -288
  129. package/skills/ti-ui/references/animation-and-matrices.md +0 -569
  130. package/skills/ti-ui/references/application-structures.md +0 -626
  131. package/skills/ti-ui/references/custom-fonts-styling.md +0 -549
  132. package/skills/ti-ui/references/event-handling.md +0 -401
  133. package/skills/ti-ui/references/gestures.md +0 -448
  134. package/skills/ti-ui/references/orientation.md +0 -374
  135. package/skills/ti-ui/references/platform-ui-android.md +0 -727
  136. package/skills/ti-ui/references/platform-ui-ios.md +0 -576
  137. package/skills/ti-ui/references/scrolling-views.md +0 -288
  138. package/skills/ti-ui/references/tableviews.md +0 -542
@@ -1,171 +1,36 @@
1
- # Alloy Concepts
1
+ # Alloy concepts and project structure
2
2
 
3
- ## Overview
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
- This guide covers the important concepts related to the Alloy framework, including the model-view-controller framework, convention-over-configuration design, widgets, and built-in support from Backbone.js and Underscore.js.
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
- ## Model-View-Controller
7
+ ## Files and ownership
8
8
 
9
- Alloy uses the model-view-controller (MVC) pattern, which separates the application into three different components:
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
- * **Models** provide the business logic, containing the rules, data and state of the application
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
- * **Views** provide the GUI components to the user, either presenting data or allowing the user to interact with the model data
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
- * **Controllers** provide the glue between the model and view components in the form of application logic
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 example, in a calendar application, the models include events, reminders, invitations, and contacts. The views present the calendar data and reminders to the user or allow the user to add events. For reminders, the controller checks the model data and launches a 'reminder' view to the user. For adding events, the controller opens an 'add event' view, then adds the event into the model data once the user entered the data.
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
- An advantage of MVC is the ability to reuse code by separating the functionality. For example, you can have specific views for different devices, while keeping the controller code relatively the same and the model data unchanged.
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 Controllers
1
+ # Alloy controllers
2
2
 
3
- ## Overview
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
- This topic covers how to write controller code as well as other JavaScript files excluding models. Some traditional Titanium development is required, since Alloy controllers make direct calls to the Titanium SDK API to manipulate UI objects and access non-UI APIs.
5
+ ## Arguments and events
6
6
 
7
- ## Controllers
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
- function doClick(e) {
15
- alert($.label.text);
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
- The view of the required label-controller would listen to the `click` event of the label itself:
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 passClick(e) {
69
- $.trigger('notify');
18
+ function doGo() {
19
+ $.greeting.text = 'Going';
70
20
  }
71
21
  ```
72
22
 
73
- ### Inheritance
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
- For example, the animal view-controller defines a label object with a speak method:
25
+ ## Creating and opening
78
26
 
79
- **app/controllers/animal.js**
27
+ A controller is not a Window. Construct it, then open its top-level Window:
80
28
 
81
29
  ```javascript
82
- exports.speak = () => {
83
- alert("Yelp!");
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
- Then, the following code inherits from the animal view-controller and overrides the speak method and label text property to customize it for a dog controller.
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
- exports.baseController = "animal";
101
- $.animalLabel.text = "Dog";
102
- exports.speak = () => {
103
- alert("Bark!");
37
+ // app/controllers/detail.js
38
+ exports.open = () => {
39
+ $.detail.open();
104
40
  };
105
41
  ```
106
42
 
107
- ### Conditional Code
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
- The following are the constants defined by Alloy for use in the controller code:
45
+ ## Cleaning up
112
46
 
113
- * `OS_ANDROID` : true if the current compiler target is Android
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
- For example, since iOS devices do not include a back button, the application can conditionally add one to a window controller:
49
+ After completing location setup and authorization through `ti-howtos`, this illustrates listener ownership:
122
50
 
123
51
  ```javascript
124
- if (OS_IOS) {
125
- const closeButton = Ti.UI.createButton({
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
- For the TableViewRow object, called 'row', the view contains only the object, and the controller contains only a few lines of code to parse the arguments:
142
-
143
- **app/views/row.xml**
144
-
145
- ```xml
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
- **app/controllers/row.js (Alloy 1.6+)**
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
- **app/controllers/row.js (Alloy <1.6)**
67
+ `app/lib/` contains CommonJS modules:
159
68
 
160
69
  ```javascript
161
- const args = arguments[0] || {};
70
+ const format = require('/format');
162
71
  ```
163
72
 
164
- In a separate controller containing the TableView object, called 'tableView', the code is cycling through an array of data and creating new instances of 'row' to supply it to 'tableView.'
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
- const data = [];
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
- As seen in the example above, the controller is passing different arguments to the 'row' controller, creating unique instances of 'row'.
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
- Currently, these modules are automatically available in the global scope and these APIs can be used without loading the modules. Referencing these modules without loading them first with the `require` method is discouraged and this behavior may be deprecated in the future. To ensure compatibility with future releases, always use the `require` method to load and use these modules.
81
+ Source: [controllers](https://titaniumsdk.com/docs/alloy/controllers.md).