Taking the Cascades Framework Under the Knife: 9-Slicing

Cascades

The Cascades™ application framework has many features that allow for the creation of resolution-independent user interfaces. One feature which is extremely useful in both minimizing the size and number of image assets needed to be bundled in your application is 9-slicing. This functionality is primarily used for background and border images and allows the same image to scale nicely to virtually any size while keeping its corners clear and borders uniform.

Let’s take a step back and see how things scale without the use of 9-slicing before explaining how it works. If you are developing an application and would like to add a background image to certain elements of your application – say, a TextArea to give it more emphasis – and begin with the following image:

The idea with the above image is that the colored area will work as our border, leaving the white area to handle the content. The above image works fine as long as the component being used is fits into the white area, but what if it is larger? If the component grows to 100x450px then we will end up with a component that ends up looking like this:

The end result does not look very appealing. As the image scales in size so does the width and height of the border by default resulting in a top border that is more narrow than the side borders and stretched corners. Ideally what we would like is for the border to stay uniform no matter the size the entire image scales. To achieve this, we use 9-slicing which results in the following image:

The result is that we have taken a 30x30px, 135-byte image and scaled it up to 100x450px without losing the scale of the border. The way this is done is by taking the original image file and slicing it into 9 sections: 4 corners that always stay to their original scale, 1 center which scales to fill, 2 (top and bottom) edges which scale horizontally only and 2 (left and right) edges that fill vertically only.

Using this method keeps the corners of the image crisp and only applies scaling to the portions of the image that will not be noticeable to the eye, and in a way that keeps the proportions of things like the black border uniform around the image at any scale:

Using 9-slicing in the Cascades framework is extremely easy. If you have used an ImageView to display an application image then you are already halfway there. If you have an image named background.png then you would create an ImageView component similar to this:

ImageView {
imageSource: "asset:///images/background"
}

The next thing you would need to do is create a new file named background.amd in the same directory as background.png where the name of the files must match exactly except for the extension. This new file – background.amd – will be a plain text file with one line of text:

sliceMargins:20 20 25 34

The numbers in this file represent the left, right, top and bottom margins respectively. The framework will read this file automatically when loading the image because it shares the same name as the image file and apply the 9-slicing to have the image scaled to your specifications. This can be used to provide all sorts of neat borders that continue looking good when used throughout your application. Keep in mind that images displayed this way will be loaded synchronously with the rest of the UI. The below example shows a TextArea with a custom border:

Now you have the tools and knowledge, let’s see what you can make with them!

About garett

Garett is a member of the Developer Relations team and has been with BlackBerry since 2008. He specializes in app monetization (Payment, Advertising, Analytics SDKs) and Push development. He is one of the individuals involved with the forums (gbeukeboom), Issue Tracker and can be found tweeting from @BlackBerryDev with the ^GB signature.

Join the conversation

Show comments Hide comments
+ -
blog comments powered by Disqus