Tabbed Container

Overview

Tabbed Container is a control that has tabs that can have text and / or images. It has an automatic scrool, that is, by clicking on a specific tab, the controler simulates the drag to the chosen tab.

Source Code

import totalcross.io.IOException;
import totalcross.sample.util.Colors;
import totalcross.sys.Settings;
import totalcross.ui.Container;
import totalcross.ui.Label;
import totalcross.ui.ScrollContainer;
import totalcross.ui.TabbedContainer;
import totalcross.ui.dialog.MessageBox;
import totalcross.ui.gfx.Color;
import totalcross.ui.image.Image;
import totalcross.ui.image.ImageException;

public class TabbedContainerSample extends ScrollContainer {
	private final int gap = (int)(Settings.screenDensity * 30);

	@Override
	public void initUI() {
		try {
			setBackForeColors(Colors.BACKGROUND, Colors.ON_BACKGROUND);

			CreateImageAndTextTabbedContainer();
			CreateTextOnlyTabbedContainer();
			CreateBulletsTabbedContainer();
		} catch (Exception ee) {
			MessageBox.showException(ee, true);
		}
	}

	private void CreateImageAndTextTabbedContainer() throws ImageException, IOException {
		String[] caps = { 
			"Social 1", 
			"Social 2", 
			"Social 3" 
		};
		Image[] icons = { 
			new Image("images/fb_icon_40.png"), 
			new Image("images/gmail_icon_40.png"),
			new Image("images/insta_icon_40.png") 
		};

		Label sampleTitle = new Label("This is a icon and text Tabbed Container", CENTER);
		sampleTitle.autoSplit = true;
		add(sampleTitle, LEFT + gap, TOP + gap, FILL - gap, PREFERRED);
		
		Container spacing = new Container();
		add(spacing, LEFT + gap*2, AFTER + gap/2, FILL - gap*2, (int) (Settings.screenHeight * 0.3));
		
		final TabbedContainer tc = new TabbedContainer(caps);
		tc.setBackColor(Color.DARK);
		tc.getContainer(0).setBackColor(Colors.P_300);
		tc.getContainer(1).setBackColor(Colors.P_400);
		tc.getContainer(2).setBackColor(Colors.P_500);
		tc.setIcons(icons);
		tc.pressedColor = Colors.P_800;
		tc.activeTabBackColor = Colors.P_800;
		tc.allSameWidth = true;
		tc.extraTabHeight = fmH * 2;
		spacing.add(tc, LEFT, TOP, FILL, PARENTSIZE);
		for(int i = 0; i < 3; i++)
			tc.getContainer(i).add(new Label("Container " + (i+1)), CENTER, CENTER);
	}

	private void CreateTextOnlyTabbedContainer() throws ImageException, IOException {
		String[] caps = new String[3];
		caps[0] = "Home";
		caps[1] = "Photos";
		caps[2] = "Profile";
		
		
		Label sampleTitle = new Label("This is a text only Tabbed Container", CENTER);
		sampleTitle.autoSplit = true;
		add(sampleTitle, LEFT + gap, AFTER + gap*2, FILL - gap, PREFERRED);
		
		Container spacing = new Container();
		add(spacing, LEFT + gap*2, AFTER + gap/2, FILL - gap*2, (int) (Settings.screenHeight * 0.3));
		
		final TabbedContainer tc = new TabbedContainer(caps);
		tc.setType(TabbedContainer.TABS_BOTTOM);
		tc.setBackColor(Color.DARK);
		tc.getContainer(0).setBackColor(Colors.P_300);
		tc.getContainer(1).setBackColor(Colors.P_400);
		tc.getContainer(2).setBackColor(Colors.P_500);
		tc.useOnTabTheContainerColor = true;
		tc.allSameWidth = true;
		tc.extraTabHeight = fmH / 2;
		spacing.add(tc, LEFT, TOP, FILL, PARENTSIZE);
		for(int i = 0; i < 3; i++)
			tc.getContainer(i).add(new Label("Container " + (i+1)), CENTER, CENTER);
	}

	private void CreateBulletsTabbedContainer() throws ImageException, IOException {
		Image[] images = new Image[3];
		Image empty = new Image("images/bullet_empty.png").getSmoothScaledInstance(fmH, fmH);
		Image filled = new Image("images/bullet_full.png").getSmoothScaledInstance(fmH, fmH);
		filled.applyColor2(Color.ORANGE);

		for (int i = images.length; --i >= 0;) {
			images[i] = empty;
		}
		
		Label sampleTitle = new Label("This is a image-only Tabbed Container", CENTER);
		sampleTitle.autoSplit = true;
		add(sampleTitle, LEFT + gap, AFTER + gap*2, FILL - gap, PREFERRED);
		
		Container spacing = new Container();
		add(spacing, LEFT + gap*2, AFTER + gap/2, FILL - gap*2, (int) (Settings.screenHeight * 0.3));

		final TabbedContainer tc = new TabbedContainer(images);
		tc.setActiveIcon(filled);
		tc.setType(TabbedContainer.TABS_BOTTOM);
		tc.setBackColor(Color.DARK);
		tc.getContainer(0).setBackColor(Colors.P_300);
		tc.getContainer(1).setBackColor(Colors.P_400);
		tc.getContainer(2).setBackColor(Colors.P_500);
		tc.allSameWidth = true;
		tc.extraTabHeight = fmH / 2;
		tc.setBorderStyle(Container.BORDER_NONE);
		tc.transparentBackground = true;
		spacing.add(tc, LEFT, TOP, FILL, PARENTSIZE);
		for(int i = 0; i < 3; i++)
			tc.getContainer(i).add(new Label("Container " + (i+1)), CENTER, CENTER);
	}
}

Methods

Tipo	Nome	Descrição
Construct	TabbedContainer(String[] strCaptions)	Uses a string array as capations for the tabs.
Construct	TabbedContainer(Image[] imgCaptions, int transparentColor)	Uses an image array to represent the flaps and set a color.
Construct	TabbedContainer(Image[] imgCaptions)	Uses an image array to represent the flaps
Container	getContainer(int i)	Returns the Container for tab
Void	setType(byte type)	Sets the position of the tabs. You can use TABS_TOP, TABS_BOTTOM, TABS_NONE

References

• See a example on github .

• See the Java Docs for more information.