Overview

As part of my Prototype-UI testing I wanted to add a ‘refresh’ button to my URLWindows. This briefly explains how I went about it, and the results.

Assumptions

I’m using Rails on a Windows box for testing, and I’m using the ‘bluelighting’ window style.

Adding the button graphic

• Open ‘buttons-blue.gif’
• Add 40 px to the bottom of the image’s canvas
• Copy the non hover and hover versions of your refresh icon into the bottom 40 px of space
• Save your modified ‘buttons-blue.gif’ file

Modifying the css

• Open ‘lighting.css’
• Around line 114 (just below the minimize style) add the following:

/*CHANGE FOR REFRESH*/
.bluelighting .buttons a.refresh {
  float:left;
    background:transparent url(/themes/window/lighting/buttons-blue_rev1.gif) no-repeat 0 -120px;
    height:20px;
    width:21px;
}

.bluelighting .buttons a.refresh:hover {
    background:transparent url(/themes/window/lighting/buttons-blue_rev1.gif) no-repeat 0 -140px;
}  
/*END CHANGE FOR REFRESH*/

Note: Please note the -120px and -140px offset. This utilizes the 40 px of space you added to the ‘buttons-blue.gif’ above. Also note I renamed my gif to ‘buttons-blue_rev1.gif’.

Adding the button to the URLWindow

• Create a window object
• Include the method call ‘addButton(‘refresh’, ‘refreshWindow’)’ into the create window command chain
• Example:
  

  
  myWin = new UI.URLWindow( { id: 'myWin', url: 'http://www.google.com' } ).setHeader('myWin Example').addButton('refresh').show();
  

• Extend the UI.URLWindow class to include the following method:

    refreshWindow: function() {
        this.setUrl(this.iframe.src);
    }

• Save everything, load up a URLWindow, and hit your spiffy new refresh button. :)

Gotchas

• From the class source code there does seem to be a way to order the buttons using the ‘padding-top’ value as the order index and calling the function ‘updateButtonsOrder’. However, at this time, I can’t seem to get it to work….
• If you create a smaller window (:width => 200, :height => 200), set a long title, and add a custom button your title will ‘spill over’ into the first button’s space on the title bar….

Thanks!
Nathan

Refresh and Back Buttons using Prototype-UI URLWindow

Prototype-UI uses iframes for the URLWindow class. When making custom refresh or back buttons, it is important to remember that you are restricted to working with pages that come from within your local site. If you try to access the URL location of a iframe pointing to something outside your site, you get an access denied error in many cases. Most browsers impliment this on purpose to prevent cross site scripting attacks.

Below are the custom extensions to the URLWindow class I used to test with:

// Custom Extensions to Prototype-UI
UI.URLWindow.addMethods({
    refreshWindow: function() {
        this.setUrl(this.iframe.contentWindow.location.href);
    },

    goBack: function() {
        var frameName = this.element.id + "_frame";
        frames[frameName].history.back();
    }
});

I then tested this code against an iframe pointing to a url contained within my local site. The results of testing is as follows:

Safari: iframe back -> Broken
Firefox: iframe back -> Works
Opera: iframe back -> Works
IE7: iframe back -> Works

Safari: iframe refresh current url location -> Works
Firefox: iframe refresh current url location -> Works
Opera: iframe refresh current url location -> Works
IE7: iframe refresh current url location -> Works

and what about refresh button to UI.Window which content is set by setAjaxContent?
i tried to add adress to refresh to in definition of button

    .addButton('refresh', refreshWindow(...))

but i receive error message:

this.setAjaxContent is not a function
refreshWindow()~sbak (line 219)
app_windows()~sbak (line 57)
wrapper(load )prototype.js (line 3877)
[Break on this error] this.setAjaxContent('sites/header.html'); 

is there sth like this.iframe.contentWindow.location.href stored for AjaxContent?

//i’ve done it in a little different way- when i load from database adress of website to use in setAjaxContent, i save it to the array and re-use in refreshWindow. – it’s rather ‘back’ then ‘refresh’ now.