Skip to content

Commit a53668d

Browse files
rigor789rigor789
committed
docs: cleanup Placeholder
1 parent 4a1cabf commit a53668d

File tree

7 files changed

+57
-130
lines changed

7 files changed

+57
-130
lines changed

‎content/screenshots/android/Placeholder.png

24 KB
Loading

‎content/screenshots/ios/Placeholder.png

61 KB
Loading

‎content/ui/placeholder.md

Lines changed: 21 additions & 126 deletions
Original file line numberDiff line numberDiff line change
@@ -1,145 +1,40 @@
11
---
22
title: Placeholder
3+
description: Helper UI component for rendering native views.
4+
contributors:
5+
- rigor789
6+
- Ombuweb
37
---
48

59
`<Placeholder>` allows adding native views directly in your markup without creating a full [View](#) wrapper for it. When NativeScript is constructing the UI and encounters a Placeholder element, it emits a `creatingView` event, allowing you to pass in any native view to be rendered by assigning it to the `args.view` parameter.
610

7-
### Creating a Simple Placeholder
11+
<DeviceFrame type="ios">
12+
<img src="../screenshots/ios/Placeholder.png"/>
13+
</DeviceFrame>
14+
<DeviceFrame type="android">
15+
<img src="../screenshots/android/Placeholder.png"/>
16+
</DeviceFrame>
817

9-
<!-- /// flavor plain -->
10-
11-
```xml
12-
<Placeholder creatingView="creatingView" />
13-
```
14-
15-
```ts
16-
import { Utils } from '@nativescript/core'
17-
18-
export function creatingView(args) {
19-
let nativeView
20-
if (global.isIOS) {
21-
// Example with UITextView in iOS
22-
nativeView = UITextView.new()
23-
nativeView.text = 'Native View (iOS)'
24-
} else if (global.isAndroid) {
25-
// Example with TextView in Android
26-
nativeView = new android.widget.TextView(
27-
Utils.android.getApplicationContext()
28-
)
29-
nativeView.setText('Native View (Android)')
30-
}
31-
32-
// assign it to args.view so NativeScript can place it into the UI
33-
args.view = nativeView
34-
}
35-
```
36-
37-
<!-- ///
38-
39-
/// flavor react
40-
41-
```tsx
42-
import { isIOS, isAndroid } from '@nativescript/core'
43-
;<placeholder
44-
onCreatingView={() => {
45-
if (isIOS) {
46-
// Example with UILabel in iOS
47-
const nativeView = new UILabel()
48-
nativeView.text = 'Native View - iOS'
49-
args.view = nativeView
50-
} else if (isAndroid) {
51-
// Example with TextView in Android
52-
const nativeView = new android.widget.TextView(args.context)
53-
nativeView.setSingleLine(true)
54-
nativeView.setEllipsize(android.text.TextUtils.TruncateAt.END)
55-
nativeView.setText('Native View - Android')
56-
args.view = nativeView
57-
} else {
58-
console.warn(
59-
'Unsupported platform! Did they finally make NativeScript for desktop?'
60-
)
61-
}
62-
}}
63-
/>
64-
```
65-
66-
///
67-
68-
/// flavor angular
69-
70-
```xml
71-
<Placeholder (creatingView)="creatingView($event)" />
72-
```
73-
74-
```ts
75-
import { Utils, Placeholder } from '@nativescript/core'
76-
77-
function creatingView(args) {
78-
const placeholder = args.object as Placeholder
79-
80-
let nativeView
81-
if (global.isIOS) {
82-
// Example with UITextView in iOS
83-
nativeView = UITextView.new()
84-
nativeView.text = 'Native View (iOS)'
85-
} else if (global.isAndroid) {
86-
// Example with TextView in Android
87-
nativeView = new android.widget.TextView(Utils.android.getApplicationContext())
88-
nativeView.setText('Native View (Android)')
89-
}
90-
91-
placeholder.view = nativeView
92-
}
93-
```
94-
95-
///
96-
97-
/// flavor vue
98-
99-
```xml
100-
<Placeholder @creatingView="creatingView" />
101-
```
102-
103-
```js
104-
// Example with TextView in Android
105-
methods: {
106-
creatingView: function(args) {
107-
const nativeView = new android.widget.TextView(args.context);
108-
nativeView.setSingleLine(true);
109-
nativeView.setEllipsize(android.text.TextUtils.TruncateAt.END);
110-
nativeView.setText("Native View - Android");
111-
args.view = nativeView;
112-
}
113-
}
114-
// Example with UILabel in iOS
115-
methods: {
116-
creatingView: function(args) {
117-
const nativeView = new UILabel();
118-
nativeView.text = "Native View - iOS";
119-
args.view = nativeView;
120-
}
121-
}
122-
```
123-
124-
/// -->
18+
<<< @/../examples/src/ui/Placeholder/template.xml#example
19+
<<< @/../examples/src/ui/Placeholder/template.ts#example
12520

12621
## Props
12722

12823
### ...Inherited
12924

130-
Additional inherited properties not shown. Refer to the [API Reference](https://docs.nativescript.org/api-reference/classes/placeholder)
25+
For additional inherited properties, refer to the [API Reference](/api/class/Placeholder).
13126

13227
## Events
13328

13429
### creatingView
13530

136-
Emitted when building the UI, the event args allow passing a native view instance back via `args.view`.
137-
138-
#### CreateViewEventData
31+
```ts
32+
on('creatingView', (args: CreateViewEventData) => {
33+
const placeholder = args.object as Placeholder
34+
args.view = someNativeView
35+
})
36+
```
13937

140-
<!-- todo: perhaps just link to API ref. -->
38+
Emitted when building the UI, the event args allow passing a native view instance back via `args.view`.
14139

142-
| Name | Type | Description |
143-
| --------- | ----- | -------------------------------------------------------- |
144-
| `view` | `any` | The native view that should be added to the visual tree. |
145-
| `context` | `any` | _Optional_: An optional context for creating the view. |
40+
See [CreateViewEventData](/api/interface/CreateViewEventData)

‎examples/flows/screenshots.js

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,5 +9,6 @@ output.screenshots = [
99
'Image',
1010
'Label',
1111
'ListPicker',
12-
'ListView'
12+
'ListView',
13+
'Placeholder'
1314
]

‎examples/src/ui/ActivityIndicator/template.xml

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
1-
<Page xmlns:ios="_">
1+
<Page xmlns:ios="_" xmlns:android="_">
22
<GridLayout>
3-
<ContentView verticalAlignment="center" horizontalAlignment="center">
3+
<!-- Actual example shown in code examples/used in apps. -->
4+
<ContentView verticalAlignment="center" horizontalAlignment="center" android:visibility="collapse">
45
<!-- #region example -->
56
<ActivityIndicator busy="true" />
67
<!-- #endregion example -->
@@ -20,4 +21,4 @@
2021
backgroundColor="white" />
2122
</GridLayout>
2223
</GridLayout>
23-
</Page>
24+
</Page>

‎examples/src/ui/Placeholder/template.ts

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
// #region example
2+
import { Utils } from '@nativescript/core'
3+
4+
export function creatingView(args) {
5+
let nativeView
6+
if (global.isIOS) {
7+
// Example with UITextView on iOS
8+
nativeView = UITextView.new()
9+
nativeView.text = 'Native View (iOS)'
10+
} else if (global.isAndroid) {
11+
// Example with TextView on Android
12+
nativeView = new android.widget.TextView(
13+
Utils.android.getApplicationContext()
14+
)
15+
nativeView.setText('Native View (Android)')
16+
}
17+
18+
// assign it to args.view so NativeScript can place it into the UI
19+
args.view = nativeView
20+
}
21+
// #endregion example

‎examples/src/ui/Placeholder/template.xml

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
<Page navigatingTo="navigatingTo">
2+
<GridLayout>
3+
<ContentView verticalAlignment="center" horizontalAlignment="center">
4+
<!-- #region example -->
5+
<Placeholder creatingView="creatingView" />
6+
<!-- #endregion example -->
7+
</ContentView>
8+
</GridLayout>
9+
</Page>

0 commit comments

Comments
 (0)