My objective is to generate a graphic layout (made of Richfaces components) based on some input configuration (like an XML file) and display it in my web app. The layout is composed of graphic symbols representing various entities in the system: each symbol should be mapped to an entity in the system, in order to display its state. The XML configuration file is used to define the symbol connections and positions within the layout, and their mapping rules to an entity. How can I achieve this?
I was thinking to create a symbol library in a technology such as SVG, where you can define both the aspect and the behaviour, and then simply "wrap" each SVG symbol in a dynamically created richfaces component, which would allow me to handle both the user interactions and the mapping rules defined in the symbol. Unfortunately JSF/Richfaces don't support SVG images, therefore I would have to use plain HTML without Richfaces features.
Another way to achieve that would be to simply define generic symbols in the XML file, each one of them with an attribute specifying the related image, the mapping rule, etc., and then generate the corresponding richfaces component from within the web-app. By doing so, would I be able to then display all the symbols in the right position and therefore generate the complete dynamic layout?
Could you suggest a better approach? Thank you very much.
I believe that HTML5 has direct support for SVG images, however it is still an embedded object in regular HTML after all. This too is something I have been waiting for however I don't believe any of the current JSF2 component libraries have an offerring for this yet.
Here is a good explanation of a possible workaround:
Getting started with SVG graphics objects in JSF 2.0 pages
Potentially you could build a custom facelet component utilizing this workaround?
My thought though is that when your only tool is a hammer, everything looks like a nail. I would try to utilize an RIA (Rich Internet Application) technology better suited for display and manipulation of vector graphics like HTML5, Flash+Flex, Silverlight, etc..
Related
Does there exist a data (file?) format representing a resizable vector graphic that can be exported to iOS CoreGraphics AND be rendered on a Linux server? I've been considering SVG with this library, but I need support for text and element constraints (i.e. pinning elements to edges).
I am not aware of a file format that provides the functionality that you are looking for out of the box.
But you may want to consider using SVG in combination with Paper.js. In Paper.js you can add custom data to any item (http://paperjs.org/reference/item/#data). Using Javascript you can then interpret the data and use it for applying your constraints prior to rendering.
Please note that while Paper.js is quite good for doing layout of elements (applying your constraints should be easy) and it has SVG import and export, but it does not support the full SVG spec (especially filters are missing).
In HTML5, elements can have arbitrary metadata stored in XML attributes whose names start with data- such as <p data-myid="123456">. Is this part of the SVG spec too?
In practice this technique works fine for SVG docs in many places. But I'd like to know if it's part of the official SVG spec or not, because the format is young enough that there's still a lot of incompatibility between browsers, especially in mobile. So before committing to code I'd like know if I can expect future browsers to converge on supporting this.
I found this message from the working group mailing list saying they "expect [they] will" support it. Did this become official?
While other answers are technically correct, they omit the fact that SVG provides an alternative mechanism for data-*. SVG allows any attribute and tag to be included, as long as it doesn't conflict with existing ones (in other words: you should use namespaces).
To use this (equivalent) mechanism:
use mydata:id instead of data-myid, like this: <p mydata:id="123456">
make sure you define the namespace in SVG opening tag, like this: <svg xmlns:mydata="http://www.myexample.com/whatever">
EDIT: SVG2, currently W3C Candidate Recommendation (04 October 2018), will support data- directly (without namespaces, the same as HTML). It will take some time before the support is widespread though. Thanks #cvrebert for pointing this out.
The data-* attribute is part of HTML5. It’s not a generic XML attribute.
The current SVG W3C Recommendation is SVG 1.1 (from 2011-08). It doesn’t allow this attribute, as you can check in the attributes list.
The same is the case for the SVG 2 Working Draft (from 2012-08). Update (2015): It seems that it’s intended to support data-* attributes in SVG 2 (currently still a Working Draft).
data-* attributes on SVG elements are officially supported in the current draft of SVG2. See:
w3c/svgwg commit 1cb4ee9: Added SVGElement.dataset and allowed data-* attributes on all SVG elements.
ACTION-3694: Add "data-*" attributes notes to spec. (Created on: January 15, 2015)
RESOLUTION: We will reserve "data-*" attributes to be used in SVG content. The API for handling them is on Element. (from SVG WG Telecon on 15-Jan-2015)
https://lists.w3.org/Archives/Public/www-svg/2014Dec/0022.html
there is a more general mechanism.
svg supports desc elements which may contain arbitrary xml from other namespaces. link instances of this elements or child nodes from you own namespace by dependent ids or refid attributes.
this is the relevant part of the spec (5.4).
I would like to create a JSF web application to display a graphic structure (composed of hierarchical elements organised in a database) where, if possible, the user could eventually zoom in/out, add new elements...
But I haven't been able to identify a single JSF component (or compatible component) to help me do that.
This is what I would like : http://www.yworks.com/products/yfileshtml/demos/Complete/demo.yfiles.graph.orgchart/index.html
But it's not free and not in JSF.
I thought of the PrimeFaces mindmap component, but it is not compatible with IE8 and this is a requirement for my projet...
My second thought was to use RichFaces' Paint2D to manually draw info in rectangles and links between rectangles with calculated coordinates, but this seems a bit complex...
http://livedemo.exadel.com/richfaces-demo/richfaces/paint2D.jsf?c=paint2d
A final thought was to use CSS to display rectangles, but I can't display links and interact with the structure...
Any better idea ?
Thank you for your help !
OmniFaces has a component for creating a hierarchical tree.
Maybe you could use that to display a custom markup, and work out a way to manipulate it with Javascript, in order to get the behavior you want.
If that is not feasible, I'd suggest you to study a little bit of HTML5 Canvas, see what you can do with that. You can get inspired here checking out this is open source (GPL) HTML5 mind map app, the code is at GitHub.
I have a page I'd like to embed a news-feed widget into (so that the feed from some remote site will be displayed in my site).
While there are quite a few free news-feed widgets available out there (a partial list is here: http://allwebco-templates.com/support/S_script_newsfeed.htm), They all require insertion of complex code into the html page, while all the parameters are hard-coded into the generated code, which looks something like this:
insertedWidgetText = "<script id=\"scrnewsblock10795953\" type=\"text/javascript\">...script specific parameters go here...</script>"
let feedWidget = toWidgetBody [hamlet|#{preEscapedText insertedWidgetText}|]
This doesn't integrate well with Yesod's approach as it requires specifying to Hamlet that the content is preEscapedText, which in turn disables the ability to use Hamlet's processing to alter parameters of the widget dynamically (So in case I want the widget to use a different source, for example, I need to statically change the quoted text and cannot use Hamlet's variable substitution).
Of course I could do some text manipulation myself, tailor built for the widget I'm using, but that doesn't seem like the "right" solution (especially if I want to have the embedded text in some external file and not in the middle of my code as in the example above).
Can the above mentioned issue have a better solution than the one I thought about?
Is there an implementation of a news-feed widget in Haskell/Yesod that I can use as a plugin?
Note: I'm a very poor javascript programmer, but solutions in that direction are also welcomed.
Thanks,
I am using JSF 2.0 framework to build a web application.
I know how to handle java web application internalization (i18n) using ResourceBundle.
This approach is suitable when you have to work on single words or phrase.
But when you have an entire paragraph or a whole text whith formatting (blod, italic, images, etc), how can we handle i18n in this case? Because of formatting, I don't know if it will be a good idea to put that text in a properties file.
There is not really a standard for this. It's in general affordable as long as you don't put markup which represent layout in the resource bundle files. Elements representing layout are usually HTML block elements like <div>, <p>, <h1>, etc. So, you need to make sure that you restrict to using HTML inline elements like <b>, <i>, <img>, <span>, <br>, etc in properties files.