‘ekkes Express Charts’: Easy Data Entry

January 30, 2014 — Leave a comment

ekkes Express Charts is an application to create charts on-the-fly and can be integrated into BlackBerry EXPRESS.

Here’s an Overview about the APP and HowTo download und use.

Easy Data Entry

One of the goals of my new app is to enhance productivity and always to have a Fast Lane.

fast_lane

That’s why I implemented the Easy Data Entry.

Starting the app you’ll get a list of all your saved chart data. The very first time this list will be empty and there’s a Dialog to let the user know about this:

IMG_00000796dialog

If you want to use emoticons, don’t forget the property:

infoDialog.emoticonsEnabled = true

As next you can tell the app how many columns you want to enter:

IMG_00000797picker

From the Picker you can seelct between 2 and 9 Columns. Then tap on the ‘Go on’ Action.

Please notice that the Back Button in the ActionBar changed to Cancel to let you know that you can cancel this and gob back to the previous Page.

To overwrite teh default Back Button you can add this to your code:

paneProperties: NavigationPaneProperties {
    backButton: ActionItem {
        title: qsTr("Cancel")
        imageSource: "asset:///images/ic_cancel.png"
        onTriggered: {
            navigationPane.pop()
        }
    }
}

Cascades makes it easy to create Objects dynamically and from the number you selected the next Page will display exactly the fields you need to enter your data:

IMG_00000798

there are 3 rows with Label, Value and optional Unit.

To create objects dynamically you have to attach the Component Definition – in this case describing the UI for one row:

attachedObjects: [
     ComponentDefinition {
         id: dataRowComponent
         Container {
             id: dataContainer
     ...... your UI controls
         } // end data container
     }, // dataRowComponent
     ...
]

and from a simple loop create them dynamically:

function createColumns(){
     var max = selectNumberColumnsContainer.columnCount
     for (var i = 0; i < max; i ++) {
         innerContainer.add(dataRowComponent.createObject())
     }
 }

The keyboard comes up automatically, because the first field requests the focus.

titleText.requestFocus()

This is important if working with devices like Q5 / Q10: the user can immediately start to type. Without requesting the focus he/she has to tap on the field before typing.

Filling out all the fields from last field the keyboard automatically disappears so you can see it all and verify.

IMG_00000799

Before going on and customize or save the data you can directly control the generated chart clicking on the ‘Preview’ Button:

IMG_00000800

You can rotate to Landscape and if it looks ok capture the Chart and Save the Image or go back and customize.

There are some small things implemented to create a great UX, per ex.:

If coming from BlackBerry EXPRESS the ActionBar looks different:

action_bar_capture_EXPRESS

Coming from another 3rdParty appliucation you’ll get this one:

action_bar_capture_3rd

Sending the Image back automatically closes the Page and returns to the calling application.

Have FUN with ekkes Express Charts🙂

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