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

Learning Odoo 13 Module Development and Review

USING ODOO 13 Introduction This writing supposed to be a cheat sheet for helping myself to learn about Odoo, Odoo Development and also anyone who want to read this.   Odoo already have a good documentation in their websites you can check it here https://www.odoo.com/documentation/13.0/ What you need Odoo source you can get the source from odoo.com or github https://www.odoo.com/page/download or https://github.com/odoo/odoo. Right now I'm using the  https://www.odoo.com/page/download  . I did using the github twice so I'm already familiar with it but now i want to explore something new and maybe we will find something. Python v3.6++ (intermediate level). https://www.python.org/downloads/windows/ You can learn some basic “web development with python” first if you still new at programming. Search with google. Postgresql https://www.postgresql.org/download/ I’m using win Os for development and Visual Studio Code for IDE What should you re
Post a Comment
Read more

BlackBerry ListField Tutorial Part 2

Blackberry ListField with Clicked Row this time i create based on rtm4bb code. it used manager as TableRowManager to create the field for each row. first i create MenuListField.java
2 comments
Read more