Custom Widget empty at runtime

[HGRobert]

we already created a few widgets based on existing ones and all are working fine...

Now I had to create a widget from scratch since it doesn't look like any of the other widgets. To start, I more or less copied the example googlemap.js and modified to fit the needs. In the designer everything is working fine, even the Preview is exactly what I expected. But during runtime, there's only an empty <div>, no ID, no content...

After a whole day of searching, I decided to copy the googmap.js again, do all modifications step by step and check each step in runtime mode.
No luck, design was fine, runtime kept showing the empty <div>.
Then I tried the googlemaps Widget itself... Exactly the same result, during runtime there's an empty <div> without id...

I guess that this is just configuration. Somebody eperienced the same problems? Help would be appreciated...

[HGRobert]

solved (I believe)... After clearing the cache, everything seems to be working fine.

[HGRobert]

Now really solved:

With some help from Alex and Brian during the german user conference we found the solution:

My application was running within Genie... All javascript regarding the new widget must be loaded in the start.html in Genie.

Strange anyway, if you don't load the scripts in start.html, they are loaded when you start (better: after you load) the application that's using the widget and the second time the application is started it will have the javascripts loaded and run properly even when the scripts are not in start.html

[Scott Klement]

Normally, any JavaScript code (including custom widgets) that aren't loaded via Genie's start.html, or some other method (like external javascript property) are never loaded, so those widgets would never work. So yes, that is strange.

I have never heard of the JS code for a widget loading automatically after you display the page. Are you certain that you aren't loading it by calling a routine like pui.loadJS? or that you have code to load it in your screen?

[HGRobert]

Hi Scott,

I just tested again... This time with the Google Maps Widget, no modifications in Start.html, just added the javascript as external javascript in the record format...

First call results in an empty screen, second call comes up with the widget...

Not really an issue, ( though it almost drove me crazy ;-) )

Regards,

Robert

[Scott Klement]

Hmmm... The "external javascript" should load before the screen is displayed. There were some bugs in this in an old version of Profound UI. Is it possible that you are using an older version?

[HGRobert]

I'm using 5.8 and, when I inspect the document, the javascript is already loaded the first time.
Please find differences in the attached files...

[Scott Klement]

Sorry, I don't understand what these HTML documents are (copies of start.html?), or what they are meant to show me.

[HGRobert]

Sorry,

I tried to show that there's a difference in the generated html. It seems that the javascript is loaded between rendering the widget and sending out the html...

HTMLPage1 is the code when the program is executed the first time, the googlemaps.js which was loaded as external script in the recordfromat, has been add to the html output. The <div> for the widget is empty, no id, no content...

HTMLPage2 is the code when the program is executed the second time, now the <div> has an id and also content...

For me it looks like generating the content of widget needs the googlemaps.js to be loaded, though it is added afterward...

[Scott Klement]

Hmmm... Profound UI doesn't really output HTML tags, so this doesn't mean very much to me.

If you're interested in how it works:

Profound UI is a JavaScript framework, it doesn't exactly output HTML, but rather the JavaScript accesses the browser's Document Object Model (DOM) to modify the page. This type of process is sometimes referred to as "DHTML" (dynamic HTML), but Profound UI does not actually output HTML tags per-se. And most of what is happening inside the framework is not visible by looking at only the generated HTML.

The process works like this (simplified for clarity):

1) When the session is started the start.html is sent. (This is only done once when the session starts)

2) start.html loads genie.js (or runtime.js if not using Genie) and profoundui.css

3) genie.js communicates with the IBM i, gets information about the screen (as a JSON document) and modifes the start.html file.

4) User gets control, does their work... when the user hits function key, enter, clicks a button to submit the screen, etc, it sends the modified variables back to the IBM i. In response to these variables, the IBM i runs your program, until a new screen is available.

5) Steps 3-4 are repeated until the IBM i or browser asks to end the session.

So, it never outputs HTML (aside from downloding the start.html at the beginning) it just accesses the DOM to modify the screen repeatedly until the session ends. This type of application is often called "single-page application" (or SPA) and is one of the most important aspects the Web 2.0 paradigm.

I've gone off on a tangent... I will start a new message.