[squeak-dev] Squeak browser plugin and JavaScript

Rob Withers reefedjib at gmail.com
Tue Sep 7 11:38:20 UTC 2010



--------------------------------------------------
From: "Bert Freudenberg" <bert at freudenbergs.de>
Sent: Tuesday, September 07, 2010 6:15 AM
To: "The general-purpose Squeak developers list" 
<squeak-dev at lists.squeakfoundation.org>
Subject: Re: [squeak-dev] Squeak browser plugin and JavaScript

>
> On 07.09.2010, at 04:05, Rob Withers wrote:
>
>>
>>
>> --------------------------------------------------
>> From: "Bert Freudenberg" <bert at freudenbergs.de>
>> Sent: Monday, September 06, 2010 1:17 PM
>> To: "The general-purpose Squeak developers list" 
>> <squeak-dev at lists.squeakfoundation.org>
>> Subject: Re: [squeak-dev] Squeak browser plugin and JavaScript
>>
>>> (un-cc'ing vmdev)
>>>
>>> On 06.09.2010, at 15:02, Rob Withers wrote:
>>>
>>>> Hi Bert,
>>>>
>>>> I should start by explaining why I think the use of JavaScript is 
>>>> desirable. JS enables client side UI and behaviors.   It is back to fat 
>>>> client, with a server publishing the UI and the content, but the UI 
>>>> runs in the client.  JS supports client-side behaviors to respond to 
>>>> mouse over, hover, move?, click, selection, etc.  It is a professional 
>>>> look and feel and accepted industry wide - broad support in modern 
>>>> browsers.
>>>>
>>>> Let's look at the alternatives you mention, and please correct me if I 
>>>> have the wrong read on it:
>>>>
>>>> 1) HTML/DOM - no client side behavior.  Not a robust UI.   All static 
>>>> elements.
>>>
>>> Huh? All you do in Javascript is manipulating the DOM. Unless you draw 
>>> your own UI using the HTML Canvas object.
>>>
>>
>> I don't understand this.  Could you explain what you mean when you say 
>> "All you do in Javascript is manipulating the DOM".  I realize a DOM 
>> comes from the servlet
>
> Err, no. The DOM lets you manipulate HTML:
>
> http://www.w3schools.com/htmldom/
>
> The DOM is JS's view of the HTML page, and it can manipulate it. That's 
> all there is to it (if you cut through the piles of marketing bs). It's a 
> very simple idea, and as often, those are the powerful ones ;)
>
> E.g. if you want to hide or show a control in JS you change attributes on 
> the DOM which the browser then renders.
>
>> , but there are all these objects that are created and interact (to mouse 
>> events, timers, other events).  It talks to the server with DOM but the 
>> behavior is more than just manipulating the DOM, isn't it?
>
> This has nothing whatsoever to do with a server. As I pointed out earlier 
> ;)
>

Right, nothing to do with the server.  I see now what you are talking about. 
My problem seeing this is that GWT does nothing with a DOM.  It is all about 
adding window classes to panels and installing action handlers.   When this 
is translated to Javascript, it must create code that manipulates the DOM, 
but I don't see it in the Java layer.

As an example, here is a widget that allows you to pick a satellite and 
coverage area.

public class CoverageAreaPicker extends Composite {
  DisclosurePanel panel = new DisclosurePanel();
  Area area;
  ArrayList<SatellitePicker> satellitePickers = new 
ArrayList<SatellitePicker>();
  FlexTable satelliteTable = new FlexTable();
  boolean hasOpened = false;

  public CoverageAreaPicker(final Area area) {
    this.area = area;
    final Anchor header = new Anchor(area + "\u25ba");
    panel.setHeader(header);
    panel.add(satelliteTable);
    initWidget(panel);
    setStyleName("area");

    panel.addOpenHandler(new OpenHandler<DisclosurePanel>() {
      public void onOpen(OpenEvent<DisclosurePanel> event) {
        header.setText(area + "\u25bc");
        if(!hasOpened) {//Retrieve transponder information once from the 
model.
          getTransponders(area, new AsyncCallback<Map<Satellite, 
List<Transponder>>>() {
            public void onFailure(Throwable caught) {
              Window.alert("Failed to get transponders for coverage area " + 
area);
            }
            public void onSuccess(Map<Satellite, List<Transponder>> result) 
{
              int index = 0;
              for(Satellite sat:result.keySet()) {
                SatellitePicker picker = new SatellitePicker(sat);
                satelliteTable.setWidget(0, index++, picker);
                if(index % 2 != 0)
                  picker.addStyleDependentName("even");
                satellitePickers.add(picker);
                picker.renderTable(result.get(sat).toArray(new 
Transponder[0]));
                applySelections();
                applyAvailabilityFilters();
                hasOpened = true;
              }
            }
          });
        }
      }
    });

    panel.addCloseHandler(new CloseHandler<DisclosurePanel>() {
      public void onClose(CloseEvent<DisclosurePanel> event) {
        header.setText(area + "\u25ba");
      }
    });
  }

  public void open() {
    panel.setOpen(true);
  }

  public SatellitePicker getSatellitePicker(Satellite sat) {
    for(SatellitePicker picker:satellitePickers) {
      if(picker.satellite == sat)
        return picker;
    }
    return null;
  }
}

Now this puppy is added to an outer panel, from the ChannelPicker object. 
There are methods called here to the out scope, like #applySelections(), and 
#applyAvailabilityFilters().

This CoverageAreaPicker builds a panel (DisclosurePanel) and to that adds a 
header and a satelliteTable (FlexTable).  Then is calls initWidget and sets 
the style name.  The style name is used in the css to control layout.

 It installs two handlers: OpenHandler and CloseHandler.  The OpenHandler 
calls
    getTransponders(area, new AsyncCallback<Map<Satellite, 
List<Transponder>>>() {
and builds an anonymous class implementing onFailure and onSuccess.

In onSuccess, it adds a SatellitePicker to the satelliteTable.

So, it does seem to be building a DOM, with adding panels, tables and other 
classes to each other, and it is setting properties, and adding callbacks, 
but it isn't very visible as a DOM.

Rob

> - Bert -
>
>
> 



More information about the Squeak-dev mailing list