hi to All I am new to Vaadin …
I have some problem that are given below
I have A split panel If I want to split bar should be work as if we click on split bar then it should open or closed one side area & also drag it (as user requierment)
2-> can we open two Accordion tab altogether in any lay out
3 How we can change Icon in the accordion tab if we click on that tab (suppose we want to open one accordion tab and thin tab contain some data At the first when tab is not open the icon on the same tab was(+) when we click on the tab the tab icon change to (-)) is this is functionality of accordion tab are we have to set that …
Please help me ASAP…
thanks every body for share your knowledge…
The SplitPanel only supports resizing the panel by dragging the split bar. If you need additional functionality you must extend the VSplitPanel (client side part of the split panel component) or create your own split panel. There is also a feature request (
http://dev.vaadin.com/ticket/3526 ) for adding support for collapsing/expanding the split panel by double clicking.
The Accordion always has one tab open. Again the component can be extended to add this behavior.
The icon can be changed using the Tab.setIcon() method. Something like:
public class AccordionIcons extends Application {
private Component selected;
private Accordion acc;
@Override
public void init() {
setMainWindow(new Window());
acc = new Accordion();
for (int i = 0; i < 5; i++) {
acc
.addTab(
new Label("Contents of tab " + i),
"Tab " + i,
new ExternalResource(
"http://demo.vaadin.com/VAADIN/themes/runo/icons/16/arrow-right.png"));
}
selected = acc.getSelectedTab();
setIcon(selected, true);
acc.addListener(new SelectedTabChangeListener() {
public void selectedTabChange(SelectedTabChangeEvent event) {
setIcon(selected, false);
setIcon(acc.getSelectedTab(), true);
selected = acc.getSelectedTab();
}
});
getMainWindow().addComponent(acc);
}
protected void setIcon(Component component, boolean open) {
Resource icon;
if (open) {
icon = new ExternalResource(
"http://demo.vaadin.com/VAADIN/themes/runo/icons/16/arrow-down.png");
} else {
icon = new ExternalResource(
"http://demo.vaadin.com/VAADIN/themes/runo/icons/16/arrow-right.png");
}
Tab tab = acc.getTab(component);
tab.setIcon(icon);
}
}
For point one, would it be a good idea to have generic click and resize events coming from the splitpanel? This way you could attach your own logic for the events, and you could do basically anything you’d want.
About the Accordion, I made a “custom version” by just having buttons (accordion tabs) and layouts (the content of the accordions) and then playing around with expand ratios to enable any kind of customization to it. I needed more customizations to the accordion headers, but it would be easy to use it for showing two accordions at the same time.
for your response …
I have tried your recent post as for accordion but if we want to see the change in also a tab I mean to say the according to below example when we click on tree then effect on the only other side of split panel if it Have both side Accordion with multiple tab then action action will be managed I am attaching my screen shot what we want
In attach file there are one split panel in first side there are two accordion tab in other side there are three tab
at first side tab contain the list of tree which will link to the table shown is second side in second tab show how will manage this type problem please help me
public class AccordionApplication extends Application {
4
5 private SplitPanel splitPanel;
6
7 @Override
8 public void init() {
9 Window window = new Window();
10 setMainWindow(window);
11 splitPanel = new SplitPanel(SplitPanel.ORIENTATION_HORIZONTAL);
12 splitPanel.setFirstComponent(createAccordion());
13 splitPanel.setSecondComponent(new Label(“The default contents”));
14 window.addComponent(splitPanel);
15 }
16
17 private Component createAccordion() {
18 Accordion accordion = new Accordion();
19 Tree tree1 = createNavigationTree();
20 addItem(tree1, “Show a TextField”, new TextField(“”,
21 “It’s a TextField!”));
22 addItem(tree1, “Show a Button”, new Button(“It’s Button!”));
23
24 Tree tree2 = createNavigationTree();
25 addItem(tree2, “Show another TextField”, new TextField(“”,
26 “It’s another TextField!”));
27 addItem(tree2, “Show another Button”,
28 new Button(“It’s another Button!”));
29
30 ItemClickListener myListener = new ItemClickListener() {
31
32 public void itemClick(ItemClickEvent event) {
33 Item clicked = event.getItem();
34 Component c = (Component) clicked.getItemProperty(“view”)
35 .getValue();
36 splitPanel.setSecondComponent(c);
37 }
38 };
39
40 tree1.addListener(myListener);
41 tree2.addListener(myListener);
42
43 accordion.addTab(tree1, “The first tree”, null);
44 accordion.addTab(tree2, “The second tree”, null);
45
46 return accordion;
47 }
48
49 private void addItem(Tree t, String text, Component c) {
50 Object id = t.addItem();
51 Item item = t.getItem(id);
52 item.getItemProperty(“caption”).setValue(text);
53 item.getItemProperty(“view”).setValue(c);
54
55 }
56
57 private Tree createNavigationTree() {
58 Tree tree = new Tree();
59
60 tree.addContainerProperty(“caption”, String.class, null);
61 tree.addContainerProperty(“view”, Component.class, null);
62
63 tree.setItemCaptionPropertyId(“caption”);
64
65 return tree;
66
67 }
68
69} 11124.doc (109 KB)