jQueryUI buttonsets have a UX problem

jQueryUI is much less popular these days, but it is still used widely. Other UI frameworks have solved many of the shortcomings with it, but switching over to Bootstrap or some other UI framework isn’t always the best option. One thing I have noticed is the buttonsets which can be used to style checkboxes and radio buttons are problematic.  Especially so if you are using a custom (not glossy) theme! It simply isn’t clear what state the buttons are in sometimes.

See the default widget demos for an example:

Icons can help with this but the jQueryUI icons are another sore spot of the framework, and implementing even those icons on buttonsets to indicate button state can be a bit tricky.

A very little custom css seems to go a long way though!

I tested this on a few different OSes and browsers just in case the unicode icon thing might be a problem but it seemed to work well. Even if that were an issue, using a custom font or other content in the content value should work.

Flattr this!

jquery ‘otherable’ widget

HTML select boxes are limited in their usefulness. Often, for quickly filling in forms I need something like a select, but with an other option that allows me to specify the other value. There are various ways I have seen this solved, but I have one I have worked out that I like quite a bit.

Here is a simplistic demo of a transforming select/text input on jsBin

Other ways you could solve it:

  1. Have a separate value to capture the other value. Bonus if you only show that field after ‘other’ value has been chosen, and hide it and clear it if they re-chose with the select… it can be a bit of a chore to keep it all strait and you have to deal with two distinct parameters on the back end as well.
  2. No select, rather some sort of autocomplete on a text input. Works! And only 1 value to deal with on backend, keeping APIs simple. But, not as friendly for users. Free recall is more work with lower accuracy. Plus you probably want to avoid keyboard use on mobile when possible if you are going for speed.
  3. Complicated custom select widget using JavaScript. These can work, and can look nice, but the code for them is bloated and fragile. HTML select works pretty well on mobile. Attempted JavaScript mimics tend not to.

 

Flattr this!

Spreadsheet exports

Spreadsheets as a data export format are just horrible, but clients seem to consistently request it. ButIDontWannaItJustFeels…ComeON!! don’t you know we have a beautiful REST JSON API?!

Sigh…

Okay so at least there is Apache POI to help out.

I made a couple simple utility methods that take a Map of data and either turns it into a spreadsheet or fills in a spreadsheet that you feed it. Not enough code to make into a github project or plugin, but a Gist? yeah sure – here ya go! Maybe you’ll find it useful.

https://gist.github.com/aeischeid/373f9bf68f179027b3f5

As is, it outputs .xls files and you could use the output to render a spreadsheet file. You can also easily make this .xlsx but it requires including a couple more large POI jars.

 

Flattr this!

Grails datePicker magic

Been working much more on the frontend side of web development lately, but found a nice trick in Grails that seemed good to throw out there.

Maybe this is documented somewhere and I just always missed it. I knew the datePicker tag in gsp’s worked nicely for binding to domainClass objects through dataBinding, but didn’t know it could also be used as a super convenient way to get a date object in a controller. This is in grails 2.3 line BTW.

Example:

My use case was a simple report that needed to be run for a given month.

in the gsp:

	
		
		
	

Sweet. That is a really quick way to generate the HTML I want.

Now, here is the really slick part I didn’t know about. In the controller I can access the params.report object and it will be a Date!

def report() {
	def forwardMonth = params.report.toCalendar()
	forwardMonth.roll(Calendar.MONTH, 1)
	forwardMonth  = forwardMonth.getTime()
	flash.message = "${params.report.toString()} -- ${forwardMonth.toString()}"
	...

Flattr this!

Touch Monitors Are On My Wishlist

I think I want touch screen monitors for my work and home desktops. I might be one of the few who still uses a desktop, but my quirky thoughts on the coming obsolescence of laptops as a form factor can be saved for another time.

The appeal of touch monitors is not to replace my mouse or keyboard, but rather to do the things they aren’t terribly great at. For example when I want to re position my cursor from my browser on one monitor to a specific location in my text editor on another, neither the mouse nor the keyboard are able to do this with the level of efficiency that a touch screen enables. To illustrate what I mean it helps to detail the steps a bit.

With the mouse I first have to find the cursor. This is normally not so difficult and there are even tools to help, but it is a task none-the-less. It gets a little worse if the window currently in focus doesn’t have the mouse within its space. Usually what happens is I wiggle my mouse or finger on the track pad and find the movement with my eye. With dual monitor setups this is yet less trivial.  Step two involves navigating the pointer to the next location. Step three is clicking to place the cursor. Step four is placing my hands back on the keyboard to start typing.

With a keyboard there are so many options for keyboard shortcuts and paths to accomplish the task that whatever steps I chose someone could just say, ‘well my [secret hidden] way is much simpler’ and probably be right, but a typical person like myself in a typical scenario as I often find myself in might use alt+tab to select a new window to focus from the list of open windows, and either press that multiple times until they land on the one they want or use arrow keys. In Ubuntu this method uses icons and I have to remember which icon belongs to the program window I want to focus on (text editor). Add two more little steps if I happen to have two text editor windows open so that I pick the right one. Once I get the right window in focus. I hunt down the blinking cursor with my eye and move the cursor with the arrow keys (or in my case nimble well trained fingers with lots of keyboard keys in combination that are faster than using only arrow keys.) to the desired location.

With a touchscreen I could simply reach up and touch the place on the screen I want the cursor to now be at, put my hand back on the keyboard and start typing.

And there are probably infinite combinations of using all three interaction avenues to accomplish the task depending on if it involves multiple windows of the same application, minimized or hidden windows, scrolling to window content that is out of view, tabs within the application, windows on other virtual desktops, etc.

Anyway long boring bit about HCI, but point of it is that I think touch is here to stay because it is a intuitive and useful way of interacting with computers. It has been overplayed so much that I kinda hate bringing up how effortlessly my kids use a tablet, but seriously, they do, and observing them on it is part of why I am thinking about this. Personally I don’t think touch interaction will replace keyboard, mice, or track pads on platforms where those already dominate. Touch screens will merely compliment them very nicely. And as cool as other interaction methods such as eye tracking, voice recognition, or body gesture readers are conceptually, for the near future at least, I see those as only being practically applicable for niche cases whereas touch seems beneficial in many more scenarios. My take away from all these thoughts is probably nothing all that revelatory or novel. It is simply that it doesn’t matter what sort of device you are designing your application GUI for anymore, you need to consider if, where, and how to make it touch friendly because, even if your particular platform doesn’t have touch capabilities now, I guess the odds that it will in the future are increasing rapidly.

Grails and Spine.js decoupled development setup

Using Grails as the API server for a spine app and Spine.js as a front end framework has been going well. My Spine app has up till now lived in the web-apps directory of my Grails app. After living with this arrangement for a while I started to realize how separating the two even further would have many all-around advantages. Decoupling code makes new projects easier to manage by isolating versioning, testing, deployment/release for example.

In production environments this sort of setup isn’t all that uncommon, you let Apache or something like it serve static image, js or css files and use mod_jk or some proxy setup to pass the rest on to Java app server like Tomcat.

My setup is a little different in that I want to serve html and js and have to make sure all relative links still work for ajax API requests, and locally there is a cross domain issue if you try to simply work from files in the browser and make calls to Grails running on Tomcat

Long story short; to get my decoupled dev setup here is what I did:

  1. Install Apache
  2. Get it running
  3. Set up virtualhost that will proxy appropriate requests to Grails (need mod_proxy_http)
  4. Add alias definitions for Spine apps

Steps one and two are relatively standard stuff. On Ubuntu it is trivially easy. (sudo apt-get install apache2)

Step 3 was new to me. Searching turned up a good starting point on that, but simply proxy isn’t what I really needed. That brings us to step 4. I needed some interceptors (Alias’) for my spine apps, so that relative links still played nice. For example, I wanted ‘http://localhost/grailsApp/spineApp/’ to direct to my Spine app, while links within the spine app like ‘../api/book/5’ were handled by Grails. an old forum post contained the nugget I was looking for.

Basicially this is what I needed inside of my virtualhost block:

ProxyPass /grailsApp/spineApp !
Alias /grailsApp/spineApp /path/to/spineApp/on/fileSystem

ProxyRequests Off
ProxyPreserveHost On

ProxyPass /grailsApp http://127.0.0.1:8080/grailsApp
ProxyPassReverse /grailsAPp http://127.0.0.1:8080/grailsApp

Grails config will have to change to handle redirects and such in grails controllers, that setting is normally in grails-app/conf/Config.groovy

environments {
development {
grails.serverURL = "http://localhost/grailsApp"
...

Flattr this!

Customized Grails Controller for REST

Update: new code https://gist.github.com/4152409

Grails can do RESTfull easily enough, but I wanted a restful API from grails without throwing out grails scaffolding, So I decided to customize Grails’ controller template.

grails install-templates

then in [app-name]/src/templates/scaffolding/Controller.groovy

import org.springframework.dao.DataIntegrityViolationException
import grails.converters.XML
import grails.converters.JSON

class ${className}Controller {

	static allowedMethods = [list:'GET',
		show:'GET',
		edit:['GET', 'POST'],
		save:'POST',
		update:['POST','PUT'],
		delete:['POST','DELETE']
	]

	def index() {
		redirect(action: "list", params: params)
	}

	def list() {
		params.max = Math.min(params.max ? params.int('max') : 50, 200)
		def list = ${className}.list(params)
		def listObject = [${propertyName}List: list, ${propertyName}Total: ${className}.count()]
		withFormat {
			html listObject
			json { render list as JSON }
			xml { render listObject as XML }
		}
	}

	def create() {
		[${propertyName}: new ${className}(params)]
	}

	def save() {
		def ${propertyName} = new ${className}(params)
		if (!${propertyName}.save(flush: true)) {
			withFormat {
				html {render(view: "create", model: [${propertyName}: ${propertyName}])}
				json {
					response.status = 403
					render ${propertyName}.errors as JSON
				}
				xml {
					response.status =403
					render ${propertyName}.errors as XML
				}
			}
			return
		}
		flash.message = message(code: 'default.created.message', args: [message(code: '${domainClass.propertyName}.label', default: '${className}'), ${propertyName}.id])
		withFormat {
			html {
				redirect(action: "show", id: ${propertyName}.id)
			}
			json {
				response.status = 201
				render ${propertyName} as JSON
			}
			xml {
				response.status = 201
				render ${propertyName}.id
			}
		}
	}

	def show() {
		def ${propertyName} = ${className}.get(params.id)
		if (!${propertyName}) {
			withFormat {
				html {
					flash.message = message(code: 'default.not.found.message', args: [message(code: '${domainClass.propertyName}.label', default: '${className}'), params.id])
					redirect(action: "list")
				}
				json { response.sendError(404) }
				xml { response.sendError(404) }
			}
			return
		}
		def object = [${propertyName}: ${propertyName}]
		withFormat {
			html {object}
			json { render object as JSON }
			xml { render object as XML }
		}
	}

	def edit() {
		def ${propertyName} = ${className}.get(params.id)
		if (!${propertyName}) {
			flash.message = message(code: 'default.not.found.message', args: [message(code: '${domainClass.propertyName}.label', default: '${className}'), params.id])
			redirect(action: "list")
			return
		}
		[${propertyName}: ${propertyName}]
	}

	def update() {
		def ${propertyName} = ${className}.get(params.id)
		if (!${propertyName}) {
			withFormat {
				html {
					flash.message = message(code: 'default.not.found.message', args: [message(code: '${domainClass.propertyName}.label', default: '${className}'), params.id])
					redirect(action:"list")
				}
				json { response.sendError(404) }
				xml { response.sendError(404) }
			}
			return
		}

		if (params.version) {
			def version = params.version.toLong()
			if (${propertyName}.version > version) {
				${propertyName}.errors.rejectValue("version", "default.optimistic.locking.failure",
						  [message(code: '${domainClass.propertyName}.label', default: '${className}')] as Object[],
						  "Another user has updated this ${className} while you were editing")
				withFormat {
					html {render(view: "edit", model: [${propertyName}: ${propertyName}])}
					json { response.sendError(409) }
					xml { response.sendError(409) }
				}
				return
			}
		}

		${propertyName}.properties = params

		if (!${propertyName}.save(flush: true)) {
			withFormat {
				html {render(view: "edit", model: [${propertyName}: ${propertyName}])}
				json {
					response.status = 403
					render ${propertyName}.errors as JSON
				}
				xml {
					response.status = 403
					render ${propertyName}.errors as XML
				}
			}
			return
		}
		withFormat {
			html {
				flash.message = message(code: 'default.updated.message', args: [message(code: '${domainClass.propertyName}.label', default: '${className}'), ${propertyName}.id])
				redirect(action: "show", id: ${propertyName}.id)
			}
			json {
				response.status = 204
				render ${propertyName} as JSON
			}
			xml {
				response.status = 204
				render ''
			}
		}
	}

	def delete() {
		def ${propertyName} = ${className}.get(params.id)
		if (!${propertyName}) {
			withFormat {
				html {
					flash.message = message(code: 'default.not.found.message', args: [message(code: '${domainClass.propertyName}.label', default: '${className}'), params.id])
					redirect(action: "list")
				}
				json { response.sendError(404) }
				xml { response.sendError(404) }
			}
			return
		}
		try {
			${propertyName}.delete(flush: true)
			withFormat {
				html {
					flash.message = message(code: 'default.deleted.message', args: [message(code: '${domainClass.propertyName}.label', default: '${className}'), params.id])
					redirect(action: "list")
				}
				json {
					response.status = 204
					render ''
				}
				xml {
					response.status = 204
					render ''
				}
			}
		}
		catch (DataIntegrityViolationException e) {
			withFormat {
				html {
					flash.message = message(code: 'default.not.deleted.message', args: [message(code: '${domainClass.propertyName}.label', default: '${className}'), params.id])
					redirect(action: "show", id: params.id)
				}
				json { response.sendError(500) }
				xml { response.sendError(500) }
			}
		}
	}

}

then modify your UrlMappings.groovy file to look something like this:

class UrlMappings {

	static mappings = {
		"/$controller/$action?/$id?"{
			constraints {
			// apply constraints here
			}
		}
		name api0: "/api/$controller/$id"(parseRequest:true){
			action = [GET: "show", PUT: "update", DELETE: "delete"]
			constraints {
				id(matches:/\d+/)
			}
		}

		name api1: "/api/$controller"(parseRequest:true){
			action = [GET: "list", POST: "save"]
		}
	}
}

I found the JSON Restful plugin a while after I already did most of this, so that is another way to go. Other than it having some issues in grails 2 right now it looks like a really good option, but one thing I like about my approach is that if you want to customize your API in fine detail you can do so. You can always generate individual controllers and modify them of course. Another option is registering custom marshallers. The simple example for customizing your JSON output without changing any controller code would be doing something like this in your Bootstrap.groovy

import grails.converters.JSON
class BootStrap {
  def init = {servletContext ->;
    JSON.registerObjectMarshaller(Person) {
      def returnArray = [:]
      returnArray['name'] = it.name
      returnArray['addrs'] = it.addresses
      return returnArray
    }
    ...
  }

...

Flattr this!

SSH tunneling in Ubuntu

I wanted to work with a PostgreSQL DB remotely with PgAdmin, but I didn’t really want to figure out how to allow the DB to accept external connections in a secure way. Since I have SSH access this should be very doable. I have seen co-workers use putty for SSH tunneling before, and had previously used Putty on Ubuntu to copy that, but setting up my Natty workstation I figured there had to be a more native way to do it. Of course I could do tunneling straight from the command line. If I could ever remember the steps for it that approach would work great. Instead I found a tool called Gnome SSH Tunnel Manager (gSTM) and installed that from the Ubuntu repos. It is pretty straight forward to configure if you understand the concept of tunneling, which I only barely do, so I needed a little help getting set up, but after that it is dead simple.

  1. Install gSTM and start it up.
  2. Click ‘Add’ for a new tunnel bookmark, and name it.
  3. Add IP and user login for remote machine.
  4. Leave port and privatekey as default (unless you know what they are used for in which case you probably know what to put in there).
  5. In the port redirection section click ‘Add’, a new dialog will appear.
  6. Type is ‘local’.
  7. ‘Port’ is the port on your local machine you want to assign the tunnel to (I did 5666).
  8. ‘To host’ can be set to ‘localhost’.
  9. ‘To Port’ is the port used on the remote machine. default PostgreSQL is 5432.
  10. Click ‘OK’ and all the settings are done for gSTM so click ‘OK’ again to close the settings dialog.
  11. Highlight new tunnel, and click ‘Start’ – it should prompt you for the ssh password.
  12. Ta-da!
  13. Now use pgAdmin, or  another application to connect to the DB at localhost:5666 (or whatever port you set in step 7 above..).

Now I just need to make sure my tunnel is running in order to have access to the DB locally. Very cool! Probably where I got most confused was with the ‘To host’ and ‘To port’ settings, the wording seems backwards. Is that just me?

Flattr this!

Jan 2010 Ubuntu Browser Benchmarks

A follow-up of this.

Note: I am just comparing Javascript. This is no longer a good way to benchmark a whole browser, if it ever was… but it is just interesting to me, and gives one metric that is an important one.

Environment is Ubuntu 10.10 64bit on Core2Quad@2.66Ghz

Browser Version Sunspider result
Chromium 10.0.634.0 277.2ms +/- 1.8%
Midori 0.2.9 388.5ms +/- 1.0%
Epiphany 2.30.2 382.0ms +/- 2.4%
Opera 11.00 352.6ms +/- 1.8%
Firefox 3.6.14pre 1883.8ms +/- 2.6%
Swiftfox 3.6.12 1068.2ms +/- 2.3%
Firefox 4b10pre 283.6ms +/- 5.0%

All the browsers have advanced pretty well. Once Firefox 4 finally ships I’d say the playing field is pretty level for javascript performance in browsers on Linux. In real world usage I just don’t know that anyone would be able to distinguish a speed difference between the browsers when it comes to javascript. The next pieces browsers need to keep working on are HTML5 and CSS3 implementations, Hardware acceleration for 2D and 3D rendering, and additional browser features, like extensibility and ‘installable’ web apps.

As a web developer I am excited about where things are going, and how the web as a platform is advancing. Native (meaning native to the OS/Desktop environment) applications aren’t gone yet, and probably won’t be for a long time yet, but they are needing a better and better excuse to not move into the browser. What would be the benefit of that you ask? The same that Java Swing, Adobe AIR and others have tried to achieve. OS independence. You write it for Firefox according to defined standards and it should work on all browsers that implement the same standards on all the OS’s. That is a big deal! I think a couple prime candidates for proof of concept browser apps would be all the little games normally included in Ubuntu. Mines, Solitaire, Tetris clones etc. and maybe the social networking client like Gwibber. If only I had more time to play…

Update: I played some with Tetris in a browser idea

Flattr this!

Ubuntu Lucid = mega cool, but…

I am really enjoying the latest Ubuntu. They added lots of polish, and the OS is consistently moving steps ahead as far as ease of use for geeks and non-geeks alike. My thoughts center around, “but does it even matter?”. Sure, Ubuntu is free on a couple levels that OS X and Windows aren’t, but most non-developers don’t feel the shackles, so they don’t care.

Like an invisible tax the cost of the OS is bundled with the hardware for the vast majority. Again, for non-developers, the licence restrictions are slightly annoying at worst, also they are accustomed to paying for software, so they think “who cares?”. It would take something more significant than a very usable and free alternative OS that they would have to take the effort to install and get accustomed to make them care. I won’t be wasting a lot of breath trying to convince these sorts of users to make the switch. My lengthy discourses on open source ideology would merely prove to be confusing or annoying. That is not a guess, it’s happened.

Developers, however, have much less of an excuse for not caring. They should be feeling, or at least be aware of, the shackles of the closed environments and ecosystems. Those with a choice, often choose to ignore or to justify. I have noticed they justify their use of OSX or Windows for what tend to be short sighted reasons. If such short sighted excuses were ever really valid, is another debate, but either way, those justifications are getting weaker and weaker. Ubuntu, from a developers perspective, has potentially crossed over from being a viable alternative to being a superior one. 10.04 = a better chance of them actually being convinced, like me, that Ububtu is mega cool!

Flattr this!