topic Re: How to apply css style from 'web' folder in html of a webscript in Alfresco Archive

How to apply css style from 'web' folder in html of a webscript

mbel — Thu, 03 Nov 2016 16:46:36 GMT

Hello,I have generated maven alfresco amp project and I have folder web with css,scrips and so on.In order to import some css file in webscript html, what exactly the path to this directory should be?I tried with some variants but ...nothing is found.And is this content public how can I reach it in

Re: How to apply css style from 'web' folder in html of a webscript

ycoulon — Thu, 03 Nov 2016 21:42:24 GMT

Hi,

Just create an AIO maven project.

The alfresco amp is created with a demoamp.css file.

I manage to access it using that URL : http://localhost:8080/alfresco/css/demoamp.css

Re: How to apply css style from 'web' folder in html of a webscript

mbel — Fri, 04 Nov 2016 08:44:25 GMT

No need of AIO project.

I wanted to reach the created demoamp.css file.

so I just imported href="${url.context}/css/demoamp.css in my html file.

That's the URL which I needed. Thanks!

Re: How to apply css style from 'web' folder in html of a webscript

mbel — Mon, 14 Nov 2016 14:38:33 GMT

I installed my custom AMP to alfresco system and now the CSS is not working and I can't access it with the above url.

Request URL:
http://localhost:8080/alfresco/css/demoamp.css
Request Method:
GET
Status Code:
404 Not Found

While I was running it through my IDE , everything was ok and it managed to access the above url

Do you know what the reason could be ? What have I missed?

Re: How to apply css style from 'web' folder in html of a webscript

ycoulon — Mon, 14 Nov 2016 14:45:34 GMT

Hi,

Can you list the files in the alfresco/css folder ($ALF_HOME/tomcat/webapps/alfresco) ?

After applying the AMP against the war, did you clear that folder ? If you didn't maybe tomcat did not re-deploy the war with your customisation.

For more information about applying an AMP : Installing an Alfresco Module Package | Alfresco Documentation

Yann

Re: How to apply css style from 'web' folder in html of a webscript

mbel — Mon, 14 Nov 2016 15:04:42 GMT

Yes, I did clear the alfresco folder in tomcat/webapps before install the amp.

In general in tomcat\webapps\alfresco\css I should see my custom CSS or ?

Re: How to apply css style from 'web' folder in html of a webscript

ycoulon — Mon, 14 Nov 2016 15:35:01 GMT

I just install an AMP against Alfresco.war with '-verbose'. From what I saw the web folder is not mapped in the war as the documentation said : AMP to WAR mapping | Alfresco Documentation

Adding files relating to version '1.0-SNAPSHOT' of module 'test'
- File '/WEB-INF/lib/test-1.0-SNAPSHOT.jar' added to war from amp
- File '/WEB-INF/classes/alfresco/extension/templates/webscripts/helloworld.get.desc.xml' added to war from amp
- File '/WEB-INF/classes/alfresco/extension/templates/webscripts/helloworld.get.html.ftl' added to war from amp
- File '/WEB-INF/classes/alfresco/extension/templates/webscripts/helloworld.get.js' added to war from amp
- Directory '/WEB-INF/classes/alfresco/extension/templates/webscripts' added to war
- Directory '/WEB-INF/classes/alfresco/extension/templates' added to war
- Directory '/WEB-INF/classes/alfresco/extension' added to war
- File '/WEB-INF/classes/alfresco/module/test/context/webscript-context.xml' added to war from amp
- File '/WEB-INF/classes/alfresco/module/test/context/service-context.xml' added to war from amp
- File '/WEB-INF/classes/alfresco/module/test/context/bootstrap-context.xml' added to war from amp
- Directory '/WEB-INF/classes/alfresco/module/test/context' added to war
- File '/WEB-INF/classes/alfresco/module/test/model/content-model.xml' added to war from amp
- File '/WEB-INF/classes/alfresco/module/test/model/workflow-model.xml' added to war from amp
- Directory '/WEB-INF/classes/alfresco/module/test/model' added to war
- File '/WEB-INF/classes/alfresco/module/test/module-context.xml' added to war from amp
- File '/WEB-INF/classes/alfresco/module/test/alfresco-global.properties' added to war from amp
- File '/WEB-INF/classes/alfresco/module/test/log4j.properties' added to war from amp

In order to fix, you need to add a file-mapping.properties file with the following content :

include.default=true
/web=/

PS : Maybe you don't need to update 2 thread.

Yann

Re: How to apply css style from 'web' folder in html of a webscript

mbel — Tue, 15 Nov 2016 08:20:58 GMT

Hi,
I created the property file - file-mapping.properties in src/main/amp directory and added the above properties.

However, again it couldn't find the css and receive 404 error.

PS: I don't understand what you mean in your PS.

Re: How to apply css style from 'web' folder in html of a webscript

ycoulon — Tue, 15 Nov 2016 08:25:41 GMT

Hi,

Could you apply your AMP with -verbose option and put the output here ?

Can you see something like according to your AMP name/version/content :

Adding files relating to version '1.0-SNAPSHOT' of module 'test'
- File '/css/demoamp.css' added to war from amp
- File '/jsp/demoamp.jsp' added to war from amp
- Directory '/jsp' added to war
- File '/licenses/README-licenses.txt' added to war from amp
- Directory '/licenses' added to war
- File '/scripts/demoamp.js' added to war from amp
- File '/scripts/demoamp.js' added to war from amp
- File '/jsp/demoamp.jsp' added to war from amp

I was just saying that After installing custom AMP to Alfresco system - custom CSS, JS alerts and WebScript Exception handlers are not working. seems to be about the same issue we discuss here.

Yann

Re: How to apply css style from 'web' folder in html of a webscript

mbel — Tue, 15 Nov 2016 08:37:17 GMT

How did you install only /web content ?

As in general I uninstall the whole amp and re-install it again.

Re: How to apply css style from 'web' folder in html of a webscript

ycoulon — Tue, 15 Nov 2016 08:39:13 GMT

This is just a part of the output from alfresco-mmt.

I didn't uninstall the older version just (re-)apply the AMP over the war.

Yann

Re: How to apply css style from 'web' folder in html of a webscript

mbel — Tue, 15 Nov 2016 09:37:21 GMT

Ok, I don't understand why it doesn't recognize the file-mapping.properties file.

Even I generated a completely new alfresco- amp project and again when installing it, it doesn't add any of /web/ folder content.

Do I have to register it somewhere or ?

Re: How to apply css style from 'web' folder in html of a webscript

ycoulon — Tue, 15 Nov 2016 09:42:46 GMT

That's strange.

Wich version of the SDK, Alfresco are you using ?

Wich alfresco-mmt.jar are you using ? The one provided with your Alfresco installation ?

For my tests I use the latest alfresco-mmt.jar available from Index of /repositories/public/org/alfresco/alfresco-mmt/5.2.b-EA and 2.2.0 SDK.

Yann

Re: How to apply css style from 'web' folder in html of a webscript

mbel — Tue, 15 Nov 2016 10:06:34 GMT

The one provided with Alfresco installation.

I now downloaded the 5.2.b-EA and tried to installed the amp with this version of mmt and again don't see any new files added concerning the /web/ folder.

Can't understand what I am missing.

Re: How to apply css style from 'web' folder in html of a webscript

ycoulon — Tue, 15 Nov 2016 10:23:37 GMT

Open your AMP file (it's just a zip) can you find your file-mapping.properties in ?

Re: How to apply css style from 'web' folder in html of a webscript

mbel — Tue, 15 Nov 2016 11:52:02 GMT

It is there.

INFO: Checking the war version using /WEB-INF/classes/alfresco/version.properties
Adding files relating to version '1.0-SNAPSHOT' of module 'test-css'
- File '/WEB-INF/lib/test-css-1.0-SNAPSHOT.jar' added to war from amp
- File '/WEB-INF/classes/alfresco/extension/templates/webscripts/helloworld.get.html.ftl' added to war from amp
- File '/WEB-INF/classes/alfresco/extension/templates/webscripts/helloworld.get.desc.xml' added to war from amp
- File '/WEB-INF/classes/alfresco/extension/templates/webscripts/helloworld.get.js' added to war from amp
- File '/WEB-INF/classes/alfresco/module/test-css/context/bootstrap-context.xml' added to war from amp
- File '/WEB-INF/classes/alfresco/module/test-css/context/service-context.xml' added to war from amp
- File '/WEB-INF/classes/alfresco/module/test-css/context/webscript-context.xml' added to war from amp
- Directory '/WEB-INF/classes/alfresco/module/test-css/context' added to war
- File '/WEB-INF/classes/alfresco/module/test-css/model/content-model.xml' added to war from amp
- File '/WEB-INF/classes/alfresco/module/test-css/model/workflow-model.xml' added to war from amp
- Directory '/WEB-INF/classes/alfresco/module/test-css/model' added to war
- File '/WEB-INF/classes/alfresco/module/test-css/module-context.xml' added to war from amp
- File '/WEB-INF/classes/alfresco/module/test-css/alfresco-global.properties' added to war from amp
- File '/WEB-INF/classes/alfresco/module/test-css/log4j.properties' added to war from amp

C:\alfresco-community\bin>

Re: How to apply css style from 'web' folder in html of a webscript

ycoulon — Tue, 15 Nov 2016 14:36:21 GMT

Ok this is the output of alfresco-mmt, no information about your web content.

Can you unzip the AMP file and list the file in it ?

Did you rebuild your AMP ? Could you try with mvn clean install (or mvn clean package) ?

Yann

Re: How to apply css style from 'web' folder in html of a webscript

mbel — Wed, 16 Nov 2016 09:28:40 GMT

Yes, the above is the output of alfresco-mmt and as you can see the web content doesn't appear there, although I see that the file-mapping.properties file is in the amp.

Yes, of course I rebuilt it with mvn clean install -Pamp-to-war.

Here it is the list of the files in the amp.

C:\Users\maria\Documents\workspace-sts-3.8.1.RELEASE\test-css\target\test-css-1.0-SNAPSHOT\config
C:\Users\maria\Documents\workspace-sts-3.8.1.RELEASE\test-css\target\test-css-1.0-SNAPSHOT\config\alfresco
C:\Users\maria\Documents\workspace-sts-3.8.1.RELEASE\test-css\target\test-css-1.0-SNAPSHOT\config\alfresco\extension
C:\Users\maria\Documents\workspace-sts-3.8.1.RELEASE\test-css\target\test-css-1.0-SNAPSHOT\config\alfresco\extension\templates
C:\Users\maria\Documents\workspace-sts-3.8.1.RELEASE\test-css\target\test-css-1.0-SNAPSHOT\config\alfresco\extension\templates\webscripts
C:\Users\maria\Documents\workspace-sts-3.8.1.RELEASE\test-css\target\test-css-1.0-SNAPSHOT\config\alfresco\extension\templates\webscripts\helloworld.get.desc.xml
C:\Users\maria\Documents\workspace-sts-3.8.1.RELEASE\test-css\target\test-css-1.0-SNAPSHOT\config\alfresco\extension\templates\webscripts\helloworld.get.html.ftl
C:\Users\maria\Documents\workspace-sts-3.8.1.RELEASE\test-css\target\test-css-1.0-SNAPSHOT\config\alfresco\extension\templates\webscripts\helloworld.get.js
C:\Users\maria\Documents\workspace-sts-3.8.1.RELEASE\test-css\target\test-css-1.0-SNAPSHOT\config\alfresco\module
C:\Users\maria\Documents\workspace-sts-3.8.1.RELEASE\test-css\target\test-css-1.0-SNAPSHOT\config\alfresco\module\test-css
C:\Users\maria\Documents\workspace-sts-3.8.1.RELEASE\test-css\target\test-css-1.0-SNAPSHOT\config\alfresco\module\test-css\alfresco-global.properties
C:\Users\maria\Documents\workspace-sts-3.8.1.RELEASE\test-css\target\test-css-1.0-SNAPSHOT\config\alfresco\module\test-css\context
C:\Users\maria\Documents\workspace-sts-3.8.1.RELEASE\test-css\target\test-css-1.0-SNAPSHOT\config\alfresco\module\test-css\context\bootstrap-context.xml
C:\Users\maria\Documents\workspace-sts-3.8.1.RELEASE\test-css\target\test-css-1.0-SNAPSHOT\config\alfresco\module\test-css\context\service-context.xml
C:\Users\maria\Documents\workspace-sts-3.8.1.RELEASE\test-css\target\test-css-1.0-SNAPSHOT\config\alfresco\module\test-css\context\webscript-context.xml
C:\Users\maria\Documents\workspace-sts-3.8.1.RELEASE\test-css\target\test-css-1.0-SNAPSHOT\config\alfresco\module\test-css\log4j.properties
C:\Users\maria\Documents\workspace-sts-3.8.1.RELEASE\test-css\target\test-css-1.0-SNAPSHOT\config\alfresco\module\test-css\model
C:\Users\maria\Documents\workspace-sts-3.8.1.RELEASE\test-css\target\test-css-1.0-SNAPSHOT\config\alfresco\module\test-css\model\content-model.xml
C:\Users\maria\Documents\workspace-sts-3.8.1.RELEASE\test-css\target\test-css-1.0-SNAPSHOT\config\alfresco\module\test-css\model\workflow-model.xml
C:\Users\maria\Documents\workspace-sts-3.8.1.RELEASE\test-css\target\test-css-1.0-SNAPSHOT\config\alfresco\module\test-css\module-context.xml
C:\Users\maria\Documents\workspace-sts-3.8.1.RELEASE\test-css\target\test-css-1.0-SNAPSHOT\file-mapping.properties
C:\Users\maria\Documents\workspace-sts-3.8.1.RELEASE\test-css\target\test-css-1.0-SNAPSHOT\lib
C:\Users\maria\Documents\workspace-sts-3.8.1.RELEASE\test-css\target\test-css-1.0-SNAPSHOT\lib\test-css-1.0-SNAPSHOT.jar
C:\Users\maria\Documents\workspace-sts-3.8.1.RELEASE\test-css\target\test-css-1.0-SNAPSHOT\META-INF
C:\Users\maria\Documents\workspace-sts-3.8.1.RELEASE\test-css\target\test-css-1.0-SNAPSHOT\META-INF\MANIFEST.MF
C:\Users\maria\Documents\workspace-sts-3.8.1.RELEASE\test-css\target\test-css-1.0-SNAPSHOT\META-INF\maven
C:\Users\maria\Documents\workspace-sts-3.8.1.RELEASE\test-css\target\test-css-1.0-SNAPSHOT\META-INF\maven\testing-css
C:\Users\maria\Documents\workspace-sts-3.8.1.RELEASE\test-css\target\test-css-1.0-SNAPSHOT\META-INF\maven\testing-css\test-css
C:\Users\maria\Documents\workspace-sts-3.8.1.RELEASE\test-css\target\test-css-1.0-SNAPSHOT\META-INF\maven\testing-css\test-css\pom.properties
C:\Users\maria\Documents\workspace-sts-3.8.1.RELEASE\test-css\target\test-css-1.0-SNAPSHOT\META-INF\maven\testing-css\test-css\pom.xml
C:\Users\maria\Documents\workspace-sts-3.8.1.RELEASE\test-css\target\test-css-1.0-SNAPSHOT\module.properties

Re: How to apply css style from 'web' folder in html of a webscript

ycoulon — Wed, 16 Nov 2016 09:36:51 GMT

Hi,

Thanks for your answer.

According that file list, there is no web folder in your AMP.

Can you list your project file ? (from the root directory).

Maybe the folder in not in the right place.

It should be in src/main/amp

Yann

Re: How to apply css style from 'web' folder in html of a webscript

mbel — Wed, 16 Nov 2016 12:59:43 GMT

Hm, It was automatically generated from MAVEN. I aslo havent moved it.

I listed the whole project files but the list is long, so I won't spam with the whole list.

The web folder is there:

....

C:\Users\maria\Documents\workspace-sts-3.8.1.RELEASE\test-css\target\amp\file-mapping.properties
C:\Users\maria\Documents\workspace-sts-3.8.1.RELEASE\test-css\target\amp\lib
C:\Users\maria\Documents\workspace-sts-3.8.1.RELEASE\test-css\target\amp\lib\test-css-1.0-SNAPSHOT.jar
C:\Users\maria\Documents\workspace-sts-3.8.1.RELEASE\test-css\target\amp\module.properties
C:\Users\maria\Documents\workspace-sts-3.8.1.RELEASE\test-css\target\amp\web
C:\Users\maria\Documents\workspace-sts-3.8.1.RELEASE\test-css\target\amp\web\css
C:\Users\maria\Documents\workspace-sts-3.8.1.RELEASE\test-css\target\amp\web\css\demoamp.css
C:\Users\maria\Documents\workspace-sts-3.8.1.RELEASE\test-css\target\amp\web\jsp
C:\Users\maria\Documents\workspace-sts-3.8.1.RELEASE\test-css\target\amp\web\jsp\demoamp.jsp
C:\Users\maria\Documents\workspace-sts-3.8.1.RELEASE\test-css\target\amp\web\licenses
C:\Users\maria\Documents\workspace-sts-3.8.1.RELEASE\test-css\target\amp\web\licenses\README-licenses.txt
C:\Users\maria\Documents\workspace-sts-3.8.1.RELEASE\test-css\target\amp\web\scripts
C:\Users\maria\Documents\workspace-sts-3.8.1.RELEASE\test-css\target\amp\web\scripts\demoamp.js

......