JSF / PrimeFaces compatibility with HTML5 Storage methods - html

Do JSF / PrimeFaces support well HTML5 Storage methods (sessionStorage / localStorage)?

Not out the box. But you can just wrap the necessary HTML/JS code in custom JSF components. One of our previous interns have done that. You can find it in this Google Code repository. Check the POC-SessionStorage part for the source code. You can find a writeup in this thesis.
To the point, it's merely a matter of generating the right HTML/JS code and hooking on JSF ajax events.

Related

If HTML Imports are dead/deprecated what's the best way to import your web component (X-Tag) template?

I'm working on my first X-Tag application and on it's page it says it's meant to work with Web Component API's such as 'Custom Elements, Shadow DOM, Templates, and HTML Imports'.
I've started working on my templates, but what's the best option to import them, now that HTML Imports have been deprecated?
2019 Update
Native implementation of HTML Imports will be removed from Chrome 73 so it is now recommended to use native fetch(), or third-party libraries.
Obsolete answer
AFAIK, HTML Imports have not been deprecated (or is it new?). It's only Mozilla who said it won't implement it for Firefox. But the polyfill is still available, and supported.
Since ES6 Modules are not implemented yet, I would say HTML Imports are still the best option (it's the one I chose) as they are very easy to use and work well (Polymer uses them extensively).
Instead you can try RequireJs or implement your own module loader (with XMLHttpRequest).
I don't recommend you to use a ES6 Module Loader polyfill as they are only at experimental stage.

how to drag and drop css file in eclipse?

I'm new to elipse php. i have used dream viewer for my php development before moving to the eclipse. So, i need to know when i drag and drop the css file into html editor, it needs to auto genarate the <link> tag for that css file. It worked with dream viewer. But its not working with eclipse. And, also when i need to use css classes inside html tag it needs to type the css class name.But, instead that i need to know how to config that to all the css class as suggestion for html tags, like in dream viewer and netBeans.
The text DnD (Drag and Drop) feature (initially introduced by bug 11624 in 2007) has been slowly extended to various editors, as reported by the bug 231294:
Tested in EclipsePdt-2.2.0.v20100427
Verified fixed for:
PHP files
JS files
Still reproducible in:
CSS files
HTML files
XML files (source view)
So it is still "work in progress".
The relevant blocking issues are:
bug 178104: [DND] Need to revisit dnd API to allow multiple drop targets
bug 173405: Make use of IDragAndDropService (Show Votes)
bug 195655: Drag'n'drop selected text
First of all Eclipse is not an IDE, it's a platform you can build IDEs (or any other application). There are several implementations for different languages. Most popular one which is actually the origin of Eclipse is Java IDE. There is also a plugin/feature for PHP development, called PDT.
DreamViewer is a specialized WYSIWYG editor for web development (mostly around HTML/CSS/Javascript) that includes support for different web scripting languages. It has some special properties as you mentioned, that can create a link element when you DnD.
What you can do is request a new feature from PDT team, that creates a link element to the dropped file inside a HTML document.

Polymer in a Chrome packaged app

With the new Material Design released by Google and Polymer being one of the best, if not only, libraries to create such a design with ease, is there anyone to develop a Chrome Packaged App using the library to get the Material Design look it provides? Currently, it gets scripted block by Google's very strict CSP
Check out Vulcanize: http://www.polymer-project.org/articles/concatenating-web-components.html
It's a build tool for crushing HTML imports into a single file. It also has a --csp option that moves <script> into its own file. This will make CSP happy.
We're working on a template for Polymer Chrome App in the Chrome Dev Editor:
https://github.com/dart-lang/chromedeveditor
I'll update this thread once the template is available. This should make Polymer dev in a Chrome app a lot easier.
Here is another option.
If you're big fan of Dart language, you can use https://github.com/sunglim/csp_fixer package.
This package has a function to strip <script/> and create external js file.
Investigating ebidel response about vulcanize, I found that polybuild could be even more easy if you dont want so many extra options.
https://www.polymer-project.org/1.0/docs/tools/advanced#build
Also found this project on github that uses vulvanize with --csp option.
https://github.com/PolymerLabs/polymerchromeapp

HTML5 Facebook Like Box in Joomla Custom HTML Module

I'm using the HTML5 code for the Like Box on my website: http://new.woodypointcomms.com.au. For some reason the faces part is displaying some people multiple times. Can anyone tell me why this might be happening?
You might try a pre-built module version instead of the direct FB widget. Joomla filters HTML content [depending on your settings] which may cause issues. Also try without caching options [Global Configuration] if you've enabled any.

Getting started with SVG graphics objects in JSF 2.0 pages

What I want to do is create web pages with interactive SVG content. I had this working as a Java desktop application using Batik to render my SVG and collect UI events like mouseclick. Now I want to use those SVG graphics files in my JSF (Primefaces) web application in the same way.
Trying to get started, I found this didn't work:
<h:graphicImage id="gloob" value="images/sprinkverks.svg"
alt="Graphic Goes Here"/>
I don't mind doing some reading to get up the learning curve. It was just a bit surprising that some google searches didn't turn up anything useful.
What I did find suggested that I would have to do this with the f:verbatim tag as if I were hand-coding the HTML. I would then have to add some script to capture the SVG events and feed them back into the AJAX code. If I have to do all that I will, but I was hoping there would be an easier and automated way.
So the questions are:
How to get the image to render in the first place?
How to get the DOM events from the SVG portion of the page back to the backing beans?
Much thanks for any pointers.
How to get the image to render in the first place?
The <h:graphicImage> just renders a HTML <img> element. This doesn't work for SVG objects in current browsers. You need <object type="image/svg+xml">. Since JSF 1.2, there's no need for the <f:verbatim> ugliness. On Facelets you can just inline EL in plain HTML like so:
<object type="image/svg+xml" data="#{bean.svgUrl}">
The standard JSF implementation however doesn't offer an UI component which renders an <object>, so you have got to do it the plain vanilla HTML way. I've checked at PrimeFaces, OpenFaces and RichFaces, but no one offer a component yet which is targeted on embedding SVG objects. PrimeFaces has a <p:media> and RichFaces an <a4j:mediaOutput> for movie objects, but that's it.
How to get the DOM events from the SVG portion of the page back to the backing beans?
Your best bet is to write some JavaScript which delegates to a hidden JSF ajax form. Write the necessary data to the hidden fields and trigger the <f:ajax> change or action. You can find a similar example in this answer.
You could try some kind of mix between ItsNat and JSF, for instance using an iframe to contain ItsNat generated markup containing SVG. ItsNat provides many options to integrate SVG in web applications, pure SVG or SVG inline in HTML, including SVG events and Batik (by the way SVG events in Batik applet are going to be fixed in ItsNat 1.1).
Idea: use a session attribute to share a bridge object between JSF and ItsNat