Geeks With Blogs

Mohamed Haamdi All about Mobile

Many mobile apps define a texture as a background.Especially those on tablets like the iPad.

So to make your app more appealing you can add a Background Texture to your app.Fortunately Blackberry provided us with a Class in their GitHub Sample Called Background(source code in Listing)

   1: /*
   2: * Copyright (c) 2011 Research In Motion Limited.
   3: *
   4: * Licensed under the Apache License, Version 2.0 (the "License");
   5: * you may not use this file except in compliance with the License.
   6: * You may obtain a copy of the License at
   7: *
   8: * http://www.apache.org/licenses/LICENSE-2.0
   9: *
  10: * Unless required by applicable law or agreed to in writing, software
  11: * distributed under the License is distributed on an "AS IS" BASIS,
  12: * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  13: * See the License for the specific language governing permissions and
  14: * limitations under the License.
  15: */
  16:  
  17: package samples.ui.components {
  18:     
  19:     import flash.display.Bitmap;
  20:     
  21:     import qnx.ui.core.Containment;
  22:     import qnx.ui.core.SizeUnit;
  23:     import qnx.ui.core.UIComponent;
  24:     
  25:     
  26:     public class Background extends UIComponent {
  27:         
  28:         private var _bg:Bitmap;
  29:         
  30:         /**
  31:          * Create a background that can be added to a component. 
  32:          * @param classType - pass a png image class.
  33:          */
  34:         public function Background(classType:Class):void 
  35:         {
  36:             var obj:Object = new classType();
  37:             _bg = obj as Bitmap;
  38:             
  39:             __height = _bg.height;
  40:             size = __height;
  41:             sizeUnit = SizeUnit.PIXELS;
  42:             containment = Containment.BACKGROUND;
  43:         }
  44:         
  45:         /**
  46:          * Set the size of the background
  47:          * @param width - number for background width
  48:          * @param height - number for background height
  49:          */
  50:         public override function setSize(width:Number, height:Number):void 
  51:         {
  52:             __width = width;
  53:             if (_bg) {
  54:                 __height = height;
  55:                 invalidate();
  56:             }
  57:         }
  58:         
  59:         protected override function draw():void 
  60:         {
  61:             if (_bg) {
  62:                 with (graphics) {
  63:                     clear();
  64:                     beginBitmapFill(_bg.bitmapData);
  65:                     moveTo(0,0);
  66:                     lineTo(width, 0);
  67:                     lineTo(width, height);
  68:                     lineTo(0, height);
  69:                     lineTo(0, 0);
  70:                     endFill();
  71:                 }
  72:                 __height = _bg.height;
  73:             }
  74:             __width = width;
  75:         }
  76:     }
  77: }

So to use it we need a PNG Background (I always go with wooden texture)

  • Insert the background into your assets package
  • Add this definition in your UIComponent class (eg: View)
   1: [Embed(source="assets/YourBackgroundHere.png")]
   2:         private var imgClass:Class;
   3:         var background:UIComponent= new Background(imgClass);
  • Add this background to the container you want to skin
   1: addChild(background);
That’s it Amoureux and here is an example : BlackBerry PlayBook Simulator-2012-02-21-12-50-22 Posted on Tuesday, February 21, 2012 12:54 PM Adobe Flex | Back to top


Comments on this post: Setting the background in a Blackberry Playbook AIR app

No comments posted yet.
Your comment:
 (will show your gravatar)


Copyright © midoBB | Powered by: GeeksWithBlogs.net