I am writing a JSF app that's similar to the dukes-bookstore case study in the Java EE tutorial. In the dukes-bookstore example the h:graphicImage consists of 6 areas, each displaying a book in the index.xhtml page. The coordinates for each area are hardcoded in the Application Configuration Resource file faces-config.xml. The following snippet shows the declaration of the managed bean elements that capture the coordinates, shapes, and alt text for each area of the h:graphicImage.
<managed-bean eager="true">
<description>
Causes the default VariableResolver implementation to instantiate the
managed bean Book201 of the class components.model.ImageArea in application
scope if the bean does not already exist in any scope, and initialize the
shape, alt, and coords properties with the values specified by the
managed-property elements.
</description>
<managed-bean-name>Book201</managed-bean-name>
<managed-bean-class>javaeetutorial.dukesbookstore.model.ImageArea</managed-bean-class>
<managed-bean-scope>application</managed-bean-scope>
<managed-property>
<description>
Initializes the shape property of the managed bean Book201 with the value
rect.
</description>
<property-name>shape</property-name>
<value>rect</value>
</managed-property>
<managed-property>
<description>
Initializes the alt property of the managed bean Book201 with the value
Duke.
</description>
<property-name>alt</property-name>
<value>Duke</value>
</managed-property>
<managed-property>
<description>
Initializes the coords property of the managed bean Book201 with the value
specified by the value element.
</description>
<property-name>coords</property-name>
<value>67,23,212,268</value>
</managed-property>
</managed-bean>
...........................
...........................
The tutorial does not explain how the coordinates (67,23, 212,268) are calculated, so I am wondering how I can determine such coordinates for my application (h:graphicImage in my app consists of several auto-parts)?
Thanks
Related
I want to use an external SLD (hosted in my server) for symbolizing a raster in Geoserver.
The SLD below works if used as default style in Geoserver. If I copy it (changing some colors) and put outside Geoserver, save as SLD (or XML), and call the GetMap with SLD=https://my_server/mySLD.sld the map I get is still with the 'default, Geoserver' style
<StyledLayerDescriptor version="1.0.0"
xsi:schemaLocation="http://www.opengis.net/sld StyledLayerDescriptor.xsd"
xmlns="http://www.opengis.net/sld"
xmlns:ogc="http://www.opengis.net/ogc"
xmlns:xlink="http://www.w3.org/1999/xlink"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xmlns:se="http://www.opengis.net/se">
<NamedLayer>
<Name>my_schema:my_layer</Name>
<UserStyle>
<FeatureTypeStyle>
<Rule>
<RasterSymbolizer>
<Geometry>
<PropertyName>GRAY_INDEX</PropertyName>
</Geometry>
<Opacity>1</Opacity>
<ColorMap>
<ColorMapEntry color="#E69800" label="1" opacity="0.0" quantity="0.0"/>
<ColorMapEntry color="#1b4bde" label="Building" opacity="1.0" quantity="1.0"/>
<ColorMapEntry color="#bcbcbc" label="Ground cover" opacity="1.0" quantity="2.0"/>
</ColorMap>
</RasterSymbolizer>
</Rule>
</FeatureTypeStyle>
</UserStyle>
</NamedLayer>
</StyledLayerDescriptor>
shortly, WMS call would be like this (also tried withou STYLES param)
https://my_geoserver_url/wms?service=WMS&version=1.1.0&request=GetMap&layers=my_schema:my_layer&STYLES=&SLD=https://my_server/my_sld.sld&transparent=true&bbox=...&format=image/png
I did this for dynamic filtering in vectorial data and all good (SLDs are created dynamically via PHP), so I am wondering if the problem is that with RASTER data is not possible
You are trying to operate in library mode:
Style lookup in library mode operates as follows:
For each layer in the layers list, the applied style is either a named style specified in the styles list (if present), or the layerdefault style
For a named style, if the external style document has a <NamedLayer>...<UserStyle> with matching layer name and style name, then it is used. Otherwise, the style name is searched for in the
catalog. If it is not found there, an error occurs.
For a default style, the external style document is searched to find a <NamedLayer> element with the layer name. If it contains a
<UserStyle> with the <IsDefault> element having the value 1 then that
style is used. Otherwise, the default server style for the layer
(which must exist) is used.
So you either need to provide a named style in the styles parameter or make your style a default style by adding <IsDefault>1</IsDefault> to it.
I added the <Planet/> (from react-planet) to my App and the placement of some <Grid/> (from the Material UI) components changed.
While looking inside "Elements" in DevTool I noticed that divs inside the <Planet/> component have two classes jss3 and jss{i} where i is the next integral number. Each has different properties inside which overwrites every component in App that is using one of the jss{i} classes.
I also noticed that at first render i iteration, which applies to jss{i} used in newly created divs, starts from 1 and ends at 9 - because I have 6 planets so 1 for the main div, 2 for the central planet, 3 for divs' first class, and 4-9 for the six divs' second class. After the second render number goes from 10 to 18.
Screenshots of Elements at first render and second.
The class ={jss3 jss4} example
The class ={jss3 jss5} example
I assume that after creating planets by <Planet/>, whose children have two classes, the newly created class jss{i}, based on makeStyles-root-{i}, is overwriting properties of jss{i}, which is used somewhere else on page by <Grid/> components thus changing placement for the whole page.
Code where <Planet/> component is used:
return (
<Grid
item
container
justifyContent = "center"
style = {{ margin: 30 }}
>
<Planet
centerContent={
<Fab size="small" color="primary" aria-label="add" onClick={handleOpen}>
<AddIcon />
</Fab>
}
open={isOpen}
autoClose
orbitRadius= {50}
rotation = {90}
hideOrbit
friction = {20}
>
<div/>
<div/>
<div/>
<Fab size="small" color="primary" aria-label="addBarIcon" onClick={handleChartAddLineChart}>
<ShowChartIcon />
</Fab>
<Fab size="small" color="primary" aria-label="addBarIcon" onClick={handleChartAddBarChart}>
<BarChartIcon />
</Fab>
<Fab size="small" color="primary" aria-label="addBarIcon" onClick={handleChartAddPieChart}>
<PieChartIcon />
</Fab>
</Planet>
</Grid>
);
I tried putting only <div/> components inside <Planet/> but nothing changed. Changing from <Grid/> to normal <div/>, also didn't change anything.
Also, I tried to find a similar problem on StackOverflow or somewhere else but I am not sure how to describe the problem using proper keywords.
I am not sure if it is some bug in the react-planet library that makes react-planet and material-ui impossible to use together or if there is a problem inside my code.
I am not sure what was exactly the cause of the "multiply class in one component" bug, but I copied Planet.tsx and Orbit.tsx from the react-planet repository and changed some code, get rid of makeStyles and problem solved. It was probably of nested makeStyles in all of those components in react-planet which conflicted with each other at different component rendering levels causing it to render multiple times in one object.
Additionally, it was overriding Material UI components styles due to simplified class naming from MUI makeStyle to css class while building production (makeStyles-root-{i} -> jss{i}, makeStyles -> jss).
Overriding styles were probably caused by the react-planets dependency of the old/different MUI version than I have for the rest of the code which created two styles generators for each of those versions as mentioned in MUI FAQ. The first generator created class from makeStyle for all of my page naming every class jss{i++} for i starting at i=1 and ending when all classes are renamed, then the react-planet generator created styles for its objects naming every class jss{i++} starting from i=1 leading to overriding every previous class=jss{i} with new properties.
The 'component-alignment' is recognized, however not respected. Note the ':'-prefix, because this property has to be set on the parent Component.
<v-panel size-full>
<v-vertical-layout size-full>
<v-horizontal-layout width="100%">
<v-image source="theme://logo.gif" :component-alignment="MIDDLE_RIGHT" />
<v-menu-bar _id="menu" width="100%" :component-alignment="BOTTOM_RIGHT" />
</v-horizontal-layout>
</v-vertical-layout>
</v-panel>
As per the Vaadin book:
Certain settings, such as a component's alignment in a layout, are not done in the component itself, but in the layout. Attributes prefixed with colon (:) are passed to the containing component, with the component as a target parameter. For example, :expand="1" given for a component c is equivalent to calling setExpandRatio(c, 1) for the containing layout.
<v-vertical-layout size-full>
<!-- Align right in the containing layout -->
<v-label width-auto :right>Hello!</v-label>
...
What it does not say, at least for now, is that in order to get a MIDDLE_RIGHT alignment, you need to specify both of them individually, like:
<v-button _id="loginButton" style-name="primary" :middle :right>Sign in</v-button>
I have adapted a Pie chart JS object to use with JSF; in order to do so, I've created a custom component that outputs the appropriate markup and JS calls on the page, rendering the graph correctly. For reference's sake, this is the link for the tutorial I've followed for the JS part.
The next step is listening to clicks on the slices, and calling an action from a backing bean. The JS object for the chart already contains a placeholder function that listens to such clicks, so I believe the JS part of it is good. However, the JSF side bugs me still; I've read the Java EE tutorial, Jim Driscoll's blog posts, and all over the internet, and still can't get my head around it.
So, could anyone be so kind as to give a little example, of how I could bind a JS function call to an event listener in JSF, so that my backing bean would be nicely informed of which slice index had been clicked by the user?
It would be something close to:
function myChartObject() {
function onSliceClick() {
// This will somehow trigger JSF ajax event listener with slice data
}
}
class MyCustomChart extends UIComponentBase implements ClientBehaviorHolder {
// Is the decode() method the place to bind JS calls to JSF actions?
}
The closest I've found to my problem is something like this. However, I'd like to have this support in my own component, using the standard JSF API. Something perhaps close to this?
Thank you all in advance!
The JSF Javascript API to do AJAX calls is itself standardized (resource library "javax.faces", resource name "jsf.js") but adding full AJAX support in your own Java based custom component is a little elaborate.
The quickest way I can think of is following the blog by Jim Driscoll that you cited, and re-use the existing AJAX machinery offered by the <f:ajax> tag by wrapping your own Java based custom component in a composite component.
In Jim's example, I guess the following code from line 22 in his example is what you should render inside your onSliceClick function:
String click = behaviors.get("click").get(0).getScript(behaviorContext);
It would then look a little like this:
<ui:component
xmlns:f="http://java.sun.com/jsf/core"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:cc="http://java.sun.com/jsf/composite"
xmlns:cu="http://javaserverfaces.dev.java.net/demo/custom-taglib"
>
<cc:interface shortDescription="Some Description">
<cc:attribute name="render" required="false" />
<cc:attribute name="clickAction" method-signature="java.lang.Object action" required="true" shortDescription="The click action method" />
</cc:interface>
<cc:implementation>
<cu:custom id="customId">
<f:ajax render="#{cc.attrs.render}" listener="#{cc.attrs.clickAction}"/>
</cu:custom>
</cc:implementation>
</ui:component>
Note that I haven't tested this, but it's the general idea. Of course it's also possible to do all of it directly in Java code but that surely takes some more work.
It looks like you want the ability to encode ajax style behaviors in your java compiled code, while integrating this with a J2ee stack.
The framework that comes to mind is JBOSS's Seam
Seam integrates directly with JSF by design, (GWT is more of a lightweight, standalone, statefull web-application framework - it doesn't have a lot of embedded features for direct integration with JMS and other modern J2ee features)...
Seam directly supports GWT-style ajax enabled components.
There is a good tutorial here : http://www.ibm.com/developerworks/java/library/j-seam3/
According to the JSF 2.0 specification, there are three ways to use h:graphicImage depending on the way by which JSF generates the "src" attribute of the HTML tag:
<h:graphicImage value="#{resource['images:next.gif']}"/>
<h:graphicImage library="images" name="next.gif"/>
<h:graphicImage url="/resources/images/next.gif"/>
The specification states that the first two should render exactly the same markup. In my JSF implementation (MyFaces 2.0.2), here is the output HTML that is generated:
<img src="/AppName/faces/javax.faces.resource/next.gif?ln=images">
<img src="/AppName/faces/javax.faces.resource/next.gif?ln=images">
<img src="/AppName/resources/images/next.gif">
So it seems that if I use (name, library) or (value) attributes, the image is always going to be streamed to the client by JSF's servlet. If I use (url) attribute, I can give direct link to the resource with no servlet intervention.
For me, the second approach - direct server URL to resource, is faster.
In what cases the first approach - specifying (name, library) or (value) attributes, be used?
For me, the second approach - direct server URL to resource, is faster.
The difference should be totally negligible. The "direct server URL to resource" approach also uses a servlet (the default servlet which is provided by the container). Please show your benchmark results.
In what cases the first approach - specifying (name, library) or (value) attributes, be used?
It allows you for serving the resources from within a JAR file. It also allows you for a nicer way of dynamically switching the library in the following manner:
<h:graphicImage library="#{user.prefs.looknfeel}" name="next.gif"/>
The library should actually point to a common resource library with all CSS/JS/images, not to a specific "images" library.
Related questions:
How to reference JSF image resource as CSS background image url
Changing JSF prefix to suffix mapping forces me to reapply the mapping on CSS background images