BlackBerry-10 The Day the Earth Stood Still

Research In Motion is about to enter the battle of its life, and as you'll see in my review of its new flagship, the BlackBerry Z10, it's using everything in its arsenal to win. Maybe win is the wrong word; perhaps victory for BlackBerry right now is something more like not losing everything....

Are you still clinging on to the hope that RIM are going to make their glorious return into the smartphone market, and release a phone with BlackBerry 10 on board that will reverse the company’s recent fortunes?

If the answer is yes, then it looks like you are going to be very impressed with what BlackBerry has to offer, based on early previews. RIM may be taking forever to publicly release their highly anticipated new software, but on all accounts it finally looks like RIM has an OS in the making that can actually rival Android and iOS.

A few years ago, BlackBerry smartphones were the cream of the crop, with everyone using them as their main messaging tool and generally owning a BlackBerry handset because it was ‘cool’ to do so. Now, with the emergence of apps like Whatsapp, suddenly the need for a BlackBerry device has died down considerably and the bland OS that currently greets handsets on the market does little to change to mindset of consumers who have now started to embrace Android and iOS, after initially being a loyal BlackBerry lover.

An interesting video has emerged courtesy of the BBC, in which RIM CEO Thorsten Heins explains why he believes that BlackBerry 10 will once again give fans a reason to celebrate. The video contains an exclusive preview of BB10 in action and our first impressions is that it actually looks pretty good.

For starters, we are loving the design touches that RIM has implemented into the brand new BlackBerry 10 lockscreen. The device running the new software may not bring up notifications as the handset is locked, but you will be able to get a preview of what is on your homescreen simply by swiping upwards on the screen, but not fully if you don’t want to completely unlock the device.

As with most new mobile operating systems these days, RIM has placed the importance of social media as a top priority of BB10, and there will be a new service called the Hub, which will allow you to get your daily social media fix inside one integrated service – RIM even promises that you can updated your various ‘spaces’, without the need to actually open a respective app.

The days are early yet, but BlackBerry 10 is looking really nice. The biggest problem that we can see is convincing consumers to hold on tight till it releases sometime in 2013. Android Key Lime Pie 4.2 is obviously coming soon, while Apple may even have iOS 7 out by the time BlackBerry 10 is fully rolled out across all BlackBerry models.

Android Application PORTING to BlackBerry 10

Today i tried with the android application porting to BB10, as we know that we can do it, i followed few steps which i wants to share with you.

1) make sure that you have eclipse android setup with minimum eclipse 3.8, android 2.3.3 with api level 10.

hope you have the above setup with given requirements as

a) Eclipse version 3.8
b)Android SDK platform-tools
c)SDK platform Android 2.3.3, API 10


install the BlackBerry Plug-in for Android Development Tools

Before you begin, make sure you have installed Eclipse 3.8

In Eclipse, on the Help menu, click Install New Software > Add.
In the Name field, enter a name for the plug-in.
In the the Location field, enter the URL of the update site for the plug-in. The URL of the update site is http://bdsc.webapps.blackberry.com/android/downloads/eclipseplugin/.
Click OK.
In the Install window, in the Name field, select the BlackBerry Plug-in for Android Apps check box, and also select the check boxes for the items under it.
If you are using the beta update site and do not have the ADT Plug-in, the newest version will be installed at this time as well.
Click Next.
Complete the instructions in the Review Licenses window. Click Finish.
After you install the plug-in, you should verify that the installation correctly located the Android SDK in the plug-in preferences. To verify the location, in Eclipse, on the Window menu, click Preferences > Android and ensure the path in the SDK location field matches the location of your installation folder.

After confirming the filepath, you should also verify that the SDK Platform Android 2.3.3, API 10 was installed correctly in Eclipse. To verify and download if necessary, on the Window menu, click Android SDK Manager and look in the Packages section and ensure that the status of SDK Platform Android 2.3.3, API 10 displays as Installed.

2) Create a new project with name HelloWorld
we need to make sure that we followed given steps :

# In the Build Target section, select Android 2.3.3 as the Target Name.
# In the Application Info window, in the Minimum SDK field, make sure to select to 10 (Android 2.3.3).

After making the HelloWorld , In Eclipse, in the Package Explorer navigation window, right-click your Android project. Click BlackBerry Tools > Add BlackBerry Nature to Project.

we need signing keys for our purpose and for this :

In Eclipse, on the Windows menu, click Preferences > BlackBerry > BlackBerry Tools SDK > Bar Signer or Targets.
Click BlackBerry Tablet OS Deployment Setup Wizard.

go through the https://www.blackberry.com/SignedKeys/codesigning.html for code signing keys.


In Eclipse, on the Windows menu, click Preferences > BlackBerry > BlackBerry Tools SDK > Bar Signer.
In the RIM Signing Authority section, click Register.
In the Register with RIM Signing Authority window, complete the RDK CSJ Path field and the PBDT CSJ Path field by browsing to the location of the CSJ files.
In the CSJ Pin path field, enter the PIN that you used to fill out the code signing keys request form.
Choose a password in the CSK Password field. This is the keystore password that you use to create a developer certificate.


Create a developer certificate

In Eclipse, on the Windows menu, click Preferences > BlackBerry > BlackBerry Tools SDK > Bar Signer.
In the Developer Certificate section, click Create certificate. If you previously created a developer certificate, click Select certificate... and browse to the location of the developer certificate.
If you are creating a new certificate, then in the Create Developer Certificate window, in the Certificate Path field, type the path of the location where you want to store your developer certificate.
In the Author field, type your company name.
In the Keystore Password field, type a password to control access to the certificate. This is the CSK Password that you created to register the code signing keys.
In the Confirm Keystore Password field, type the password you provided in the previous step.
Click OK.


Configure target device

To test your Android application, you must use the plug-in to configure the device that you will perform the testing on. This can be your BlackBerry PlayBook tablet, the BlackBerry Tablet Simulator, or your BlackBerry 10 device. You can configure a target device using the setup wizard or the plug-in preferences. The following steps show you how to configure the target device using the plug-in preferences.

In Eclipse, on the Windows menu, click Preferences > BlackBerry > BlackBerry Tools SDK > Targets. Click Add to add a target.
Complete the Device Name field, Device IP field and Password field.
Click OK.
Switching

for the emulator of blackberry BB10 go through http://us.blackberry.com/sites/developers/resources/simulators.html
and download the vmvare player and bb10 dev alpha simulator

Test your application

Check for compatibility

This check allows you to verify if your Android application is compatibile with the BlackBerry Tablet OS or BlackBerry 10. You can use this check to know the errors in your application and rework it.

To perform a compatibility test, in Eclipse, in the Package Explorer navigation window, right-click your Android project. Click BlackBerry Tools > Verify Apk.

Launch configuration

You can create and launch a configuration to deploy and test your application on the target device. Remember that the file deployed in this task is an unsigned .bar file.

The following steps show you how to set up a run or a debug configuration in Eclipse.

In Eclipse, in the Package Explorer navigation window, right-click your Android project. Click on either Run As > Run Configurations or Debug As > Debug Configurations.

In the Run Configurations or Debug Configurations window, in the left side navigation window, under BlackBerry Android Application, select your application.

Modify the configuration based on your requirements. Make sure to select the correct target device under the Target tab.

Click either Run or Debug.

Once you have created a launch configuration, you can launch it again using the following step.

In Eclipse, in the Package Explorer navigation window, right-click your Android project. Click on either Run As > BlackBerry Android Launch or Debug As > BlackBerry Android Launch.

finally you can see the output as follows:

BlackBerry10 showing HTML

just this snippet to yours main.qml and run the emulator!!

// Default empty project template
import bb.cascades 1.0

// creates one page with a label

Page {
    Container {
        layout: DockLayout {
        }
        WebView {
            id: webView
            html: "<html>
            <body>
           
            <h1>Jitesh Upadhyay</h1>
           
            <p>please visit me at http://www.blogger.com/profile/16670167524123575126</p>
           
            </body>
            </html>
            "
        }
    }
}

BlackBerry 10 WebView Example

it is easy to use and to show a web view in BB 10. we can follow just few examples and can see the web view  on our device or on emulator.

1) create a new project with name WebViewExample

now edit the main.qml and copy the given below code to it


import bb.cascades 1.0


NavigationPane {
    id: myNavPane
    Page {
        Container {
            layout: StackLayout {
                orientation: LayoutOrientation.LeftToRight
            }
            TextField {
                id: mySearchTerm
               text: "jitesh upadhyay's blog"
            }
            Button {
                id: myButton
                text: "Search"

                onClicked: {
                    var page = pageDefinition.createObject();
                    myNavPane.push(page);
                }

                attachedObjects: ComponentDefinition {
                    id: pageDefinition
                    source: "mysearch.qml"
                } // end attachedObjects
            } // end Button
        } // end Container
    } // end Page
} // end NavigationPane

2) in second step just make a new qml document with name mysearch.qml

and copy the following code to it


import bb.cascades 1.0

Page {
    ScrollView {
        Container {
            background: Color.create("#f8f8f8")
            layout: StackLayout {
                orientation: LayoutOrientation.TopToBottom
            }
            Label {
                id: statusLabel
                leftMargin: 10
                text: "No webpage yet."
            }
            WebView {//http://www.blogger.com/profile/16670167524123575126
                url: "https://www.google.com/search?q=" + mySearchTerm.text
                onLoadingChanged: {
                    if (loadRequest.status == WebLoadStatus.Started) {
                        statusLabel.setText("Load started.")
                    } else if (loadRequest.status == WebLoadStatus.Succeeded) {
                        statusLabel.setText("Load finished.")
                    } else if (loadRequest.status == WebLoadStatus.Failed) {
                        statusLabel.setText("Load failed.")
                    }
                }
            } // end WebView
        } // end container
    } // end Scrollview
}// end page

3) just click the button and you can visit my blog on yours currently running web view.

BlackBerry 10 C++ and QML integration

in BlackBerry 10 we can integrate QML TO C++ CODE and C++ CODE to QML. create a new project with name HelloPratice2 we can see it with following code snipet. just copy these code snipets to  mai.qml and correspondin CPP file.

1)copy the below code to main.qml


import bb.cascades 1.0

Page {
    property alias labelText: label.text
    Container {
        Label {
            text: "User name: " + propertyMap.name
        }
        Label {
            text: "Phone number: " + propertyMap.phone
        }
        Label {
            id: label
            text: "Label"
        }
        Button {
            objectName: "button"
            text: "Button"
        }
    }
}

2) HelloPractice2.cpp file should have following code :

// Default empty project template

#include "HelloPractice2.hpp"

#include <bb/cascades/Application>

#include <bb/cascades/QmlDocument>

#include <bb/cascades/AbstractPane>

using namespace bb::cascades;

HelloPractice2::HelloPractice2(bb::cascades::Application *app)

: QObject(app)

{

    // create scene document from main.qml asset

    // set parent to created document to ensure it exists for the whole application lifetime

    QmlDocument *qml = QmlDocument::create("asset:///main.qml").parent(this);

    // create root object for the UI

    AbstractPane *root = qml->createRootObject<AbstractPane>();

    // set created root object as a scene

    QDeclarativePropertyMap* propertyMap = new QDeclarativePropertyMap;

    propertyMap->insert("name", QVariant(QString("Wes Barichak")));

    propertyMap->insert("phone", QVariant(QString("519-555-0199")));

    qml->setContextProperty("propertyMap", propertyMap);

    QObject *newButton = root->findChild<QObject*>("button");

    if (newButton)

        newButton->setProperty("text", "New button text");

    app->setScene(root);

}

BB10 GroupDataModel example

just copy the code into main.qml and you can see a groupdatamodel implementation


import bb.cascades 1.0

Page {
    content: Container {
        attachedObjects: [
            GroupDataModel {
                id: groupDataModel

                // Sort the data items based first on country name, and
                // then by city name (if the country names are equal)
                sortingKeys: [
                    "countryName",
                    "cityName"
                ]

                // Specify that headers should reflect the full value
                // of the sorting key property, instead of just the
                // first letter of the property
                grouping: ItemGrouping.ByFullValue
            }
        ]
        ListView {
            dataModel: groupDataModel

            // After the list is created, add the data items
            onCreationCompleted: {
                groupDataModel.insert({
                        "countryName": "India",
                        "cityName": "New Delhi"
                    });
                groupDataModel.insert({
                        "countryName": "India",
                        "cityName": "Mumbai"
                    });
                groupDataModel.insert({
                        "countryName": "India",
                        "cityName": "Bangalore"
                    });
                groupDataModel.insert({
                        "countryName": "India",
                        "cityName": "Hyderabad"
                    });
                groupDataModel.insert({
                        "countryName": "India",
                        "cityName": "Chennai"
                    });
                groupDataModel.insert({
                        "countryName": "India",
                        "cityName": "Lucknow"
                    });
                groupDataModel.insert({
                        "countryName": "India",
                        "cityName": "Patna"
                    });
                groupDataModel.insert({
                        "countryName": "Bangladesh",
                        "cityName": "Khulna"
                    });
                groupDataModel.insert({
                        "countryName": "Bangladesh",
                        "cityName": "Dhaka"
                    });
                groupDataModel.insert({
                        "countryName": "Bangladesh",
                        "cityName": "Chitagong"
                    });
                groupDataModel.insert({
                        "countryName": "Pakistan",
                        "cityName": "Karachi"
                    });
                groupDataModel.insert({
                        "countryName": "Pakistan",
                        "cityName": "Hyderabad"
                    });
                groupDataModel.insert({
                        "countryName": "Bangladesh",
                        "cityName": "Lahore"
                    });
            }
        } // end of ListView
    } // end of Container
}// end of Page

BB 10 Full Custom ListView

I was just practiced with the listview in BB 10 and made a code which is about to achieve a customlistview and it is nice to do with the  QML . it is quite easy to understand and easy to write code. to achieve the desired we need to copy the code ghave to run the application. we can follow the following steps :)

1)  Make a project with the name HellpPractice.
copy the given below code to yours main.qml


import bb.cascades 1.0

Page {
    content: Container {
        // Create a ListView that uses an XML data model
        ListView {
            dataModel: XmlDataModel {
                source: "models/xmldata.xml"
            }

            // Use a ListItemComponent to determine which property in the
            // data model is displayed for each list item
            listItemComponents: [
                ListItemComponent {
                    type: "recipeitem"
                    Container {
                        horizontalAlignment: HorizontalAlignment.Center
                        layout: DockLayout {
                        }

                        // Item background image.
                        ImageView {
                            imageSource: "asset:///images/listbackground.png"
                            preferredWidth: 768
                            preferredHeight: 250
                        }
                        Container {
                            id: highlightContainer
                            background: Color.create("#75b5d3")
                            opacity: 0.0
                            preferredWidth: 760
                            preferredHeight: 252
                            horizontalAlignment: HorizontalAlignment.Center
                        }

                        // The Item content an image and a text
                        Container {
                            leftPadding: 3
                            horizontalAlignment: HorizontalAlignment.Fill
                            layout: StackLayout {
                                orientation: LayoutOrientation.LeftToRight
                            }
                            ImageView {
                                preferredWidth: 250
                                preferredHeight: 250
                                verticalAlignment: VerticalAlignment.Top

                                // The image is bound to the data in models/recipemodel.xml image attribute.
                                imageSource: ListItemData.image
                            }
                            Label {
                                // The title is bound to the data in models/recipemodel.xml title attribute.
                                text: ListItemData.title
                                leftMargin: 30
                                verticalAlignment: VerticalAlignment.Center
                                textStyle.base: recipeItem.ListItem.view.itemTextStyle.style
                            } // Label
                        } // Container
                        function setHighlight(highlighted) {
                            if (highlighted) {
                                highlightContainer.opacity = 0.9;
                            } else {
                                highlightContainer.opacity = 0.0;
                            }
                        }

                        // Connect the onActivedChanged signal to the highlight function
                        ListItem.onActivationChanged: {
                            setHighlight(ListItem.active);
                        }

                        // Connect the onSelectedChanged signal to the highlight function
                        ListItem.onSelectionChanged: {
                            setHighlight(ListItem.selected);
                        }
                    } // Container
                }
            ]

            // When an item is selected, update the text in the TextField
            // to display the status of the new item
            onTriggered: {
                var selectedItem = dataModel.data(indexPath);
                textField.text = selectedItem.title;
            }
        }

        // Create a text field to display the status of the selected item
        TextField {
            id: textField
            text: ""
        }
    } // end of top-level Container
    // Highlight function for the highlight Container
}// end of Page

2) now make a xml document with name xmldata and in this xmldata.xml copy following lines

<root>

    <recipeitem title="Custom List"        image="../images/1.png"   />

    <recipeitem title="BlackBerry 10"              image="../images/2.png"         />

    <recipeitem title="Mobile App Development"          image="../images/3.png"       />

    <recipeitem title="Great achievers"              image="../images/4.png"        />

    <recipeitem title="Good work"              image="../images/1.png"  />

    <recipeitem title="Welcome guys"           image="../images/6.png"        />

    

</root>

3) make images folder inside the assets folder and put all these images inside that==>

4) Now it is time to see the output and you can see the output as desired on yours emulator. it should look like this

now you can see yours custom list and while you will click on a list element, there will be change on text values, which is according to yours index values