UI FeedBack

Smartface Home Smartface Reference Release Notes
Search…
UI FeedBack
Vibration
Vibration enables haptics enhance interactions and convey useful information to users through the sense of touch. Haptic effect simulates physical vibrates when an action triggered. On iOS vibrate which has three level as high, medium and low works on only on iPhone7 and above. Android Vibration Effect's time can be managed depending given value.
TypeScript
1
import PageSampleDesign from 'generated/pages/page1';
2
import FlexLayout from '@smartface/native/ui/flexlayout';
3
import Application from '@smartface/native/application';
4
import Button from '@smartface/native/ui/button';
5
import System from '@smartface/native/device/system';
6
import Invocation from '@smartface/native/util/iOS/invocation';
7
​
8
//You should create new Page from UI-Editor and extend with it.
9
export default class Sample extends PageSampleDesign {
10
​
11
    myButton: Button;
12
​
13
    constructor() {
14
        super();
15
        // Overrides super.onShow method
16
        this.onShow = onShow.bind(this, this.onShow.bind(this));
17
        // Overrides super.onLoad method
18
        this.onLoad = onLoad.bind(this, this.onLoad.bind(this));
19
​
20
        this.layout.flexDirection = FlexLayout.FlexDirection.COLUMN;
21
        this.layout.justifyContent = FlexLayout.JustifyContent.CENTER;
22
        this.layout.alignItems = FlexLayout.AlignItems.CENTER;
23
    }
24
}
25
​
26
/**
27
 * @event onShow
28
 * This event is called when a page appears on the screen (everytime).
29
 * @param {function} superOnShow super onShow function
30
 * @param {Object} parameters passed from Router.go function
31
 */
32
function onShow(superOnShow: () => void) {
33
    const { headerBar } = this;
34
    superOnShow();
35
    Application.statusBar.visible = false;
36
    headerBar.visible = false;
37
}
38
​
39
/**
40
 * @event onLoad
41
 * This event is called once when page is created.
42
 * @param {function} superOnLoad super onLoad function
43
 */
44
function onLoad(superOnLoad: () => void) {
45
    superOnLoad();
46
​
47
    this.myButton = new Button({
48
        text: "Vibrate",
49
        onPress: () => {
50
            //Android
51
            if (System.OS === System.OSType.ANDROID) {
52
                System.vibrate({ millisecond: 50 });
53
            }
54
            //iOS
55
            if (System.OS === System.OSType.ANDROID) {
56
                //@ts-ignore
57
                let feedbackAlloc = Invocation.invokeClassMethod("UIImpactFeedbackGenerator", "alloc", [], "id");
58
                // 0: Light , 1: Medium , 2: Heavy
59
                //@ts-ignore
60
                let argStyle = new Invocation.Argument({
61
                    type: "NSInteger",
62
                    value: 0
63
                });
64
                //@ts-ignore
65
                let feedbackGenerator = Invocation.invokeInstanceMethod(feedbackAlloc, "initWithStyle:", [argStyle], "NSObject");
66
                //@ts-ignore
67
                Invocation.invokeInstanceMethod(feedbackGenerator, "prepare", []);
68
                //@ts-ignore
69
                Invocation.invokeInstanceMethod(feedbackGenerator, "impactOccurred", []);
70
                feedbackGenerator = undefined;
71
                feedbackAlloc = undefined;
72
            }
73
        }
74
    });
75
    this.layout.addChild(this.myButton, "myButton", ".sf-button", {
76
        width: 100,
77
        height: 50,
78
        textColor: "#000000",
79
        backgroundColor: "#00A1F1"
80
    });
81
​
82
}
83
​
Copied!
Using Vibrate Effect With Notifications
When a notification is received vibrate effect can be used all the way.
TypeScript
1
import System from '@smartface/native/ui/system';
2
Notifications.onNotificationReceive = function(e): void {
3
      //Android
4
      if (System.OS === System.OSType.ANDROID) {
5
        System.vibrate({ millisecond: 50 }); 
6
      }
7
      //iOS
8
      if (System.OS === System.OSType.IOS) {
9
        var feedbackAlloc = Invocation.invokeClassMethod("UIImpactFeedbackGenerator", "alloc", [], "id");
10
        // 0: Light , 1: Medium , 2: Heavy
11
        var argStyle = new Invocation.Argument({
12
            type: "NSInteger",
13
            value: 0
14
        });
15
        var feedbackGenerator = Invocation.invokeInstanceMethod(feedbackAlloc, "initWithStyle:", [argStyle], "NSObject");
16
        Invocation.invokeInstanceMethod(feedbackGenerator, "prepare", []);
17
        Invocation.invokeInstanceMethod(feedbackGenerator, "impactOccurred", []);
18
        feedbackGenerator = undefined;
19
        feedbackAlloc = undefined;
20
      }
21
    }
Copied!
System
DocumentPicker
Last modified 2mo ago
Copy link
Contents
Vibration
Using Vibrate Effect With Notifications