MyArchiBook

Archive for December 2013

How to convert your Grails App into a Mobile-friendly App

with 9 comments

Assuming that you have already created a Grails application and you have it running in your machine ,  but you are struggling to fit your application onto different screens like PC, IPad, Tablet, Mobile etc., where your page css is crashing , then it is hightime to check out on RESPONSIVE WEB DESIGN .

RESPONSIVE DESIGN LAYOUT is the layout that makes our application  respond to any device screensize that we are using, be it an Ipad /MAC/ Tablet/ Phablet/Mobile screen. Any webpage designed with this layout, will appear attractive, and flexible too.

Here I have tried out Twitter  Bootstrap template.

Now to integrate Bootstrap into Grails , it’s enough if we run this command grails install-plugin kickstart-with-bootstrap  in our existing Grails app  and then change the content type as “kickstart” in the header of every gsp page of every domain class.

Now when we run our application the template would be as below ,

CarCompScreen

Ajax-Autocomplete in Grails-Bootstrap :Screenshot_2013-11-15-15-52-52 (2)

For ajax-autocomplete to work in Grails Bootstrap, all that we need to do  is,

  • install ajax dependancy plugin by executing grails install-plugin ajaxdependancyselection command.
  • add  <r:require module=”jquery-ui”/>   <r:require module=”jquery”/> tags in the header of kickstart.gsp . These tags when executed, will install jquery and jquery-ui plugin by itself.
  • Finally, add the necessary autocomplete tag in the respective gsp page .

The output of Ajax autocomplete working in Bootstrap template integrated with Grails screenshot taken in mobile is shown in the rightside.

However well-designed and worthy be our application , it is of no use until we make it user-friendly and attractive to common people. A product with good appearance and easy-to-use,  is known to market on its own. Bootstrap is one of the templates that helps to achieve looks.

The above images that I have shown has the standard Twitter Bootstrap template. However, we can change the  design and also add extra features like Carousel, Accordian, Button types, nav-bar, modals etc., in it to give better looks.

Have a great day 🙂

Written by thangaveluaishwarya

December 3, 2013 at 11:30 PM