WebStudio and custom CSS/Javascript

[deas0815]

Hallo everybody,

the components shipping with WebStudio (from labs 3 stable) render quite nice in WebStudio. But OOTB, the HTML rendered can not be what
"you would  expect" on virtual  tomcat and  "other environments". The include component for example renders Javascript/AJAX calls which when using the defaults
(templates etc) don't render the HTML as the global javascript provided by webstudio is not available.

What is the general suggested approach  to integrate global/page/template scoped javascript/CSS that works in webstudio and "standalone" and makes sure it
does not interfere with CSS/Javascript provided by webstudio ?

cheers
Andreas

[nitis]

Hi deas,

long time ago from your post but I have the same question and maybe you have already answer it after the time, if it is please tell me 😄

Thanks.

[deas0815]

Well, I became careful - especially when components use javascript which is provided in the studio
environment.

If your components use yui or jquery for example - I would make sure to use the same version studio provides.

In the freemarker templates within the head element - I use conditions to include javascript depending
on the environment (studio or standalone).

regards
Andreas

[nitis]

Hi,

Thanks for your fast reply, I will tke care with this, and now I am having a new question which is how to link the CSS to the html components, because I tried but i couldn't do it.

I am thinking that maybe usin the head file, Do you know if it is correct??

Thanks a lot !!

[deas0815]

view.get.head.ftl renders to the head area of the page - but only if the component appears on the page.

I've included the CSS direcly in the freemarker templates of the page template (dynamic.ftl) so its
always there - no matter which components render.

regards
Andreas

[nitis]

Ok Andreas, thank so much, I will try it later and I tell you.

cheers. XD

[nitis]

Hi again Andreas,

I am testing what you told me and its working with the CSS and Javascript… but I have 2 new questions:

1. The typical url to link a CSS file using ${url.context}/css/… , for example, is not working because it is using the virtual server and it needs some url like this: /studio/proxy/alfresco/avmstore/get/s/age–admin/w/ROOT/css/… but how can I get this url dinamically?? or how it works??

2. When I drop some new custom component WITH CSS to a region of the template, I can see it properly, but I lose the options of the region, I mean after that I cannot click the region to edit, view standalone or remove the component, why it is happening??

Thank you very much for you help Andreas.

[nitis]

Both problems fixed…

Solutions:

1. Including the styles in the ftl file.

2. Defining the webscript for the edition of your new custom component. edit.get.* and edit.post* files.

Thanks anyway!! 😄

[muralie39]

hi,


i am struck up with webstudio.(basicaly the draging is not working - it is throwing some error failed to execute the image )

how to create new custom page.can you give any suggestions how to work on webstudio and create custum pages




Thanks,
Murali