For the case of IUI I used the samples that came with the package as a guide to for all this. My GSP files looks like:
<%@ page contentType="text/html;charset=UTF-8" %>
<html>
<meta name="layout" content="iuiLayout"/>
<head><title>IUI test</title>
<meta name="viewport" content="width=320; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;">
</head>
<body onclick="console.log('Hello', event.target);">
<div class="toolbar">
<h1 id="pageTitle"></h1>
<a id="backButton" class="button" href="#"></a>
<a class="button" href="${createLink(controller: 'iui', action: 'search')}">Search</a>
</div>
<ul id="home" title="Home" selected="true">
<li><a href="${createLink(controller: 'iui', action: 'category1')}">Category 1</a></li>
<li><a href="${createLink(controller: 'iui', action: 'category2')}">Category 2</a></li>
<li><a href="${createLink(controller: 'iui', action: 'stats')}">Stats</a></li>
<li><a href="${createLink(controller: 'iui', action: 'settings')}">Settings</a></li>
<li><a href="${createLink(controller: 'iui', action: 'about')}">About</a></li>
</ul>
</body>
</html>
Here I just linked into my IuiController.groovy file to various methods to demonstrate some of the different features IUI has. The only interesting points in this are that it does demonstrate how to use the render method for cases like this where you need to include attributes and such. One interesting note was that the render method refused to provide a node named "form" in the XML return. I assume this is perhaps related to a keyword issue or some such. However, MarkupBuilder has no issues so where this does NOT work:
// shows a form but doesn't work due to keyword issue with "form'?this method will:
def searchDoesNotWork = {
render(contentType: "text/xhtml") {
"form"(id: "searchForm", class: "dialog", action: "foo") {
fieldset {
h1("Search the records")
a(class: "button leftButton", type: "cancel", "Cancel")
a(class: "button blueButton", type: "submit", "Search")
label("First Name")
input(id: "fname", type: "text", name: "fname")
label("Last Name")
input(id: "lname", type: "text", name: "lname")
}
}
}
}
def search = {
def mywriter = new StringWriter()
def xml = new MarkupBuilder(mywriter)
// had to do this since the render method seemed to not want to return form (key word?)
// this is really how they should dbe done anyway... but I am too lazy to change all the
// examples
xml."form"(id: "searchForm", class: "dialog", action: "${createLink(controller: 'iui', action: 'doSearch')}") {
fieldset {
h1("Search the records")
a(class: "button leftButton", type: "cancel", "Cancel")
a(class: "button blueButton", type: "submit", "Search")
label("First Name")
input(id: "fname", type: "text", name: "fname")
label("Last Name")
input(id: "lname", type: "text", name: "lname")
}
}
render mywriter.toString()
}
In point of fact it's likely better form in most cases to use the MarkupBuilder as you can incorporate it into code logic easier. Though for simple cases there seems to be nothing wrong with render. As with the CIUI example I'll just post up the whole controller file for people to look at (IUI Controller ).
Note, I did modify the iui.js file line:
req.open(method || "GET", href, true);
to
req.open(method || "POST", href, true);
in order to get the search call to work to my controller. For some reason the URL encoding version would not send back the variables. I may contact the IUI people about this and see if I can resolve why this occured.
I was not able to wire up the toggle button to a controller method.. I got the error:
console message: http://localhost:8080/phoneUIGarden/iui#_Settings @35: Can't find variable: settingCallBack
Likely this is something simple (a guess) but I didn't bother to track it down since this was just a "for fun exploration" project.
It's easy to see how this could all be extended into a secured area of a site via Acegi or jsecurity and perhaps even attached to webflow . All fun stuff if I was paid to do that. This is by no means and in depth review, it's just my 4am feeding hacking to see what is involved in using IUI and CIUI. I thought I would share since I haven't seen much on using these in the Grails framework.
It's obvious that
A) it's simple
B) Groovy and Grails are a wonderful language/framework environment to do this in.
C) Someone with more time for this could flesh it all out rather quickly
enjoy...
Doug
