I have a requirement of a tree like widget in a CellTable and so far I haven't found anything that works seamlessly. So, I was evaluating celltree.
As most of my functionality is ready with CellTable and as tree like requirement has come very late into the development I want to incorporate it somehow in the CellTable itself rather than re-writing the whole UI again.
Is it possible to do with CellTable?
If you are using CellTable implement a custom Cell and feed it an implementation of TreeViewModel. Easier said than done, but that's the basic approach I would use.
Related
I'm using GWT 2.5 and am looking for a Tree widget which will allow me to have a multi-selection model controlled by checkboxes adjacent to each TreeNode. Something similar to the JQuery plugin described here with the following results:
As you might expect, I'd hope that checking a box would select all children of the checked node, and if any children are unchecked, you'd get the "half-checked" icon (shown by the "Solutions" node) -- so I'll need a three-state checkbox.
Does this widget exist in GWT already, or would I need to code it myself?
There is no default widget in GWT 2.5 that supports this.
Your options:
Use third-party library
Implement you own widget
I used to implement my own based on CellTree and although it's feasible - it requires lots of work (custom tree model, cell widgets with renderers and value updater-s). If you flexible on choosing libraries - have a look at Smart GWT's checkbox tree.
With a GWT CellTable its possible to add different columns that handle the click event in different ways.
For example lets say we have 3 columns:
an Avatar Image (ImageCell),
a name (TextCell),
checkbox (Checkbox
cell).
Then image adding these events:
When the ImageCell is clicked we can open a popup.
When the checkbox is clicked select the row.
When the name is clicked open the users profile.
With a CellTable it's straight forward to accomplish this.
However what if we wanted a view that doesn't look like a table. The CellTable is tied to a HTML Table for its implementation. Why not allow for a general HTML implementation of the CellTable (behavioral) API.
Using a CellList we can accomplish any view. But the API isn't as sophisticated as the CellTable. It would be cool if we could add something analogs to CellTable 'Columns' to a CellList.
Is there anyway to accomplish this with the current Cell Widgets? I might have over looked something.
Thanks!
I think there are two solutions:
Use a CellTable and style it so that it looks like a CellList. This should be quite straightforward and possible. However you would have to play with the CSS styles a little bit. Best approach would be to use Firebug to change the styles on the fly and see the results instantly
Use a CellList and create a custom cell which renders and handles events for your use case (Avatar, Name and Checkbox). This is more involved but there is a tutorial on the GWT page.
I would probably try to go with solution 2 because it also teaches you how to create custom Cells which might come in handy later on.
Update:
As Thomas suggested in the comments you can use a CompositeCell which wraps 3 different cells. That's probably the easiest way to implement it.
I need to create a custom component which can have Label then Textfield and Image, by clicking the image i should select date, that selected date should be populated in TextField,
Is there way i can develop a custom component.
Thanks in Advance!!!
Absolutely!
You need to create a custom widget, and the way to do that is to extend the Composite class.
From the documentation:
A composite is a specialized widget that can contain another component (typically, a Panel) but behaves as if it were its contained widget. You can easily combine groups of existing widgets into a composite that is itself a reusable widget. Some of the UI components provided in GWT are composites: for example, the TabPanel (a composite of a TabBar and a DeckPanel) and the SuggestBox.
Rather than create complex widgets by subclassing Panel or another Widget type, it's better to create a composite because a composite usually wants to control which methods are publicly accessible without exposing those methods that it would inherit from its Panel superclass.
There is a good example to get you started here:
http://code.google.com/webtoolkit/doc/latest/DevGuideUiCustomWidgets.html
The GWT showcase give an example of somthing similar to what you are looking for along with the source code:
"Date Picker" - GWT Showcase
If you want to develop a custom component, look at #Jon Vaughan's answer!
You may also use third party libraries with widgets, like Ext GWT or SmartGWT. Date picker is one of the base widgets that everyone provides.
I'm really struggling with a choice between the GWT Tree widget, which has been a part of GWT for ages; or the new CellTree, which is introduced by GWT 2.1.
The tree I want to present to the user is not particularly large, but I am very concerned about responsiveness.
The data at the nodes of the tree will be editable. By clicking on a node, the user will put the node into edit mode. Editing the more simple nodes will require only a single TextBox or TextArea; but others will involve several widgets, over which I want styling control via CSS.
I'm attracted to the CellTree approach because it seems to offer great flexibility and speed; however, the sample code for CellTree editing deals with only very simple data types: string, date, integer, etc. I don't know if CellTree is appropriate when you've got more complex node-editing needs.
What do you think? Is CellTree the best approach? Does CellTree replace Tree in general? What heuristics can I apply in choosing between them?
I'm using a CellTable with several custom input Cells, including one comprised of many widgets. It works great!
It took me a couple of hours to understand how to implement a custom Cell that could do complex operations - since a single instance of the Cell will flit around the CellTree, pretending to be many instances, you need to understand how it's getting its data and when it is refreshed and rendered. I learned a lot from the source of the DatePickerCell.
I can't speak for CellTree, but the CellTable is very flexible, was easy to program, and saves me hundreds of Widget instances.
Using CellTree is problematic. Because it hasn't good access to view implementation stored in CellTree. It cause problem (ex. for me :D) in making custom handlers for opening nodes with children by clicking on whole parent cell. Of course you can make custom cells by AbstractCell, where you must write own renderer.
I think this widget must be enchanced and more objects must be more visible for users.
Customizing CSS is simple. All what you have to do is extende CellTree.resource and insert own css based on celltree.css class names.
i am using gwt to build my web site.
i would like to create a dropdown/listbox that contains no just text but also images, meaning that in the drop down there will be a what ever widget that ill create.
please advise
jaimon
You won't be able to do this with a ListBox, because it just creates an HTML < select> element.
You can use a MenuBar that has one menu with MenuItems in it to simulate a dropdown with complex widgets inside it. You will also be able to style the dropdown rather than rely on browser-styled form elements.
Take a look at the Combobox or Suggestion box in Advanced GWT Components.
Another widget is the DropDownListBox in the GWT incubator. I have not used it, but the stated intent is to provide a rich, stylable ListBox. You can pass raw HTML to the addItem() method.
DropDownListBox
it is possible to use Tree inside ScrollPanel, without using nested items
Tree allows TreeItem to be a Widget