Creating resizeable tabbed panes like an IDE

Hello all
I'm pretty new to JavaFX and GUI building in general so I apologise if this is a simple question. I have had a little experience with Swing but it is limited.
The title is pretty self explanatory. I want to lay out a few panels sort of like an IDE with a tree view down the left hand side, my directly applicable content in a panel on the upper right and a sort of results panel below the "content" panel containing a table that would show search results etc.
Both the "results" panel and the "content" panel would probably be tabbedpanes because whenever someone performed a certain operation a new tab would need to appear in one of those panels.
Is this sort of thing possible with JavaFX 2 and do you guys have any tips on how I would go about it?
EDIT: sorry forgot to clarify that I also want the user to be able to resize the panels sort of like you do with an IDE. Click and drag the margin to make each panel wider or narrower for example.
Edited by: moondoggie on 2012/03/26 6:10 AM
Edited by: moondoggie on 2012/03/26 6:11 AM

Ah figured it out. I can use SplitPane to create separate panes that are resizeable. Simple and effective. I am really enjoying JavaFX 2. For the first time I'm actually keen on building GUIs. :)

Similar Messages

How To use JFile Chooser in a Tabbed Pane Dialog

I have created a tabbed pane dialog. In one of the tabs I want to add a JFile Chooser.
How can I approach this problem. also Do I have to use a JDialog with a frame or can I create a JDialog without using a frame and create a instance from the main function.

I have created a tabbed pane dialog. In one of the
tabs I want to add a JFile Chooser. Since JFileChooser is a JComponent you could add it to any Container like any other JComponent.
Maybe you have to do some init by hand which is done normally by the show*() methods of JFileChooser. Taking a look at the source of showDialog() should help.
Hope that helps,
Alex

Problem in tabbed panes

hai friends,
i am trying to create a tabbed pane which contains 3 panes.(top)
and i try to add a tabbed pane at bottom of first pane which is a panel.
i have set the size of panel as panel.setPreferredSize(new Dimension(750, 475));
Now i am finding i cannot view the tabbed panes added to the panel.
the relevant code is given below.
some one have any idea..
panel.add(new JScrollPane(textArea));
panel.add(new JScrollPane(table));
panel.setPreferredSize(new Dimension(750, 475));
panel.setBackground(Color.PINK);
JTabbedPane tabbedPane2 = new JTabbedPane (JTabbedPane.BOTTOM);
tabbedPane2.add("Result",new JTable(10,10));
tabbedPane2.add("Message",new JTextArea());
panel.add(tabbedPane2);
JTabbedPane tabbedPane = new JTabbedPane(JTabbedPane.TOP);
tabbedPane.addTab("name1", new JScrollPane(panel));
tabbedPane.addTab("name2",
 new JScrollPane(new JTextArea(5, 5)));
tabbedPane.addTab("ANALYSIS", new JButton("< HAI ALL >"));
container.add(tabbedPane);
tabbedPane.setBackground(Color.ORANGE);

i am giving the code i have done for the development of schema browser.
i have some what overcome the problem i have faced. but i know its not a proper way.
i am not able to use other layouts successfully to arrange these components.The layout now i have is not good enough.
may be because i am beginner.
kindly give your comments.....
import java.awt.Color;
import java.awt.Container;
import java.awt.Dimension;
import java.awt.FlowLayout;
import java.awt.event.ActionEvent;
import java.awt.event.ActionListener;
import java.sql.Connection;
import java.sql.DriverManager;
import java.sql.ResultSet;
import java.sql.Statement;
import javax.swing.BorderFactory;
import javax.swing.JButton;
import javax.swing.JFrame;
import javax.swing.JMenu;
import javax.swing.JMenuBar;
import javax.swing.JMenuItem;
import javax.swing.JPanel;
import javax.swing.JScrollPane;
import javax.swing.JTabbedPane;
import javax.swing.JTable;
import javax.swing.JTextArea;
import javax.swing.border.BevelBorder;
public class Trial1 extends JFrame implements ActionListener {
 Container container = null;
 private JTextArea textArea;
 private JTextArea result = new JTextArea();
 private JButton connection;
 private JButton execute;
 private ResultSet rs;
 private Connection con;
 public Trial1(String title) {
 super(title);
 container = this.getContentPane();
 container.setBackground(Color.BLACK);
 menu();
 panes();
 makeConnection();
 container.setLayout(new FlowLayout());
 this.setSize(800, 575);
 show();
 void menu() {
 JMenuBar menuBar = new JMenuBar();
 container.add(menuBar, FlowLayout.LEFT);
 menuBar.setBorder(new BevelBorder(BevelBorder.RAISED));
 menuBar.setForeground(Color.blue);
 JMenu file = new JMenu("File");
 JMenu edit = new JMenu("Edit");
 JMenu query = new JMenu("Query");
 menuBar.add(file);
 menuBar.add(edit);
 menuBar.add(query);
 file.add(new JMenuItem("New"));
 file.add(new JMenuItem("Open"));
 file.add(new JMenuItem("Save"));
 file.add(new JMenuItem("Save As"));
 file.addSeparator();
 file.add(new JMenuItem("Exit"));
 edit.add(new JMenuItem("Undo"));
 edit.addSeparator();
 edit.add(new JMenuItem("Cut"));
 edit.add(new JMenuItem("Copy"));
 edit.add(new JMenuItem("Paste"));
 edit.addSeparator();
 edit.add(new JMenuItem("Delete"));
 edit.add(new JMenuItem("Select All"));
 query.add(new JMenuItem("Compile"));
 query.add(new JMenuItem("Run"));
 query.add(new JMenuItem("Execute"));
 setJMenuBar(menuBar);
 void panes() {
 JPanel panel = new JPanel();
 textArea = new JTextArea(4, 50);
 textArea.setBorder(BorderFactory.createLineBorder(Color.black));
 JTabbedPane tabbedPane2 = new JTabbedPane(JTabbedPane.BOTTOM);
 JTable table = new JTable(5,10);
 tabbedPane2.add("Result",table);
 table.setBorder(BorderFactory.createLineBorder(Color.black));
 tabbedPane2.add("Message",result);
 tabbedPane2.setPreferredSize(new Dimension(750, 350));
 tabbedPane2.setBackground(Color.ORANGE);
 connection = new JButton("Connection");
 panel.add(connection);
 execute = new JButton(" Execute ");
 execute.addActionListener(this);
 panel.add(execute);
 panel.add(new JScrollPane(textArea));
 panel.add(tabbedPane2);
 //panel.add(new JScrollPane(table));
 panel.setPreferredSize(new Dimension(750, 475));
 panel.setBackground(Color.PINK);
 //panel.setLayout(new GridLayout(2,3));
 JTabbedPane tabbedPane = new JTabbedPane(JTabbedPane.TOP);
 tabbedPane.addTab("QUERY", new JScrollPane(panel));
 tabbedPane.addTab("SCHEMA BROWSER",
 new JScrollPane(new JTextArea(5, 5)));
 tabbedPane.addTab("ANALYSIS", new JButton("< HAI ALL >"));
 container.add(tabbedPane);
 tabbedPane.setBackground(Color.ORANGE);
 public void actionPerformed(ActionEvent e) {
 Object src = e.getSource();
 /* myArea.getDocument().addDocumentListener( */
 if (src == execute) {
 String query = textArea.getText();
 try {
 Statement smt;
 smt = null;
 smt = con.createStatement();
 rs = smt.executeQuery(query);
 while (rs.next()) {
 result.append(rs.getString(1) + "\t" + rs.getInt(2)
 + "\n");
 smt.close();
 } catch (Exception ae) {
 ae.printStackTrace();
 void makeConnection() {
 try {
 Class.forName("sun.jdbc.odbc.JdbcOdbcDriver");
 con = DriverManager.getConnection("jdbc:odbc:jmc", "sa", "sprint");
 //con.close();
 System.out.println("Connection successfully estabilished.");
 } catch (Exception ae) {
 ae.printStackTrace();
 public static void main(String arg[]) {
 Trial1 trial = new Trial1(
 "trials.");
}

Creating a editor pane

I want to create a Editor pane like notepad, but in that i want to access images also. can any anybody suggest me.. please

Take a look at the Java editor pane (jEditorPane).
Here is some info to get you started:
http://www.apl.jhu.edu/~hall/java/Swing-Tutorial/Swing-Tutorial-JEditorPane.html

Ideas for a "virtually" tabbed pane

I'm developing on this application for keeping information about products and customers in a shop.
In my "product manager" window I would like to have tabbed pane with an input interface for different types of goods in each tab respectively. But since the interface is more or less the same for different products (with fields like product name beeing persistent), it would be better to just alter the input components programmatically (in the pane's stateChanged event), rather than having to duplicate components for 7 different tabs... Hope my point gets through. This is strictly a matter of Look & Feel -- this is the most neat sollution i could think of :)

mannamann wrote:
I appreciate your commitment to ridding the forums of the "by getters". I know that my question was probably a little superficial, and something that I could have figured out myself. My goal is not to get rid of get byers, but I will want to expend more of my free time and effort helping those where the paybacks for me are greatest -- the highly motivated. It is truly amazing and gratifying to see those of this kind progress.
But since the primary focus of our project is not GUI-programming, isn't it fair to post a "quicky" here, to draw some knowledge from experts like you? So that I don't have to spend my entire day working out UI, when I prefered to focus on the data model of my program. After all, isn't that what the forum is all about?It's about sharing knowledge, of course, but having said that, you can't ignore the human component either. We're all volunteers, and given our druthers, we'll put in more effort towards those who do likewise. You really can't expect otherwise, right?

Create "Tab Control" like the news section in sap-corporate-portal

Hello everyone,
my name is akan korul and i'm a student working with the enterprise portal (EP 6.0) for about two weeks.
about my problem:
I want to create a tab control (tabstrip) similar to the sap corporate portal news section. How could i realize this very nice object? I was searching for similar threads but i think the creation of the tabcontrol via html is not a suitable solution. Any other ideas?
I need this tab control to display our weekly company menu in a separate section.
Thank you very much in advance to everyone.
With best regards
Akan Korul

Hello Detlef,
thank you very much for your suggestion and your helpful answer. Maybe I have to specify my problem a little bit:
I want to create a very simple TabExplorer with following structure:
Monday/Tuesday/Wednesday/Thursday/Friday
Each day contains the menu (lunch) and some other informations, which has to be maintained by the employee himself.
@Detlef: Thank you for the information but is there just an easier way to realize this?
apologize these questions but I'm an absolutely newbie on this topic :-).
With best regards / Grüße
Akan

Would like to create 'tabs' not 'app tabs'. When I do create a 'tab' or multiple 'tabs', when I re-open Foxfire, the 'tabs' are gone.

Tabs created on the top line do not re-appear when Foxfire is reopened. I created 4 tabs. I used them. They work great. Then I close out of Foxfire. The next day I open Foxfire, and all 4 tabs are gone. How do I 'save' the 4 tabs so that they always appear when I open Foxfire?

Based on the info above i think this article might help. [[Session Restore#w_configuring-session-restore]]

Disposable tabbed pane redrawing

Hi, i'm using disposable tabbed panes (with close button) in my program and i'm using following method to update their titles according to what user entered:
//this is class extending JPanel
public void updatePanelTitle(String newTitle) {
 MainPanel panel = (MainPanel) getParent(); //MainPanel extends JTabbedPane
 panel.setTitleAt(panel.getComponentZOrder(this)-1, newTitle);
 repaint();
 }Point is the title gets changed but the size of panel label does not. However, when i mouse-over the close button there, it gets changed to the size of the text.
@Override
 public void mouseEntered(MouseEvent e) {
 Component component = e.getComponent();
 if (component instanceof AbstractButton) {
 AbstractButton button = (AbstractButton) component;
 button.setBorderPainted(true);
 }setBorderPainted calls inside the repaint method.
Can anyone give a clue why it is not working or how to fix it?
Regards,
Marek

Well its quite big but if it helps, this is the panel class:
package presentationTier.view;
import com.bbgroup.ui.Console;
import java.awt.GridBagConstraints;
import java.awt.GridBagLayout;
import java.awt.Insets;
import javax.swing.BorderFactory;
import javax.swing.JButton;
import javax.swing.JLabel;
import javax.swing.JPanel;
import javax.swing.JScrollPane;
import javax.swing.JTextField;
import javax.swing.border.Border;
import javax.swing.text.BadLocationException;
import presentationTier.Model.Properties;
import presentationTier.Model.PropertyInterface;
import presentationTier.Model.StandardInputOutput;
import presentationTier.controller.ConfirmListGeneratorAction;
import presentationTier.controller.ConfirmSearchReplaceAction;
import presentationTier.controller.OpenBrowseDialogAction;
* @author marek
public class ListGeneratorPanel extends JPanel implements StandardInputOutput, PropertyInterface {
 private JLabel labStartPath, labExtensions;
 private JTextField txtStartPath, txtExtensions;
 private JButton butBrowse, butGo;
 private Console console;
 private GridBagConstraints c;
 private Insets labelInsets, normalInsets;
 public ListGeneratorPanel() {
 super(new GridBagLayout());
 initComponents();
 borderCompononets(BorderFactory.createLoweredBevelBorder());
 resetConstraints();
 c.gridx = 0;
 c.gridy = 0;
 c.insets = labelInsets;
 add(labStartPath, c);
 c.gridx = 1;
 //c.gridwidth = 1;
 c.weightx = 1;
 c.insets = normalInsets;
 add(txtStartPath, c);
 c.gridx = 2;
 //c.gridwidth = 1;
 c.weightx = 0;
 add(butBrowse, c);
 c.gridx = 0;
 c.gridy = 1;
 c.weightx = 0;
 c.insets = labelInsets;
 add(labExtensions, c);
 c.gridx = 1;
 //c.gridwidth = 3;
 c.weightx = 1;
 c.insets = normalInsets;
 add(txtExtensions, c);
 c.gridx = 2;
 c.gridwidth = 1;
 //c.gridheight = 1;
 c.weightx = 0;
 add(butGo, c);
 c.gridx = 0;
 c.gridy = 2;
 c.gridwidth = 5;
 c.weighty = 1;
 add(new JScrollPane(console), c);
 resetConstraints();
 private void initComponents() {
 c = new GridBagConstraints();
 console = new Console(true);
 labelInsets = new Insets(5, 5, 0, 0);
 normalInsets = new Insets(5, 5, 0, 5);
 labStartPath = new JLabel("Search under:");
 labExtensions = new JLabel("File types:");
 txtStartPath = new JTextField();
 txtExtensions = new JTextField();
 butBrowse = new JButton(new OpenBrowseDialogAction(this));
 butGo = new JButton(new ConfirmListGeneratorAction(this));
 private void borderCompononets(Border b) {
 getTxtStartPath().setBorder(b);
 getTxtExtensions().setBorder(b);
 private void resetConstraints() {
 c.ipadx = 0;
 c.ipady = 0;
 c.gridwidth = 1;
 c.gridheight = 1;
 c.weightx = 0;
 c.weighty = 0;
 c.fill = GridBagConstraints.BOTH;
 c.anchor = GridBagConstraints.FIRST_LINE_START;
 c.insets = normalInsets;
 public Properties createProperties() {
 Properties p = new Properties();
 p.setSout(this);
 p.setStartPath(getTxtStartPath().getText());
 p.setExtensions(getTxtExtensions().getText());
 return p;
 * @param line
 * @throws BadLocationException
 public void echo(String line) throws BadLocationException {
 getConsole().echo(line);
 * @param line
 * @param style
 * @throws BadLocationException
 public void echo(String line, String style) throws BadLocationException {
 getConsole().echo(line, style);
 public void drawSeparator() throws BadLocationException {
 getConsole().drawSeparator();
 public void passBrowsedFilePath(String browsedFilePath) {
 getTxtStartPath().setText(browsedFilePath);
 public void updatePanelTitle(String newTitle) {
 MainPanel panel = (MainPanel) getParent();
 panel.setTitleAt(panel.getComponentZOrder(this) - 1, "Generate: " + newTitle);
 updateUI();
 repaint();
 public Console getConsole() {
 return console;
 public JTextField getTxtStartPath() {
 return txtStartPath;
 public JTextField getTxtExtensions() {
 return txtExtensions;
}When you add instance of this to your JTabbedPane, you will get closeable Tabbed Pane with title you specified in addTab(title, component);
I implement method updatePanelTitle(String newTitle); to change the title of this tab when suer submits the data. These action controllers that call submitting and updating title are in controller package. Problem is that the title itself is changed when data are submitted but the size of the tab is not adjusted to newTitles length. It is just adjusted when i pull my mouse over the close button that implements action from previous post. It's in this class:
package com.bbgroup.ui;
import javax.swing.*;
import javax.swing.plaf.basic.BasicButtonUI;
import java.awt.*;
import java.awt.event.*;
* Component to be used as tabComponent;
* Contains a JLabel to show the text and
* a JButton to close the tab it belongs to
public class DisposableTabPanel extends JPanel {
 private final JTabbedPane pane;
 public DisposableTabPanel(final JTabbedPane pane) {
 //unset default FlowLayout' gaps
 super(new FlowLayout(FlowLayout.LEFT, 0, 0));
 if (pane == null) {
 throw new NullPointerException("TabbedPane is null");
 this.pane = pane;
 setOpaque(false);
 //make JLabel read titles from JTabbedPane
 JLabel label = new JLabel() {
 @Override
 public String getText() {
 int i = pane.indexOfTabComponent(DisposableTabPanel.this);
 if (i != -1) {
 return pane.getTitleAt(i);
 return null;
 add(label);
 //add more space between the label and the button
 label.setBorder(BorderFactory.createEmptyBorder(0, 0, 0, 5));
 //tab button
 JButton button = new TabButton();
 add(button);
 //add more space to the top of the component
 setBorder(BorderFactory.createEmptyBorder(2, 0, 0, 0));
 private class TabButton extends JButton implements ActionListener {
 public TabButton() {
 int size = 17;
 setPreferredSize(new Dimension(size, size));
 setToolTipText("Close this tab");
 //Make the button looks the same for all Laf's
 setUI(new BasicButtonUI());
 //Make it transparent
 setContentAreaFilled(false);
 //No need to be focusable
 setFocusable(false);
 setBorder(BorderFactory.createEtchedBorder());
 setBorderPainted(false);
 //Making nice rollover effect
 //we use the same listener for all buttons
 addMouseListener(buttonMouseListener);
 setRolloverEnabled(true);
 //Close the proper tab by clicking the button
 addActionListener(this);
 public void actionPerformed(ActionEvent e) {
 int i = pane.indexOfTabComponent(DisposableTabPanel.this);
 if (i != -1) {
 pane.remove(i);
 //we don't want to update UI for this button
 public void updateUI() {
 //paint the cross
 protected void paintComponent(Graphics g) {
 super.paintComponent(g);
 Graphics2D g2 = (Graphics2D) g.create();
 //shift the image for pressed buttons
 if (getModel().isPressed()) {
 g2.translate(1, 1);
 g2.setStroke(new BasicStroke(2));
 g2.setColor(Color.BLACK);
 if (getModel().isRollover()) {
 g2.setColor(Color.MAGENTA);
 int delta = 6;
 g2.drawLine(delta, delta, getWidth() - delta - 1, getHeight() - delta - 1);
 g2.drawLine(getWidth() - delta - 1, delta, delta, getHeight() - delta - 1);
 g2.dispose();
 private final static MouseListener buttonMouseListener = new MouseAdapter() {
 @Override
 public void mouseEntered(MouseEvent e) {
 Component component = e.getComponent();
 if (component instanceof AbstractButton) {
 AbstractButton button = (AbstractButton) component;
 button.setBorderPainted(true);
 @Override
 public void mouseExited(MouseEvent e) {
 Component component = e.getComponent();
 if (component instanceof AbstractButton) {
 AbstractButton button = (AbstractButton) component;
 button.setBorderPainted(false);
}I cant possibly post a running code as it uses third party libraries and implements bunch of interfaces, it would require whole nearly whole view-controller part of the project.
Another problem is that method getComponentZOrder(this) - 1, works for retrieving all tabs except the first one (it returns fine indexes for any tab but -1 for the first one) but sadly there is no such method like getIndex(Component) which would be useful for getting this components index.
Thanks in advance for ideas.
Regards, Marek

How to refrash tabbed pane at a run time

hi,
I have no practice in using tabbed panes, and now I have to solve a little problem. I am running internal frame wich contains tabbedpane. The tab which opens by default contains combobox which reads its data from DB. But when I open internal frame no data exists in a combobox.
Since I change the tab and select back again the same tab data combobox reads its data. I tried to validate the tab but nothing changes.
Where is my fault?

The code that loads the data into the combo box is not being executed when you first create the internal frame. We can't tell you why since we have no idea what your code looks like.
So, trace the order of execution to see why the code is not executing.

Creating a "tabbed" image in an exported PDF or SWF

I posted about this last year, well in advance of actually doing it, and thought I had the correct answer (see http://forums.adobe.com/message/3759403#3759403). However, now that I've had a detailed look at CS6 and tried to create a "tabbed" PDF (my original term, but more correctly called a multi-state object with interactive buttons), I find that it can't be done. Although maybe it can, hence this post.
I'm trying to make a file (PDF, SWF, whatever) exported from CS6 that can be opened by virtually any novice computer user without hassle. i.e something like a PDF; something my grandmother could open and marvel at the cleverness of her grandson. Here are some options I've tried.
Method 1
Export a "tabbed" image from CS6 to Interactive PDF format. Unfortunately, "tabbed" images don't tab. Or have I not ticked the right options when exporting?
Method 2
Export to SWF format, with the HTML option ticked. But that seems to generate two separate files: an swf file and a .html file. Clicking on the latter opens the file in a web browser – so far so good, and it works like a charm – but I don't like the idea of two files when I send them to my grandmother. I suppose I could encapsulate both of them in a zip file, tell her to open that, and then open the one with the suffix .html… but you can see the process is getting complicated, probably beyond my poor old Nanna.
Method 3
Export to PDF (Print). To get this to work for "tabbed" images, this is what I envisage (not yet tried).
Say I have three images that I want to overlay and tab between, like you can do in Photoshop. I set up multiple interactive buttons (Next, Back, Skip…), appropriate text anchors, and whatever else is needed, on three separate pages, with the three images in identical locations on those pages.
The user comes to the first image, checks out the image, then hits Next. The page seems to instantly change to the next image (on the next page).
The user then hits Next or Back or Skip.
In the above thought experiment, I think I have simulated "tabbed" images at the cost of additional pages. Any novice user could easily open the document, though I'd have to make sure the navigation is very clear and simple to use.
I welcome any comments on obtaining "tabbed" images from a document exported from CS6.

Thanks Bob. I posted a short while ago, but have edited that post.
With further playing around I was able to get your suggestion working (exporting to SWF, then placing, then exporting as Interactive PDF). Why would I be disappointed if I tried that method with an entire document? My document will probably contain about 200 pages, and maybe 20 of them would have "tabbed" images. What problems would I come across, other than the extra time involved in separately generating 20 pages of "tabbed" images.
[Added after some testing]:
One problem I have found is that text is rasterised.
When I export a page from InDesign to SWF, and then open the SWF file in Flash Player (Projector), text is a vector.
When the SWF file is imported back into InDesign, and exported as a Interactive PDF, the text ends up rasterised…
But if I export as SWF, the text is not rasterised.
CS6 is rasterising the text within a SWF file when it exports to PDF. Is there a way of exporting an SWF file to Interactive PDF so that text is not rasterised?

Form inside Tabbed Pane

Hi, I have a JSF Tabbed Pane with 5 tabs and one of the tab's content contains a datascroller with an input text field 'Go To' where the user can enter the page number to jump to. When I hit enter after typing in a page number, it seems like it just refreshes the page (I think it processes as a Tabbed Pane 'tabchangeevent' but in fact it's not). However, after typing in a page number, and manually clicking the 'Go' button, it submits correctly (to the datascroller) and displays the correct content. Any ideas what could be the problem?

I would try using static, compile time includes rather than runtime includes.

Setting color for disabled tab pane header.

How can I change the color of a tab header (in tabbed pane) that is disabled?
Many thanks.
Shay.

I can sugest you to :
-> create your own TableHeader, that you could draw it like you want
-> Don't use the header, and define your own TableModel and the apparenece
-> Use the setBackground method of JTableHeader
-> Define your own Look And Feel

Create each tab as separate PFDfile

Post Author: Björn
CA Forum: WebIntelligence Reporting
Hi
I saw that in XIR2 SP3, there is a way for DESKIdoc to enable the feature of creating each tab as a separate PDF-file, like version 5x/6x.
Is there a way to do the same to WEBIdocs when viewing them in PDFmode?
Cheers
Björn

Hi Anita
I tried to check the details regarding alignment of the contents that you have placed in accordion , best suggestion is already mentioned in forum thread that you have attached with the message as by that way you can define the placement alignment of the contents.
In case you don't want to go with that option , then there are few ideas which I can think of like split in categories and then use composition and then place the details in accordion inside composition.
Other way can be use text frames with rectangle and group them all but this would make the page length long.
Its your wish which option you want to opt, you can download the libraries and try out as example with split category or individual frames on page, simply edit the content and use on page.
Individual frames for contents : http://muse.adobe.com/exchange-library/teambox-musegain-com
Split Category : http://muse.adobe.com/exchange-library/qooqee-all-in-one-gallery
Not an exact solution to your question but a different approach to design the content.
Thanks,
Sanjit

How to use tab-pane-floating?

What does "The styleclass is "tab-pane-floating" if the TabPane is floating" or "STYLE_CLASS_FLOATING" mean?
Can "tab-header-area" and "tab-content-area" be used separately ? ( to put "tab-header-area" in a toolbox and "tab-content-area" elsewhere.)
How can a button be put into "tab-header-area" ? ( "New Tab" button, like browsers have, for example).

It seems that floating tabs mode and style are to be used when... floating (dragging?) tabpane. TabPane.STYLE_CLASS_FLOATING not only change some styles (see caspian.css) but also prevents ".tab-header-background" to be created.I don't think we are much closer to understanding the true purpose of the floating style for tabpane and would need somebody else to document it to elucidate it. I have sent a request to the JavaFX documentation team for a tutorial for TabPane, and hopefully they can provide example usage of the floating styles (and other TabPane features) there.
newTabButton must then be translated in appropriate position, as if Side is TOP, LEFT,etc. and for *.tab-header-area do some -fx-padding to make room for newTabButtonStackPane.setAlignment(node, pos) may help with the translation and standard -fx-padding css for the button control can accomplish the padding.
http://docs.oracle.com/javafx/2/api/javafx/scene/layout/StackPane.html#setAlignment%28javafx.scene.Node,%20javafx.geometry.Pos%29
Of course, not for floating tabs since it uses ".tab-header-background" StackPane to layout newTabButt.Yeah, one of the reasons why using the css selectors to lookup nodes in complex controls for manipulation, is a bit of a risky strategy.
Another solution : create a StackPane . Add TabPane on StackPane , and then add newTabButton (use LayoutX,LayoutY to put it in appropriate position ). In TabPane, make room for newTabButton by shifting .tab-header-area with some -fx-padding. Simpler but needs one extra StackPane .This solution seems more robust.
I saw willow-browser before, as a starting point. For every tab, there is an (unused) "tab-content-area --StackPane". Yes, I did it that way because I wanted the tabs placed in a general navigation bar with forward and back buttons, location field and other controls in it (similar to IE9) and the pane layout for tabs didn't seem flexible enough for me to do that as it placed the panes directly under the tabs. The unused stackpane there is actually a zero height but with a width which forces the tabPane control to just become a set of tabs without content sized only to the width allocated in the UI for the tabs themselves, and not the real browser window content, then I just react on the tabs like buttons to swap in and out different webviews in a stack for the main browser display. In some ways this accomplished the decoupling of the tabs in tab headers from tab content in a seperate pane.
I think that the real solution is to put the "new tab" button inside "tab-header-area". Perhaps, I found it easier just create a seperate new tab button and lay it out seperately from the tab header area. In addition to being easier, it also seemed more flexible, because then I could place the new tab button wherever I wanted in the UI rather than just directly next to the tabs in the tab-header-area.

How can i place button on top right hand corner of the tabbed pane

Hi all,
i want to place button on top right hand corner of the tabbed pane, just run the code below, i have add button(it going to insert tab into tabbedpane), i want to place that tab into top right hand corner of the tabbedpane (not inside the tab itself). if i set tab policy setTabLayoutPolicy(JTabbedPane.SCROLL_TAB_LAYOUT), it will give two button at right hand corner along with those buttons i want to and one more add button.
please suggest so that i can move forward.
Thanks in advance
import java.awt.Dimension;
import java.util.HashMap;
import javax.swing.JPanel;
import javax.swing.JTabbedPane;
* @author Dayananda.BV
public class TabpaneDemo extends javax.swing.JFrame {
 /** Creates new form TabpaneDemo */
 HashMap<Integer, tabpanel> panelMap = new HashMap<Integer, tabpanel>();
 public TabpaneDemo() {
 initComponents();
 createFloorPlan();
 getContentPane().setPreferredSize(new Dimension(400,400));
 jTabbedPane1.setTabLayoutPolicy(JTabbedPane.SCROLL_TAB_LAYOUT);
 /** This method is called from within the constructor to
 * initialize the form.
 * WARNING: Do NOT modify this code. The content of this method is
 * always regenerated by the Form Editor.
 // <editor-fold defaultstate="collapsed" desc=" Generated Code ">
 private void initComponents() {
 jTabbedPane1 = new javax.swing.JTabbedPane();
 add_tab_button = new javax.swing.JButton();
 setDefaultCloseOperation(javax.swing.WindowConstants.EXIT_ON_CLOSE);
 add_tab_button.setText("+");
 add_tab_button.setMargin(new java.awt.Insets(0, 0, 0, 0));
 add_tab_button.addActionListener(new java.awt.event.ActionListener() {
 public void actionPerformed(java.awt.event.ActionEvent evt) {
 add_tab_buttonActionPerformed(evt);
 javax.swing.GroupLayout layout = new javax.swing.GroupLayout(getContentPane());
 getContentPane().setLayout(layout);
 layout.setHorizontalGroup(
 layout.createParallelGroup(javax.swing.GroupLayout.Alignment.LEADING)
 .addComponent(jTabbedPane1, javax.swing.GroupLayout.DEFAULT_SIZE, 400, Short.MAX_VALUE)
 .addGroup(javax.swing.GroupLayout.Alignment.TRAILING, layout.createSequentialGroup()
 .addContainerGap(308, Short.MAX_VALUE)
 .addComponent(add_tab_button, javax.swing.GroupLayout.PREFERRED_SIZE, 25, javax.swing.GroupLayout.PREFERRED_SIZE)
 .addGap(67, 67, 67))
 layout.setVerticalGroup(
 layout.createParallelGroup(javax.swing.GroupLayout.Alignment.LEADING)
 .addGroup(layout.createSequentialGroup()
 .addComponent(add_tab_button)
 .addGap(8, 8, 8)
 .addComponent(jTabbedPane1, javax.swing.GroupLayout.DEFAULT_SIZE, 292, Short.MAX_VALUE))
 pack();
 }// </editor-fold>
 private void createFloorPlan(){
 tabpanel floorplan_Panel = new tabpanel(panelMap.size()+1);
 panelMap.put(floorplan_Panel.getTabIndex(), floorplan_Panel);
 jTabbedPane1.add(floorplan_Panel, floorplan_Panel.getTabName());
 jTabbedPane1.setSelectedIndex(jTabbedPane1.getTabCount()-1);
 private void add_tab_buttonActionPerformed(java.awt.event.ActionEvent evt) {
 createFloorPlan();
 * @param args the command line arguments
 public static void main(String args[]) {
 java.awt.EventQueue.invokeLater(new Runnable() {
 public void run() {
 new TabpaneDemo().setVisible(true);
 // Variables declaration - do not modify
 private javax.swing.JButton add_tab_button;
 private javax.swing.JTabbedPane jTabbedPane1;
 // End of variables declaration
 class tabpanel extends JPanel{
 private int tabIndex = 0;
 private String tabName ;
 public tabpanel(int tabIndex) {
 this.tabIndex = tabIndex;
 if(tabIndex >= 10) {
 tabName = "Floor Map"+tabIndex;
 } else{
 tabName = "Floor Map"+tabIndex+" ";
 public int getTabIndex(){
 return tabIndex;
 public String getTabName(){
 return tabName;
}Thanks
Dayananda B V

This part of tabbed pane is not customizable as it lies in the ComponentUI(TabbedpaneUI) portion of the tabbedpane.
But I can point out the place u can change to bring the desired feature into effect.
U can find an Inner class called ScrollableTabSupport
Look for the methods createButtons where u can create extra buttons and add to the tabbed pane.
The Inner class also implements actionListener where u can implement the action for the button u added.
By this method U have to use your own extended TabbedPaneUI which u cant escape from.
Hope this will help u.

Creating resizeable tabbed panes like an IDE

Similar Messages

Maybe you are looking for