GWT - adding pseudo Anchor - gwt

Is there any way in GWT to get a pseudo anchor ??????
I just want to have TextCell or textColumn in a Celltable with underlined text onclick of which a dialog box opens. This is a simple requirement and i donno why i am still not able to figure out how to do this. If it was to be written in HTML this is hardly 2 seconds job.
And i do not want to use Hyperlink or Anchor which causes a page refresh which seems unnecessary for my requirement.
This looks more complex than learning Japanese to me.

ClickableTextCell is probably what you are looking for. You can quickly override it's render method to give the cell content the appearance you require, if the standard appearance is not suitable.
When the cell is clicked, the value updater of the Column that hosts the cell will be called.

Related

GWT implementing-- Sophistication of CellTable behavior, flexibility of CellList look

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.

How can I set the title on a GWT cell widget?

I have a cell table that has several columns whose data may occasionally be wider than their column's width.
I have my css text-overflow set to ellipsis so it is obvious to the user that there is more to the cell's value when it exceeds the column's width.
With a "normal" widget, I would just use setTitle() to automatically display the full contents on mouse over, but the TextCell (and all other cell widgets) do not extend UiObject, so they do not have this method available.
A TextCell is implemented by a div within a td tag. Being able to set the title on either elements would give me the behavior I am looking for, but I cannot seem to find a way to get a handle on either of the elements.
What is the best way to get the HTML title behavior to work in a cell table widget?
Thanks,
Doug
you can write your own cell implementation and set the title in the html template yourself.
Take a look at a cell implementation. Basically they provide the html string for rendering.
Some of these kinds of issues have been "fixed" in GWT 2.3. But if you are stuck with using GWT 2.2, then writing your own cell implementation is the way to go.

how to add a disclosure panel to a cellTable column in GWT

I have a cellTable with 5-6 columns. I want to put a plus icon in each row on clicking of which will display the details maybe in a disclosure panel. I have been looking around for a while now and I cannot find any information on how to achieve this. Could someone point me in the right direction?
i suspect i probably have to add a cellTree to the column? how do i go about this?
Thank you for your response in advance.
There is work in progress to allow expandable rows in CellTable among other features (maybe GWT 2.3). You can see more details here:
http://groups.google.com/group/google-web-toolkit-contributors/browse_thread/thread/b4a8a6e3c98ac061#
If that is not enough or you can not wait untill it is released I can think of two ways to achieve it:
As you said, using a CellTree.
Creating a custom cell that stores
state (open/close). Depending on the
state the cell will render
differently. In same way it is
similar to how EditTextCell works, in
"edit" state it renders an input
field while in "normal" state it renders
simple text.
I'm trying to do that too ... I managed to mimic that functionality toying with the html and a custom cell class that allows clickable pictures.
It is working for normal content such as text but if you'd like to get an asynchronous data to show in the expended line, I don't know how to do it ... (I'm trying to do exactly that).
Also, it doesn't look good because the columns don't align well ...
So what I've done is:
- create a custom cell class to display a picture (right pointing triangle, looking like the triangle in the disclosure panel)
In the click event get the HTML code of the selected row and copy it. Replace the content of the row (all cells) in the table with only one cell with its colspan set to number of columns. In the cell, add a table with first line the copied row and second line the content to display as expanded.
Get the image to sink an event for closing. In event, reset the original row that we copied.
I hope it helps.

Smartgwt - create a panel with title and a border

This sounds like a pretty simple thing to do but I havent been able to find an easy way to do this. How do I create a panel with a title and a border which can contain my widgets? I have seen the SectionStack class which provides this. But I dont want to create a section stack.
Window can be added to a layout and drawn. But is it the only way or is there a container class that I am missing?
Also, how does one center things? Say a textfield and a button at the center of the page. How is this achieved?
If you are using a DynamicForm, you can give it a border and title with
form.setIsGroup(true);
form.setGroupTitle(title);
This actually works for Canvas, too (which is the superclass of most widgets and layouts in SmartGWT).
(I just had the same problem, and found this question, as well as the thread Is there a "titled Border" on the SmartGWT Forums, which gave this answer. I tried and it seems to work.)
To do form-related tasks, look into DynamicForm. To set the inputs in the form, you use setItems(Item...). A text field is a TextItem. You set it's title to control the label that SmartGWT will build. To get a title for the form, the best I've come up with is to use a container canvas that will contain both the title (probably a Label element) and the DynamicForm. To center the inputs, I believe you'd need to use setAlignment on the DynamicForm.
You could create an object that is actually a VLayout that contains a Label (the tile), has a border as you need and includes a Canvas (the generic stuff you want included).
In my experience, I noticed that very often I have a DynamicForm visible, so I just add a BlurbItem control to diplay the tile and a small explanation.

Large scrollview table with buttons

We are trying to write a training manual application for the iPhone. On the top half of the screen is a diagram of a car engine, on the bottom half is some text. At the user repeatedly hits a "next" button, we highlight different parts of the engine, and in concert we highlight different parts of the descriptive text below.
We basically want "living text" in the text half, with the illustration following along on top to where the reader is in the text. What we'd like from the text is 1. user can scroll it using their thumb so possibly a UIScrollView 2. the software can explicitly drive a scroll to any part of the text (when they hit the "next" button). 3. the words in the text are interspersed with hotlinks e.g. "this is the camshaft... this is the piston..." and the user should be able to click on any of the keywords like camshaft, piston, and have the diagram highlight that. (The problem is not highlighting the diagram, its capturing the click). The text would have 300~400 buttons/links/keywords and about 600 words of text.
Since this is fairly similar to using a web browser, we tried using Apple's version of webkit using a UIWebView and handleOpenURL to register a service back to the app itself. But Webkit for internal links a popup comes up asking permission to access that link. Every single the user wants to go to a link (in our case just an internal event that we'd intercept so that we can highlight e.g. the camshaft). Tried to intercept the event from the HTML view, but that didn't work.
It seems like the best we can do is to abandon scrolling text, and make the text part more like flash cards or a power point presentation, breaking the text into custom UIViewCells with buttons inside a UIScrollView. However, this would impose an annoying constraint on the author that they would have to write everything to fit in the UIViewCells, sort of chunky.
Any ideas would be appreciated.
This is definitely something you can use a UIWebView for. Don't use handleOpenURL, rather, set your viewController as the webview's delegate, and override -webView:shouldStartLoadWithRequest:navigationType:. When this gets called, check the request, and pull out your link data from there.
It would probably be easier to implement that completely in JavaScript in the document you load in a UIWebView. You would have to use JavaScript (i.e. [UIWebView stringbyevaluatingjavascriptfromstring:]) anyway to achieve things like scrolling to a certain position.