SwingJS milestone achieved -- embedded components in JalviewJS

Well, that was easy! Twitter time!

image.png

This is the first image ever, I think, of a Java Desktop application (or any Java application, for that matter) dynamically embedded in a web page as auto-generated JavaScript, simultaneously created with its Java equivalent in real time.

  • fully functional (other than a few bugs)- functions exactly like Java, but better (because we have the full range of interactivity and context that browsers bring to the table)

  • fully modular (unlike GWT)

  • fully interactive Java+JavaScript development environment

  • completely automated command-line-based production environment

:wink:

All we are doing here is putting full frames in their undecorated ( frame.setUndecorated(true) ) Java state into specified divs on the page. Java has no issue with in that – the frames are self-contained entities that have always been able to be moved anywhere on the page anyway. We are specifying that in the page’s HTML code, not in Java.

The web page designer just has to add a div with an id of the frame’s name appended with “-div”, placing that wherever they want a frame to be. Frames that do not have matching divs pop up as usual. Here, for example:

The alignment frame will appear here momentarily...

In this example, the Jalview desktop frame (using JDesktop) has a size and position that is set on the HTML page, and the alignment frame (a JInternalFrame) is embedded in a div at (100,100).

At least for this part of the operation, there is no problem with multi-instance pages, where more than one Java application is open. We need to check all static variables, though, to make sure that there is no conflict. Note that each instance appears in Java to run in its own thread group, and it is that group that keeps track of which applet is which. (Actually, the thread group is assigned each time an event brings us back into the Java event queue.)

I’m headed to Davidson College, in North Carolina, to work with my collaborator on the Physlets-JS project for a few days, so no Skype for me this Tuesday.

Getting this checked in now; leaving in 4 hours.

Bob

···

Robert M. Hanson
Professor of Chemistry
St. Olaf College
Northfield, MN
http://www.stolaf.edu/people/hansonr

If nature does not answer first what we want,
it is better to take what answer we get.

– Josiah Willard Gibbs, Lecture XXX, Monday, February 5, 1900

great progress, Bob.

Is there any way for a designer to catch the ‘open frame/internal frame’ event and dynamically feed it a div ? That would provide a catch-all for the lazy. Looking forward to seeing the commit… and the docs :wink:

Jim.

Well, that was easy! Twitter time!

image.png

This is the first image ever, I think, of a Java Desktop application (or any Java application, for that matter) dynamically embedded in a web page as auto-generated JavaScript, simultaneously created with its Java equivalent in real time.

  • fully functional (other than a few bugs)- functions exactly like Java, but better (because we have the full range of interactivity and context that browsers bring to the table)

  • fully modular (unlike GWT)

  • fully interactive Java+JavaScript development environment

  • completely automated command-line-based production environment

:wink:

All we are doing here is putting full frames in their undecorated ( frame.setUndecorated(true) ) Java state into specified divs on the page. Java has no issue with in that – the frames are self-contained entities that have always been able to be moved anywhere on the page anyway. We are specifying that in the page’s HTML code, not in Java.

The web page designer just has to add a div with an id of the frame’s name appended with “-div”, placing that wherever they want a frame to be. Frames that do not have matching divs pop up as usual. Here, for example:

The alignment frame will appear here momentarily...

In this example, the Jalview desktop frame (using JDesktop) has a size and position that is set on the HTML page, and the alignment frame (a JInternalFrame) is embedded in a div at (100,100).

At least for this part of the operation, there is no problem with multi-instance pages, where more than one Java application is open. We need to check all static variables, though, to make sure that there is no conflict. Note that each instance appears in Java to run in its own thread group, and it is that group that keeps track of which applet is which. (Actually, the thread group is assigned each time an event brings us back into the Java event queue.)

I’m headed to Davidson College, in North Carolina, to work with my collaborator on the Physlets-JS project for a few days, so no Skype for me this Tuesday.

Getting this checked in now; leaving in 4 hours.

Bob

Robert M. Hanson
Professor of Chemistry
St. Olaf College
Northfield, MN
http://www.stolaf.edu/people/hansonr

If nature does not answer first what we want,
it is better to take what answer we get.

– Josiah Willard Gibbs, Lecture XXX, Monday, February 5, 1900

The University of Dundee is a registered Scottish Charity, No: SC015096

···

On 24/03/2019 10:45, Robert Hanson wrote:

_______________________________________________
Jalview-dev mailing list
[Jalview-dev@jalview.org](mailto:Jalview-dev@jalview.org)
[http://www.compbio.dundee.ac.uk/mailman/listinfo/jalview-dev](http://www.compbio.dundee.ac.uk/mailman/listinfo/jalview-dev)

-- 
-------------------------------------------------------------------
Dr JB Procter, Jalview Coordinator, The Barton Group
Division of Computational Biology, School of Life Sciences
University of Dundee, Dundee DD1 5EH, UK.
+44 1382 388734 | [www.jalview.org](http://www.jalview.org) | [www.compbio.dundee.ac.uk](http://www.compbio.dundee.ac.uk)

Not sure how that would work. There are two designers here — web-page and Java. The web-page designer can do anything they want on the page, though modifying the Java-as-JavaScript is probably not recommended. I was thinking of it as a clear division of responsibility:

  • Java designer adds the capability to allow the identification of frames by the web-page designer, either by specifying the syntax of the frame name (as we are doing here) or reading it from Info parameters.

  • Web-page designer can designate any div they want, dynamically or statically. They could also create a listener to window events if they wish, I suppose. That’s just a simple interface. But the catch there is that this is done once, during frame creation, so there is a chicken and egg issue there. However, there is a little-used listener for ALL AWTQueue events that can be tapped by JavaScript. Then you would see every single event that is happening, including frame creating, I think. You can filter those. I have used that listener for debugging, but I haven’t tried filtering. See https://docs.oracle.com/javase/7/docs/api/java/awt/Toolkit.html#addAWTEventListener(java.awt.event.AWTEventListener,%20long)

But in the end, it’s just a single line in JavaScript:

myDiv.appendChild(frameOuterDiv)

So that’s pretty trivial. Easy enough to discover frameOuterDiv using jQuery. The key is that you can do anything you want with the frame’s outer div. But it is best to do it via Java, because then the correctly undecorated frame is created properly, and Java will need to know the width and height, for sure.

Bob

image.png

···

Robert M. Hanson
Professor of Chemistry
St. Olaf College
Northfield, MN
http://www.stolaf.edu/people/hansonr

If nature does not answer first what we want,
it is better to take what answer we get.

– Josiah Willard Gibbs, Lecture XXX, Monday, February 5, 1900

Not sure how that would work. There are two designers here — web-page and Java. The web-page designer can do anything they want on the page, though modifying the Java-as-JavaScript is probably not recommended. I was thinking of it as a clear division of responsibility:

  • Java designer adds the capability to allow the identification of frames by the web-page designer, either by specifying the syntax of the frame name (as we are doing here) or reading it from Info parameters.

But what about frames the java designer has no control of, e.g. alert panels. You then force the Java designer to ‘Unswingify’ their app (which I guess we’ve had to do any how).

  • Web-page designer can designate any div they want, dynamically or statically. They could also create a listener to window events if they wish, I suppose. That’s just a simple interface. But the catch there is that this is done once, during frame creation, so there is a chicken and egg issue there. However, there is a little-used listener for ALL AWTQueue events that can be tapped by JavaScript. Then you would see every single event that is happening, including frame creating, I think. You can filter those. I have used that listener for debugging, but I haven’t tried filtering. See https://docs.oracle.com/javase/7/docs/api/java/awt/Toolkit.html#addAWTEventListener(java.awt.event.AWTEventListener,%20long)

way too low level for a web designer. IMHO. Java2Script needs to provide a friendly JavaScript event hook.

But in the end, it’s just a single line in JavaScript:

myDiv.appendChild(frameOuterDiv)

So that’s pretty trivial. Easy enough to discover frameOuterDiv using jQuery.

agreed.

The key is that you can do anything you want with the frame’s outer div. But it is best to do it via Java, because then the correctly undecorated frame is created properly, and Java will need to know the width and height, for sure.

Returning to ‘separation’ - one has to assume the Java app has already been told to be ‘embedded’. The front-end designer will then want to do their own thing with everything - including refocus and resize divs. This is no different to any other layout manager in Java so providing the resize/relayout events are passed back to java there’s going to be no need to do anything special in Java to allow dynamic relocation of any frame… or have I missed something here ? The bottom line is that having to modify java is a massive barrier to adoption - and a battle that IMHO is not worth fighting. We (as in JalviewJS) can do what we can and respond to requests, of course, but for Java2Script’ed systems in general, a really really simple way for front-end developers to avoid floating windows unexpectedly appearing and ruining the page design would be very useful I expect.

Anyhow - too much tech for Sunday :slight_smile:

Jim.

The University of Dundee is a registered Scottish Charity, No: SC015096

···

On 24/03/2019 12:01, Robert Hanson wrote: