I'm using Grails 1.3.7 and I want to use both resources plugin as well as jquery ui, the problem comes when I want to switch to a different jquery ui theme. I cannot give the theme argument.
I use this tag:
<r:use module="jquery" />
<r:use module="jquery-ui" theme="smoothness" />
but doesn't work, also tried with themeCSS attribute and no effect.
Thanks.
You can override the default jquery-theme resource in your own local resources definition (like /conf/AppResources.groovy). To do that add overrides section like:
modules = {
...
overrides {
// this overrides the default ui-lightness theme from jquery-ui plugin
'jquery-theme' {
resource id:'theme', url:'/css/themes/my-theme/jquery-ui.custom.css', attrs: [media: 'screen, projection']
}
}
...
}
Adjust the url accordingly to point to your theme css downloaded from a ThemeRoller. Then simply use
<r:require module="jquery-ui" />
jquery-ui module depends on jquery-theme and will pull it according to your overridden definition.
I don't know why this plugin makes it so hard but anyway, if you want to change the theme you need to specify (inside of head tag):
<jqui:resources themeCss="${g.resource(dir:'/css/jquery-ui/theme/smoothness', file:'jquery-ui-1.4.4.custom.css')}" />
Than you need to place your template files (css file and also images folder) into your application css folder (web-app/css). This should work
Related
I have a JSF 2.2 webapp with a contract and several pages, located directly in the WebContent folder. The contract consists of an image, a template file template.xhtml and a css file global.css. So far everything is working as expected.
Now I want to use PicketLink for user authentication and authorization and have followed a tutorial (http://www.ocpsoft.org/security/simple-java-ee-jsf-login-page-with-jboss-picketlink-security/), but when accessing my pages the image and css files are unable to be loaded, only the template applies, so my page has no CSS styles applied at all and in the Firefox Inspector there is a line that reads (translated from German): "Stylesheet http://localhost:8080/MyTestProject/login.xhtml wasn't loaded because its MIME type is "text/html" and not "text/css"".
After replacing
builder.http().allPaths().authenticateWith().form()... and so on
in the HttpSecurityConfiguration class with
builder.http().allPaths().unprotected()
the image and css can be loaded again.
I have tried the following (and some other paths) but it did not solve the problem:
.forPath("/contracts/*").unprotected();
How can I exclude the contracts folder from the PicketLink protection?
Here is my complete HttpSecurityConfiguration class:
#ApplicationScoped
public class HttpSecurityConfiguration {
public void onInit(#Observes SecurityConfigurationEvent event) {
SecurityConfigurationBuilder builder = event.getBuilder();
builder
.http()
.allPaths()
.authenticateWith()
.form()
.loginPage("/login.xhtml")
.errorPage("/loginError.xhtml")
.restoreOriginalRequest()
.forPath("/logout")
.logout()
.redirectTo("/index.xhtml")
.forPath("/index.xhtml")
.unprotected()
// .forPath("/contracts/*")
// .unprotected()
;
}
}
EDIT
In reply to the comment from Kukeltje, I include the CSS in the template with
<h:head>
<title><ui:insert name="title">MyTestProject</ui:insert></title>
<h:outputStylesheet name="global.css" />
</h:head>
and the image with
<h:graphicImage class="feature" name="logo-main.png" width="900" height="270" />
I also tried to include javax.faces.resource as unprotected, still not working though.
EDIT #2
The following is also not working, I got the idea from the documentation (PicketLink Reference Chapter 12.2):
.forPath("/*.png").unprotected()
.forPath("/*.css").unprotected()
I was able to solve my problem with the following security configuration:
.forPath("/javax.faces.resource/*.png.xhtml").unprotected()
I've seen in my Firefox Inspector that the browser tried to load the image from /MyTestProject/javax.faces.resource/logo-main.png.xhtml?con=TemplateBlue, so trying the above seemed logical and it works!
Bower and main-bower-files are fantastic, however, when using them with Angular Bootstrap UI, more things are installed/included than required.
Basically : Angular Bootstrap UI, replaces the need for bootstrap.js and it's jquery dependency. However when installing bootstrap, jquery gets installed, then my gulp task which uses main-bower-files, includes jquery and bootstrap.js in my html files.
Is there a way to tell bower, and/or main-bower-files and/or Bootstrap, that jquery and bootstrap.js are not required anymore.
So far I tried commenting the jquery dependency and dist/js/bootstrap.js lines in bower_components/bootstrap/bower.json, but the files are still being included.
1) Switch to wiredep, which I'd recommend. Then you can do something like this:
gulp.task('wiredep', function () {
var wiredep = require('wiredep').stream;
gulp.src('app/*.html')
.pipe(wiredep({
directory: 'app/bower_components',
exclude: ['bootstrap']
}))
.pipe(gulp.dest('app'))
});
Note that the above will remove the whole bootstrap, not just its .js files. The exclude array can contain also regexps, which is what is probably needed if you want to retain for instance styles.
And in your HTML file (for javascript):
Replace the js with css where you want to inject styles.
2) Override the bower main files for Bootstrap: provide the following options to main-bower-files:
{
"overrides": {
"bootstrap": {
"main": [
// files you want to include
]
}
}
}
You'll have to check what you don't want to exclude and add them to the main array above.
See also: https://github.com/ck86/gulp-bower-files/issues/33
I'm working on an MVC 5.0 (.Net 4.5) application where I need to apply a custom JavaScript transform to my included bundle files. One of those files, which I'm calling dummy.js for illustration purposes, has a minified file called dummy.min.js.
I created a custom script transform to replace injected window.jQuery references with a different expression. Everything works fine when I run locally and in debug mode, but when debug mode is turned off in the Web.config file, the Bundle returns the contents of the dummy.min.js file, but my script transform is not applied to it. It only gets applied to JavaScript files that don't have an associated .min.js file.
Does anyone have an idea on how to resolve this? It almost sounds like a bug in MVC.
A workaround is to remove the minified file. This post kind of addresses my situation by suggesting removing the .min.js file since MVC minifies by default, but I'm looking for an alternative solution (if any).
Thank you so much in advance.
Here's how to reproduce the above:
If you're interested in reproducing my issue, here's a quick BundleConfig and the actual custom script transform. It replaces all instances of window.jQuery with window.$jq1_9||window.jQuery, assuming it is injected via a self-executing anonymous function.
public class BundleConfig
{
public static void RegisterBundles(BundleCollection bundles)
{
bundles.Add(
new ScriptBundle("~/bundles/dummy")
.Include("~/Scripts/dummy.js", new InjectedJQueryVariableRewriteTransform()));
}
}
public class InjectedJQueryVariableRewriteTransform : System.Web.Optimization.IItemTransform
{
public string Process(string includedVirtualPath, string javaScriptCode)
{
// TODO: I understand this approach is naiive, but it does the trick for now.
return javaScriptCode.Replace("window.jQuery", "window.$jq1_9 || window.jQuery");
}
}
If you have Visual Studio 2012 and MVC 4, you will need version 1.1.0 of the System.Web.Optimization assembly, which you can obtain by running the following command in the Nuget Package Manager. At time of writing it installs version 1.1.2 of the package.
Install-Package Microsoft.AspNet.Web.Optimization
Here's the sample JavaScript dummy.js. You can create a copy of it and name it dummy.min.js:
(function ($) {
"use strict";
// TODO: Do something interesting...
})(window.jQuery);
Set the debug attribute to false in the following element in Web.config:
<compilation debug="false" targetFramework="4.5" />
Assuming the application's port is 9221, render the bundle in Firefox or Chrome:
http://localhost:9221/bundles/dummy
You will see that when debug is set to true, the transform is applied, as shown below:
(function(){"use strict"})(window.$jq1_9||window.jQuery)
When it is set to false. It is ignored and only the .min.js file is used:
(function(){"use strict"})(window.jQuery)
If you add this line:
bundles.FileExtensionReplacementList.Clear();
you will remove the rule for using .min files when bundling is enabled. You will remove all rules, unfortunately, so if you need any of the other ones you'll need to add them manually. Also, this will change the rules for all bundles.
If you just want to disable these replacement rules for just one bundle, you can just set the EnableFileExtensionReplacements property to false on that specific bundle:
var bundle = new ScriptBundle("...");
bundle.EnableFileExtensionReplacements = false;
Trying to use the Jquery-UI plugin from http://grails.org/plugin/jquery-ui
but apparently the documentations is not correct when discuss using the plugin with resources framework as following the instructions leads to an error:
Error processing GroovyPageView: Error executing tag <r:layoutResources>: No module found with name [jquery-ui]
Apparently the same problem is known around, but was not able to find a solution on the net (example: some discussion here and some other discussions with no solution or hints to a solution).
Did anyone managed to successfully configure jquery-ui in grails with the resource framework?
First you need to install the plugin, so in your BuildConfig.groovy
plugins {
...
compile ":jquery-ui:1.8.24"
...
}
Use grails compile --refresh-dependencies and see if the console output the download of the plugin. If you are using STS, you can go in right click > grails tools > refresh dependencies
After that, you can add <r:require module="jquery-ui"/> before the <r:layoutResources/>
A usefull tip is the change of the jquery ui theme, you can configure this in your ApplicationResources.groovy
modules = {
overrides {
'jquery-theme' {
resource id:'theme', url:'/css/ui/jquery-ui-1.8.21.custom.css'
}
}
}
In this example i have one css located in web-app/css/ui/.
Another tip is that you can force your modules to depend on jquery-ui:
modules = {
mymodule {
dependsOn 'jquery-ui'
resource url: '/js/my.js'
}
}
So if you add the resource mymodule to your GSP, the jquery-ui will be loaded too.
I'm using Grails 2.0 and specified my css stylesheets and javascript files in the application resources file so that I can use syntax like <r:require modules="common"/>
In my resource file I have specified a css file which in turn uses in image background...
jrac {
dependsOn 'jquery-dev'
resource url: '/js/misc/jrac.js'
resource url: '/css/misc/jrac.css', bundle:'bundle_style'
}
jrac.css
...
.jrac_loading {
background-image: url('../../images/misc/loading.gif');
}
The issue is that when I run this in the browser, the parsed file changes the url to:
background-image: url('resource:/images/misc/loading.gif');
So the image doesn't work, does anyone have any ideas why?
Turns out the issue was with the lesscss plugin. If you use this plugin you must set your less output to a separate bundle, otherwise url rewriting doesn't seem to play well.