Welcome!

Welcome to the official BlackBerry Support Community Forums.

This is your resource to discuss support topics with your peers, and learn from each other.

inside custom component

Native Development

Reply
Developer
Posts: 1,065
Registered: ‎03-20-2013
My Device: Red LE Developer Z10
My Carrier: Fido

Can't get 9-slice to work for ImagePaintDefinition

I'm pulling my hair out over this one...

 

I am trying to create a 9-slice border around ListView items. My basic code looks like this:

 

ListView {
  listItemComponents: [
    ListItemComponent {
      type: "item"
      Container {
        id: itemRoot
        background: itemBackground.imagePaint
        attachedObjects: [
          ImagePaintDefinition {
            id: itemBackground
            imageSource: "asset:///images/ListViewItemBackground.amd"
          }
        ]
        Label {
          text: ListItemData.title
          multiline: true
        }
      }
    }
  ]
}

 The AMD file contains the following:

 

source: "ListViewItemBackground.png"
sliceMargins: 2 2 2 2

 Both ListViewItemBackground.amd and ListViewItemBackground.png are in the assets directory.

 

The problem is that the background image is not displayed. If I change the imageSource statement to point directly to the PNG file then the background image shows up, but of course it is stretched out of shape since it is not 9-sliced. If I revert it back to the AMD file though, the image just will not show up, 9-sliced or not.

 

Any ideas what I'm doing wrong?



Developer of Built for BlackBerry certified multiFEED RSS/Atom feed reader and aggregator.  multiFEED Icon

Play nice: Clicking Like Button on posts that helped you not only encourages others to continue sharing their experience, but also improves your own rating on this board. Also, don't forget to accept a post if it solves your problem or answers your question.
Developer
Posts: 1,524
Registered: ‎12-18-2012
My Device: Z30, Z10 LE, DevAlpha C, PlayBook

Re: Can't get 9-slice to work for ImagePaintDefinition

[ Edited ]

Hi,

Use ImageView together with DockLayout instead. I think it won't work with ImagePaintDefinition.

 

upd: docs show the opposite, but I couldn't get it to work last time I tried.

Could you try changing the .amd to:

 

#RimCascadesAssetMetaData version=1.0
source: "ListViewItemBackground.png" sliceMargins: 2 2 2 2
repeatable: false

 


Andrey Fidrya, @zmeyc on twitter
Developer
Posts: 6,152
Registered: ‎07-05-2012
My Device: Playbook, Dev Alpha C, Z10 LE, Z30
My Carrier: Orange

Re: Can't get 9-slice to work for ImagePaintDefinition

[ Edited ]

Hi,

 

You don't need to mention the repeatable option for a 9-slice.

 

I changed some similar code I had to be exactly the same as yours and it still works for me.

 

Have you named the amd file the same as the png file?

Or perhaps messed up the path to the amd or png file somehow?

 

I know your OP says you've done both but worth double checking, check the log to see if the QML is giving any errors.

 

For example you say the image and amd file are in the assets folder but are they both in the assets/images folder?

 


If you've been helped click on Like Button, if you've been saved buy the app. Smiley Happy

Developer of stokLocker, Sympatico and Super Sentences.
Developer
Posts: 1,065
Registered: ‎03-20-2013
My Device: Red LE Developer Z10
My Carrier: Fido

Re: Can't get 9-slice to work for ImagePaintDefinition

[ Edited ]

Thanks for your reply. Yes, both the PNG and the AMD are named identically, except for the extension, and both files are in /assets/images.

 

Is it possible it could be something about my PNG? This image is 40x40, with a transparent background, and a black, 2 pixel border all the way around. The intent is that the 2,2,2,2 slicing will make the border expand as needed without stretching, while leaving the resized centre area fully transparent. This way I can have another Container behind the one I described in my OP which has the background property set to toggle colours when the item is active (pressed and held). I had this working fine when the imageSource is set to the PNG rather than the AMD, but of course, the borders widths get unacceptably stretched.

 

In an effort to eliminate possible culprits, I removed the outer Container before making my OP, but it still didn't work.

 

I am going to check the log for QML errors, but in my somewhat limited experience (with QML and cascades, I have 30 years of professional development experience in other languages, including C++), if there are QML errors in main.qml (which is where this code is) then the app doesn't even run. Of course, I suppose it could be syntactically correct QML but specific resources may not exist at run time.

 

**UPDATE**

 

Ok, was just going to check the log when a thought struck me regarding the AMD file. I had assumed that the initial line, "#RimCascadesAssetMetaData version=1.0" shown in the cascades examples was just a comment to improve readability, so I didn't bother putting it in, but got to wondering if it worked like the <?xml> clause on the first line of an XML file, and told the interpreter how to process the file. Inserted the missing line and bingo, 9-slicing works now.

 

Thanks for everyone's help.



Developer of Built for BlackBerry certified multiFEED RSS/Atom feed reader and aggregator.  multiFEED Icon

Play nice: Clicking Like Button on posts that helped you not only encourages others to continue sharing their experience, but also improves your own rating on this board. Also, don't forget to accept a post if it solves your problem or answers your question.
Developer
Posts: 6,152
Registered: ‎07-05-2012
My Device: Playbook, Dev Alpha C, Z10 LE, Z30
My Carrier: Orange

Re: Can't get 9-slice to work for ImagePaintDefinition

Actually if an asset isn't found in QML it tends to report it and then muddle on.

 

Let us know how you get on but I can confirm it's not the code as I do a similar thing in one of my apps and as I said I changed it to match as best I could your posted code and it still works.

 

Obviously I couldn't replicate the image you use, but if you PM it to me I can quickly check it if you like.

 

Another check you could do is to see if you can just get it working on a simple top-level container first?

 

 

 


If you've been helped click on Like Button, if you've been saved buy the app. Smiley Happy

Developer of stokLocker, Sympatico and Super Sentences.