Grails jquery ui custom theme override fail

Previous Topic Next Topic
 
classic Classic list List threaded Threaded
12 messages Options
Reply | Threaded
Open this post in threaded view
|

Grails jquery ui custom theme override fail

LargeDachshund
i am a noob to Grails, and i've spent way, way too much time on getting custom styling to work in my project.  so i hope some kind folks could point out what i've omitted or what i've incorrectly configured to get my theme working.  i also hope this will be a comprehensive explanation of how to do it.  

i'm running grails 2.3.6.  

so this is what i've gleaned from the grails documentation and sundry posts on the net.
1. add jquery-ui plugin to your project
2. go get a theme from jQuery, put the 1.XX.custom.css under your css directory
3. in ApplicationResources.groovy, put an override declaration that will insert your custom theme, instead of the lightness theme
4. add required module jquery-ui to your main.gsp file
5. you're rolling in jQuery theme-ing!

here's what i've done:
1. BuildConfig.groovy
plugins {
        // plugins for the build system only
        build ":tomcat:7.0.50"

        // plugins for the compile step
        compile (
			":scaffolding:2.0.1"
			,':cache:1.1.1'
			,":jquery-ui:1.10.3"
		    )        

        // plugins needed at runtime but not for compilation
        runtime ":hibernate:3.6.10.7" // or ":hibernate4:4.1.11.6"
        runtime ":database-migration:1.3.8"
        runtime ":jquery:1.10.2.2"
        runtime ":resources:1.2.1"
    }

2.  css theme and its images folder located: ~/web-app/css/jquery-ui-1.10.4.custom.css

3. ApplicationResources.groovy
modules = {
    application {
        resource url:'js/application.js'
    }
	
	overrides
	{
		"jquery-theme"
		{
			resource id:"theme", url:'/css/jquery-ui-1.10.4.custom.css'
			resource id:"theme", url: "/css/main.css"
		}
	}
}

4.  add required module: jquery-ui
<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		
		<title><g:layoutTitle default="Grails"/></title>
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		
		<link rel="shortcut icon" href="${resource(dir: 'images', file: 'favicon.ico')}" type="image/x-icon">
		<link rel="apple-touch-icon" href="${resource(dir: 'images', file: 'apple-touch-icon.png')}">
		<link rel="apple-touch-icon" sizes="114x114" href="${resource(dir: 'images', file: 'apple-touch-icon-retina.png')}">
				
		<r:require modules="jquery-ui"/>
		
		<g:javascript library="application"/>		
		
		<g:layoutHead/>
		
		<r:layoutResources />
		
	</head>
	<body>
		<div id="grailsLogo" role="banner"><a href="http://grails.org"><img src="${resource(dir: 'images', file: 'grails_logo.png')}" alt="Grails"/></a></div>
		<input id="btn" value="hello" type="button">
		<button id="btn" class="jquery.ui.button">hello</button>
		<g:layoutBody/>
5. theme on!  yeah, not so much here.  this is what i see: a lot of Chrome "user agent stylesheet"
grails page with browser styling because jquery ui not recognized

Thanks for your assistance.
Reply | Threaded
Open this post in threaded view
|

Re: Grails jquery ui custom theme override fail

rlovtangen
The index.gsp file that comes with Grails contains some inline CSS.
Typically you will point '/' to point to some other page, and never show the index.gsp to any user.

Ronny


On 02 Mar 2014, at 01:13, LargeDachshund <[hidden email]> wrote:

> i am a noob to Grails, and i've spent way, way too much time on getting
> custom styling to work in my project.  so i hope some kind folks could point
> out what i've omitted or what i've incorrectly configured to get my theme
> working.  i also hope this will be a comprehensive explanation of how to do
> it.  
>
> i'm running grails 2.3.6.  
>
> so this is what i've gleaned from the grails documentation and sundry posts
> on the net.
> 1. add jquery-ui plugin to your project
> 2. go get a theme from jQuery, put the 1.XX.custom.css under your css
> directory
> 3. in ApplicationResources.groovy, put an override declaration that will
> insert your custom theme, instead of the lightness theme
> 4. add required module jquery-ui to your main.gsp file
> 5. you're rolling in jQuery theme-ing!
>
> here's what i've done:
> 1. BuildConfig.groovy
>
>
> 2.  css theme and its images folder located:
> ~/web-app/css/jquery-ui-1.10.4.custom.css
>
> 3. ApplicationResources.groovy
>
>
> 4.  add required module: jquery-ui
>
> 5. theme on!  yeah, not so much here.  this is what i see: a lot of Chrome
> "user agent stylesheet"
> <http://grails.1312388.n4.nabble.com/file/n4654543/grails_css.png>
>
> Thanks for your assistance.
>
>
>
> --
> View this message in context: http://grails.1312388.n4.nabble.com/Grails-jquery-ui-custom-theme-override-fail-tp4654543.html
> Sent from the Grails - user mailing list archive at Nabble.com.
>
> ---------------------------------------------------------------------
> To unsubscribe from this list, please visit:
>
>    http://xircles.codehaus.org/manage_email
>
>


---------------------------------------------------------------------
To unsubscribe from this list, please visit:

    http://xircles.codehaus.org/manage_email


Reply | Threaded
Open this post in threaded view
|

Re: Grails jquery ui custom theme override fail

LargeDachshund
Ronny,
thanks for the reply.  I heartily agree that the default page is not suitable for general consumption.  I'm merely using it to verify that my jquery ui stylings are working properly.  when i navigate to via the controller links on the page, i get the same visual result.  

i'm uncertain where i have misconfigured the application such that the browser cannot detect any css and it uses the browser's default stylings.  Ronny, do you have any insight on this problem?

Thanks,
Reply | Threaded
Open this post in threaded view
|

Re: Grails jquery ui custom theme override fail

arcseldon
Haven’t followed the history on this thread.

If you just wish to ensure that styling is applied can you not do the following:

Create a snippet, like _styling.gsp and in there define your css and js links:

eg.

<link rel="stylesheet" media="screen" href="${resource(dir: 'css', file: 'application.css')}">
<script src="${resource(dir: 'js', file: 'jquery-1.7.1.min.js')}" type="text/javascript"></script>

Ensure your css and js files are in the js and css are in the web-app js and css folders respectively.

Then in every page you want the styling, just include a render directive to the _styling snippet:

<head>
<meta charset="utf-8">
<g:render template="/styling"></g:render>



Were you looking for something more auto-configured than this ?

I am using yeoman, and have rewritten Grails to use Gradle, so the build step introduces Bower etc.
But for Vanilla Grails I think the above is one approach.


On 3 Mar 2014, at 03:14, LargeDachshund <[hidden email]> wrote:

Ronny,
thanks for the reply.  I heartily agree that the default page is not
suitable for general consumption.  I'm merely using it to verify that my
jquery ui stylings are working properly.  when i navigate to via the
controller links on the page, i get the same visual result.  

i'm uncertain where i have misconfigured the application such that the
browser cannot detect any css and it uses the browser's default stylings.
Ronny, do you have any insight on this problem?

Thanks,



--
View this message in context: http://grails.1312388.n4.nabble.com/Grails-jquery-ui-custom-theme-override-fail-tp4654543p4654553.html
Sent from the Grails - user mailing list archive at Nabble.com.

---------------------------------------------------------------------
To unsubscribe from this list, please visit:

   http://xircles.codehaus.org/manage_email



Reply | Threaded
Open this post in threaded view
|

Re: Grails jquery ui custom theme override fail

LargeDachshund
Richard,
i'll try to implement your instructions.  i'm not familiar with Yeoman, et al.  So i meandered over to the site/youtube.  blown away by yet another framework.

what drew you to use the two in combination, instead of just "vanilla grails"?  i'm early in my development process (as evidence of this post); so i'm still evaluating technologies that might fit what i'm doing.
Reply | Threaded
Open this post in threaded view
|

Re: Grails jquery ui custom theme override fail

arcseldon
Exciting times, a proliferation of excellent frameworks. The choice and tradeoffs can be bewildering for sure.
Trying to embrace leaner, cloud services architecture styles - micro-services, and all promise that brings ;)

In particular, after the previous project, was looking for better management of the UI Web layer, and decided to swap out my 1000’s of lines of custom JS with the a SPA framework - and selected AngularJS. 

Another requirement was better tooling - yeoman, bower, and grunt are a great combination providing structure and scaffolding, build automation, compression etc etc and package management for JS / CSS, SASS scripts etc. The JS package management and ease of download etc is nice. 

Also, like Grails, I wanted instant feedback from the browser when applying changes. Having to redeploy the application container, manually kick off ant scripts etc to see changes was another no-go. For tooling as in Editor for web UI work I would have to recommend IDEA Webstorm if you aren’t already using it. As a Vim user, I use that with a VIM Idea plugin, and it retains a lightweight, Editor style user experience which is helpful.

Getting Yeoman etc working in a unified build is not so easy - checkout the current Grails Gradle plugin if you are interested in considering moving to Gradle as a first step. Couple of good presentations below if you get time:




There may well be Gant alternatives that don’t require you to change so much internally too. Didn’t check that first.









 
On 3 Mar 2014, at 08:30, LargeDachshund <[hidden email]> wrote:

Richard,
i'll try to implement your instructions.  i'm not familiar with Yeoman, et
al.  So i meandered over to the site/youtube.  blown away by yet another
framework.

what drew you to use the two in combination, instead of just "vanilla
grails"?  i'm early in my development process (as evidence of this post); so
i'm still evaluating technologies that might fit what i'm doing.



--
View this message in context: http://grails.1312388.n4.nabble.com/Grails-jquery-ui-custom-theme-override-fail-tp4654543p4654559.html
Sent from the Grails - user mailing list archive at Nabble.com.

---------------------------------------------------------------------
To unsubscribe from this list, please visit:

   http://xircles.codehaus.org/manage_email



Reply | Threaded
Open this post in threaded view
|

Re: Grails jquery ui custom theme override fail

rlovtangen
In reply to this post by LargeDachshund
Can you post your ApplicationResources.groovy? It looks like you only get the jquery-ui css from the plugin, not your overrides.

Btw: starting from Grails 2.4 the asset-pipeline plugin will be installed by default rather than the resources plugin. On a new project I would make the transition now.

Ronny

On 02 Mar 2014, at 19:14, LargeDachshund <[hidden email]> wrote:

> Ronny,
> thanks for the reply.  I heartily agree that the default page is not
> suitable for general consumption.  I'm merely using it to verify that my
> jquery ui stylings are working properly.  when i navigate to via the
> controller links on the page, i get the same visual result.  
>
> i'm uncertain where i have misconfigured the application such that the
> browser cannot detect any css and it uses the browser's default stylings.
> Ronny, do you have any insight on this problem?
>
> Thanks,
>
>
>
> --
> View this message in context: http://grails.1312388.n4.nabble.com/Grails-jquery-ui-custom-theme-override-fail-tp4654543p4654553.html
> Sent from the Grails - user mailing list archive at Nabble.com.
>
> ---------------------------------------------------------------------
> To unsubscribe from this list, please visit:
>
>    http://xircles.codehaus.org/manage_email
>
>


---------------------------------------------------------------------
To unsubscribe from this list, please visit:

    http://xircles.codehaus.org/manage_email


Reply | Threaded
Open this post in threaded view
|

Re: Grails jquery ui custom theme override fail

LargeDachshund
hey Ronny,

here's the ApplicationResources in all its glory:
modules = {
    application {
        resource url:'js/application.js'
    }
	
	overrides
	{
		"jquery-theme"
		{
			resource id:"theme", url:'/css/jquery-ui-1.10.4.custom.css'
			resource id:"theme", url: "/css/main.css"
		}
	}
}

The way I understood the documentation, if i bring the jquery-ui plugin via BuildConfig.Groovy, it comes with a "lightness" theme that you can override as above.  Further, if, as the way i read the documentation, i use the required tag for the jquery-ui module, i get jquery-ui on my gsp page.  from what i could tell, it seemed like that part was working.  

are you suggesting that i need to create a module called jquery-ui in ApplicationResources?  
Reply | Threaded
Open this post in threaded view
|

Re: Grails jquery ui custom theme override fail

rlovtangen
I haven't used "overrides" in ApplicationResources myself, but I see from the jquery-ui plugin that it is supposed to work.
But one thing I notice, is that you have two resources with the same id ("theme"). Maybe try to rename one of them, or remove one and see if the other one gets applied?

Ronny

On 04 Mar 2014, at 05:14, LargeDachshund <[hidden email]> wrote:

> hey Ronny,
>
> here's the ApplicationResources in all its glory:
>
>
> The way I understood the documentation, if i bring the jquery-ui plugin via
> BuildConfig.Groovy, it comes with a "lightness" theme that you can override
> as above.  Further, if, as the way i read the documentation, i use the
> required tag for the jquery-ui module, i get jquery-ui on my gsp page.  from
> what i could tell, it seemed like that part was working.  
>
> are you suggesting that i need to create a module called jquery-ui in
> ApplicationResources?  
>
>
>
> --
> View this message in context: http://grails.1312388.n4.nabble.com/Grails-jquery-ui-custom-theme-override-fail-tp4654543p4654639.html
> Sent from the Grails - user mailing list archive at Nabble.com.
>
> ---------------------------------------------------------------------
> To unsubscribe from this list, please visit:
>
>    http://xircles.codehaus.org/manage_email
>
>


---------------------------------------------------------------------
To unsubscribe from this list, please visit:

    http://xircles.codehaus.org/manage_email


Reply | Threaded
Open this post in threaded view
|

Re: Grails jquery ui custom theme override fail

LargeDachshund
Ronny,
i'm abandoning resources plugin.  i cant get this simple requirement to work.  

about using Asset Pipeline, the docs say that i just drop the css in the assets/css folder, js in the assets/js folder.  this sounds too easy.  where's the trick?
Reply | Threaded
Open this post in threaded view
|

Re: Grails jquery ui custom theme override fail

rlovtangen
It is that easy.
And you can reference other files from a css or js, which will be bundled together. In other words, a css or js can do the same as a module in resources plugin, you just put some require-statements at the top.

Ronny

On 04 Mar 2014, at 15:45, LargeDachshund <[hidden email]> wrote:

> Ronny,
> i'm abandoning resources plugin.  i cant get this simple requirement to
> work.  
>
> about using Asset Pipeline, the docs say that i just drop the css in the
> assets/css folder, js in the assets/js folder.  this sounds too easy.
> where's the trick?
>
>
>
> --
> View this message in context: http://grails.1312388.n4.nabble.com/Grails-jquery-ui-custom-theme-override-fail-tp4654543p4654650.html
> Sent from the Grails - user mailing list archive at Nabble.com.
>
> ---------------------------------------------------------------------
> To unsubscribe from this list, please visit:
>
>    http://xircles.codehaus.org/manage_email
>
>


---------------------------------------------------------------------
To unsubscribe from this list, please visit:

    http://xircles.codehaus.org/manage_email


Reply | Threaded
Open this post in threaded view
|

Re: Grails jquery ui custom theme override fail

LargeDachshund
Ronny,
thanks for your help.  i really appreciate it.