Changing a Frame's contents when HTML widgets are clicked.

[Paul]

I am running Eclipse with GWT and I have a Frame that I want to update
(refresh) it's contents when a selection is clicked from the
StackPanel. When I run it right now it does not load the new web page
unless I click refresh several times. Here is some of the code I'm
using.

StackPanel classes = new StackPanel();
DockPanel mainPanel = new DockPanel();
VerticalPanel cs211s1 = new VerticalPanel();
Frame syllabi = new Frame("http://www.google.com/");
mainPanel.add(syllabi,DockPanel.CENTER);
syllabi.setSize("440px", "440px");

if(History.getToken().length() == 1)
{
//mainPanel.remove(syllabi);
syllabi.setUrl("http://www.gmail.com/");
}
else
{
syllabi.setUrl("http://docs.google.com/");
}

Hyperlink cs211syl1 = new Hyperlink("Syllabus", "s");
cs211s1.add(cs211syl1);
classes.add(cs211s1, "CS 211 Sec. 1");
mainPanel.add(classes, DockPanel.WEST);

RootPanel.get().add(mainPanel);

Any help would be greatly appreciated.

[Ian Bambury]

It really shouldn't ever show you anything except Google Docs.

You set the frame to Google, then immediately check the history token length (which will be zero) and change it to Google Docs.

End of.

Unless you set some kind of history listener then clicking on the hyperlink will change the bookmark, but there's nothing there to react to it, so nothing is going to happen.

Try something like this (make sure you have the history frame in your html)

import com.google.gwt.core.client.EntryPoint;

import com.google.gwt.event.logical.shared.ValueChangeEvent;

import com.google.gwt.event.logical.shared.ValueChangeHandler;

import com.google.gwt.user.client.History;

import com.google.gwt.user.client.ui.DockPanel;

import com.google.gwt.user.client.ui.Frame;

import com.google.gwt.user.client.ui.Hyperlink;

import com.google.gwt.user.client.ui.RootPanel;

import com.google.gwt.user.client.ui.StackPanel;

import com.google.gwt.user.client.ui.VerticalPanel;

public class MainController implements EntryPoint, ValueChangeHandler<String>

{

    Frame syllabi = new Frame("http://www.google.com/");

    @Override

    public void onModuleLoad()

    {

        StackPanel classes = new StackPanel();

        DockPanel mainPanel = new DockPanel();

        VerticalPanel cs211s1 = new VerticalPanel();

        mainPanel.add(syllabi, DockPanel.CENTER);

        syllabi.setSize("440px", "440px");

        Hyperlink cs211syl1 = new Hyperlink("Syllabus", "s");

        cs211s1.add(cs211syl1);

        classes.add(cs211s1, "CS 211 Sec. 1");

        mainPanel.add(classes, DockPanel.WEST);

        RootPanel.get().add(mainPanel);

        History.addValueChangeHandler(this);

    }

    @Override

    public void onValueChange(ValueChangeEvent<String> event)

    {

        if(History.getToken().length() == 1)

        {

            syllabi.setUrl("http://www.gmail.com/");

        }

        else

        {

            syllabi.setUrl("http://docs.google.com/");

        }

    }

}

And unless you have a good reason for it, I'd swap the DockPanel and VP for divs

Ian

http://examples.roughian.com

2009/8/14 Paul <paul.st...@gmail.com>

[Paul]

That does exactly what I want it to do in the Hosted Mode browser,
when I compile and run it in Firefox it redirects the entire site to
whichever link was supposed to be only inside the Frame.

Once launched in Firefox it shows Google.com in the Frame as it
should. Once I click Syllabus and it changes to google docs it
redirects the page completely and shows google docs just like you
would see google docs regularly. Good-bye app. I'll tinker with it
some.

I'm not sure if I need to publish it to the server to resolve this
issue or if this will cause quirks later.
Thanks Ian for the tip, that solved one problem. :)

> 2009/8/14 Paul <paul.stonek...@gmail.com>

[Ian Bambury]

I think docs and gmail probably break out of frames and reload themselves for security reasons - try something less contentious :-)

Ian

http://examples.roughian.com

2009/8/15 Paul <paul.st...@gmail.com>

[Paul]

That was a little too easy of a fix. Thanks.

On Aug 14, 7:17 pm, Ian Bambury <ianbamb...@gmail.com> wrote:
> I think docs and gmail probably break out of frames and reload themselves
> for security reasons - try something less contentious :-)
> Ian
>
> http://examples.roughian.com
>

> 2009/8/15 Paul <paul.stonek...@gmail.com>

[Radu Grigore]

On Aug 14, 11:27 pm, Ian Bambury <ianbamb...@gmail.com> wrote:
> And unless you have a good reason for it, I'd swap the DockPanel and VP for
> divs

You mean working with DivElement instead of VerticalPanel? If so, then
why?

[Ian Bambury]

Divs of some description. 

Maybe as id'd divs in the html. This makes it possible to radically alter the layout without affecting functionality and allows designers to design and programmers to program. Even if the programmer is the designer, they can effect changes in the html and css without a recompile.

Using divs (even if you are just adding flowpanels to other flowpanels) makes layout easier.

Tables, as everyone knows, got a really bad press when used for layout (and VPs, HPs and DockPanels and the like are all table-based) and although there was a lot of rubbish talked, it is easier to get a semantically significant layout using divs (and that means text-readers - and search engines - can make more sense of it)

DockPanels are something else again - they tempt programmers away from better structured code IMNSHO, creating too many classes at the same level. Which is probably fine while you are playing about and learning, but makes maintenance in real-life applications a right bugger.

And most of these table-based panels *require* that you set heights and widths in the code unless you want all the TDs the same size. If you create three cells in a VP the only way to set the heights is in code - unless you shove other widgets in there and let them expand when you set the height of those widgets (but then if you decrease the size of the widgets, in some browsers the table won't shrink back).

There are other consideration due to the way GWT works which means that in large apps you might get significant performance hits if, say, you are creating a lot of nested widgets. Using a widget has some overheads and if you don't need to use a widget then it's probably a good practice not to use a widget. Even if you need to do stuff dynamically in code, you can use the HTMLPanel and shove divs in that.

A quick test showed that divs with ids in an HTMLPanel is 2.3 times faster than div elements with ids in another div element and 13 times faster than labels with ids in a verticalpanel. 10,000 took about 65ms, 150ms, and 850ms respectively (averaged over a number of tests). That was in Chrome. IE7 took between 35 and 40 seconds to put labels in a VP. Users start to notice delays like that.

There may be quicker ways of coding it though, I just knocked 3 examples together, but it probably gives a good idea. 

Ian

http://examples.roughian.com

2009/8/17 Radu Grigore <radug...@gmail.com>