Unboxing BlackBerry Dev Alpha B device

As I mentioned in my last port, I received Dev Alpha B device as part of Port-A-Thon event from BlackBerry.

Here is unboxing snaps of Dev Alpha B device.

Device has hardware key to capture photo, increase decrease volume. Other side there is micro USB connection for data transfer and charging. It also support mico HDMI for TV Out.

On top there is Power button and Audion jack.

In box, it comes with Battery, USB port and charger.

Inside there is slot for micro SD card and SIM card.

And that's it, It also boots fine.

Unboxing BlackBerry PlayBook

I received BlackBerry playbook as reward of Port-A-Thon developer event from BlackBerry.

 Here is unboxing snaps of PlayBook. I got 32GB version of it.

It comes with nice protective pouch, USB cable and Power cord.

It can play high definition video quite smoothly. It also pre-loded with  Need for Speed game.

It has micro usb connector for data transfer and power charging. It also has micro HDMI for TV Out.

I think it browser is quite power full. It support multiple tab and quite intuitive way to switch between the tabs. And as you can see it can show flash content quite well. You tube movie and player from other live streaming service was playing smoothly with browser.

BlackBerry Port-A-Thon rewards

Recently BlackBerry hosted Port-A-Thon event. Event was about porting apps to new BB10 platform. Based on number of Apps ported they will provide appropriate rewards.

I also took part in this event, I ported my Meego based Qt application to BB10 device and I was rewarded with BB10 Dev Aplha B device and a BlackBerry Playbook.

Its quite encouraging how BlackBerry is providing developer support and hosting various event. Its helps both BlackBerry and developers.

Following are few snaps, I will create another post for unboxing for Playbook and Dev Alpha

Taking screenshot of app in BB10 Dev Alpha Device

I was trying to search a nice screen capture application for BB10 Dev Alpha device. I could not find any such application.

But after searching blackberry support forum for a while. I found that there is quite a easy way to take screen shot.

On Dev Alpha device if you press the Volume Up and Volume Down buttons at the same time. It will take a screen shot of whatever currently displayed on screen.

Creating custom Dialog using BB10 Cascades QML API

I recently got BB10 Dev Aplha Device to port my Harmattan Qt application to BB10 device.

I started with porting my audiobook reader application. Cascades QML components are quite similar to Harmattan QML components. Thought it requires some effort to port from Harmattan to Cascade.

I will post about my porting effort in this post and following posts.

In this post I will write about how to create simple Dialog box using Cascade QML component.

My final dialog looks like below.

For creating dialog you need to extend Dialog component. I added signal to indicate action from dialog to other component.

I think code does not required much explanation so following is code for creating and calling the dialog.

import bb.cascades 1.0

Dialog {
    id: dialog
      
    signal sampleSignal(string text);
    
    attachedObjects: [
      ...
    ]

    Container {
        id: mainContainer
        preferredWidth: 700 
        layout: DockLayout {}
        verticalAlignment: VerticalAlignment.Center;
        horizontalAlignment: HorizontalAlignment.Center;
           
        background: Color.create("#f8f8f8")
        
        Container {
            layout: StackLayout {}
            horizontalAlignment: HorizontalAlignment.Center
            verticalAlignment: VerticalAlignment.Center
            
            Container {
                layout: DockLayout {}
                background: Color.create("#6121be");
                horizontalAlignment: HorizontalAlignment.Fill;
                preferredHeight: 120
                rightPadding: 10
                leftPadding: 10
                
                Label {
                    text: "Dialog title" ;              
                    verticalAlignment: VerticalAlignment.Center;
                    textStyle{
                        base: titleStyle.style
                    }
                }
                
                ImageView {            
                    verticalAlignment: VerticalAlignment.Center;
                    horizontalAlignment: HorizontalAlignment.Right;
                    imageSource: "close.png"
                    onTouch: {
                        dialog.close();
                    }
                }   
            }
            Container {
                layout: StackLayout {}
                topPadding: 20
                bottomPadding: 20
                rightPadding: 10
                leftPadding: 10
                
                TextField {
                    id: name
                    hintText: "Add text here..."              
                }
                
                Divider {}             
                
                Button {
                    id: doneButton
                    text: "Done"
                    horizontalAlignment: HorizontalAlignment.Fill;
                    onClicked: {
                        doneButton.textAdded();
                    }
                    
                    function textAdded() {
                        dialog.sampleSignal(name.text);
                        dialog.close();
                    }
                }
            }
        }
    }
}

To use system font style I am using TextStyleDefinition and providing SystemDefaults as base style.

    attachedObjects: [
        TextStyleDefinition {
            id: titleStyle
            base: SystemDefaults.TextStyles.BigText
            color: Color.White
        },
        TextStyleDefinition {
            id: titleTextStyle
            base: SystemDefaults.TextStyles.TitleText
            color: Color.Black
        }
    ]

To use this dialog you can use following code. To open dialog, i created openDialog() function. Function used dlgDef, ComponentDefinition to create dialog object at runtime. You also need to connection signal from dialog to function defined in current page, which is calling this function, like this.

 dialog.sampleSignal.connect( page.dialogClosed );

    property Dialog dialog;
    function openDialog() {     
        if ( !dialog ) {
            dialog = dlgDef.createObject();
            //connecting signal to function
            dialog.sampleSignal.connect( page.dialogClosed );
        }         
        dialog.open();
    }

Dialog definition and function which will be invoked on signal can be defined like below.

            attachedObjects: [
                ComponentDefinition {
                    id: dlgDef;
                    source: "Dialog.qml";
         }     
     ]


 function dialogClosed(text) {
     console.debug("Dialog closed do something");
 }

That's all. Its quite easy to create custom dialog with Cascade QML.

Using Timer with BB10 Cascades QML code

It is possible to use code Qt and QML API for BB10 development. But to get more native look and feel, I started exploring BB10 Cascades API.

Soon I started working with cascade API, I realized Timer QML element is now no longer available with Cascade QML API.

However you can export QTimer to cascade QML and use QTimer with your QML code.

Following example shows how that can be done.

First export QTimer to QML, by registering it with metasystem. You can put this code in main.cpp.

qmlRegisterType<QTimer>("my.library", 1, 0, "QTimer");

Then in QML file where you want to use QTimer import namespace where QTimer is exported, like below.

import my.library 1.0

Then define QTimer as attached object in QML.

attachedObjects: [
        QTimer{
            id: timer
            //set singleshot property if requireds
            singleShot: true
            //set interval
            interval: 5000
            
            onTimeout:{
                //do some stuff
            }
        }
    ]

You can start and stop timer by using it's id and then calling appropriate slots.

    function startTimer(){
        timer.restart();
    }
    
    function stopTimer() {
        timer.stop();
    }