Tuesday, December 25, 2012

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.





Friday, December 21, 2012

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);
}

Thursday, December 20, 2012

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

BB 10 Simple ListView

In BB 10 we can have  a custom list in our own way but firstly it is important that how we achieve the basic list for this purpose i wants to show an example of a basic listview, for this purpose Make a new Project with name HelloPractce and edit the main.qml  and just copy the following code


import bb.cascades 1.0
   
Page {
    content: Container {
        background: Color.White
        ListView {
           // rootIndexPath: [0]
            dataModel: XmlDataModel { source: "model.xml" }
        }
    }
}

after this step prepare a model.xml file and put inside the asset folder/directory

inside model.xml copy the code lines:


<model>
  <header title="Asia">
    <item title="India" />
    <item title="China" />
     <item title="Afghanistan" />
    <item title="SriLanka" />
     <item title="Pakistan" />
    <item title="Bangladesh" />
  </header>
  <header title="Europe">
    <item title="England" />
    <item title="France" />
     <item title="Spain" />
    <item title="Germany" />
     <item title="Holand" />
    <item title="Turkey" />
  </header>
</model>

now simply run the program. we can see the desired output as follows



Wednesday, December 19, 2012

BB 10 writing UI through C++

 we can also write the UI elements with C++ in our applications. we can follow the following steps and we can achieve the desired!!

copy the given below images in "images" folder under the assets







1)  Make a new project on IDE with name HelloWorld2 remove the main.qml and update the code as given below :

a) main.cpp


#include "HelloWorld2.h"

using namespace bb::cascades;

using ::bb::cascades::Application;

Q_DECL_EXPORT int main(int argc, char **argv)
{
    // Instantiate the main application constructor.
    Application app(argc, argv);

    // Create our application.
    HelloWorld2 mainApp;

    // We complete the transaction started in the main application constructor and start the
    // client event loop here. When loop is exited the Application deletes the scene which
    // deletes all its children (per QT rules for children).
    return Application::exec();
}


b) HelloWorld2.h code


#ifndef HelloWorld2_H
#define HelloWorld2_H

#include <bb/cascades/Application>

using namespace bb::cascades;

namespace bb
{
    namespace cascades
    {
        class Container;
    }
}

class HelloWorld2: public QObject
{
    Q_OBJECT

public:
    HelloWorld2 ();

private:

    Container *setUpImageContainer();


    Container *setUpSliderContainer(Container *imageContainer);

};

#endif

c) HelloWorld2.cpp

// Default empty project template
#include "HelloWorld2.h"

#include <bb/cascades/Color>
#include <bb/cascades/Container>
#include <bb/cascades/DockLayout>
#include <bb/cascades/ImageView>
#include <bb/cascades/Page>
#include <bb/cascades/Slider>
#include <bb/cascades/StackLayout>
#include <bb/cascades/StackLayoutProperties>

using namespace bb::cascades;

HelloWorld2::HelloWorld2() {
Container *contentContainer = new Container();
contentContainer->setLayout(StackLayout::create());
contentContainer->setTopPadding(20.0f);
contentContainer->setBackground(Color::fromARGB(0x1E7022));


Container *imageContainer = setUpImageContainer();
imageContainer->setHorizontalAlignment(HorizontalAlignment::Center);


Container *sliderContainer = setUpSliderContainer(imageContainer);
sliderContainer->setHorizontalAlignment(HorizontalAlignment::Center);


contentContainer->add(imageContainer);
contentContainer->add(sliderContainer);


Page *page = new Page();
page->setContent(contentContainer);


Application::instance()->setScene(page);
}

Container *HelloWorld2::setUpImageContainer() {

Container* nightAndDayContainer = new Container();
nightAndDayContainer->setLayout(new DockLayout());


ImageView* night = ImageView::create("asset:///images/night.jpg");


night->setHorizontalAlignment(HorizontalAlignment::Center);
night->setVerticalAlignment(VerticalAlignment::Center);


ImageView* day = ImageView::create("asset:///images/day.jpg").opacity(0);


day->setHorizontalAlignment(HorizontalAlignment::Center);
day->setVerticalAlignment(VerticalAlignment::Center);


day->setObjectName("dayImage");


nightAndDayContainer->add(night);
nightAndDayContainer->add(day);

return nightAndDayContainer;
}

Container *HelloWorld2::setUpSliderContainer(Container *imageContainer) {

Container* sliderContainer =
Container::create().left(20.0f).right(20.0f).top(25.0f).bottom(
25.0f);
sliderContainer->setLayout(
StackLayout::create().orientation(LayoutOrientation::LeftToRight));


Slider* opacitySlider = Slider::create().leftMargin(20.0f).rightMargin(
20.0f);


opacitySlider->setLayoutProperties(
StackLayoutProperties::create().spaceQuota(1.0f));
opacitySlider->setHorizontalAlignment(HorizontalAlignment::Fill);


ImageView* moon = ImageView::create("asset:///images/moon.png");
moon->setVerticalAlignment(VerticalAlignment::Center);
ImageView* sun = ImageView::create("asset:///images/sun.png");
sun->setVerticalAlignment(VerticalAlignment::Center);


ImageView *dayImage = imageContainer->findChild<ImageView*>("dayImage");


connect(opacitySlider, SIGNAL(immediateValueChanged(float)), dayImage,
SLOT(setOpacity(float)));


sliderContainer->add(moon);
sliderContainer->add(opacitySlider);
sliderContainer->add(sun);

return sliderContainer;
}

Now finally after running the application you will get the output on the simulator as follows


Have a great day with BB10

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