MyArchiBook

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 🙂

Advertisements

Written by thangaveluaishwarya

December 3, 2013 at 11:30 PM

9 Responses

Subscribe to comments with RSS.

  1. again something new.
    you keep surprising me

    Janssen MaesdeVesas

    December 3, 2013 at 11:39 PM

  2. perfect way to move to mobile device without changing code
    good job

    Steve

    December 4, 2013 at 11:33 AM

  3. post src like everytime for reff

    mani

    December 4, 2013 at 11:41 AM

  4. talented in every way

    Amazing Peter

    December 5, 2013 at 6:45 PM

  5. SutoCom

    December 7, 2013 at 10:59 PM

  6. easy integration
    thank u
    but some ui breaking also for you?

    Sirrah

    December 8, 2013 at 2:23 PM

  7. gud one. using the same

    Lakshman

    December 9, 2013 at 12:38 PM

  8. Hey guys Just to let anyone know who wises to get jquery-ui working with kickstart-with-bootstrap what needs to be done is the following: (latest 2.3.4)

    In your conf/ApplicationResources.groovy add:

    modules = {
    ….
    jqueryui {
    resource url:’js/jquery-ui.min.js’
    }


    }

    Download jquery-min and put in to your js folder

    Now within your kickstart.gsp add the following:

    Notice how all are requires besides jqueryui which is module= this now refers to your ApplicationResources and lets jquery-ui work away within this theme. You also need to make a link to the css within the kickstart.gsp page too to get it looking nice

    Vahid

    January 13, 2014 at 10:30 PM

    • <r:require modules=”jquery”/>
      <r:require module=”jqueryui”/>
      <r:require modules=”bootstrap”/>
      <r:require modules=”bootstrap_utils”/>

      Vahid

      January 13, 2014 at 10:31 PM


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: