@maccesar/titools 2.0.7 → 2.2.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/{AGENTS-TEMPLATE.md → AGENTS-VERCEL-RESEARCH.md} +16 -18
- package/README.md +250 -168
- package/agents/{ti-researcher.md → ti-pro.md} +10 -10
- package/bin/titools.js +16 -12
- package/lib/cleanup.js +95 -0
- package/lib/commands/agents.js +146 -70
- package/lib/commands/skills.js +349 -0
- package/lib/commands/uninstall.js +189 -154
- package/lib/commands/update.js +104 -21
- package/lib/config.js +26 -20
- package/lib/downloader.js +1 -1
- package/lib/installer.js +37 -97
- package/lib/platform.js +9 -5
- package/lib/prompts/checkboxCancel.js +264 -0
- package/lib/prompts/selectCancel.js +204 -0
- package/lib/symlink.js +19 -7
- package/lib/utils.js +17 -17
- package/package.json +10 -10
- package/skills/alloy-guides/SKILL.md +8 -30
- package/skills/alloy-guides/references/CLI_TASKS.md +14 -24
- package/skills/alloy-guides/references/CONCEPTS.md +5 -25
- package/skills/alloy-guides/references/CONTROLLERS.md +2 -19
- package/skills/alloy-guides/references/MODELS.md +40 -10
- package/skills/alloy-guides/references/PURGETSS.md +1 -11
- package/skills/alloy-guides/references/VIEWS_DYNAMIC.md +8 -14
- package/skills/alloy-guides/references/VIEWS_STYLES.md +14 -25
- package/skills/alloy-guides/references/VIEWS_WITHOUT_CONTROLLERS.md +2 -8
- package/skills/alloy-guides/references/VIEWS_XML.md +29 -40
- package/skills/alloy-guides/references/WIDGETS.md +1 -17
- package/skills/alloy-howtos/SKILL.md +1 -22
- package/skills/alloy-howtos/references/best_practices.md +0 -17
- package/skills/alloy-howtos/references/cli_reference.md +1 -23
- package/skills/alloy-howtos/references/config_files.md +86 -15
- package/skills/alloy-howtos/references/custom_tags.md +14 -13
- package/skills/alloy-howtos/references/debugging_troubleshooting.md +3 -22
- package/skills/alloy-howtos/references/samples.md +4 -14
- package/skills/purgetss/SKILL.md +11 -37
- package/skills/purgetss/references/EXAMPLES.md +106 -17
- package/skills/purgetss/references/animation-system.md +0 -67
- package/skills/purgetss/references/apply-directive.md +0 -18
- package/skills/purgetss/references/arbitrary-values.md +0 -25
- package/skills/purgetss/references/class-index.md +0 -46
- package/skills/purgetss/references/cli-commands.md +0 -41
- package/skills/purgetss/references/configurable-properties.md +0 -55
- package/skills/purgetss/references/custom-rules.md +0 -14
- package/skills/purgetss/references/customization-deep-dive.md +0 -49
- package/skills/purgetss/references/dynamic-component-creation.md +56 -37
- package/skills/purgetss/references/grid-layout.md +0 -32
- package/skills/purgetss/references/icon-fonts.md +0 -50
- package/skills/purgetss/references/installation-setup.md +61 -32
- package/skills/purgetss/references/migration-guide.md +127 -0
- package/skills/purgetss/references/opacity-modifier.md +0 -34
- package/skills/purgetss/references/performance-tips.md +261 -0
- package/skills/purgetss/references/platform-modifiers.md +0 -46
- package/skills/purgetss/references/smart-mappings.md +0 -12
- package/skills/purgetss/references/tikit-components.md +393 -0
- package/skills/purgetss/references/titanium-resets.md +1 -27
- package/skills/purgetss/references/ui-ux-design.md +467 -117
- package/skills/{alloy-expert → ti-expert}/SKILL.md +45 -54
- package/skills/ti-expert/references/alloy-builtins.md +387 -0
- package/skills/{alloy-expert → ti-expert}/references/alloy-structure.md +147 -40
- package/skills/ti-expert/references/anti-patterns.md +90 -0
- package/skills/ti-expert/references/cli-expert.md +109 -0
- package/skills/{alloy-expert → ti-expert}/references/code-conventions.md +182 -49
- package/skills/{alloy-expert → ti-expert}/references/controller-patterns.md +103 -93
- package/skills/{alloy-expert → ti-expert}/references/error-handling.md +12 -12
- package/skills/{alloy-expert → ti-expert}/references/examples.md +144 -85
- package/skills/{alloy-expert → ti-expert}/references/migration-patterns.md +38 -36
- package/skills/{alloy-expert → ti-expert}/references/patterns.md +8 -8
- package/skills/ti-expert/references/performance-listview.md +251 -0
- package/skills/{alloy-expert/references/performance-patterns.md → ti-expert/references/performance-optimization.md} +67 -283
- package/skills/{alloy-expert/references/security-patterns.md → ti-expert/references/security-device.md} +12 -295
- package/skills/ti-expert/references/security-fundamentals.md +284 -0
- package/skills/{alloy-expert → ti-expert}/references/state-management.md +10 -10
- package/skills/ti-expert/references/testing-e2e-ci.md +432 -0
- package/skills/ti-expert/references/testing-unit.md +433 -0
- package/skills/ti-expert/references/theming.md +394 -0
- package/skills/ti-guides/SKILL.md +1 -14
- package/skills/ti-guides/references/advanced-data-and-images.md +126 -10
- package/skills/ti-guides/references/app-distribution.md +48 -10
- package/skills/ti-guides/references/application-frameworks.md +9 -2
- package/skills/ti-guides/references/cli-reference.md +338 -82
- package/skills/ti-guides/references/coding-best-practices.md +14 -4
- package/skills/ti-guides/references/commonjs-advanced.md +103 -6
- package/skills/ti-guides/references/hello-world.md +5 -2
- package/skills/ti-guides/references/hyperloop-native-access.md +439 -46
- package/skills/ti-guides/references/javascript-primer.md +4 -3
- package/skills/ti-guides/references/resources.md +0 -1
- package/skills/ti-guides/references/style-and-conventions.md +57 -9
- package/skills/ti-guides/references/tiapp-config.md +48 -6
- package/skills/ti-howtos/SKILL.md +2 -27
- package/skills/ti-howtos/references/android-platform-deep-dives.md +41 -90
- package/skills/ti-howtos/references/automation-fastlane-appium.md +15 -14
- package/skills/ti-howtos/references/buffer-codec-streams.md +22 -22
- package/skills/ti-howtos/references/cross-platform-development.md +68 -37
- package/skills/ti-howtos/references/debugging-profiling.md +8 -53
- package/skills/ti-howtos/references/extending-titanium.md +12 -51
- package/skills/ti-howtos/references/google-maps-v2.md +30 -29
- package/skills/ti-howtos/references/ios-map-kit.md +19 -25
- package/skills/ti-howtos/references/ios-platform-deep-dives.md +95 -283
- package/skills/ti-howtos/references/local-data-sources.md +45 -37
- package/skills/ti-howtos/references/location-and-maps.md +47 -28
- package/skills/ti-howtos/references/media-apis.md +84 -27
- package/skills/ti-howtos/references/notification-services.md +40 -89
- package/skills/ti-howtos/references/remote-data-sources.md +21 -36
- package/skills/ti-howtos/references/tutorials.md +79 -39
- package/skills/ti-howtos/references/using-modules.md +4 -30
- package/skills/ti-howtos/references/web-content-integration.md +28 -45
- package/skills/ti-howtos/references/webpack-build-pipeline.md +54 -18
- package/skills/ti-ui/SKILL.md +1 -21
- package/skills/ti-ui/references/accessibility-deep-dive.md +71 -25
- package/skills/ti-ui/references/animation-and-matrices.md +0 -47
- package/skills/ti-ui/references/application-structures.md +0 -46
- package/skills/ti-ui/references/custom-fonts-styling.md +9 -57
- package/skills/ti-ui/references/event-handling.md +32 -40
- package/skills/ti-ui/references/gestures.md +0 -40
- package/skills/ti-ui/references/icons-and-splash-screens.md +21 -44
- package/skills/ti-ui/references/layouts-and-positioning.md +47 -39
- package/skills/ti-ui/references/listviews-and-performance.md +187 -73
- package/skills/ti-ui/references/orientation.md +57 -71
- package/skills/ti-ui/references/platform-ui-android.md +114 -48
- package/skills/ti-ui/references/platform-ui-ios.md +63 -38
- package/skills/ti-ui/references/scrolling-views.md +14 -23
- package/skills/ti-ui/references/tableviews.md +6 -56
- package/lib/commands/install.js +0 -188
- package/skills/alloy-expert/references/anti-patterns.md +0 -133
- package/skills/alloy-expert/references/testing.md +0 -872
- package/skills/ti-guides/references/alloy-cli-advanced.md +0 -84
- package/skills/ti-guides/references/alloy-data-mastery.md +0 -29
- package/skills/ti-guides/references/alloy-widgets-and-themes.md +0 -19
- /package/skills/{alloy-expert → ti-expert}/assets/ControllerAutoCleanup.js +0 -0
- /package/skills/{alloy-expert → ti-expert}/references/contracts.md +0 -0
|
@@ -1,47 +1,10 @@
|
|
|
1
1
|
# Web Content Integration
|
|
2
2
|
|
|
3
|
-
## Table of Contents
|
|
4
|
-
|
|
5
|
-
- [Web Content Integration](#web-content-integration)
|
|
6
|
-
- [Table of Contents](#table-of-contents)
|
|
7
|
-
- [1. The WebView Component](#1-the-webview-component)
|
|
8
|
-
- [WKWebView (Titanium SDK 8.0.0+)](#wkwebview-titanium-sdk-800)
|
|
9
|
-
- [Basic WebView Creation](#basic-webview-creation)
|
|
10
|
-
- [Remote URL](#remote-url)
|
|
11
|
-
- [Local HTML](#local-html)
|
|
12
|
-
- [Inline HTML](#inline-html)
|
|
13
|
-
- [Local Web Content with Assets](#local-web-content-with-assets)
|
|
14
|
-
- [WebView Properties and Methods](#webview-properties-and-methods)
|
|
15
|
-
- [Navigation](#navigation)
|
|
16
|
-
- [Load Control](#load-control)
|
|
17
|
-
- [Data Handling](#data-handling)
|
|
18
|
-
- [Events](#events)
|
|
19
|
-
- [2. Communication Between WebViews and Titanium](#2-communication-between-webviews-and-titanium)
|
|
20
|
-
- [Local Web Content Communication](#local-web-content-communication)
|
|
21
|
-
- [Logging from WebView](#logging-from-webview)
|
|
22
|
-
- [Bidirectional Events with Ti.App](#bidirectional-events-with-tiapp)
|
|
23
|
-
- [Remote Web Content Communication](#remote-web-content-communication)
|
|
24
|
-
- [Using evalJS() for Remote Content](#using-evaljs-for-remote-content)
|
|
25
|
-
- [Passing Data to Remote Content](#passing-data-to-remote-content)
|
|
26
|
-
- [3. Performance and Interaction Concerns](#3-performance-and-interaction-concerns)
|
|
27
|
-
- [WebView Performance](#webview-performance)
|
|
28
|
-
- [WebView in TableViews](#webview-in-tableviews)
|
|
29
|
-
- [WebView in Scrollable Components](#webview-in-scrollable-components)
|
|
30
|
-
- [Viewport Meta Tag](#viewport-meta-tag)
|
|
31
|
-
- [4. WebView Use Cases](#4-webview-use-cases)
|
|
32
|
-
- [Authentication Flows](#authentication-flows)
|
|
33
|
-
- [Canvas and Graphics](#canvas-and-graphics)
|
|
34
|
-
- [5. WKWebView-Specific Considerations](#5-wkwebview-specific-considerations)
|
|
35
|
-
- [Best Practices Summary](#best-practices-summary)
|
|
36
|
-
|
|
37
|
-
---
|
|
38
|
-
|
|
39
3
|
## 1. The WebView Component
|
|
40
4
|
|
|
41
5
|
### WKWebView (Titanium SDK 8.0.0+)
|
|
42
|
-
Apple deprecated UIWebView. Titanium now uses WKWebView as the underlying implementation.
|
|
43
6
|
|
|
44
|
-
**Important**: WKWebView has
|
|
7
|
+
> **Important**: As of Titanium SDK 8.0.0, WKWebView is the only supported web view on iOS. Apple deprecated UIWebView and it has been removed. WKWebView has behavioral differences you must account for.
|
|
45
8
|
|
|
46
9
|
### Basic WebView Creation
|
|
47
10
|
|
|
@@ -104,7 +67,10 @@ Local content can include CSS, JS, and images. Paths are relative to Resources (
|
|
|
104
67
|
- `url` - Local or remote URL
|
|
105
68
|
- `html` - Inline HTML string
|
|
106
69
|
- `scalesPageToFit` - Boolean to scale content to dimensions
|
|
107
|
-
- `setBasicAuthentication(username, password)` - HTTP authentication
|
|
70
|
+
- `setBasicAuthentication(host, username, password)` - HTTP authentication
|
|
71
|
+
```javascript
|
|
72
|
+
webView.setBasicAuthentication('myDomain.com', 'username', 'password');
|
|
73
|
+
```
|
|
108
74
|
|
|
109
75
|
#### Events
|
|
110
76
|
- `beforeload` - Fires before loading begins (`e.url` contains the source)
|
|
@@ -178,6 +144,8 @@ button.addEventListener('click', () => {
|
|
|
178
144
|
|
|
179
145
|
**Critical**: Titanium statements (Ti.API, Ti.App) do NOT work in remote HTML content.
|
|
180
146
|
|
|
147
|
+
> **Warning**: On iOS 12.0+, calling `evalJS()` synchronously from certain contexts can cause a deadlock. Always prefer the callback-based async version.
|
|
148
|
+
|
|
181
149
|
#### Using evalJS() for Remote Content
|
|
182
150
|
|
|
183
151
|
Inject JavaScript and retrieve results as strings:
|
|
@@ -259,6 +227,12 @@ For mobile-optimized content, use the viewport meta tag:
|
|
|
259
227
|
|
|
260
228
|
## 4. WebView Use Cases
|
|
261
229
|
|
|
230
|
+
### Common WebView Use Cases
|
|
231
|
+
- **HTML forms**: WebViews provide auto-scroll to focused fields, next/previous navigation, and native keyboard integration — often better than building forms in native UI.
|
|
232
|
+
- **Rich text / HTML email**: Render styled content that would be difficult with native labels.
|
|
233
|
+
- **Canvas / graphics**: HTML5 Canvas provides 2D drawing capabilities not available in native Titanium APIs.
|
|
234
|
+
- **OAuth flows**: Load third-party auth pages (Google, Facebook) inside a WebView and intercept redirects.
|
|
235
|
+
|
|
262
236
|
### Authentication Flows
|
|
263
237
|
Many OAuth providers use WebView for login (like the Facebook module).
|
|
264
238
|
|
|
@@ -289,13 +263,22 @@ For complex graphics, use HTML5 Canvas:
|
|
|
289
263
|
</script>
|
|
290
264
|
```
|
|
291
265
|
|
|
292
|
-
## 5. WKWebView
|
|
266
|
+
## 5. WKWebView Behavioral Differences (iOS)
|
|
293
267
|
|
|
294
|
-
|
|
295
|
-
|
|
296
|
-
|
|
297
|
-
|
|
298
|
-
|
|
268
|
+
- **Cookies**: WKWebView uses a separate cookie store from `Ti.Network`. Cookies set via HTTPClient are not automatically shared with WebViews.
|
|
269
|
+
- **localStorage/sessionStorage**: NOT shared between the native app and the WebView. Each WKWebView has its own storage.
|
|
270
|
+
- **evalJS is async**: On iOS 12.0+, synchronous `evalJS()` can cause deadlocks. Use the callback form instead:
|
|
271
|
+
```javascript
|
|
272
|
+
webView.evalJS('document.title', (result) => {
|
|
273
|
+
Ti.API.info(`Title: ${result}`);
|
|
274
|
+
});
|
|
275
|
+
```
|
|
276
|
+
- **Viewport meta tag required**: WKWebView requires an explicit viewport tag to scale content properly:
|
|
277
|
+
```html
|
|
278
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
279
|
+
```
|
|
280
|
+
- **Custom fonts**: Must use a special `@font-face` path format in WKWebView CSS. Fonts must be in the app bundle and referenced correctly.
|
|
281
|
+
- **Remote HTML limitations**: `Ti.API`, `Ti.App.fireEvent()`, and other Titanium calls do NOT work in remotely-loaded HTML pages. Only local HTML files can communicate with the Titanium runtime.
|
|
299
282
|
|
|
300
283
|
## Best Practices Summary
|
|
301
284
|
|
|
@@ -1,20 +1,6 @@
|
|
|
1
1
|
# Webpack Build Pipeline
|
|
2
2
|
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
## Table of Contents
|
|
6
|
-
|
|
7
|
-
- [Webpack Build Pipeline](#webpack-build-pipeline)
|
|
8
|
-
- [Table of Contents](#table-of-contents)
|
|
9
|
-
- [1. Key Benefits](#1-key-benefits)
|
|
10
|
-
- [2. The `@` Alias](#2-the--alias)
|
|
11
|
-
- [3. NPM Dependency Management](#3-npm-dependency-management)
|
|
12
|
-
- [4. Platform-Specific Files](#4-platform-specific-files)
|
|
13
|
-
- [5. Diagnostic Web UI](#5-diagnostic-web-ui)
|
|
14
|
-
- [6. Advanced Configuration](#6-advanced-configuration)
|
|
15
|
-
- [7. Known Limitations](#7-known-limitations)
|
|
16
|
-
|
|
17
|
-
---
|
|
3
|
+
Webpack integration is available as an **alternative build pipeline** starting with Titanium SDK 9.1.0. It is not mandatory — projects work without it. When enabled, Webpack manages your project's assets and code bundling.
|
|
18
4
|
|
|
19
5
|
## 1. Key Benefits
|
|
20
6
|
- **Lightning-Fast Incremental Builds**: Only what changes is processed.
|
|
@@ -63,7 +49,34 @@ When doing `import { func } from '@/utils'`, Webpack will select the correct ver
|
|
|
63
49
|
Webpack includes a web interface to analyze the build and asset sizes.
|
|
64
50
|
Default URL: `http://localhost:1732/webpack/latest/web`
|
|
65
51
|
|
|
66
|
-
## 6.
|
|
52
|
+
## 6. Project Plugins
|
|
53
|
+
Webpack support is powered by plugins that handle different project types. Plugins are automatically selected based on your project:
|
|
54
|
+
|
|
55
|
+
| Plugin | Purpose |
|
|
56
|
+
| ---------------------------------- | ----------------------- |
|
|
57
|
+
| `@appcd/webpack-plugin-alloy` | Alloy project support |
|
|
58
|
+
| `@appcd/webpack-plugin-classic` | Classic project support |
|
|
59
|
+
| `@appcd/webpack-plugin-babel` | Babel transpilation |
|
|
60
|
+
| `@appcd/webpack-plugin-typescript` | TypeScript support |
|
|
61
|
+
|
|
62
|
+
### Custom Plugin Configuration
|
|
63
|
+
Plugins can be customized using the `webpack-chain` API in your project's `webpack.config.js`:
|
|
64
|
+
|
|
65
|
+
```javascript
|
|
66
|
+
module.exports = (api) => {
|
|
67
|
+
// Add a custom alias
|
|
68
|
+
api.chainWebpack((config) => {
|
|
69
|
+
config.resolve.alias.set('@utils', api.resolve('app/lib/utils'));
|
|
70
|
+
});
|
|
71
|
+
};
|
|
72
|
+
```
|
|
73
|
+
|
|
74
|
+
Common customizations:
|
|
75
|
+
- **Add alias**: `config.resolve.alias.set(name, path)`
|
|
76
|
+
- **Add loader**: `config.module.rule(name).use(name).loader(loader)`
|
|
77
|
+
- **Delete plugin**: `config.plugins.delete(name)`
|
|
78
|
+
|
|
79
|
+
## 7. Advanced Configuration
|
|
67
80
|
You can extend the configuration via plugins in `package.json`:
|
|
68
81
|
```json
|
|
69
82
|
{
|
|
@@ -73,6 +86,29 @@ You can extend the configuration via plugins in `package.json`:
|
|
|
73
86
|
}
|
|
74
87
|
```
|
|
75
88
|
|
|
76
|
-
##
|
|
89
|
+
## 8. Global Configuration
|
|
90
|
+
Configure Webpack daemon settings in `~/.appcelerator/appcd/config.json`:
|
|
91
|
+
```json
|
|
92
|
+
{
|
|
93
|
+
"webpack": {
|
|
94
|
+
"inactivityTimeout": 600000
|
|
95
|
+
}
|
|
96
|
+
}
|
|
97
|
+
```
|
|
98
|
+
|
|
99
|
+
## 9. Troubleshooting
|
|
100
|
+
|
|
101
|
+
**Build seems stuck**: The Webpack daemon may need a restart:
|
|
102
|
+
```bash
|
|
103
|
+
appcd exec /webpack/latest/stop
|
|
104
|
+
```
|
|
105
|
+
|
|
106
|
+
**View build logs**:
|
|
107
|
+
```bash
|
|
108
|
+
appcd logcat "*webpack*"
|
|
109
|
+
```
|
|
110
|
+
|
|
111
|
+
## 10. Known Limitations
|
|
77
112
|
- **Hyperloop**: Currently not compatible with the Webpack pipeline.
|
|
78
|
-
- **Alloy.jmk**:
|
|
113
|
+
- **Alloy.jmk**: Build hooks are not supported — use Webpack plugins instead.
|
|
114
|
+
- First build may be slower due to daemon startup.
|
package/skills/ti-ui/SKILL.md
CHANGED
|
@@ -28,26 +28,6 @@ This skill automatically detects Titanium projects when invoked and provides UI/
|
|
|
28
28
|
- **Not detected** → Indicates this is for Titanium projects only, does NOT provide Titanium UI guidance
|
|
29
29
|
:::
|
|
30
30
|
|
|
31
|
-
## Table of Contents
|
|
32
|
-
|
|
33
|
-
- [Titanium SDK UI Expert](#titanium-sdk-ui-expert)
|
|
34
|
-
- [Project Detection](#project-detection)
|
|
35
|
-
- [Table of Contents](#table-of-contents)
|
|
36
|
-
- [Quick Reference](#quick-reference)
|
|
37
|
-
- [Critical Rules (Low Freedom)](#critical-rules-low-freedom)
|
|
38
|
-
- [Performance](#performance)
|
|
39
|
-
- [iOS Accessibility](#ios-accessibility)
|
|
40
|
-
- [Layout](#layout)
|
|
41
|
-
- [Platform-Specific Properties](#platform-specific-properties)
|
|
42
|
-
- [Event Management](#event-management)
|
|
43
|
-
- [App Architecture](#app-architecture)
|
|
44
|
-
- [Platform Differences Summary](#platform-differences-summary)
|
|
45
|
-
- [UI Design Workflow](#ui-design-workflow)
|
|
46
|
-
- [Searching References](#searching-references)
|
|
47
|
-
- [Related Skills](#related-skills)
|
|
48
|
-
|
|
49
|
-
---
|
|
50
|
-
|
|
51
31
|
## Quick Reference
|
|
52
32
|
|
|
53
33
|
| Topic | Reference |
|
|
@@ -174,6 +154,6 @@ For tasks beyond UI components, use these complementary skills:
|
|
|
174
154
|
|
|
175
155
|
| Task | Use This Skill |
|
|
176
156
|
| ----------------------------------------------- | -------------- |
|
|
177
|
-
| Project architecture, services, memory cleanup | `
|
|
157
|
+
| Project architecture, services, memory cleanup | `ti-expert` |
|
|
178
158
|
| Native features (camera, location, push, media) | `ti-howtos` |
|
|
179
159
|
| Alloy MVC, data binding, widgets | `alloy-guides` |
|
|
@@ -1,32 +1,15 @@
|
|
|
1
1
|
# Accessibility (a11y) Deep Dive
|
|
2
2
|
|
|
3
|
-
## Table of Contents
|
|
4
|
-
|
|
5
|
-
- [Accessibility (a11y) Deep Dive](#accessibility-a11y-deep-dive)
|
|
6
|
-
- [Table of Contents](#table-of-contents)
|
|
7
|
-
- [1. Overview](#1-overview)
|
|
8
|
-
- [2. Core Accessibility Properties](#2-core-accessibility-properties)
|
|
9
|
-
- [Basic Usage](#basic-usage)
|
|
10
|
-
- [Android TalkBack](#android-talkback)
|
|
11
|
-
- [Star Rating Example](#star-rating-example)
|
|
12
|
-
- [Toggle Button Example](#toggle-button-example)
|
|
13
|
-
- [6. System-Level Accessibility Events](#6-system-level-accessibility-events)
|
|
14
|
-
- [Monitor Accessibility Changes](#monitor-accessibility-changes)
|
|
15
|
-
- [Code Patterns](#code-patterns)
|
|
16
|
-
- [Accessibility First Development](#accessibility-first-development)
|
|
17
|
-
- [9. External Resources](#9-external-resources)
|
|
18
|
-
- [10. Common Issues](#10-common-issues)
|
|
19
|
-
- [Issue: VoiceOver Can't Access Children](#issue-voiceover-cant-access-children)
|
|
20
|
-
- [Issue: TalkBack Doesn't Speak Text](#issue-talkback-doesnt-speak-text)
|
|
21
|
-
- [Issue: Complex Custom Controls Not Accessible](#issue-complex-custom-controls-not-accessible)
|
|
22
|
-
- [Issue: State Changes Not Announced](#issue-state-changes-not-announced)
|
|
23
|
-
|
|
24
|
-
---
|
|
25
|
-
|
|
26
3
|
## 1. Overview
|
|
27
4
|
|
|
28
5
|
Accessibility ensures your app is usable by everyone, including users with visual, hearing, and motor disabilities. Titanium supports both Android TalkBack and iOS VoiceOver spoken feedback systems.
|
|
29
6
|
|
|
7
|
+
### Design Considerations Beyond Screen Readers
|
|
8
|
+
|
|
9
|
+
- **Motor disabilities**: Provide larger tap targets (minimum 44x44 points on iOS, 48x48 dp on Android). Support alternative input methods. Avoid interactions that require precise gestures or rapid timing.
|
|
10
|
+
- **Color-blindness**: Never rely on color alone to convey information. Use text labels, icons, or patterns alongside color indicators. Test your UI with grayscale to verify usability.
|
|
11
|
+
- **Screen magnifiers**: Users with low vision may use the built-in zoom features (iOS Zoom, Android Magnification). Ensure your layout remains functional when magnified — avoid absolute positioning that breaks at large zoom levels.
|
|
12
|
+
|
|
30
13
|
## 2. Core Accessibility Properties
|
|
31
14
|
|
|
32
15
|
All Titanium view elements support these accessibility properties:
|
|
@@ -38,6 +21,8 @@ All Titanium view elements support these accessibility properties:
|
|
|
38
21
|
| `accessibilityHint` | - | Briefly describes what performing an action will do (e.g., "Closes the window") |
|
|
39
22
|
| `accessibilityValue` | State or value of the control | String describing current state (e.g., "Selected", "50 percent") |
|
|
40
23
|
|
|
24
|
+
> **Android note**: On Android, `accessibilityLabel`, `accessibilityValue`, and `accessibilityHint` are combined (in that order) and mapped to Android's native `contentDescription` property. This means TalkBack reads all three as a single string, while VoiceOver on iOS reads them as separate announcements.
|
|
25
|
+
|
|
41
26
|
### Basic Usage
|
|
42
27
|
|
|
43
28
|
```javascript
|
|
@@ -79,6 +64,8 @@ const button = Ti.UI.createButton({
|
|
|
79
64
|
...
|
|
80
65
|
```javascript
|
|
81
66
|
// BAD - Container with accessibility properties
|
|
67
|
+
// On iOS, VoiceOver treats the entire container as ONE accessible element,
|
|
68
|
+
// completely blocking access to all children inside it (nameField, emailField, etc.)
|
|
82
69
|
const container = Ti.UI.createView({
|
|
83
70
|
accessibilityLabel: 'Form container', // DON'T DO THIS
|
|
84
71
|
accessibilityHint: 'Contains input fields'
|
|
@@ -175,6 +162,7 @@ const label = Ti.UI.createLabel({
|
|
|
175
162
|
});
|
|
176
163
|
|
|
177
164
|
// Don't set accessibility on containers (iOS)
|
|
165
|
+
// VoiceOver treats the container as a single element, making all children unreachable
|
|
178
166
|
const container = Ti.UI.createView({
|
|
179
167
|
accessibilityLabel: 'Container' // BLOCKS children on iOS
|
|
180
168
|
});
|
|
@@ -208,14 +196,72 @@ function createAccessibleListItem(title, subtitle, action) {
|
|
|
208
196
|
}
|
|
209
197
|
```
|
|
210
198
|
|
|
211
|
-
## 9.
|
|
199
|
+
## 9. Platform Behavior Comparison
|
|
200
|
+
|
|
201
|
+
TalkBack (Android) and VoiceOver (iOS) interpret accessibility properties differently:
|
|
202
|
+
|
|
203
|
+
| Element | TalkBack Response | VoiceOver Response |
|
|
204
|
+
| -------------------------------- | ------------------------------------------------- | ------------------------------------------------------- |
|
|
205
|
+
| Button with label "Submit" | "Submit, button, double-tap to activate" | "Submit, button" |
|
|
206
|
+
| Slider with value 50% | "50 percent, slider" | "50%, adjustable" |
|
|
207
|
+
| Label with hint | Reads label + value + hint as one combined string | Reads label first, then hint as a separate announcement |
|
|
208
|
+
| Checkbox, checked | "Checked, checkbox, double-tap to toggle" | "Checked, tick box" |
|
|
209
|
+
| Image with label "Profile photo" | "Profile photo" | "Profile photo, image" |
|
|
210
|
+
|
|
211
|
+
> On Android, the three accessibility properties are concatenated into `contentDescription`, so they are always read as one utterance. On iOS, VoiceOver reads them as distinct pieces with brief pauses between them.
|
|
212
|
+
|
|
213
|
+
## 10. Testing Procedures
|
|
214
|
+
|
|
215
|
+
### Android Emulator
|
|
216
|
+
|
|
217
|
+
The Android emulator does not provide a built-in method to test accessibility. You must test on a physical device for accurate TalkBack behavior.
|
|
218
|
+
|
|
219
|
+
### Android Device (TalkBack)
|
|
220
|
+
|
|
221
|
+
1. Open **Settings > Accessibility > TalkBack**
|
|
222
|
+
2. Toggle TalkBack **On**
|
|
223
|
+
3. A confirmation dialog appears — confirm to enable
|
|
224
|
+
|
|
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
|
+
|
|
231
|
+
To disable TalkBack, navigate 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
|
+
|
|
233
|
+
### iOS Simulator (Accessibility Inspector)
|
|
234
|
+
|
|
235
|
+
Use the Accessibility Inspector to examine elements without enabling VoiceOver:
|
|
236
|
+
|
|
237
|
+
1. In Xcode, go to **Xcode > Open Developer Tool > Accessibility Inspector**
|
|
238
|
+
2. Select the Simulator as the target device
|
|
239
|
+
3. Hover over or tap elements to inspect their accessibility label, value, hint, and traits
|
|
240
|
+
|
|
241
|
+
This is the fastest way to verify properties during development.
|
|
242
|
+
|
|
243
|
+
### iOS Device (VoiceOver)
|
|
244
|
+
|
|
245
|
+
1. Open **Settings > Accessibility > VoiceOver**
|
|
246
|
+
2. Toggle VoiceOver **On**
|
|
247
|
+
|
|
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
|
+
|
|
255
|
+
To disable VoiceOver, navigate to the same setting and toggle it off. You can also configure the Accessibility Shortcut (triple-click the side button) for quick toggling.
|
|
256
|
+
|
|
257
|
+
## 11. External Resources
|
|
212
258
|
|
|
213
259
|
- [Accessibility Programming Guide for iOS](https://developer.apple.com/library/ios/documentation/UserExperience/Conceptual/iPhoneAccessibility/Introduction/Introduction.html)
|
|
214
260
|
- [Android Accessibility API Guide](http://developer.android.com/guide/topics/ui/accessibility/index.html)
|
|
215
261
|
- [Android Accessibility Design Guide](http://developer.android.com/design/patterns/accessibility.html)
|
|
216
262
|
- [W3C Web Content Accessibility Guidelines](http://www.w3.org/WAI/WCAG20/quickref/)
|
|
217
263
|
|
|
218
|
-
##
|
|
264
|
+
## 12. Common Issues
|
|
219
265
|
|
|
220
266
|
### Issue: VoiceOver Can't Access Children
|
|
221
267
|
|
|
@@ -1,52 +1,5 @@
|
|
|
1
1
|
# Animation, Matrices, and Transitions
|
|
2
2
|
|
|
3
|
-
## Table of Contents
|
|
4
|
-
|
|
5
|
-
- [Animation, Matrices, and Transitions](#animation-matrices-and-transitions)
|
|
6
|
-
- [Table of Contents](#table-of-contents)
|
|
7
|
-
- [1. Overview](#1-overview)
|
|
8
|
-
- [2. Basic Animations](#2-basic-animations)
|
|
9
|
-
- [Property Animation Syntax](#property-animation-syntax)
|
|
10
|
-
- [Animation Properties](#animation-properties)
|
|
11
|
-
- [Animation Curves (Easing)](#animation-curves-easing)
|
|
12
|
-
- [Reversing Animation](#reversing-animation)
|
|
13
|
-
- [Repeating Animation](#repeating-animation)
|
|
14
|
-
- [3. 2D Matrix Animations](#3-2d-matrix-animations)
|
|
15
|
-
- [Basic 2D Transform](#basic-2d-transform)
|
|
16
|
-
- [2D Matrix Methods](#2d-matrix-methods)
|
|
17
|
-
- [Sequential Transformations](#sequential-transformations)
|
|
18
|
-
- [Identity (Reset) Transform](#identity-reset-transform)
|
|
19
|
-
- [4. 3D Matrix Animations (iOS Only)](#4-3d-matrix-animations-ios-only)
|
|
20
|
-
- [Basic 3D Transform](#basic-3d-transform)
|
|
21
|
-
- [3D Matrix Methods](#3d-matrix-methods)
|
|
22
|
-
- [Flip Card Effect](#flip-card-effect)
|
|
23
|
-
- [5. iOS Transitions](#5-ios-transitions)
|
|
24
|
-
- [Transition Constants](#transition-constants)
|
|
25
|
-
- [View Transition](#view-transition)
|
|
26
|
-
- [Window Transition (NavigationWindow)](#window-transition-navigationwindow)
|
|
27
|
-
- [6. Dynamic Animations (iOS Only)](#6-dynamic-animations-ios-only)
|
|
28
|
-
- [Gravity Animation](#gravity-animation)
|
|
29
|
-
- [Attachment (Spring) Behavior](#attachment-spring-behavior)
|
|
30
|
-
- [Push Behavior](#push-behavior)
|
|
31
|
-
- [7. Animation Events](#7-animation-events)
|
|
32
|
-
- [Animation Lifecycle](#animation-lifecycle)
|
|
33
|
-
- [Stopping Animations](#stopping-animations)
|
|
34
|
-
- [8. Common Animation Patterns](#8-common-animation-patterns)
|
|
35
|
-
- [Fade In/Out](#fade-inout)
|
|
36
|
-
- [Slide In](#slide-in)
|
|
37
|
-
- [Pulse Animation](#pulse-animation)
|
|
38
|
-
- [Shake Animation](#shake-animation)
|
|
39
|
-
- [Bounce In](#bounce-in)
|
|
40
|
-
- [9. Performance Considerations](#9-performance-considerations)
|
|
41
|
-
- [DO:](#do)
|
|
42
|
-
- [DON'T:](#dont)
|
|
43
|
-
- [Bad vs Good](#bad-vs-good)
|
|
44
|
-
- [10. Platform Differences](#10-platform-differences)
|
|
45
|
-
- [iOS vs Android](#ios-vs-android)
|
|
46
|
-
- [Best Practices](#best-practices)
|
|
47
|
-
|
|
48
|
-
---
|
|
49
|
-
|
|
50
3
|
## 1. Overview
|
|
51
4
|
|
|
52
5
|
Animations add visual interest and professionalism to apps when used appropriately. Titanium supports:
|
|
@@ -1,51 +1,5 @@
|
|
|
1
1
|
# Application Structures and Core Building Blocks
|
|
2
2
|
|
|
3
|
-
## Table of Contents
|
|
4
|
-
|
|
5
|
-
- [Application Structures and Core Building Blocks](#application-structures-and-core-building-blocks)
|
|
6
|
-
- [Table of Contents](#table-of-contents)
|
|
7
|
-
- [1. Overview](#1-overview)
|
|
8
|
-
- [2. Windows](#2-windows)
|
|
9
|
-
- [Window Concepts](#window-concepts)
|
|
10
|
-
- [Creating Windows](#creating-windows)
|
|
11
|
-
- [Window Events](#window-events)
|
|
12
|
-
- [Window Lifecycle](#window-lifecycle)
|
|
13
|
-
- [3. Views](#3-views)
|
|
14
|
-
- [View Concepts](#view-concepts)
|
|
15
|
-
- [Creating Views](#creating-views)
|
|
16
|
-
- [Common View Types](#common-view-types)
|
|
17
|
-
- [Adding Views to Windows](#adding-views-to-windows)
|
|
18
|
-
- [Removing Views](#removing-views)
|
|
19
|
-
- [4. TabGroups](#4-tabgroups)
|
|
20
|
-
- [Tab-Based Apps](#tab-based-apps)
|
|
21
|
-
- [Tab Properties](#tab-properties)
|
|
22
|
-
- [Window Titles vs Tab Titles](#window-titles-vs-tab-titles)
|
|
23
|
-
- [Tab Events](#tab-events)
|
|
24
|
-
- [Tab Recommendations](#tab-recommendations)
|
|
25
|
-
- [Tab-Based Applications](#tab-based-applications)
|
|
26
|
-
- [Navigation Bar Customization](#navigation-bar-customization)
|
|
27
|
-
- [7. Modal Windows](#7-modal-windows)
|
|
28
|
-
- [iOS Modal Windows](#ios-modal-windows)
|
|
29
|
-
- [8. Heavyweight vs Lightweight Windows](#8-heavyweight-vs-lightweight-windows)
|
|
30
|
-
- [Heavyweight Windows (Android)](#heavyweight-windows-android)
|
|
31
|
-
- [Lightweight Windows](#lightweight-windows)
|
|
32
|
-
- [9. Window Hierarchy and Stacking](#9-window-hierarchy-and-stacking)
|
|
33
|
-
- [Understanding the Stack](#understanding-the-stack)
|
|
34
|
-
- [Accessing the Stack](#accessing-the-stack)
|
|
35
|
-
- [10. Platform-Specific Navigation](#10-platform-specific-navigation)
|
|
36
|
-
- [Android Navigation Patterns](#android-navigation-patterns)
|
|
37
|
-
- [iOS Navigation Patterns](#ios-navigation-patterns)
|
|
38
|
-
- [11. Execution Contexts](#11-execution-contexts)
|
|
39
|
-
- [Lightweight Contexts](#lightweight-contexts)
|
|
40
|
-
- [12. Common Patterns](#12-common-patterns)
|
|
41
|
-
- [Drill-Down Navigation](#drill-down-navigation)
|
|
42
|
-
- [Modal Forms](#modal-forms)
|
|
43
|
-
- [Tab with Navigation](#tab-with-navigation)
|
|
44
|
-
- [13. Best Practices](#13-best-practices)
|
|
45
|
-
- [14. Platform Differences Summary](#14-platform-differences-summary)
|
|
46
|
-
|
|
47
|
-
---
|
|
48
|
-
|
|
49
3
|
## 1. Overview
|
|
50
4
|
|
|
51
5
|
Titanium apps are built from three core components:
|
|
@@ -1,62 +1,5 @@
|
|
|
1
1
|
# Custom Fonts and Attributed Strings
|
|
2
2
|
|
|
3
|
-
## Table of Contents
|
|
4
|
-
|
|
5
|
-
- [Custom Fonts and Attributed Strings](#custom-fonts-and-attributed-strings)
|
|
6
|
-
- [Table of Contents](#table-of-contents)
|
|
7
|
-
- [1. Custom Fonts Overview](#1-custom-fonts-overview)
|
|
8
|
-
- [Font Sources](#font-sources)
|
|
9
|
-
- [2. Platform-Specific Font Loading](#2-platform-specific-font-loading)
|
|
10
|
-
- [Key Difference](#key-difference)
|
|
11
|
-
- [Example](#example)
|
|
12
|
-
- [3. Alloy Projects](#3-alloy-projects)
|
|
13
|
-
- [Directory Structure](#directory-structure)
|
|
14
|
-
- [XML Usage](#xml-usage)
|
|
15
|
-
- [TSS Styling](#tss-styling)
|
|
16
|
-
- [Cross-Platform Solution 1: Rename Font File](#cross-platform-solution-1-rename-font-file)
|
|
17
|
-
- [Cross-Platform Solution 2: Platform-Specific Styles](#cross-platform-solution-2-platform-specific-styles)
|
|
18
|
-
- [4. Classic Titanium Projects](#4-classic-titanium-projects)
|
|
19
|
-
- [Directory Structure](#directory-structure-1)
|
|
20
|
-
- [Runtime Platform Switching](#runtime-platform-switching)
|
|
21
|
-
- [Platform-Switching Helper Function](#platform-switching-helper-function)
|
|
22
|
-
- [5. Finding PostScript Name](#5-finding-postscript-name)
|
|
23
|
-
- [Using FontBook (macOS)](#using-fontbook-macos)
|
|
24
|
-
- [Common Font Patterns](#common-font-patterns)
|
|
25
|
-
- [6. iOS Platform Notes](#6-ios-platform-notes)
|
|
26
|
-
- [Automatic Info.plist Registration](#automatic-infoplist-registration)
|
|
27
|
-
- [Using System Fonts](#using-system-fonts)
|
|
28
|
-
- [7. Attributed Strings](#7-attributed-strings)
|
|
29
|
-
- [Basic Syntax](#basic-syntax)
|
|
30
|
-
- [Important Warning](#important-warning)
|
|
31
|
-
- [Property Equivalents](#property-equivalents)
|
|
32
|
-
- [8. Attribute Types](#8-attribute-types)
|
|
33
|
-
- [Font Attribute](#font-attribute)
|
|
34
|
-
- [Foreground Color](#foreground-color)
|
|
35
|
-
- [Background Color](#background-color)
|
|
36
|
-
- [Underline](#underline)
|
|
37
|
-
- [Strikethrough](#strikethrough)
|
|
38
|
-
- [Links (iOS 7+)](#links-ios-7)
|
|
39
|
-
- [9. iOS-Exclusive Attributes](#9-ios-exclusive-attributes)
|
|
40
|
-
- [Ligature](#ligature)
|
|
41
|
-
- [Kerning (Character Spacing)](#kerning-character-spacing)
|
|
42
|
-
- [Stroke Text (iOS 7+)](#stroke-text-ios-7)
|
|
43
|
-
- [Shadow (iOS 7+)](#shadow-ios-7)
|
|
44
|
-
- [Letterpress Effect (iOS 7+)](#letterpress-effect-ios-7)
|
|
45
|
-
- [Writing Direction (iOS 7+)](#writing-direction-ios-7)
|
|
46
|
-
- [Baseline Offset (iOS 7+)](#baseline-offset-ios-7)
|
|
47
|
-
- [Oblique/Skew (iOS 7+)](#obliqueskew-ios-7)
|
|
48
|
-
- [Expansion (iOS 7+)](#expansion-ios-7)
|
|
49
|
-
- [10. Multiple Attributes Example](#10-multiple-attributes-example)
|
|
50
|
-
- [11. Best Practices](#11-best-practices)
|
|
51
|
-
- [Custom Fonts](#custom-fonts)
|
|
52
|
-
- [Attributed Strings](#attributed-strings)
|
|
53
|
-
- [12. Common Issues](#12-common-issues)
|
|
54
|
-
- [Font Not Showing](#font-not-showing)
|
|
55
|
-
- [Wrong Font on One Platform](#wrong-font-on-one-platform)
|
|
56
|
-
- [Attributed String Not Displaying](#attributed-string-not-displaying)
|
|
57
|
-
|
|
58
|
-
---
|
|
59
|
-
|
|
60
3
|
## 1. Custom Fonts Overview
|
|
61
4
|
|
|
62
5
|
Titanium supports TrueType (.ttf) and OpenType (.otf) fonts on both iOS and Android. Custom fonts are a quick way to personalize or brand your application.
|
|
@@ -372,6 +315,15 @@ const attr = Ti.UI.createAttributedString({
|
|
|
372
315
|
|
|
373
316
|
**iOS**: Supports same styles and patterns as Underline.
|
|
374
317
|
|
|
318
|
+
**iOS Strikethrough Color** (iOS 7+):
|
|
319
|
+
```javascript
|
|
320
|
+
{
|
|
321
|
+
type: Ti.UI.ATTRIBUTE_STRIKETHROUGH_COLOR,
|
|
322
|
+
value: 'red',
|
|
323
|
+
range: [start, length]
|
|
324
|
+
}
|
|
325
|
+
```
|
|
326
|
+
|
|
375
327
|
### Links (iOS 7+)
|
|
376
328
|
|
|
377
329
|
```javascript
|
|
@@ -1,43 +1,5 @@
|
|
|
1
1
|
# Event Handling
|
|
2
2
|
|
|
3
|
-
## Table of Contents
|
|
4
|
-
|
|
5
|
-
- [Event Handling](#event-handling)
|
|
6
|
-
- [Table of Contents](#table-of-contents)
|
|
7
|
-
- [1. Event Listener Pattern](#1-event-listener-pattern)
|
|
8
|
-
- [Basic Pattern](#basic-pattern)
|
|
9
|
-
- [Controlling Event Bubbling](#controlling-event-bubbling)
|
|
10
|
-
- [Bubbling Example](#bubbling-example)
|
|
11
|
-
- [3. Firing Events](#3-firing-events)
|
|
12
|
-
- [Fire Custom Event](#fire-custom-event)
|
|
13
|
-
- [Listening to App Events](#listening-to-app-events)
|
|
14
|
-
- [Memory Warning](#memory-warning)
|
|
15
|
-
- [5. Touch Events](#5-touch-events)
|
|
16
|
-
- [Touch Event Lifecycle](#touch-event-lifecycle)
|
|
17
|
-
- [Touch Enabled](#touch-enabled)
|
|
18
|
-
- [6. Named vs Anonymous Functions](#6-named-vs-anonymous-functions)
|
|
19
|
-
- [Anonymous Function (One-time use)](#anonymous-function-one-time-use)
|
|
20
|
-
- [Named Function (Reusable)](#named-function-reusable)
|
|
21
|
-
- [7. Removing Event Listeners](#7-removing-event-listeners)
|
|
22
|
-
- [Must Match Function Signature](#must-match-function-signature)
|
|
23
|
-
- [8. Android Hardware Button Events](#8-android-hardware-button-events)
|
|
24
|
-
- [Available Events](#available-events)
|
|
25
|
-
- [Handling Back Button](#handling-back-button)
|
|
26
|
-
- [Note: Window Types](#note-window-types)
|
|
27
|
-
- [9. Android Menu](#9-android-menu)
|
|
28
|
-
- [Create Options Menu](#create-options-menu)
|
|
29
|
-
- [10. Event Listener Best Practices](#10-event-listener-best-practices)
|
|
30
|
-
- [Define Before Event May Fire](#define-before-event-may-fire)
|
|
31
|
-
- [Global Event Memory Leaks](#global-event-memory-leaks)
|
|
32
|
-
- [Remove Listeners on Window Close](#remove-listeners-on-window-close)
|
|
33
|
-
- [11. Special Considerations](#11-special-considerations)
|
|
34
|
-
- [Platform-Specific Events](#platform-specific-events)
|
|
35
|
-
- [Event Naming](#event-naming)
|
|
36
|
-
- [Custom Properties on Events](#custom-properties-on-events)
|
|
37
|
-
- [Best Practices Summary](#best-practices-summary)
|
|
38
|
-
|
|
39
|
-
---
|
|
40
|
-
|
|
41
3
|
## 1. Event Listener Pattern
|
|
42
4
|
|
|
43
5
|
### Basic Pattern
|
|
@@ -50,19 +12,39 @@ element.addEventListener('event_type', (e) => {
|
|
|
50
12
|
});
|
|
51
13
|
```
|
|
52
14
|
...
|
|
15
|
+
### Events That Bubble
|
|
16
|
+
|
|
17
|
+
All user input events defined by `Ti.UI.View` bubble up the view hierarchy: `click`, `dblclick`, `doubletap`, `longclick`, `longpress`, `pinch`, `singletap`, `swipe`, `touchcancel`, `touchend`, `touchmove`, `touchstart`, `twofingertap`. The **only** `Ti.UI.View` event that does NOT bubble is `postlayout`.
|
|
18
|
+
|
|
19
|
+
> **Event synonyms**: `singletap` is a synonym for `click`, and `doubletap` is a synonym for `dblclick`.
|
|
20
|
+
|
|
21
|
+
Events representing view-specific state — such as `focus`, `scroll`, and `postlayout` — do **not** bubble. Only user input events bubble.
|
|
22
|
+
|
|
23
|
+
### Bubbling Boundaries
|
|
24
|
+
|
|
25
|
+
Bubbling stops at these special container boundaries: `Window`, `NavigationWindow`, `SplitWindow`, `Tab`, and `TabGroup`.
|
|
26
|
+
|
|
27
|
+
Note that `TableViewSection` is a logical (non-view) container that still participates in bubbling — events from rows bubble through the section to the `TableView`.
|
|
28
|
+
|
|
29
|
+
### Native Event Handling Precedence
|
|
30
|
+
|
|
31
|
+
Event bubbling happens after native event handling. Native UI effects (such as highlighting) have already occurred before any event handler fires.
|
|
32
|
+
|
|
53
33
|
### Controlling Event Bubbling
|
|
54
34
|
|
|
55
35
|
```javascript
|
|
56
36
|
// Check if event bubbles
|
|
57
37
|
Ti.API.info(`Bubbles: ${e.bubbles}`);
|
|
58
38
|
|
|
59
|
-
// Stop further bubbling
|
|
39
|
+
// Stop further bubbling — cancelBubble is always false when an event handler is invoked
|
|
60
40
|
e.cancelBubble = true;
|
|
61
41
|
|
|
62
42
|
// Prevent view from bubbling to parent
|
|
63
43
|
view.bubbleParent = false;
|
|
64
44
|
```
|
|
65
45
|
|
|
46
|
+
> **Note**: Multiple events of different types are treated separately. If the user lifting their finger triggers `touchend`, `singletap`, and `click`, setting `cancelBubble` on one does not affect the others.
|
|
47
|
+
|
|
66
48
|
### Bubbling Example
|
|
67
49
|
|
|
68
50
|
```javascript
|
|
@@ -256,7 +238,7 @@ win.addEventListener('androidback', (e) => {
|
|
|
256
238
|
|
|
257
239
|
### Note: Window Types
|
|
258
240
|
|
|
259
|
-
Since 3.2.0, all windows are heavyweight by default and can receive hardware button events.
|
|
241
|
+
Since 3.2.0, all windows are heavyweight by default and you cannot control the type of window created. All windows can receive hardware button events.
|
|
260
242
|
|
|
261
243
|
## 9. Android Menu
|
|
262
244
|
|
|
@@ -360,6 +342,16 @@ Some events only work on certain platforms:
|
|
|
360
342
|
- `globalPoint` property - iOS only
|
|
361
343
|
- Hardware buttons - Android only
|
|
362
344
|
|
|
345
|
+
### Shake Event
|
|
346
|
+
|
|
347
|
+
The `Ti.Gesture` module enables listening for the `shake` event, which fires when the device detects a shake motion:
|
|
348
|
+
|
|
349
|
+
```javascript
|
|
350
|
+
Ti.Gesture.addEventListener('shake', (e) => {
|
|
351
|
+
Ti.API.info(`Device shaken at timestamp: ${e.timestamp}`);
|
|
352
|
+
});
|
|
353
|
+
```
|
|
354
|
+
|
|
363
355
|
### Event Naming
|
|
364
356
|
|
|
365
357
|
**WARNING**: Do NOT use spaces in custom event names (causes issues with libraries like Backbone.js):
|