I have a javascript file under the following folder in my JAR component:
/src/main/resources/META-INF/resources/default/javascript/jquery.marquee.js
If I create a custom JSF component with the following #ResourceDependency annotation:
#ResourceDependency(library = "default", name = "javascript/jquery.marquee.js", target = "head")
The javascript file cannot be found, and in the browser I can see two weird URLs with undefined.css and undefined.js as part of the URL, and also referring the PrimeFaces library ??
http://localhost:8080/acio/javax.faces.resource/undefined/undefined.css.xhtml?ln=primefaces&v=5.3
http://localhost:8080/acio/javax.faces.resource/undefined/undefined.js.xhtml?ln=primefaces&v=5.3
However, if I manually include the script in a XHTML template as follows:
<h:outputScript library="default" name="javascript/jquery.marquee.js" />
Then everything works like a charm as expected, with the expected URL as follows:
http://localhost:8080/acio/javax.faces.resource/javascript/jquery.marquee.js.xhtml?ln=default
I'm completely puzzled about this.
Why, if I use the #ResourceDependency annotation, I get TWO wrong URL's, one about a CSS and another about the JS, related to the PrimeFaces resources, when I'm positively sure the placement of my own JS file is correct? (otherwise the h:outputScript would not work as well)
Tested with Mojarra 2.2.13.SP1 shipped with WildFly 10.1.0.Final, and Mojarra 2.2.12 shipped with WildFly 9.0.2.Final
Any help would be greatly appreaciated !
[UPDATE]
It looks like the the issue may be related to the way we handle page navigation. We are using a SPA approach, with a Facelet template that has a big panel group area inside, with a dynamic JSF include directive. Pages are XHTML fragments that are dynamically included in the template's panel group after an AJAX execution.
It appears that #ResourceDependency only renders the corresponding HTML resource link when a View is created the very first time. As we are using SPA, our View never changes, from the JSF point of view. We handle all the page navigation with AJAX fragment updates using the include directive.
As a test, I placed the tag of my component in the Facelet template itself, instead of a XHTML fragment... and the link is rendered as expected !
It would be great if someone can confirm this behaviour... and if there's any elegant solution to it.
So far, we have to manually include the needed HTML resources on the template definition.
It turns out that the problem goes away when upgrading to PrimeFaces 6.1. Probably Kukeltje is right, and the PF 5.3 Resource Renderer has some kind of bug.
In short, when developing your own JSF PrimeFaces components, PF 5.3 will not render the #ResourceDependency annotations of the JSF component in some situations, like the one described here: using an SPA approach with XHTML fragments.
Moving to PF 6.1 solves the problem. If upgrading is not possible, we have to manually include the needed JS / CSS resources in the fragment with outputScript tags.
Related
I spent some time today with Lit trying to make a simple WebComponent that makes a HTTP GET to a URI, which returns a fully formed HTML document, and I want to inject said HTML document into the WebComponent's shadow DOM; basically this WebComponent acts as a simple proxy for embedding an externally hosted (but trusted) web snippet on my web page. I ran into a few problems:
Lit considers all HTML unsafe, so i had to mark it with Lit's unsafeHTML directive.
Then, I noticed none of the script or link tags in the injected HTML were being followed, so I parsed the incoming HTML as a HtmlDocument, located all the script/link tags, and "re-created" them using document.createElement(...) and returned them in my render(). I'm now noticing that images arent showing up either.
I don't like scraping scripts/links and re-creating them and jamming them into my web component anyhow, but I'm curious - what's the right way to approach this syndicating/consuming syndicated HTML pages/fragments?
Is this a solved problem w/ oEmbed already?
Is this simpler to do with a different WebComponent library?
This seems way harder than it should be at this point.
I think that it has little to do with WebComponents but rather with the HTML5 specs. lit-html uses innerHTML to create elements.
Script elements inserted using innerHTML do not execute when they are inserted
There are still ways to execute JS but this has little to do with your question.
unsafeHTML(`<img src="triggerError" onerror="alert('BOOM')">`)
Regarding the images, it may be a path issue?
This should work:
unsafeHTML(`<img src='http://placehold.it/350x350'>`)
I am using Kentico and have noticed a weird css issue. After mocking my pages up in Dreamweaver I then create the page in Kentico, however I have noticed that some elements in Kentico are slightly misaligned.
I have tried copying the source from Kentico into Dreamweaver to see if I can fix the issue but Kentico still renders the content incorrectly.
Are you using Dreamweaver in design or split mode? if yes, turn it off and use code mode only.
I guess you have to compare structure of your HTML and Kentico output HTML. Kentico add a form tag by default which may cause structural issue with css. If you can provide both html, I can help
On Kentico (up to version 11) when you use portal engine or ASPX templates you have this shortcoming. Kentico adds excessive HTML markup on the controls it creates on order to provide hooks that will help the engine to perform actions. For example, Bizforms add multiple divs/spans around normal input tags. So, you have to adapt the CSS you have created to match the tags used by Kentico.
What is your template type:
ASPX page: You can copy your entire HTML code from Dreamweaver into your aspx page template and then work on your page.
Portal Page: You need to understand the structure and cannot replace entire HTML Code from Dreamweaver. You have to seperate your HTML code to insert DropZone for web parts and widgets.
Good Luck!
You will have to make some adaptation always from raw HTML and kentico. In your case you are using aspx model which makes it more harder as server level changes are not 100% compatible with raw HTML or client side code. If possible use portal engine with transformation which will be more like to like of raw HTML.
You must create a directory in CSS/Stylesheet
If you're using the CSS section of the Admin interface, check to see if you have any & signs at the beginning of any tags. Kentico doesn't seem to support this so might be breaking any classes that appear after it.
When building components in AEM, by default new components are created with an associated JSP file for rendering.
For builds using Sightly, each time a component is created the developer must delete the JSP file and create the required HTML file.
This leads to wasted time and effort, not to mention frustration for developers having to complete a repetitive task.
Can AEM be configured so the default rendering generated is HTML rather than JSP?
Thank you
I don't think such a configuration is possible in AEM, primarily because, the creation of component and its JSP is handled through Javascript.
/crx/de/js/CRX/plugins/action/CreateComponentAction.js
Even the initial content available within the JSP file is populated through this JS only.
A short snippet from the JS, is shown here
// create component JSP
var nodeName = label + ".jsp";
var compJspFile = CRX.Util.createNode(nodeName, nodeName,
CRX.util.NT_FILE, component, loader);
In my index.html I have defined the following:
<html class="dark"
ng-app="app"
ng-controller="appController"
id="ng-app"
xmlns:ng="http://angularjs.org"
ng-app="optionalModuleName">
In my code I have:
<a ui-sref="home.content({ content: 'overview' })"
ui-sref-active="current">
From what I understand the xmlns:ng="http://angularjs.org is required by some versions of IE
to identify the different namespaces.
Now I am also using ui-router. So how should I declare the namespace?
I assume xmlns:ui but what should I put after that ?
Also in VS2013 it's coming up as invalid. Is there a way I can tell VS2013 to ignore ui- that it sees in HTML ?
Just to be clear in the first place - you are naming your index site index.html. This confused me a little since namespaces are only valid, when used in xml documents. For html it would be the xml application xhtml. If you do not know the difference, please read it up on the web. There are many good tutorials and articles explaining the differences between htmland xhtml.
Back to your question: As far as I can see from their source code, the ui router is developed in valid angularjs, and the usage is like the usage of angular directives, so you should be fine only including the angularjs namespace to your root element.
Please also read the following document for further introductions on how to make angularjs compatible with Internet Explorer: https://docs.angularjs.org/guide/ie
As for your second question, I don't know if you can setup VS2013 to ignore certain attributes, but since html5 you are able to add data- before them to make them valid (x)html.
As described in here: https://docs.angularjs.org/guide/directive
and here: http://www.w3schools.com/tags/att_global_data.asp
So for example:
<a data-ui-sref="home.content({ content: 'overview' })"
data-ui-sref-active="current">
I'm using Symfony2 with Twig templating engine.
Is there any way to output a list of all Twig templates files loaded in the current request, including the ones loaded through extends, include, etc.?
That would make my life much easier when overriding third-party bundles' blocks, but I can't find a way to do it.
I've been looking for such a tool for a long time but never found it... The debug options of twig are very limited, and there is no tool in the sf2 dev bar dedicated to it...
I always add twig or html comments on top of each of my templates to get an idea of where I am and why during development or on the final page.
You can try this code, it puts filenames in HTML like this:
<!-- START templatename.html.twig -->
...
<!-- END templatename.html.twig -->
I know, that it is not a good solution, but it is better than nothing.
not a problem when you are working in dev in app_dev.php
expand bottom SF toolbar, click on 200 status or on #your_rote_name
you will redirect to smt like localhost/_profiler/s0meha5h?panel=*
then click on left menu on TWIG then url will be like localhost/_profiler/s0meha5h?panel=twig
and you will see all templates like FolderYourBundle:Folder:twig_file_name.html.twig that loads one by one!