Qml gridlayout rectangle icons

I'm reproducing the rectangle icons on the homescreen of BB10 in a grid format. Right now I have a two-dimensional image of gird with my icons (no distinguishable area) and would like to see the box while that on top of my background color. How does qml cascading. Thank you

You can use use ListView with the presentation of the grid.  Then using components customized to list items.  You should be able to define a background color of each element (transparent grey), have an ImageView and etiquette in addition to this.  Finally, have a background (anything of your choice) for the entire Page... this piece would be independent of the ListView.

Tags: BlackBerry Developers

Similar Questions

  • Custom in QML for waterfalls icon button

    Just thought I'd share this in case anyone is looking for a solution get a button that is customized by using Cascades.
    The idea is to have a button with an icon and label.

    I use 2 nine slices images as a background.

    In C++, I have a method called navClick(QString name), I can't tell which button was clicked by his label.

    IconButton.qml

    import bb.cascades 1.0
    
    Container {
        layout: DockLayout {
        }
        property alias image: img.imageSource
        property alias text: lbl.text
    
        leftMargin: 10
        rightMargin: 10
        preferredWidth: 400
    
        //
        onTouch: {
            if (event.isUp ()) {
                root.navClick (text);
                console.log (text);
            }
            //
            if (event.isDown () || event.isMove ()) {
                panel.imageSource = "asset:///panel_down";
            } else {
                panel.imageSource = "asset:///panel_up"
            }
        } 
    
       //    onTouchExit: {        panel.imageSource = "asset:///ui/panel_up"    }    //
        ImageView {
            id: "panel"
            imageSource: "asset:///panel_up"
            preferredWidth: 400
            minHeight: 178
            scalingMethod: ScalingMethod.Fill
        }
    
        //
        Container {
            layoutProperties: StackLayoutProperties {
                horizontalAlignment: HorizontalAlignment.Center
            }
            preferredWidth: 400
            Container {
            }
            //
            ImageView {
                layoutProperties: StackLayoutProperties {
                    horizontalAlignment: HorizontalAlignment.Center
                }
                id: img
                imageSource: "asset:///test.png"
                topMargin: 40
                preferredWidth: 51
                preferredHeight: 51
            }
    
            //
            Label {
                layoutProperties: StackLayoutProperties {
                    horizontalAlignment: HorizontalAlignment.Center
                }
    
                //
                textStyle {
                    color: Color.White
                }
    
                //
                id: lbl
                text: "label"
                topMargin: 26
            }
        }
    }
    

    To use in your page layout, just add a defined IconButtonand the image and the text.

    Example:

            Container {
                topMargin: 25
                bottomMargin: 25
    
                 //
                layout: StackLayout {
                    layoutDirection: LayoutDirection.LeftToRight
                }
    
                //
                layoutProperties: StackLayoutProperties {
                    horizontalAlignment: HorizontalAlignment.Center
                }
    
                //
                IconButton {
                    image: "asset:///icon_btn_one"
                    text: "Button 1"
                }
    
                //
                IconButton {
                    image: "asset:///icon_btn_two"
                    text: "Button 2"
                }
    
                 //
                IconButton {
                    image: "asset:///icon_btn_three"
                    text: "Button 3"
                }
            }
    

    If you have ideas to improve this or suggest a better approach, I'd love to hear it.

    Update: added onTouchExit then it resets the State if you move out of the control.

    If you are using the class Button of Cascades, unfortunately, the layout of the text & image cannot be changed and the image is adjusted to fit in the button automatically. You must build your own button as you suggested, varying the properties of components content and layout accordingly.

    Kind regards

    Martin

  • Smartphones blackBerry black & blue rectangle icon with a white slash through the middle on a blackberry 8330

    I have a blackberry curve 8330 and recently noticed that when I make a call I have a black & blue rectangle with a white slash goes from the upper left to the lower right.  It is located next to the volume icon.

    Can someone tell me what is this icon and what it meant or how get rid of?

    My husband also has the same phone and it doesn't have this icon on its screen when an outgoing or calls received is connected.

    Help, please.

    Thank you

    His Audio Boost called, or Enhanced Audio.

    If you press the Green dial button > Menu > Options and let scroll down, you will see the option to turn it on or turn it off.

  • I updated Firefox and all the icons to the left of my favorites have disappeared! What happpened and how to bring them back?

    Where there are icons it is empty now places that are described in the points.

    Was it an update of Firefox 7 to 8 Firefox? I noticed that for the sites without a favicon, the "blank document" icon replaced by a "dotted rectangle" icon If you have lost the other icons, they should be recorded when you visit the site again. But this does not really explain where they went...

  • Icon of the element Cumbersom GRAND when drag & drop objects

    IM using Windows 7 Professional on my laptop and when I select a file (PDF, jpeg, etc.) in a folder and drag and drop it into another folder, a large icon that is heavy and gets in the way the destination folder appears. For example, if I move a PDF great PDF icon rises and I drag and drop it into the destination folder. The darn icon is so great that it makes it difficult to see exactly where you want to drop it. I am using Windows 7 on my desktop and when I do the same function, a very small rectangle icon or folder is used, which makes it very easy to see where I'm trying to drag and drop.

    How do I turn off these icons of gros point and use the little on in Windows 7 Professional?

    Click Start, right-click on the computer list and select Properties,

    In the upper left corner click on advanced system settings / Visual effects settings button / Visual effects section

    Scroll the list to see the contents of window while dragging / apply and OK.

    Restart your system that might not be necessary.

  • Rectangle vector four-point Garbage Matte Black on the outside

    First Pro 20141

    Win7 Pro 64 - bit SP1

    I have a sequence with a single clip on a single track.

    I give the clip an effect hiding transparency four points.

    I use the rectangle icon making it a vector of rectangle.

    I think outside of the rectangle to be black, because there is no undernneath clip.

    Why is outside the rectangle not black, but watch the video?

    Thanks in advance.

    Don't use the cache of transparency, rather twirl open the clip opacity and use the masks, it:

    MtD

  • How can I Preview app icons

    Hello

    I wonder if there are ways to get a glimpse of the icons somewhere on an iPhone app.

    I did some research and they said that apple will round off rectangle icons and create effects to them when importing images.

    Before that, are there ways in preview mode?

    Thank you.

    You can also you are an empty index.html on a Web server and put your application icon in various sizes (57, 72, 114 pixels) in the same directory as this index.html: name the files like this:

    • apple-touch-icon-57x57-precomposed.png
    • apple-touch-icon-72x72-precomposed.png
    • apple-touch-icon-114x114-precomposed.png

    If you then use mobile safari to visit this (empty) Web page and add it to the homescreen (through the "share" - menu) the png is used as the application icon for that Web page on your home screen and they look exactly as they will later as soon as they are a true icon of the application.

    If you want the added automatically shina, just drag the - precompose in the file name and the brightness will be added.

    • apple-touch-icon-57x57.png
    • apple-touch-icon-72x72.png
    • apple-touch-icon-114x114.png

    I don't know how he behaves with icons of the retina. Some state fair use a 512 x 512 icon and name it icon.png - touch-apple (apple-touch-icon - precomposed.png respectively). But you could also add the actual sizes needed for various devices.

    Good luck!

    Richard

  • Newbie HELP-Rectangle box

    I'm new to InDesign.  The guy who used to take care of our company directory in InDesign on the left.  I know very little about this software.  It has been days of trial and error, but am making progress.  I have the phone book for almost where I want to (I think), but can't figure out how to get rid of the outline of the rectangle box around the text.  I created the box by selecting the rectangle icon off the coast of the toolbar on the left, but I don't want the outline around the text that I put in.  Any help would be highly appreciated.  I'm an admin of systems AS400, not a graphic designer, so learn this stuff is like learning another language

    Select the area with the selection tool (arrow), make a right click, accident stroke weight: 0 if you view > show the contours of the block is turned on, you should be able to see the edge of the frame, even without a line on your monitor only, probably a blue line.

    Ken

  • Can't hear my music on my iMac speakers, when played from iTunes

    All of a sudden (from last week), I'm not able to hear the music I have, when played in iTunes on my iMac (late 2013, using OS X, El Capitan). I did not anything either on my sound system or external speakers at all... and in fact, they work very well with all the other software, websites, and regular sounds. It's just the music from iTunes I can't hear over the speakers. He's playing very well and I can see that visually... just can not hear anything. Boring... anyone so no matter what help they can offer me?  I use the latest version of the iTunes software (version: 12.3.2.35), and it worked very well in the beginning... until last week. Turned on the computer... and no sound of music! Thanks in advance.

    OK... never mind. Finally, I realized there is a small (one to the top triangle at the bottom of a rectangle) icon at the top of iTunes, next to the volume control bar. It allows you to choose which speakers to listen to music in strange thing is... I got my device 'Apple TV' selected and just need to select 'computer' in place... but I never changed it! So this means that I have to select 'Apple TV' every time I want to play the iTunes library on my Apple TV later? Weird. I hope this is changed in the software soon, if this is the case. Just another thing I need to do is NOT HOMOGENEOUS and it should be. Thank you! (I'll leave this place in case someone else has this problem and can not solve).

  • How to add sunrise as revelation of the scene

    Fairly new to Motion so looking for an approach

    I have a simple logo (it looks like a Sun) moving on the lower left display to around a mid point upward and a third from the left edge. The right side of the scene is text.

    I would start with a black screen and then reveal the text and background, as the sun rises, with passing arc at the bottom left to cover the entire Stadium...

    I tried just to add a rectangle, which is black with the transition to transparent gradient, then move across the stage... She has a straight line for the transition between black and transparent, with a few feathers... Close again not what I'm looking for.

    I tried to use a circle to cut off a bite of a rectangle for the entry of 'the arc of light' Sun, then move this arc across the stage to reveal black to transparent, yet not able to sort out how to scramble the transition of the circle surface of the rectangle.

    So, what's a way to create the lighting of the scene, as if the rising sun made enlightenment?

    Ideally, she would like to include the colors of the Sunrise - pink soft red glow... see how the sky moves from the darkness of the night in the full light of day... where the landscape is the image of the text and background on the stage.

    Any ideas how to make this happen?

    Thank you

    Fred

    Use a light object (or several lights). Object Menu > new light (command-shift-L).

    Note * using lights requires a 3D project. You will be asked to convert 2D, if that's where you started. IF you have a background that you do not want to "react" to the camera angles, you can change the type of group in 2D (either the Inspector's group in the list of layers by clicking on the "Stacked Rectangles" icon at the right edge of the column that will toggle between 2D and 3D.)

    If you use a type of spotlight, you can set the cone and blurred. You can also color the light. You can keyframe the position to animate it through your scene. You can keyframe the intensity to simulate the change from dark to light, etc...  If your logo is separated from the background, you can also add shadows. I recommend turning the opacity to about 30 and the sweetness up to about 20... but these parameters depend on the obscurity of your background items.

    Lights to create a whole new world...

    *******************

    48% gray half-cirlcle, character logo color gold (specially designed fonts) in 3D. Light = Spot, RGB color [1.0, 0.75, 0.65], = 578% intensity; Options Spotlight: The cone Angle = 4 °, blur = 27 °, diameter is 90.0; default values for the rest;

    Shadows under tension [opacity = 30%; Sweetness = 20; default values]

    *******************

  • Selection tool bug

    Just updated to 2015.2 and now whenever I use the selection tool to select a specific image in the scenario, the selection tool gets this rectangle icon below. and by clicking on this specific image selects all of this layer.

    I tried holding control and it allows me to select a single image, but seriously, I don't want to get used to that. How can I fix it?
    Is it available anywhere in the options? He is currently slow down my work flow to near irritation. Thanks in advance.

    selectionbug.jpg

    Hello

    Looks like you have activated WE span selection function option in the options from the timeline panel menu. Please turn off by

    -Click on the options menu in the timeline panel (available on the upper right corner of the timeline panel)

    -Select Span after selection menu to return to mode selection function of frame

    PS: this is not a change in the latest version. This is disabled by default as it used to be in previous versions.

    Thank you!

    Mohan

  • CS6 Design Standard does not download

    I clicked on the download for the suite and a white rectangle icon (with folded corner) appears, but nothing happens. This is a new macbook air.

    If you have a problem with the link below, use a different browser.


    Downloads available:

    Download and installation help links Adobe

    Help download and installation to Prodesigntools links can be found on the most linked pages.  They are essential; especially steps 1, 2 and 3.  If you click on a link that does not have these listed steps, open a second window by using the link to Lightroom 3 to see these "important Instructions".

  • How to send multiple photos with Revel on iPad/iphone?

    As far as I know, several photos cannot be sent by email only to facebook and twitter.  Is this correct?

    Currently, you can share photos on Facebook, Twitter, Flickr (Mac) + (adoberevel.com), e-mail (iOS 2.0.1) and message (iOS 2.0.1 Mac 1.10)

    According to the version of platform/app and view that you send from, you can send a link of the album, single file or multiple files.

    To send multiple files by e-mail in iOS, you first go to the album view, tap the arrow in the rectangle (icon action) on the part right superior, select share, press to select the photos you want to share and then tap on the word "e-mail" at the bottom in blue.

    Guinot

  • Import Figures problems

    I just started using Adobe Flash Pro CS5 for mac and I can't import figures to animate.  I watched Youtube videos and have reproduced what they do, but once I have import figure there is a box empty autour where figure should be.  In addition, the figure will appear in my library, but not in the stadium.  Is this a bug or I do something wrong?

    Please help, thanks.

    What looks like the empty box?  Check to make sure that the layer is not configured to be traced mode (should have solid colored rectangle icon beside the layer label).  In addition, in the main toolbar select view-> Preview Mode... and make sure you described is not selected.

  • You want to know why the icons displayed for only some bookmarks and how to replace the rectangle with an icon dotted valid in these cases.

    As explained in the question, some of the icons for sites appear only as a dotted rectangle. There are several favorites that have been imported from a html file and some of them have no icon showing on the list of bookmark or toolbar for Firefox, but they did it on the original browser where they wre imported. As a general rule, the icons 'fills' when each of the imported sites are visited some do not no matter how many times visited.

    I checked to make sure that the fonts and colors are chosen by the site server, so this isn't the problem.

    Although it is a function a little cosmetic (navigation works fine, just no icons), the icons site much faster recognition visually, making the browser it much faster and easier on the eye.

    Any help to fix this would be greatly appreciated for a user of Firefox "second-time-around."

    Firefox normally restore the favicon if use you this bookmark.

    See also:

Maybe you are looking for