JProgress Plugin

  • Tags : /
  • Latest : 0.2
  • Last Updated: 12 May 2011
  • Grails version : 1.3.5 > *
  • Authors : null
0 vote
Dependency : 
compile ":jprogress:0.2"

Documentation

Summary

Installation

grails install-plugin jprogress

Description

This plugin was developed to simplify the use of JQuery, Grails and Progressbars.

Basically we provide 2 Tags to include a simple progress bar into your gsp.

First add the jquery and jquery-UI resources:

<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Sample title</title>
  <g:javascript library="jquery" plugin="jquery"/>
  <jqui:resources/>
  </head>
. . .

Then for a simple embedded progressbar which listens to a button/link click event you need to first define your button or other event source

<g:form>
    <g:submitToRemote action="executeAction"  name="progressButton" value="start...."/>
</g:form>

and than just include the tag with an unique id and the name of the trigger

<g:jprogress progressId="123" trigger="progressButton"/>

this will now include your progress bar into your page.

To update the progress bar you need to get a reference to the included service and set a value for the progress id and the percentage value.

class JProgressTesterController {
    def progressService
    def executeAction = {
        for (int i = 1; i <= 100; i++) {
            //this updates the progress bar value for the progress id 123
            progressService.setProgressBarValue("123", i)
            //let's waste some time
            for (int a = 0; a < 10000; a++) {
                for (int b = 0; b < 1000; b++) {
                }
            }
        }
        render "the progress is done"
    }
}

this was all. Simple isn't it?

if you like to have a modal dialog instead, you just need to use

<g:jprogressDialog  progressId="123" trigger="progressButton"/>

everything else is identical.

If you like to render the progress bar in a specific div, you can define this with the attribute 'progressTarget'. You can also provide a short message with the 'message' parameter.