Touch vs Keyboard

Please take a look at the workflow in ‘Strict’ Mode – explained in detail here.

All works well and looks great on Touch Device and I have tried to minimze the Touch Gestures / Taps you have to do while starting a new Tracking.

Same will also work on a Keyboard Device like Q10 or Q5 – demonstrated in detail for ‘Free’Mode here.

hmmm – there’s a keyboard integrated – can we do it even faster ? Yep !

Type’n’Go TimeTracker:

G → (Alt-n) → G → G → G

That’s all 🙂

Let’s take a look how this works:

At first there’s the HomeScreen:

Q10home_G

Typing ‘G‘ will do the same as Tapping on the Action ‘go‘ – if you don’t know which Key to type, tap on the overflow menu (three dots):

Q10home_Menu_G

Please notice the small shortcut listed in top-right corner. This is only visible on a keyboard device. Developing this is easy:

ActionItem {
    id: startStopAction
    title: trackedTimeContainer.running ? qsTr("STOP") : qsTr("START")
    ActionBar.placement: ActionBarPlacement.OnBar
    imageSource: trackedTimeContainer.running ? "asset:///images/stop.png" : "asset:///images/go.png"
    onTriggered: {
        if (trackedTimeContainer.running) {
            pushTimeStopper()
        } else {
            pushTimeStarter()
        }
    }
    shortcuts: [
        Shortcut {
            enabled: trackedTimeContainer.running
            key: qsTr("s")
        },
        Shortcut {
            enabled: !trackedTimeContainer.running
            key: qsTr("g")
        }
    ]
}

This Action is a Toggle between Start and Stop, so there are two different titles, Icons and also ShortCuts.

Important: please don’t only add your shortcut this way:

key: “s”

surround the Key with qsTr() – then you can translate the key into different languages. It’s not an easy task to find unique letters through the app – esp. because there are some default keys already used (and translated) by the System to Edit, Zoom, Delete etc. Take a look at the documentation.

Back to our workflow: ‘G’ opens the next Page where you can select the Category:

Q10 what

If the selected Category is OK we simply type again ‘G‘ to go on. To select another category without moving your fingers to the Icon and Tapping you can type ‘alt n‘ to get this:

Q10altn

The Selection Marker was moved from ‘Working Time’ to ‘Work Readyness’. Typing alt-n again and again the Marker will cycle through all Categories.

Then typing ‘G‘ you can Go On to the next Page – typing ‘U‘ you can cancel (Undo) the workflow.

Shortcuts for ‘G’ and ‘U’ are similar to the Action from HomeScreen:

ActionItem {
    title: qsTr("Cancel")
    ActionBar.placement: ActionBarPlacement.OnBar
    imageSource: "asset:///images/ic_cancel.png"
    onTriggered: {
        cancelAndBack()
    }
    shortcuts: [
        SystemShortcut {
            type: SystemShortcuts.Undo
        }
    ]
},
ActionItem {
    title: qsTr("Go On")
    imageSource: "asset:///images/ic_next.png"
    ActionBar.placement: ActionBarPlacement.OnBar
    onTriggered: {
        saveAndGoOn()
    }
    shortcuts: [
        Shortcut {
            key: qsTr("g")
        }
    ]
}

Only different: ‘U’ (Undo) is a predefined SystemShortcut, where ‘G’ is a custom Shortcut.

Categories are displayed using a ListView with a simple ArrayDataModel. Besides the Category Icon there’s a green Marker Icon, This Marker Icon is only visible if Category Id == selected Id.

Categories will be selected by Tapping on an ImageView and Going On with selected Category from ListView function onTriggered{}:

onTriggered: {
    newCategory = categoryDataModel.data(indexPath)
    saveAndGoOn()
}

Nothing special.

To enable Shortcuts we have to tell Cascades that the ListView should receive Keys (input.route) and to add shortcuts to the ListView itself:

ListView {
     id: categoryList
     inputRoute.primaryKeyTarget: true
     shortcuts: [
         Shortcut {
             key: qsTr("Alt + n")
             onTriggered: {
                 toggleCategory()
             }
         }
     ]
     function toggleCategory(){
         if(newCategory < 5){
             newCategory +=1
         } else {
             newCategory = 0
         }
     }
}

‘G’oing on opens the next Page with details.

Request Focus

There are no or up to three Input Fields on the next Page: Project, Order, Task. It depends from Settings – Categories which fields will be displayed.

Q10 details

To enter data on a Touch Device you simply Tap on the field and enter the data. On a keyboard device it would be nice to enter data immediately without tapping into a field. That’s the reason why we need requestFocus().

Hint: think carefully when to request the focus, because on a Touch device the virtual keyboard will come up and perhaps this is not what user expects. So I’m always testing if working on a Device with a physical keyboard:

bool ApplicationUI::isKeyboardDevice() {
    bb::device::HardwareInfo hardware;
    return hardware.isPhysicalKeyboardDevice();
}

and here’s the code from QML:

    function requestFocusFirstField(){
        if(!app.isKeyboardDevice()){
            return
        }
        if(projectContainer.visible){
            if(projectText.text.length == 0){
                projectText.requestFocus()
                return
            }
        }
        if(orderContainer.visible){
            if(orderText.text.length == 0){
                orderText.requestFocus()
                return
            }
        }
        if(taskContainer.visible){
            if(taskText.text.length == 0){
                taskText.requestFocus()
            }
        }
    }

I’m checking if the field is visible and also if there’s already some text typed.

If visible and field is empty User can start typing immediately.

TimeTracker Shortcuts

TimeTracker only uses less easy-to-remember Shortcuts:

  • G:
    • Go / Start / Go On
  • S:
    • Stop / Stop+Go
  • U:
    • Undo / Cancel
  • E:
    • Edit
  • alt N:
    • Next Category / Next Selection
  • alt shift R:
    • Refresh
  • 1,2,3,4:
    • Select Tab #1 … #4
  • +:
    • Add new Record

Hint: to type a ‘1’ on Q10 you have to type ‘alt w’. Adding a Shortcut’1′  to an Action doesn’t work, adding ‘alt w’ works, but then also ‘alt w’ is displayed as shortcut from menu. You can use a trick: define two shortcuts and the first one will be displayed:

shortcuts: [
    Shortcut {
        key: "1"
    },
    Shortcut {
        key: qsTr("Alt + w")
    }
]

Q10short1234

Business Users want to be productive

I really recommend every developer to think carefully about using Shortcuts to simplify workflows or speed things up: BlackBerry Business App Users want to be productive !