QML layout question

I'm quite new in QML, and I wondered the correct way to achieve this type of layout. I would like to show you a picture as background and want another image on top of this image, so it gives the effect of a contour.

Here's what I think I create a StackLayout layout container and then I have 2 image down one is bigger in size, then the other is smaller.

Thank you for the help

StackLayout is the only provision which could not do what you want without real awkwardness. The part of the "stack" means that they are stacked vertically or horizontally (x or y axis), not from BACK to front (z axis).

For the back layer forward, you can use a container with a DockLayout and make sure that specify the picture then in the list of children of the container. Those who come later is rendered above those that come earlier.

DispositionAbsolue would be another option, but with the same restriction order specifying.

You can also use the 'background' of a container and an ImagePaintDefinition property to set an image as the background, instead of the usual Color.Transparent or a color explicit and then have the image of 'before' simply to be the unique child of this container. In this case, even a StackLayout might work, since there is only one child.

Tags: BlackBerry Developers

Similar Questions

  • QML layout problem

    I consider myself fairly competent with QML, but cannot get this to work.

    I would a ScrollView at the top of the screen and a multiline inside label, the tricky bit is to operate on the Z10 Q10 formats and in a single file.

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

    *                            *

    *                            *

    * ScrollView *.

    *                            *

    *                            *

    *                            *

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

    * Multi-line *.

    *           Text          *

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

    Dock and absolutely do not work because they hide the text or superimposed according to the order, which leaves StackLayout.

    The problem with this is that using the infinite on the ScrollView turns the multi-line into single line, using average absolute values the text is not down on the Z10.

    Any ideas?

    OK, I think I see not the interest. And if you put the scrollview in another container, then the spaceQuota is calculated:

    // Segmented control navigation project template
    import bb.cascades 1.0
    import com.rim.example.custom 1.0
    
    Page {
        content: Container {
    
            layout: StackLayout {
                orientation: LayoutOrientation.TopToBottom
            }
            Container {
                ScrollView {
                    Container {
                        Label {
                            text: "texte"
                        }
                        Label {
                            text: "texte"
                        }
                        Label {
                            text: "texte"
                        }
                    }
                }
                layoutProperties: StackLayoutProperties {
                    spaceQuota: 1
                }
            }
            Label {
                text: "texte vdsgkso pkbop kbr kbrk oerkb)eobk kebo)kr )bkerbk)oerk b)ekorkbitojkqnjkbnbn ibni nqrjibn inqrb oqrjib pqbj"
                multiline: true
                layoutProperties: StackLayoutProperties {
                    spaceQuota: -1
                }
            }
        }
    }
    
  • Policy QML camera question

    Hello

    When you use element QML camera in my application, I was faced with the following problem - Z10 camera he always does photo in landscape orientation, even if the device is in portrait mode. AFAIK, QML camera should deal with orientation of the unit by itself, and it doesn't have even the methods or properties to combat it. All other screen elements (such as the navigation pane) to have proper placement for the current orientation of the device (as for the navigation pane, it is always on the bottom of the screen). The code example looks like this:

    import bb.cascades 1.0
    import bb.cascades.multimedia 1.0
    import bb.multimedia 1.0
    
    Page {
        id:         cameraPage
        objectName: "cameraPage"
    
        onCreationCompleted: {
            OrientationSupport.supportedDisplayOrientation = SupportedDisplayOrientation.CurrentLocked;
        }
    
        paneProperties: NavigationPaneProperties {
            backButton: ActionItem {
                onTriggered: {
                    navigationPane.pop();
                }
            }
        }
    
        Container {
            background: Color.Black
    
            Camera {
                id: camera
    
                onCreationCompleted: {
                    if (allCamerasAccessible) {
                        open(CameraUnit.Rear);
                    }
                }
    
                onCameraOpened: {
                    getSettings(cameraSettings);
    
                    cameraSettings.flashMode = CameraFlashMode.Off;
                    cameraSettings.focusMode = CameraFocusMode.ContinuousAuto;
    
                    applySettings(cameraSettings);
    
                    startViewfinder();
                }
    
                onTouch: {
                    if (event.touchType === TouchType.Down) {
                        capturePhoto();
                    }
                }
    
                onPhotoCaptured: {
                    shutterSound.play();
                }
    
                attachedObjects: [
                    CameraSettings {
                        id: cameraSettings
                    },
                    SystemSound {
                        id:    shutterSound
                        sound: SystemSound.CameraShutterEvent
                    }
                ]
            }
        }
    }
    

    I looked for similar problems in the browser of the question and found the following problem:

    https://www.BlackBerry.com/jira/browse/BBTEN-249

    It is somewhat similar to mine, but it is marked as fixed in Dev Alpha OS 10.0.09, while this problem occurs in 10.1.0.273 on Z10.

    What could cause, with the exception of the firmware issue? Should I change something orientation of the camera by hand? How can I do this for element QML camera?

    Thanks in advance for your help.

    The different flavors of the Z10 (as well as future systems) can manage rotation in different ways. Some will be actually rotate the image for you, some will just tag the jpeg resulting with EXIF data that indicates the orientation of the image desired. Not all image viewers supports EXIF rotation.

    In addition, currently on the Z10 rotation of the image is locked for the orientation of the device. So if the user locks the application in portrait mode, all their photos will be marked as if the device is held upright in portrait mode, unless you do a follow-up work with the gyroscope/accelerometer and then rotate the image yourself. You will notice that even in the built in camera app. This is currently a known limit.

  • Liquid hybrid layout question

    I am relatively new to web design and now I'm doing a hybrid layout using a fixed size for the left side (navigation bar and a logo at the top left) for my final project in this category of web design. Whenever I tried to get the part of my page as static and as liquid, I always ran into questions. I could only make static pure, liquid or elastic. I tried to ask for help from my teacher on an old site I was building but it was not sure why my code was not working.

    Currently my page works fine on Internet Explorer, however it breaks on Firefox. The right column, which currently has the placeholder text, breaks down under the navigation bar. I have rebuilt the page a couple of times trying to see why exactly it breaks but I actually don't understand. I use the bar of navigation with a fixed width, then let the right column with no width defined, which must fill the remaining space. On IE, it does just that, but on Firefox it breaks down to the next line instead.

    Here is the design I'm working on: http://www.CWU.edu/~reddickj/final%20Project/home.html

    Ignore the buttons on the left, the links are valid, but the pages are not yet published on the web server.

    Advice would be greatly appreciated and I thank you for your time!

    The solution above will make your floats works if the page is at least a certain size, but it doesn't give you a hybrid fixed/fluid layout.

    Try adding something like this:

    {#bottom}
    border-left: 282px solid #000644;
    }
    {#bottomleft}
    left margin:-282px;
    }

    Of course, you want to keep all your other rules for these two div, simply add the rules of border and margin that you already have.

    The idea is that give you a border to the outer container so that #bottomright is limited to the width that remains in the container, which is still liquid.

    The border itself is a fixed with however. This allows you to #bottomright within the border using a negative margin, leaving room for #bottomright floating next to him, in the current container.

  • Photoshop CS3 - Web site layout Question

    Hi, I'm new here and I hope this is the right place to post this question.  I am an intermediate Photoshop user, and I'm trying to set up a website layout in Photoshop CS3, I can export to Dreamweaver.  Should what image size I start in Photoshop to design the page?  I did some research and some places say 720 px wide by 500 px high, but I have a 1280 x 800 display, so I wonder if that shows funny about the moniters widescreen?  Not sure, hope that someone understands what I'm trying to explain and can help!  Thank you!

    depends on the resolution you design. For 1024 x 786, which is currently the most common on the web that you would go to something like 980. I use some 950 so I can have a beautiful 12-column page layout. Don't forget that you do not design for the resolution you use, but the resolution who use most of the people on the web, unless of course your client says he wants to target a specific screen resolution, like saying 800 x 600

  • QML Preview question

    Earn 8.1 64-bit

    Optimus laptop, latest graphic drivers

    Momentics 2.1

    I read the previous topics, but they can't help me.

    So, I tried to reinstall ide, re - enable the qml, launching with nvidia graphics

    I tried to use it a few months ago and it works well.

    O_O
    I launch momentics a few minutes ago and qml overview works now (I won't change anything). It fixed itself!

  • ScriptUI Layout question

    Hi all

    Our old friend ScriptUI is driving me crazy with his LayoutManager... You may have some thoughts about this.

    Given a group what alignChildren property is set to "['fill', 'fill']; This Group organizes in fact several children including a button. Like her, ar gardens th gentle resizd to take all available space:

    Capture d’écran 2014-03-08 à 01.14.22.png

    However, the button is HUGE, which is normal at this stage. Now, I want to shrink to a size that is 'normal '. I am so affecting the property minimumSize and maximumSize button 45 pixels wide. I expect that the button is reduced and the other extended components regardingly. But this is not what is happening. Indeed, the button is resized but many children can no longer shoot all the space available.

    Capture d’écran 2014-03-08 à 01.14.51.png

    I am a bit confused here. Anyone can see what is happening? I associate myself with a script example anyone can try: http://dl.free.fr/fJTkudDzk

    UN/comment just this line to switch between these two States:

    browseGlobalSrcBtn.maximumSize.width = browseGlobalSrcBtn.minimumSize.width = 45;

    Thanks in advance for any advice,

    Loïc

    PS The layout engine is based on the sizes favorite so even if you set the size of the buttons to 45 the default size will remain at 80. It's ok, but even if it is cut by default on 45 it will reset to 80 so the size of the group will be assigned to fill the size 80, is because priority is given to the statement of 'filler' and because the Panel is set to fill the thing is messed up.

    browseGlobalSrcBtn.maximumSize.width = browseGlobalSrcBtn.minimumSize.width = browseGlobalSrcBtn.preferredSize.width = 45;

    browseGlobalSrcBtn.toSource)

    Result: button {text:..., limits: 434, 0, 479, 22, location: 434, 0, maximumSize:45, 1110, minimumSize:45, 0, preferr dSize:80, 22, size: 45, 22, textDirection:null}

    Marc has a chart on this topic, but I don't remember what she says, you can find it on his site

  • Web site layout question

    Hello Dreamweavers.

    I'd like know how this type of sites are installed outside in DW, for example these sites have div tags?

    or is the whole design imported into DW? It frame-by-frame is placed in DW for example? example decided within the PS and the imported.

    Im trying to understand how they are developed in DW. The second example that has text down, happens in DW?

    This question is more for education.

    Thank you.

    example 1.jpg

    example 2.jpg

    These look like 'proof of design concepts' which were intended for a Flash site.  Very probably he never took off because the Flash is a web technology dead.

    If you want to learn how to create good designs for the web, start studying the basis of the theory of web design, HTML, and CSS.  Later, you learn everything you can on the progress of CSS, HTML5 & scripts client-side to create animations and of web pages interactive (see Edge animate).

    Tutorial sites:

    Nancy O.

  • Page layout question: have 2 box inside the splitter facet

    Hi guru

    I need to have 2 Cabinet stacked vertically within the 2nd side of a separator (vertical) Panel and have a vertical scroll bar to scroll through the entire space of the 2nd facet. In addition, the Panel box #2 should move upward when the Panel box #1 is reduced. How to get there?

    I tried this

    < af:panelSplitter orientation = "vertical" >
    -< f: facet = 'first' name >
    -stuff inside the first facet
    -< / facet >

    -< f: facet 'second' = name >
    -PanelGroupLayout scroll >
    -< PanelBox 1 >
    -The things inside the box
    -< / PanelBox 1 >

    -< PanelBox 2 >
    -< PanelCollection >
    ----------------------------------<Table>
    ----------------------------------</Table>
    -< / PanelCollection >
    -< / PanelBox 2 >
    -< / PanelGroupLayout >
    -< / facet >
    < / af:PanelSplitter >

    The above provision extends from the first Panel area to the entire width of the screen, but the 2nd box is extended to only 50% of the width. I also modified the above to have the two boxes to Panel within a presentation of form of Panel with lines = '2' and argument maxColumns = '1 '. With that, the two panel boxes are stretched until 50% of the width of the screen. The problem is due to the table inside the box # 2 Panel?

    Help, please.

    Thank you

    Published by: user12612448 on January 4, 2011 04:10

    Hello

    A panelGrouplayout can be stretched in a panelsplitter until the layout is set to scroll or vertical.
    So it of ok and should work in your case

    A panelBox can be extended, however, it will not stretch her children, while the panelCollection will not stretch.
    Indeed, if it is caused by the content of the second panelbox.

    Try to use a styleClass to stretch the panelCollection example styleClass = "AFStretchWidth."

    Good luck

    Luc Bors

  • Page layout question - shouldn't it go cut instead of "run-over.

    Hello

    Can you tell me in the test of following simple layout, Flex made a mistake here, i.e.:

    -Why the Panel cover all HGroup?

    -should not label 3 is limited instead of going beyond the HGroup, gearing up to a width of 250 pixels?

    Thank you

    -------------------------------------

    <? XML version = "1.0"? >
    " < = xmlns:fx s:Application ' http://ns.Adobe.com/MXML/2009 "
    xmlns:s = "library://ns.adobe.com/flex/spark" >

    < s:Panel backgroundColor = "red" title = 'This IS control PANEL' >
    < s:layout >
    < s:HorizontalLayout / >
    < / s:layout >

    < s:HGroup width = "250" gap = "5" >
    < s:Label backgroundColor = "blue" text = "Label 1" width = "100" / >
    < s:Label id = "lab2" backgroundColor = "green" text = "Label 2" width = "100" / >
    < s:Label id = "lab3" backgroundColor = "yellow".
    Text = "Label 3 is longer with no specified width" / >
    < / s:HGroup >
    < / s:Panel >
    < / s:Application >

    There's a Scroller component.  See the doc on spark.components.Scroller.

  • Simple layout question...

    Hi guys.

    I'm trying to align my elements inside a container of Panel. My Control Panel has horizontal layout and two VGroup inside. My VGroup a horizontalAlign is the right settings. I want to another group that is inside the left corner VGroup. I can't make it work. Any help will be appreciated. Thank you.

    < s:Panel width = "600" height = "480" >

    < s:layout >

    < s:HorizontalLayout paddingTop = "10" / >

    < / s:layout >

    first VGroup

    < s:VGroup paddingTop = "5" horizontalAlign = "center" >

    < mx:Image source = "{pictureBig}" width = "295" height = "271" / >

    < s:Button id = "switchView" label = "Current view" click = "switchView_clickHandler (event)" / >

    < / s:VGroup >

    Second VGroup

    < s:VGroup horizontalAlign = "right" width = "220" paddingTop = "5" >

    < s:HGroup verticalAlign = "middle" >

    < s:Label styleName = "Label" text = "aaaaa" / >

    < s:TextInput styleName = "Label" text = "{dataFromClick.getItemAt (0) .dvd}" / >

    < / s:HGroup >

    ----

    -//at minus 3 HGroups here...

    ----

    < s:HGroup verticalAlign = "middle" >

    < s:Label styleName = "Label" text = "bath" / >

    < s:TextInput styleName = "Label" text = "{dataFromClick.getItemAt (0) .dvd}" / >

    < / s:HGroup >

    I want the last HGroup align left...

    < s:HGroup verticalAlign = "middle" >

    < s:TextInput styleName = "Label" text = "{dataFromClick.getItemAt (0) .dvd}" / >

    < / s:HGroup >

    < / s:VGroup >

    Which is not relevant because you try to position inside the Panel. To do this, you must set its layout = "absolute". Here are some readings on arrangement of things in the control panel:

    http://livedocs.Adobe.com/Flex/3/HTML/Help.HTML?content=layouts_10.html

  • Easy page layout question

    Hello.

    I'm guessing it will be simple for someone with more experience than me DW.

    I chose a model of pre-3 column settings (XHTML 1.0 Trans).

    using DW CS3.

    I want to thank the colored boxes along the page, but (after # considerable attempts) can not understand.

    page is here:

    http://NortonGhost.radified.com/

    using 3-column liquid with header / footer.

    efault page mentions something about adding borders to the main div, but this does not extend the color of the sidebar... It simply adds a border (and not even at the edge of the sidebar, where it would look better.

    How to extend the color of the sidebar so that they extend to the bottom of the page?

    Use a table instead of an a CSS layout.

    --
    Murray - ICQ 71997575
    Adobe Community Expert
    (If you * MUST * write me, don't don't LAUGH when you do!)
    ==================
    http://www.dreamweavermx-templates.com - template Triage!
    http://www.projectseven.com/go - DW FAQs, tutorials & resources
    http://www.dwfaq.com - DW FAQs, tutorials & resources
    http://www.macromedia.com/support/search/ - Macromedia (MM) Technotes
    ==================

    "Know" wrote in message
    News:f5p4ud$FK6$1@forums. Macromedia.com...
    > This blows.
    >
    > there is no easier way.
    >
    > I want only the END columns to stretch down. not the Center, because it's
    > is always going to be long anyway.

  • Copy layout question

    Whenever I have some change to the photo in Lightroom, the setting 'copy' would automatically jump to the top. It's extremely annoying. I don't know how and if I can turn it off.

    Nevermind, I restart the laptop and the problem disappeared.

    Sent from my iPhone

  • Page layout question?

    Why what's on my screen in dreamweaver, this put on page look perfect, but when I download and display in the browser window, there is a gap at the top of the index 'maindiv' and at the bottom of the div appears to be cut?

    http://www.milesfunerals.com/template.php

    It looks like no you have a line of css are inherited, but I can't find where. Addition of border-top: 1px solid #F4ECC5; will reduce the space to zero:

    {.maindiv}

    Max-width: 812px;

    Max-height: 1174px;

    background-image: url(images/scrollbg%20copy.jpg);

    background-repeat: no-repeat;

    margin left: 138px;

    padding-bottom: 173px;

    background-color: #F4ECC5;

    border-top: 1px solid #F4ECC5;

    }

    UPDATE:

    The margin or the padding is coming from the

    Inside the DIV tags - if set you them to zero space will carry.

    .maindiv p {}

    margin: 0 0 0 0;

    padding: 0 0 0 0;

    }

    Thing is NOT to ask the roof, just the bottom:

    .maindiv p {}

    margin: 0;

    padding: 0 10px 0 0;

    }

  • Print page layout question

    When I put images to print, for example in the form of map, I have trouble getting the image to the center of the template exactly. When he moves, it snaps to the next point, rather than to stop where I have to say, and usually the point I'm pass and the point that I'm moving, are each on one side or the other are exactly in the Center. Is it possible at this address?

    Thank you, Carol

    Hi Carol,.

    I do not use the fine print module, but I SEEA 'Loving grid' option in the section rules, grid and guides on the right side. If you set to 'Off', that solve the problem?

    Marc

Maybe you are looking for

  • T530, what are the sata speeds?

    Does anyone know if the slot msata T530 uses sata2 or sata3 speeds? The same with the main drive Bay and ultrabay slim sata adapter housing. Are these sata2 or sata3? Manual equipment is unclear. I looked at.

  • HP Photo Smart D5110 will not scan with Mac OS 10.9

    Help. I've looked everywhere and can't always come up with a solution to scan from my Photosmart. Worked fine until I upgraded to Maverick. Thank you!

  • T420 Windows 8.1 fingerprint reader

    Lenovo Fingerprint Reader software is not Windows 8.1, any help?

  • Printing problems Linux/CUPS

    I'm under Ubuntu 12.10 and have a Photosmart 5515 with A4 paper. When I install the printer, I have a choice of two drivers: hpijs 3.12.6 or hpcups 3.12.6. With the hpcups driver, the top margin is incorrect: the impression is moved to the top of the

  • Dv7-7202tx Notebook PC ENVY: Wireless not working not

    Hello My wireless stopped working last night and the function button is orange. I tried to restart, fixing through the System Mechanic, but that did not work. Of course, I didn't have internet access so I couldn't download a driver, but I don't know