Cascades Development

[rakesh86shankar]

Hi,

I want to know how do i add the assets image to the container background.Background of container supports paint,how do i add the image from assests folder to it?

Regards

Rakesh Shankar.P

[AleksDef]

You don't add it directly to the Container. You add an ImageView into the container which will hold your image. The Container should have DockLayout set, whereas the ImageView can be centered. You might want to assure that the Container and the ImageView are the same size by setting the preferredWidth and preferredHeight properties of both. Be sure that the ImageView is the first child of the container, so that everything else (the true contents of the container) are above the ImageView. Take a look at DockLayout, and the first sample application they offer on the Cascades website.

[Cozz]

You can set the background color of it...

Container {
               background: Color.create ("#262626")

                   }

But I don't think there's any way of setting an image type directly to the container properties. You would have to use ImageView inside the container.

// snippet of some of my sample code

 Container {
                     
                 background: Color.create ("#262626")

                 layout: StackLayout {
                 topPadding: 20
                 rightPadding: topPadding
                 leftPadding: rightPadding
                                     }
                 
       
                ImageView {
                imageSource: "asset:///images/header2.png"
                preferredWidth: 768
                preferredHeight: 250
                          }

                          }

If there is a way directly then I'm listening.

[rakesh86shankar]

Hi Guys,I finally added the background as you suggested,I will share the code with you,Can anyone tel me ,is there any short way ,other than this

	/***Page Declaration****/
	Page *initialPage  = new Page();

    /***Layout Properties Declaration ****/
	
	DockLayoutProperties* layoutProperties = DockLayoutProperties::create()
	        .horizontal(HorizontalAlignment::Fill)
	        .vertical(VerticalAlignment::Fill);

	 stacklayoutProperties = StackLayoutProperties::create()
	   	         .horizontal(HorizontalAlignment::Center);

	//***Dock Layout for Getting Background***/ 

	basecontainer = Container::create()
	    	    	         .preferredSize(1024, 600)
	    	    	        .scrollMode(ScrollMode::Horizontal)
	    	    	        .layout(new DockLayout());

	ImageView *background = new ImageView();
	Image backgroundAsset = Image(QUrl("asset:///images/background.png"));
	background->setImage(backgroundAsset);
	background->setLayoutProperties(layoutProperties);
	basecontainer->add(background);



	//**StackLayout which containes header with its Image View ***/
	
	Container *Rollcontainer = Container::create()
	    					 .scrollMode(ScrollMode::Horizontal)
	    	    	        .layout( new StackLayout());

	
	
	
	StackLayout* myLayout = StackLayout::create()
	                         .top(120);
	
	//**Another StackLayout which displays data contents of the page ***
    
	container = Container::create()
    					.scrollMode(ScrollMode::Horizontal)
    	    	        .layout(myLayout);


    container->setLayoutProperties(stacklayoutProperties);

    
    ImageView *object1 = new ImageView();
    Image imageAsset = Image(QUrl("asset:///images/Header1.png"));
    object1->setImage(imageAsset);
    
    //Image View added to the former stack Layout
    Rollcontainer->add(object1);


    Label *label = Label::create().text("Demo Application");

    //Data Elements Will be added to Later Container
    container->add(label);

    Rollcontainer->add(container);
    basecontainer->add(Rollcontainer);


    /*
    QString buttonText = "DemoButton";
    Button *button = new Button();
    button->setText(buttonText);
    container->add(button);
    QObject::connect(button, SIGNAL(clicked()), this, SLOT(HandleClick()));
	*/

    initialPage->setContent(basecontainer);
   // mRoot->push(initialPage);
    Application::setScene(initialPage);

Regards

Rakesh Shankar.P

[rakesh86shankar]

Is there anyother thing that needs to be done properly can be suggested 

[Suns33k3r]

You can do it using ImagePaint with respective ImagePaintDefinition and attachedObjects property of Container.

Here is sample code how to do it:

Container {

    id: rootContainer

    background: back.imagePaint

    attachedObjects: [

        ImagePaintDefinition {

            id: back

            repeatPattern: RepeatPattern.XY

            imageSource: "asset:///container/tiled/core16x16"

        }

    ]

}

Check documentation here:

https://developer.blackberry.com/cascades/reference/bb__cascades__imagepaintdefinition.html

And source code on GitHub:

https://github.com/blackberry/Cascades-Samples/blob/master/cascadescookbookqml/assets/ImagePaint.qml

[JohnPinkerton]

Does anyone know of a way to just make the background image bleed, so to speak? I don't want it stretching to fill the container, or repeating, I just want the image in the container, and then to let other things overlap the image.

[raj_jyani]

Hi,

For CPP

ImagePaint paint(Image(QUrl("asset:///Imagessplash_screen_portrait.png")));

Container * container = Container::create();
container->setBackground(paint);