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