@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,8 +1,8 @@
|
|
|
1
|
-
# Event
|
|
1
|
+
# Event handling
|
|
2
2
|
|
|
3
|
-
## 1. Event
|
|
3
|
+
## 1. Event listener pattern
|
|
4
4
|
|
|
5
|
-
### Basic
|
|
5
|
+
### Basic pattern
|
|
6
6
|
|
|
7
7
|
```javascript
|
|
8
8
|
element.addEventListener('event_type', (e) => {
|
|
@@ -12,40 +12,40 @@ element.addEventListener('event_type', (e) => {
|
|
|
12
12
|
});
|
|
13
13
|
```
|
|
14
14
|
...
|
|
15
|
-
### Events
|
|
15
|
+
### Events that bubble
|
|
16
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
|
|
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
18
|
|
|
19
|
-
|
|
19
|
+
Event synonyms: `singletap` is a synonym for `click`, and `doubletap` is a synonym for `dblclick`.
|
|
20
20
|
|
|
21
|
-
Events
|
|
21
|
+
Events that represent view-specific state, such as `focus`, `scroll`, and `postlayout`, do not bubble. Only user input events bubble.
|
|
22
22
|
|
|
23
|
-
### Bubbling
|
|
23
|
+
### Bubbling boundaries
|
|
24
24
|
|
|
25
|
-
Bubbling stops at these
|
|
25
|
+
Bubbling stops at these container boundaries: `Window`, `NavigationWindow`, `SplitWindow`, `Tab`, and `TabGroup`.
|
|
26
26
|
|
|
27
|
-
|
|
27
|
+
`TableViewSection` is a logical (non-view) container that still participates in bubbling. Events from rows bubble through the section to the `TableView`.
|
|
28
28
|
|
|
29
|
-
### Native
|
|
29
|
+
### Native event handling precedence
|
|
30
30
|
|
|
31
|
-
Event bubbling happens after native event handling.
|
|
31
|
+
Event bubbling happens after native event handling. UI effects like highlighting already happened before handlers run.
|
|
32
32
|
|
|
33
|
-
### Controlling
|
|
33
|
+
### Controlling event bubbling
|
|
34
34
|
|
|
35
35
|
```javascript
|
|
36
36
|
// Check if event bubbles
|
|
37
37
|
Ti.API.info(`Bubbles: ${e.bubbles}`);
|
|
38
38
|
|
|
39
|
-
// Stop further bubbling
|
|
39
|
+
// Stop further bubbling - cancelBubble is always false when an event handler is invoked
|
|
40
40
|
e.cancelBubble = true;
|
|
41
41
|
|
|
42
42
|
// Prevent view from bubbling to parent
|
|
43
43
|
view.bubbleParent = false;
|
|
44
44
|
```
|
|
45
45
|
|
|
46
|
-
|
|
46
|
+
Note: Each event type is handled separately. If the user lifting their finger triggers `touchend`, `singletap`, and `click`, setting `cancelBubble` on one does not affect the others.
|
|
47
47
|
|
|
48
|
-
### Bubbling
|
|
48
|
+
### Bubbling example
|
|
49
49
|
|
|
50
50
|
```javascript
|
|
51
51
|
const win = Ti.UI.createWindow({
|
|
@@ -79,11 +79,11 @@ container.add(button);
|
|
|
79
79
|
win.open();
|
|
80
80
|
```
|
|
81
81
|
|
|
82
|
-
|
|
82
|
+
Output order: Button -> Container -> Window
|
|
83
83
|
|
|
84
|
-
## 3. Firing
|
|
84
|
+
## 3. Firing events
|
|
85
85
|
|
|
86
|
-
### Fire
|
|
86
|
+
### Fire custom event
|
|
87
87
|
|
|
88
88
|
```javascript
|
|
89
89
|
// Fire event without data
|
|
@@ -102,7 +102,7 @@ button.addEventListener('customEvent', (e) => {
|
|
|
102
102
|
});
|
|
103
103
|
```
|
|
104
104
|
...
|
|
105
|
-
### Listening to
|
|
105
|
+
### Listening to app events
|
|
106
106
|
|
|
107
107
|
```javascript
|
|
108
108
|
// Listen anywhere in app
|
|
@@ -112,9 +112,9 @@ Ti.App.addEventListener('db_updated', (e) => {
|
|
|
112
112
|
});
|
|
113
113
|
```
|
|
114
114
|
|
|
115
|
-
### Memory
|
|
115
|
+
### Memory warning
|
|
116
116
|
|
|
117
|
-
Global event listeners persist for app lifetime
|
|
117
|
+
Global event listeners persist for the app lifetime and prevent garbage collection:
|
|
118
118
|
|
|
119
119
|
```javascript
|
|
120
120
|
// Good: Remove when done
|
|
@@ -124,9 +124,9 @@ Ti.App.addEventListener('myEvent', handler);
|
|
|
124
124
|
Ti.App.removeEventListener('myEvent', handler);
|
|
125
125
|
```
|
|
126
126
|
|
|
127
|
-
## 5. Touch
|
|
127
|
+
## 5. Touch events
|
|
128
128
|
|
|
129
|
-
### Touch
|
|
129
|
+
### Touch event lifecycle
|
|
130
130
|
|
|
131
131
|
```javascript
|
|
132
132
|
view.addEventListener('touchstart', (e) => {
|
|
@@ -146,19 +146,19 @@ view.addEventListener('touchcancel', (e) => {
|
|
|
146
146
|
});
|
|
147
147
|
```
|
|
148
148
|
|
|
149
|
-
### Touch
|
|
149
|
+
### Touch enabled
|
|
150
150
|
|
|
151
|
-
Views must have `touchEnabled: true` to react to touch events
|
|
151
|
+
Views must have `touchEnabled: true` to react to touch events. It is true by default for most components.
|
|
152
152
|
|
|
153
153
|
```javascript
|
|
154
154
|
view.touchEnabled = false; // Disable touch for this view
|
|
155
155
|
```
|
|
156
156
|
|
|
157
|
-
If a view has `touchEnabled: false`, touch events pass to next view in stack.
|
|
157
|
+
If a view has `touchEnabled: false`, touch events pass to the next view in the stack.
|
|
158
158
|
|
|
159
|
-
## 6. Named vs
|
|
159
|
+
## 6. Named vs anonymous functions
|
|
160
160
|
|
|
161
|
-
### Anonymous
|
|
161
|
+
### Anonymous function (one-time use)
|
|
162
162
|
|
|
163
163
|
```javascript
|
|
164
164
|
button.addEventListener('click', function(e) {
|
|
@@ -166,7 +166,7 @@ button.addEventListener('click', function(e) {
|
|
|
166
166
|
});
|
|
167
167
|
```
|
|
168
168
|
|
|
169
|
-
### Named
|
|
169
|
+
### Named function (reusable)
|
|
170
170
|
|
|
171
171
|
```javascript
|
|
172
172
|
function handleClick(e) {
|
|
@@ -180,9 +180,9 @@ button2.addEventListener('click', handleClick);
|
|
|
180
180
|
button1.removeEventListener('click', handleClick);
|
|
181
181
|
```
|
|
182
182
|
|
|
183
|
-
## 7. Removing
|
|
183
|
+
## 7. Removing event listeners
|
|
184
184
|
|
|
185
|
-
### Must
|
|
185
|
+
### Must match function reference
|
|
186
186
|
|
|
187
187
|
```javascript
|
|
188
188
|
function myHandler(e) {
|
|
@@ -194,13 +194,13 @@ button.addEventListener('click', myHandler);
|
|
|
194
194
|
button.removeEventListener('click', myHandler);
|
|
195
195
|
```
|
|
196
196
|
|
|
197
|
-
|
|
197
|
+
Important: Anonymous functions cannot be removed.
|
|
198
198
|
|
|
199
|
-
## 8. Android
|
|
199
|
+
## 8. Android hardware button events
|
|
200
200
|
|
|
201
|
-
### Available
|
|
201
|
+
### Available events
|
|
202
202
|
|
|
203
|
-
| Event | Fired
|
|
203
|
+
| Event | Fired when |
|
|
204
204
|
| ---------------- | ---------------------- |
|
|
205
205
|
| `androidback` | Back button released |
|
|
206
206
|
| `androidhome` | Home button released |
|
|
@@ -210,7 +210,7 @@ button.removeEventListener('click', myHandler);
|
|
|
210
210
|
| `androidvolup` | Volume-up released |
|
|
211
211
|
| `androidvoldown` | Volume-down released |
|
|
212
212
|
|
|
213
|
-
### Handling
|
|
213
|
+
### Handling back button
|
|
214
214
|
|
|
215
215
|
```javascript
|
|
216
216
|
const win = Ti.UI.createWindow({ backgroundColor: 'white' });
|
|
@@ -236,13 +236,13 @@ win.addEventListener('androidback', (e) => {
|
|
|
236
236
|
});
|
|
237
237
|
```
|
|
238
238
|
|
|
239
|
-
### Note: Window
|
|
239
|
+
### Note: Window types
|
|
240
240
|
|
|
241
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.
|
|
242
242
|
|
|
243
|
-
## 9. Android
|
|
243
|
+
## 9. Android menu
|
|
244
244
|
|
|
245
|
-
### Create
|
|
245
|
+
### Create options menu
|
|
246
246
|
|
|
247
247
|
```javascript
|
|
248
248
|
const activity = Ti.Android.currentActivity;
|
|
@@ -276,9 +276,9 @@ activity.onOptionsItemSelected = (e) => {
|
|
|
276
276
|
};
|
|
277
277
|
```
|
|
278
278
|
|
|
279
|
-
## 10. Event
|
|
279
|
+
## 10. Event listener best practices
|
|
280
280
|
|
|
281
|
-
### Define
|
|
281
|
+
### Define before the event may fire
|
|
282
282
|
|
|
283
283
|
```javascript
|
|
284
284
|
// GOOD: Define before opening
|
|
@@ -294,7 +294,7 @@ win.addEventListener('open', function(e) {
|
|
|
294
294
|
});
|
|
295
295
|
```
|
|
296
296
|
|
|
297
|
-
### Global
|
|
297
|
+
### Global event memory leaks
|
|
298
298
|
|
|
299
299
|
```javascript
|
|
300
300
|
// BAD: Global listener with local reference
|
|
@@ -320,7 +320,7 @@ function init() {
|
|
|
320
320
|
}
|
|
321
321
|
```
|
|
322
322
|
|
|
323
|
-
### Remove
|
|
323
|
+
### Remove listeners on window close
|
|
324
324
|
|
|
325
325
|
```javascript
|
|
326
326
|
const win = Ti.UI.createWindow();
|
|
@@ -333,16 +333,16 @@ win.addEventListener('close', () => {
|
|
|
333
333
|
});
|
|
334
334
|
```
|
|
335
335
|
|
|
336
|
-
## 11. Special
|
|
336
|
+
## 11. Special considerations
|
|
337
337
|
|
|
338
|
-
### Platform-
|
|
338
|
+
### Platform-specific events
|
|
339
339
|
|
|
340
340
|
Some events only work on certain platforms:
|
|
341
341
|
- `pinch` - iOS only
|
|
342
342
|
- `globalPoint` property - iOS only
|
|
343
343
|
- Hardware buttons - Android only
|
|
344
344
|
|
|
345
|
-
### Shake
|
|
345
|
+
### Shake event
|
|
346
346
|
|
|
347
347
|
The `Ti.Gesture` module enables listening for the `shake` event, which fires when the device detects a shake motion:
|
|
348
348
|
|
|
@@ -352,9 +352,9 @@ Ti.Gesture.addEventListener('shake', (e) => {
|
|
|
352
352
|
});
|
|
353
353
|
```
|
|
354
354
|
|
|
355
|
-
### Event
|
|
355
|
+
### Event naming
|
|
356
356
|
|
|
357
|
-
|
|
357
|
+
Warning: Do not use spaces in custom event names. It can break libraries like Backbone.js.
|
|
358
358
|
|
|
359
359
|
```javascript
|
|
360
360
|
// BAD
|
|
@@ -364,7 +364,7 @@ Ti.App.fireEvent('my event');
|
|
|
364
364
|
Ti.App.fireEvent('my_event');
|
|
365
365
|
```
|
|
366
366
|
|
|
367
|
-
### Custom
|
|
367
|
+
### Custom properties on events
|
|
368
368
|
|
|
369
369
|
```javascript
|
|
370
370
|
button.whichObj = 'button';
|
|
@@ -374,12 +374,12 @@ button.addEventListener('click', function(e) {
|
|
|
374
374
|
});
|
|
375
375
|
```
|
|
376
376
|
|
|
377
|
-
## Best
|
|
377
|
+
## Best practices summary
|
|
378
378
|
|
|
379
|
-
1.
|
|
380
|
-
2.
|
|
381
|
-
3.
|
|
382
|
-
4.
|
|
383
|
-
5.
|
|
384
|
-
6.
|
|
385
|
-
7.
|
|
379
|
+
1. Use app-level events for cross-context communication.
|
|
380
|
+
2. Remove global listeners when no longer needed.
|
|
381
|
+
3. Use named functions when you might need to remove listeners later.
|
|
382
|
+
4. Understand bubbling to control event propagation.
|
|
383
|
+
5. Define listeners early, before events are likely to fire.
|
|
384
|
+
6. Handle Android back button for custom navigation.
|
|
385
|
+
7. Test touch events on device. Simulator may not support all gestures.
|
|
@@ -2,17 +2,17 @@
|
|
|
2
2
|
|
|
3
3
|
## 1. Overview
|
|
4
4
|
|
|
5
|
-
Titanium supports
|
|
6
|
-
-
|
|
7
|
-
-
|
|
8
|
-
-
|
|
9
|
-
-
|
|
10
|
-
-
|
|
11
|
-
-
|
|
5
|
+
Titanium supports more than simple taps.
|
|
6
|
+
- Touch events for low-level tracking.
|
|
7
|
+
- Swipe for left and right drags.
|
|
8
|
+
- Pinch for zoom (iOS only).
|
|
9
|
+
- Long press for extended presses.
|
|
10
|
+
- Shake for device shake detection.
|
|
11
|
+
- Accelerometer for device orientation and movement.
|
|
12
12
|
|
|
13
|
-
## 2. Touch
|
|
13
|
+
## 2. Touch events
|
|
14
14
|
|
|
15
|
-
### Touch
|
|
15
|
+
### Touch lifecycle
|
|
16
16
|
|
|
17
17
|
```javascript
|
|
18
18
|
const view = Ti.UI.createView({
|
|
@@ -37,7 +37,7 @@ view.addEventListener('touchcancel', (e) => {
|
|
|
37
37
|
});
|
|
38
38
|
```
|
|
39
39
|
|
|
40
|
-
### Touch
|
|
40
|
+
### Touch event properties
|
|
41
41
|
|
|
42
42
|
| Property | Description |
|
|
43
43
|
| ------------- | ---------------------------------------- |
|
|
@@ -45,13 +45,13 @@ view.addEventListener('touchcancel', (e) => {
|
|
|
45
45
|
| `y` | Y coordinate in view's coordinate system |
|
|
46
46
|
| `globalPoint` | Screen coordinates (iOS only) |
|
|
47
47
|
|
|
48
|
-
### Android
|
|
48
|
+
### Android note
|
|
49
49
|
|
|
50
|
-
On Android, `longpress` and `swipe` cancel touch events
|
|
50
|
+
On Android, `longpress` and `swipe` cancel touch events. `touchend` may not fire after `touchstart`.
|
|
51
51
|
|
|
52
|
-
## 3. Swipe
|
|
52
|
+
## 3. Swipe gesture
|
|
53
53
|
|
|
54
|
-
### Basic
|
|
54
|
+
### Basic swipe
|
|
55
55
|
|
|
56
56
|
```javascript
|
|
57
57
|
const view = Ti.UI.createView({
|
|
@@ -66,7 +66,7 @@ view.addEventListener('swipe', (e) => {
|
|
|
66
66
|
});
|
|
67
67
|
```
|
|
68
68
|
|
|
69
|
-
### Swipe
|
|
69
|
+
### Swipe direction detection
|
|
70
70
|
|
|
71
71
|
```javascript
|
|
72
72
|
view.addEventListener('swipe', (e) => {
|
|
@@ -89,12 +89,12 @@ view.addEventListener('swipe', (e) => {
|
|
|
89
89
|
});
|
|
90
90
|
```
|
|
91
91
|
|
|
92
|
-
### Swipe vs
|
|
92
|
+
### Swipe vs scroll
|
|
93
93
|
|
|
94
|
-
-
|
|
95
|
-
-
|
|
94
|
+
- Swipe is a quick flick, usually left or right.
|
|
95
|
+
- Scroll is a sustained drag, usually up or down.
|
|
96
96
|
|
|
97
|
-
## 4. Pinch
|
|
97
|
+
## 4. Pinch gesture (iOS only)
|
|
98
98
|
|
|
99
99
|
```javascript
|
|
100
100
|
const view = Ti.UI.createView({
|
|
@@ -109,7 +109,7 @@ view.addEventListener('pinch', (e) => {
|
|
|
109
109
|
});
|
|
110
110
|
```
|
|
111
111
|
|
|
112
|
-
### Pinch to
|
|
112
|
+
### Pinch to zoom
|
|
113
113
|
|
|
114
114
|
```javascript
|
|
115
115
|
const imageView = Ti.UI.createImageView({
|
|
@@ -125,9 +125,9 @@ imageView.addEventListener('pinch', (e) => {
|
|
|
125
125
|
});
|
|
126
126
|
```
|
|
127
127
|
|
|
128
|
-
## 5. Long
|
|
128
|
+
## 5. Long press gesture
|
|
129
129
|
|
|
130
|
-
### Basic
|
|
130
|
+
### Basic long press
|
|
131
131
|
|
|
132
132
|
```javascript
|
|
133
133
|
const view = Ti.UI.createView({
|
|
@@ -141,9 +141,9 @@ view.addEventListener('longpress', (e) => {
|
|
|
141
141
|
});
|
|
142
142
|
```
|
|
143
143
|
|
|
144
|
-
### Long
|
|
144
|
+
### Long press duration
|
|
145
145
|
|
|
146
|
-
Default
|
|
146
|
+
Default duration varies by platform. You can roll your own:
|
|
147
147
|
|
|
148
148
|
```javascript
|
|
149
149
|
let pressTimer = null;
|
|
@@ -171,9 +171,9 @@ view.addEventListener('touchmove', () => {
|
|
|
171
171
|
});
|
|
172
172
|
```
|
|
173
173
|
|
|
174
|
-
### Android
|
|
174
|
+
### Android long press convention
|
|
175
175
|
|
|
176
|
-
On Android, long press
|
|
176
|
+
On Android, long press usually shows a context menu:
|
|
177
177
|
|
|
178
178
|
```javascript
|
|
179
179
|
view.addEventListener('longpress', (e) => {
|
|
@@ -193,9 +193,9 @@ view.addEventListener('longpress', (e) => {
|
|
|
193
193
|
});
|
|
194
194
|
```
|
|
195
195
|
|
|
196
|
-
## 6. Shake
|
|
196
|
+
## 6. Shake gesture
|
|
197
197
|
|
|
198
|
-
### Detecting
|
|
198
|
+
### Detecting shake
|
|
199
199
|
|
|
200
200
|
```javascript
|
|
201
201
|
Ti.Gesture.addEventListener('shake', (e) => {
|
|
@@ -206,7 +206,7 @@ Ti.Gesture.addEventListener('shake', (e) => {
|
|
|
206
206
|
});
|
|
207
207
|
```
|
|
208
208
|
|
|
209
|
-
### Shake
|
|
209
|
+
### Shake example
|
|
210
210
|
|
|
211
211
|
```javascript
|
|
212
212
|
// Use shake to refresh data
|
|
@@ -225,15 +225,15 @@ function loadDataFromServer() {
|
|
|
225
225
|
}
|
|
226
226
|
```
|
|
227
227
|
|
|
228
|
-
### Testing
|
|
228
|
+
### Testing shake
|
|
229
229
|
|
|
230
|
-
-
|
|
231
|
-
-
|
|
232
|
-
-
|
|
230
|
+
- iOS Simulator: Hardware > Shake Device
|
|
231
|
+
- Android Emulator: not supported, test on physical device
|
|
232
|
+
- Physical device: shake the device
|
|
233
233
|
|
|
234
|
-
## 7. Accelerometer as
|
|
234
|
+
## 7. Accelerometer as input
|
|
235
235
|
|
|
236
|
-
### Basic
|
|
236
|
+
### Basic accelerometer
|
|
237
237
|
|
|
238
238
|
```javascript
|
|
239
239
|
const labelX = Ti.UI.createLabel({ text: 'X: 0' });
|
|
@@ -247,7 +247,7 @@ Ti.Accelerometer.addEventListener('update', (e) => {
|
|
|
247
247
|
});
|
|
248
248
|
```
|
|
249
249
|
|
|
250
|
-
### Accelerometer
|
|
250
|
+
### Accelerometer properties
|
|
251
251
|
|
|
252
252
|
| Property | Description | Range |
|
|
253
253
|
| ----------- | ------------------- | -------------------- |
|
|
@@ -256,7 +256,7 @@ Ti.Accelerometer.addEventListener('update', (e) => {
|
|
|
256
256
|
| `z` | Z-axis acceleration | G-force |
|
|
257
257
|
| `timestamp` | When event occurred | Timestamp |
|
|
258
258
|
|
|
259
|
-
### Using
|
|
259
|
+
### Using accelerometer for control
|
|
260
260
|
|
|
261
261
|
```javascript
|
|
262
262
|
const sensitivity = 2.0;
|
|
@@ -279,9 +279,9 @@ Ti.Accelerometer.addEventListener('update', (e) => {
|
|
|
279
279
|
});
|
|
280
280
|
```
|
|
281
281
|
|
|
282
|
-
### Smoothing
|
|
282
|
+
### Smoothing accelerometer data
|
|
283
283
|
|
|
284
|
-
Accelerometer data is
|
|
284
|
+
Accelerometer data is noisy. Smooth it:
|
|
285
285
|
|
|
286
286
|
```javascript
|
|
287
287
|
let samples = [];
|
|
@@ -305,13 +305,11 @@ Ti.Accelerometer.addEventListener('update', (e) => {
|
|
|
305
305
|
});
|
|
306
306
|
```
|
|
307
307
|
|
|
308
|
-
## 8. Gesture
|
|
308
|
+
## 8. Gesture lifecycle management
|
|
309
309
|
|
|
310
|
-
### Battery
|
|
310
|
+
### Battery considerations
|
|
311
311
|
|
|
312
|
-
Global gesture events (`Ti.Gesture`, `Ti.Accelerometer`) keep hardware powered and drain battery.
|
|
313
|
-
|
|
314
|
-
**Always remove listeners when not needed:**
|
|
312
|
+
Global gesture events (`Ti.Gesture`, `Ti.Accelerometer`) keep hardware powered and drain battery. Remove listeners when not needed.
|
|
315
313
|
|
|
316
314
|
```javascript
|
|
317
315
|
let accelerometerAdded = false;
|
|
@@ -345,35 +343,35 @@ if (Ti.Platform.osname === 'android') {
|
|
|
345
343
|
}
|
|
346
344
|
```
|
|
347
345
|
|
|
348
|
-
## 9. Platform-
|
|
346
|
+
## 9. Platform-specific considerations
|
|
349
347
|
|
|
350
348
|
### iOS
|
|
351
349
|
|
|
352
|
-
-
|
|
353
|
-
-
|
|
354
|
-
-
|
|
355
|
-
-
|
|
350
|
+
- Pinch is fully supported.
|
|
351
|
+
- Simulator shake: Hardware > Shake Device.
|
|
352
|
+
- More touch events are supported.
|
|
353
|
+
- Gesture recognition is smoother.
|
|
356
354
|
|
|
357
355
|
### Android
|
|
358
356
|
|
|
359
|
-
-
|
|
360
|
-
-
|
|
361
|
-
-
|
|
362
|
-
-
|
|
357
|
+
- Pinch support is limited or experimental.
|
|
358
|
+
- No simulator shake. Test on device.
|
|
359
|
+
- Long press opens context menus (standard pattern).
|
|
360
|
+
- Hardware button events are available.
|
|
363
361
|
|
|
364
|
-
## 10. Best
|
|
362
|
+
## 10. Best practices
|
|
365
363
|
|
|
366
|
-
1.
|
|
367
|
-
2.
|
|
368
|
-
3.
|
|
369
|
-
4.
|
|
370
|
-
5.
|
|
371
|
-
6.
|
|
372
|
-
7.
|
|
364
|
+
1. Test on physical devices. Simulators do not support all gestures.
|
|
365
|
+
2. Remove global gesture listeners when not needed to save battery.
|
|
366
|
+
3. Smooth accelerometer data with averaging.
|
|
367
|
+
4. Use the right gesture for the task. Long press for context menus, swipe for navigation.
|
|
368
|
+
5. Consider accessibility. Make sure gestures do not conflict with screen readers.
|
|
369
|
+
6. Handle edge cases like touch cancel and gesture interruptions.
|
|
370
|
+
7. Provide alternatives. Not all users can perform all gestures.
|
|
373
371
|
|
|
374
|
-
## 11. Combining
|
|
372
|
+
## 11. Combining gestures
|
|
375
373
|
|
|
376
|
-
### Multiple
|
|
374
|
+
### Multiple gesture types
|
|
377
375
|
|
|
378
376
|
```javascript
|
|
379
377
|
const view = Ti.UI.createView({
|
|
@@ -410,7 +408,7 @@ view.addEventListener('pinch', (e) => {
|
|
|
410
408
|
});
|
|
411
409
|
```
|
|
412
410
|
|
|
413
|
-
### Preventing
|
|
411
|
+
### Preventing gesture conflicts
|
|
414
412
|
|
|
415
413
|
```javascript
|
|
416
414
|
let touchStartTime = 0;
|