Sample Web-service method in Groovy and how to call it

You might have heard about Webservice.

 Don't just use facebook or twitter or google! 

 Understand how things work in the background. 

 Read this short blog post I wrote to learn how the pages you see and the mobile 

 apps you use communicate with servers.  

A Web service is a method of communication between two electronic devices over a network. It is a software function provided at a network address over the Web with the service always on as in the concept of utility computing. The W3C defines a Web service generally as:-

a software system designed to support interoperable machine-to-machine interaction over a network.

Read what web services are from wikipedia and read the code.

Nowadays, This is how almost all new web and mobile apps work.

 class SampleController {  
     def action(String username, String course, String password){  
         return Grade.findByUsernameAndCourseAndPassword(username, course, password)
     }  
 }  

GET

 www.mu.com/sample/action?username=biniam&course=it&password=123  

POST

 www.mu.com/sample/action  
           {  
                "username":"biniam",  
                "course":"it",  
                "password":"123"  
           }  

Git Commit with Header and Multi-line Body

I found this interesting answer on Stackoverflow to add Git Commit with Header and Multi-line Body and I wanted to share it.

 git commit -m "Header Comes Here" -m "Multiline body Comes Here.   
 Add a title to your commit after -m enclosed in quotes, 
 then add the body of your comment after a second -m.  
 Press ENTER before closing the quotes to add a line break.  
 Repeat as needed.  
 Then close the quotes and hit ENTER twice to apply the commit."  

Thanks Jon Crowell. 

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!

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>

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>