I would like to develop in GWT a vertical menu similar to the one found on http://gwt.google.com/samples/Showcase/Showcase.html (the left blue menu which first section is "Widgets").
Since it's a GWT showcase, one can assume that left menu is a GWT widget, but which one ?
I have browsed every example and none of them looks like that menu. Any guess ?
Did you know the Showcase sample is open-source? It's even bundled with the GWT SDK.
The code tells use it's a CellTree within a ScrollPanel (within a DockLayoutPanel within a DockLayoutPanel):
The UiBinder template
The code initializing the CellTree
The code initializing the TreeViewModel (including prefetching the split-points for the samples when you expand a category node; and updating the center panel when you select a sample node)
the TreeViewModel itself
It's the CellTree widget!
A demo is actually inside the showcase: CellTree, but in the example, it has a different style applied:
CellTree.Resources res = GWT.create(CellTree.BasicResources.class);
CellTree.Resources res = GWT.create(CellTree.BasicResources.class);
cellTree = new CellTree(
new ContactTreeViewModel(selectionModel), null, res);
(this stlyes makes the +/- buttons and lets it look like a regular tree)
If you don't apply this style the Cell Tree looks like the left menu.
Looks just like a vertical arrangement of DisclosurePanel. Here are the docs.
Related
I am trying to remove borders of the portlet as well as the panel.
Below is my code snippet,
public class TestViewImpl extends ViewImpl implements TestViewPresenter.MyView{
private PortalLayoutContainer portal;
#Inject
public TestViewImpl (){
portal = new PortalLayoutContainer(1);
vp = new VerticalLayoutContainer();
portal.getElement().getStyle().setBackgroundColor("white");
portal.setColumnWidth(0, 1);
portal.setBorders(false);
ContentPanel portlet = new Portlet();
portlet.getHeader().setVisible(false);
portlet.setBorders(false);
portlet.setBodyBorder(false);
portlet.add(vp);
portlet.setResize(true);
portlet.setBodyStyle("backgroundColor:white;");
portal.add(portlet, 0);
But somehow the border is always visible.How do I remove the border ? Please help.
Thanks in advance
With that code I can get the borders to disappear (with small alterations to container instantiation). Where are those containers coming from? Are you using UI Binder, if so could you post that code as well.
The blue section that is left is the background from the header. (Hide header hides the text)
If you really need to remove the outline border (which is a background image actually), you can try something like this:
Element e = portlet.getElement().getFirstChildElement();
e.getStyle().setBorderWidth(0, Unit.PX);
Here is the screenshot of the result:
It's not going to be easy, but this is the only way (from what I know and tried already), you going to need developer tools on browser (i.e. firebug) to do inspection, and predict what element to get and what attribute to remove. The code I provide above are just example how we can remove the top outline border, and for the rest you can tried it by yourself. Goodluck :-)
GXT 2.25.
I have a screen with a layout container with a TableLayout with two columns. The left column has a tree grid. The right column is a layout container with table layout, one column.
When I click on various items on the tree grid, I want to display editable fields in the layout container on the right that match to the item clicked on.
When I first start the form and am loading the data from the server, I add text to the layout container and it seems to be fine.
After the text is loaded, I call secondLayout.removeAll() to remove all items. Then I click on an item in the tree. The selection method calls secondLayout.removeAll() and then adds a new text item "Loaded..." for testing.
private LayoutContainer secondaryLayout;
And then...
secondaryLayout.removeAll();
secondaryLayout.add(new Text("Loaded..."));
Ideas?
After making structural changes to a container, be sure to invoke (in GXT 2) the layout method to re-run the layout routines. The alternative is to configure the LayoutContainer to re-run layouts on each modification (using setLayoutOnChange), but that would in this case be at least two re-layouts - one for removeAll, and another for each new object added. Could be needlessly expensive, so better to run once and for all when you are finished making changes.
(Worth pointing out perhaps that GXT 2.2.5 is just over two years old, 2.2.6, 2.3.0 have gone out since then, and it is being superseded by GXT 3. In GXT 3, the method here would be forceLayout.)
I'm building a Qt plugin with multiple forms. I have a main form which has a tree widget placed on the left of the form.
I want to add items to this tree, such that clicking on these items would load the corresponding form on the same form. But I want the tree widget to be active so that I can select any other form also.
I was able to display a form on the main form using the following code:
Form1 *myform;
myform=new Form1(this);
myform->show();
where Form1 is the class of the form i intend to display. However this, covers up the tree widget also. And I have to do a string comparison of the item in tree being clicked to display the appropriate form.
Can someone please help me with this as I'm very new to Qt programming.
Thanks
ixM has a good suggestion. The first step should definitely be to use layouts in your main window - separating the tree from the rest of the window - where you are going to put your form. I would suggest using a splitter, because then the user can resize the two halves. You can set the splitter as the main widget of your CentralWidget in your main window.
QSplitter splitter = new QSplitter(CentralWidget);
splitter->setOrientation(Qt::Horizontal);
splitter->setHandleWidth(3);
splitter->setChildrenCollapsible(false);
MyTree= new QTreeWidget(splitter);
splitter->addWidget(MyTree);
Then add your tree widget to the splitter, which will be on the left side.
The next step is to add a placeholder widget on the right side of your splitter. We are also going to add a layout inside that widget. This layout is very important we are going to use it later.
QWidget WidgetRightSide = new QWidget(splitter);
QVBoxLayout setupLayout= new QVBoxLayout(WidgetRightSide);
setupLayout->setSpacing(0);
setupLayout->setContentsMargins(0, 0, 0, 0);
Now, at this point, this is where my answer really differs from the previous answer. You could use a QStackedWidget. That is certainly an option. The problem with that is that you have to create and load all your forms at the beginning. That uses way more memory, and will take longer to start up. That's not so bad if you have 2-5 forms, but when we are talking about 20, 30 or more forms that's really ugly.
So what I would suggest instead, is that when the user selects something in the tree, we will remove the old form, and add the newly selected form at that point.
When the selected item in the tree changes this is now what we have to do.
First, remove all the stuff from the previously selection form.
QLayoutItem *_Item;
while ((_Item = setupLayout->takeAt(0)))
delete _Item;
Next, figure out what form to show next, and create it.
QWidget *ActiveSetupForm = NULL;
if ( I need to load form 1)
{
ActiveSetupForm = new YourNewForm( WidgetRightSide);
}
else ...
And lastly, add your new form to our layout.
if(ActiveSetupForm)
{
setupLayout->addWidget(pActiveSetupForm);
}
Just as a side note. Layouts are tricky to do by hand. I would strongly suggest that you look into using the QtDesigner when you are creating your forms. It makes life soooo much easier. If you would like to know more about it check out this link.
I don't exactly understand what you are trying to achieve but the bit of code you are showing suggests that you do not use the layouts provided by Qt.
If your goal is to be able to dynamically load a form depending on the item that was clicked in the tree, you could achieve that by having a layout (let's say QHBoxLayout) where you would insert your tree and a QStackedWidget in which you could "store" each form (by using addWidget()) and choose which one you want to display by calling setCurrentIndex().
I am using gwt 2.3 version.I am using gwt tree in my application.
Here is my code:
public void onModuleLoad() {
// Create a tree with a few items in it.
TreeItem root = new TreeItem("root");
root.addItem("item0");
root.addItem("item1");
root.addItem("item2");
// Add a CheckBox to the tree
TreeItem item = new TreeItem(new CheckBox("item3"));
root.addItem(item);
Tree t = new Tree();
t.addItem(root);
// Add it to the root panel.
RootPanel.get().add(t);
}
There is a item with check box.I want add image to this tree item.But I am not able to do this as I already added one widget check box.Is there any other way add image to tree item with check box??
TreeItem has a TreeItem(Widget w) constructor.
You can put anything you want in there. So write a small widget that has an image and text next to each other in a div and the Tree will render it correctly.
You are already using it in your example code. So just write one more widget that combines the CheckBox with an image in a FlowPanel or HorizontalPanel. Whatever you want.
This is something that made me whack my head for a while also. Basically I found 2 options:
Use SmartGWT, it has nice customizable tree widgets that let you change the pictures of the nodes:
http://www.smartclient.com/smartgwt/showcase/#tree_databinding_local
Use GWT's tree-image:
http://google-web-toolkit.googlecode.com/svn/javadoc/1.5/com/google/gwt/user/client/ui/TreeImages.html
If you ask me, SmartGWT is somewhat demanding and rigid, and you might not like the fact that it doesn't let you go to the low leves like GWT does but it does have a nice set of customizable tree widgets. TreeImage on the other hand lets you still work with pure GWT (which I think is better overall), but it doesn't let you customize the tree as much as Smart GWT does
In GWT, I am using CellTable.
When you mouse over the CellTable it highlights each row.
How do change the behavior of the highlighting from the mouse over? Specifically:
change the color of highlighting
disable/enable
make it highlight only the specific grid item at your cursor (instead of the entire row)
( The current hack I have is to create a bunch of 1 column wide CellTables and add them to a VerticalPanel layout... creating the illusion that there is one CellTable and it highlights each grid according to your cursor. Is this bad? Why? performance? )
You will notice the CellTable uses a ResourceBundle, which means all the css styles get obfuscated ... this makes it more difficult to override styles.
The CellTable constructor will actually allow you to override the default ResourceBundle. So first, you need to create your own resource bundle like this:
public interface CellTableResources extends Resources {
public CellTableResources INSTANCE =
GWT.create(CellTableResources.class);
/**
* The styles used in this widget.
*/
#Source("CellTable.css")
CellTable.Style cellTableStyle();
}
Then you need to create your own CSS file. I recommend copying the CellTable style directly into your project and use that as a starting point. You can find it here:
http://code.google.com/p/google-web-toolkit/source/browse/trunk/user/src/com/google/gwt/user/cellview/client/CellTable.css
Make sure the style is injected first, and then you just feed it into the CellTable's constructor like this:
CellTableResources.INSTANCE.cellTableStyle().ensureInjected();
myCellTable = new CellTable<T>(Integer.MAX_VALUE,CellTableResources.INSTANCE);
Specifically, you'll want to tweak these styles:
cellTableKeyboardSelectedRow
cellTableKeyboardSelectedRowCell
cellTableSelectedRow
cellTableSelectedRowCell
cellTableKeyboardSelectedCell
It is important to note that the cell table differentiates between the 'selected row' and the 'keyboard selected row'. The selected row is the actual row selected (ie via SelectionModel). The keyboard selected row refers to what is highlighted when the user is pressing the up / down key, but does not mean the row is actually selected (if that makes sense).
I'll just add for number 2) on your list, you can simply do
cellList.setSkipRowHoverStyleUpdate(true)
That completely disables highlighting. There are also two more setSkip-functions on CellList related to hovering.
CellTable can be styled via CSS: How do I style a gwt 2.1 CellTables headers?
To disable highlighting just set the hover CSS property to nothing.
Possibly - try tweaking the .cellTableSelectedRow and .cellTableSelectedRowCell.
Here is the original CellTable.css: http://www.google.com/codesearch/p?hl=en#A1edwVHBClQ/user/src/com/google/gwt/user/cellview/client/CellTable.css&q=cellTableLastColumn&d=8