Skip to main content

Blackberry Creating Toolbar Part 3

Read Part 1

Read Part 2


After trying few apps from Blackberry AppWorld. I've stumble into something interesting that is UberSocial also known as UberTwitter.

they have interesting Toolbar or MenuBar. It look like this.

These toolbar even have tooltip if you hover above the icon.



on these Part 3 of Tutorial I will try to create that toolbar. The Resources and Link that help this tutorial will also be provided later.

Resources for these tutorial :
- StackOverflow [link will be provided later]

- Blackberry Forum [link will be provided later]

- Resizing transparent bitmaps with the BlackBerry JDE
address : http://www.patchou.com/2010/10/resizing-transparent-bitmaps-with-the-blackberry-jde/

After few Research, i know that to create scrollable toolbar. you should have HorizontalManagerField with Scrollable style. For the Buttons, it should be Button Field or Clickable Icon Field. For the ToolTip maybe its using Custom Screen that Modified when Hover above Button / Icon / Bitmap Field.

These Tutorial will also get you to learn about :

- HorizontalManagerField
- ButtonField / BitmapField
- Customize Screen
[Other Field Will Be Provided Later]

That's about it for the analysis, lets try to create our toolbar. the first step should the basic first

These Code Will Create a HorizontalFieldManager With Icon Button that can be clicked.

ToolbarImage2.java 

import net.rim.device.api.ui.UiApplication;

/**
 * This class extends the UiApplication class, providing a
 * graphical user interface.
 */
public class ToolbarImage2 extends UiApplication
{
    /**
     * Entry point for application
     * @param args Command line arguments (not used)
     */ 
    public static void main(String[] args)
    {
        // Create a new instance of the application and make the currently
        // running thread the application's event dispatch thread.
        ToolbarImage2 theApp = new ToolbarImage2();       
        theApp.enterEventDispatcher();
    }
    

    /**
     * Creates a new ToolbarImage2 object
     */
    public ToolbarImage2()
    {        
        // Push a screen onto the UI stack for rendering.
        pushScreen(new ToolbarScreen());
    }    
}


this is the screen . ToolbarScreen.java 

package toolbarImage2;

import net.rim.device.api.system.Bitmap;
import net.rim.device.api.ui.component.BitmapField;
import net.rim.device.api.ui.component.Dialog;
import net.rim.device.api.ui.component.LabelField;
import net.rim.device.api.ui.container.HorizontalFieldManager;
import net.rim.device.api.ui.container.MainScreen;

/**
 * A class extending the MainScreen class, which provides default standard
 * behavior for BlackBerry GUI applications.
 */
public final class ToolbarScreen extends MainScreen
{
    private HorizontalFieldManager headerHFM;
    private LabelField myLabel;
    /**
     * Creates a new ToolbarScreen object
     */
    public ToolbarScreen()
    {        
        // Set the displayed title of the screen       
        setTitle("Toolbar Screen");
        myLabel = new LabelField();
        setHeader();
        myLabel.setText("This is the Main Manager");
        add(myLabel);
    }
    
    public void setHeader(){
        headerHFM = new HorizontalFieldManager(HORIZONTAL_SCROLL);
        Bitmap myBitmap = Bitmap.getBitmapResource("chat_64x64.png");
         BitmapField myBitmapButton = new BitmapField(myBitmap,FOCUSABLE){
            protected boolean navigationClick(int status, int time) {
                // TODO Auto-generated method stub
                Dialog.inform("BitmapButton1 Clicked");
                return super.navigationClick(status, time);
            }
         };
        myBitmapButton.setPadding(10,10,10,10);
        headerHFM.add(myBitmapButton);
        
        Bitmap myBitmap2 = Bitmap.getBitmapResource("cd_64x64.png");
            BitmapField myBitmapButton2 = new BitmapField(myBitmap2,FOCUSABLE){
                protected boolean navigationClick(int status, int time) {
                    // TODO Auto-generated method stub
                    Dialog.inform("BitmapButton2 Clicked");
                    return super.navigationClick(status, time);
                }
            };
           myBitmapButton2.setPadding(10,10,10,10);
           headerHFM.add(myBitmapButton2);
           
           Bitmap myBitmap3 = Bitmap.getBitmapResource("calc_64x64.png");
            BitmapField myBitmapButton3 = new BitmapField(myBitmap3,FOCUSABLE){
                protected boolean navigationClick(int status, int time) {
                    // TODO Auto-generated method stub
                    Dialog.inform("BitmapButton3 Clicked");
                    return super.navigationClick(status, time);
                }
            };
           myBitmapButton3.setPadding(10,10,10,10);
           headerHFM.add(myBitmapButton3);
        
        Bitmap myBitmap4 = Bitmap.getBitmapResource("mush.png");
            BitmapField myBitmapButton4 = new BitmapField(myBitmap4,FOCUSABLE){
                protected boolean navigationClick(int status, int time) {
                    // TODO Auto-generated method stub
                    Dialog.inform("BitmapButton4 Clicked");
                    return super.navigationClick(status, time);
                }
            };
           myBitmapButton4.setPadding(10,10,10,10);
           headerHFM.add(myBitmapButton4);
           
           Bitmap myBitmap5 = Bitmap.getBitmapResource("calc_64x64.png");
            BitmapField myBitmapButton5 = new BitmapField(myBitmap5,FOCUSABLE){
                protected boolean navigationClick(int status, int time) {
                    // TODO Auto-generated method stub
                    Dialog.inform("BitmapButton5 Clicked");
                    return super.navigationClick(status, time);
                }
            };
           myBitmapButton5.setPadding(10,10,10,10);
           headerHFM.add(myBitmapButton5);
           
           Bitmap myBitmap6 = Bitmap.getBitmapResource("cd_64x64.png");
            BitmapField myBitmapButton6 = new BitmapField(myBitmap6,FOCUSABLE){
                protected boolean navigationClick(int status, int time) {
                    // TODO Auto-generated method stub
                    Dialog.inform("BitmapButton6 Clicked");
                    return super.navigationClick(status, time);
                }
            };
           myBitmapButton6.setPadding(10,10,10,10);
           headerHFM.add(myBitmapButton6);
           
        add(headerHFM);
        
        
    }
} 
 
These Code Result are
 

Then you can scroll it to the right


also you can click the image.  

I know it still far than that ubersocial Style. but i think this is the first step. 
Thank you for reading these piece of crap. i will update again later. its time to work

From the image you will notice the black color surrounding the image. that was supposed to be transparent but when i resizing image using image tool from desktop not Blackberry i forgot to include the transparent area.

But then after searching for little bit i found that there is a solution to resizing a transparent image.

just DONT FORGET the Image that will be re-size should contain the transparent first.

here are the code to resize

GPATools.java

import net.rim.device.api.system.Bitmap;
import net.rim.device.api.ui.Color;
import net.rim.device.api.ui.Graphics;
/**
 *
 * @author    Patchou
 * @version   1.01
 *
 */
public class GPATools
{
    /**
     * Resizes a bitmap with an alpha channel (transparency) without the artifacts introduced
     *   by <code>scaleInto()</code>.
     *
     * @param bmpSrc        Source Bitmap
     * @param nWidth        New Width
     * @param nHeight       New Height
     * @param nFilterType   Filter quality to use. Can be <code>Bitmap.FILTER_LANCZOS</code>,
     *                           <code>Bitmap.FILTER_BILINEAR</code> or
     *                           <code>Bitmap.FILTER_BOX</code>.
     * @param nAspectRatio  Specifies how the picture is resized. Can be
     *                           <code>Bitmap.SCALE_TO_FIT</code>,
     *                           <code>Bitmap.SCALE_TO_FILL</code> or
     *                           <code>Bitmap.SCALE_STRETCH</code>.
     * @return              The resized Bitmap in a new object.
     */
    public static Bitmap ResizeTransparentBitmap(Bitmap bmpSrc, int nWidth, int nHeight, int nFilterType, int nAspectRatio)
    {
        if(bmpsrc== null)
            return null;

        //Get the original dimensions of the bitmap
        int nOriginWidth = bmpSrc.getWidth();
        int nOriginHeight = bmpSrc.getHeight();
        if(nWidth == nOriginWidth && nHeight == nOriginHeight)
            return bmpSrc;

        //Prepare a drawing bitmap and graphic object
        Bitmap bmpOrigin = new Bitmap(nOriginWidth, nOriginHeight);
        Graphics graph = Graphics.create(bmpOrigin);

        //Create a line of transparent pixels for later use
        int[] aEmptyLine = new int[nWidth];
        for(int x = 0; x < nWidth; x++)
            aEmptyLine[x] = 0x00000000;
        //Create two scaled bitmaps
        Bitmap[] bmpScaled = new Bitmap[2];
        for(int i = 0; i < 2; i++)
        {
            //Draw the bitmap on a white background first, then on a black background
            graph.setColor((i == 0) ? Color.WHITE : Color.BLACK);
            graph.fillRect(0, 0, nOriginWidth, nOriginHeight);
            graph.drawBitmap(0, 0, nOriginWidth, nOriginHeight, bmpSrc, 0, 0);

            //Create a new bitmap with the desired size
            bmpScaled[i] = new Bitmap(nWidth, nHeight);
            if(nAspectRatio == Bitmap.SCALE_TO_FIT)
            {
                //Set the alpha channel of all pixels to 0 to ensure transparency is
                //applied around the picture, if needed by the transformation
                for(int y = 0; y < nHeight; y++)
                    bmpScaled[i].setARGB(aEmptyLine, 0, nWidth, 0, y, nWidth, 1);
            }

            //Scale the bitmap
            bmpOrigin.scaleInto(bmpScaled[i], nFilterType, nAspectRatio);
        }

        //Prepare objects for final iteration
        Bitmap bmpFinal = bmpScaled[0];
        int[][] aPixelLine = new int[2][nWidth];

        //Iterate every line of the two scaled bitmaps
        for(int y = 0; y < nHeight; y++)
        {
            bmpScaled[0].getARGB(aPixelLine[0], 0, nWidth, 0, y, nWidth, 1);
            bmpScaled[1].getARGB(aPixelLine[1], 0, nWidth, 0, y, nWidth, 1);

            //Check every pixel one by one
            for(int x = 0; x < nWidth; x++)
            {
                //If the pixel was untouched (alpha channel still at 0), keep it transparent
                if(((aPixelLine[0][x] >> 24) & 0xff) == 0)
                    aPixelLine[0][x] = 0x00000000;
                else
                {
                    //Compute the alpha value based on the difference of intensity
                    //in the red channel
                    int nAlpha = ((aPixelLine[1][x] >> 16) & 0xff) -
                                    ((aPixelLine[0][x] >> 16) & 0xff) + 255;
                    if(nAlpha == 0)
                        aPixelLine[0][x] = 0x00000000; //Completely transparent
                    else if(nAlpha >= 255)
                        aPixelLine[0][x] |= 0xff000000; //Completely opaque
                    else
                    {
                        //Compute the value of the each channel one by one
                        int nRed = ((aPixelLine[0][x] >> 16 ) & 0xff);
                        int nGreen = ((aPixelLine[0][x] >> 8 ) & 0xff);
                        int nBlue = (aPixelLine[0][x] & 0xff);

                        nRed = (int)(255 + (255.0 * ((double)(nRed-255)/(double)nAlpha)));
                        nGreen = (int)(255 + (255.0 * ((double)(nGreen-255)/(double)nAlpha)));
                        nBlue = (int)(255 + (255.0 * ((double)(nBlue-255)/(double)nAlpha)));

                        if(nRed < 0) nRed = 0;
                        if(nGreen < 0) nGreen = 0;
                        if(nBlue < 0) nBlue = 0;
                        aPixelLine[0][x] = nBlue | (nGreen<<8) | (nRed<<16) | (nAlpha<<24);
                    }
                }
            }

            //Change the pixels of this line to their final value
            bmpFinal.setARGB(aPixelLine[0], 0, nWidth, 0, y, nWidth, 1);
        }
        return bmpFinal;
    }
}


Here is how to call the GPATools function.

Bitmap bmp = Bitmap.getBitmapResource("picture.png");
Bitmap bmpResized = GPATools.ResizeTransparentBitmap(bmp, 30, 60,
    Bitmap.FILTER_LANCZOS, Bitmap.SCALE_TO_FIT);


Now the Updated ToolbarScreen.Java

import net.rim.device.api.system.Bitmap;
import net.rim.device.api.ui.component.BitmapField;
import net.rim.device.api.ui.component.Dialog;
import net.rim.device.api.ui.component.LabelField;
import net.rim.device.api.ui.container.HorizontalFieldManager;
import net.rim.device.api.ui.container.MainScreen;

/**
 * A class extending the MainScreen class, which provides default standard
 * behavior for BlackBerry GUI applications.
 */
public final class ToolbarScreen extends MainScreen
{
    private HorizontalFieldManager headerHFM;
    private LabelField myLabel;
    /**
     * Creates a new ToolbarScreen object
     */
    public ToolbarScreen()
    {        
        // Set the displayed title of the screen       
        setTitle("Toolbar Screen");
        myLabel = new LabelField();
        setHeader();
        myLabel.setText("This is the Main Manager");
        add(myLabel);
    }
    
    public void setHeader(){
        headerHFM = new HorizontalFieldManager(HORIZONTAL_SCROLL);
        Bitmap myBitmap = Bitmap.getBitmapResource("sms_32x32.png");
         BitmapField myBitmapButton = new BitmapField(myBitmap,FOCUSABLE){
            protected boolean navigationClick(int status, int time) {
                // TODO Auto-generated method stub
                Dialog.inform("BitmapButton1 Clicked");
                return super.navigationClick(status, time);
            }
         };
        myBitmapButton.setMargin(10,10,10,10);
        headerHFM.add(myBitmapButton);
        
        Bitmap myBitmap2 = Bitmap.getBitmapResource("cd_64x64.png");
        Bitmap bmpResized = GPATools.ResizeTransparentBitmap(myBitmap2, 64, 64,
        Bitmap.FILTER_LANCZOS, Bitmap.SCALE_TO_FIT);
            BitmapField myBitmapButton2 = new BitmapField(bmpResized,FOCUSABLE){
                protected boolean navigationClick(int status, int time) {
                    // TODO Auto-generated method stub
                    Dialog.inform("BitmapButton2 Clicked");
                    return super.navigationClick(status, time);
                }
            };
           myBitmapButton2.setMargin(10,10,10,10);
           headerHFM.add(myBitmapButton2);
           
           Bitmap myBitmap3 = Bitmap.getBitmapResource("calc_64x64.png");
           
            BitmapField myBitmapButton3 = new BitmapField(myBitmap3,FOCUSABLE){
                protected boolean navigationClick(int status, int time) {
                    // TODO Auto-generated method stub
                    Dialog.inform("BitmapButton3 Clicked");
                    return super.navigationClick(status, time);
                }
            };
           myBitmapButton3.setMargin(10,10,10,10);
           headerHFM.add(myBitmapButton3);
        
        Bitmap myBitmap4 = Bitmap.getBitmapResource("mush.png");
            BitmapField myBitmapButton4 = new BitmapField(myBitmap4,FOCUSABLE){
                protected boolean navigationClick(int status, int time) {
                    // TODO Auto-generated method stub
                    Dialog.inform("BitmapButton4 Clicked");
                    return super.navigationClick(status, time);
                }
            };
           myBitmapButton4.setMargin(10,10,10,10);
           headerHFM.add(myBitmapButton4);
           
           Bitmap myBitmap5 = Bitmap.getBitmapResource("calc_64x64.png");
            BitmapField myBitmapButton5 = new BitmapField(myBitmap5,FOCUSABLE){
                protected boolean navigationClick(int status, int time) {
                    // TODO Auto-generated method stub
                    Dialog.inform("BitmapButton5 Clicked");
                    return super.navigationClick(status, time);
                }
            };
           myBitmapButton5.setMargin(10,10,10,10);
           headerHFM.add(myBitmapButton5);
           
           Bitmap myBitmap6 = Bitmap.getBitmapResource("cd_64x64.png");
            BitmapField myBitmapButton6 = new BitmapField(myBitmap6,FOCUSABLE){
                protected boolean navigationClick(int status, int time) {
                    // TODO Auto-generated method stub
                    Dialog.inform("BitmapButton6 Clicked");
                    return super.navigationClick(status, time);
                }
            };
           myBitmapButton6.setMargin(10,10,10,10);
           headerHFM.add(myBitmapButton6);
           
        add(headerHFM);
        
        
    }
}


These are the end result






As you can see the black background is gone. and we got ourselves closer to Ubersocial Toolbar.

Read Part 1

Read Part 2

Go to Part 3

[I will Update these later]
Labels:

Comments

Post a Comment

Popular posts from this blog

JavaScript Real Time Calculation

I've been around looking for javascript that can do Real Time Calculation. javascript real time calculation, javascript real time calculation textbox. by some lucky keywords i found this code. this is exactly the code that i want. it really do the real time calculation. and it doesn't need onChange or OnBlur function. Just try it Example + = this is the javascript code <script type='text/javascript' > function startCalc(){   interval = setInterval("calc()",1); } function calc(){   one = document.autoSumForm.firstBox.value;   two = document.autoSumForm.secondBox.value;   document.autoSumForm.thirdBox.value = (one * 1) + (two * 1); } function stopCalc(){   clearInterval(interval); } </script> this is the html code <form name="autoSumForm">   <input class="right" type=text name="firstBox" value="" onFocus="startCalc();" onBlur="stopCalc();"><br...
3 comments
Read more

iOS 5 Creating eCommerce with Shopping Cart App Part 1

[Created 11-28-2012] it seems like there are tons of tutorial ios and xcode for beginner out there. you can view the list at my post here http://javalearning-adventure.blogspot.com/2012/11/learning-xcode.html that's the link that i always update if i find anything. this tutorial will consist of step by step in creating Shopping Cart App. There will be Browse Product, Shopping Cart, and Checkout Method. I will update these later after i satisfied with the end result. These tutorial will also include web programming using php. but these php will only using basic sample not the very complex with mysql database and everything. these php pages will only creating json output. i think you don't need to learn php and json. you should only learn how to handle json using objective-c. I am still a beginner in xcode and objective-c, its still only 1 month since i started these tutorial. requirements suppose to be iOS 5 with xcode 4. [i will update these later][postponed...
1 comment
Read more

BlackBerry ListField Tutorial Part 3

This Part 3 will consist of Networking, ListField, JSON and Thread. I'm really sorry for pending this part 3. I've been busy making money and still failed. Its just really hard to live in third world country by coding. anyway, There are few Library that you will need creating ListField with JSON data, but we wont touch that area first. we need to learn the basic. * note added : Aug 26 2013 The basic should be : Networking Thread ListField [if i find anything, will be add here]
Post a Comment
Read more