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.