@maccesar/titools 2.2.4 → 2.2.9

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.
Files changed (98) hide show
  1. package/README.md +23 -23
  2. package/agents/ti-pro.md +17 -17
  3. package/lib/commands/update.js +6 -14
  4. package/lib/downloader.js +17 -2
  5. package/package.json +1 -1
  6. package/skills/alloy-guides/SKILL.md +31 -31
  7. package/skills/alloy-guides/references/CONCEPTS.md +3 -3
  8. package/skills/alloy-guides/references/CONTROLLERS.md +1 -1
  9. package/skills/alloy-guides/references/MODELS.md +6 -6
  10. package/skills/alloy-guides/references/VIEWS_WITHOUT_CONTROLLERS.md +1 -1
  11. package/skills/alloy-guides/references/VIEWS_XML.md +1 -1
  12. package/skills/alloy-guides/references/WIDGETS.md +1 -1
  13. package/skills/alloy-howtos/SKILL.md +27 -27
  14. package/skills/alloy-howtos/references/best_practices.md +9 -9
  15. package/skills/alloy-howtos/references/cli_reference.md +14 -14
  16. package/skills/alloy-howtos/references/config_files.md +16 -16
  17. package/skills/alloy-howtos/references/custom_tags.md +16 -16
  18. package/skills/alloy-howtos/references/debugging_troubleshooting.md +11 -15
  19. package/skills/alloy-howtos/references/samples.md +19 -19
  20. package/skills/purgetss/SKILL.md +11 -1
  21. package/skills/purgetss/references/animation-system.md +1 -1
  22. package/skills/purgetss/references/cli-commands.md +3 -3
  23. package/skills/purgetss/references/customization-deep-dive.md +1 -1
  24. package/skills/purgetss/references/dynamic-component-creation.md +1 -1
  25. package/skills/purgetss/references/icon-fonts.md +4 -0
  26. package/skills/purgetss/references/installation-setup.md +8 -1
  27. package/skills/purgetss/references/migration-guide.md +4 -0
  28. package/skills/purgetss/references/tikit-components.md +193 -204
  29. package/skills/purgetss/references/ui-ux-design.md +1 -1
  30. package/skills/ti-expert/SKILL.md +78 -118
  31. package/skills/ti-expert/references/alloy-builtins.md +18 -18
  32. package/skills/ti-expert/references/alloy-structure.md +21 -21
  33. package/skills/ti-expert/references/anti-patterns.md +15 -15
  34. package/skills/ti-expert/references/cli-expert.md +15 -15
  35. package/skills/ti-expert/references/code-conventions.md +38 -38
  36. package/skills/ti-expert/references/contracts.md +8 -8
  37. package/skills/ti-expert/references/controller-patterns.md +14 -14
  38. package/skills/ti-expert/references/error-handling.md +11 -11
  39. package/skills/ti-expert/references/examples.md +12 -12
  40. package/skills/ti-expert/references/migration-patterns.md +24 -24
  41. package/skills/ti-expert/references/patterns.md +10 -10
  42. package/skills/ti-expert/references/performance-listview.md +16 -16
  43. package/skills/ti-expert/references/performance-optimization.md +41 -41
  44. package/skills/ti-expert/references/security-device.md +22 -22
  45. package/skills/ti-expert/references/security-fundamentals.md +19 -19
  46. package/skills/ti-expert/references/state-management.md +33 -33
  47. package/skills/ti-expert/references/testing-e2e-ci.md +25 -25
  48. package/skills/ti-expert/references/testing-unit.md +24 -24
  49. package/skills/ti-expert/references/theming.md +15 -15
  50. package/skills/ti-guides/SKILL.md +58 -60
  51. package/skills/ti-guides/references/advanced-data-and-images.md +33 -33
  52. package/skills/ti-guides/references/android-manifest.md +15 -15
  53. package/skills/ti-guides/references/app-distribution.md +70 -166
  54. package/skills/ti-guides/references/application-frameworks.md +96 -114
  55. package/skills/ti-guides/references/cli-reference.md +294 -294
  56. package/skills/ti-guides/references/coding-best-practices.md +42 -33
  57. package/skills/ti-guides/references/commonjs-advanced.md +57 -51
  58. package/skills/ti-guides/references/hello-world.md +36 -36
  59. package/skills/ti-guides/references/hyperloop-native-access.md +66 -66
  60. package/skills/ti-guides/references/javascript-primer.md +83 -101
  61. package/skills/ti-guides/references/reserved-words.md +9 -9
  62. package/skills/ti-guides/references/resources.md +75 -83
  63. package/skills/ti-guides/references/style-and-conventions.md +35 -28
  64. package/skills/ti-guides/references/tiapp-config.md +110 -74
  65. package/skills/ti-howtos/SKILL.md +88 -92
  66. package/skills/ti-howtos/references/android-platform-deep-dives.md +104 -104
  67. package/skills/ti-howtos/references/automation-fastlane-appium.md +39 -39
  68. package/skills/ti-howtos/references/buffer-codec-streams.md +60 -60
  69. package/skills/ti-howtos/references/cross-platform-development.md +115 -136
  70. package/skills/ti-howtos/references/debugging-profiling.md +167 -181
  71. package/skills/ti-howtos/references/extending-titanium.md +121 -121
  72. package/skills/ti-howtos/references/google-maps-v2.md +84 -82
  73. package/skills/ti-howtos/references/ios-map-kit.md +65 -60
  74. package/skills/ti-howtos/references/ios-platform-deep-dives.md +123 -123
  75. package/skills/ti-howtos/references/local-data-sources.md +79 -78
  76. package/skills/ti-howtos/references/location-and-maps.md +116 -120
  77. package/skills/ti-howtos/references/media-apis.md +87 -86
  78. package/skills/ti-howtos/references/notification-services.md +250 -260
  79. package/skills/ti-howtos/references/remote-data-sources.md +98 -93
  80. package/skills/ti-howtos/references/tutorials.md +226 -216
  81. package/skills/ti-howtos/references/using-modules.md +73 -102
  82. package/skills/ti-howtos/references/web-content-integration.md +101 -103
  83. package/skills/ti-howtos/references/webpack-build-pipeline.md +52 -44
  84. package/skills/ti-ui/SKILL.md +85 -85
  85. package/skills/ti-ui/references/accessibility-deep-dive.md +57 -57
  86. package/skills/ti-ui/references/animation-and-matrices.md +79 -79
  87. package/skills/ti-ui/references/application-structures.md +96 -99
  88. package/skills/ti-ui/references/custom-fonts-styling.md +99 -99
  89. package/skills/ti-ui/references/event-handling.md +58 -58
  90. package/skills/ti-ui/references/gestures.md +62 -64
  91. package/skills/ti-ui/references/icons-and-splash-screens.md +88 -88
  92. package/skills/ti-ui/references/layouts-and-positioning.md +87 -97
  93. package/skills/ti-ui/references/listviews-and-performance.md +107 -107
  94. package/skills/ti-ui/references/orientation.md +87 -88
  95. package/skills/ti-ui/references/platform-ui-android.md +87 -81
  96. package/skills/ti-ui/references/platform-ui-ios.md +63 -61
  97. package/skills/ti-ui/references/scrolling-views.md +29 -29
  98. package/skills/ti-ui/references/tableviews.md +56 -56
@@ -1,13 +1,13 @@
1
- # Using Modules
1
+ # Using modules
2
2
 
3
- Guide for obtaining, installing, and using Titanium modules to extend app functionality.
3
+ Guide to obtaining, installing, and using Titanium modules to extend app functionality.
4
4
 
5
- ## Obtaining Modules
5
+ ## Obtaining modules
6
6
 
7
- ### Sources of Modules
7
+ ### Sources of modules
8
8
 
9
- **Official Modules:**
10
- - **Enterprise Extensions**
9
+ Official modules:
10
+ - Enterprise Extensions
11
11
  - InAppBilling (Android)
12
12
  - StoreKit (iOS)
13
13
  - Barcode (iOS/Android)
@@ -15,43 +15,39 @@ Guide for obtaining, installing, and using Titanium modules to extend app functi
15
15
  - OpenGL (iOS)
16
16
  - AirPrint (iOS)
17
17
 
18
- **Open-Source Modules:**
19
- - **GitHub: tidev/** - Official open-source modules
20
- - [ti.admob](https://github.com/tidev/ti.admob) - AdMob ads
21
- - [ti.map](https://github.com/tidev/ti.map) - Native maps
22
- - And many more
18
+ Open-source modules:
19
+ - GitHub: tidev
20
+ - https://github.com/tidev/ti.admob - AdMob ads
21
+ - https://github.com/tidev/ti.map - Native maps
22
+ - And more in the org
23
23
 
24
- **Community Modules:**
25
- - **From Zero To App** - Lists Titanium modules
26
- - https://fromzerotoapp.com/modules/
24
+ Community modules:
25
+ - From Zero To App list: https://fromzerotoapp.com/modules/
27
26
  - Curated list of modules maintained by Michael Gangolf
28
27
 
29
- **Marketplace:**
30
- > **Note**: The original Appcelerator Marketplace is no longer available. Find community modules on GitHub and npm. A curated list is at [From Zero to App](https://fromzerotoapp.com/modules/).
28
+ Marketplace:
29
+ The original Appcelerator Marketplace is no longer available. Find community modules on GitHub and npm. A curated list is at https://fromzerotoapp.com/modules/.
31
30
 
32
- ### Pre-installed Modules
33
- Some modules ship with the SDK and don't need separate installation: `ti.map`, `ti.identity`, `ti.webdialog`, `ti.applesignin`
31
+ ### Pre-installed modules
32
+ Some modules ship with the SDK and do not need separate installation: `ti.map`, `ti.identity`, `ti.webdialog`, `ti.applesignin`.
34
33
 
35
- ---
34
+ ## Installing modules
36
35
 
37
- ## Installing Modules
36
+ ### Single project installation
37
+ 1. Copy the module ZIP to your app root folder.
38
+ 2. Add the module to `tiapp.xml` (see configuration below).
39
+ 3. Build the project. The ZIP is extracted automatically.
38
40
 
39
- ### Single Project Installation
41
+ ### Global installation (all projects)
42
+ Modules install to platform-specific locations:
40
43
 
41
- 1. Copy the module ZIP to your app root folder
42
- 2. Add module to `tiapp.xml` (see configuration below)
43
- 3. Build project - ZIP will be extracted automatically
44
-
45
- ### Global Installation (All Projects)
46
-
47
- Modules are installed to platform-specific locations:
48
-
49
- | Operating System | Path |
44
+ | Operating system | Path |
50
45
  | ---------------- | ---------------------------------------- |
51
46
  | macOS | `~/Library/Application Support/Titanium` |
52
47
  | Windows | `%ProgramData%\Titanium\mobilesdk\win32` |
53
48
 
54
- **Show hidden Library folder on macOS:**
49
+ Show hidden Library folder on macOS:
50
+
55
51
  ```bash
56
52
  # Permanently show
57
53
  chflags nohidden ~/Library/
@@ -60,20 +56,19 @@ chflags nohidden ~/Library/
60
56
  open ~/Library
61
57
  ```
62
58
 
63
- ---
64
-
65
- ## Configuring Your App
59
+ ## Configuring your app
66
60
 
67
61
  ### Updating tiapp.xml
68
62
 
69
- **Using Studio/IDE:**
70
- 1. Open `tiapp.xml`
71
- 2. Go to **Overview** tab
72
- 3. Click **+** button in Modules section
73
- 4. Select module and version
74
- 5. Save
63
+ Using Studio/IDE:
64
+ 1. Open `tiapp.xml`.
65
+ 2. Go to the Overview tab.
66
+ 3. Click the plus button in Modules.
67
+ 4. Select module and version.
68
+ 5. Save.
69
+
70
+ Manually (XML):
75
71
 
76
- **Manually (XML):**
77
72
  ```xml
78
73
  <modules>
79
74
  <module version="3.0.2" platform="ios">ti.map</module>
@@ -81,18 +76,16 @@ open ~/Library
81
76
  </modules>
82
77
  ```
83
78
 
84
- **Attributes:**
85
- - `version` - Must match module manifest
86
- - `platform` - "ios" or "android"
87
-
88
- ### Selecting Module Versions
89
-
90
- When multiple versions are installed, you can select specific versions per platform and build type (development/production).
79
+ Attributes:
80
+ - `version`: must match the module manifest
81
+ - `platform`: "ios" or "android"
91
82
 
92
- In Studio, double-click the module to open **Module Properties** dialog.
83
+ ### Selecting module versions
84
+ If multiple versions are installed, select specific versions per platform and build type (development/production).
93
85
 
94
- ### Enable Debugger (for native modules)
86
+ In Studio, double-click the module to open the Module Properties dialog.
95
87
 
88
+ ### Enable debugger (for native modules)
96
89
  Required for debugging native modules:
97
90
 
98
91
  ```xml
@@ -106,28 +99,25 @@ Required for debugging native modules:
106
99
  </ti:app>
107
100
  ```
108
101
 
109
- ---
102
+ ## Using a module
110
103
 
111
- ## Using a Module
112
-
113
- ### Loading the Module (ES5)
104
+ ### Loading the module (ES5)
114
105
 
115
106
  ```javascript
116
107
  const Module = require('module.id');
117
108
  // Example: const Map = require('ti.map');
118
109
  ```
119
110
 
120
- ### Loading the Module (ES6+)
111
+ ### Loading the module (ES6+)
121
112
 
122
113
  ```javascript
123
114
  import Module from 'module.id'
124
115
  // Example: import Map from 'ti.map'
125
116
  ```
126
117
 
127
- **Important:** Don't include `.js` extension in the module ID.
128
-
129
- ### Using Module Functionality
118
+ Important: do not include the `.js` extension in the module ID.
130
119
 
120
+ ### Using module functionality
131
121
  After requiring, use the module's API:
132
122
 
133
123
  ```javascript
@@ -135,55 +125,49 @@ After requiring, use the module's API:
135
125
  const Admob = require('ti.admob');
136
126
 
137
127
  const adview = Admob.createView({
138
- top: 0,
139
- testing: true,
140
- adBackgroundColor: 'black',
141
- primaryTextColor: 'blue',
142
- publisherId: 'YOUR_PUBLISHER_ID'
128
+ top: 0,
129
+ testing: true,
130
+ adBackgroundColor: 'black',
131
+ primaryTextColor: 'blue',
132
+ publisherId: 'YOUR_PUBLISHER_ID'
143
133
  });
144
134
 
145
135
  win.add(adview);
146
136
  ```
147
137
 
148
- ### Module Patterns
138
+ ### Module patterns
149
139
 
150
- **Singleton pattern:**
140
+ Singleton pattern:
151
141
  ```javascript
152
142
  const admob = require('ti.admob');
153
- admob.createView({...});
143
+ admob.createView({ ... });
154
144
  ```
155
145
 
156
- **Constructor pattern:**
146
+ Constructor pattern:
157
147
  ```javascript
158
148
  const Map = require('ti.map');
159
- const view = Map.createView({...});
149
+ const view = Map.createView({ ... });
160
150
  ```
161
151
 
162
152
  Refer to module documentation for its specific API.
163
153
 
164
- ---
165
-
166
154
  ## Troubleshooting
167
155
 
168
156
  ### "Requested module not found"
157
+ Solutions:
158
+ 1. Check module ID spelling in `require()`.
159
+ 2. Verify the module is added to `tiapp.xml`.
160
+ 3. Confirm the module is installed (global or local path).
161
+ 4. Remove the `version` attribute to use the latest version.
169
162
 
170
- **Solutions:**
171
- 1. Check module ID spelling in `require()`
172
- 2. Verify module is added to `tiapp.xml`
173
- 3. Confirm module is installed (check global or local path)
174
- 4. Remove `version` attribute to use latest version
175
-
176
- ### Version Conflicts
177
-
178
- If multiple versions exist, specify exact version in `tiapp.xml` or remove version attribute to use latest.
179
-
180
- ### Platform-Specific Issues
181
-
182
- - **iOS:** Module must support iOS SDK version you're using
183
- - **Android:** Check module's `platform` attribute in manifest matches target
163
+ ### Version conflicts
164
+ If multiple versions exist, specify the exact version in `tiapp.xml`, or remove the version attribute to use the latest.
184
165
 
185
- ### Clean Build
166
+ ### Platform-specific issues
167
+ - iOS: the module must support the iOS SDK version you are using.
168
+ - Android: the module manifest `platform` must match the target.
186
169
 
170
+ ### Clean build
187
171
  Sometimes needed after installing modules:
188
172
 
189
173
  ```bash
@@ -191,21 +175,8 @@ Sometimes needed after installing modules:
191
175
  ti clean
192
176
  ```
193
177
 
194
- ---
195
-
196
- ## Best Practices
197
-
198
- 1. **Version pinning** - Specify exact module versions for production
199
- 2. **Check compatibility** - Verify module supports your Titanium SDK version
200
- 3. **Test on devices** - Modules may behave differently on simulator vs. device
201
- 4. **Keep updated** - Update modules regularly for bug fixes and new features
202
- 5. **Read documentation** - Each module has specific setup and usage patterns
203
-
204
- ---
205
-
206
- ## Module Development
178
+ ## Best practices
207
179
 
208
- If you need to create your own module, see the **extending-titanium.md** reference for:
209
- - Android Module Development Guide
210
- - iOS Module Development Guide
211
- - Module architecture and best practices
180
+ 1. Pin versions for production.
181
+ 2. Check compatibility with your Titanium SDK version.
182
+ 3. Test on devices. Some modules behave differently on simulator vs device.
@@ -1,14 +1,13 @@
1
- # Web Content Integration
1
+ # Web content integration
2
2
 
3
- ## 1. The WebView Component
3
+ ## 1. The WebView component
4
4
 
5
5
  ### WKWebView (Titanium SDK 8.0.0+)
6
+ As of Titanium SDK 8.0.0, WKWebView is the only supported web view on iOS. UIWebView was deprecated and removed. WKWebView behaves differently, so plan for that.
6
7
 
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.
8
+ ### Basic WebView creation
8
9
 
9
- ### Basic WebView Creation
10
-
11
- #### Remote URL
10
+ Remote URL:
12
11
  ```javascript
13
12
  const webview = Ti.UI.createWebView({
14
13
  url: 'https://titaniumsdk.com'
@@ -17,26 +16,25 @@ win.add(webview);
17
16
  win.open();
18
17
  ```
19
18
 
20
- #### Local HTML
19
+ Local HTML:
21
20
  ```javascript
22
21
  const webview = Ti.UI.createWebView({
23
- url: 'local.html' // Relative to Resources or app/assets/app/lib
22
+ url: 'local.html' // Relative to Resources or app/assets/app/lib
24
23
  });
25
24
  win.add(webview);
26
25
  ```
27
26
 
28
- #### Inline HTML
27
+ Inline HTML:
29
28
  ```javascript
30
29
  const webview = Ti.UI.createWebView({
31
30
  html: '<html><body><h1>Hello</h1></body></html>'
32
31
  });
33
32
  ```
34
33
 
35
- ### Local Web Content with Assets
36
-
34
+ ### Local web content with assets
37
35
  Local content can include CSS, JS, and images. Paths are relative to Resources (Classic) or app/assets/app/lib (Alloy).
38
36
 
39
- **local.html**:
37
+ `local.html`:
40
38
  ```html
41
39
  <html>
42
40
  <head>
@@ -49,40 +47,41 @@ Local content can include CSS, JS, and images. Paths are relative to Resources (
49
47
  </html>
50
48
  ```
51
49
 
52
- ### WebView Properties and Methods
50
+ ### WebView properties and methods
51
+
52
+ Navigation:
53
+ - `canGoBack()` - returns true if possible to go back
54
+ - `canGoForward()` - returns true if possible to go forward
55
+ - `goBack()` - navigate back in history
56
+ - `goForward()` - navigate forward in history
53
57
 
54
- #### Navigation
55
- - `canGoBack()` - Returns Boolean if possible to go back
56
- - `canGoForward()` - Returns Boolean if possible to go forward
57
- - `goBack()` - Navigate back in history
58
- - `goForward()` - Navigate forward in history
58
+ Load control:
59
+ - `loading` (Boolean) - current loading state
60
+ - `reload()` - refresh the page
61
+ - `stopLoading()` - stop loading
62
+ - `repaint()` - force repaint
59
63
 
60
- #### Load Control
61
- - `loading` (Boolean) - Current loading state
62
- - `reload()` - Refresh the page
63
- - `stopLoading()` - Stop loading
64
- - `repaint()` - Force repaint
64
+ Data handling:
65
+ - `url` - local or remote URL
66
+ - `html` - inline HTML string
67
+ - `scalesPageToFit` - scale content to dimensions
68
+ - `setBasicAuthentication(host, username, password)` - HTTP auth
65
69
 
66
- #### Data Handling
67
- - `url` - Local or remote URL
68
- - `html` - Inline HTML string
69
- - `scalesPageToFit` - Boolean to scale content to dimensions
70
- - `setBasicAuthentication(host, username, password)` - HTTP authentication
71
- ```javascript
72
- webView.setBasicAuthentication('myDomain.com', 'username', 'password');
73
- ```
70
+ ```javascript
71
+ webView.setBasicAuthentication('myDomain.com', 'username', 'password');
72
+ ```
74
73
 
75
- #### Events
76
- - `beforeload` - Fires before loading begins (`e.url` contains the source)
77
- - `load` - Fires when content has loaded
78
- - `error` - Fires on load failures (`e.url`, `e.message`)
74
+ Events:
75
+ - `beforeload` - fires before loading begins (`e.url` contains the source)
76
+ - `load` - fires when content has loaded
77
+ - `error` - fires on load failures (`e.url`, `e.message`)
79
78
 
80
- ## 2. Communication Between WebViews and Titanium
79
+ ## 2. Communication between WebViews and Titanium
81
80
 
82
- ### Local Web Content Communication
81
+ ### Local web content communication
83
82
 
84
- #### Logging from WebView
85
- Ti.API methods work inside local HTML:
83
+ Logging from WebView:
84
+ Ti.API methods work inside local HTML.
86
85
 
87
86
  ```html
88
87
  <html>
@@ -92,9 +91,9 @@ Ti.API methods work inside local HTML:
92
91
  </html>
93
92
  ```
94
93
 
95
- #### Bidirectional Events with Ti.App
94
+ Bidirectional events with `Ti.App`:
96
95
 
97
- **In local HTML**:
96
+ In local HTML:
98
97
  ```html
99
98
  <html>
100
99
  <head>
@@ -120,7 +119,7 @@ Ti.API methods work inside local HTML:
120
119
  </html>
121
120
  ```
122
121
 
123
- **In Titanium**:
122
+ In Titanium:
124
123
  ```javascript
125
124
  const webview = Ti.UI.createWebView({ url: 'local.html' });
126
125
 
@@ -140,14 +139,13 @@ button.addEventListener('click', () => {
140
139
  });
141
140
  ```
142
141
 
143
- ### Remote Web Content Communication
144
-
145
- **Critical**: Titanium statements (Ti.API, Ti.App) do NOT work in remote HTML content.
142
+ ### Remote web content communication
146
143
 
147
- > **Warning**: On iOS 12.0+, calling `evalJS()` synchronously from certain contexts can cause a deadlock. Always prefer the callback-based async version.
144
+ Titanium statements (`Ti.API`, `Ti.App`) do not work in remote HTML content.
148
145
 
149
- #### Using evalJS() for Remote Content
146
+ Warning: On iOS 12.0+, calling `evalJS()` synchronously from some contexts can deadlock. Prefer the async version with a callback.
150
147
 
148
+ #### Using `evalJS()` for remote content
151
149
  Inject JavaScript and retrieve results as strings:
152
150
 
153
151
  ```javascript
@@ -167,13 +165,13 @@ webview.addEventListener('load', (e) => {
167
165
  });
168
166
  ```
169
167
 
170
- **evalJS() Rules**:
171
- - Must be called from the `load` event (page must be loaded)
168
+ `evalJS()` rules:
169
+ - Call it from the `load` event (page must be loaded)
172
170
  - Pass code as a single string
173
171
  - Returns a string (or null)
174
172
  - Use `JSON.stringify()` for complex data
175
173
 
176
- #### Passing Data to Remote Content
174
+ #### Passing data to remote content
177
175
 
178
176
  ```javascript
179
177
  webview.addEventListener('load', () => {
@@ -182,59 +180,55 @@ webview.addEventListener('load', () => {
182
180
  });
183
181
  ```
184
182
 
185
- Then in the remote HTML:
183
+ Then in remote HTML:
186
184
  ```html
187
185
  <script>
188
- console.log(window.appData.user); // 'John'
186
+ console.log(window.appData.user); // 'John'
189
187
  </script>
190
188
  ```
191
189
 
192
- ## 3. Performance and Interaction Concerns
190
+ ## 3. Performance and interaction concerns
193
191
 
194
- ### WebView Performance
192
+ ### WebView performance
193
+ WebView consumes significant resources:
194
+ - Each WebView has its own rendering context
195
+ - Memory overhead is high
196
+ - Load time is independent of content complexity
195
197
 
196
- **WebView consumes many resources**:
197
- - Each WebView requires its own rendering context
198
- - Significant memory overhead
199
- - Load time independent of content simplicity
200
-
201
- **Best Practice**: If you can recreate the content with native Titanium components, do it.
198
+ Best practice: if you can recreate the content with native Titanium components, do it.
202
199
 
203
200
  ### WebView in TableViews
201
+ Anti-pattern: embedding WebViews in TableViewRows causes slow scrolling.
204
202
 
205
- **Anti-Pattern**: Embedding WebViews in TableViewRows causes slow scrolling.
206
-
207
- ### WebView in Scrollable Components
208
-
209
- WebViews don't work well inside other scrollable containers (ScrollView, TableView). They consume touch events.
203
+ ### WebView in scrollable components
204
+ WebViews do not behave well inside other scrollable containers (ScrollView, TableView). They consume touch events.
210
205
 
211
- **Workaround**: Set `touchEnabled: false` on the WebView if inside a scrollable parent:
206
+ Workaround: set `touchEnabled: false` on the WebView if it sits inside a scrollable parent:
212
207
 
213
208
  ```javascript
214
209
  const webview = Ti.UI.createWebView({
215
210
  url: 'content.html',
216
- touchEnabled: false // Allow parent to handle touches
211
+ touchEnabled: false // Allow parent to handle touches
217
212
  });
218
213
  ```
219
214
 
220
- ### Viewport Meta Tag
221
-
215
+ ### Viewport meta tag
222
216
  For mobile-optimized content, use the viewport meta tag:
223
217
 
224
218
  ```html
225
219
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
226
220
  ```
227
221
 
228
- ## 4. WebView Use Cases
222
+ ## 4. WebView use cases
229
223
 
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.
224
+ Common WebView use cases:
225
+ - HTML forms: auto-scroll to focused fields, next/previous navigation, native keyboard integration
226
+ - Rich text or HTML email: render styled content that is hard to replicate with native labels
227
+ - Canvas/graphics: HTML5 Canvas provides 2D drawing not available in native Titanium APIs
228
+ - OAuth flows: load third-party auth pages in a WebView and intercept redirects
235
229
 
236
- ### Authentication Flows
237
- Many OAuth providers use WebView for login (like the Facebook module).
230
+ ### Authentication flows
231
+ Many OAuth providers use WebView for login (for example, the Facebook module).
238
232
 
239
233
  ```javascript
240
234
  const authWebView = Ti.UI.createWebView({
@@ -250,10 +244,10 @@ authWebView.addEventListener('load', (e) => {
250
244
  });
251
245
  ```
252
246
 
253
- ### Canvas and Graphics
247
+ ### Canvas and graphics
254
248
  For complex graphics, use HTML5 Canvas:
255
249
 
256
- **local.html**:
250
+ `local.html`:
257
251
  ```html
258
252
  <canvas id="myCanvas" width="300" height="200"></canvas>
259
253
  <script>
@@ -263,28 +257,32 @@ For complex graphics, use HTML5 Canvas:
263
257
  </script>
264
258
  ```
265
259
 
266
- ## 5. WKWebView Behavioral Differences (iOS)
260
+ ## 5. WKWebView behavioral differences (iOS)
267
261
 
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.
282
-
283
- ## Best Practices Summary
284
-
285
- 1. **Avoid WebViews when possible** - Use native components.
286
- 2. **Never embed in TableView** - Causes serious scroll issues.
287
- 3. **Use local content for integration** - Only local content supports Ti.App events.
288
- 4. **Use evalJS() for remote** - Only way to interact with remote content.
289
- 5. **Wait for the load event** - Before calling evalJS().
290
- 6. **Configure the viewport** - For proper mobile rendering.
262
+ - Cookies: WKWebView uses a separate cookie store from `Ti.Network`. Cookies set via HTTPClient are not shared with WebViews.
263
+ - `localStorage`/`sessionStorage`: not shared between the native app and the WebView. Each WKWebView has its own storage.
264
+ - `evalJS` is async: on iOS 12.0+, synchronous `evalJS()` can deadlock. Use the callback form instead:
265
+
266
+ ```javascript
267
+ webView.evalJS('document.title', (result) => {
268
+ Ti.API.info(`Title: ${result}`);
269
+ });
270
+ ```
271
+
272
+ - Viewport meta tag required: WKWebView needs an explicit viewport tag to scale content correctly:
273
+
274
+ ```html
275
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
276
+ ```
277
+
278
+ - Custom fonts: use a special `@font-face` path format in WKWebView CSS. Fonts must be in the app bundle and referenced correctly.
279
+ - Remote HTML limitations: `Ti.API`, `Ti.App.fireEvent()`, and other Titanium calls do not work in remotely-loaded HTML. Only local HTML can communicate with the Titanium runtime.
280
+
281
+ ## Best practices summary
282
+
283
+ 1. Avoid WebViews when possible. Use native components.
284
+ 2. Never embed a WebView in a TableView.
285
+ 3. Use local content for integration. Only local content supports `Ti.App` events.
286
+ 4. Use `evalJS()` for remote content. It is the only way to interact with remote pages.
287
+ 5. Wait for the `load` event before calling `evalJS()`.
288
+ 6. Configure the viewport for proper mobile rendering.