BlackBerry 10 Mobile Application Development: December 2012

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