@maccesar/titools 2.2.4 → 2.2.8
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/README.md +23 -23
- package/lib/commands/update.js +4 -12
- package/package.json +1 -1
- package/skills/alloy-guides/SKILL.md +31 -31
- package/skills/alloy-guides/references/CONCEPTS.md +3 -3
- package/skills/alloy-guides/references/CONTROLLERS.md +1 -1
- package/skills/alloy-guides/references/MODELS.md +6 -6
- package/skills/alloy-guides/references/VIEWS_WITHOUT_CONTROLLERS.md +1 -1
- package/skills/alloy-guides/references/VIEWS_XML.md +1 -1
- package/skills/alloy-guides/references/WIDGETS.md +1 -1
- package/skills/alloy-howtos/SKILL.md +27 -27
- package/skills/alloy-howtos/references/best_practices.md +9 -9
- package/skills/alloy-howtos/references/cli_reference.md +14 -14
- package/skills/alloy-howtos/references/config_files.md +16 -16
- package/skills/alloy-howtos/references/custom_tags.md +16 -16
- package/skills/alloy-howtos/references/debugging_troubleshooting.md +11 -15
- package/skills/alloy-howtos/references/samples.md +19 -19
- package/skills/purgetss/SKILL.md +11 -1
- package/skills/purgetss/references/animation-system.md +1 -1
- package/skills/purgetss/references/cli-commands.md +3 -3
- package/skills/purgetss/references/customization-deep-dive.md +1 -1
- package/skills/purgetss/references/dynamic-component-creation.md +1 -1
- package/skills/purgetss/references/icon-fonts.md +4 -0
- package/skills/purgetss/references/installation-setup.md +8 -1
- package/skills/purgetss/references/migration-guide.md +4 -0
- package/skills/purgetss/references/tikit-components.md +193 -204
- package/skills/purgetss/references/ui-ux-design.md +1 -1
- package/skills/ti-expert/SKILL.md +78 -118
- package/skills/ti-expert/references/alloy-builtins.md +18 -18
- package/skills/ti-expert/references/alloy-structure.md +21 -21
- package/skills/ti-expert/references/anti-patterns.md +15 -15
- package/skills/ti-expert/references/cli-expert.md +15 -15
- package/skills/ti-expert/references/code-conventions.md +38 -38
- package/skills/ti-expert/references/contracts.md +8 -8
- package/skills/ti-expert/references/controller-patterns.md +14 -14
- package/skills/ti-expert/references/error-handling.md +11 -11
- package/skills/ti-expert/references/examples.md +12 -12
- package/skills/ti-expert/references/migration-patterns.md +24 -24
- package/skills/ti-expert/references/patterns.md +10 -10
- package/skills/ti-expert/references/performance-listview.md +16 -16
- package/skills/ti-expert/references/performance-optimization.md +41 -41
- package/skills/ti-expert/references/security-device.md +22 -22
- package/skills/ti-expert/references/security-fundamentals.md +19 -19
- package/skills/ti-expert/references/state-management.md +33 -33
- package/skills/ti-expert/references/testing-e2e-ci.md +25 -25
- package/skills/ti-expert/references/testing-unit.md +24 -24
- package/skills/ti-expert/references/theming.md +15 -15
- package/skills/ti-guides/SKILL.md +58 -60
- package/skills/ti-guides/references/advanced-data-and-images.md +33 -33
- package/skills/ti-guides/references/android-manifest.md +15 -15
- package/skills/ti-guides/references/app-distribution.md +70 -166
- package/skills/ti-guides/references/application-frameworks.md +96 -114
- package/skills/ti-guides/references/cli-reference.md +294 -294
- package/skills/ti-guides/references/coding-best-practices.md +42 -33
- package/skills/ti-guides/references/commonjs-advanced.md +57 -51
- package/skills/ti-guides/references/hello-world.md +36 -36
- package/skills/ti-guides/references/hyperloop-native-access.md +66 -66
- package/skills/ti-guides/references/javascript-primer.md +83 -101
- package/skills/ti-guides/references/reserved-words.md +9 -9
- package/skills/ti-guides/references/resources.md +75 -83
- package/skills/ti-guides/references/style-and-conventions.md +35 -28
- package/skills/ti-guides/references/tiapp-config.md +110 -74
- package/skills/ti-howtos/SKILL.md +88 -92
- package/skills/ti-howtos/references/android-platform-deep-dives.md +104 -104
- package/skills/ti-howtos/references/automation-fastlane-appium.md +39 -39
- package/skills/ti-howtos/references/buffer-codec-streams.md +60 -60
- package/skills/ti-howtos/references/cross-platform-development.md +115 -136
- package/skills/ti-howtos/references/debugging-profiling.md +167 -181
- package/skills/ti-howtos/references/extending-titanium.md +121 -121
- package/skills/ti-howtos/references/google-maps-v2.md +84 -82
- package/skills/ti-howtos/references/ios-map-kit.md +65 -60
- package/skills/ti-howtos/references/ios-platform-deep-dives.md +123 -123
- package/skills/ti-howtos/references/local-data-sources.md +79 -78
- package/skills/ti-howtos/references/location-and-maps.md +116 -120
- package/skills/ti-howtos/references/media-apis.md +87 -86
- package/skills/ti-howtos/references/notification-services.md +250 -260
- package/skills/ti-howtos/references/remote-data-sources.md +98 -93
- package/skills/ti-howtos/references/tutorials.md +226 -216
- package/skills/ti-howtos/references/using-modules.md +73 -102
- package/skills/ti-howtos/references/web-content-integration.md +101 -103
- package/skills/ti-howtos/references/webpack-build-pipeline.md +52 -44
- package/skills/ti-ui/SKILL.md +85 -85
- package/skills/ti-ui/references/accessibility-deep-dive.md +57 -57
- package/skills/ti-ui/references/animation-and-matrices.md +79 -79
- package/skills/ti-ui/references/application-structures.md +96 -99
- package/skills/ti-ui/references/custom-fonts-styling.md +99 -99
- package/skills/ti-ui/references/event-handling.md +58 -58
- package/skills/ti-ui/references/gestures.md +62 -64
- package/skills/ti-ui/references/icons-and-splash-screens.md +88 -88
- package/skills/ti-ui/references/layouts-and-positioning.md +87 -97
- package/skills/ti-ui/references/listviews-and-performance.md +107 -107
- package/skills/ti-ui/references/orientation.md +87 -88
- package/skills/ti-ui/references/platform-ui-android.md +87 -81
- package/skills/ti-ui/references/platform-ui-ios.md +63 -61
- package/skills/ti-ui/references/scrolling-views.md +29 -29
- package/skills/ti-ui/references/tableviews.md +56 -56
package/README.md
CHANGED
|
@@ -8,11 +8,11 @@
|
|
|
8
8
|
|
|
9
9
|
</div>
|
|
10
10
|
|
|
11
|
-
|
|
11
|
+
TiTools is a CLI that installs Titanium SDK skills and a knowledge index for AI coding assistants. One command installs 7 skills, a research agent, and 100+ reference files for Titanium SDK, Alloy MVC, and PurgeTSS.
|
|
12
12
|
|
|
13
|
-
Without
|
|
13
|
+
Without TiTools, assistants rely on general training data. That data can be outdated or too generic for Titanium work. With TiTools, the assistant can look up Alloy architecture, memory cleanup patterns, PurgeTSS utility classes, and platform-specific APIs.
|
|
14
14
|
|
|
15
|
-
|
|
15
|
+
Vercel's AGENTS.md evaluation reports a 100% pass rate for the knowledge index approach, compared to 53-79% using skills alone.
|
|
16
16
|
|
|
17
17
|
---
|
|
18
18
|
|
|
@@ -36,7 +36,7 @@ claude # or gemini, or codex
|
|
|
36
36
|
|
|
37
37
|
# 6) Ask away!
|
|
38
38
|
# "How should I structure a new app with login, signup, and a dashboard?"
|
|
39
|
-
# "My ListView with 500 items scrolls
|
|
39
|
+
# "My ListView with 500 items scrolls poorly on Android. How do I fix it?"
|
|
40
40
|
```
|
|
41
41
|
|
|
42
42
|
What gets installed:
|
|
@@ -125,15 +125,15 @@ The knowledge index is based on the latest Titanium SDK documentation. If your p
|
|
|
125
125
|
|
|
126
126
|
## Skills overview
|
|
127
127
|
|
|
128
|
-
| Skill | Purpose
|
|
129
|
-
| ------------ |
|
|
130
|
-
| alloy-guides | Alloy MVC reference
|
|
131
|
-
| alloy-howtos | Alloy CLI
|
|
132
|
-
| purgetss | Utility-first styling
|
|
133
|
-
| ti-expert | Architecture
|
|
134
|
-
| ti-guides | SDK fundamentals
|
|
135
|
-
| ti-howtos | Native feature integration
|
|
136
|
-
| ti-ui | UI/UX patterns
|
|
128
|
+
| Skill | Purpose | Best For |
|
|
129
|
+
| ------------ | ------------------------------- | --------------------------------------- |
|
|
130
|
+
| alloy-guides | Alloy MVC reference | Models, Views, Controllers, Widgets |
|
|
131
|
+
| alloy-howtos | Alloy CLI and debugging | Project setup, CLI commands, errors |
|
|
132
|
+
| purgetss | Utility-first styling | UI styling and animations |
|
|
133
|
+
| ti-expert | Architecture and implementation | Starting point for most tasks |
|
|
134
|
+
| ti-guides | SDK fundamentals | Hyperloop, distribution, configuration |
|
|
135
|
+
| ti-howtos | Native feature integration | Location, Push, Media, Platform APIs |
|
|
136
|
+
| ti-ui | UI/UX patterns | Complex layouts, ListViews, platform UI |
|
|
137
137
|
|
|
138
138
|
Note: `ti-guides`, `ti-howtos`, `ti-ui`, `alloy-guides`, and `alloy-howtos` are based on official Titanium SDK and Alloy documentation. `ti-expert` and `purgetss` are opinionated and reflect personal coding conventions (biased toward PurgeTSS).
|
|
139
139
|
|
|
@@ -206,9 +206,9 @@ All skills include automatic project detection to ensure compatibility:
|
|
|
206
206
|
| ti-expert | Alloy vs Classic | Checks for `app/` (Alloy) vs `Resources/` (Classic) structure |
|
|
207
207
|
| alloy-guides | Alloy projects | Checks for `app/views/`, `app/controllers/` |
|
|
208
208
|
| alloy-howtos | Alloy projects | Checks for `alloy.jmk`, `config.json` |
|
|
209
|
-
| ti-ui | Titanium projects | Checks for `tiapp.xml` (both Alloy
|
|
210
|
-
| ti-guides | Titanium projects | Checks for `tiapp.xml` (both Alloy
|
|
211
|
-
| ti-howtos | Titanium projects | Checks for `tiapp.xml` (both Alloy
|
|
209
|
+
| ti-ui | Titanium projects | Checks for `tiapp.xml` (both Alloy and Classic) |
|
|
210
|
+
| ti-guides | Titanium projects | Checks for `tiapp.xml` (both Alloy and Classic) |
|
|
211
|
+
| ti-howtos | Titanium projects | Checks for `tiapp.xml` (both Alloy and Classic) |
|
|
212
212
|
|
|
213
213
|
Why this matters:
|
|
214
214
|
- PurgeTSS suggestions are only provided if PurgeTSS is installed
|
|
@@ -620,8 +620,8 @@ Behavior depends on where you run it:
|
|
|
620
620
|
|
|
621
621
|
What it does:
|
|
622
622
|
1. Checks GitHub for the latest CLI version
|
|
623
|
-
2. If a newer version exists
|
|
624
|
-
3. If CLI is current
|
|
623
|
+
2. If a newer version exists, it prompts you to update the CLI first with `npm update -g @maccesar/titools`
|
|
624
|
+
3. If the CLI is current, it syncs skills and agents from the installed package (no download needed)
|
|
625
625
|
4. Updates platform symlinks only for platforms that already have them
|
|
626
626
|
5. Cleans up legacy artifacts (`alloy-expert` skill, `ti-researcher` agent)
|
|
627
627
|
6. Auto-syncs knowledge index files if they exist in the current project
|
|
@@ -691,13 +691,13 @@ Codex CLI:
|
|
|
691
691
|
|
|
692
692
|
| Skill | SKILL.md | References |
|
|
693
693
|
| ------------ | ----------------------------- | ----------------------------------------------------- |
|
|
694
|
-
| ti-expert | Architecture + Implementation | 19 refs + 1 asset (patterns, testing, security, etc.) |
|
|
695
|
-
| purgetss | Setup + Critical Rules | 21 files (grid, animations, icons, class-index, etc.) |
|
|
696
|
-
| ti-ui | UI Rules + Platform Diffs | 14 files (layouts, lists, gestures, etc.) |
|
|
697
|
-
| ti-howtos | Integration Workflow | 18 files (location, media, maps, automation, etc.) |
|
|
698
|
-
| ti-guides | Core Workflow | 14 files (hyperloop, distribution, etc.) |
|
|
699
694
|
| alloy-guides | MVC Quick Start | 10 files (models, views, widgets, etc.) |
|
|
700
695
|
| alloy-howtos | Best Practices | 6 files (CLI, config, debugging, etc.) |
|
|
696
|
+
| purgetss | Setup + Critical Rules | 21 files (grid, animations, icons, class-index, etc.) |
|
|
697
|
+
| ti-expert | Architecture + Implementation | 19 refs + 1 asset (patterns, testing, security, etc.) |
|
|
698
|
+
| ti-guides | Core Workflow | 14 files (hyperloop, distribution, etc.) |
|
|
699
|
+
| ti-howtos | Integration Workflow | 18 files (location, media, maps, automation, etc.) |
|
|
700
|
+
| ti-ui | UI Rules + Platform Diffs | 14 files (layouts, lists, gestures, etc.) |
|
|
701
701
|
|
|
702
702
|
---
|
|
703
703
|
|
package/lib/commands/update.js
CHANGED
|
@@ -167,7 +167,7 @@ export async function updateCommand(options) {
|
|
|
167
167
|
// Install skills
|
|
168
168
|
spinner.start('Syncing skills...');
|
|
169
169
|
const skillsResult = await installSkills(repoDir, baseDir);
|
|
170
|
-
spinner.succeed(
|
|
170
|
+
spinner.succeed(`${skillsResult.installed.length} skills updated`);
|
|
171
171
|
|
|
172
172
|
// Install agents (only if Claude Code has symlinks)
|
|
173
173
|
const claudePlatform = platformsWithSymlinks.find((p) => p.name === 'claude');
|
|
@@ -175,7 +175,7 @@ export async function updateCommand(options) {
|
|
|
175
175
|
spinner.start('Syncing agents...');
|
|
176
176
|
const agentsResult = await installAgents(repoDir, baseDir);
|
|
177
177
|
if (agentsResult.installed.length > 0) {
|
|
178
|
-
spinner.succeed(
|
|
178
|
+
spinner.succeed('Platform agents updated');
|
|
179
179
|
} else {
|
|
180
180
|
spinner.info('No agents to sync');
|
|
181
181
|
}
|
|
@@ -183,21 +183,13 @@ export async function updateCommand(options) {
|
|
|
183
183
|
|
|
184
184
|
cleanupLegacyArtifacts(baseDir);
|
|
185
185
|
|
|
186
|
-
// Update symlinks
|
|
186
|
+
// Update symlinks silently for platforms that already had them
|
|
187
187
|
for (const platform of platformsWithSymlinks) {
|
|
188
|
-
|
|
189
|
-
const symlinkResult = await createSkillSymlinks(
|
|
188
|
+
await createSkillSymlinks(
|
|
190
189
|
platform.skillsDir,
|
|
191
190
|
SKILLS,
|
|
192
191
|
baseDir
|
|
193
192
|
);
|
|
194
|
-
if (symlinkResult.linked.length === SKILLS.length) {
|
|
195
|
-
spinner.succeed(`${platform.displayName} linked`);
|
|
196
|
-
} else {
|
|
197
|
-
spinner.warn(
|
|
198
|
-
`${platform.displayName}: ${symlinkResult.linked.length}/${SKILLS.length} linked`
|
|
199
|
-
);
|
|
200
|
-
}
|
|
201
193
|
}
|
|
202
194
|
|
|
203
195
|
// Summary
|
package/package.json
CHANGED
|
@@ -5,11 +5,11 @@ argument-hint: "[concept]"
|
|
|
5
5
|
allowed-tools: Read, Grep, Glob, Edit, Write, Bash(node *)
|
|
6
6
|
---
|
|
7
7
|
|
|
8
|
-
# Alloy MVC
|
|
8
|
+
# Alloy MVC framework guide
|
|
9
9
|
|
|
10
|
-
|
|
10
|
+
Reference for building Titanium mobile applications with the Alloy MVC framework and Backbone.js.
|
|
11
11
|
|
|
12
|
-
## Project
|
|
12
|
+
## Project detection
|
|
13
13
|
|
|
14
14
|
:::info AUTO-DETECTS ALLOY PROJECTS
|
|
15
15
|
This skill automatically detects Alloy projects when invoked and provides framework-specific guidance.
|
|
@@ -26,7 +26,7 @@ This skill automatically detects Alloy projects when invoked and provides framew
|
|
|
26
26
|
- **Not detected** → Indicates this skill is for Alloy projects only, does not suggest Alloy-specific features
|
|
27
27
|
:::
|
|
28
28
|
|
|
29
|
-
## Quick
|
|
29
|
+
## Quick reference
|
|
30
30
|
|
|
31
31
|
| Topic | Reference File |
|
|
32
32
|
| ------------------------------------------------ | ----------------------------------------------------------------------- |
|
|
@@ -41,7 +41,7 @@ This skill automatically detects Alloy projects when invoked and provides framew
|
|
|
41
41
|
| CLI commands, code generation | [CLI_TASKS.md](references/CLI_TASKS.md) |
|
|
42
42
|
| PurgeTSS integration (optional addon) | [PURGETSS.md](references/PURGETSS.md) |
|
|
43
43
|
|
|
44
|
-
## Project
|
|
44
|
+
## Project structure
|
|
45
45
|
|
|
46
46
|
Standard Alloy project structure:
|
|
47
47
|
|
|
@@ -64,7 +64,7 @@ app/
|
|
|
64
64
|
└── widgets/ # Widget components
|
|
65
65
|
```
|
|
66
66
|
|
|
67
|
-
## MVC
|
|
67
|
+
## MVC quick start
|
|
68
68
|
|
|
69
69
|
**Controller** (`app/controllers/index.js`):
|
|
70
70
|
```javascript
|
|
@@ -89,7 +89,7 @@ $.index.open();
|
|
|
89
89
|
"Label": { color: "#000" }
|
|
90
90
|
```
|
|
91
91
|
|
|
92
|
-
## Key
|
|
92
|
+
## Key concepts
|
|
93
93
|
|
|
94
94
|
- **Models/Collections**: Backbone.js objects with sync adapters (sql, properties)
|
|
95
95
|
- **Views**: XML markup with TSS styling
|
|
@@ -98,29 +98,29 @@ $.index.open();
|
|
|
98
98
|
- **Widgets**: Reusable components with MVC structure
|
|
99
99
|
- **Conventions**: File naming and placement drive code generation
|
|
100
100
|
|
|
101
|
-
## Critical
|
|
101
|
+
## Critical rules
|
|
102
102
|
|
|
103
|
-
### Platform-
|
|
103
|
+
### Platform-specific properties in TSS
|
|
104
104
|
|
|
105
|
-
:::danger CRITICAL: Platform-
|
|
106
|
-
Using `Ti.UI.iOS.*` or `Ti.UI.Android.*` properties in TSS
|
|
105
|
+
:::danger CRITICAL: Platform-specific properties require modifiers
|
|
106
|
+
Using `Ti.UI.iOS.*` or `Ti.UI.Android.*` properties in TSS without platform modifiers causes cross-platform compilation failures.
|
|
107
107
|
|
|
108
|
-
|
|
108
|
+
Example of the failure:
|
|
109
109
|
```tss
|
|
110
|
-
//
|
|
110
|
+
// WRONG - Adds Ti.UI.iOS to Android project
|
|
111
111
|
"#mainWindow": {
|
|
112
112
|
statusBarStyle: Ti.UI.iOS.StatusBar.LIGHT_CONTENT // FAILS on Android!
|
|
113
113
|
}
|
|
114
114
|
```
|
|
115
115
|
|
|
116
|
-
|
|
116
|
+
Correct approach - use platform modifiers:
|
|
117
117
|
```tss
|
|
118
|
-
//
|
|
118
|
+
// CORRECT - Only adds to iOS
|
|
119
119
|
"#mainWindow[platform=ios]": {
|
|
120
120
|
statusBarStyle: Ti.UI.iOS.StatusBar.LIGHT_CONTENT
|
|
121
121
|
}
|
|
122
122
|
|
|
123
|
-
//
|
|
123
|
+
// CORRECT - Only adds to Android
|
|
124
124
|
"#mainWindow[platform=android]": {
|
|
125
125
|
actionBar: {
|
|
126
126
|
displayHomeAsUp: true
|
|
@@ -128,23 +128,23 @@ Using `Ti.UI.iOS.*` or `Ti.UI.Android.*` properties in TSS WITHOUT platform modi
|
|
|
128
128
|
}
|
|
129
129
|
```
|
|
130
130
|
|
|
131
|
-
|
|
131
|
+
Properties that always require platform modifiers:
|
|
132
132
|
- iOS: `statusBarStyle`, `modalStyle`, `modalTransitionStyle`, any `Ti.UI.iOS.*`
|
|
133
133
|
- Android: `actionBar` config, any `Ti.UI.Android.*` constant
|
|
134
134
|
|
|
135
135
|
**Available modifiers:** `[platform=ios]`, `[platform=android]`, `[formFactor=handheld]`, `[formFactor=tablet]`, `[if=Alloy.Globals.customVar]`
|
|
136
136
|
|
|
137
|
-
|
|
137
|
+
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).
|
|
138
138
|
:::
|
|
139
139
|
|
|
140
|
-
## Common
|
|
140
|
+
## Common patterns
|
|
141
141
|
|
|
142
|
-
### Creating a
|
|
142
|
+
### Creating a model
|
|
143
143
|
```bash
|
|
144
144
|
alloy generate model book sql title:string author:string
|
|
145
145
|
```
|
|
146
146
|
|
|
147
|
-
### Data
|
|
147
|
+
### Data binding
|
|
148
148
|
```xml
|
|
149
149
|
<Collection src="book" />
|
|
150
150
|
<TableView dataCollection="book">
|
|
@@ -152,7 +152,7 @@ alloy generate model book sql title:string author:string
|
|
|
152
152
|
</TableView>
|
|
153
153
|
```
|
|
154
154
|
|
|
155
|
-
### Platform-
|
|
155
|
+
### Platform-specific code
|
|
156
156
|
```javascript
|
|
157
157
|
if (OS_IOS) {
|
|
158
158
|
// iOS-only code
|
|
@@ -162,25 +162,25 @@ if (OS_ANDROID) {
|
|
|
162
162
|
}
|
|
163
163
|
```
|
|
164
164
|
|
|
165
|
-
### Widget
|
|
165
|
+
### Widget usage
|
|
166
166
|
```xml
|
|
167
167
|
<Widget src="mywidget" id="foo" />
|
|
168
168
|
```
|
|
169
169
|
|
|
170
|
-
## Compilation
|
|
170
|
+
## Compilation process
|
|
171
171
|
|
|
172
|
-
1.
|
|
173
|
-
2.
|
|
174
|
-
3.
|
|
175
|
-
4.
|
|
176
|
-
5.
|
|
177
|
-
6.
|
|
172
|
+
1. Cleanup: Resources folder cleaned
|
|
173
|
+
2. Build Config: alloy.jmk loaded (pre:load task)
|
|
174
|
+
3. Framework Files: Backbone.js, Underscore.js, sync adapters copied
|
|
175
|
+
4. MVC Generation: Models, widgets, views, controllers compiled to JS
|
|
176
|
+
5. Main App: app.js generated from template
|
|
177
|
+
6. Optimization: UglifyJS optimization, platform-specific code removal
|
|
178
178
|
|
|
179
179
|
## References
|
|
180
180
|
|
|
181
181
|
Read detailed documentation from the reference files listed above based on your specific task.
|
|
182
182
|
|
|
183
|
-
## Related
|
|
183
|
+
## Related skills
|
|
184
184
|
|
|
185
185
|
For tasks beyond Alloy MVC basics, use these complementary skills:
|
|
186
186
|
|
|
@@ -6,7 +6,7 @@ This guide covers the important concepts related to the Alloy framework, includi
|
|
|
6
6
|
|
|
7
7
|
## Model-View-Controller
|
|
8
8
|
|
|
9
|
-
Alloy
|
|
9
|
+
Alloy uses the model-view-controller (MVC) pattern, which separates the application into three different components:
|
|
10
10
|
|
|
11
11
|
* **Models** provide the business logic, containing the rules, data and state of the application
|
|
12
12
|
|
|
@@ -26,7 +26,7 @@ Alloy views are built from Titanium UI components. You define views using XML ma
|
|
|
26
26
|
|
|
27
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
28
|
|
|
29
|
-
|
|
29
|
+
Also, Alloy provides built-in support for Underscore.js, which provides a set of utility functions, such as array and iterative helpers.
|
|
30
30
|
|
|
31
31
|
## Alloy and the Titanium SDK
|
|
32
32
|
|
|
@@ -103,7 +103,7 @@ app/
|
|
|
103
103
|
|
|
104
104
|
Alternatively, you can use special conditional code and attributes inside the controllers, views and styles to apply platform-specific code and components.
|
|
105
105
|
|
|
106
|
-
|
|
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
107
|
|
|
108
108
|
## Widgets
|
|
109
109
|
|
|
@@ -137,7 +137,7 @@ if (OS_IOS) {
|
|
|
137
137
|
|
|
138
138
|
### Passing Arguments
|
|
139
139
|
|
|
140
|
-
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.
|
|
140
|
+
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.
|
|
141
141
|
|
|
142
142
|
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:
|
|
143
143
|
|
|
@@ -11,7 +11,7 @@
|
|
|
11
11
|
|
|
12
12
|
Alloy uses Backbone.js to provide support for its models and collections. Alloy also borrows the concepts of migrations and adapters from Rails for storage integration.
|
|
13
13
|
|
|
14
|
-
For models, collections and sync adapters, these guides only provides information on how Alloy
|
|
14
|
+
For models, collections and sync adapters, these guides only provides information on how Alloy uses the Backbone.js functionality and some simple examples of using it.
|
|
15
15
|
|
|
16
16
|
## Alloy Collection and Model Objects
|
|
17
17
|
|
|
@@ -214,7 +214,7 @@ exports.definition = {
|
|
|
214
214
|
|
|
215
215
|
#### Underscore.js Functionality
|
|
216
216
|
|
|
217
|
-
|
|
217
|
+
Also, the Backbone.Collection class inherits some functionality from [Underscore.js](https://underscorejs.org/), which can help simplify iterative functions. For example, to add the title of each book object in the library collection to a table, you could use the `map` function to set the table:
|
|
218
218
|
|
|
219
219
|
**Iterating over a collection with underscore**
|
|
220
220
|
|
|
@@ -281,7 +281,7 @@ You can bind both a collection of models or an individual model. To bind a model
|
|
|
281
281
|
|
|
282
282
|
### Global Singleton vs Local Instance
|
|
283
283
|
|
|
284
|
-
In the above code snippet, the model and collection are global singletons under `Alloy.Models.currentCategory` and `Alloy.Collections.book`. You can also use local instances for the current controller by adding `instance="true"` as attribute. You also need to assign them an ID
|
|
284
|
+
In the above code snippet, the model and collection are global singletons under `Alloy.Models.currentCategory` and `Alloy.Collections.book`. You can also use local instances for the current controller by adding `instance="true"` as attribute. You also need to assign them an ID to reference them in the XML and controller.
|
|
285
285
|
|
|
286
286
|
```xml
|
|
287
287
|
<Alloy>
|
|
@@ -360,7 +360,7 @@ You can bind deep object properties:
|
|
|
360
360
|
|
|
361
361
|
Before, you needed to use a transformer to create a reference like `authorName`.
|
|
362
362
|
|
|
363
|
-
|
|
363
|
+
Before CLI 7.1.0, the only way to set object properties (e.g. `font.fontFamily` for a Label) was to use TSS. You can use dot notation in XML:
|
|
364
364
|
|
|
365
365
|
```xml
|
|
366
366
|
<Alloy>
|
|
@@ -760,7 +760,7 @@ The sync adapter exports three functions:
|
|
|
760
760
|
|
|
761
761
|
### Migrations
|
|
762
762
|
|
|
763
|
-
A migration is a description of incremental changes to a database, which takes your database from version 1 to version X, with a migration file for each step in the evolution of your database schema. This is helpful to keep different versions of a database in sync. For example, when version 7 of your application is deployed, migrations
|
|
763
|
+
A migration is a description of incremental changes to a database, which takes your database from version 1 to version X, with a migration file for each step in the evolution of your database schema. This is helpful to keep different versions of a database in sync. For example, when version 7 of your application is deployed, migrations can successfully update the database from versions 1 through 6. Currently, migrations are only used with the `sql` sync adapter.
|
|
764
764
|
|
|
765
765
|
The `migration.up` function upgrades the database from the previous version, while the `migration.down` function rolls back the changes to the previous version.
|
|
766
766
|
|
|
@@ -1014,7 +1014,7 @@ To use Backbone 1.1.2 to support Alloy Model and Collections objects, open the p
|
|
|
1014
1014
|
|
|
1015
1015
|
#### Model APIs
|
|
1016
1016
|
|
|
1017
|
-
**Validation**: Model validation is now only enforced with the `save()` method. Previously, models were also validated with the `set()` method. To force validation when the `set()` method is called, pass `{validate: true}` to the method or extend the Model class.
|
|
1017
|
+
**Validation**: Model validation is now only enforced with the `save()` method. Previously, models were also validated with the `set()` method. To force validation when the `set()` method is called, pass `{validate: true}` to the method or extend the Model class. Also, validation now occurs even during 'silent' changes (passing `{silent: true}` to methods). Previously, it would not. Failed validations return the `invalid` event. Previously, a failed model validation would return the `error` event.
|
|
1018
1018
|
|
|
1019
1019
|
**Parse Method**: All `parse` methods now run after a `fetch`. You cannot change the `id` of a model during `parse`. The `parse` method receives `options` as a second parameter.
|
|
1020
1020
|
|
|
@@ -84,7 +84,7 @@ $.index.add(profile.getView());
|
|
|
84
84
|
$.index.open();
|
|
85
85
|
```
|
|
86
86
|
|
|
87
|
-
**
|
|
87
|
+
**Before Alloy 1.4.0**, to dynamically generate a view:
|
|
88
88
|
|
|
89
89
|
1. Create a new instance of the controller using `Alloy.createController()`.
|
|
90
90
|
2. Modify the properties directly.
|
|
@@ -354,7 +354,7 @@ For UI objects that belong to a specific platform, use the `platform` attribute:
|
|
|
354
354
|
<SplitWindow platform="ios"/>
|
|
355
355
|
```
|
|
356
356
|
|
|
357
|
-
|
|
357
|
+
Also, use the alias `Ti` for `Titanium` when specifying namespaces.
|
|
358
358
|
|
|
359
359
|
Many of the Titanium view proxies not part of the `Titanium.UI` namespace do not require that the `ns` attribute be explicitly set. The following elements are implicitly mapped to a namespace:
|
|
360
360
|
|
|
@@ -10,7 +10,7 @@ See [Importing Widgets](./VIEWS_XML.md#importing-widgets) for more information o
|
|
|
10
10
|
|
|
11
11
|
## Creating Widgets
|
|
12
12
|
|
|
13
|
-
Widgets should be built in their own directory in the Alloy project's `app/widgets/` directory. Widgets have their own views, controllers, models, styles and assets and are laid out the same as the `app` directory in the Alloy project.
|
|
13
|
+
Widgets should be built in their own directory in the Alloy project's `app/widgets/` directory. Widgets have their own views, controllers, models, styles and assets and are laid out the same as the `app` directory in the Alloy project. Also, since widgets are self-contained, they should not reference any code or assets not within its path, except for internationalization and localization files, which are located in the `i18n` folder.
|
|
14
14
|
|
|
15
15
|
## Assets and Libs
|
|
16
16
|
|
|
@@ -7,25 +7,25 @@ allowed-tools: Read, Grep, Glob, Edit, Write, Bash(alloy *), Bash(node *)
|
|
|
7
7
|
|
|
8
8
|
# Titanium Alloy How-tos
|
|
9
9
|
|
|
10
|
-
|
|
10
|
+
Practical guide for Alloy MVC projects in the Titanium SDK.
|
|
11
11
|
|
|
12
|
-
## Project
|
|
12
|
+
## Project detection
|
|
13
13
|
|
|
14
|
-
:::info
|
|
15
|
-
This skill
|
|
14
|
+
:::info Auto-detects Alloy projects
|
|
15
|
+
This skill checks for Alloy projects when invoked and provides CLI and configuration guidance.
|
|
16
16
|
|
|
17
|
-
|
|
17
|
+
Detection is automatic. No manual command is needed.
|
|
18
18
|
|
|
19
|
-
|
|
19
|
+
Alloy project indicators:
|
|
20
20
|
- `app/` folder with Alloy structure
|
|
21
21
|
- `alloy.jmk` or `config.json` files
|
|
22
22
|
|
|
23
|
-
|
|
24
|
-
-
|
|
25
|
-
-
|
|
23
|
+
Behavior based on detection:
|
|
24
|
+
- Alloy detected -> Provide Alloy CLI command guidance, configuration file help, Alloy-specific troubleshooting
|
|
25
|
+
- Not detected -> Explain this skill is for Alloy projects only and suggest Alloy guides if the user wants to migrate
|
|
26
26
|
:::
|
|
27
27
|
|
|
28
|
-
## Quick
|
|
28
|
+
## Quick reference
|
|
29
29
|
|
|
30
30
|
| Topic | Reference |
|
|
31
31
|
| -------------------------------------------- | ----------------------------------------------------------------------- |
|
|
@@ -36,16 +36,16 @@ This skill automatically detects Alloy projects when invoked and provides CLI an
|
|
|
36
36
|
| Debugging & Common Errors | [debugging_troubleshooting.md](references/debugging_troubleshooting.md) |
|
|
37
37
|
| Code Samples & Conditionals | [samples.md](references/samples.md) |
|
|
38
38
|
|
|
39
|
-
##
|
|
39
|
+
## Key practices
|
|
40
40
|
|
|
41
|
-
### Naming
|
|
41
|
+
### Naming conventions
|
|
42
42
|
- **Never use double underscore prefixes** (`__foo`) - reserved for Alloy
|
|
43
43
|
- **Never use JavaScript reserved words as IDs**
|
|
44
44
|
|
|
45
|
-
### Global
|
|
46
|
-
|
|
45
|
+
### Global events - use Backbone.Events
|
|
46
|
+
Avoid `Ti.App.fireEvent` / `Ti.App.addEventListener`. It can cause memory leaks and poor performance.
|
|
47
47
|
|
|
48
|
-
|
|
48
|
+
Use the Backbone.Events pattern:
|
|
49
49
|
```javascript
|
|
50
50
|
// In alloy.js
|
|
51
51
|
Alloy.Events = _.clone(Backbone.Events);
|
|
@@ -61,7 +61,7 @@ $.controller.addEventListener('close', () => {
|
|
|
61
61
|
Alloy.Events.trigger('updateMainUI');
|
|
62
62
|
```
|
|
63
63
|
|
|
64
|
-
### Global
|
|
64
|
+
### Global variables in non-controller files
|
|
65
65
|
Always require Alloy modules:
|
|
66
66
|
```javascript
|
|
67
67
|
const Alloy = require('alloy');
|
|
@@ -69,9 +69,9 @@ const Backbone = require('alloy/backbone');
|
|
|
69
69
|
const _ = require('alloy/underscore')._;
|
|
70
70
|
```
|
|
71
71
|
|
|
72
|
-
## Conditional
|
|
72
|
+
## Conditional views
|
|
73
73
|
|
|
74
|
-
Use
|
|
74
|
+
Use `if` attributes in XML for conditional rendering (evaluated before render):
|
|
75
75
|
|
|
76
76
|
```xml
|
|
77
77
|
<Alloy>
|
|
@@ -98,7 +98,7 @@ Data-binding conditionals:
|
|
|
98
98
|
<TableViewRow if="$model.shouldShowCommentRow()">
|
|
99
99
|
```
|
|
100
100
|
|
|
101
|
-
## Common
|
|
101
|
+
## Common error solutions
|
|
102
102
|
|
|
103
103
|
| Error | Solution |
|
|
104
104
|
| --------------------------------------- | ------------------------------------------------------- |
|
|
@@ -107,7 +107,7 @@ Data-binding conditionals:
|
|
|
107
107
|
| `Alloy is not defined` (non-controller) | Add `const Alloy = require('alloy');` |
|
|
108
108
|
| iOS `invalid method passed to UIModule` | Creating Android-only object - use `platform` attribute |
|
|
109
109
|
|
|
110
|
-
## CLI
|
|
110
|
+
## CLI quick reference
|
|
111
111
|
|
|
112
112
|
```bash
|
|
113
113
|
# New project
|
|
@@ -130,15 +130,15 @@ alloy move <old> <new>
|
|
|
130
130
|
alloy remove <name>
|
|
131
131
|
```
|
|
132
132
|
|
|
133
|
-
## Configuration
|
|
133
|
+
## Configuration files priority
|
|
134
134
|
|
|
135
135
|
**config.json precedence:** `os:ios` > `env:production` > `global`
|
|
136
136
|
|
|
137
137
|
Access at runtime: `Alloy.CFG.yourKey`
|
|
138
138
|
|
|
139
|
-
## Custom XML
|
|
139
|
+
## Custom XML tags
|
|
140
140
|
|
|
141
|
-
Create reusable components without widgets
|
|
141
|
+
Create reusable components without widgets. Drop a file in `app/lib/`:
|
|
142
142
|
|
|
143
143
|
**app/lib/checkbox.js**
|
|
144
144
|
```javascript
|
|
@@ -155,7 +155,7 @@ exports.createCheckBox = args => {
|
|
|
155
155
|
<CheckBox module="checkbox" id="terms" caption="I agree" onChange="onCheck" />
|
|
156
156
|
```
|
|
157
157
|
|
|
158
|
-
Key: `module` attribute points to file in `app/lib/` (without `.js`)
|
|
158
|
+
Key: the `module` attribute points to the file in `app/lib/` (without `.js`). The function must be `create<TagName>`.
|
|
159
159
|
|
|
160
160
|
See [custom_tags.md](references/custom_tags.md) for complete examples.
|
|
161
161
|
|
|
@@ -163,7 +163,7 @@ See [custom_tags.md](references/custom_tags.md) for complete examples.
|
|
|
163
163
|
|
|
164
164
|
### references/
|
|
165
165
|
|
|
166
|
-
|
|
166
|
+
Reference docs by topic:
|
|
167
167
|
- **best_practices.md** - Coding standards, naming conventions, global events patterns
|
|
168
168
|
- **cli_reference.md** - All CLI commands with options and model schema format
|
|
169
169
|
- **config_files.md** - alloy.jmk tasks, config.json structure, widget.json format
|
|
@@ -171,9 +171,9 @@ Complete documentation for each topic area:
|
|
|
171
171
|
- **debugging_troubleshooting.md** - Common errors with solutions
|
|
172
172
|
- **samples.md** - Controller examples, conditional views, data-binding patterns
|
|
173
173
|
|
|
174
|
-
## Related
|
|
174
|
+
## Related skills
|
|
175
175
|
|
|
176
|
-
For tasks beyond Alloy CLI and configuration, use these
|
|
176
|
+
For tasks beyond Alloy CLI and configuration, use these related skills:
|
|
177
177
|
|
|
178
178
|
| Task | Use This Skill |
|
|
179
179
|
| ---------------------------------------- | -------------- |
|
|
@@ -1,12 +1,12 @@
|
|
|
1
|
-
# Alloy
|
|
1
|
+
# Alloy best practices and recommendations
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
Recommendations for writing Alloy apps. This supplements the Titanium SDK [Best Practices and Recommendations](https://titaniumsdk.com/guide/Titanium_SDK/Titanium_SDK_Guide/Best_Practices_and_Recommendations/) guide and focuses on coding style and conventions.
|
|
4
4
|
|
|
5
5
|
## Titanium-to-Alloy Guidance
|
|
6
6
|
|
|
7
7
|
### Loading Libraries in Alloy
|
|
8
8
|
|
|
9
|
-
If you
|
|
9
|
+
If you need global functionality, require modules in all controllers or create a single global reference:
|
|
10
10
|
|
|
11
11
|
**alloy.js**
|
|
12
12
|
```javascript
|
|
@@ -16,13 +16,13 @@ Alloy.Globals.refToYourModule = require('yourModule');
|
|
|
16
16
|
|
|
17
17
|
### Performance Best Practices
|
|
18
18
|
|
|
19
|
-
The same best practices from traditional Titanium development apply to Alloy.
|
|
19
|
+
The same best practices from traditional Titanium development apply to Alloy. Alloy controllers can do what classic controllers can.
|
|
20
20
|
|
|
21
|
-
Use compiler directives to
|
|
21
|
+
Use compiler directives to reduce runtime work (see Conditional Code in Alloy Controllers).
|
|
22
22
|
|
|
23
23
|
### Project Organization
|
|
24
24
|
|
|
25
|
-
|
|
25
|
+
Decide whether to adapt Alloy to your existing structure, or to adopt Alloy's structure. Alloy standardizes common Titanium patterns and makes projects easier to maintain.
|
|
26
26
|
|
|
27
27
|
## Coding Style Best Practices
|
|
28
28
|
|
|
@@ -33,7 +33,7 @@ Determine if it makes sense to bend Alloy around your existing organization, or
|
|
|
33
33
|
|
|
34
34
|
### Global Variables
|
|
35
35
|
|
|
36
|
-
|
|
36
|
+
Avoid declaring globals in app.js and using them in other files. It still works, but it is not recommended and may be deprecated.
|
|
37
37
|
|
|
38
38
|
Instead, declare these in your JS files:
|
|
39
39
|
|
|
@@ -61,7 +61,7 @@ const loading = Alloy.createWidget("com.titaniumsdk.loading");
|
|
|
61
61
|
|
|
62
62
|
### Global Events
|
|
63
63
|
|
|
64
|
-
**Avoid `Ti.App.fireEvent` and `Ti.App.addEventListener
|
|
64
|
+
**Avoid `Ti.App.fireEvent` and `Ti.App.addEventListener`.** It crosses the native-JS bridge and can cause memory leaks and slower execution.
|
|
65
65
|
|
|
66
66
|
#### Use Callbacks for Master-Child Communication
|
|
67
67
|
|
|
@@ -118,4 +118,4 @@ Alloy.Events.trigger('updateMainUI');
|
|
|
118
118
|
```javascript
|
|
119
119
|
Alloy.createController('child').on('refresh', refreshData);
|
|
120
120
|
```
|
|
121
|
-
This is a
|
|
121
|
+
This is a simpler way to do cross-controller communication with Backbone events.
|