@maccesar/titools 5.3.0 → 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 +31 -60
- package/agents/ti-pro.md +3 -1
- package/commands/ti-audit.md +6 -4
- package/docs/examples.md +9 -0
- 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-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-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,233 +1,34 @@
|
|
|
1
|
-
#
|
|
1
|
+
# Create and run an Alloy app
|
|
2
2
|
|
|
3
|
-
|
|
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.
|
|
3
|
+
Check the toolchain with `ti info` and finish environment setup before diagnosing a failed build as an Alloy problem.
|
|
34
4
|
|
|
35
5
|
```bash
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
6
|
+
npm install -g alloy
|
|
7
|
+
ti create --type app --alloy --name Hello --id com.example.hello --platforms android,ios --workspace-dir .
|
|
8
|
+
cd Hello
|
|
9
|
+
ti build --platform android
|
|
39
10
|
```
|
|
40
11
|
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
The CLI can generate skeleton controllers (with views and styles), models, database migrations and widgets.
|
|
12
|
+
Use a reverse-DNS app ID from a domain you control: changing it after publication means a new listing in both stores. `--name` chooses the directory and icon label. `ios` selects iPhone and iPad; `iphone` selects iPhone only. In noninteractive creation, supply `--type` and `--workspace-dir` as shown; `ti create` without arguments prompts.
|
|
44
13
|
|
|
45
|
-
|
|
14
|
+
`--alloy` invokes `alloy new` after creating the project. Alloy must be on `PATH`; otherwise the project remains Classic and the CLI reports what to install. To convert an existing Classic project, run `alloy new` in its root.
|
|
46
15
|
|
|
47
|
-
|
|
16
|
+
## Build and iterate
|
|
48
17
|
|
|
49
18
|
```bash
|
|
50
|
-
|
|
19
|
+
ti build --platform ios
|
|
20
|
+
ti build --platform android --build-only
|
|
21
|
+
ti build --platform android --liveview
|
|
51
22
|
```
|
|
52
23
|
|
|
53
|
-
|
|
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
|
|
24
|
+
Default targets are Android emulator and iOS simulator. With several available devices, the CLI prompts; use `--device-id` to choose explicitly. iOS builds require macOS and Xcode. Initial native builds are slower than incremental builds. A successful build reports `Project built successfully`; terminal logs continue until Ctrl-C. `--build-only` skips installation and launch; LiveView reloads JavaScript on save.
|
|
224
25
|
|
|
225
|
-
|
|
26
|
+
For real devices, use `--target device`. Android needs developer options, USB debugging and USB authorization; check `ti info -t android`. iOS needs a development certificate and a matching provisioning profile containing the device; connect, unlock and trust the Mac. Select a UDID from `ti info -t ios` with `--device-id`. Use `ti-guides` for full setup and signing.
|
|
226
27
|
|
|
227
|
-
To
|
|
28
|
+
To generate the widget described by the current guide:
|
|
228
29
|
|
|
229
30
|
```bash
|
|
230
|
-
alloy
|
|
31
|
+
alloy generate widget com.example.rating
|
|
231
32
|
```
|
|
232
33
|
|
|
233
|
-
|
|
34
|
+
Sources: [first app](https://titaniumsdk.com/docs/build/first-app.md), [Alloy](https://titaniumsdk.com/docs/alloy.md), [widgets](https://titaniumsdk.com/docs/alloy/widgets.md).
|
|
@@ -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).
|