public class GraphicImage extends HtmlGraphicImage
The <o:graphicImage>
is a component that extends the standard <h:graphicImage>
with support for referencing an InputStream
or byte[]
property in the value
attribute, optionally as a data URI.
Set dataURI
attribute to true in order to render image in
data URI format.
<o:graphicImage name="icon.png" dataURI="true" /> <!-- JSF resource as data URI --> <o:graphicImage value="#{bean.icon}" dataURI="true" /> <!-- byte[]/InputStream property as data URI -->
This basically renders the image inline in HTML output immediately during JSF render response phase. This approach is very useful for a "preview" feature of uploaded images and works also in combination with view scoped beans. This approach is however not recommended for "permanent" and/or "large" images as it doesn't offer the browser any opportunity to cache the images for reuse, ~10KB would typically be the max even less so if there are more such images on the same page.
When not rendered as data URI, the InputStream
or byte[]
property must point to
a stateless @
GraphicImageBean
or @Named @ApplicationScoped
bean
(both JSF and CDI application scopes are supported). The property will namely be evaluated at the moment the browser
requests the image content based on the URL as specified in HTML <img src>
, which is usually a
different request than the one which rendered the JSF page. E.g.
@Named @RequestScoped public class Bean { private List<Image> images; // Image class should NOT have "content" property, or at least it be lazy loaded. @Inject private ImageService service; @PostConstruct public void init() { images = service.list(); } public List<Image> getImages() { return images; } }
@GraphicImageBean public class Images { @Inject private ImageService service; public byte[] get(Long id) { return service.getContent(id); } }
<ui:repeat value="#{bean.images}" var="image"> <o:graphicImage value="#{images.get(image.id)}" /> </ui:repeat>
A @RequestScoped
and @SessionScoped
bean would theoretically work, but this is wrong design
(a servlet is inherently also application scoped and stateless, not without reason). A @ViewScoped
wouldn't work because the image request doesn't share the JSF view state.
In case the property is a method expression taking arguments, each of those arguments will be converted to a string
HTTP request parameter and back to actual objects using the converters registered by class as available via
Application.createConverter(Class)
. So, most of standard types like Long
are already implicitly
supported. In case you need to supply a custom object as argument for some reason, you need to explicitly register
a converter for it yourself via @FacesConverter(forClass)
.
In case your "image" entity supports it, you can also supply the "last modified" property which will be used in the
ETag
and Last-Modified
headers and in If-Modified-Since
checks, hereby
improving browser caching. The lastModified
attribute supports both Date
and Long
as
timestamp in milliseconds.
<ui:repeat value="#{bean.images}" var="image"> <o:graphicImage value="#{images.get(image.id)}" lastModified="#{image.lastModified}" /> </ui:repeat>
When unspecified, then the "default resource maximum age" as set in either the Mojarra specific context parameter
com.sun.faces.defaultResourceMaxAge
or MyFaces specific context parameter
org.apache.myfaces.RESOURCE_MAX_TIME_EXPIRES
will be used, else a default of 1 week will be assumed.
When rendered as data URI, the content type will be guessed based on content header. So far, JPEG, PNG, GIF, ICO,
SVG, BMP and TIFF are recognized. If the content header is unrecognized, or when the image is rendered as regular
image source, then the content type will default to "image"
without any subtype. This should work for
most images in most browsers. This may however fail on newer images or in older browsers. In that case, you can
explicitly specify the image type via the type
attribute which must represent a valid file extension.
E.g.
<o:graphicImage value="#{images.get(image.id)}" type="svg" />
The content type will be resolved via Faces.getMimeType(String)
. You can add unrecognized ones as
<mime-mapping>
in web.xml
. E.g.
<mime-mapping> <extension>svg</extension> <mime-type>image/svg+xml</mime-type> </mime-mapping>
When serving a SVG image, you can use fragment
attribute to trigger
SVG view modes
(beware of browser support).
E.g.
<o:graphicImage value="#{images.get(image.id)}" type="svg" fragment="svgView(viewBox(0,50,200,200))" />
The bean class name and method name will end up in the image source URL. Although this is technically harmless and not tamperable by hackers, you might want to choose a "sensible" class and method name for this purpose.
Like <h:graphicImage>
, the value
attribute is ignored
when the name
attribute is specified (for JSF resources). And, the value
attribute of
<o:graphicImage>
does not support URLs anymore. For that, just keep using
<h:graphicImage>
or even plain <img>
.
GraphicImageBean
,
GraphicResource
,
DynamicResource
,
GraphicResourceHandler
,
DefaultResourceHandler
,
ExpressionInspector
,
MethodReference
HtmlGraphicImage.PropertyKeys
Modifier and Type | Field and Description |
---|---|
static Map<String,String> |
ATTRIBUTE_NAMES |
static String |
COMPONENT_TYPE |
COMPONENT_FAMILY
ATTRS_WITH_DECLARED_DEFAULT_VALUES, BEANINFO_KEY, bindings, COMPOSITE_COMPONENT_TYPE_KEY, COMPOSITE_FACET_NAME, CURRENT_COMPONENT, CURRENT_COMPOSITE_COMPONENT, FACETS_KEY, HONOR_CURRENT_COMPONENT_ATTRIBUTES_PARAM_NAME, VIEW_LOCATION_KEY
Constructor and Description |
---|
GraphicImage()
Constructs the GraphicImage component.
|
Modifier and Type | Method and Description |
---|---|
void |
encodeBegin(FacesContext context) |
void |
encodeEnd(FacesContext context) |
String |
getAlt()
Returns an empty string as default value instead of
null , so that the attribute is always rendered,
as mandated by HTML5. |
protected String |
getSrc(FacesContext context)
Returns the URL needed for the 'src' attribute.
|
getDefaultEventName, getDir, getEventNames, getHeight, getLang, getLongdesc, getOnclick, getOndblclick, getOnkeydown, getOnkeypress, getOnkeyup, getOnmousedown, getOnmousemove, getOnmouseout, getOnmouseover, getOnmouseup, getRole, getStyle, getStyleClass, getTitle, getUsemap, getWidth, isIsmap, setAlt, setDir, setHeight, setIsmap, setLang, setLongdesc, setOnclick, setOndblclick, setOnkeydown, setOnkeypress, setOnkeyup, setOnmousedown, setOnmousemove, setOnmouseout, setOnmouseover, setOnmouseup, setRole, setStyle, setStyleClass, setTitle, setUsemap, setWidth
getFamily, getUrl, getValue, getValueBinding, getValueExpression, setUrl, setValue, setValueBinding, setValueExpression
addClientBehavior, addFacesListener, broadcast, clearInitialState, decode, encodeChildren, findComponent, getAttributes, getChildCount, getChildren, getClientBehaviors, getClientId, getFacesContext, getFacesListeners, getFacet, getFacetCount, getFacets, getFacetsAndChildren, getId, getListenersForEventClass, getParent, getPassThroughAttributes, getRenderer, getRendererType, getRendersChildren, invokeOnComponent, isRendered, isTransient, markInitialState, processDecodes, processRestoreState, processSaveState, processUpdates, processValidators, queueEvent, removeFacesListener, restoreAttachedState, restoreState, saveAttachedState, saveState, setId, setParent, setRendered, setRendererType, setTransient, subscribeToEvent, unsubscribeFromEvent
encodeAll, getClientId, getCompositeComponentParent, getContainerClientId, getCurrentComponent, getCurrentCompositeComponent, getNamingContainer, getPassThroughAttributes, getResourceBundleMap, getStateHelper, getStateHelper, getTransientStateHelper, getTransientStateHelper, initialStateMarked, isCompositeComponent, isInView, isVisitable, popComponentFromEL, processEvent, pushComponentToEL, restoreTransientState, saveTransientState, setInView, visitTree
clone, equals, finalize, getClass, hashCode, notify, notifyAll, toString, wait, wait, wait
addClientBehavior, getClientBehaviors
public static final String COMPONENT_TYPE
public void encodeBegin(FacesContext context) throws IOException
encodeBegin
in class UIComponentBase
IOException
public void encodeEnd(FacesContext context) throws IOException
encodeEnd
in class UIComponentBase
IOException
protected String getSrc(FacesContext context) throws IOException
context
- The involved faces context.IOException
- When something fails at I/O level.public String getAlt()
null
, so that the attribute is always rendered,
as mandated by HTML5.getAlt
in class HtmlGraphicImage
Copyright © 2012–2016 OmniFaces. All rights reserved.