My JSF Books/Videos My JSF Tutorials OmniFaces/JSF PPTs
JSF 2.3 Tutorial
JSF Caching Tutorial
JSF Navigation Tutorial
JSF Scopes Tutorial
JSF Page Author Beginner's Guide
OmniFaces 2.3 Tutorial Examples
OmniFaces 2.2 Tutorial Examples
JSF Events Tutorial
OmniFaces Callbacks Usages
JSF State Tutorial
JSF and Design Patterns 		JSF 2.3 New Features (2.3-m04)
Introduction to OmniFaces
25+ Reasons to use OmniFaces in JSF
OmniFaces Validators
OmniFaces Converters
JSF Design Patterns
Mastering OmniFaces
Reusable and less-verbose JSF code

My JSF Resources ...

 Java EE Guardian
Member of JCG Program
Member MVB DZone
Blog curated on ZEEF
OmniFaces is an utility library for JSF, including PrimeFaces, RichFaces, ICEfaces ...

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

[OmniFaces Utilities] - Find the right JSF OmniFaces 2 utilities methods/functions

Search on blog

Petition by Java EE Guardians

Twitter

luni, 26 octombrie 2015

[JSF Page Author Beginner's Guide] JSF <graphicImage> / HTML5 <img>

The <h:graphicImage> renders an HTML "img" element

The images used in these examples comes from different sources. The ones stored locally in /resources folder are highlighted in the below figure:


Common/basic usage  (I) - pointing an image via the name attribute (no library):

<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://xmlns.jcp.org/jsf/html">
 <h:head>
  <title>JSF graphicImage examples</title>        
 </h:head>
 <h:body>
  <h:graphicImage name="imgs/OmniFaces.png"/>
 </h:body>
</html>

This produce the following HTML code:
<img src="/JSFGraphicImageExamples/faces/javax.faces.resource/imgs/OmniFaces.png" />

Common/basic usage (II) - pointing an image via the name and library attributes:

<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://xmlns.jcp.org/jsf/html">
 <h:head>
  <title>JSF graphicImage examples</title>        
 </h:head>
 <h:body>
  <h:graphicImage library="default" name="imgs/OmniFaces.png"/>
 </h:body>
</html>

This produce the following HTML code:
<img src="/JSFGraphicImageExamples/faces/javax.faces.resource/imgs/OmniFaces.png?ln=default" />

Data flow in image:

More examples:
Add xmlns:pt="http://xmlns.jcp.org/jsf/passthrough" for pass-through attributes
Pointing an image via the value attribute

<h:graphicImage value="#{resource['imgs/OmniFaces.png']}"/>

This produce the following HTML code:
<img src="/JSFGraphicImageExamples/faces/javax.faces.resource/imgs/OmniFaces.png" />
Pointing an image via the url attribute

<h:graphicImage url="#{resource['imgs/OmniFaces.png']}"/>

This produce the following HTML code:
<img src="/JSFGraphicImageExamples/faces/javax.faces.resource/imgs/OmniFaces.png" />
Pointing an image located on the web

<h:graphicImage value="https://pbs.twimg.com/profile_images/606750829622751232/agAQx5KB_400x400.png"/>
<h:graphicImage url="https://pbs.twimg.com/profile_images/606750829622751232/agAQx5KB_400x400.png"/>

This produce the following HTML code:
<img src="https://pbs.twimg.com/profile_images/606750829622751232/agAQx5KB_400x400.png" />
<img src="https://pbs.twimg.com/profile_images/606750829622751232/agAQx5KB_400x400.png" />
Setting the width and height of an image

<h:graphicImage name="imgs/OmniFaces.png" height="70" width="70"/>

This produce the following HTML code:
<img src="/JSFGraphicImageExamples/faces/javax.faces.resource/imgs/OmniFaces.png" height="70" width="70" />
Styling images with inner CSS

 <h:graphicImage name="imgs/OmniFaces.png" style="border:1px solid #000;padding:10px;"/>

This produce the following HTML code:
<img src="/JSFGraphicImageExamples/faces/javax.faces.resource/imgs/OmniFaces.png" style="border:1px solid #000;padding:10px;" />
Styling images with CSS class

<h:graphicImage name="imgs/OmniFaces.png" styleClass="graphicImage-css"/>

This produce the following HTML code:
<img src="/JSFGraphicImageExamples/faces/javax.faces.resource/imgs/OmniFaces.png" class="graphicImage-css" />
Use a map image

<h:graphicImage name="imgs/OmniFaces.png" ismap="true" usemap="#omnifacesmap"/>
<map name="omnifacesmap">
 <area shape="rect" coords="0, 0, 37, 35" href="http://showcase.omnifaces.org/" title='OmniFaces Showcase'/>
 <area shape="rect" coords="38, 0, 76, 35" href="https://github.com/omnifaces/omnifaces" title='OmniFaces Source Code'/>
 <area shape="rect" coords="0, 35, 38, 72" href="http://omnifaces.org/docs/javadoc/current/" title='OmniFaces API Documentation'/>
 <area shape="rect" coords="38, 35, 76, 72" href="http://omnifaces.org/docs/vdldoc/current/" title='OmniFaces VDL documentation'/>
</map>

This produce the following HTML code:
<img src="/JSFGraphicImageExamples/faces/javax.faces.resource/imgs/OmniFaces.png" usemap="#omnifacesmap" ismap="ismap" />
Render JSF resource image in data URI format via OmniFaces, <o:graphicImage>

<o:graphicImage name="imgs/OmniFaces.png" dataURI="true"/>

This produce the following HTML code:
<img src="data:image/png;base64,iVBORw0KGgoAAAAN ... ASUVORK5CYII=" alt="" />
Render InputStream (or byte[]) property as resource image via OmniFaces, <o:graphicImage>

<o:graphicImage value="#{app.inputStreamImage}"/>

This produce the following HTML code:
<img src="/JSFGraphicImageExamples/faces/javax.faces.resource/ApplicationBean_getInputStreamImage?ln=omnifaces.graphic&amp;v=0" alt="" />

Render InputStream (or byte[]) property with SVG content as resource image via OmniFaces, <o:graphicImage>

<o:graphicImage value="#{app.svgInputStreamImage}" type="svg"/>

This produce the following HTML code:
<img src="/JSFGraphicImageExamples/faces/javax.faces.resource/
          ApplicationBean_getSvgInputStreamImage_svg?ln=omnifaces.graphic&amp;v=0" alt="" />

Render InputStream (or byte[]) property with SVG content as fragment via OmniFaces, <o:graphicImage>

<o:graphicImage value="#{app.svgInputStreamImage}" type="svg" fragment="svgView(viewBox(0,50,50,50))"/>
This produce the following HTML code:
<img src="/JSFGraphicImageExamples/faces/javax.faces.resource/ApplicationBean_getSvgInputStreamImage_svg?
         ln=omnifaces.graphic&amp;v=0#svgView(viewBox(0,50,50,50))" alt="" />

Render InputStream (or byte[]) property with SVG content as resource image data URI

<o:graphicImage value="#{app.svgInputStreamImage}" type="svg" dataURI="true"/>

This produce the following HTML code:
<img src="data:image/svg+xml;base64,PD94bWwgdm...g0KPC9zdmc+DQo=" alt="" />

The dummy bean used for the above four examples is:

import java.io.InputStream;
import javax.inject.Named;
import javax.enterprise.context.ApplicationScoped;
import org.omnifaces.util.Faces;

@Named(value = "app")
@ApplicationScoped
public class ApplicationBean {

 public ApplicationBean() {
 }

 public InputStream getInputStreamImage() {
  return Faces.getResourceAsStream("/resources/imgs/OmniFaces.png");
 }

 public InputStream getSvgInputStreamImage() {
  return Faces.getResourceAsStream("/resources/imgs/OmniFaces.svg");
 }
}

Note When not rendered as data URI, the InputStream or byte[] property must point to a stateless @ApplicationScoped bean (both JSF and CDI scopes are supported).
Cross-origin CORS requests for the element will not have the credentials flag set

<h:graphicImage url="e.g. dropbox link" pt:crossorigin="anonymous"/>
This can be useful per example if you have tainted canvases. You may have an image in a canvas and try to save the canvas content in local storage. Basically, post your images to a site that supports cross-domain sharing (like dropbox.com) and set crossorigin to anonymous.
Complete source code on GitHub.
See also Mkyong.com.
More resources on Constantin Alin, ZEEF page.
GraphicImage in JSF Extension on JSF ShowCase ZEEF page.
Publicat de la
Etichete: , ,

Niciun comentariu :

Trimiteți un comentariu

Abonați-vă la: Postare comentarii ( Atom )

JSF BOOKS COLLECTION

Postări populare

OmniFaces/JSF Fans

Visitors Starting 4 September 2015

Locations of Site Visitors