@maccesar/titools 2.10.1 → 3.1.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 (81) hide show
  1. package/AGENTS-VERCEL-RESEARCH.md +23 -12
  2. package/README.md +81 -182
  3. package/agents/ti-pro.md +8 -14
  4. package/lib/cleanup.js +13 -0
  5. package/lib/commands/skills.js +2 -1
  6. package/lib/config.js +9 -11
  7. package/lib/platform.js +1 -1
  8. package/package.json +2 -3
  9. package/skills/alloy-guides/SKILL.md +0 -190
  10. package/skills/alloy-guides/references/CLI_TASKS.md +0 -233
  11. package/skills/alloy-guides/references/CONCEPTS.md +0 -171
  12. package/skills/alloy-guides/references/CONTROLLERS.md +0 -279
  13. package/skills/alloy-guides/references/MODELS.md +0 -1214
  14. package/skills/alloy-guides/references/PURGETSS.md +0 -46
  15. package/skills/alloy-guides/references/VIEWS_DYNAMIC.md +0 -235
  16. package/skills/alloy-guides/references/VIEWS_STYLES.md +0 -375
  17. package/skills/alloy-guides/references/VIEWS_WITHOUT_CONTROLLERS.md +0 -102
  18. package/skills/alloy-guides/references/VIEWS_XML.md +0 -581
  19. package/skills/alloy-guides/references/WIDGETS.md +0 -160
  20. package/skills/alloy-howtos/SKILL.md +0 -181
  21. package/skills/alloy-howtos/references/best_practices.md +0 -121
  22. package/skills/alloy-howtos/references/cli_reference.md +0 -230
  23. package/skills/alloy-howtos/references/config_files.md +0 -158
  24. package/skills/alloy-howtos/references/custom_tags.md +0 -148
  25. package/skills/alloy-howtos/references/debugging_troubleshooting.md +0 -78
  26. package/skills/alloy-howtos/references/samples.md +0 -156
  27. package/skills/ti-api/SKILL.md +0 -109
  28. package/skills/ti-api/references/api-android.md +0 -675
  29. package/skills/ti-api/references/api-app-platform.md +0 -636
  30. package/skills/ti-api/references/api-core.md +0 -764
  31. package/skills/ti-api/references/api-data-network.md +0 -641
  32. package/skills/ti-api/references/api-media.md +0 -655
  33. package/skills/ti-api/references/api-modules-ble-bluetooth.md +0 -657
  34. package/skills/ti-api/references/api-modules-coremotion-urlsession.md +0 -411
  35. package/skills/ti-api/references/api-modules-map.md +0 -632
  36. package/skills/ti-api/references/api-modules-nfc.md +0 -725
  37. package/skills/ti-api/references/api-modules-social-misc.md +0 -526
  38. package/skills/ti-api/references/api-services.md +0 -700
  39. package/skills/ti-api/references/api-ui-android.md +0 -499
  40. package/skills/ti-api/references/api-ui-extras.md +0 -702
  41. package/skills/ti-api/references/api-ui-ios-animator.md +0 -378
  42. package/skills/ti-api/references/api-ui-ios.md +0 -756
  43. package/skills/ti-api/references/api-ui-lists.md +0 -581
  44. package/skills/ti-api/references/api-ui-text-input.md +0 -607
  45. package/skills/ti-api/references/api-ui-views.md +0 -572
  46. package/skills/ti-api/references/api-ui-windows-navigation.md +0 -676
  47. package/skills/ti-api/references/api-xml-global.md +0 -743
  48. package/skills/ti-guides/SKILL.md +0 -75
  49. package/skills/ti-guides/references/advanced-data-and-images.md +0 -155
  50. package/skills/ti-guides/references/android-manifest.md +0 -97
  51. package/skills/ti-guides/references/app-distribution.md +0 -373
  52. package/skills/ti-guides/references/application-frameworks.md +0 -366
  53. package/skills/ti-guides/references/cli-reference.md +0 -700
  54. package/skills/ti-guides/references/coding-best-practices.md +0 -150
  55. package/skills/ti-guides/references/commonjs-advanced.md +0 -279
  56. package/skills/ti-guides/references/hello-world.md +0 -99
  57. package/skills/ti-guides/references/hyperloop-native-access.md +0 -458
  58. package/skills/ti-guides/references/javascript-primer.md +0 -402
  59. package/skills/ti-guides/references/reserved-words.md +0 -36
  60. package/skills/ti-guides/references/resources.md +0 -172
  61. package/skills/ti-guides/references/style-and-conventions.md +0 -104
  62. package/skills/ti-guides/references/tiapp-config.md +0 -655
  63. package/skills/ti-howtos/SKILL.md +0 -143
  64. package/skills/ti-howtos/references/android-platform-deep-dives.md +0 -609
  65. package/skills/ti-howtos/references/automation-fastlane-appium.md +0 -96
  66. package/skills/ti-howtos/references/buffer-codec-streams.md +0 -162
  67. package/skills/ti-howtos/references/cross-platform-development.md +0 -358
  68. package/skills/ti-howtos/references/debugging-profiling.md +0 -473
  69. package/skills/ti-howtos/references/extending-titanium.md +0 -684
  70. package/skills/ti-howtos/references/google-maps-v2.md +0 -172
  71. package/skills/ti-howtos/references/ios-map-kit.md +0 -149
  72. package/skills/ti-howtos/references/ios-platform-deep-dives.md +0 -595
  73. package/skills/ti-howtos/references/local-data-sources.md +0 -310
  74. package/skills/ti-howtos/references/location-and-maps.md +0 -267
  75. package/skills/ti-howtos/references/media-apis.md +0 -268
  76. package/skills/ti-howtos/references/notification-services.md +0 -539
  77. package/skills/ti-howtos/references/remote-data-sources.md +0 -339
  78. package/skills/ti-howtos/references/tutorials.md +0 -552
  79. package/skills/ti-howtos/references/using-modules.md +0 -182
  80. package/skills/ti-howtos/references/web-content-integration.md +0 -288
  81. package/skills/ti-howtos/references/webpack-build-pipeline.md +0 -125
@@ -1,190 +0,0 @@
1
- ---
2
- name: alloy-guides
3
- description: "Titanium Alloy MVC official framework reference. Use when working with, reviewing, analyzing, or examining Alloy models, views, controllers, Backbone.js data binding, TSS styling, widgets, Alloy CLI, sync adapters, migrations, or MVC compilation. AUTO-DETECT: If the project has an app/views/ + app/controllers/ + app/styles/ folder structure, it is an Alloy project — invoke this skill BEFORE editing XML views, JS controllers, or TSS styles. Alloy XML is NOT HTML; TSS is NOT CSS; controllers follow Alloy-specific patterns, not web MVC."
4
- argument-hint: "[concept]"
5
- allowed-tools: Read, Grep, Glob, Edit, Write, Bash(node *)
6
- ---
7
-
8
- # Alloy MVC framework guide
9
-
10
- Reference for building Titanium mobile applications with the Alloy MVC framework and Backbone.js.
11
-
12
- ## Project detection
13
-
14
- > **️ℹ️ AUTO-DETECTS ALLOY PROJECTS**
15
- > This skill automatically detects Alloy projects when invoked and provides framework-specific guidance.
16
- >
17
- > **Detection occurs automatically** - no manual command needed.
18
- >
19
- > **Alloy project indicators:**
20
- > - `app/` folder (MVC structure)
21
- > - `app/views/`, `app/controllers/` folders
22
- > - `app/models/` folder
23
- >
24
- > **Behavior based on detection:**
25
- > - **Alloy detected** → Provides Alloy MVC documentation, Backbone.js patterns, TSS styling, widgets
26
- > - **Not detected** → Indicates this skill is for Alloy projects only, does not suggest Alloy-specific features
27
-
28
- ## Quick reference
29
-
30
- | Topic | Reference File |
31
- | ------------------------------------------------ | ----------------------------------------------------------------------- |
32
- | Core concepts, MVC, Backbone.js, conventions | [CONCEPTS.md](references/CONCEPTS.md) |
33
- | Controllers, events, conditional code, arguments | [CONTROLLERS.md](references/CONTROLLERS.md) |
34
- | Models, collections, data binding, migrations | [MODELS.md](references/MODELS.md) |
35
- | XML markup, elements, attributes, events | [VIEWS_XML.md](references/VIEWS_XML.md) |
36
- | TSS styling, themes, platform-specific styles | [VIEWS_STYLES.md](references/VIEWS_STYLES.md) |
37
- | Dynamic styles, autostyle, runtime styling | [VIEWS_DYNAMIC.md](references/VIEWS_DYNAMIC.md) |
38
- | Controllers-less views, patterns | [VIEWS_WITHOUT_CONTROLLERS.md](references/VIEWS_WITHOUT_CONTROLLERS.md) |
39
- | Creating and using widgets | [WIDGETS.md](references/WIDGETS.md) |
40
- | CLI commands, code generation | [CLI_TASKS.md](references/CLI_TASKS.md) |
41
- | PurgeTSS integration (optional addon) | [PURGETSS.md](references/PURGETSS.md) |
42
-
43
- ## Project structure
44
-
45
- Standard Alloy project structure:
46
-
47
- ```
48
- app/
49
- ├── alloy.js # Initializer file
50
- ├── alloy.jmk # Build configuration
51
- ├── config.json # Project configuration
52
- ├── assets/ # Images, fonts, files (→ Resources/)
53
- ├── controllers/ # Controller files (.js)
54
- ├── i18n/ # Localization strings (→ i18n/)
55
- ├── lib/ # CommonJS modules
56
- ├── migrations/ # DB migrations (<DATETIME>_<name>.js)
57
- ├── models/ # Model definitions (.js)
58
- ├── platform/ # Platform-specific resources (→ platform/)
59
- ├── specs/ # Test-only files (dev/test only)
60
- ├── styles/ # TSS files (.tss)
61
- ├── themes/ # Theme folders
62
- ├── views/ # XML markup files (.xml)
63
- └── widgets/ # Widget components
64
- ```
65
-
66
- ## MVC quick start
67
-
68
- **Controller** (`app/controllers/index.js`):
69
- ```javascript
70
- function doClick(e) {
71
- alert($.label.text);
72
- }
73
- $.index.open();
74
- ```
75
-
76
- **View** (`app/views/index.xml`):
77
- ```xml
78
- <Alloy>
79
- <Window class="container">
80
- <Label id="label" onClick="doClick">Hello, World</Label>
81
- </Window>
82
- </Alloy>
83
- ```
84
-
85
- **Style** (`app/styles/index.tss`):
86
- ```javascript
87
- ".container": { backgroundColor: "white" }
88
- "Label": { color: "#000" }
89
- ```
90
-
91
- ## Key concepts
92
-
93
- - **Models/Collections**: Backbone.js objects with sync adapters (sql, properties)
94
- - **Views**: XML markup with TSS styling
95
- - **Controllers**: JavaScript logic with `$` reference to view components
96
- - **Data Binding**: Bind collections to UI components automatically
97
- - **Widgets**: Reusable components with MVC structure
98
- - **Conventions**: File naming and placement drive code generation
99
-
100
- ## Critical rules
101
-
102
- ### Platform-specific properties in TSS
103
-
104
- > **🚨 CRITICAL: Platform-specific properties require modifiers**
105
- > Using `Ti.UI.iOS.*` or `Ti.UI.Android.*` properties in TSS without platform modifiers causes cross-platform compilation failures.
106
- >
107
- > Example of the failure:
108
- > ```tss
109
- > // WRONG - Adds Ti.UI.iOS to Android project
110
- > "#mainWindow": {
111
- > statusBarStyle: Ti.UI.iOS.StatusBar.LIGHT_CONTENT // FAILS on Android!
112
- > }
113
- > ```
114
- >
115
- > Correct approach - use platform modifiers:
116
- > ```tss
117
- > // CORRECT - Only adds to iOS
118
- > "#mainWindow[platform=ios]": {
119
- > statusBarStyle: Ti.UI.iOS.StatusBar.LIGHT_CONTENT
120
- > }
121
- >
122
- > // CORRECT - Only adds to Android
123
- > "#mainWindow[platform=android]": {
124
- > actionBar: {
125
- > displayHomeAsUp: true
126
- > }
127
- > }
128
- > ```
129
- >
130
- > Properties that always require platform modifiers:
131
- > - iOS: `statusBarStyle`, `modalStyle`, `modalTransitionStyle`, any `Ti.UI.iOS.*`
132
- > - Android: `actionBar` config, any `Ti.UI.Android.*` constant
133
- >
134
- > **Available modifiers:** `[platform=ios]`, `[platform=android]`, `[formFactor=handheld]`, `[formFactor=tablet]`, `[if=Alloy.Globals.customVar]`
135
- >
136
- > For more platform-specific patterns, see [Code conventions (ti-expert)](skills/ti-expert/references/code-conventions.md#platform--device-modifiers) or [Platform UI guides (ti-ui)](skills/ti-ui/references/platform-ui-ios.md).
137
-
138
- ## Common patterns
139
-
140
- ### Creating a model
141
- ```bash
142
- alloy generate model book sql title:string author:string
143
- ```
144
-
145
- ### Data binding
146
- ```xml
147
- <Collection src="book" />
148
- <TableView dataCollection="book">
149
- <TableViewRow title="{title}" />
150
- </TableView>
151
- ```
152
-
153
- ### Platform-specific code
154
- ```javascript
155
- if (OS_IOS) {
156
- // iOS-only code
157
- }
158
- if (OS_ANDROID) {
159
- // Android-only code
160
- }
161
- ```
162
-
163
- ### Widget usage
164
- ```xml
165
- <Widget src="mywidget" id="foo" />
166
- ```
167
-
168
- ## Compilation process
169
-
170
- 1. Cleanup: Resources folder cleaned
171
- 2. Build Config: alloy.jmk loaded (pre:load task)
172
- 3. Framework Files: Backbone.js, Underscore.js, sync adapters copied
173
- 4. MVC Generation: Models, widgets, views, controllers compiled to JS
174
- 5. Main App: app.js generated from template
175
- 6. Optimization: UglifyJS optimization, platform-specific code removal
176
-
177
- ## References
178
-
179
- Read detailed documentation from the reference files listed above based on your specific task.
180
-
181
- ## Related skills
182
-
183
- For tasks beyond Alloy MVC basics, use these complementary skills:
184
-
185
- | Task | Use This Skill |
186
- | ---------------------------------------------- | -------------- |
187
- | Modern architecture, services, patterns | `ti-expert` |
188
- | Alloy CLI, config files, debugging errors | `alloy-howtos` |
189
- | Utility-first styling with PurgeTSS (optional) | `purgetss` |
190
- | Native features (location, push, media) | `ti-howtos` |
@@ -1,233 +0,0 @@
1
- # Alloy Tasks with the CLI
2
-
3
- Alloy provides command-line interface (CLI) tasks to create a new project, generate skeleton components such as controllers and models, and compile the source files into the Titanium project.
4
-
5
- ## Creating a New Application
6
-
7
- > **Recommended:** Use `ti create --alloy` to create a new Alloy project in one step.
8
-
9
- ```bash
10
- ti create -t app --alloy --id com.example.myapp -n MyApp -p android,ios
11
- ```
12
-
13
- This creates a complete Alloy project structure with the `app` folder containing controllers, views, styles, models, and migrations.
14
-
15
- **Alternative (interactive):**
16
- ```bash
17
- ti create
18
- ```
19
-
20
- You will be prompted to enter an application name and application ID. When prompted for project type, select **Alloy**.
21
-
22
- **Legacy method (not recommended):**
23
- ```bash
24
- ti create
25
- cd PROJECTDIRECTORY
26
- alloy new
27
- ```
28
-
29
- This two-step approach is discouraged in favor of using `--alloy` directly.
30
-
31
- ## Creating a New Application Using a Test Application
32
-
33
- You can generate a new Alloy project using a test application from the Alloy Github repo.
34
-
35
- ```bash
36
- ti create -t app --classic -i com.appc.picker -n AlloyPicker
37
- cd AlloyPicker
38
- alloy new --testapp ui/picker
39
- ```
40
-
41
- ## Generating Components
42
-
43
- The CLI can generate skeleton controllers (with views and styles), models, database migrations and widgets.
44
-
45
- ### Generating a Controller
46
-
47
- To generate a controller with a style and view:
48
-
49
- ```bash
50
- alloy generate controller <name> [--widgetname <widget_name>] [-o path_to_project/app] [--platform <platform>]
51
- ```
52
-
53
- This creates `app/controllers/<name>.js`, `app/styles/<name>.tss`, and `app/views/<name>.xml`.
54
-
55
- ### Generating a View
56
-
57
- To generate a view and style **without** a controller:
58
-
59
- ```bash
60
- alloy generate view <name> [--widgetname <widget_name>] [-o path_to_project/app] [--platform <platform>]
61
- ```
62
-
63
- This creates `app/styles/<name>.tss` and `app/views/<name>.xml`.
64
-
65
- ### Generating a Style
66
-
67
- To generate a style for a view-controller:
68
-
69
- ```bash
70
- alloy generate style <name> [--widgetname <widget_name>]
71
- ```
72
-
73
- Alloy uses the id and attribute names in the markup file to populate the skeleton style file. This creates `app/styles/<name>.tss`. If you add new `id` or `class` attributes to the markup file, running either of these commands updates the style file with the new attributes.
74
-
75
- To generate style files for all view-controllers:
76
-
77
- ```bash
78
- alloy generate style --all
79
- ```
80
-
81
- ### Generating a Model
82
-
83
- To generate a model:
84
-
85
- ```bash
86
- alloy generate model <name> <adapter> [<col_name_1>:<col_type_1> <col_name_2>:<col_type_2> ...] [-o path_to_project/app]
87
- ```
88
-
89
- The fourth parameter selects the adapter type: `sql` for SQLite or `properties` for local storage. The fifth parameter defines the table schema. This is required for `sql` and `properties` adapter types.
90
-
91
- This creates `app/models/<name>.js`, and `app/migrations/DATETIME_<name>.js` if the adapter type is 'sql'.
92
-
93
- ### Generating a Migration
94
-
95
- To generate a standalone migration for a specific model:
96
-
97
- ```bash
98
- alloy generate migration <name> [-o path_to_project/app]
99
- ```
100
-
101
- This creates `app/migrations/DATETIME_<name>.js`.
102
-
103
- ### Generating a Widget
104
-
105
- To generate a basic widget:
106
-
107
- ```bash
108
- alloy generate widget <name> [-o path_to_project/app]
109
- ```
110
-
111
- This creates `app/widgets/<name>/widget.json`, `app/widgets/<name>/controllers/widget.js`, `app/widgets/<name>/styles/widget.tss`, and `app/widgets/<name>/views/widget.xml`. The widget is automatically added to `config.json`.
112
-
113
- ### Generating alloy.jmk
114
-
115
- To generate the build customization file:
116
-
117
- ```bash
118
- alloy generate jmk [-o path_to_project/app]
119
- ```
120
-
121
- This creates `app/alloy.jmk` with a few task hooks in place.
122
-
123
- ## Extracting Localization Strings
124
-
125
- The `alloy extract-i18n` command inspects your JS, TSS and XML files (since Alloy 1.6.0) for instances of Titanium's localization functions and adds those strings to an i18n strings.xml file.
126
-
127
- ```bash
128
- alloy extract-i18n [language] [--apply]
129
- ```
130
-
131
- **Parameters**:
132
-
133
- * `language` – Optional. Two-letter language code (`en`, `es`, etc.). Default is `en`.
134
- * `--apply` – Optional. Writes new entries to `strings.xml`. Without it, displays a preview. This is a safe operation: it only adds new entries and never removes existing ones.
135
-
136
- Supported functions:
137
-
138
- * `Titanium.Locale.getString()`
139
- * `Ti.Locale.getString()`
140
- * `L()`
141
-
142
- **Example**:
143
-
144
- ```javascript
145
- // In JavaScript/TSS
146
- const name = Ti.Locale.getString('name');
147
- const color = Titanium.Locale.getString('color');
148
- const currency = L('currency');
149
- ```
150
-
151
- ```xml
152
- <!-- In XML (since Alloy 1.6.0) -->
153
- <Label textid="greeting" />
154
- <Button titleid="submit_button" />
155
- ```
156
-
157
- **Preview Output** (without --apply):
158
-
159
- ```
160
- [INFO] ######## BEFORE ########
161
- [INFO] <?xml version="1.0" encoding="UTF-8"?>
162
- [INFO] <resources>
163
- [INFO] </resources>
164
- [INFO]
165
- [INFO] ######## AFTER ########
166
- [INFO] <?xml version="1.0" encoding="UTF-8"?>
167
- [INFO] <resources>
168
- [INFO] <string name="name">name</string>
169
- [INFO] <string name="color">color</string>
170
- [INFO] <string name="currency">currency</string>
171
- [INFO] <string name="greeting">greeting</string>
172
- [INFO] <string name="submit_button">submit_button</string>
173
- [INFO] </resources>
174
- ```
175
-
176
- Running with `--apply`:
177
-
178
- ```bash
179
- alloy extract-i18n --apply
180
- ```
181
-
182
- Generates `app/i18n/en/strings.xml`.
183
-
184
- To generate strings for another language, pass the language code:
185
-
186
- ```bash
187
- alloy extract-i18n es --apply
188
- ```
189
-
190
- This generates `app/i18n/es/strings.xml`.
191
-
192
- ```xml
193
- <resources>
194
- <string name="name">name</string>
195
- <string name="color">color</string>
196
- <string name="currency">currency</string>
197
- <string name="greeting">greeting</string>
198
- <string name="submit_button">submit_button</string>
199
- </resources>
200
- ```
201
-
202
- ## Compiling a Specific View-Controller
203
-
204
- To select which Alloy view-controller to compile to Titanium code:
205
-
206
- ```bash
207
- alloy compile --config platform=<platform>,file=<file>
208
-
209
- ## Example
210
- alloy compile --config platform=android,file=app/controller/index.js
211
- ```
212
-
213
- ## Building an Application
214
-
215
- To build and run an application:
216
-
217
- ```bash
218
- ti build --platform <platform> [--project-dir <value>] [--sdk <value>] [<platform_build_options>]
219
- ```
220
-
221
- Running this from the root directory of the project compiles the files to the correct location automatically.
222
-
223
- ## Installing Special Project Components
224
-
225
- ### Installing the Compiler Plugin
226
-
227
- To install the compiler plugin that hooks the Alloy project to Studio:
228
-
229
- ```bash
230
- alloy install plugin [path_to_project]
231
- ```
232
-
233
- Use this command to update the compiler plugin if your project was created using an older version of Alloy.
@@ -1,171 +0,0 @@
1
- # Alloy Concepts
2
-
3
- ## Overview
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.
6
-
7
- ## Model-View-Controller
8
-
9
- Alloy uses the model-view-controller (MVC) pattern, which separates the application into three different components:
10
-
11
- * **Models** provide the business logic, containing the rules, data and state of the application
12
-
13
- * **Views** provide the GUI components to the user, either presenting data or allowing the user to interact with the model data
14
-
15
- * **Controllers** provide the glue between the model and view components in the form of application logic
16
-
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.
18
-
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.