Ajax and Grails and YUI

currently I'm trying to work more with ajax and grails.

So the first serious project is our quality control webfrontend which needs fancy stuff like

• progress bars
• multiple layers, cause they are hip...

and so.

So far one issue was to display a webpage in a layer on top of another webpage and the current soultion is:

controller:


class CompoundController {


/**
* shows the binbase compound
*/
def show_ajax = {
log.info("calling url...")
def id = params.id
def database = params.database

def server = System.getProperty("application.server")
def link = "http://${server}:8080/binbase-compound/bin/show/${id}?db=${database}"
//build our url
log.info("generated url: ${link}");
URL url = new URL(link)
InputStream stream = url.openStream()
Scanner scanner = new Scanner(stream)

//store the output, since this url can take a while to load, if it's not in the server cache
StringBuffer buffer = new StringBuffer()
while(scanner.hasNextLine()){
buffer.append(scanner.nextLine())
}

log.info("render result");

render "<iframe src="$%7Blink%7D" width="\"100%\"" height="\"100%\""></iframe>"
}
}

view:



<g:remotelink onloading="load();" oncomplete="done();" onsuccess="showFiles();" update="window_content" controller="compound" method="show_ajax" params="[database:database,id:id]">199651</g:remoteLink>



our div where we display the result


<div id="window">
<div class="hd"><div class="tl"></div><span></span><div class="tr"></div></div>
<div class="bd"><div id="window_content"></div></div>
</div>



and the related java script, yes I said it I'm using some javascript. Mostly the YUI library.



YAHOO.namespace("example.container");

function load() {

if (!YAHOO.example.container.wait) {

// Initialize the temporary Panel to display while waiting for external content to load

YAHOO.example.container.wait =
new YAHOO.widget.Panel("progress",
{
fixedcenter: true,
close: false,
draggable: false,
zindex:4,
modal: true,
visible: false
}
);

YAHOO.example.container.wait.setHeader("

please wait, this process can take up to 5 minutes

");
YAHOO.example.container.wait.render(document.body);

}


YAHOO.example.container.wait.show();
}

function done() {
YAHOO.example.container.wait.hide();

}

function showFiles() {

if (!YAHOO.example.container.files) {

// Initialize the temporary Panel to display while waiting for external content to load

YAHOO.example.container.files =
new YAHOO.widget.Panel("window",
{
fixedcenter: true,
close: true,
draggable: false,
zindex:5,
modal: false,
visible: false
}
);

//YAHOO.example.container.files.setHeader("Files for day...");
//YAHOO.example.container.files.setBody("<div id=\"showFiles\"></div>

");
YAHOO.example.container.files.render(document.body);

}


YAHOO.example.container.files.show();
}



and than there is some css,


#window.yui-panel .bd {
overflow: hidden;
padding: 0px;
border: 1px solid #aeaeae;
background-color: #FFF;
width:1024px;
height:600px;
}

#window.yui-panel .ft {
font-size: 75%;
color: #666;
padding: 0px;
overflow: hidden;
border: 1px solid #aeaeae;
border-top: none;
background-color: #dfdfdf;
}

#window.yui-panel .hd span {
vertical-align: middle;
line-height: 22px;
font-weight: bold;
}

#window.yui-panel .hd .tl {
width: 7px;
height: 22px;
top: 0;
left: 0px;
position: absolute;
}

#window.yui-panel .hd .tr {
width: 7px;
height: 22px;
top: 0;
right: 0px;
position: absolute;
}
#progress.yui-panel .bd {
overflow: hidden;
padding: 0px;
margin: 5px;
background-color: #FFF;
}

#progress.yui-panel .ft {
font-size: 75%;
color: #666;
padding: 0px;
overflow: hidden;

border: 1px solid #aeaeae;
border-top: none;
background-color: #dfdfdf;
}

/* Provide skin for custom elements */
#progress.yui-panel .hd span {
vertical-align: middle;
line-height: 22px;
font-weight: bold;
padding-left: 60px;
padding-right: 60px;
padding-top: 30px;
padding-bottom: 30px;
border: 1px solid #aeaeae;
background-color: #dfdfdf;
width: 120px;
height: 60px;
}

#progress.yui-panel .hd .tl {
width: 7px;
height: 22px;
top: 0;
left: 0px;
position: absolute;
}

#progress.yui-panel .hd .tr {
width: 7px;
height: 22px;
top: 0;
right: 0px;
position: absolute;



I'm still not a fan of css/js, but sometimes you gotta use what's available.