@maccesar/titools 2.2.4 → 2.2.8
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +23 -23
- package/lib/commands/update.js +4 -12
- package/package.json +1 -1
- package/skills/alloy-guides/SKILL.md +31 -31
- package/skills/alloy-guides/references/CONCEPTS.md +3 -3
- package/skills/alloy-guides/references/CONTROLLERS.md +1 -1
- package/skills/alloy-guides/references/MODELS.md +6 -6
- package/skills/alloy-guides/references/VIEWS_WITHOUT_CONTROLLERS.md +1 -1
- package/skills/alloy-guides/references/VIEWS_XML.md +1 -1
- package/skills/alloy-guides/references/WIDGETS.md +1 -1
- package/skills/alloy-howtos/SKILL.md +27 -27
- package/skills/alloy-howtos/references/best_practices.md +9 -9
- package/skills/alloy-howtos/references/cli_reference.md +14 -14
- package/skills/alloy-howtos/references/config_files.md +16 -16
- package/skills/alloy-howtos/references/custom_tags.md +16 -16
- package/skills/alloy-howtos/references/debugging_troubleshooting.md +11 -15
- package/skills/alloy-howtos/references/samples.md +19 -19
- package/skills/purgetss/SKILL.md +11 -1
- package/skills/purgetss/references/animation-system.md +1 -1
- package/skills/purgetss/references/cli-commands.md +3 -3
- package/skills/purgetss/references/customization-deep-dive.md +1 -1
- package/skills/purgetss/references/dynamic-component-creation.md +1 -1
- package/skills/purgetss/references/icon-fonts.md +4 -0
- package/skills/purgetss/references/installation-setup.md +8 -1
- package/skills/purgetss/references/migration-guide.md +4 -0
- package/skills/purgetss/references/tikit-components.md +193 -204
- package/skills/purgetss/references/ui-ux-design.md +1 -1
- package/skills/ti-expert/SKILL.md +78 -118
- package/skills/ti-expert/references/alloy-builtins.md +18 -18
- package/skills/ti-expert/references/alloy-structure.md +21 -21
- package/skills/ti-expert/references/anti-patterns.md +15 -15
- package/skills/ti-expert/references/cli-expert.md +15 -15
- package/skills/ti-expert/references/code-conventions.md +38 -38
- package/skills/ti-expert/references/contracts.md +8 -8
- package/skills/ti-expert/references/controller-patterns.md +14 -14
- package/skills/ti-expert/references/error-handling.md +11 -11
- package/skills/ti-expert/references/examples.md +12 -12
- package/skills/ti-expert/references/migration-patterns.md +24 -24
- package/skills/ti-expert/references/patterns.md +10 -10
- package/skills/ti-expert/references/performance-listview.md +16 -16
- package/skills/ti-expert/references/performance-optimization.md +41 -41
- package/skills/ti-expert/references/security-device.md +22 -22
- package/skills/ti-expert/references/security-fundamentals.md +19 -19
- package/skills/ti-expert/references/state-management.md +33 -33
- package/skills/ti-expert/references/testing-e2e-ci.md +25 -25
- package/skills/ti-expert/references/testing-unit.md +24 -24
- package/skills/ti-expert/references/theming.md +15 -15
- package/skills/ti-guides/SKILL.md +58 -60
- package/skills/ti-guides/references/advanced-data-and-images.md +33 -33
- package/skills/ti-guides/references/android-manifest.md +15 -15
- package/skills/ti-guides/references/app-distribution.md +70 -166
- package/skills/ti-guides/references/application-frameworks.md +96 -114
- package/skills/ti-guides/references/cli-reference.md +294 -294
- package/skills/ti-guides/references/coding-best-practices.md +42 -33
- package/skills/ti-guides/references/commonjs-advanced.md +57 -51
- package/skills/ti-guides/references/hello-world.md +36 -36
- package/skills/ti-guides/references/hyperloop-native-access.md +66 -66
- package/skills/ti-guides/references/javascript-primer.md +83 -101
- package/skills/ti-guides/references/reserved-words.md +9 -9
- package/skills/ti-guides/references/resources.md +75 -83
- package/skills/ti-guides/references/style-and-conventions.md +35 -28
- package/skills/ti-guides/references/tiapp-config.md +110 -74
- package/skills/ti-howtos/SKILL.md +88 -92
- package/skills/ti-howtos/references/android-platform-deep-dives.md +104 -104
- package/skills/ti-howtos/references/automation-fastlane-appium.md +39 -39
- package/skills/ti-howtos/references/buffer-codec-streams.md +60 -60
- package/skills/ti-howtos/references/cross-platform-development.md +115 -136
- package/skills/ti-howtos/references/debugging-profiling.md +167 -181
- package/skills/ti-howtos/references/extending-titanium.md +121 -121
- package/skills/ti-howtos/references/google-maps-v2.md +84 -82
- package/skills/ti-howtos/references/ios-map-kit.md +65 -60
- package/skills/ti-howtos/references/ios-platform-deep-dives.md +123 -123
- package/skills/ti-howtos/references/local-data-sources.md +79 -78
- package/skills/ti-howtos/references/location-and-maps.md +116 -120
- package/skills/ti-howtos/references/media-apis.md +87 -86
- package/skills/ti-howtos/references/notification-services.md +250 -260
- package/skills/ti-howtos/references/remote-data-sources.md +98 -93
- package/skills/ti-howtos/references/tutorials.md +226 -216
- package/skills/ti-howtos/references/using-modules.md +73 -102
- package/skills/ti-howtos/references/web-content-integration.md +101 -103
- package/skills/ti-howtos/references/webpack-build-pipeline.md +52 -44
- package/skills/ti-ui/SKILL.md +85 -85
- package/skills/ti-ui/references/accessibility-deep-dive.md +57 -57
- package/skills/ti-ui/references/animation-and-matrices.md +79 -79
- package/skills/ti-ui/references/application-structures.md +96 -99
- package/skills/ti-ui/references/custom-fonts-styling.md +99 -99
- package/skills/ti-ui/references/event-handling.md +58 -58
- package/skills/ti-ui/references/gestures.md +62 -64
- package/skills/ti-ui/references/icons-and-splash-screens.md +88 -88
- package/skills/ti-ui/references/layouts-and-positioning.md +87 -97
- package/skills/ti-ui/references/listviews-and-performance.md +107 -107
- package/skills/ti-ui/references/orientation.md +87 -88
- package/skills/ti-ui/references/platform-ui-android.md +87 -81
- package/skills/ti-ui/references/platform-ui-ios.md +63 -61
- package/skills/ti-ui/references/scrolling-views.md +29 -29
- package/skills/ti-ui/references/tableviews.md +56 -56
|
@@ -1,24 +1,24 @@
|
|
|
1
|
-
# Buffer, Codec, and
|
|
1
|
+
# Buffer, Codec, and streams
|
|
2
2
|
|
|
3
|
-
Guide
|
|
3
|
+
Guide to binary data manipulation and data flows in Titanium SDK.
|
|
4
4
|
|
|
5
5
|
## 1. Titanium.Buffer
|
|
6
6
|
|
|
7
|
-
Buffers are mutable
|
|
7
|
+
Buffers are mutable, resizable containers for bytes (byte arrays).
|
|
8
8
|
|
|
9
|
-
### Creating
|
|
9
|
+
### Creating buffers
|
|
10
10
|
```javascript
|
|
11
11
|
// Empty 512-byte buffer
|
|
12
12
|
const buffer1 = Ti.createBuffer({ length: 512 });
|
|
13
13
|
|
|
14
14
|
// Buffer initialized with a string (UTF-8 by default)
|
|
15
|
-
const buffer2 = Ti.createBuffer({ value:
|
|
15
|
+
const buffer2 = Ti.createBuffer({ value: 'Hello World' });
|
|
16
16
|
```
|
|
17
17
|
|
|
18
|
-
### Common
|
|
18
|
+
### Common operations
|
|
19
19
|
```javascript
|
|
20
|
-
const b1 = Ti.createBuffer({ value:
|
|
21
|
-
const b2 = Ti.createBuffer({ value:
|
|
20
|
+
const b1 = Ti.createBuffer({ value: 'Part 1. ' });
|
|
21
|
+
const b2 = Ti.createBuffer({ value: 'Part 2.' });
|
|
22
22
|
|
|
23
23
|
// Append
|
|
24
24
|
b1.append(b2);
|
|
@@ -35,68 +35,68 @@ b1.release();
|
|
|
35
35
|
|
|
36
36
|
## 2. Titanium.Codec
|
|
37
37
|
|
|
38
|
-
The Codec module
|
|
38
|
+
The Codec module encodes and decodes primitive data (numbers and strings) to and from buffers.
|
|
39
39
|
|
|
40
|
-
### Encoding
|
|
40
|
+
### Encoding numbers
|
|
41
41
|
```javascript
|
|
42
42
|
const buffer = Ti.createBuffer({ length: 8 });
|
|
43
43
|
Ti.Codec.encodeNumber({
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
44
|
+
source: 12345,
|
|
45
|
+
dest: buffer,
|
|
46
|
+
type: Ti.Codec.TYPE_INT,
|
|
47
|
+
byteOrder: Ti.Codec.BIG_ENDIAN
|
|
48
48
|
});
|
|
49
49
|
```
|
|
50
50
|
|
|
51
|
-
### Decoding
|
|
51
|
+
### Decoding strings
|
|
52
52
|
```javascript
|
|
53
53
|
const text = Ti.Codec.decodeString({
|
|
54
|
-
|
|
55
|
-
|
|
54
|
+
source: buffer,
|
|
55
|
+
charset: Ti.Codec.CHARSET_UTF8
|
|
56
56
|
});
|
|
57
57
|
```
|
|
58
58
|
|
|
59
|
-
### Supported
|
|
59
|
+
### Supported types and charsets
|
|
60
60
|
|
|
61
|
-
|
|
61
|
+
Numeric types: `TYPE_BYTE`, `TYPE_SHORT`, `TYPE_INT`, `TYPE_LONG`, `TYPE_FLOAT`, `TYPE_DOUBLE`
|
|
62
62
|
|
|
63
|
-
|
|
63
|
+
String charsets: `CHARSET_UTF8`, `CHARSET_UTF16`, `CHARSET_UTF16BE`, `CHARSET_UTF16LE`, `CHARSET_ISO_LATIN1`
|
|
64
64
|
|
|
65
|
-
### Position
|
|
66
|
-
The `position` parameter controls where encoding
|
|
65
|
+
### Position parameter
|
|
66
|
+
The `position` parameter controls where encoding or decoding starts in the buffer:
|
|
67
67
|
```javascript
|
|
68
68
|
Ti.Codec.encodeNumber({
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
69
|
+
source: 42,
|
|
70
|
+
dest: buffer,
|
|
71
|
+
position: 4, // start writing at byte 4
|
|
72
|
+
type: Ti.Codec.TYPE_INT
|
|
73
73
|
});
|
|
74
74
|
```
|
|
75
75
|
|
|
76
76
|
## 3. Streams
|
|
77
77
|
|
|
78
|
-
Streams
|
|
78
|
+
Streams let you read and write data in a serialized, memory-efficient way.
|
|
79
79
|
|
|
80
|
-
### Stream
|
|
81
|
-
1.
|
|
82
|
-
2.
|
|
83
|
-
3.
|
|
80
|
+
### Stream types
|
|
81
|
+
1. BufferStream: for reading and writing in-memory buffers
|
|
82
|
+
2. FileStream: for file operations (more efficient than `file.read()`)
|
|
83
|
+
3. BlobStream: read-only for Blob objects (images, camera)
|
|
84
84
|
|
|
85
|
-
|
|
85
|
+
Stream modes: `Ti.Filesystem.MODE_READ`, `Ti.Filesystem.MODE_WRITE`, `Ti.Filesystem.MODE_APPEND`
|
|
86
86
|
|
|
87
87
|
### Example: BufferStream
|
|
88
88
|
```javascript
|
|
89
89
|
const buffer = Ti.createBuffer({ length: 1024 });
|
|
90
90
|
const stream = Ti.Stream.createStream({
|
|
91
|
-
|
|
92
|
-
|
|
91
|
+
source: buffer,
|
|
92
|
+
mode: Ti.Stream.MODE_WRITE
|
|
93
93
|
});
|
|
94
94
|
|
|
95
|
-
stream.write(Ti.createBuffer({ value:
|
|
95
|
+
stream.write(Ti.createBuffer({ value: 'Stream data' }));
|
|
96
96
|
stream.close();
|
|
97
97
|
```
|
|
98
98
|
|
|
99
|
-
### Example: FileStream (
|
|
99
|
+
### Example: FileStream (chunk-based reading)
|
|
100
100
|
```javascript
|
|
101
101
|
const file = Ti.Filesystem.getFile('large_file.txt');
|
|
102
102
|
const instream = file.open(Ti.Filesystem.MODE_READ);
|
|
@@ -104,37 +104,37 @@ const buffer = Ti.createBuffer({ length: 1024 }); // 1KB chunks
|
|
|
104
104
|
|
|
105
105
|
let bytesRead = 0;
|
|
106
106
|
while ((bytesRead = instream.read(buffer)) > 0) {
|
|
107
|
-
|
|
108
|
-
|
|
107
|
+
Ti.API.info(`Read ${bytesRead} bytes`);
|
|
108
|
+
// Process buffer...
|
|
109
109
|
}
|
|
110
110
|
instream.close();
|
|
111
111
|
```
|
|
112
112
|
|
|
113
|
-
### Example: BlobStream (
|
|
113
|
+
### Example: BlobStream (camera to file)
|
|
114
114
|
```javascript
|
|
115
115
|
Ti.Media.showCamera({
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
}
|
|
130
|
-
|
|
131
|
-
instream.close();
|
|
132
|
-
outstream.close();
|
|
116
|
+
success: (e) => {
|
|
117
|
+
const instream = Ti.Stream.createStream({
|
|
118
|
+
source: e.media,
|
|
119
|
+
mode: Ti.Stream.MODE_READ
|
|
120
|
+
});
|
|
121
|
+
|
|
122
|
+
const outfile = Ti.Filesystem.getFile(Ti.Filesystem.applicationDataDirectory, 'photo.jpg');
|
|
123
|
+
const outstream = outfile.open(Ti.Filesystem.MODE_WRITE);
|
|
124
|
+
|
|
125
|
+
const buffer = Ti.createBuffer({ length: 4096 });
|
|
126
|
+
let readBytes = 0;
|
|
127
|
+
while ((readBytes = instream.read(buffer)) > 0) {
|
|
128
|
+
outstream.write(buffer, 0, readBytes);
|
|
133
129
|
}
|
|
130
|
+
|
|
131
|
+
instream.close();
|
|
132
|
+
outstream.close();
|
|
133
|
+
}
|
|
134
134
|
});
|
|
135
135
|
```
|
|
136
136
|
|
|
137
|
-
## 4. Best
|
|
138
|
-
-
|
|
139
|
-
-
|
|
140
|
-
-
|
|
137
|
+
## 4. Best practices
|
|
138
|
+
- Always close streams to avoid memory leaks and file locks.
|
|
139
|
+
- Use chunks for large files or networking (for example, 1KB or 4KB) to avoid saturating RAM.
|
|
140
|
+
- Buffers vs Blobs: Buffers are mutable; Blobs are immutable. Convert a Blob to a Buffer if you need to modify bytes.
|
|
@@ -1,53 +1,49 @@
|
|
|
1
|
-
# Cross-
|
|
1
|
+
# Cross-platform development
|
|
2
2
|
|
|
3
|
-
Strategies
|
|
3
|
+
Strategies for building Titanium apps that run on iOS and Android from a single codebase.
|
|
4
4
|
|
|
5
5
|
## Philosophy
|
|
6
6
|
|
|
7
|
-
### "Write
|
|
7
|
+
### "Write once, adapt everywhere"
|
|
8
|
+
Titanium is not "write once, run anywhere." It is "write once, adapt everywhere."
|
|
8
9
|
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
**What's shared (90-100%):**
|
|
10
|
+
Shared (90-100%):
|
|
12
11
|
- Business logic
|
|
13
12
|
- Networking code
|
|
14
13
|
- Database operations
|
|
15
14
|
- Event handling
|
|
16
15
|
- Data models
|
|
17
16
|
|
|
18
|
-
|
|
19
|
-
- UI conventions (
|
|
17
|
+
Different:
|
|
18
|
+
- UI conventions (tab position, navigation)
|
|
20
19
|
- Platform-specific features
|
|
21
20
|
- Hardware capabilities
|
|
22
21
|
- User expectations
|
|
23
22
|
|
|
24
|
-
### Embrace the
|
|
25
|
-
|
|
26
|
-
Best-of-breed apps feel **native** on each platform:
|
|
23
|
+
### Embrace the platform
|
|
24
|
+
Good apps feel native on each platform:
|
|
27
25
|
|
|
28
|
-
-
|
|
29
|
-
-
|
|
26
|
+
- iOS: bottom tabs, left navigation buttons, iOS-specific controls
|
|
27
|
+
- Android: top tabs, Menu button (legacy), Action Bar, Material Design
|
|
30
28
|
|
|
31
|
-
|
|
29
|
+
Develop for both platforms from day one. It is much easier than porting later.
|
|
32
30
|
|
|
33
|
-
### Android
|
|
34
|
-
-
|
|
35
|
-
-
|
|
36
|
-
-
|
|
37
|
-
-
|
|
38
|
-
-
|
|
31
|
+
### Android platform key concepts
|
|
32
|
+
- Screen sizes: small, normal, large, xlarge (measured in dp). Use density-independent resources.
|
|
33
|
+
- Screen densities: ldpi (~120 dpi), mdpi (~160 dpi), hdpi (~240 dpi), xhdpi (~320 dpi), xxhdpi (~480 dpi), xxxhdpi (~640 dpi)
|
|
34
|
+
- Activities: each heavyweight Window maps to an Android Activity. Titanium manages the Activity lifecycle.
|
|
35
|
+
- Intents: for inter-app and intra-app communication. See `android-platform-deep-dives.md`.
|
|
36
|
+
- Back button: hardware/software back closes the current Window by default. Override with `window.addEventListener('androidback', ...)`.
|
|
39
37
|
|
|
40
|
-
### iOS
|
|
41
|
-
-
|
|
42
|
-
-
|
|
43
|
-
-
|
|
44
|
-
-
|
|
38
|
+
### iOS platform key concepts
|
|
39
|
+
- Human Interface Guidelines: Apple enforces design standards through App Store review. Follow iOS conventions for navigation, tab bars, and gestures.
|
|
40
|
+
- One-button design: no hardware back or menu buttons. All navigation must be in the UI (NavigationWindow, back buttons).
|
|
41
|
+
- Frameworks: Titanium wraps UIKit, Foundation, MapKit, and other Cocoa Touch frameworks. Use Hyperloop for additional frameworks.
|
|
42
|
+
- Developer account: requires a paid Apple Developer Program membership for device testing and App Store distribution.
|
|
45
43
|
|
|
46
|
-
|
|
44
|
+
## Platform identification
|
|
47
45
|
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
### Platform Properties
|
|
46
|
+
### Platform properties
|
|
51
47
|
|
|
52
48
|
```javascript
|
|
53
49
|
// Platform name
|
|
@@ -56,7 +52,7 @@ Ti.Platform.osname // "iphone", "ipad", "android", "mobileweb"
|
|
|
56
52
|
Ti.Platform.model // "iPhone 15", "Pixel 8", etc.
|
|
57
53
|
```
|
|
58
54
|
|
|
59
|
-
### Best
|
|
55
|
+
### Best practice: cache platform checks
|
|
60
56
|
|
|
61
57
|
```javascript
|
|
62
58
|
// Create aliases - query once, use many times
|
|
@@ -66,50 +62,46 @@ const isIOS = (osname === 'iphone' || osname === 'ipad');
|
|
|
66
62
|
const isMobileWeb = (osname === 'mobileweb');
|
|
67
63
|
```
|
|
68
64
|
|
|
69
|
-
### Anti-
|
|
65
|
+
### Anti-pattern: do not assume binary
|
|
70
66
|
|
|
71
67
|
```javascript
|
|
72
68
|
// BAD: Assumes if not Android, then iOS
|
|
73
69
|
if (osname !== 'android') {
|
|
74
|
-
|
|
70
|
+
// Wrong! Could be mobile web or future platform
|
|
75
71
|
}
|
|
76
72
|
|
|
77
73
|
// GOOD: Explicit checks
|
|
78
74
|
if (isAndroid) {
|
|
79
|
-
|
|
75
|
+
// Android code
|
|
80
76
|
} else if (isIOS) {
|
|
81
|
-
|
|
77
|
+
// iOS code
|
|
82
78
|
}
|
|
83
79
|
```
|
|
84
80
|
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
## Coding Strategies
|
|
88
|
-
|
|
89
|
-
### 1. Branching (For Mostly Similar Code)
|
|
81
|
+
## Coding strategies
|
|
90
82
|
|
|
83
|
+
### 1. Branching (mostly similar code)
|
|
91
84
|
Use when code is 90%+ the same with small differences.
|
|
92
85
|
|
|
93
86
|
```javascript
|
|
94
87
|
const isAndroid = (Ti.Platform.osname === 'android');
|
|
95
88
|
|
|
96
89
|
const win = Ti.UI.createWindow({
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
90
|
+
backgroundColor: 'white',
|
|
91
|
+
// Platform-specific property
|
|
92
|
+
softInputMode: isAndroid ? Ti.UI.Android.SOFT_INPUT_ADJUST_PAN : null
|
|
100
93
|
});
|
|
101
94
|
```
|
|
102
95
|
|
|
103
|
-
|
|
104
|
-
- Cache platform checks to avoid repeated
|
|
96
|
+
Tips:
|
|
97
|
+
- Cache platform checks to avoid repeated bridge crossings
|
|
105
98
|
- Group as much code as possible within branches
|
|
106
99
|
- Defer loading to reduce performance impact
|
|
107
100
|
|
|
108
|
-
### 2. Platform-
|
|
109
|
-
|
|
101
|
+
### 2. Platform-specific files (mostly different code)
|
|
110
102
|
Use when code differs significantly between platforms.
|
|
111
103
|
|
|
112
|
-
|
|
104
|
+
Structure:
|
|
113
105
|
```
|
|
114
106
|
Resources/
|
|
115
107
|
├── ui.js // Common code (optional)
|
|
@@ -119,31 +111,30 @@ Resources/
|
|
|
119
111
|
└── ui.js // iOS-specific (overrides)
|
|
120
112
|
```
|
|
121
113
|
|
|
122
|
-
|
|
114
|
+
Usage:
|
|
123
115
|
```javascript
|
|
124
116
|
// Will automatically include the specific version
|
|
125
117
|
const ui = require('ui');
|
|
126
|
-
//
|
|
118
|
+
// Loads: /android/ui.js on Android, /iphone/ui.js on iOS
|
|
127
119
|
```
|
|
128
120
|
|
|
129
|
-
### 3. Execution
|
|
130
|
-
|
|
131
|
-
Titanium supports single-context and multi-context applications:
|
|
121
|
+
### 3. Execution contexts
|
|
122
|
+
Titanium supports single-context and multi-context apps:
|
|
132
123
|
|
|
133
|
-
-
|
|
134
|
-
-
|
|
124
|
+
- Single context (recommended): all windows share one JavaScript runtime. Use `require()` for modules and `Alloy.createController()` for views.
|
|
125
|
+
- Multi-context (legacy): `Ti.UI.createWindow({ url: 'other.js' })` creates a separate JavaScript context. Variables are not shared between contexts.
|
|
135
126
|
|
|
136
|
-
|
|
127
|
+
Avoid multi-context apps. Use CommonJS modules and `require()` instead. If you must communicate across contexts, use `Ti.App.fireEvent()` and `Ti.App.addEventListener()`.
|
|
137
128
|
|
|
138
|
-
|
|
129
|
+
Avoid multiple contexts:
|
|
139
130
|
```javascript
|
|
140
131
|
// Creates a new context - variables from app.js are not available
|
|
141
132
|
Ti.UI.createWindow({
|
|
142
|
-
|
|
133
|
+
url: 'window.js' // DO NOT DO THIS
|
|
143
134
|
}).open();
|
|
144
135
|
```
|
|
145
136
|
|
|
146
|
-
|
|
137
|
+
Use instead:
|
|
147
138
|
```javascript
|
|
148
139
|
// Same context - all variables available
|
|
149
140
|
const win = Ti.UI.createWindow({});
|
|
@@ -151,16 +142,14 @@ require('window')(win);
|
|
|
151
142
|
win.open();
|
|
152
143
|
```
|
|
153
144
|
|
|
154
|
-
|
|
145
|
+
## Platform-specific resources
|
|
155
146
|
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
### Resource Overrides System
|
|
147
|
+
### Resource overrides system
|
|
159
148
|
|
|
160
149
|
```javascript
|
|
161
150
|
// Automatically uses the platform-specific version
|
|
162
151
|
const image = Ti.UI.createImageView({
|
|
163
|
-
|
|
152
|
+
image: '/images/logo.png' // Will choose the correct file
|
|
164
153
|
});
|
|
165
154
|
```
|
|
166
155
|
|
|
@@ -181,27 +170,25 @@ app/
|
|
|
181
170
|
└── logo.png // iOS
|
|
182
171
|
```
|
|
183
172
|
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
## 5. Webpack Build Pipeline (TiSDK 9.1.0+)
|
|
173
|
+
## 5. Webpack build pipeline (TiSDK 9.1.0+)
|
|
187
174
|
|
|
188
|
-
Titanium's modern build engine optimizes packaging and allows using
|
|
175
|
+
Titanium's modern build engine optimizes packaging and allows using npm libraries natively.
|
|
189
176
|
|
|
190
|
-
### `@`
|
|
177
|
+
### `@` alias
|
|
191
178
|
Use `@` to reference your code root regardless of the current folder depth.
|
|
179
|
+
|
|
192
180
|
```javascript
|
|
193
181
|
import MyModule from '@/utils/myModule'; // Points to app/lib or src
|
|
194
182
|
```
|
|
195
183
|
|
|
196
|
-
###
|
|
197
|
-
Install any
|
|
184
|
+
### npm support
|
|
185
|
+
Install any npm package in the project root and use it directly with `import`.
|
|
198
186
|
|
|
199
|
-
For more details on optimization, diagnostics, and build
|
|
200
|
-
- [Webpack Build Pipeline](./webpack-build-pipeline.md)
|
|
187
|
+
For more details on optimization, diagnostics, and the build web UI, see `webpack-build-pipeline.md`.
|
|
201
188
|
|
|
202
189
|
## 6. Internationalization (i18n)
|
|
203
190
|
|
|
204
|
-
### i18n
|
|
191
|
+
### i18n directory structure
|
|
205
192
|
```
|
|
206
193
|
i18n/
|
|
207
194
|
├── en/
|
|
@@ -216,18 +203,18 @@ i18n/
|
|
|
216
203
|
|
|
217
204
|
Use ISO 639-1 language codes (en, es, ja) and optionally ISO 3166-1 region codes (en-GB, pt-BR).
|
|
218
205
|
|
|
219
|
-
### strings.xml
|
|
206
|
+
### strings.xml format
|
|
220
207
|
```xml
|
|
221
208
|
<?xml version="1.0" encoding="UTF-8"?>
|
|
222
209
|
<resources>
|
|
223
|
-
|
|
224
|
-
|
|
210
|
+
<string name="welcome_message">Welcome to my app</string>
|
|
211
|
+
<string name="login_button">Log In</string>
|
|
225
212
|
</resources>
|
|
226
213
|
```
|
|
227
214
|
|
|
228
|
-
### Using
|
|
215
|
+
### Using localized strings
|
|
229
216
|
|
|
230
|
-
|
|
217
|
+
Basic usage:
|
|
231
218
|
```javascript
|
|
232
219
|
// Two equivalent methods
|
|
233
220
|
const str1 = L('welcome_message');
|
|
@@ -237,13 +224,13 @@ const str2 = Ti.Locale.getString('welcome_message');
|
|
|
237
224
|
const withDefault = L('missing_key', 'Default text');
|
|
238
225
|
```
|
|
239
226
|
|
|
240
|
-
|
|
227
|
+
In Alloy XML views, use `titleid` instead of `title`:
|
|
241
228
|
```xml
|
|
242
229
|
<Button titleid="login_button" />
|
|
243
230
|
<Label textid="welcome_message" />
|
|
244
231
|
```
|
|
245
232
|
|
|
246
|
-
|
|
233
|
+
String formatting:
|
|
247
234
|
```javascript
|
|
248
235
|
// Simple replacement
|
|
249
236
|
const formatted = String.format(L('format_test'), 'Kevin');
|
|
@@ -254,19 +241,19 @@ const formatted = String.format(L('ordered'), 'Jeff', 'Kevin');
|
|
|
254
241
|
// Result: "Hi Jeff, my name is Kevin"
|
|
255
242
|
```
|
|
256
243
|
|
|
257
|
-
### Localizing the
|
|
244
|
+
### Localizing the app name
|
|
258
245
|
|
|
259
|
-
|
|
246
|
+
iOS (SDK 3.2.0+): set `<key>CFBundleDisplayName</key>` in `i18n/LANG/app.xml`
|
|
260
247
|
|
|
261
|
-
|
|
248
|
+
Android: use `<string name="appname">Mi App</string>` in `i18n/LANG/strings.xml`
|
|
262
249
|
|
|
263
|
-
### Localizing
|
|
250
|
+
### Localizing images and files
|
|
264
251
|
|
|
265
252
|
Two approaches:
|
|
266
|
-
1.
|
|
267
|
-
2.
|
|
253
|
+
1. Platform folders: place localized images in `app/assets/iphone/LANG.lproj/` (iOS) or `app/assets/android/images/` with language qualifiers (Android)
|
|
254
|
+
2. Code-based: load different assets based on `Ti.Locale.currentLanguage`
|
|
268
255
|
|
|
269
|
-
### Date and
|
|
256
|
+
### Date and currency formatting
|
|
270
257
|
|
|
271
258
|
```javascript
|
|
272
259
|
// Date formatting
|
|
@@ -281,50 +268,46 @@ const price = String.formatCurrency(1234.56);
|
|
|
281
268
|
const amount = String.formatDecimal(1234.56);
|
|
282
269
|
```
|
|
283
270
|
|
|
284
|
-
|
|
271
|
+
Warning (Android): `String.formatDate()` may produce incorrect translations or field ordering on some Android versions. Consider using JavaScript `Date` methods as a workaround.
|
|
285
272
|
|
|
286
|
-
### Testing
|
|
273
|
+
### Testing localizations
|
|
287
274
|
|
|
288
|
-
|
|
275
|
+
iOS:
|
|
289
276
|
1. Settings → General → Language & Region
|
|
290
277
|
2. Change iPhone Language
|
|
291
278
|
3. Confirm and restart device
|
|
292
279
|
|
|
293
|
-
|
|
280
|
+
Android:
|
|
294
281
|
1. Settings → Language & input
|
|
295
282
|
2. Select Language
|
|
296
283
|
|
|
297
|
-
|
|
298
|
-
|
|
299
|
-
## Platform-Specific APIs
|
|
284
|
+
## Platform-specific APIs
|
|
300
285
|
|
|
301
|
-
### Example:
|
|
286
|
+
### Example: platform-specific properties
|
|
302
287
|
|
|
303
288
|
```javascript
|
|
304
289
|
const win = Ti.UI.createWindow({
|
|
305
|
-
|
|
306
|
-
|
|
307
|
-
|
|
290
|
+
// iOS-specific
|
|
291
|
+
barColor: isIOS ? '#007AFF' : null,
|
|
292
|
+
titlePrompt: isIOS ? 'Title' : null,
|
|
308
293
|
|
|
309
|
-
|
|
310
|
-
|
|
311
|
-
|
|
294
|
+
// Android-specific
|
|
295
|
+
softInputMode: isAndroid ? Ti.UI.Android.SOFT_INPUT_ADJUST_PAN : null,
|
|
296
|
+
exitOnClose: isAndroid ? true : false
|
|
312
297
|
});
|
|
313
298
|
```
|
|
314
299
|
|
|
315
|
-
|
|
300
|
+
## Common cross-platform patterns
|
|
316
301
|
|
|
317
|
-
|
|
318
|
-
|
|
319
|
-
### Tab Groups
|
|
302
|
+
### Tab groups
|
|
320
303
|
|
|
321
304
|
```javascript
|
|
322
305
|
const tabGroup = Ti.UI.createTabGroup();
|
|
323
306
|
|
|
324
307
|
const tab1 = Ti.UI.createTab({
|
|
325
|
-
|
|
326
|
-
|
|
327
|
-
|
|
308
|
+
title: 'Tab 1',
|
|
309
|
+
icon: isIOS ? 'tab1.png' : null, // iOS uses icons
|
|
310
|
+
window: win1
|
|
328
311
|
});
|
|
329
312
|
|
|
330
313
|
tabGroup.addTab(tab1);
|
|
@@ -335,45 +318,41 @@ tabGroup.open();
|
|
|
335
318
|
|
|
336
319
|
```javascript
|
|
337
320
|
if (isIOS) {
|
|
338
|
-
|
|
339
|
-
|
|
340
|
-
|
|
341
|
-
|
|
342
|
-
|
|
321
|
+
// iOS: navigation window with back button
|
|
322
|
+
const nav = Ti.UI.iOS.createNavigationWindow({
|
|
323
|
+
window: win
|
|
324
|
+
});
|
|
325
|
+
nav.open();
|
|
343
326
|
} else if (isAndroid) {
|
|
344
|
-
|
|
345
|
-
|
|
327
|
+
// Android: open window, use physical button
|
|
328
|
+
win.open();
|
|
346
329
|
}
|
|
347
330
|
```
|
|
348
331
|
|
|
349
|
-
### Platform-
|
|
332
|
+
### Platform-specific event handling
|
|
350
333
|
|
|
351
334
|
```javascript
|
|
352
335
|
if (isAndroid) {
|
|
353
|
-
|
|
354
|
-
|
|
355
|
-
|
|
356
|
-
|
|
357
|
-
|
|
336
|
+
// Android: handle physical Back button
|
|
337
|
+
win.addEventListener('androidback', (e) => {
|
|
338
|
+
// Custom behavior
|
|
339
|
+
alert('Back pressed!');
|
|
340
|
+
});
|
|
358
341
|
}
|
|
359
342
|
```
|
|
360
343
|
|
|
361
|
-
|
|
362
|
-
|
|
363
|
-
## Best Practices
|
|
364
|
-
|
|
365
|
-
1. **Test early on both platforms** - Don't wait until "porting time"
|
|
366
|
-
2. **Use Alloy framework** - Provides MVC structure and platform abstraction
|
|
367
|
-
3. **Follow platform conventions** - iOS apps should feel like iOS, Android like Android
|
|
368
|
-
4. **Cache platform checks** - Store in variables, don't call `Ti.Platform.osname` repeatedly
|
|
369
|
-
5. **Use CommonJS modules** - Better code organization and reusability
|
|
370
|
-
6. **Leverage resource overrides** - Avoid conditional code for images/assets
|
|
371
|
-
7. **Think cross-platform from design phase** - UI should adapt gracefully
|
|
344
|
+
## Best practices
|
|
372
345
|
|
|
373
|
-
|
|
346
|
+
1. Test early on both platforms. Do not wait until "porting time".
|
|
347
|
+
2. Use Alloy. It provides MVC structure and platform abstraction.
|
|
348
|
+
3. Follow platform conventions. iOS apps should feel like iOS, Android like Android.
|
|
349
|
+
4. Cache platform checks. Store in variables, do not call `Ti.Platform.osname` repeatedly.
|
|
350
|
+
5. Use CommonJS modules. Better code organization and reuse.
|
|
351
|
+
6. Leverage resource overrides. Avoid conditional code for images and assets.
|
|
352
|
+
7. Think cross-platform from the design phase. UI should adapt gracefully.
|
|
374
353
|
|
|
375
354
|
## Resources
|
|
376
355
|
|
|
377
|
-
-
|
|
378
|
-
-
|
|
379
|
-
-
|
|
356
|
+
- Alloy Framework - MVC framework for Titanium (see alloy-guides skill)
|
|
357
|
+
- CommonJS Modules - module specification (see coding strategies above)
|
|
358
|
+
- Platform API deep dives - iOS and Android platform-specific features
|