Welcome!

Welcome to the official BlackBerry Support Community Forums.

This is your resource to discuss support topics with your peers, and learn from each other.

inside custom component

Java Development

Reply
Developer
Posts: 141
Registered: ‎02-27-2009
My Device: Not Specified
Accepted Solution

problem with tab pane appearance

The code below creates a simple tab pane manager with 2 tabs, and simple LabelField's for the tab labels.  You'll see in the attached image that there is a solid background behind the LabelField's.  I've tried giving the LabelField's transparent backgrounds, but that did not remove that solid background.  How can I get rid of that solid background?

import net.rim.device.api.ui.*;
import net.rim.device.api.ui.container.*;
import net.rim.device.api.ui.component.*;
import net.rim.device.api.ui.component.pane.*;
import net.rim.device.api.ui.decor.*;


public class BugRptTabs extends UiApplication
{
  public static void main(String[] args) 
  {
    UiApplication instance = new BugRptTabs();
    instance.enterEventDispatcher();
  }    

  public BugRptTabs()
  {
    pushScreen( new BugScreen() );
  }

  private class BugScreen extends MainScreen
  {
    public BugScreen()
    {
      super( Manager.NO_VERTICAL_SCROLL | Manager.NO_VERTICAL_SCROLLBAR 
					| Manager.NO_HORIZONTAL_SCROLL
					| Screen.DEFAULT_CLOSE 
                                        | Screen.DEFAULT_MENU );
			
      // setup the tab model with 2 tabs
      PaneManagerModel model = new PaneManagerModel();
      model.enableLooping( true );
			
      // create a transparent background
      Background bg = BackgroundFactory.createSolidTransparentBackground(
                                                       Color.BLACK, 0 );
			
      // setup the first tab
      VerticalFieldManager vfm = new VerticalFieldManager( 
                               Field.USE_ALL_HEIGHT | Field.USE_ALL_WIDTH |
                               Manager.NO_VERTICAL_SCROLL |
                               Manager.NO_HORIZONTAL_SCROLL );
      LabelField lbl = new LabelField( "Content for tab 1", Field.FOCUSABLE );
      vfm.add( lbl );
      MyLabelField myLbl = new MyLabelField( "Tab 1", Field.FOCUSABLE );
      myLbl.setBackground( bg );
      Pane pane = new Pane( myLbl, vfm );
      model.addPane( pane );
			
      // setup the second tab
      vfm = new VerticalFieldManager( Field.USE_ALL_HEIGHT | Field.USE_ALL_WIDTH |
                                      Manager.NO_VERTICAL_SCROLL |
                                      Manager.NO_HORIZONTAL_SCROLL );
      lbl = new LabelField( "Content for tab 2", Field.FOCUSABLE );
      vfm.add( lbl );
      myLbl = new MyLabelField( "Log", Field.FOCUSABLE );
      myLbl.setBackground( bg );
      pane = new Pane( myLbl, vfm );
      model.addPane( pane );
			
      // select the tab to be displayed
      model.setCurrentlySelectedIndex( 0 );		
			
      // setup the rest of the components
      HorizontalTabTitleView titleView = 
               new HorizontalTabTitleView( Field.FOCUSABLE );
      titleView.setNumberOfDisplayedTabs( 2 );
      titleView.setModel( model );
			
      PaneView paneView = new PaneView( Field.FOCUSABLE );
      paneView.setModel( model );
			
      PaneManagerView view = new PaneManagerView( Field.FOCUSABLE  |
                                           Manager.NO_VERTICAL_SCROLL |
                                           Manager.NO_HORIZONTAL_SCROLL |
                                           Manager.USE_ALL_HEIGHT | 
                                           Manager.USE_ALL_WIDTH, 
                                           titleView, paneView );
      view.setModel( model );
      model.setView( view );
			
      // set the background color of the tabs
      bg = BackgroundFactory.createSolidBackground( Color.BLACK );
      titleView.setTabBackground( Field.VISUAL_STATE_ACTIVE, bg );
      titleView.setTabBackground( Field.VISUAL_STATE_FOCUS, bg );
      titleView.setTabBackground( Field.VISUAL_STATE_NORMAL, bg );

      // set the background color of the remainder of the 
      // title area (behind the tabs)
      titleView.setBackground( Field.VISUAL_STATE_ACTIVE, bg );
      titleView.setBackground( Field.VISUAL_STATE_FOCUS, bg );
      titleView.setBackground( Field.VISUAL_STATE_NORMAL, bg );
			
      // configure the Controller
      HorizontalTabController controller = new HorizontalTabController();
      controller.setModel( model );
      controller.setView( view );
      model.setController( controller );
      view.setController( controller );

      // add the tab manager to the MainScreen
      this.add( view );
    }
		
    private class MyLabelField extends LabelField
    {
      public MyLabelField( String str )
      {
        super( str );				
      }
			
      public MyLabelField( String str, long style )
      {
        super( str, style );
      }
			
      protected void paint(Graphics graphics)
      {
        graphics.setColor( Color.WHITE );        
        super.paint( graphics );			
      }
    }
  }
}

 

BlackBerry Development Advisor
Posts: 15,211
Registered: ‎07-09-2008
My Device: BlackBerry Passport
My Carrier: Bell

Re: problem with tab pane appearance

You can find an example of a transparent LabelField in this thread:  http://supportforums.blackberry.com/t5/Java-Development/LabelField-transparent-background/m-p/518870

Mark Sohm
BlackBerry Development Advisor

Please refrain from posting new questions in solved threads.
Problem solved? Click the Accept As Solution button.
Found a bug? Report it using Issue Tracker
Developer
Posts: 141
Registered: ‎02-27-2009
My Device: Not Specified

Re: problem with tab pane appearance

Mark,

  Thank you for the reply. However your suggestion did not help at all.  In fact it makes the display unusable (see attached image).

 

  I added to the MyLabelField class (in the code I previously posted) the following method, as per your suggestion.

 

protected void drawFocus(Graphics graphics, boolean on) {
  graphics.setBackgroundColor(Color.WHITE);
  graphics.setGlobalAlpha(0);
  graphics.clear();
  super.drawFocus(graphics, on);			
}

 

  Please take another look at this problem.

 

  Thanks,

  Paul

 

 

BlackBerry Development Advisor
Posts: 15,211
Registered: ‎07-09-2008
My Device: BlackBerry Passport
My Carrier: Bell

Re: problem with tab pane appearance

This is actually coming from the background you are setting (didn't notice the background earlier).  Remove these lines from your original BugScreen and the LabelFields will pick up the tab colour, not the background colour.

 

titleView.setTabBackground( Field.VISUAL_STATE_NORMAL, bg );

titleView.setBackground( Field.VISUAL_STATE_NORMAL, bg );

Mark Sohm
BlackBerry Development Advisor

Please refrain from posting new questions in solved threads.
Problem solved? Click the Accept As Solution button.
Found a bug? Report it using Issue Tracker
Developer
Posts: 141
Registered: ‎02-27-2009
My Device: Not Specified

Re: problem with tab pane appearance

Again thanks for the reply.  Again, this did not work.

 

I commented out those lines, and with the drawFocus() method, I still get the 2nd image I sent.  Without the drawFocus() method I get the original image I sent. 

 

I also commented out the rest of the lines that set backgrounds.  This changed nothing.

 

Any more ideas?

 

  Paul

 

BlackBerry Development Advisor
Posts: 15,211
Registered: ‎07-09-2008
My Device: BlackBerry Passport
My Carrier: Bell

Re: problem with tab pane appearance

What BlackBerry Smartphone model and BlackBerry device software version are you testing on?  You can find this under Options, About on the BlackBerry Smartphone.

 

Here is what I see in 7.0 using your first BugScreen code, without drawFocus and without the 2 lines I quoted above.

 

Note that you do see a blue outline around the LabelField in one screenshot where the LabelFields are focusable.  You can remove that by setting them to be non focusable (and you still can switch between tabs).

Mark Sohm
BlackBerry Development Advisor

Please refrain from posting new questions in solved threads.
Problem solved? Click the Accept As Solution button.
Found a bug? Report it using Issue Tracker
Developer
Posts: 141
Registered: ‎02-27-2009
My Device: Not Specified

Re: problem with tab pane appearance

I'm using the 9700 simulator

6.0 Bundle 2534 (v6.0.0.570 Platform 3.0.0.139)

 

BlackBerry Development Advisor
Posts: 15,211
Registered: ‎07-09-2008
My Device: BlackBerry Passport
My Carrier: Bell

Re: problem with tab pane appearance

A couple more changes were needed for 6.0.  I removed titleView.setTabBackground( Field.VISUAL_STATE_FOCUS, bg ); and titleView.setBackground( Field.VISUAL_STATE_FOCUS, bg ); and tweaked the way your labels were added.  

 

Instead of using a focusable LabelField, make the lbl1 and lbl2 LabelFields non focusable and create a focusable NullField.  Add both of these to a HorizontalFieldManager and use that as the label to your Pane.

 

This provides the screenshot I've attached (using the same simulator you are testing with).

Mark Sohm
BlackBerry Development Advisor

Please refrain from posting new questions in solved threads.
Problem solved? Click the Accept As Solution button.
Found a bug? Report it using Issue Tracker
Developer
Posts: 141
Registered: ‎02-27-2009
My Device: Not Specified

Re: problem with tab pane appearance

Yes Mark, that image looks perfect.

I'll give this a try later.

 

To avoid confusion, could I impose on you to post the final 6.0 code you have (either in-line or as an attachment)?

 

Thanks,

Paul

 

Developer
Posts: 141
Registered: ‎02-27-2009
My Device: Not Specified

Re: problem with tab pane appearance

Mark,

  That indeed worked.  Don't worry about posting your code.  I just tried it and I have it working. 

 

  I tried to attached my code as a java file and also as a zip file. In both cases your web site gave an error - The attachment's content type (application/octet-stream) does not match its file extension.

 

  So here is the working code (for the sake of future readers).

import net.rim.device.api.ui.*;
import net.rim.device.api.ui.container.*;
import net.rim.device.api.ui.component.*;
import net.rim.device.api.ui.component.pane.*;


public class BugRptTabs extends UiApplication
{
  
  public static void main(String[] args) 
    {
        UiApplication instance = new BugRptTabs();
        instance.enterEventDispatcher();
    } 
       

  public BugRptTabs()
  {
    pushScreen( new BugScreen() );
  }

  private class BugScreen extends MainScreen
  {
    public BugScreen()
    {
      super( Manager.NO_VERTICAL_SCROLL | Manager.NO_VERTICAL_SCROLLBAR 
          | Manager.NO_HORIZONTAL_SCROLL
          | Screen.DEFAULT_CLOSE | Screen.DEFAULT_MENU );
      
      // setup the tab model with 2 tabs
      PaneManagerModel model = new PaneManagerModel();
      model.enableLooping( true );
      
      // setup the first tab
      VerticalFieldManager vfm = new VerticalFieldManager( 
          Field.USE_ALL_HEIGHT | Field.USE_ALL_WIDTH |
          Manager.NO_VERTICAL_SCROLL | Manager.NO_HORIZONTAL_SCROLL );
      LabelField lbl = new LabelField( "Content for tab 1", Field.FOCUSABLE );
      vfm.add( lbl );
      
      MyLabelField myLbl = new MyLabelField( "Tab 1" );
      NullField nullFld = new NullField( Field.FOCUSABLE );
      HorizontalFieldManager hfm = new HorizontalFieldManager();
      hfm.add( nullFld );
      hfm.add( myLbl );
      
      Pane pane = new Pane( hfm, vfm );
      model.addPane( pane );
      
      
      // setup the second tab
      vfm = new VerticalFieldManager( 
          Field.USE_ALL_HEIGHT | Field.USE_ALL_WIDTH |
          Manager.NO_VERTICAL_SCROLL | Manager.NO_HORIZONTAL_SCROLL );
      lbl = new LabelField( "Content for tab 2", Field.FOCUSABLE );
      vfm.add( lbl );
      
      myLbl = new MyLabelField( "Tab 2" );
      nullFld = new NullField( Field.FOCUSABLE );
      hfm = new HorizontalFieldManager();
      hfm.add( nullFld );
      hfm.add( myLbl );
      
      pane = new Pane( hfm, vfm );
      model.addPane( pane );
      
      
      // select the tab to be displayed
      model.setCurrentlySelectedIndex( 0 );    
      
      // setup the rest of the components
      HorizontalTabTitleView titleView = new HorizontalTabTitleView( Field.FOCUSABLE );
      titleView.setNumberOfDisplayedTabs( 2 );
      titleView.setModel( model );
      
      PaneView paneView = new PaneView( Field.FOCUSABLE );
      paneView.setModel( model );
      
      PaneManagerView view = new PaneManagerView( 
              Field.FOCUSABLE  | Manager.NO_VERTICAL_SCROLL | 
              Manager.NO_HORIZONTAL_SCROLL | Manager.USE_ALL_HEIGHT | 
              Manager.USE_ALL_WIDTH, 
              titleView, paneView );
      view.setModel( model );
      model.setView( view );
      
      // configure the Controller
      HorizontalTabController controller = new HorizontalTabController();
      controller.setModel( model );
      controller.setView( view );
      model.setController( controller );
      view.setController( controller );

      // add the tab manager to the MainScreen
      this.add( view );
    }
    
    
    private class MyLabelField extends LabelField
    {
      public MyLabelField( String str )
      {
        super( str );        
      }
      
      protected void paint(Graphics graphics)
      {
            graphics.setColor( Color.WHITE );        
        super.paint( graphics );      
      }
    }
  }
}

 

  Paul