Theme
arya
luna-amber
luna-blue
luna-green
luna-pink
nova-dark
nova-light
saga
vela
QRCode
Play with the options values and generates nice QR Codes.
Render method:
canvas
image
div
Render mode:
normal
label strip
label box
image strip
image box
Size:
Fill color:

Source

<h:panelGrid columns="2" style="margin-bottom:10px" cellpadding="5">
    
    <h:outputText value="Render method: " />
    <p:selectOneButton value="#{qrCodeController.renderMethod}">  
        <f:selectItem itemLabel="canvas" itemValue="canvas" />  
        <f:selectItem itemLabel="image" itemValue="img" />  
        <f:selectItem itemLabel="div" itemValue="div" />  
    </p:selectOneButton>
    <h:outputText value="Render mode:" />
    <p:selectOneButton value="#{qrCodeController.mode}">  
        <f:selectItem itemLabel="normal" itemValue="0" />  
        <f:selectItem itemLabel="label strip" itemValue="1" />  
        <f:selectItem itemLabel="label box" itemValue="2" />  
        <f:selectItem itemLabel="image strip" itemValue="3" />
        <f:selectItem itemLabel="image box" itemValue="4" />
    </p:selectOneButton>
    <h:outputText value="Size:" />
    <h:panelGrid columns="1">
        <h:inputHidden id="txt2" value="#{qrCodeController.size}" />
        <p:slider minValue="50" maxValue="500" for="txt2"  style="width:200px"/>
    </h:panelGrid>
    <h:outputText value="Fill color:" />
    <p:colorPicker value="#{qrCodeController.fillColor}"/>
    
    <p:commandButton value="update" update="qrCodeElem"/>
    
</h:panelGrid>

<p:separator/>

<pe:qrCode id="qrCodeElem" 
           renderMethod="#{qrCodeController.renderMethod}" 
           renderMode="#{qrCodeController.mode}" 
           text="#{qrCodeController.text}"
           label="#{qrCodeController.label}"
           size="#{qrCodeController.size}"                 
           fillColor="#{qrCodeController.fillColor}"
           fontName="Ubuntu"
           fontColor="#01A9DB"
           ecLevel="H"                   
           radius="0.5"/>
            
Components and more
Use Cases
Documentation pe:qrCode
Attributes (move mouse over the names to see data types)
Name Description
id Unique identifier of the component in a namingContainer.
binding An EL expression referring to a server side UIComponent instance in a backing bean.
renderMethod Render method: canvas, img or div. Default value is canvas
renderMode Render method: 0: normal 1: label strip 2: label box 3: image strip 4: image box Default value is 0
minVersion Version min range. Default value is 1
maxVersion Version max range. Default value is 40
ecLevel error correction level: ''L'', ''M'', ''Q'' or ''H'. Default value ''L''
leftOffset offset in pixel if drawn onto existing canvas. Default is 0
topOffset offset in pixel if drawn onto existing canvas. Default is 0
size Size in pixel. Default is 200px
text QRCode content text. Default is empty
fontName QRCode content label font. Default is sans
fontColor QRCode content label color. Default is #000
label QRCode content label. Default is empty
fillColor Code color or image element. Default is #000
background Background color or image element, empty for transparent background. Default is transparent
radius Corner radius relative to module width: 0.0 .. 0.5. Default value is 0.0
quiet Quiet zone in modules. Default value is 0.0
mSize Label size percentage. Default value is 0.1
mPosX Label relative Y position. Default value is 0.5
mPosY Label relative Y position. Default value is 0.5
style CSS style(s) to be applied when this component is rendered.
styleClass Space-separated list of CSS style class(es) to be applied when this element is rendered. This value is passed through as the "class" attribute to the generated markup.
PrimeFaces Extensions Showcase - © 2011-2023,PrimeFaces: 13.0.0,PrimeFaces Extensions: 13.0.1,JSF: Apache MyFaces JSF-2.3 Core Impl 2.3.10,Server: jetty/9.4.36.v20210114,Build time: 2023-09-11 19:07