Sunday, November 29, 2009

Strange scroll behaviour of ScrollPanel

Hi,
I tried to implement a widget which would realize the commonly used
FAQ page approach (which means questions as links situated at the top
and answers below, when a link is clicked the panel scrolls at the
correct position to show the corresponding answer).

I expected that using ScollPanel and its ensureVisible() method will
do the job. It does actually but in a very strange way. I would expect
that when one of the top links is clicked the scrollpanel will scroll
so that the corresponding answer will be aligned right at the top of
the visible scrollpanel's area. But it is not and I have no idea why.
It seems that the position of the element which is desired to be
visible is rather random.

Have a try here http://romant1.sweb.cz/gwt/AppFaq.html

Did anyone experience this?
Is even possible in GWT to implement the same functionality which the
classic html tag <a name="jump_here"/> provides?
Thnx.

P.S. Here is the java source code.

package my.gwt.client;

import java.util.HashMap;

import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.event.dom.client.ClickEvent;
import com.google.gwt.event.dom.client.ClickHandler;
import com.google.gwt.user.client.ui.Composite;
import com.google.gwt.user.client.ui.FlowPanel;
import com.google.gwt.user.client.ui.HTML;
import com.google.gwt.user.client.ui.RootPanel;
import com.google.gwt.user.client.ui.ScrollPanel;

public class AppFaq implements EntryPoint {

public void onModuleLoad() {
RootPanel.get().add(new AppFaqInner());
}


private class AppFaqInner extends Composite implements ClickHandler
{

private final String[] answers = {"Lorem ipsum dolor sit amet,
consectetur adipiscing elit. Pellentesque non magna eros, a mollis
lacus. Vestibulum a turpis libero, et volutpat eros. In id risus vitae
nunc vulputate adipiscing.",
"Sed mollis egestas est, vel ornare augue malesuada ut.
Aliquam vulputate eros sit amet metus ultricies pellentesque. Vivamus
a velit purus. Nam fringilla, lorem a dignissim venenatis, nibh metus
posuere felis, ut euismod nisi enim sit amet erat.",
"Morbi nulla justo, fringilla nec hendrerit a, pharetra
at libero. Sed id eros sapien, nec sagittis enim. Quisque viverra
justo nec urna venenatis et vestibulum metus luctus. In aliquam lacus
ac lacus placerat venenatis. Quisque et augue ante. Mauris ac nunc
est. Mauris ac nunc est. Mauris ac nunc est. Mauris ac nunc est.
Mauris ac nunc est.",
"Cras convallis orci congue massa pharetra et consequat
nunc faucibus. Vestibulum sit amet ligula ut sem lacinia tempor.",
"Quisque fermentum condimentum suscipit. Phasellus
sollicitudin, nibh non volutpat ornare, mi dolor facilisis diam, vitae
aliquet nulla nisi eu tellus.," +
"Suspendisse at nisi ante, nec dapibus erat. Etiam
tincidunt lacus ac sem ultrices aliquet nec et erat. Vestibulum
pretium lacus vitae velit adipiscing vitae fermentum quam tincidunt.
Suspendisse quis massa ipsum. Duis ultricies malesuada posuere.",
"Suspendisse ultricies neque vitae nisl tempor sed
fermentum mauris feugiat. ",
"Suspendisse ultricies neque vitae nisl tempor sed
fermentum mauris feugiat. Suspendisse ultricies neque vitae nisl
tempor sed fermentum mauris feugiat. "};

private final ScrollPanel scrollPanel;
// maps the top question links to the corresponding answers
private HashMap<HTML, FlowPanel> linkMap;

public AppFaqInner() {
scrollPanel = new ScrollPanel(getFaqContent());
scrollPanel.setStyleName("ScrollPanel");

initWidget(scrollPanel);
}

private FlowPanel getFaqContent() {
linkMap = new HashMap<HTML, FlowPanel>();

FlowPanel content = new FlowPanel();
FlowPanel linkPanel = new FlowPanel();
content.add(linkPanel);

for (int i=1; i< 8; i++) {
// top question link
HTML link = new HTML("Question " + i);
link.setStyleName("QuestionLink");
link.addClickHandler(this);
linkPanel.add(link);
// answer
FlowPanel answerBox = getAnswerBox("Question " + i, answers
[i-1]);
content.add(answerBox);
linkMap.put(link, answerBox);
}
return content;
}

private FlowPanel getAnswerBox(String question, String answer) {
FlowPanel answerBox = new FlowPanel();
answerBox.setStyleName("AnswerBox");
HTML html = new HTML(question);
html.setStyleName("Question");
answerBox.add(html);
answerBox.add(new HTML(answer));
return answerBox;
}


public void onClick(ClickEvent event) {
Object sender = event.getSource();

// question link clicked, show the correspoding answer
if (sender instanceof HTML) {
scrollPanel.ensureVisible(linkMap.get(sender));
}
}
}

}

--

You received this message because you are subscribed to the Google Groups "Google Web Toolkit" group.
To post to this group, send email to google-web-toolkit@googlegroups.com.
To unsubscribe from this group, send email to google-web-toolkit+unsubscribe@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/google-web-toolkit?hl=en.

0 Comments:

Post a Comment

Subscribe to Post Comments [Atom]

<< Home


Real Estate