This discussion is archived
13 Replies Latest reply: Nov 21, 2013 7:32 AM by user638545 RSS

Enkitec Navbar vertical list appears momentarily

Nick Walsh Newbie
Currently Being Moderated

Apex 4.2.0.00.27

Firefox 22.0, IE 8

 

Just started using the Enkitec Navbar, and we have noticed that when a page is rendered a vertical list always appears momentarily before being replaced with the Navbar list. It happens on all applications we have installed it on, and every time a page is refreshed.

 

I uploaded demo to apex.oracle.com to demonstrate it but it happens so rarely on there that it's not worth looking at. I am guessing it is something to do with our setup (network speed, caching?).

 

If anyone else has experienced this and overcome it, I'd be grateful for some suggestions as to where we could start looking.

 

Many thanks,

 

Nick.

  • 1. Re: Enkitec Navbar vertical list appears momentarily
    jrimblas Expert
    Currently Being Moderated

    Your suspicion about speed and network performance are correct. What you're seeing is the list of elements before the CSS is applied to them.

    Would it be an option for you to move your plugin assets to the file system (the webserver)?

    What you do is download all the assets that the plugin uses (CSS, js, png, ...).  Place them in your webserver.  Don't place them in the /i/ directory, use a custom one like /c/navbar/ (but use whatever you like)

    Then go to the plugin and change the "File Prefix" from #PLUGIN_PREFIX# to "/c/navbar/" so that the plugin uses the files form the file system.

    This helps because then the plugin doesn't need to fetch those resources from the database every time it renders.

     

    Thanks

    -Jorge

  • 2. Re: Enkitec Navbar vertical list appears momentarily
    Nick Walsh Newbie
    Currently Being Moderated

    Thanks Jorge. It works perfectly now.

  • 3. Re: Enkitec Navbar vertical list appears momentarily
    jrimblas Expert
    Currently Being Moderated

    That's great Nick!

     

    FYI, in some cases I've taken this a step further and compiled the Plugin PL/SQL Code in the database so that the code is not compiled every time it's used.

    For example, you create a package enavbar with the enkitec_navbar_render function in it.

    Then where the plugin says "Render Function name" I would change it from enkitec_navbar_render to enavbar.enkitec_navbar_render. This way the plugin will use the pre-compiled package code which could also bring some more speed enhancements.

     

    Thanks

    -Jorge

  • 4. Re: Enkitec Navbar vertical list appears momentarily
    Nick Walsh Newbie
    Currently Being Moderated

    Excellent. I'll try that tomorrow.. Thanks again for the quick reply.

  • 5. Re: Enkitec Navbar vertical list appears momentarily
    dmcghan Oracle ACE
    Currently Being Moderated

    Just to add a note here. In general, CSS should be added to the head section of an HTML document and JavaScript should be added to the end of of the body. When CSS is in the header, the browser should wait will it has downloaded and parsed the CSS before rendering and showing the page.

     

    Oddly enough, the substitution string for CSS generated by plug-ins (#GENERATED_CSS#) is in the footer section of page templates in APEX. I'm not sure why it was put there but it's the cause of the problem.

     

    Regards,

    Dan

  • 6. Re: Enkitec Navbar vertical list appears momentarily
    Patrick Wolf Employee ACE
    Currently Being Moderated

    Hi Dan,

     

    the reason why the #GENERATED_CSS# placeholder has to be in the footer is because it will contain CSS markup generated by components of the page. At the time when the HTML header is rendered, that CSS markup is not yet available, because the processes, regions, plug-ins of the page have not yet been executed which tell APEX which additional files to load.

     

    I know from a CSS performance perspective this is not optimal, but currently that's the only way plug-ins can include there own CSS/JS without modifying any page template.

     

    If a developer wants to optimize the rendering, he can add the plug-in CSS file into his page template (property "Cascading Style Sheet - File URLs") or at page level (property "CSS - File URLs") to always load it at the beginning of the page. If the plug-in tries to loads the same CSS file (note, it has to be the same URL) it will not be included a second time.

     

    Regards

    Patrick


    Member of the APEX development team

    My Blog: http://www.inside-oracle-apex.com

    APEX Plug-Ins: http://apex.oracle.com/plugins

    Twitter: http://www.twitter.com/patrickwolf

     

    Message was edited by: PatrickWolf

  • 7. Re: Enkitec Navbar vertical list appears momentarily
    Nick Walsh Newbie
    Currently Being Moderated

    Quick bonus question if I may,

     

    Could this also be the reason why the buttons on the Modal LOV plugin take a while to render (for us)? If so, is there a way of downloading all the files associated with that plugin in one step rather than having to do them one at a time, so I can place these on the webserver too?

     

    Thanks,

     

    Nick.

  • 8. Re: Enkitec Navbar vertical list appears momentarily
    Nick Walsh Newbie
    Currently Being Moderated

    I'll answer my own question, in case anyone else has the same issue.

     

    Yes you can change the Modal LOV as well, with a small amount of extra work. The following css files also refer to #PLUGIN_PREFIX#, and must be amended before being copied to the web server.

     

    blitzer.css

    redmond.css

    smoothness.css

    ui-darkness.css

    ui-lightness.css

     

    If you place all the files in the same place on the webserver, you can replace references in the css files to #PLUGIN_PREFIX# with ./ (dot forward slash) which will tell it to look in the same directory.

     

    If I've made any blunders feel free to point them out, but it seems to be working for us, and the modal lov items now render without any delay.

     

    Nick.

  • 9. Re: Enkitec Navbar vertical list appears momentarily
    PPlatt Explorer
    Currently Being Moderated

    I don't understand how /c/navbar/ maps to a directory on the file system. Please explain.  What is the full path wrt the webserver root directory. I need both a Linux and Windows solution.

    regards

    PaulP

  • 10. Re: Enkitec Navbar vertical list appears momentarily
    jrimblas Expert
    Currently Being Moderated

    Hi Paul,

    Basically your webserver can be mapped to "serve" files in your filesystem.  The /i/ path is not really /i/ or C:\i in your webserver, is most likely something pretty long (like for example: (/app/oracle/product/HTTP10gR2/apex/images )

    So, what /c/ can be is /app/oracle/product/HTTP10gR2/apex/custom

    and /c/navbar would be /app/oracle/product/HTTP10gR2/apex/custom/navbar

     

    So it doesn't matter if it's windows or linux, because the webserver would still map /c/ to whatever local filesystem destination you decide.

     

    As to how to do this exactly... the syntax depends on if you're using Apache, IIS, APEX Listener, etc...

    If you have followup questions about this mapping it's best to start a new thread or see the APEX Installation Guide

     

    Hope this helps.

    Thanks

    -Jorge

  • 11. Re: Enkitec Navbar vertical list appears momentarily
    dmcghan Oracle ACE
    Currently Being Moderated

    Hi Nick,

     

    The only "blunder" I see is that you did a bit more work than needed. I include a "server" directory (actually many plug-in developers do) that allows you to move the files without making any changes. Just upload and change the File Prefix in the plug-in to point to the correct location on the web server.

     

    Regards,

    Dan

  • 12. Re: Enkitec Navbar vertical list appears momentarily
    dmcghan Oracle ACE
    Currently Being Moderated

    Hi PaulP,

     

    You can take Jorge at his word or you can believe me when I tell you it's magic - pure and simple magic. Perhaps even the black kind... Who knows what kinds of sorcerers are making these "web severs"! More like black magic servers!!!

     

    Regards,

    Dan

  • 13. Re: Enkitec Navbar vertical list appears momentarily
    user638545 Newbie
    Currently Being Moderated

    Hi All,

    I too experienced the latency issue and i coped the files to ../apex/pluigins/nav directory in my linux where apex is installed. The i modified the #PLUGIN_PREFIX# with the /pluigins/nav.

    When i run the app, i get an "Authentication Required" popup appears.

    Any idea why could be wrong with my setting?

     

    Thanks

    Vignesh

Legend

  • Correct Answers - 10 points
  • Helpful Answers - 5 points