@maccesar/titools 2.2.3 → 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 +28 -27
- package/lib/commands/update.js +80 -101
- 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
|
@@ -1,21 +1,22 @@
|
|
|
1
|
-
# Webpack
|
|
1
|
+
# Webpack build pipeline
|
|
2
2
|
|
|
3
|
-
Webpack integration is
|
|
3
|
+
Webpack integration is an alternative build pipeline starting with Titanium SDK 9.1.0. It is optional. When enabled, Webpack manages asset and code bundling.
|
|
4
4
|
|
|
5
|
-
## 1. Key
|
|
6
|
-
-
|
|
7
|
-
-
|
|
8
|
-
-
|
|
5
|
+
## 1. Key benefits
|
|
6
|
+
- Fast incremental builds: only changed files are processed.
|
|
7
|
+
- npm support: install packages in the root and import them directly.
|
|
8
|
+
- Build-time resolution: `require` calls are resolved during compilation, not at runtime.
|
|
9
9
|
|
|
10
|
-
## 2. The `@`
|
|
11
|
-
Webpack
|
|
10
|
+
## 2. The `@` alias
|
|
11
|
+
Webpack adds the `@` alias to reference the source root without deep relative paths.
|
|
12
12
|
|
|
13
|
-
| Project
|
|
13
|
+
| Project type | Path mapped by `@` |
|
|
14
14
|
| :----------- | :----------------- |
|
|
15
|
-
|
|
|
16
|
-
|
|
|
15
|
+
| Alloy | `app/lib` |
|
|
16
|
+
| Classic | `src` |
|
|
17
|
+
|
|
18
|
+
Usage example:
|
|
17
19
|
|
|
18
|
-
**Usage Example:**
|
|
19
20
|
```javascript
|
|
20
21
|
// Before (without webpack)
|
|
21
22
|
import Utils from '../../utils/helper';
|
|
@@ -24,33 +25,36 @@ import Utils from '../../utils/helper';
|
|
|
24
25
|
import Utils from '@/utils/helper';
|
|
25
26
|
```
|
|
26
27
|
|
|
27
|
-
## 3.
|
|
28
|
-
|
|
28
|
+
## 3. npm dependency management
|
|
29
|
+
Install a package in the project root:
|
|
30
|
+
|
|
29
31
|
```bash
|
|
30
32
|
npm install lodash
|
|
31
33
|
```
|
|
32
|
-
|
|
34
|
+
|
|
35
|
+
Use it in Titanium code:
|
|
36
|
+
|
|
33
37
|
```javascript
|
|
34
38
|
import _ from 'lodash';
|
|
35
39
|
const data = _.chunk(['a', 'b', 'c', 'd'], 2);
|
|
36
40
|
```
|
|
37
41
|
|
|
38
|
-
## 4. Platform-
|
|
39
|
-
Webpack
|
|
42
|
+
## 4. Platform-specific files
|
|
43
|
+
Webpack detects platform-specific files using the `filename.<platform>.js` pattern.
|
|
40
44
|
|
|
41
|
-
|
|
45
|
+
Example:
|
|
42
46
|
- `utils.js` (common)
|
|
43
47
|
- `utils.ios.js` (iOS only)
|
|
44
48
|
- `utils.android.js` (Android only)
|
|
45
49
|
|
|
46
|
-
When
|
|
50
|
+
When you `import { func } from '@/utils'`, Webpack picks the correct version for the build target.
|
|
47
51
|
|
|
48
|
-
## 5. Diagnostic
|
|
49
|
-
Webpack includes a web interface to analyze
|
|
52
|
+
## 5. Diagnostic web UI
|
|
53
|
+
Webpack includes a web interface to analyze builds and asset sizes.
|
|
50
54
|
Default URL: `http://localhost:1732/webpack/latest/web`
|
|
51
55
|
|
|
52
|
-
## 6. Project
|
|
53
|
-
Webpack support is powered by plugins
|
|
56
|
+
## 6. Project plugins
|
|
57
|
+
Webpack support is powered by plugins chosen based on project type:
|
|
54
58
|
|
|
55
59
|
| Plugin | Purpose |
|
|
56
60
|
| ---------------------------------- | ----------------------- |
|
|
@@ -59,25 +63,26 @@ Webpack support is powered by plugins that handle different project types. Plugi
|
|
|
59
63
|
| `@appcd/webpack-plugin-babel` | Babel transpilation |
|
|
60
64
|
| `@appcd/webpack-plugin-typescript` | TypeScript support |
|
|
61
65
|
|
|
62
|
-
### Custom
|
|
63
|
-
|
|
66
|
+
### Custom plugin configuration
|
|
67
|
+
Customize with the `webpack-chain` API in `webpack.config.js`:
|
|
64
68
|
|
|
65
69
|
```javascript
|
|
66
70
|
module.exports = (api) => {
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
+
// Add a custom alias
|
|
72
|
+
api.chainWebpack((config) => {
|
|
73
|
+
config.resolve.alias.set('@utils', api.resolve('app/lib/utils'));
|
|
74
|
+
});
|
|
71
75
|
};
|
|
72
76
|
```
|
|
73
77
|
|
|
74
78
|
Common customizations:
|
|
75
|
-
-
|
|
76
|
-
-
|
|
77
|
-
-
|
|
79
|
+
- Add alias: `config.resolve.alias.set(name, path)`
|
|
80
|
+
- Add loader: `config.module.rule(name).use(name).loader(loader)`
|
|
81
|
+
- Delete plugin: `config.plugins.delete(name)`
|
|
82
|
+
|
|
83
|
+
## 7. Advanced configuration
|
|
84
|
+
Extend configuration via plugins in `package.json`:
|
|
78
85
|
|
|
79
|
-
## 7. Advanced Configuration
|
|
80
|
-
You can extend the configuration via plugins in `package.json`:
|
|
81
86
|
```json
|
|
82
87
|
{
|
|
83
88
|
"appcdWebpackPlugins": [
|
|
@@ -86,29 +91,32 @@ You can extend the configuration via plugins in `package.json`:
|
|
|
86
91
|
}
|
|
87
92
|
```
|
|
88
93
|
|
|
89
|
-
## 8. Global
|
|
94
|
+
## 8. Global configuration
|
|
90
95
|
Configure Webpack daemon settings in `~/.appcelerator/appcd/config.json`:
|
|
96
|
+
|
|
91
97
|
```json
|
|
92
98
|
{
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
99
|
+
"webpack": {
|
|
100
|
+
"inactivityTimeout": 600000
|
|
101
|
+
}
|
|
96
102
|
}
|
|
97
103
|
```
|
|
98
104
|
|
|
99
105
|
## 9. Troubleshooting
|
|
100
106
|
|
|
101
|
-
|
|
107
|
+
Build seems stuck: the Webpack daemon may need a restart.
|
|
108
|
+
|
|
102
109
|
```bash
|
|
103
110
|
appcd exec /webpack/latest/stop
|
|
104
111
|
```
|
|
105
112
|
|
|
106
|
-
|
|
113
|
+
View build logs:
|
|
114
|
+
|
|
107
115
|
```bash
|
|
108
116
|
appcd logcat "*webpack*"
|
|
109
117
|
```
|
|
110
118
|
|
|
111
|
-
## 10. Known
|
|
112
|
-
-
|
|
113
|
-
-
|
|
114
|
-
-
|
|
119
|
+
## 10. Known limitations
|
|
120
|
+
- Hyperloop is not compatible with the Webpack pipeline.
|
|
121
|
+
- Alloy.jmk build hooks are not supported. Use Webpack plugins instead.
|
|
122
|
+
- The first build may be slower due to daemon startup.
|
package/skills/ti-ui/SKILL.md
CHANGED
|
@@ -5,154 +5,154 @@ argument-hint: "[component]"
|
|
|
5
5
|
allowed-tools: Read, Grep, Glob, Edit, Write, Bash(node *)
|
|
6
6
|
---
|
|
7
7
|
|
|
8
|
-
# Titanium SDK UI
|
|
8
|
+
# Titanium SDK UI expert
|
|
9
9
|
|
|
10
|
-
|
|
10
|
+
A practical guide to Titanium SDK UI. Covers layouts, event handling, animations, performance, and platform-specific components for iOS and Android.
|
|
11
11
|
|
|
12
|
-
## Project
|
|
12
|
+
## Project detection
|
|
13
13
|
|
|
14
|
-
:::info
|
|
15
|
-
This skill
|
|
14
|
+
:::info auto-detects titanium projects
|
|
15
|
+
This skill detects Titanium projects and provides UI guidance.
|
|
16
16
|
|
|
17
|
-
|
|
17
|
+
Detection happens automatically. You do not need to run a command.
|
|
18
18
|
|
|
19
|
-
|
|
20
|
-
- `tiapp.xml`
|
|
19
|
+
Titanium project indicator:
|
|
20
|
+
- `tiapp.xml` (required for all Titanium projects)
|
|
21
21
|
|
|
22
|
-
|
|
23
|
-
-
|
|
24
|
-
-
|
|
22
|
+
Applicable to both:
|
|
23
|
+
- Alloy projects (app/ folder structure)
|
|
24
|
+
- Classic projects (Resources/ folder)
|
|
25
25
|
|
|
26
|
-
|
|
27
|
-
-
|
|
28
|
-
-
|
|
26
|
+
Behavior based on detection:
|
|
27
|
+
- Titanium detected: Provide UI guidance for Alloy and Classic, ListView/TableView patterns, and platform differences
|
|
28
|
+
- Not detected: State this is for Titanium projects only and skip UI guidance
|
|
29
29
|
:::
|
|
30
30
|
|
|
31
|
-
## Quick
|
|
31
|
+
## Quick reference
|
|
32
32
|
|
|
33
33
|
| Topic | Reference |
|
|
34
34
|
| -------------------------------- | ----------------------------------------------------------------------- |
|
|
35
|
-
|
|
|
35
|
+
| App structures | [application-structures.md](references/application-structures.md) |
|
|
36
36
|
| Layouts, positioning, units | [layouts-and-positioning.md](references/layouts-and-positioning.md) |
|
|
37
37
|
| Events, bubbling, lifecycle | [event-handling.md](references/event-handling.md) |
|
|
38
38
|
| ScrollView vs ScrollableView | [scrolling-views.md](references/scrolling-views.md) |
|
|
39
|
-
|
|
|
40
|
-
| ListView templates
|
|
39
|
+
| TableView | [tableviews.md](references/tableviews.md) |
|
|
40
|
+
| ListView templates, performance | [listviews-and-performance.md](references/listviews-and-performance.md) |
|
|
41
41
|
| Touch, swipe, pinch, gestures | [gestures.md](references/gestures.md) |
|
|
42
42
|
| Orientation handling | [orientation.md](references/orientation.md) |
|
|
43
43
|
| Custom fonts, attributed strings | [custom-fonts-styling.md](references/custom-fonts-styling.md) |
|
|
44
44
|
| Animations, 2D/3D matrices | [animation-and-matrices.md](references/animation-and-matrices.md) |
|
|
45
45
|
| Icons, splash screens, densities | [icons-and-splash-screens.md](references/icons-and-splash-screens.md) |
|
|
46
|
-
| Android
|
|
47
|
-
| iOS
|
|
46
|
+
| Android action bar, themes | [platform-ui-android.md](references/platform-ui-android.md) |
|
|
47
|
+
| iOS navigation, 3D Touch | [platform-ui-ios.md](references/platform-ui-ios.md) |
|
|
48
48
|
| VoiceOver, TalkBack, a11y | [accessibility-deep-dive.md](references/accessibility-deep-dive.md) |
|
|
49
49
|
|
|
50
|
-
## Critical
|
|
50
|
+
## Critical rules
|
|
51
51
|
|
|
52
52
|
### Performance
|
|
53
|
-
-
|
|
54
|
-
-
|
|
55
|
-
-
|
|
56
|
-
-
|
|
53
|
+
- Do not use `Ti.UI.SIZE` in ListViews. It causes jerky scrolling. Use fixed heights.
|
|
54
|
+
- Prefer ListView over TableView for new apps with large datasets.
|
|
55
|
+
- Batch updates with `applyProperties` to reduce bridge overhead.
|
|
56
|
+
- Avoid WebView inside TableView. It kills scrolling performance.
|
|
57
57
|
|
|
58
|
-
### iOS
|
|
59
|
-
-
|
|
60
|
-
-
|
|
58
|
+
### iOS accessibility
|
|
59
|
+
- Do not set accessibility properties on container views. It blocks child interaction.
|
|
60
|
+
- Do not set `accessibilityLabel` on text controls on Android. It overrides visible text.
|
|
61
61
|
|
|
62
62
|
### Layout
|
|
63
|
-
-
|
|
64
|
-
-
|
|
63
|
+
- Use `dp` units for cross-platform consistency.
|
|
64
|
+
- Android ScrollView is vertical or horizontal, not both. Set `scrollType`.
|
|
65
65
|
|
|
66
|
-
### Platform-
|
|
66
|
+
### Platform-specific properties
|
|
67
67
|
|
|
68
|
-
:::danger
|
|
69
|
-
Using `Ti.UI.iOS.*` or `Ti.UI.Android.*` properties
|
|
68
|
+
:::danger critical: platform-specific properties require modifiers
|
|
69
|
+
Using `Ti.UI.iOS.*` or `Ti.UI.Android.*` properties without platform modifiers will crash cross-platform compilation.
|
|
70
70
|
|
|
71
|
-
|
|
71
|
+
Example of the damage:
|
|
72
72
|
```javascript
|
|
73
|
-
//
|
|
73
|
+
// Wrong: adds Ti.UI.iOS to an Android build
|
|
74
74
|
const win = Ti.UI.createWindow({
|
|
75
|
-
statusBarStyle: Ti.UI.iOS.StatusBar.LIGHT_CONTENT
|
|
75
|
+
statusBarStyle: Ti.UI.iOS.StatusBar.LIGHT_CONTENT
|
|
76
76
|
})
|
|
77
77
|
```
|
|
78
78
|
|
|
79
|
-
|
|
79
|
+
Correct approaches:
|
|
80
80
|
|
|
81
|
-
|
|
81
|
+
Option 1: TSS modifier (Alloy projects):
|
|
82
82
|
```tss
|
|
83
83
|
"#mainWindow[platform=ios]": {
|
|
84
84
|
statusBarStyle: Ti.UI.iOS.StatusBar.LIGHT_CONTENT
|
|
85
85
|
}
|
|
86
86
|
```
|
|
87
87
|
|
|
88
|
-
|
|
88
|
+
Option 2: Conditional code:
|
|
89
89
|
```javascript
|
|
90
90
|
if (OS_IOS) {
|
|
91
91
|
$.mainWindow.statusBarStyle = Ti.UI.iOS.StatusBar.LIGHT_CONTENT
|
|
92
92
|
}
|
|
93
93
|
```
|
|
94
94
|
|
|
95
|
-
|
|
95
|
+
Properties that always require platform modifiers:
|
|
96
96
|
- iOS: `statusBarStyle`, `modalStyle`, `modalTransitionStyle`, any `Ti.UI.iOS.*`
|
|
97
97
|
- Android: `actionBar` config, any `Ti.UI.Android.*` constant
|
|
98
98
|
|
|
99
|
-
|
|
99
|
+
For platform-specific UI patterns, see [platform-ui-ios.md](references/platform-ui-ios.md) and [platform-ui-android.md](references/platform-ui-android.md).
|
|
100
100
|
:::
|
|
101
101
|
|
|
102
|
-
### Event
|
|
103
|
-
-
|
|
104
|
-
-
|
|
102
|
+
### Event management
|
|
103
|
+
- Remove global listeners (`Ti.App`, `Ti.Gesture`, `Ti.Accelerometer`) on pause to save battery.
|
|
104
|
+
- Input events bubble up. System events do not.
|
|
105
105
|
|
|
106
|
-
### App
|
|
107
|
-
-
|
|
108
|
-
-
|
|
109
|
-
-
|
|
106
|
+
### App architecture
|
|
107
|
+
- Limit tabs to 4 or fewer for better UX across platforms.
|
|
108
|
+
- Use NavigationWindow for iOS hierarchical navigation.
|
|
109
|
+
- Handle `androidback` to prevent unexpected exits.
|
|
110
110
|
|
|
111
|
-
## Platform
|
|
111
|
+
## Platform differences summary
|
|
112
112
|
|
|
113
113
|
| Feature | iOS | Android |
|
|
114
114
|
| ---------------------- | ---------------------------- | ----------------------- |
|
|
115
|
-
| 3D Matrix |
|
|
116
|
-
| Pinch gesture |
|
|
115
|
+
| 3D Matrix | Full support | No support |
|
|
116
|
+
| Pinch gesture | Full support | Limited |
|
|
117
117
|
| ScrollView | Bidirectional | Unidirectional |
|
|
118
|
-
| TableView |
|
|
119
|
-
| ListView |
|
|
118
|
+
| TableView | Full support | Full support |
|
|
119
|
+
| ListView | Full support | Full support |
|
|
120
120
|
| Default template image | Left side | Right side |
|
|
121
|
-
| ListView action items |
|
|
121
|
+
| ListView action items | Swipe actions | No |
|
|
122
122
|
| Modal windows | Fills screen, covers tab bar | No effect (always full) |
|
|
123
123
|
| Navigation pattern | NavigationWindow | Back button + Menu |
|
|
124
124
|
|
|
125
|
-
## UI
|
|
126
|
-
|
|
127
|
-
1.
|
|
128
|
-
2.
|
|
129
|
-
3.
|
|
130
|
-
4.
|
|
131
|
-
5.
|
|
132
|
-
6.
|
|
133
|
-
7.
|
|
134
|
-
|
|
135
|
-
## Searching
|
|
136
|
-
|
|
137
|
-
When
|
|
138
|
-
-
|
|
139
|
-
-
|
|
140
|
-
-
|
|
141
|
-
-
|
|
142
|
-
-
|
|
143
|
-
-
|
|
144
|
-
-
|
|
145
|
-
-
|
|
146
|
-
-
|
|
147
|
-
-
|
|
148
|
-
-
|
|
149
|
-
-
|
|
150
|
-
|
|
151
|
-
## Related
|
|
152
|
-
|
|
153
|
-
For
|
|
154
|
-
|
|
155
|
-
| Task | Use
|
|
125
|
+
## UI design workflow
|
|
126
|
+
|
|
127
|
+
1. Choose app structure: tab-based or window-based
|
|
128
|
+
2. Pick a layout mode: composite, vertical, or horizontal
|
|
129
|
+
3. Decide sizing: `SIZE` or `FILL` based on component defaults
|
|
130
|
+
4. Plan events: bubbling, app-level events, lifecycle
|
|
131
|
+
5. Optimize performance: templates, batch updates
|
|
132
|
+
6. Apply accessibility per platform
|
|
133
|
+
7. Add motion: animations, 2D/3D transforms, transitions
|
|
134
|
+
|
|
135
|
+
## Searching references
|
|
136
|
+
|
|
137
|
+
When you need specific patterns, grep these terms in the reference files:
|
|
138
|
+
- App structure: `TabGroup`, `NavigationWindow`, `modal`, `execution context`, `androidback`
|
|
139
|
+
- Layouts: `dp`, `Ti.UI.SIZE`, `Ti.UI.FILL`, `composite`, `vertical`, `horizontal`
|
|
140
|
+
- Events: `addEventListener`, `cancelBubble`, `bubbling`, `Ti.App.fireEvent`
|
|
141
|
+
- TableView: `TableView`, `TableViewRow`, `setData`, `appendRow`, `className`
|
|
142
|
+
- ListView: `ItemTemplate`, `bindId`, `setItems`, `updateItemAt`, `marker`
|
|
143
|
+
- Gestures: `swipe`, `pinch`, `longpress`, `shake`, `accelerometer`
|
|
144
|
+
- Animation: `animate`, `create2DMatrix`, `create3DMatrix`, `autoreverse`
|
|
145
|
+
- Fonts: `fontFamily`, `PostScript`, `createAttributedString`, `ATTRIBUTE_`
|
|
146
|
+
- Icons/splash: `DefaultIcon`, `appicon`, `nine-patch`, `drawable`, `splash`, `iTunesArtwork`, `adaptive`
|
|
147
|
+
- Android: `Action Bar`, `onCreateOptionsMenu`, `theme`, `Material3`, `talkback`
|
|
148
|
+
- iOS: `3D Touch`, `Popover`, `SplitWindow`, `badge`, `NavigationWindow`
|
|
149
|
+
- Accessibility: `accessibilityLabel`, `VoiceOver`, `TalkBack`, `accessibilityHidden`
|
|
150
|
+
|
|
151
|
+
## Related skills
|
|
152
|
+
|
|
153
|
+
For work beyond UI components, use these skills:
|
|
154
|
+
|
|
155
|
+
| Task | Use this skill |
|
|
156
156
|
| ----------------------------------------------- | -------------- |
|
|
157
157
|
| Project architecture, services, memory cleanup | `ti-expert` |
|
|
158
158
|
| Native features (camera, location, push, media) | `ti-howtos` |
|
|
@@ -1,18 +1,18 @@
|
|
|
1
|
-
# Accessibility (a11y)
|
|
1
|
+
# Accessibility (a11y) deep dive
|
|
2
2
|
|
|
3
3
|
## 1. Overview
|
|
4
4
|
|
|
5
|
-
Accessibility
|
|
5
|
+
Accessibility makes your app usable for people with visual, hearing, and motor disabilities. Titanium works with Android TalkBack and iOS VoiceOver for spoken feedback.
|
|
6
6
|
|
|
7
|
-
### Design
|
|
7
|
+
### Design considerations beyond screen readers
|
|
8
8
|
|
|
9
|
-
-
|
|
10
|
-
-
|
|
11
|
-
-
|
|
9
|
+
- Motor disabilities often require larger tap targets (minimum 44x44 points on iOS, 48x48 dp on Android). Support alternative input methods and avoid gestures that demand precision or fast timing.
|
|
10
|
+
- Color-blindness means color alone cannot carry meaning. Use text labels, icons, or patterns alongside color indicators. Test the UI in grayscale to check usability.
|
|
11
|
+
- Screen magnifiers are common for low-vision users (iOS Zoom, Android Magnification). Keep layouts functional when magnified and avoid absolute positioning that breaks at large zoom levels.
|
|
12
12
|
|
|
13
|
-
## 2. Core
|
|
13
|
+
## 2. Core accessibility properties
|
|
14
14
|
|
|
15
|
-
All Titanium view elements support these accessibility properties
|
|
15
|
+
All Titanium view elements support these accessibility properties.
|
|
16
16
|
|
|
17
17
|
| Property | Default Value | Description |
|
|
18
18
|
| --------------------- | ----------------------------- | ------------------------------------------------------------------------------- |
|
|
@@ -21,9 +21,9 @@ All Titanium view elements support these accessibility properties:
|
|
|
21
21
|
| `accessibilityHint` | - | Briefly describes what performing an action will do (e.g., "Closes the window") |
|
|
22
22
|
| `accessibilityValue` | State or value of the control | String describing current state (e.g., "Selected", "50 percent") |
|
|
23
23
|
|
|
24
|
-
>
|
|
24
|
+
> Android note: On Android, `accessibilityLabel`, `accessibilityValue`, and `accessibilityHint` are combined (in that order) and mapped to the native `contentDescription`. TalkBack reads them as one string. VoiceOver on iOS reads them as separate announcements.
|
|
25
25
|
|
|
26
|
-
### Basic
|
|
26
|
+
### Basic usage
|
|
27
27
|
|
|
28
28
|
```javascript
|
|
29
29
|
const button = Ti.UI.createButton({
|
|
@@ -83,7 +83,7 @@ container.add(emailField);
|
|
|
83
83
|
container.add(submitButton);
|
|
84
84
|
```
|
|
85
85
|
...
|
|
86
|
-
### Star
|
|
86
|
+
### Star rating example
|
|
87
87
|
|
|
88
88
|
```javascript
|
|
89
89
|
const starView = Ti.UI.createView({
|
|
@@ -105,7 +105,7 @@ for (let i = 0; i < 5; i++) {
|
|
|
105
105
|
}
|
|
106
106
|
```
|
|
107
107
|
|
|
108
|
-
### Toggle
|
|
108
|
+
### Toggle button example
|
|
109
109
|
|
|
110
110
|
```javascript
|
|
111
111
|
let isMuted = false;
|
|
@@ -122,9 +122,9 @@ muteButton.addEventListener('click', () => {
|
|
|
122
122
|
});
|
|
123
123
|
```
|
|
124
124
|
|
|
125
|
-
## 6. System-
|
|
125
|
+
## 6. System-level accessibility events
|
|
126
126
|
|
|
127
|
-
### Monitor
|
|
127
|
+
### Monitor accessibility changes
|
|
128
128
|
|
|
129
129
|
```javascript
|
|
130
130
|
Ti.App.addEventListener('accessibilitychanged', (e) => {
|
|
@@ -136,9 +136,9 @@ Ti.App.addEventListener('accessibilitychanged', (e) => {
|
|
|
136
136
|
});
|
|
137
137
|
```
|
|
138
138
|
...
|
|
139
|
-
### Code
|
|
139
|
+
### Code patterns
|
|
140
140
|
|
|
141
|
-
|
|
141
|
+
Do:
|
|
142
142
|
```javascript
|
|
143
143
|
// Provide meaningful labels
|
|
144
144
|
const iconButton = Ti.UI.createButton({
|
|
@@ -153,7 +153,7 @@ checkbox.accessibilityValue = isChecked ? 'Checked' : 'Unchecked';
|
|
|
153
153
|
decorativeIcon.accessibilityHidden = true;
|
|
154
154
|
```
|
|
155
155
|
|
|
156
|
-
|
|
156
|
+
Don't:
|
|
157
157
|
```javascript
|
|
158
158
|
// Don't set accessibilityLabel for text controls (Android)
|
|
159
159
|
const label = Ti.UI.createLabel({
|
|
@@ -168,9 +168,9 @@ const container = Ti.UI.createView({
|
|
|
168
168
|
});
|
|
169
169
|
```
|
|
170
170
|
|
|
171
|
-
### Accessibility
|
|
171
|
+
### Accessibility-first development
|
|
172
172
|
|
|
173
|
-
When designing complex UIs,
|
|
173
|
+
When designing complex UIs, plan accessibility at the start.
|
|
174
174
|
|
|
175
175
|
```javascript
|
|
176
176
|
function createAccessibleListItem(title, subtitle, action) {
|
|
@@ -196,9 +196,9 @@ function createAccessibleListItem(title, subtitle, action) {
|
|
|
196
196
|
}
|
|
197
197
|
```
|
|
198
198
|
|
|
199
|
-
## 9. Platform
|
|
199
|
+
## 9. Platform behavior comparison
|
|
200
200
|
|
|
201
|
-
TalkBack (Android) and VoiceOver (iOS) interpret accessibility properties differently
|
|
201
|
+
TalkBack (Android) and VoiceOver (iOS) interpret accessibility properties differently.
|
|
202
202
|
|
|
203
203
|
| Element | TalkBack Response | VoiceOver Response |
|
|
204
204
|
| -------------------------------- | ------------------------------------------------- | ------------------------------------------------------- |
|
|
@@ -208,31 +208,31 @@ TalkBack (Android) and VoiceOver (iOS) interpret accessibility properties differ
|
|
|
208
208
|
| Checkbox, checked | "Checked, checkbox, double-tap to toggle" | "Checked, tick box" |
|
|
209
209
|
| Image with label "Profile photo" | "Profile photo" | "Profile photo, image" |
|
|
210
210
|
|
|
211
|
-
> On Android, the three accessibility properties are concatenated into `contentDescription`, so they are
|
|
211
|
+
> On Android, the three accessibility properties are concatenated into `contentDescription`, so they are read as one utterance. On iOS, VoiceOver reads them as distinct pieces with short pauses between them.
|
|
212
212
|
|
|
213
|
-
## 10. Testing
|
|
213
|
+
## 10. Testing procedures
|
|
214
214
|
|
|
215
|
-
### Android
|
|
215
|
+
### Android emulator
|
|
216
216
|
|
|
217
|
-
The Android emulator
|
|
217
|
+
The Android emulator has no built-in way to test accessibility. Use a physical device for accurate TalkBack behavior.
|
|
218
218
|
|
|
219
|
-
### Android
|
|
219
|
+
### Android device (TalkBack)
|
|
220
220
|
|
|
221
221
|
1. Open **Settings > Accessibility > TalkBack**
|
|
222
222
|
2. Toggle TalkBack **On**
|
|
223
|
-
3. A confirmation dialog appears
|
|
223
|
+
3. A confirmation dialog appears; confirm to enable
|
|
224
224
|
|
|
225
|
-
|
|
226
|
-
-
|
|
227
|
-
-
|
|
228
|
-
-
|
|
229
|
-
-
|
|
225
|
+
TalkBack gestures:
|
|
226
|
+
- Tap: Select and hear the element described
|
|
227
|
+
- Double-tap: Activate the selected element
|
|
228
|
+
- Swipe left/right: Navigate to the previous/next element
|
|
229
|
+
- Swipe up/down: Change reading granularity (characters, words, headings)
|
|
230
230
|
|
|
231
|
-
To disable TalkBack,
|
|
231
|
+
To disable TalkBack, go to the same setting and toggle it off. You can also set a hardware shortcut (hold both volume keys for 3 seconds) for quick toggling during development.
|
|
232
232
|
|
|
233
|
-
### iOS
|
|
233
|
+
### iOS simulator (Accessibility Inspector)
|
|
234
234
|
|
|
235
|
-
Use the Accessibility Inspector to examine elements without enabling VoiceOver
|
|
235
|
+
Use the Accessibility Inspector to examine elements without enabling VoiceOver.
|
|
236
236
|
|
|
237
237
|
1. In Xcode, go to **Xcode > Open Developer Tool > Accessibility Inspector**
|
|
238
238
|
2. Select the Simulator as the target device
|
|
@@ -240,49 +240,49 @@ Use the Accessibility Inspector to examine elements without enabling VoiceOver:
|
|
|
240
240
|
|
|
241
241
|
This is the fastest way to verify properties during development.
|
|
242
242
|
|
|
243
|
-
### iOS
|
|
243
|
+
### iOS device (VoiceOver)
|
|
244
244
|
|
|
245
245
|
1. Open **Settings > Accessibility > VoiceOver**
|
|
246
246
|
2. Toggle VoiceOver **On**
|
|
247
247
|
|
|
248
|
-
|
|
249
|
-
-
|
|
250
|
-
-
|
|
251
|
-
-
|
|
252
|
-
-
|
|
253
|
-
-
|
|
248
|
+
VoiceOver gestures:
|
|
249
|
+
- Tap: Select and hear the element described
|
|
250
|
+
- Double-tap: Activate the selected element
|
|
251
|
+
- Swipe left/right: Navigate to the previous/next element
|
|
252
|
+
- Three-finger swipe: Scroll content
|
|
253
|
+
- Two-finger tap: Pause/resume speech
|
|
254
254
|
|
|
255
|
-
To disable VoiceOver,
|
|
255
|
+
To disable VoiceOver, go to the same setting and toggle it off. You can also configure the Accessibility Shortcut (triple-click the side button) for quick toggling.
|
|
256
256
|
|
|
257
|
-
## 11. External
|
|
257
|
+
## 11. External resources
|
|
258
258
|
|
|
259
259
|
- [Accessibility Programming Guide for iOS](https://developer.apple.com/library/ios/documentation/UserExperience/Conceptual/iPhoneAccessibility/Introduction/Introduction.html)
|
|
260
260
|
- [Android Accessibility API Guide](http://developer.android.com/guide/topics/ui/accessibility/index.html)
|
|
261
261
|
- [Android Accessibility Design Guide](http://developer.android.com/design/patterns/accessibility.html)
|
|
262
262
|
- [W3C Web Content Accessibility Guidelines](http://www.w3.org/WAI/WCAG20/quickref/)
|
|
263
263
|
|
|
264
|
-
## 12. Common
|
|
264
|
+
## 12. Common issues
|
|
265
265
|
|
|
266
|
-
### Issue: VoiceOver
|
|
266
|
+
### Issue: VoiceOver cannot access children
|
|
267
267
|
|
|
268
|
-
|
|
268
|
+
Cause: A container view has accessibility properties set.
|
|
269
269
|
|
|
270
|
-
|
|
270
|
+
Solution: Remove all accessibility properties from container views.
|
|
271
271
|
|
|
272
|
-
### Issue: TalkBack
|
|
272
|
+
### Issue: TalkBack does not speak text
|
|
273
273
|
|
|
274
|
-
|
|
274
|
+
Cause: `accessibilityLabel` on a Label/Button overrides visible text.
|
|
275
275
|
|
|
276
|
-
|
|
276
|
+
Solution: Do not set `accessibilityLabel` on textual controls unless you are intentionally overriding.
|
|
277
277
|
|
|
278
|
-
### Issue: Complex
|
|
278
|
+
### Issue: Complex custom controls are not accessible
|
|
279
279
|
|
|
280
|
-
|
|
280
|
+
Cause: Custom-drawn views have no accessibility properties.
|
|
281
281
|
|
|
282
|
-
|
|
282
|
+
Solution: Provide `accessibilityLabel`, `accessibilityValue`, and `accessibilityHint` for custom controls.
|
|
283
283
|
|
|
284
|
-
### Issue: State
|
|
284
|
+
### Issue: State changes are not announced
|
|
285
285
|
|
|
286
|
-
|
|
286
|
+
Cause: `accessibilityValue` is not updated when state changes.
|
|
287
287
|
|
|
288
|
-
|
|
288
|
+
Solution: Update `accessibilityValue` in change event handlers.
|