Asset Selector: Designing for the Z and Q [Weekend Coder]

As we can all plainly see, the BlackBerry Z10 andQ10 have different screen sizes and aspect ratios. This is obviously because the Q10 has the full QWERTY. More often than not this presents a challenge for app developers. Luckily when coding in Cascades it is easy to code for both aspect ratios using the asset selector.

Before jumping into the asset it should be noted that Cascades will try to squishing, squeezing, reduce spacing between elements, and/or cutting off certain parts of the display to make everything fit. Sometimes it works fine, especially for long scrolling lists like Facebook or Twitter.  Either way it is best to use the asset selector to directly control display, plus it’s really easy to use.

The asset selector is an automatic feature that displays specific code for a specific device. So in the case of Q10 vs Z10 you would have sections of code (either full pages or just specific components) shown for the Z10 and other code shown for the Q10. Now this may be hard to conceptualize without a sample, so guess what… here comes a sample…

Say we have the following code and how it will display on the Z10:

 However if we load it to the Q10 it will look like this:

 This is not ideal, since some images/buttons are overlapping and everything looks squished together. Rather than creating a new project that will be the “Q10 app” here’s where we’ll use the asset selector.

First, let’s create a custom component with another QML file. Create a new file in your assets folder called “CustomStuff.qml” and take some code from main.qml to add it to CustomStuff.qml. And replace it CustomStuff {} in the main.qml file so we have the following:

New main.qml and CustomStuff.qml:

 Now we can use the asset selector, to do so we need to create a folder inside of the asset folder called “720×720” and inside of that folder create a file called “CustomStuff.qml”. Our second CustomStuff.qml file will contain similar code as the other only this one will have different images/text/whatever we want that makes it look better on the Q10.

720×720/CustomStuff.qml:

 When you launch this code on the Z10 it will pull the code from the assets/CustomStuff.qml and when you run it on the Q10 it will pull code from the assets/720×720/CustomStuff.qml as seen in the main picture of this posting.  This also works for full files. So you could have an assets/main.qml and an assets/720×720/main.qml and it will behave the exact same. The true beauty of this is there is no need to maintain two sets of logic (C++ or Javascript) in separate apps for the Z and Q. That’s it, nothing else, crazy easy huh!?!? So there should be no excuses that the Q10 doesn’t get the same love as the Z10 for apps.

For easy copy/paste this code can be found at:https://github.com/bcs925/CrackBerry/tree/master/AssetTest

Via Crackberry

Asset Selector: Designing for the Z and Q [Weekend Coder]