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