Tuesday, December 18, 2012

First BB10 SAMPLE Application


In the QNX Momentics IDE, click File > New > BlackBerry Project.
Select Application > Cascades and click Next.
Click Standard empty project and click Next.
In the Project Name field, provide a name for your project (for example, HelloWorld). Click Finish.
If you're prompted to open the QML Editing perspective, click Yes.

Make a folder with name images inside assets and put these images inside the folder





Go to yours main.qml inside assets  and the following code


// Default empty project template
import bb.cascades 1.0

// creates one page with a label

Page {
    Container {
        id: containerID
        background: Color.create("#549A79")
        topPadding: 20.0
        layout: StackLayout {
        }
        Container {
            horizontalAlignment: HorizontalAlignment.Center
            layout: DockLayout {
            }
            ImageView {
                id: night
                 opacity: 1
                imageSource: "asset:///images/night.jpg"
                horizontalAlignment: HorizontalAlignment.Center
            }

            // The day image. Opacity is set to 0.0 on construction
            // so that the night image is visible behind it.
            ImageView {
                id: day
                opacity: 0
                imageSource: "asset:///images/day.jpg"
                horizontalAlignment: HorizontalAlignment.Center
            }
        }
        Container {
            
            leftPadding: 20
            rightPadding: 20
            topPadding: 25
            bottomPadding: 25
            layout: StackLayout {
                orientation: LayoutOrientation.LeftToRight
            }
            ImageView {
                imageSource: "asset:///images/moon.png"
                verticalAlignment: VerticalAlignment.Center
            }
            // The slider used to adjust the opacity of the image
            Slider {
                leftMargin: 20
                rightMargin: 20
                horizontalAlignment: HorizontalAlignment.Fill
                layoutProperties: StackLayoutProperties {
                    spaceQuota: 1
                }
                onImmediateValueChanged: {
                    // This is where the day-night opacity value is done.
                    day.opacity = immediateValue;
                    //night.opacity=immediateValue;
                }
                visible: true
               
            }
            // The sun icon
            ImageView {
                imageSource: "asset:///images/sun.png"
                verticalAlignment: VerticalAlignment.Center
            }
        } // End of the slider container
    } // End of the root container
}

simply run the application now you can see the output on yours simulator as follows

Have a great day with BB10 and feel free to share knowledge at my mail id upadhyay.jitesh@gmail.com

No comments:

Post a Comment