Squeak browser plugin and JavaScript

--------------------------------------------------
From: "Bert Freudenberg" <[hidden email]>
Sent: Tuesday, September 07, 2010 6:15 AM
To: "The general-purpose Squeak developers list"
<[hidden email]>
Subject: Re: [squeak-dev] Squeak browser plugin and JavaScript

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 -
>
>
>

On 07.09.2010, at 13:38, Rob Withers wrote:
> 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

Well, you would have to look at the JS code that this translates to. Manipulating the DOM is the low-level way to interact with the browser, but often that is hidden in layers of framework code.

If you get your framework done, its users also would not have to worry about how exactly this interacts with the browser. Typically only the framework developers are dealing with this layer. Of course you can choose to layer your stuff on top of another framework. Saves quite some time and effort, but may be less efficient.

- Bert -

--------------------------------------------------
From: "Bert Freudenberg" <[hidden email]>
Sent: Tuesday, September 07, 2010 8:20 AM
To: "The general-purpose Squeak developers list"
<[hidden email]>
Subject: Re: [squeak-dev] Squeak browser plugin and JavaScript

Ok, I looked into the GWT framework a bit (I am brand new to it) and there
are classes like

* UIObject (sets style name for css and title),
* UIObject subclass Widget (accepts DOMEvents and dispatches them),
* Widget subclass Composite (holds a Widget "The composite is useful for
creating a single widget out of an aggregate of multiple other widgets
contained in a single panel.")
* Widget subclass Panel subclass ComplexPanel subclass CellPanel subclass
VerticalPanel
* Composite subclass DisclosurePanel (used in the example I gave) which
holds a VerticalPanel.

As you can see there is a robust framework in Java to support this tool.
There are DOMEvents.  We would need the same sort of framework in Squeak, as
you mention.

>
> If you get your framework done, its users also would not have to worry
> about how exactly this interacts with the browser. Typically only the
> framework developers are dealing with this layer. Of course you can choose
> to layer your stuff on top of another framework. Saves quite some time and
> effort, but may be less efficient.
>

Ok, so I think what we are discussing in this thread is 2 tools:

1) a Squeak framework to model and generate a UI in Javascript.  As I have
yet to find time to look at some of the suggested packages, I don't know
which apply to this tool (Clamato, Lively, ST2JS).  I don't think OMeta
plays here.

2) A Javascript to bytecode engine such that Javascript will be Jitted and
run on the vm.  Somehow the vm will display to any browser and react to it's
events.  I think OMeta plays here as a Javascript compiler.

I WANT BOTH TOOLS!

I want to position my framework, SqueakElib, on the browser plugins for
secure, distributed objects available to SqueakJSUI/Javascript framework
elements.

Rob

On 9/6/10, Dan Ingalls <[hidden email]> wrote:

Great to see your post with interesting news, Dan.

  If there is significant
> interest, it would be fairly easy slide the OMeta work up a bit in
> our schedule.
>
> - Dan
>

OMeta, yes.
I'd like to compile JavaScript to Smalltalk in Squeak (and maybe the
other way round as well)

--Hannes