Supporting BlackBerry Classic – #3 Focus

February 17, 2015 — Leave a comment

This is part #3 of my blog series ‘Supporting BlackBerry Classic’ as native BlackBerry10 developer.

Please read about screen sizes and first steps here and about Shortcuts here.

BlackBerry Classic isn’t only a great BlackBerry 10 Device with a physical keyboard and touch screen above –

there’s also the TrackPad back which gives you control on focus and speeds up working:

classic_trackpad

On a ‘normal’ Touchscreen Device (with or without a physical Keyboard) most times you’re not thinking about foucs: you touch on a UI Control or ActionItem and then something happens or you scroll through the content (using your fingers on touchable screen or on touchable keyboard on BlackBerry Passport)

Using a TrackPad is different. Think using a very small TouchPad outside of your TouchScreen or using a Mouse with clickable TrackWeel.

The TrackPad makes it very easy to move around on your screen and to ‘click’ on something. Of course you want to know which UI Control gets the Focus before clicking on it. In most cases Cascades does this for you and highlights the control getting the focus.

Here’s a TabbedPane where the actualTab is selected as usual:

select_vs_focus

While using the TrackPad the focus was shown to let you know which Tab gets the focus. Clicking on the Tab with focus selects this Tab.

Using a TrackPad you – as a developer – must always think about focus vs selected. For users of your app it should be easy to distinguish.

For this TabbedPane Cascades uses different background colors from the uipalette of your Theme to highlight the control with focus.

There are some UI Controls not getting focus by default: per ex. Labels, Containers, ImageView.

Here’s an ImageView using focusPolicy to let Cascades know that this control needs to get the focus:

ImageView {
    id: startButton
    navigation {
        focusPolicy: NavigationFocusPolicy.Focusable
    }
    // ...
    gestureHandlers: [
        TapHandler {
            onTapped: {
                // doSomething
            }
        }
    ]
}

Using the TrackPad and ‘clicking’ on the Image will be the same as tapping on it: the onTapped() was executed – so it’s the same as tapping with a finger on it.

Tip: don’t use onTouch() instead of TapHandler – clicking the TrackPad will do nothing !

Using the NavigationPolicy.Focusable Cascades will highlight the ImageView with focus:

00_focus_startbutton

There are two lines at top and bottom and the background is slightly different. If this is ok for you, you’re done.

There will be situations where you want to change something more. Here’s another ImageView used as a placeholder for an empty list as long as there’s no data to be displayed. The Image has a Taphandler and ‘clicked’ there will be some informations for the user why there’s no data.

Here are the ImageViews on bright or dark theme and NO focus:

01_no_focus

Before going on with focus from TrackPad take a look at the ActionBar: the Signature ActionItem in the middle is disabled, because we don’t have data.

NEVER disable a Signature ActionItem ! Signature Actionitems are colored and it’s not easy to know if it’s enabled or disabled – a better way is to remove the ActionItem and to add as soon as there’s some data:

01_no_signature

Adding or removing is easy done:

    attachedObjects: [
        ActionItem {
            id: summaryOpenAction
            title: qsTr("Summary")
            imageSource: "asset:///images/ic_calendar_month.png"
            ActionBar.placement: ActionBarPlacement.Signature
            onTriggered: {
                navigationPane.pushTimeSummaryOpen()
            }
        }
    ]
ScrollView {
    id: scrollView
    visible: false
    onVisibleChanged: {
        if(visible){
            removeAction(summaryOpenAction)
        } else {
            addAction(summaryOpenAction)
        }
    }
    // ...

and now the ImageView with focus from TrackPad navigation:

02_default_focus

Cascades allows you to customize the colors or to change the brightness or saturation.

Same ImageViews customized:

03_customized

The Label on top of the ImageView becomes red if focused and the brightness was changed so the user knows immediately which control has focus.

 

Container {
    ImageView {
        id: image_01
        navigation.focusPolicy: NavigationFocusPolicy.Focusable
        //...
        effects: [
            BrightnessEffect {
                enabled: image_01.navigation.wantsHighlight
                brightness: rootPane.isDark()? 50.0 : -10.0
            }
        ]
    }
    Label {
        id: label_01
        text: ""
        //...
        textStyle.color: image_01.navigation.wantsHighlight? Color.Red :Color.Black
    }
    gestureHandlers: [
        TapHandler {
            onTapped: {
                doSomething()
            }
        }
    ]
    // ...

The ImageView gets NavigationFocusPolicy.Focusable and a BrightnessEffect with different values for dark or bright theme.

Text color of the Label changes from black to red as soon as the ImageView wants to be highlighted.

Tip: Don’t forget: if coloring Labels try to use Colors from your uipalette.

Below you can see some Labels using uipalette.primaryBase and uipalette.primary:

08_palette_colors

Label {
     text: qsTr("in")
     textStyle.fontSize: FontSize.Large
     textStyle.color: ui.palette.primaryBase
 }
 Label {
     id: daysLeftLabel
     text: ""
     textStyle.fontSize: FontSize.XXLarge
     textStyle.color: ui.palette.primary
 }
 Label {
     text: qsTr("days")
     textStyle.fontSize: FontSize.Large
     textStyle.color: ui.palette.primaryBase
 }

Documentation TrackPad, BrightnessEffect

stay tuned – more info HowTo support BlackBerry Classic will follow.

No Comments

Be the first to start the conversation!

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s