Computer Tips and Tricks from Biniam

Sunday, November 23, 2014

Bootstrap CSS templating in Grails.

There are three ways of integrating Bootstrap CSS templating to Grails.

1. Using twitter bootstrap plugin grails.org/plugin/twitter-bootstrap
2. Using kick start bootstrap plugin grails.org/plugin/kickstart-with-bootstrap
3. Manually downloading boostrap source files from getbootstrap.com and putting the files in grails-app/assets (for Grails 2.4.3 and above) or in web-app/css and web-app/js folders

There is one good blog post about using bootstrap as a default template by Iraklis at foodforcoding.com/2013/05/25/grails-with-twitter-bootstrap/ (althought the blog entry is old)
Another video by Joe Rinehart explains how to integrate Twitter Bootstrap into a Grails application (can be found at www.infoq.com/presentations/grails-twitter-bootstrap/)

The github project of twitter-boostrap plugin at https://github.com/robfletcher/twitter-bootstrap-scaffolding is also a good help.

You can also look at my simple blogging system developed in grails which uses Bootstrap 3 at https://github.com/biniama/mubs

Importing your git repository from bitbucket (or any other VCS) to GitHub

Go to

1. https://import.github.com/new and enter the url of the old repository
2. give it a repository name (or it will import the name automatically)
3. select public vs private repo
4. Click import

Good luck!

Friday, November 21, 2014

Edit/Update Page Implementation in JQuery and Grails

I have a page with a form where a user enters first name and last name.

When the 'Edit' button is clicked, I want the button's name to change to 'Update' and the textboxes to become editable.

Then, when the user finishes editing the fields, I want to call a controller method in Grails.

What I want is to call the controller method WHEN 'UPDATE' BUTTON IS CLICKED (NOT WHEN 'EDIT' BUTTON IS CLICKED).

Here is the solution!

Using the asset pipeline grails plugin to write Page Specific Javascript

The Grails Asset-Pipeline is a plugin used for managing and processing static assets in Grails applications.

Asset-Pipeline functions include processing and minification of both CSS and JavaScript files. It is also capable of being extended to compile custom static assets, such as CoffeeScript or LESS.

Here is one way of using the asset pipeline grails plugin to write Page Specific Javascript

specific.js // will be included by default

      var pageSpecific = function() {  
           console.log('Hello from specific page!)  
      });  
      $(document).ready(function({  
           if($(document.body).data('page') == 'specific') {  
                pageSpecific())  
           }  
      }));

index.gsp

 <meta name='layout' content='main'/>  
 <body data-page="specific">  
      <h1>Hello from Specific!</h1>  
 </body>

main.gsp // modify so that it passes the data-page attribute to the JS (since index.gsp uses main as a layout)

 <body data-page"${pageProperty(name:'body.data-page')}">  
      // main body content  
 </body>

Wednesday, July 23, 2014

jQuery - Enable and Disable Textbox (Make fields editable) and Update Button Value

Here is an example of making an input field editable by enabling/disabling it. The example also changes the Value of the submit button from 'Edit' to 'Update'.

You can test the code at this JSFiddle.

 <!DOCTYPE html>  
 <head>  
 <title>jQuery enable/disable button</title>  
 <script type='text/javascript' src='http://code.jquery.com/jquery.min.js'></script>  
 <script type='text/javascript'>  
 $(function(){  
    $('#submitBtn').click(function(){  
           $('.enableOnInput').prop('disabled', false);  
           $('#submitBtn').val('Update');  
    });  
 });  
 </script>  
 <style type='text/css'>  
    /* Lets use a Google Web Font :) */  
    @import url(http://fonts.googleapis.com/css?family=Finger+Paint);  
    /* Basic CSS for positioning etc */  
    body {  
      font-family: 'Finger Paint', cursive;  
      background-image: url('bg.jpg');  
    }  
    #frame {  
      width: 700px;  
      margin: auto;  
      margin-top: 125px;  
      border: solid 1px #CCC;  
      /* SOME CSS3 DIV SHADOW */  
      -webkit-box-shadow: 0px 0px 10px #CCC;  
      -moz-box-shadow: 0px 0px 10px #CCC;  
      box-shadow: 0px 0px 10px #CCC;  
      /* CSS3 ROUNDED CORNERS */  
      -moz-border-radius: 5px;  
      -webkit-border-radius: 5px;  
      -khtml-border-radius: 5px;  
      border-radius: 5px;  
      background-color: #FFF;  
    }  
    #searchInput {  
      height: 30px;  
      line-height: 30px;  
      padding: 3px;  
      width: 300px;  
    }  
    #submitBtn {  
      height: 40px;  
      line-height: 40px;  
      width: 120px;  
      text-align: center;  
    }  
    #frame h1 {  
      text-align: center;  
    }  
    #frame div {  
      text-align: center;  
      margin-bottom: 30px;  
    }  
 </style>  
 </head>  
 <body>  
   <div id='frame'>    
           <div class='search'>  
                <h1>jQuery Enable and Disable button</h1>  
                <input type='text' name='searchQuery' id='searchInput' class='enableOnInput' disabled='disabled'/>   
                <input type='submit' name='submit' id='submitBtn' value='Edit'/>  
     </div>  
   </div>  
 </body>  
 </html>

Tuesday, July 22, 2014

Grails: CreateCriteria with Projection

Here is an example of using createCriteria() function in grails using projection of sum.

This method returns the sum of Balance in from Finance model/domain.
You can put this code in Bootstrap.groovy to run it when the program starts.

 println Finance.createCriteria().list() {  
                eq('financeType', FinanceTypeEnum.SAVINGS)  
                projections {  
                     sum('balance')  
                }  
           }

Grails: Displaying image stored in the database on gsp

Here is a Grails implementation of displaying image stored in the database (as byte[]) on gsp.

Notes:

I have spring security core plugin configured
The image tag calls the controller's method directly and it uses the apps url and app.name from Config.groovy and application.properties

 FILE: Domain class - SecUser


 class SecUser extends User {  
      String firstName  
      String middleName  
      String lastName  
     byte [] userPhoto  
      Date dateCreated  
      Date lastUpdated  
      static constraints = {  
       firstName blank: false  
       middleName blank: false  
       lastName blank: false  
       userPhoto nullable: true, maxSize:1024000  
      }  
     String toString() {  
       if(firstName && middleName && lastName){  
         return "${firstName} ${middleName} ${lastName}"  
       } else {  
         return username  
       }  
   }  
 }

 FILE: MyController

 
      class DashboardController {  
           def springSecurityService  
           def index() {  
                render(view: 'index')  
           }  
           def displayAvatarForCurrentUser() {  
                User user = springSecurityService.getCurrentUser()  
                SartUser sartUser = SartUser.findByUsername(user.username)  
                response.outputStream << sartUser.userPhoto // write the photo to the outputstream  
                response.outputStream.flush()  
           }  
      }

 FILE: show.gsp

      <div>  
           <sec:ifLoggedIn>  
                <img src="${grailsApplication.config?.grails?.serverURL}/dashboard/displayAvatarForCurrentUser"/>  
           </sec:ifLoggedIn>  
           %{--If the user has logged in, then the avatar will be shown.--}%  
      </div>


 FILE: Config.groovy


      environments {  
           development {  
                grails.logging.jul.usebridge = true  
                grails.serverURL = "http://localhost:9090/${appName}"  
           }  
           test {  
                grails.serverURL = "http://localhost/${appName}"

           }  
           production {  
                grails.logging.jul.usebridge = false  
                // TODO: grails.serverURL = "http://www.changeme.com/${appName}"

           }  
      }

 
 FILE: application.properties


      app.name=samplegrailsappname