Screen
API Reference: Device.Screen
Screen is used to retrieve device display properties.
TypeScript
1
import PageSampleDesign from 'generated/pages/pageSample';
2
import FlexLayout from '@smartface/native/ui/flexlayout';
3
import Application from '@smartface/native/application';
4
import Screen from '@smartface/native/device/screen';
5
6
//You should create new Page from UI-Editor and extend with it.
7
export default class Sample extends PageSampleDesign {
8
9
constructor() {
10
super();
11
// Overrides super.onShow method
12
this.onShow = onShow.bind(this, this.onShow.bind(this));
13
// Overrides super.onLoad method
14
this.onLoad = onLoad.bind(this, this.onLoad.bind(this));
15
16
this.layout.flexDirection = FlexLayout.FlexDirection.COLUMN;
17
this.layout.justifyContent = FlexLayout.JustifyContent.CENTER;
18
this.layout.alignItems = FlexLayout.AlignItems.CENTER;
19
}
20
}
21
22
/**
23
* @event onShow
24
* This event is called when a page appears on the screen (everytime).
25
* @param {function} superOnShow super onShow function
26
* @param {Object} parameters passed from Router.go function
27
*/
28
function onShow(superOnShow: () => void) {
29
const { headerBar } = this;
30
superOnShow();
31
Application.statusBar.visible = false;
32
headerBar.visible = false;
33
}
34
35
/**
36
* @event onLoad
37
* This event is called once when page is created.
38
* @param {function} superOnLoad super onLoad function
39
*/
40
function onLoad(superOnLoad: () => void) {
41
superOnLoad();
42
43
console.log("Device.Screen.dpi: " + Screen.dpi);
44
console.log("Device.Screen.width: " + Screen.width);
45
console.log("Device.Screen.height: " + Screen.height);
46
console.log("Device.Screen.touchSupported: " + Screen.touchSupported);
47
console.log("Device.Screen.orientation: " + Screen.orientation);
48
}
49
Copied!
It is also possible to capture a screenshot with the Device.Screen.capture function.
TypeScript
JavaScript
1
import PageSampleDesign from 'generated/pages/pageSample';
2
import FlexLayout from '@smartface/native/ui/flexlayout';
3
import Application from '@smartface/native/application';
4
import ImageView from '@smartface/native/ui/imageview';
5
import Button from '@smartface/native/ui/button';
6
import Screen from '@smartface/native/device/screen';
7
8
//You should create new Page from UI-Editor and extend with it.
9
export default class Sample extends PageSampleDesign {
10
11
myImageView: ImageView;
12
myButton: Button;
13
14
constructor() {
15
super();
16
// Overrides super.onShow method
17
this.onShow = onShow.bind(this, this.onShow.bind(this));
18
// Overrides super.onLoad method
19
this.onLoad = onLoad.bind(this, this.onLoad.bind(this));
20
21
this.layout.flexDirection = FlexLayout.FlexDirection.COLUMN;
22
this.layout.justifyContent = FlexLayout.JustifyContent.CENTER;
23
this.layout.alignItems = FlexLayout.AlignItems.CENTER;
24
}
25
}
26
27
/**
28
* @event onShow
29
* This event is called when a page appears on the screen (everytime).
30
* @param {function} superOnShow super onShow function
31
* @param {Object} parameters passed from Router.go function
32
*/
33
function onShow(superOnShow: () => void) {
34
const { headerBar } = this;
35
superOnShow();
36
Application.statusBar.visible = false;
37
headerBar.visible = false;
38
}
39
40
/**
41
* @event onLoad
42
* This event is called once when page is created.
43
* @param {function} superOnLoad super onLoad function
44
*/
45
function onLoad(superOnLoad: () => void) {
46
superOnLoad();
47
48
this.myImageView = new ImageView();
49
50
this.layout.addChild(this.myImageView, "myImageView", ".sf-imageView", {
51
width: 500,
52
height: 500
53
});
54
55
this.myButton = new Button({
56
onPress: () => {
57
this.myImageView.image = Screen.capture();
58
}
59
})
60
61
this.layout.addChild(this.myButton, "myButton", ".sf-button", {
62
width: 100,
63
height: 100,
64
backgroundColor: "#FFFF00"
65
});
66
67
}
68
Copied!
1
const Page = require("sf-core/ui/page");
2
const extend = require("js-base/core/extend");
3
const Image = require('sf-core/ui/image');
4
const ImageView = require('sf-core/ui/imageview');
5
const Button = require('sf-core/ui/button');
6
const Color = require('sf-core/ui/color');
7
const Screen = require('sf-core/device/screen');
8
9
var Page1 = extend(Page)(
10
function(_super) {
11
_super(this, {
12
13
onShow: function(params) {
14
Application.statusBar.visible = false;
15
this.headerBar.visible = false;
16
17
}
18
});
19
var screenshot;
20
21
22
var myImageView = new ImageView({
23
width: 500,
24
height: 500,
25
backgroundColor: Color.BLACK,
26
});
27
this.layout.addChild(myImageView);
28
var myButton = new Button({
29
width: 100,
30
height: 100,
31
backgroundColor: Color.RED,
32
onPress: function() {
33
myImageView.image = Screen.capture();
34
}
35
})
36
this.layout.addChild(myButton);
37
}
38
);
39
module.exports = Page1;
Copied!
Last modified 2mo ago
Copy link