Resolving CSS property for node - javafx-2

maybe my google-fu is just letting me down today, but i have not been able to find a way to resolve arbitrary properties of nodes in order to obtain a style attribute. For instance, I'd like to be able to ask a node 'What is your value (if any) for -fx-fill?'.
A simple application example: I'd like to build a custom legend for a chart. To do so, I'd have to ask a rendered node for their fill property. I could, of course, use my knowledge of the default-colorN classes and simply look up the fill, but it feels like this would be a very bad approach as is violates the whole idea of CSS.
Thanks in advance.
BTW: JavaFX version is 2.1

I'd like to be able to ask a node 'What is your value (if any) for -fx-fill?'
There is no public API for that yet. It is planned to add such an API in a future release.
See RT-17293 CSS Style Object Model in Java.
For the 2.0 and 2.1 release, you could probably find the information using undocumented, deprecated impl_ methods, but I wouldn't advise that.
For now, I'd advise just using css chart styling where-ever you can and supplementing it with a sprinkling of dynamic node.lookup() code where it is impossible to achieve the styling using css.

Related

TYPO3 imageManipulation focusArea in Frontend

Does anyone know how to use the TYPO3 focus area in the frontend?
TCA imageManipulation
If I use the crop attribute in the fluid-template
<f:image width="555c" height="312c" src="{article.teaserFile.uid}" treatIdAsReference="1" crop="{article.teaserFile.originalResource.referenceProperties.crop}" />
i get a serialized string in data-focus-area.
<img data-focus-area="{"x":786.1145320197,"y":96.682142857143,"width":271.44177339901,"height":270.05062857143}" src="/fileadmin/_processed_/9/b/csm_testimage_0bfc7bc724.jpg" width="657" height="566" alt="" title="Testimage">
Does the data need to be used by a JS library? Can someone recommend a library here? Because i didn't find a recommendation for a library which can handle focus Area and the attribute data-focus-area.
Or do i have to write a viewhelper giving the attributes e.g. for "jQuery focuspoint" to data-focus-x, data-focus-y, data-image-w, and data-image-h.
No, you don't need to rewrite the ViewHelpers. (It would be nice, if in the future it could be a bit better extendable then now however.)
But you can implement the jQuery Focuspoint. The only thing you need to do, BEFORE you starts the focuspoint plugin, you can transform this array into the needed values with jquery.
An exmaple from the FocusPoint documentation
$('.focuspoint').focusPoint();
So before this line, you can just simply add the values from the array as an own data attribute.
The form is different, but the logic is the same. So you have the x, y, width and height values in the focus-area array.
This would not work with responsify.js for example. It needs bottom, top, left, right values.
So yes... it won't work out of the box.
But NO, you don't need to change the PHP part, because you can solve it on the front end. (You need jQuery plugin anyway, so making some code before using it is easier.)
Changing those ViewHelpers is also a possibility of course, but you really need to rewrite their functionality (also the renderImage function to be concrete) and if you want to update it to a later version it could lead to problems.

chosen jquery not show correctly

I use chosen 1.2.0 from nuget. My chosen.css file contains class like .chosen-container, .chosen-container. When i call my dropdownlist class using .chosen() function. Resulted css class will be chzn-container, chzn-container-multi. It causes display ugly. but functionality work. I have no error in browser console.
When i check another sites, both generated markup and chosen.css contains chzn-container, chzn-container-multi classes only.
Nuget adds only css. It is not add chosen.jquery.js. I don't know why.
The Nuget package named simply "chosen" does not, as the OP says, contain the .js.
You need to search for Harvest.Chosen. Hopefully this will help someone in the future.

Draw a graphic structure with JSF

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.

Richfaces and chart

One big piece missing on richfaces is a chart support. In my case what I need is a simple bar chart, with no interactivity to put into a jsf (richfaces 3) page, into a javaEE 6 web-application that must run only with opensource libraries
Anyone can give me some options?
thanks in advance!
note: I'm thinking on jfreechart, obviously, but what I need is something skinnable fast, with no pain
you could have a look on JSFlot .People say it works well with richfaces.
The JSFlot JSF chart library builds on top of the JavaScript Open
Source Project Flotr (a javascript plotting library based on the
Prototype Javascript Framework) to create stunning interactive charts
purely using JavaScript. The JSFlot charting library is simple to
install, easy to configure and easy to use in your custom application.
All of the applications dependencies (purely JavaScript related) are
included in the Jar file.
The goal of the JSFlot project is to support all the main features of
Flotr (Flotr has its own project page set up at
http://code.google.com/p/flotr/), while remaining easy and simple to
install and use.
We used JQPlot for charting in our project. Pluggable, Interactive and look good. Check them out:
JQPlot Bar Charts

How to generate and handle dynamic layouts and symbols in JSF/Richfaces?

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..

Resources