Related
I've created a progressive web app which is no single page application, but has regular links with page reloads.
I've added a manifest.json which looks like this:
{
"name": "MyApp",
"short_name": "MyApp",
"theme_color": "#4FD083",
"background_color": "#333333",
"display": "fullscreen",
"lang": "de-DE",
"scope": "my_domain.tld",
"start_url": "my_domain.tld",
"icons": [
/* Some icons */
]
}
When I visit the page in iOS Safari and add it to the home screen, the first time I open it it doesn't have a header and footer bar (which is correct). But once I click any link within the "app", it opens the content of this link in an overlay window which has a "Done" button and some icons on top (which is not correct). Looks like this:
I want all links on the same domain (which I would expect is defined by the scope attribute in manifest.json) to open in the same "window", respecting the "fullscreen" or "standalone" value of the "display" attribute in manifest.json.
I also tried playing around with these meta tags, but to no avail:
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="mobile-web-app-capable" content="yes">
It works as expected on Android (Chrome).
Am I doing anything wrong?
I got it working. I basically did three things, but am not certain which of it does the trick:
Add the manifest.json (code below)
Add a fake webServiceWorker (code below)
Add some meta tags
manifest.json
{
"name": "AppName",
"short_name": "AppName",
"description": "Some Description",
"lang": "de-DE",
"start_url": "/",
"scope": "/",
"display": "standalone",
"theme_color": "#4FD083",
"background_color": "#4FD083",
"icons": [
{
"src": "/img/apple-touch-icon-192x192.png",
"sizes": "192x192",
"type": "image/png"
},
{
"src": "/img/apple-touch-icon-512x512.png",
"sizes": "512x512",
"type": "image/png"
}
]
}
webServiceWorker #1
<script type="text/javascript">
if ('serviceWorker' in navigator) {
navigator.serviceWorker.register('js/service-worker-pwa.js');
}
</script>
webServiceWorker #2 (the actual file as referenced above)
self.addEventListener('fetch', function (e) {
});
self.addEventListener('install', function (event) {
});
meta tags
<link rel="manifest" crossorigin="use-credentials" href="<url of the application>/manifest.json">
<meta name="application-name" content="AppName">
<meta name="msapplication-starturl" content="<url of the application>">
<meta name="viewport" content="width=device-width,initial-scale=1">
<meta name="mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-title" content="AppName" />
Hope this will be helpful for anyone else running into this issue.
I am using the library bootstrap-select, recently I needed to upgrade from bootstrap version 4 to 5, according to the bootstrap-select side there should be support and no issue with that.
Here is a link zu the jsFiddle
This is what I m trying to do, and it worked before the upgrade:
const inputScreen = $('<select class="selectpicker"><option>test</option></select>').appendTo(conScreen);
inputScreen.selectpicker();
However, the dropdown elements are being shown, but I cant open it.
There is no error in the console. The only thing i can see, is that there is an hidden element which never gots displayed:
i figgured the answer out myself, it is about the position of the include. Popper.js needs to be included before bootstrap v5. That did the job!
for solve this problem, we cane use beta3 version
https://openbase.com/js/bootstrap-select/versions
I had the same problem, solved it by downgrading bootstrap to version 4.6.1
You can use min version for all javascript and css libraries. It worked for me.
<html>
<head>
<link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.min.css" />
<link rel="stylesheet" href="~/lib/bootstrap-select/css/bootstrap-select.min.css" />
</head>
<body>
<!-- Your page code is here -->
<script src="~/lib/jquery/jquery.slim.min.js"></script>
<script src="~/lib/popper.js/umd/popper.min.js"></script>
<script src="~/lib/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
<script src="~/lib/bootstrap-select/js/bootstrap-select.min.js"></script>
</body>
</html>
The libraries versions:
{
"version": "1.0",
"defaultProvider": "cdnjs",
"libraries": [
{
"library": "bootstrap#5.2.1",
"destination": "wwwroot/lib/bootstrap/"
},
{
"library": "bootstrap-select#1.13.18",
"destination": "wwwroot/lib/bootstrap-select/"
},
{
"provider": "cdnjs",
"library": "jquery#3.6.1",
"destination": "wwwroot/lib/jquery/"
},
{
"provider": "cdnjs",
"library": "popper.js#2.11.6",
"destination": "wwwroot/lib/popper.js/"
}
]
}
I am trying to work with jQuery's Datatable JS for my project from this link.
I downloaded the complete library from the same source. All the examples given in the package seem to work fine, but when I try to incorporate them in my WebForms,the CSS,JS do not work at all.
Here is what I have done :
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<link href="css/jquery.dataTables.css" rel="stylesheet" type="text/css" />
</head>
<body>
<form id="form1" runat="server">
<div>
<table id="myTable" class="display" cellspacing="0" width="100%">
<thead>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</tfoot>
<tbody>
<!-- table body -->
</tbody>
</table>
</div>
<script src="js/jquery.dataTables.js" type="text/javascript"></script>
<script src="js/jquery.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
$('#myTable').DataTable();
});
</script>
</form>
</body>
</html>
My file structure for the JS and CSS in my Solution looks as follows :
I have added all the necessary JS and CSS references as shown in the manual. Still the rendering isn't as expected. There is no CSS and even the JS doesn't work.
Also in the console i get the following errors:
ReferenceError: jQuery is not defined
TypeError: $(...).DataTable is not a function
I have still not bound any dynamic data here (like within a repeater or so) still it is not working.
Can someone please guide me in the right direction for this problem ?
CAUSE
There could be multiple reasons for this error.
jQuery DataTables library is missing.
jQuery library is loaded after jQuery DataTables.
Multiple versions of jQuery library is loaded.
SOLUTION
Include only one version of jQuery library version 1.7 or newer before jQuery DataTables.
For example:
<script src="js/jquery.min.js" type="text/javascript"></script>
<script src="js/jquery.dataTables.min.js" type="text/javascript"></script>
See jQuery DataTables: Common JavaScript console errors for more information on this and other common console errors.
This worked for me. But make sure to load the jquery.js before the preferred dataTable.js file. Cheers!
<script type="text/javascript" src="~/Scripts/jquery.js"></script>
<script type="text/javascript" src="~/Scripts/data-table/jquery.dataTables.js"></script>
<script>$(document).ready(function () {
$.noConflict();
var table = $('# your selector').DataTable();
});</script>
I got this error because I found out that I referenced jQuery twice.
The first time: on the master page (_Layout.cshtml) in ASP.NET MVC, and then again on one current page so I commented out the one on the master page.
If you are using ASP.NET MVC this snippet could help you
#*#Scripts.Render("~/bundles/jquery")*#//comment this line
#Scripts.Render("~/bundles/bootstrap")
#RenderSection("scripts", required: false)
and in the current page I added these lines
<script src="~/scripts/jquery-1.10.2.js"></script>
<!-- #region datatables files -->
<link rel="stylesheet" type="text/css" href="//cdn.datatables.net/1.10.12/css/jquery.dataTables.min.css" />
<script src="//cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js"></script>
<!-- #endregion -->
Hope this help you even if don't use ASP.NET MVC
if some reason two versions of jQuery are loaded (which is not recommended), calling $.noConflict(true) from the second version will return the globally scoped jQuery variables to those of the first version.
Sometimes it could be issue with older version (or not stable) of JQuery files
Solution use $.noConflict();
<script src="js/jquery.js" type="text/javascript"></script>
<script src="js/jquery.dataTables.js" type="text/javascript"></script>
<script>
$.noConflict();
jQuery( document ).ready(function( $ ) {
$('#myTable').DataTable();
});
// Code that uses other library's $ can follow here.
</script>
Here is the complete set of JS and CSS required for the export table plugin to work perfectly.
Hope it will save your time
<!--Import jQuery before export.js-->
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<!--Data Table-->
<script type="text/javascript" src=" https://cdn.datatables.net/1.10.13/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" src=" https://cdn.datatables.net/buttons/1.2.4/js/dataTables.buttons.min.js"></script>
<!--Export table buttons-->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jszip/2.5.0/jszip.min.js"></script>
<script type="text/javascript" src="https://cdn.rawgit.com/bpampuch/pdfmake/0.1.24/build/pdfmake.min.js" ></script>
<script type="text/javascript" src="https://cdn.rawgit.com/bpampuch/pdfmake/0.1.24/build/vfs_fonts.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/buttons/1.2.4/js/buttons.html5.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/buttons/1.2.1/js/buttons.print.min.js"></script>
<!--Export table button CSS-->
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.13/css/jquery.dataTables.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/buttons/1.2.4/css/buttons.dataTables.min.css">
javascript to add export buttons on the table with id = tbl
$('#tbl').DataTable({
dom: 'Bfrtip',
buttons: [
'copy', 'csv', 'excel', 'pdf', 'print'
]
});
Result :-
Same error occurs when working with DataTables in a Laravel project. Even if the following solutions are tried, the error still remains:
making sure jQuery is included
include jQuery before including the DataTables
making sure only one version of jQuery is added
In order to remove the error, after making sure the above conditions are fulfilled, add "defer" to the tag which includes the DataTables. For example,
<script src="https://cdn.datatables.net/1.10.23/js/jquery.dataTables.min.js" defer></script>
There can be two reasons for that error:
First
You are loding jQuery.DataTables.js before jquery.js so for that :-
You need to load jQuery.js before you load jQuery.DataTables.js
Second
You are using two versions of jQuery.js on the same page so for that :-
Try to use the higher version and make sure both links have same version of jQuery
I tried many things but my solution was adding "defer" after html script that you included datatables.
<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.25/js/jquery.dataTables.js" defer></script>
Honestly, this took hours to get this fixed. Finally only one thing worked a reconfirmation to solution provided by "Basheer AL-MOMANI". Which is just putting statement
#RenderSection("scripts", required: false)
within _Layout.cshtml file after all <script></script> elements and also commenting the jquery script in the same file. Secondly, I had to add
$.noConflict();
within jquery function call at another *.cshtml file as:
$(document).readyfunction () {
$.noConflict();
$("#example1").DataTable();
$('#example2').DataTable({
"paging": true,
"lengthChange": false,
"searching": false,
"ordering": true,
"info": true,
"autoWidth": false,
});
});
I know its late
Buy can help someone
This could also happen if you don't add $('#myTable').DataTable(); inside the document.ready
So instead of this
$('#myTable').DataTable();
Try This
$(document).ready(function() {
$('#myTable').DataTable();
});
I have Added defer to the data table jquery library reference. Now it is working for me.
<script src="~/Scripts/jquery.dataTables.min.js" defer></script>
I ran into this error also. For whatever reason I had originally coded
var table = $('#myTable').DataTable({
"paging": false,
"order": [[ 4, "asc" ]]
});
This would not throw the error sometimes and other times it would. By changing code to
$('#myTable').DataTable({
"paging": false,
"order": [[ 4, "asc" ]]
});
Error appears to have stopped
In my case the solution was to delete cookies from the browser.
Having the same issue in Flask, I had already a template that loaded JQuery, Popper and Bootstrap. I was extending that template into other template that I was using as a base to load the page that had the table.
For some reason in Flask apparently the files in the outer template load before the files in the tables above in the hierarchy (the ones you are extending) so JQuery was loading before the DataTables files causing the issue.
I had to create another template where I run all my imports of JS CDNs in the same place, that solved the issue.
Sometimes it happens that the script (initializing of datatable) is embedded in a general page template, so if one of the pages that actually does not have any table and you did not import the jquery related files for datatable, you face this error, since the general initialization still is looking for that. (This was in my case)
Solution: Is to wrap the initialization of datatable inside a codition that check presence of the library before that:
Here is practical example of it.
if (typeof jQuery.fn.DataTable != "undefined"){
$('#accordionExample table').DataTable( {
"pageLength": 5,
"info": false,
"order": [[ 1, "desc" ]]
} );
}
This may also happen if you write Datatable instead of DataTable. (DataTable T must be capital). this is a beginner's mistake.
$(document).ready(function() {
$('#category-table').DataTable({
// Your Code
});
if you are sure that you aligned your scripts as described above, please make sure you DataTable word case is correct.
Before
$(document).ready(function() {
$('#myTable').Datatable();
});
After
$(document).ready(function() {
$('#myTable').DataTable();
});
small t is creating problem, when I changed this t to T it worked like a charm.
I'm looking to create a test file (test.js). The Test.js file's purpose will be to perform unit tests for a particular controller (ie: Main.controller.js).
How can I load in this controller to an external js file?
I've tried using sap.require:
sap.ui.require(["/pricingTool/Controller/Main.controller"],
function(Main){
//Quint code
test("hello test", function(assert) {
assert.ok(1 == "1", "Passed!");
});
});
But I get an error that says:
failed to load /Controller/Main.controller.js
This tells me I'm either structuring this wrong, using the wrong path, or both. Any suggestions would be helpful. I've attached my file tree below for reference.
Component.js
sap.ui.define(['sap/ui/core/UIComponent'],
function(UIComponent) {
"use strict";
var Component = UIComponent.extend("pricingTool.Component", {
metadata : {
metadata : {
maniest: "json"
},
rootView : "pricingTool.view.Main",
dependencies : {
libs : [
"sap.m",
"sap.ui.layout"
]
},
config : {
sample : {
files : [
"Main.view.xml",
"Main.controller.js"
]
}
}
},
init : function () {
// call the init function of the parent
UIComponent.prototype.init.apply(this, arguments);
// additional initialization can be done here
}
});
return Component;
});
index.html
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta charset="utf-8">
<title>Pricing Tool</title>
<script id="sap-ui-bootstrap"
src="https://sapui5.hana.ondemand.com/resources/sap-ui-core.js"
data-sap-ui-libs="sap.m"
data-sap-ui-theme="sap_belize"
data-sap-ui-xx-bindingSyntax="complex"
data-sap-ui-preload="async"
data-sap-ui-compatVersion="edge"
data-sap-ui-resourceroots='{"pricingTool": "./"}'>
</script>
<script src='../pdfmake-master/build/pdfmake.min.js'></script>
<script src='../pdfmake-master/build/vfs_fonts.js'></script>
<!-- Application launch configuration -->
<script>
sap.ui.getCore().attachInit(function() {
new sap.m.App ({
pages: [
new sap.m.Page({
title: "Pricing Tool Rapid Prototype",
enableScrolling : true,
content: [ new sap.ui.core.ComponentContainer({
name : "pricingTool"
})]
})
]
}).placeAt("content");
});
</script>
</head>
<!-- UI Content -->
<body class="sapUiBody" id="content" role="application">
</body>
</html>
initialTest.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>QUnit Example</title>
<link rel="stylesheet" href="//code.jquery.com/qunit/qunit-1.15.0.css">
<script id="sap-ui-bootstrap"
src="https://sapui5.hana.ondemand.com/resources/sap-ui-core.js">
</script>
<script src="//code.jquery.com/qunit/qunit-1.15.0.js"></script>
<script src="allTests.js"></script>
<script src="/Controller/Main.controller.js"></script>
<script>
</script>
</head>
<body>
<div id="qunit"></div>
<div id="qunit-fixture"></div>
</body>
</html>
You do not need to reference the controller file directly inside the .html file.
The problem is that UI5 does not know where to find your resources. The resolution process is the following:
All standard resources are loaded from a path relative to where your sap-ui-core.js was loaded from.
All resources with custom namespaces are loaded based on the resource roots definition.
Basically, in the resource roots you define a map between a namespace prefix and the location where to find the resources starting with that prefix. If you use relative paths, then the locations are resolved relative to your html file.
In your index.html you have done this: data-sap-ui-resourceroots='{"pricingTool": "./"}' which is perfectly fine. Because your index.thml is located at the root of the project, requesting the pricingTool/Controller/Main.controller will lead to making a request at ./Controller/Main.controller which is actually our file.
But in your initialTest.html you failed to specify any resource root at all. Moreover, you referenced your controller directly and the path seems to not be right (note that a path starting with a leading / is considered an absolute path on the current host; depending on the server you are using, this might not be correct, as usually each application has its own subpath in the server).
You should therefore include a data-sap-ui-resourceroots='{"pricingTool": "../"}' inside your initialTest.html. Notice that I have used .. because the html file is inside the Test folder (and the other stuff is in sibling folders).
I am using grails for almost a year. Since now when I wanna link a css or js file in a gsp. I did the following:
I created a new file (eg the resources file) under web-app folder and I put there all my files of folders (eg when importing bootstrap I had a parent folder bootstrap under resources and under bootstrap there were css, img and js folders with their files).
Then, to import a css file I did the following (here is documentation for this):
<link rel="stylesheet" href="${resource(dir:
'resources/bootstrap/css', file: 'bootstrap.min.css')}"
type="text/css">
<script src="${resource(dir: 'resources/bootstrap/js', file:
'bootstrap.min.js')}"></script>
This worked great, but when I tried to create a new Project in grails 2.2.4 I had a Resource not found Error (404 to browser and the following to console).
ERROR resource.ResourceMeta - Resource not found: /resources/bootstrap/css/bootstrap.min.css
ERROR resource.ResourceMeta - Resource not found: /resources/bootstrap/js/bootstrap.min.js
ERROR resource.ResourceMeta - Resource not found: /resources/bootstrap/css/bootstrap.min.css
ERROR resource.ResourceMeta - Resource not found: /resources/bootstrap/js/bootstrap.min.js
As I realized these Errors in console were once from the resources function and once from the GET that client(browser) requested.
When looking at resources plugin I see that they suggest using the js and css folders. Is that meaningful to split a tool (eg twitter bootstrap) in these two directories?
ok I believe I have a (semi) working solution:
Suppose we need to include both Twitter Bootstrap 3 and TinyMce
Under webapp directory I create the following directories:
resources/bootstrap/
resources/bootstrap/css/
resources/bootstrap/css/bootstrap.min.css
resources/bootstrap/fonts/
resources/bootstrap/fonts/glyphicons-halflings-regular.eot
resources/bootstrap/fonts/glyphicons-halflings-regular.svg
resources/bootstrap/fonts/glyphicons-halflings-regular.ttf
resources/bootstrap/fonts/glyphicons-halflings-regular.woff
resources/bootstrap/js/
resources/bootstrap/js/bootstrap.min.js
resources/jquery/
resources/jquery/jquery-2.0.3.min.js
resources/tiny_mce/
resources/tiny_mce/langs/ /*many files here*/
resources/tiny_mce/plugins/ /*many files here*/
resources/tiny_mce/themes/ /*many files here*/
resources/tiny_mce/utils/ /*many files here*/
resources/tiny_mce/tiny_mce_popup.js
resources/tiny_mce/tiny_mce_src.js
resources/tiny_mce/tiny_mce.js
Then I declare my resources in ApplicationResources.groovy
modules = {
application {
resource url:'js/application.js'
}
jquery {
resource url:'resources/jquery/jquery-2.0.3.min.js'
}
bootstrap {
dependsOn 'jquery'
resource url:'resources/bootstrap/css/bootstrap.min.css'
resource url:'resources/bootstrap/js/bootstrap.min.js'
}
tinymce {
resource url:'resources/tiny_mce/tiny_mce.js'
}
}
And in Config.groovy
grails.resources.adhoc.patterns = ['/images/*', '/css/*', '/js/*', '/plugins/*'] /*no changes here*/
grails.resources.adhoc.excludes = ['/**/langs/**/*.*', '/**/themes/**/*.*'] /*to permit some Ajax calls from tiny_mce.js to relevant resources*/
grails.resources.debug=true
/*
this is why I call my solution SEMI working.
If set grails.resources.debug to false, TinyMce is NOT working because the above excludes are not active, and I receive 404 errors
*/
Then, in main.gsp
<!DOCTYPE html>
<head>
<g:javascript library="application"/>
<g:javascript library="bootstrap"/>
<g:javascript library="tinymce"/>
<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')}">
<link rel="stylesheet" href="${resource(dir: 'css', file: 'main.css')}" type="text/css">
<link rel="stylesheet" href="${resource(dir: 'css', file: 'mobile.css')}" type="text/css">
<r:layoutResources />
<g:layoutHead/>
</head>
<body>
<div id="grailsLogo" role="banner"><img src="${resource(dir: 'images', file: 'grails_logo.png')}" alt="Grails"/></div>
<g:layoutBody/>
<div class="footer" role="contentinfo"></div>
<div id="spinner" class="spinner" style="display:none;"><g:message code="spinner.alt" default="Loading…"/></div>
<r:layoutResources />
</body>
</html>
And in index.gsp
<head>
...
<script type="text/javascript">
$(function() {
tinymce.init({selector:'textarea'});
});
</script>
</head>
<body>
...
<h1>Welcome to Grails</h1>
check bootstrap - start
<span class="glyphicon glyphicon-search"></span>
<button type="button" class="btn btn-default btn-lg">
<span class="glyphicon glyphicon-star"></span> Star
</button>
check bootstrap - stop
<textarea>Your content here.</textarea>
...
</body>
Using the above, I have fully operational JQuery, Bootstrap3 and TinyMCE
But if a I set in Config.groovy
grails.resources.debug=true
I am receiving 404-errors related to the grails.resources.adhoc.excludes resources that TinyMce dynamically fetches after page load.
Any clues? I am really close to find the solution so I will glad to get your input
This test project can be downloaded from here: https://docs.google.com/file/d/0B8epX7R4j7jeaVh5OTFiQlV4V0U/edit?usp=sharing
Another answer to the question is the following:
Clean your project
Change 'BuildConfig.groovy' and use a newer version of resources plugin
Do a refresh dependencies to your project
and everything is working great now
I had the same issue, I don't know exactly what setup you have but I have this at the top of my mail.gsp-page:
<link rel="stylesheet" href="${resource(dir: 'css', file: 'bootstrap.css')}" type="text/css">
(Inside the -tag)
If you need to import .js-files this is what works for me:
<script src="${resource(dir: 'js', file: 'bootstrap.js')}"></script>
This is at the very bottom om the page inside the -tag.
I'm using Grails 2.1.1.
The /css and /js directories are part of the default "adhoc resources" patterns that the resources plugin adds to Config.groovy. If you want a different structure for your static resources, you'll either have to create a resource definition file (eg. BootstrapResources.groovy) or add your directory structure to the adhoc patterns:
// What URL patterns should be processed by the resources plugin
grails.resources.adhoc.patterns = ['/images/*', '/css/*', '/js/*', '/plugins/*', '/resources/*']
This would make everything in the /web-app/resources an adhoc resource and subject to the resource plugin's processing.
I am beginning to think that the most flexible way is to serve static content by using a proxy in front of Tomcat / Grails such as Nginx (for all the 'resources/*' URIs)and letting Grails to handle all the dynamic stuff (for the rest URIs).
After all it should be more efficient to use Nginx for serving static files than letting Tomcat / Grails do this.
But, as an afterthought, it should be pity for Resources Plugin to force you splitting the resources in three directories - and driving Grails cumbersome for simple scenarios like using Ext.js, WYSIWIG editors etc which have myriads of files to be included...