DSP Generated page modification after full load

Author: richard.gill@agfa.com (richard.gill)

Hi

In our current work of making use of new Uniface RIA possibilities, we're faced to some technical needs. Even if we have solutions, some techniques seem difficult to implement without control on the client side (the browser), with the help of javascript. Now the details :-) :

For various reasons, we want to make direct ajax calls (in fact ajah/ajaj, with HTML or Json replacing xml). Not a difficult task in itself, but the problem is to assign elements with their ID : the page is loaded, any document.ready/onload and so on are called, and then dojo makes its voodoo to alter the page and map Uniface stuff. In the same vein, if I load through Ajax an url targeting a DSP, the map is not done, because I removed full page tags from the hts. So what I need is simple :

How to enable function calls after dojo made its page adjustments (so we can be sure we work on the final content), and how to manually force a mapping to occur when loading a DSP, knowing the content will be put in the current page (in a div), which already contains all dojo/uniface scripts ?

Thanks for interest,
Richard

 

17 Comments

  1. Hi Richard,

     

    Before I try to come up with an answer, just checking this: is what you're trying to achieve is to embed a dsp into some other (non-dsp) page, where the other page has already finished loading, e.g. the various onload events have already been fired ?

     

    Cheers, Thomas


    Author: tstlwk (thomas@t-en-c.nl)
  2. Hi Thomas

    I found a way to better explain what I want, describing what appends on the browser side and what I would want.

    |- whole DSP page load
    |    * the browser loads the not mapped DSP and all referenced medias (css, js, images, etc..)
    |- page load finished
    |    * javascipt's ready document events fire
    |    * Uniface/dojo start their voodoo work : load other medias and map widgets
    |- finished mapping
    |    * the busy indicator is hidden and page is fully available
    |
    |- click on a link which calls javascript to load another page via ajax
    |    * page loaded, embedded in a div from the container page,
    |      so the embeded page should not contain html/head/body tags
    |      if this page is a DSP, dojo onload events are not fired
    

    From the final line above, I would want :

    • To enable dojo onload events to be fired for the embedded page
    • To be enable to call arbitrary javascript when dojo has finished its job

    Best regards,
    Richard

     


    Author: richard.gill (richard.gill@agfa.com)
  3. Hi there both of you ;D

     

    Richard, I did a example on how to solve this with GHANIFIED! after your comment. Maybe this will work for you!

     

    Cheers,

    -GHAN-


    Author: -GHAN- (hansen@ahp-gmbh.de)
  4. Hi Ghan

    Sorry, I forgot to check the anwsers monitoring :)

    Cool for the js library sample, I'll try that, hoping I'll don't have to include both your helper library and jQuery, used for other simple tasks.

    Thanks again for reply.

    Best regards,
    Richard


    Author: richard.gill (richard.gill@agfa.com)
  5. The Ghanified library (cool name) could be a lighter solution than jQuery, but the problem is more complicated, and making use of your library whouldn't solve the problem (but I'll give it a try).

    Indeed, my problem is to attach javascript code to Uniface generated fields. I found several solutions.

    For example, I can find the DOM object of a field with a dojo modified id quiet easyily, and can generate RawHTML links to call my function which will do things with the field (this works well).

    But what if I want to make, for example, an auto-completion for an input field ? I've no way to attach a listener on the input, as Uniface does not permit that, and I'm stuck with this 'after dojo made its job' problem.

    Why not using a dropdown list I ear ? :-) Well, It's not possible because it would be too long, ajax powered completion is the solution (otherwise, we'll have to use some sort of lightbox to make a search and select dialog, and we want to avoid as much as possible lightboxes or any intrusive elements).

    Best regards,
    Richard


    Author: richard.gill (richard.gill@agfa.com)
  6. Ok I made it working to answer to my second need : To be enable to call arbitrary javascript when dojo has finished its job. I were too much intrigued by this, so I checked the code :)

    To do things (altering uniface mapped widgets) after dojo/uniface finished their job, one must use UNIFACE.addOnLoadListener() to add a callback fired when Uniface ended its stage (all mappings are done). I'm not sure this's the last thing done, because Uniface insert scripts after that with UNIFACE.initialCommand() lines, but it works !

    I made a little test set with one DSP to illustrate the behavior : the DSP contains only one field (FIELD.DUMMY.D), and in the hts, I've the following code for the input field and the javascript part :

    <div>
      <input id="ufld:FIELD.DUMMY.D" value="Editbox" type="text" />
      <script language="javascript" type="text/javascript">
        UNIFACE.addOnLoadListener(function() {
          // set an initial value for the field
          dojo.byId('ufld:FIELD.DUMMY.D.TSAJAXCALL.1').value = 'Yahoo!';
          });
      </script>
    </div>
    

    So now it's not difficult to add an event listener for the field. (Ghan, if you want me to write a little contribution on udev.info about that trick, tell me).

    I still have the first problem : to force dojo/uniface to do their stuff on a page load which does not contain needed parts. The goal is to embed a DSP in a div from an ajax call :

    var dsp = myAjaxHandler.load('url');
    /* Here the dsp contains the original HTS code, not mapped.
     * What to call to force this mapping so I can put the whole thing in a div?
     */
    

    Author: richard.gill (richard.gill@agfa.com)
  7. Your hints, tricks and tweaks are very welcome, Richard. The Editor is enabled for you ;)


    Author: -GHAN- (hansen@ahp-gmbh.de)
  8. Hi Richard,

    perhaps you can publish your findings and demo-set in this forum here as well.

    So all members here have direct access to your work.

    Success, Uli


    Author: ulrich-merkel (ulrichmerkel@web.de)
  9. Hi Richard,

    I have no complete picture of your problem. But I feel that it looks that embeded DSP maybe is helpful to your situation.

    I have a suggestion here.

    1. Keep your main page as the top DSP. Let's call it "MainDSP";
    2. Add a DSPContainer in MainDSP;
    3. Create a child DSP for playing the role of your ajax request. Let's call it "DataDSP";
    4. Binding this DataDSP to the above DSPContainer;
    5. Put a RAWHTML field In the DataDSP (make it hidden, if nessasory), and in the EXEC trigger, do your business logic, i.e. put your HTS code into the RAWHTML field.
    6. Add some custumized javascript code in DataDSP to handle the HTS code, after page loaded
      (As you mentioned, you can use UNIFACE.addOnLoadListener(), or using another grandchild DSP).

    Remark:

    • Because an embeded DSP will always be rended after the parent DSP rending, you can use this feature to execute some business logic after the parent DSP is loaded (after dojo widget rended).
    • You can use RAWHTML field to carry any kind of data with the customized format.
    • Generally, by combining the embeded DSP and RAWHTML field, you can achieve a customized Ajax request at the timing you want.

    I hope this is helpful to you.

    Regards,

    Ming

     


    Author: Ming Zhu (ming.zhu@uniface.com)
  10. hi Thomas,

    I still were a bit complicated in my previous post, so : yes, that's what I'm trying to achieve :)

    Best regards,
    Richard


    Author: richard.gill (richard.gill@agfa.com)
  11. well ... you could easily attach a listener ... have a look at

    http://www.udev.info/uniface/triggering-pressed-keys-on-elements/

    ... where we manually attach a listener to an input field of a DSP/USP or plain HTML page. Did that one for Peter ;) Could this help you out?

     

    -GHAN-

     


    Author: -GHAN- (hansen@ahp-gmbh.de)
  12. No this won't work with a DSP, because I can't easily add an event listener on the field.

    When the javascript execute, the field doesn't exist yet, the page contains (real example)

    <input type="text id="ufld:CHAMP1.D.DUMMY" value="EditBox"/>

    Only when dojo made its mapping, which occurs after the page load, I get:


    <span>
    <div wairole="presentation" dojoattachevent="onmouseenter:_onMouse,onmouseleave:_onMouse,onmousedown:_onMouse" id="widget_ufld:CHAMP1.D.DUMMY.SRGI.1" class="dijit dijitReset dijitInlineTable dijitLeft dijitTextBox" role="presentation" widgetid="ufld:CHAMP1.D.DUMMY.SRGI.1" style="">
    <div style="overflow-x: hidden; overflow-y: visible;">
    <div class="dijitReset dijitValidationIcon"><br></div>
    <div class="dijitReset dijitValidationIconText">Χ</div>
    <div class="dijitReset dijitInputField">
    <input type="text" name="" autocomplete="off" dojoattachevent="onfocus:_update,onkeyup:_onkeyup,onblur:_onMouse,onkeypress:_onKeyPress" dojoattachpoint="textbox,focusNode" class="dijitReset" id="ufld:CHAMP1.D.DUMMY.SRGI.1" tabindex="0" value="" aria-invalid="false" style="">
    </div>
    </div>
    </div>
    </span>

    You see the input field is still here, but its id changed to  "ufld:CHAMP1.D.DUMMY.SRGI.1" (DSP instance name and its sequence number in the page if several DSP with the same name embedded), so the listener won't be called for the field.

    I realized the only way to get this to work is to add the listener with dojo help, when it has finished its mapping, but I don't know how to do that.

    Best regards,
    Richard


    Author: richard.gill (richard.gill@agfa.com)
  13. hmmm ... i see ... what about this then:

    http://docs.dojocampus.org/dojo/addOnLoad

    followed by :

    http://docs.dojocampus.org/quickstart/events

     

     further notes are in your MAIL :)


    Author: -GHAN- (hansen@ahp-gmbh.de)
  14. That's a good start, but still not work, because dojo.addOnLoad() callbacks are executed after all 'require' are satisfied, so after the page load, but before mapping is done (the field does not exist yet).

    I'm considering taking contact with Compuware to have guidelines on what to do, because only them know what's done (except if I browse the uniface javascript code, but I don't have time for that).

    Thanks for help
    Richard


    Author: richard.gill (richard.gill@agfa.com)
  15. Hi Richard,

    Just to avoid ambigouus field names.
    the .1 at the end of the binding expresses the OCCURENCE of the entity in the DSP.

    So you can calculate from your DSP information the complete ID of the DIV.

    Success, Uli

     

     


    Author: ulrich-merkel (ulrichmerkel@web.de)
  16. Hi Uli

    I don't know how I could miss that :)

    Best regards,
    Richard


    Author: richard.gill (richard.gill@agfa.com)
  17. Hi Richard,

    don't mind, that's why the community is more powerful:

    while one is trying to find a bug for hours, another walks by and see the causing line immediately:
    my favourite one are wrong parameter sequences in PUTlist... and GETlist.... like: getitem/id p_target,p_key,p_list

    One more reason why we should have more communication like this one here.

    Success, Uli


    Author: ulrich-merkel (ulrichmerkel@web.de)