I am using GWT in a project and recently started using the WindowBuilder in Eclipse. I created a new class and in the WindowBuilder and added some widgets. All that works and everything. However, when I try to edit the CSS for some of the panels and I click to edit the "styleName" field I get an error message which says:
"There are no CSS files referenced from modules HTML."
I've tried adding a link to a style sheet in my base html file and in the Web.gwt.xml file, but that does not seem to work. I get the same error.
In other classes I have used UiBinder and added the style in the XML file, but this class doesn't use UiBinder. So how do I associate a CSS file with the class so that the WindowBuilder allows me to edit the style?
In this project I don't have or use a "war" directory. The project is a couchapp, so I compile it to another directory and push it to CouchDB from there. It seems that in other projects, where there is the original project setup with a war directory, this feature works properly.
I had the same problem and was able to work around it by moving my CSS-resources from the war-directory to the classpath, specifically inside a package that is declared as a "public path" inside the GWT module descriptior via "<public path='...' />".
Project layout (odd location for module descriptor because of Eclipse Plugin Bug):
src
|- main
|- java
| |- demo
| |- client
| | |- MyWidget.java
| | |- MyWidget.ui.xml
| |- Demo.gwt.xml
|- resources
|- demo
|- css
|- Demo.css
Demo.gwt.xml:
<module>
...
<source path="client" />
...
<public path="css" />
<stylesheet src="Demo.css" />
...
</module>
To fix this problem:
In module file gwt.xml type:
<stylesheet src="example.css"/>
Next in menu: Project -> clean.
Related
I have different webapps that share a large portion of the web.xml configuration. For example, the way some servlets are mapped is identical for all apps, but some webapps have custom servlets, or an additional filter, or shared managed beans.
Each webapp is a different project in my IDE. I would like to refactor the common part of my web.xml to a "common" project, and let all the application-specific web.xml's extend the "common" web.xml. Is there any possibility to do this?
Yes, you can. Assuming Eclipse (your question history confirms that you're using it), just create a "Web Fragment Project":
And associate it with the main project in the wizard:
You can if necessary (re)configure it in "Deployment Assembly" property of the main web project (or any other way of configuring the build in such way that it ultimately ends up as JAR in /WEB-INF/lib of main web project).
It's basically a Java project with the following folder structure:
CommonWebProject
|-- com.example... (you can put e.g. #WebServlet classes here)
|
|-- META-INF
| |-- resources (you can put shared web resources here)
| | |-- common.css
| | |-- common.js
| | |-- template.jsp
| | :
| |
| |-- beans.xml
| |-- web-fragment.xml
| `-- MANIFEST.MF
:
Any content in /META-INF/resources folder is resolved the same way as webcontent of the WAR (my Eclipse Luna SR1 didn't precreate the /resources folder, so you'd need to manually create it). And, importantingly, any resources (including classes!) with the same name already in the WAR will have loading precedence over those in JAR, so you could if necessary "override" a common JAR resource from WAR on that way.
Note that the web-fragment.xml file must be named exactly like that and thus not web.xml. The IDE should just autogenerate one for you, but for sake of completeness, a Servlet 3.0 compatible one look like this:
<?xml version="1.0" encoding="utf-8"?>
<web-fragment
xmlns="http://java.sun.com/xml/ns/javaee"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-fragment_3_0.xsd"
version="3.0"
>
<!-- Put shared web.xml config here. -->
</web-fragment>
See also:
Structure for multiple JSF projects with shared code (in case you're using JSF)
If you deploy your apps on glassfish, than you can put your common configuration in default-web.xml file under the domain-dir\config\ location.
Usually web servers have feature to define default web.xml which caters to your requirement. I would suggest to explore that option for the web server you are using.
Is it possible to change the path of the injected file before injection occurs?
I am using Grunt/Bower/Connect/Wiredep, and my directory structure is:
www
|- dev-dist/
|- node_modules/
|- src/
|- vendor/
|- bower.json
|- Gruntfile.js
|- package.json
(Note: in my .bowerrc file I've added directory: vendor)
When I run the custom task grunt serve:dev it will create the directory dev-dist, I will then copy my index.html (only) to the folder, after which I run the task wiredep.
After running wiredep, the src paths to my dependencies are all prefixed with '../vendor/'. The problem is that when I run connect I have the option base: ['vendor', 'dev-dist', 'src']. When everything is served, the relative path to vendor doesn't make any sense because the vendor dir is already served at the root.
Is there a way I can modify the path to the injected files before wiredep injects them? (So I can remove the '../vendor')
What I would like to have happen is from the same workspace be able to run grunt serve:* and specify dev/stage/prod environments. This is why I did not want to serve the whole www directory.
Is there a way to exclude folders from being served in connect? (So instead of specifying base:[...], I can just exclude the stage-dist / prod-dist folders)
Thanks,
JD
You can use the option ignorePath with a regular expression
ignorePath: /\.\.\//,
from the wiredep to remove the ../ from the path that is getting injected. The configuration details are available over here https://github.com/taptapship/wiredep#configuration
I haven't used connect yet, so I am not sure of your second part of the question.
I made an app using the ionic framework and would like to make it run on meteor.
The App is build on top of the sidemenu template you can create tying ionic start myApp sidemenu.
Here is the Git of the port or just
> git clone https://github.com/Xample/sidemenu-meteor
> cd sidemenu-meteor/
> meteor
How to do so ?
Create both projects:
ionic start ionicProject sidemenu
meteor create meteorProject
Reorganise the files:
All the important files within a ionicframework comes into a www folder start to reorganise them to fit with the meteor good practices.
In the meteor root folder, create a client, server, css, and public folder
Copy the ionicProject/www/css files into the meteorProject/css
Copy all the js files, the main index.html and the templates files into the meteorProject/client folder
All the other files which only needs to be served (images, audio, documents) must be put into the meteorProject/public folder
The ionicProject/www/lib will be replaced by a meteor package. Do not include it.
The meteorProject/server folder will remain empty
Now we need to ensure meteor will load the app.js file before the other one.
Create the meteorProject/client/lib folder
Move the app.js file into that one
You should have the following structure:
├── client
│ ├── controllers.js
│ ├── index.html
│ ├── lib
│ │ └── app.js
│ └── templates
│ ├── browse.html
│ ├── login.html
│ ├── menu.html
│ ├── playlist.html
│ ├── playlists.html
│ └── search.html
├── css
│ └── style.css
├── public
│ └── img
│ └── ionic.png
└── server
Import the meteor packages:
meteor add urigo:ionic
That one will include other dependent packages below:
added mquandalle:bower at version 0.1.11
added urigo:ionic at version 0.0.6
added urigo:angular at version 0.4.8
added urigo:angular-ui-router at version 0.6.1
added tinytest at version 1.0.3
bower package allows to use the bower package manager. Well basically it is a tool to allow easily include other packages using a description file (which might be used by angular but not packaged for meteor yet) you will likely be using it for installing ngCordova. No need for this sidemenu port btw
ionic correspond to all the files we did not copied from the ionicProject/www/lib folder. Those are now included by default into your meteor project.
angular is basically the same as for ionic. Angular is now included into your meteor project as well + the 'angular-meteor' which will be useful for bootstrapping the app.
angular-ui-router same story but for the router. This will be mandatory to handle the url and forward them to the right page. It's a little bit like the Iron router but angular way and compatible
tinytest is added per default, no real need for the port
Edit and port the files
index.html
- On meteor the header and the body are parsed and generated back by the framework. In short, meteor packs everything and generate the script and style files for you. Conversely if you wanted to just include a css or a js file through a or tag within the header / body, they will be dismissed by meteor. This is the reason why we are using packages instead of adding our script by ourselves. This to say, that most of the content of the index.html is now useless and needs to be removed. Even the is not allowed by meteor because it will generate it for you as well…. Moreover, no attributes are allowed in the body. This might be problematic for bootstrapping our project with angularJS. The html files looks like this now:
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title>sidemenu-meteor</title>
</head>
<body>
<ion-nav-view></ion-nav-view>
</body>
The templates files:
All the .html files not being into the server, public or private folder are loaded and packed into one big html by meteor. As meteor will search for and pack all the .html it will load but not include all the one within a <template> tag. All the files into the meteorProject/client/templates must be edited and encapsulated within a <template> tag bearing the name attribute such that we can easily find it back later on. For example the template browse.html will be packed such as:
<template name="browse.html">
... browse html file content ...
</template>
Repeat this step for all the templates.
app.js
Open the file and add the manual bootstrap for angularJS, in this manner you manually add the ng-app tag on top of the document.
Meteor.startup(function ()
{
angular.bootstrap(document, ['starter']);
});
Note: You need to do it once everything is loaded, for this reason we are doing it within the Meteor.startup function caller.
Add the 'angular-meteor' package to your application, this will change the Angular delimiters to [[ and ]] instead of the regular conflicting with meteor's handlebars {{ and }}
angular.module('starter', ['angular-meteor','ionic', 'starter.controllers'])
Replace the router's templateUrl path url references to something we can use with the loaded by meteor templates. Remember, we are not storing the templates into the meteorProject/public folder, therefore we cannot load them through templateUrl:'someUrl' you might do it but I do not recommend
templateUrl: "templates/menu.html", becomes template:UiRouter.template('menu.html'),
Repeat this step for all the states in the state provider.
controller.js
just replace the template dependency of the modal. From:
$ionicModal.fromTemplateUrl('templates/login.html', {
to
$ionicModal.fromTemplateUrl('login.html', {
This is again to ensure the template is found correctly. Note that for some reason we have been able to load the templateUrl using the template name. It's still a mystery to me, probably a meteor package port have added this sugar…
playlists.html (but possibly other files)
Edit all the files and replace all the {{ occurrences to [[ and }} to ]]
Basically in this example you will only have to edit playlists.html
Last step
At this stage you should be able to run the ionic sidemenu project under meteor. There is only one thing missing. As you can remember, we changed the delimiters {{}} -> [[]]. Unfortunately, some of the ionic directives are using the regular {{}} delimiters and expect them to be functional. Therefore while adding a <ion-item href="myPath"> this is compiled to something like <a href={{$href()}}> so… now if you click on a menu, the href will be wrong and you will not be redirected to the right page… To fix this, a workaround is to embed the <ion-item> within your own <a href="myRef"> tag. I'm still looking for a better solution…. Still to do so, just refactor all your ion-item such that:
<ion-item nav-clear menu-close href="#/app/search">
becomes encapsulated in
<a href="/#/app/search">
<ion-item nav-clear menu-close >
Search
</ion-item>
</a>
Dependencies
Last thing, meteor will try to minify your javascript during the deployment, doing so you might break the angular code if it is not using the array notation. Just refactor all your methods putting your methods into an array. Read the guide for more information. An alternative is to avoid meteor to minify the code deploying using --debug meteor deploy --debug your-project.meteor.com
To get this tutorial:
> git clone https://github.com/Xample/sidemenu-meteor
> cd sidemenu-meteor/
> meteor
I'm using the NodeJS implementation of KSS. I have the following file structure:
sass (.scss files)
css (compiled .css files)
images (images & sprites)
styleguide (auto-generated styleguide html)
|- public (auto-generated assets)
|- template (styleguide template files)
I can successfully generate a styleguide by executing the following command line instruction:
kss-node sass styleguide --css css/styles.css --template styleguide/template
So sass is my source folder to parse, styleguide is the destination folder and the --css and --template options tell the compiler where to find my main css file and template respectively. During the process the contents of the css/styles.css file is copied over to styleguide/public/style.css which is then referenced by the styleguide. This is all great.
However, the css file that is generated and referenced by the styleguide now sits in a different folder structure from the original css file (it is two deep from the root instead of one) and therefore any references to the images folder are now invalid. Is there a way to resolve this without placing my original css files in another folder in the css directory to mimic the styleguide folder structure (which would be a massive hack)?
Also, any other references to images in the normal html markup (derived from the scss comments) will have to be adapted to reference the adjusted folder structure, and therefore is not indicative of a real life implementation of my code. Is there a way to resolve this too?
Thanks
I know it's not a solution per se, but what I ended up doing was a Grunt task to copy my images (even the generated by Compass) to the public folder of the generated styleguide after the KSS parsing (also done with Grunt).
I have created a composite component in JSF2. I works great.
I would like to create it as JAR for future use.
I followed the instructions here.
However, when it comes to CSS the browser refers to the location relatively to the project that uses the jar and not to the Jar location!
I defined it like this:
<h:outputStylesheet library="css" name="component.css" target="head" />
and I get this exception: GET http://localhost:8080/MY_APPLICATION/resources/component.css 404 (Not Found)
It's looking for it relatively to the projects, and not to the Jar project!
How can I make it relative to the JAR project?
EDITED
The JAR tree is:
META-INF
--resource
-- components
myComp.xhtml
components.css
-- img
-- scripts
--components.taglib.xml
--faces.config.xml
The war is a regular dynamic project:
WEB-INF
--lib
myJar.jar
-- web.xml
-- faces-config.xml
testComp.xhtml
Your JAR directory structure should be:
META-INF
--resources
-- components
myComp.xhtml
-- css <-- The library defined in the stylesheet
components.css <-- A stylesheet resource in the library
-- img
-- scripts
--components.taglib.xml
--faces.config.xml
Since, you are specifying the library name as css in the h:outputStylesheet tag with the resource name as component.css, the file should be present in a directory named css located in META-INF/resources directory of the JAR file.
Also, consider using a library name that is not bound to conflict with other names, if you intend to allow other developers to use your JAR.
AFAIK, the resource needs to be located in the same directory as the composite component. Have you tried to put the css in the same library?