Supporting BlackBerry Passport – SeeTheBiggerPicture ‘live’

You followed my article series HowTo Support BlackBerry Passport as a native Cascades Developer ?

You learned all about the new things:

• Signature Action
• Compact ActionBar
• Branding Color
• Switching Themes
• Gestures on touch enabled Keyboard
• More space on Passport’s big screen

I finally created three short Videos to demo how this is looking and working in a real-life application.

ekkes tea Timer

A little Utility APP – only one Screen, some animations and settings.

ekkes EXPRESS charts

ekkes EXPRESS charts allow to easy create a business chart diagram on-the-fly and to save this as an Image.

Primary use-case of this app is to be integrated like a PlugIn into BlackBerry EXPRESS – a cool app to create nice looking presentations directly from your phone.

Conference2Go IoT Conference

This Video demonstrates what it means to have such a big screen from Passport together with touch enabled keyboard.

Support BlackBerry Passport and OS 10.3

As you can see OS 10.3 gives your apps a new fresh UI and allows easier navigation through complex apps.

I really recommend not simply to update your app – you have to rethink UI and Navigation !

Have Fun with 10.3.

Any questions ? Please public at Cascades Forums or via Twitter.

 

‘ekkes Express Charts’: Export/Import Charts

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.

Export / Import Charts…

…with a little help of Cascades Invokation Framework

Images of your charts are stored at the folder you defined from App – Settings, so you can easy send them to your friends or colleagues. But what about the data and all the properties and colors you set to create a good looking chart ?

This data is stored inside your APP’s sandbox, so it’s a safe place, but you cannot access it from other applications or File Manager.

The good news: I implemented an easy way to transfer the data without making it public visible.

If your friend doesn’t know about ‘ekkes Express Charts’ you can invite him / her easy from Home Page Action Bar via BBM.

Here’s the workflow if you want to send the data to a friend or colleague:

1. Exporting

Viewing or editing a single chart data you can export this one from Action Bar – Overflow menu:

Sending more then one chart data you can do a long-press on the List Page and select all the charts you want to export:

ekkes Express Charts will collect the data, create an attachment and open a predefined  Message Composer:

…all is done inside the app using Invocation Framework. See here to learn about invoking Core Apps like Message Composer.

2. Importing

Now on the other side where your friend gets your email:

As described in the body the only thing he / she has to do: Tap on the attached file and …

… by magic ‘ekkes Express Charts’ will be opened – doesn’t matter if it’s already running or not – and display this dialog to the user:

You will see how many data charts were sent and get a list of the titles to be sure it’s the right import file.

The application will add them all to the list of charts and update the UI of the List Page – doesn’t matter which Page you’re just working on. Your current workflow won’t be interrupted.

How is this ‘by-magic-open-the-app-from-an-email-attachment‘ done ? Again it’s the Invokation Framework !

I added the information into the bar-descriptor.xml:

<invoke-target id="org.ekkescorner.YOUR_UNIQUE_ID_HERE">
    <invoke-target-type>application</invoke-target-type>
    <invoke-target-name>ekkes Express Charts Import Data</invoke-target-name>
    <icon>
        <image>icon.png</image>
    </icon>
    <filter>
        <action>bb.action.OPEN</action>
        <mime-type>*</mime-type>
        <property var="exts" value="eecimp"/>
        <property var="uris" value="file://,data://"/>
    </filter>
</invoke-target>

Now if you click on a file with extension .eecimp ekkes Express Charts will be invoked 🙂

In your app you can detect if the app was launched by the user or if the app was invoked and then do what you want to do.

I told you that the data transfer was safe letting you data private. How is this done ?

Inside the application – sandbox all data is stored as JSON. (I wrote about using JSON a blog entry here)

If you take a look at the content of the .eecimp file you’ll see something like this:

{
   "exportedCharts" : "AwPuJ1JzovCJXJ.....4os370QllfA=="
}

It’s a JSON, but I scrambled the content with a key known by my app. So your data is protected and my app, too because if someone creates a fake .eecimp file it will open the app, but I can simply detect that I have to ignore the content.

Over all you see: with a little help of Invokation Framework you can create smooth workflows – not only inside your app – also between two apps as I demonstrated here.

This was only the first part of using Invokation Framework inside ‘ekkes Express Charts’ – read more about invoking my app from BlackBerry EXPRESS or 3rd party apps here: (TBD)

Try it out and have FUN.

‘ekkes Express Charts’: Easy Data Entry

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.

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:

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:

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:

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.

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

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:

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

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

Have FUN with ekkes Express Charts 🙂

Create Charts on-the-fly with ‘ekkes Express Charts’ for BlackBerry 10

As you know I’m writing Business Apps for BlackBerry 10 and in such apps like SerCar10  there’s always the need to display some charts in dasboards, per ex. seeing Order Entry for the last 8 quarters as a Bar Chart diagram.

So I developed this to be used in my applications.

I’m also creating countless presentations: really complex ones for my sessions at developer conferences using Keynote / PowerPoint, but also from time to time to create them on-the-go for a presentation at customer site.

Probably you already know BlackBerry EXPRESS – a cool APP to create presentations on-the-fly directly from your BlackBerry 10 device. This enables a very short workflow:

• create the slides using BlackBerry EXPRESS (perhaps in the train on the way to customer or meeting)
• connect your BlackBerry 10 device to HDMI (even wireless using Miracast)
• do the high-quality (HD) and great looking presentation

BlackBerry EXPRESS allows you to insert Images, Titles, Chapters, Bullets but is missing the ability to create Charts.

I blogged about HowTo create a Bar Chart using Cascades and got a request from BlackBerry Sweden (Cascades) if I would like to write an application which can be invoked from BlackBerry EXPRESS.

I looked around at BlackBerry World for native Chart applications and didn’t found a good one certified as Built-For-BlackBerry.

Finally I created a fully customizable Chart – Creation APP and you can use it also as a standalone app or integrate into 3rdParty using Invokation framework.

There will be some blogs about the workflows HowTo use ekkes Express Charts and also some tips & tricks how it’s done from a developer POV.

Let’s start downloading the APP and taking a look at some screenshots to get an overview. ekkesExpressCharts is available at BlackBerry World as a FREE application. You can download here:

ekkesExpressCharts need a minimum OS of 10.2.0 and runs on all devices like Z10 / Z30:

Q5/Q10 (supporting ShortCuts):

You can define your Chart in detail – here’s the overview Page:

Define your Colors for background or text (Labels):

Set your column properties:

Set the padding (free space around the chart diagram:

There’s even a switch to set the correct bottom padding for BlackBerry EXPRESS. In EXPRESS you select an Image and then enter the title which is shown half transparent above the Image. leaving 113px at the bottom and it will fit perfect.

There’s an overview of all your charts from where you can directly preview/capture the image or edit the properties or export and compose a message:

Easy Data Entry allows you to create all at once: enter number of columns, title, lable, values and get the chart.

Preview always gives you feedback how the image will look like – you can rotate and test in Portrait or Landscape.

Hint: for BlackBerry EXPRESS you should always use Landscape.

Coming from BlackBerry EXPRESS inserting an Image you can select ‘ekeksExpressCharts’

then you can create or get your chart and go back to BlackBerry EXPRESS.

More Chart Types will come !

I started with two Chart types built using native cascades controls: Bar Charts and Slider Charts.

More Chart Types will come soon – also import/export as CSV

BES 10

BTW: ekkes Express Charts also is running well in Work Perimeter and Images can be stored at BlackBerry Work Drives if you’re using BES10

———

Please try it out and give me feedback – you can do this from inside of the app: by email (Application Menu – feedback) or using BlackBerry Channel (ekkes-corner TAB)

Have FUN and stay tuned – more detailed articles will follow soon ! Here are the first ones:

• Easy Data Entry – going the Fast lane
• Import / Export – with a little help from Invokation Framework
• ….