# Dashboard basico \<p:knob

usamos un \<p:knob>![](/files/-Lc1X9Pvg76_JEZClHNK)

![](/files/-Lc1X9PxWqxRcOSqmQXt)

![](/files/-Lc1X9Pz52u4ob6gPSin)

## La pagina index.xhtml

* usamos \<p:knob> colocamos el value y el max con el mismo valor.

```java
<p:knob value="#{dashboardIndexController.totalarticulos}" max="#{dashboardIndexController.totalarticulos}"
            disabled="true"
            foregroundColor="red" backgroundColor="#00000"
/>
```

Codigo

```java
         <?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html>
<ui:composition template="/layout/template.xhtml" 
                xmlns="http://www.w3.org/1999/xhtml"
                xmlns:h="http://java.sun.com/jsf/html"
                xmlns:f="http://java.sun.com/jsf/core"
                xmlns:b="http://bootsfaces.net/ui"
                xmlns:ui="http://java.sun.com/jsf/facelets"
                xmlns:a="http://xmlns.jcp.org/jsf/composite/avbravo"
                xmlns:p="http://primefaces.org/ui">
    <ui:define name="content">
        <h:outputStylesheet library="bsf" name="css/thumbnails.css"/>

        <style>
            .thumbnail { max-width: 100%; }
            img.thumbnail:hover, img.thumbnail:focus {
                border: 1px solid;
                border-color: #428BCA;
            }
        </style>
        <b:form id="form"  prependId="false"  rendered="#{loginController.loggedIn}" onkeypress="if (event.keyCode == 13) {
                    return false;
                }">

            <h:graphicImage library="images" name="mys.png"  width="50" height="50"/>
            <hr/>

            <b:row>
                <!-- Row 1 -->
                <b:column span="4">


                    <h3><p:outputLabel value="#{msg['label.totalarticulo']}"/></h3>
                    <div class="knob-container  ui-corner-all">
                        <p:knob value="#{dashboardIndexController.totalarticulos}" max="#{dashboardIndexController.totalarticulos}"
                                disabled="true"
                                foregroundColor="red" backgroundColor="#00000"
                                />
                    </div>


                </b:column>
                <b:column span="4"> 

                    <h3><p:outputLabel value="#{msg['label.totalclientes']}"/></h3>
                    <div class="knob-container  ui-corner-all">
                        <p:knob value="#{dashboardIndexController.totalclientes}" max="#{dashboardIndexController.totalclientes}"
                                foregroundColor="blue" backgroundColor="#00000"
                                disabled="true"

                                />
                    </div>


                </b:column>

                <b:column span="4"> 

                    <h3><p:outputLabel value="#{msg['label.totalordenes']}"/></h3>
                    <div class="knob-container  ui-corner-all">
                        <p:knob value="#{dashboardIndexController.totalordenes}" max="#{dashboardIndexController.totalordenes}"
                                disabled="true"
                                foregroundColor="green" backgroundColor="#00000"
                                />
                    </div>

                </b:column>
             </b:row>
        </b:form>

        <a:denegado renderedcondition="#{!loginController.loggedIn}" />
        <br/><br/><br/>
    </ui:define>
</ui:composition>
```

## Controller

```java
/*
 * To change this license header, choose License Headers in Project Properties.
 * To change this template file, choose Tools | Templates
 * and open the template in the editor.
 */
package com.avbravo.store.controller;

// <editor-fold defaultstate="collapsed" desc="imports">
import com.avbravo.avbravoutils.JsfUtil;
import com.avbravo.store.util.ResourcesFiles;
import com.avbravo.storeejb.entity.Almacen;
import com.avbravo.storeejb.repository.AlmacenRepository;
import com.avbravo.storeejb.repository.ArticuloRepository;
import com.avbravo.storeejb.repository.ClienteRepository;
import com.avbravo.storeejb.repository.OrdenRepository;

import java.io.Serializable;
import java.util.List;
import javax.annotation.PostConstruct;
import javax.faces.view.ViewScoped;
import javax.inject.Inject;
import javax.inject.Named;
import org.bson.Document;
import org.primefaces.model.chart.PieChartModel;
// </editor-fold>

/**
 *
 * @author avbravo
 */
@Named
@ViewScoped
public class DashboardIndexController implements Serializable {

    // <editor-fold defaultstate="collapsed" desc="fields">  
    private static final long serialVersionUID = 1L;



    @Inject
    ClienteRepository clienteRepository;
    @Inject
    AlmacenRepository almacenRepository;

    @Inject
    ArticuloRepository articuloRepository;
    @Inject
    OrdenRepository ordenRepository;

    @Inject
    ResourcesFiles rf;

    Integer totalarticulos;
    Integer totalclientes;
    Integer totalordenes;
    // </editor-fold>

    /**
     * Creates a new instance of DashboardController
     */
    public DashboardIndexController() {
    }

    // <editor-fold defaultstate="collapsed" desc="init">
    @PostConstruct
    public void init() {

calcularTotales();
    } // </editor-fold>

    public Integer getTotalordenes() {
        return totalordenes;
    }

    public void setTotalordenes(Integer totalordenes) {
        this.totalordenes = totalordenes;
    }





    public Integer getTotalclientes() {
        return totalclientes;
    }

    public void setTotalclientes(Integer totalclientes) {
        this.totalclientes = totalclientes;
    }




    public Integer getTotalarticulos() {
        return totalarticulos;
    }

    public void setTotalarticulos(Integer totalarticulos) {
        this.totalarticulos = totalarticulos;
    }

    // <editor-fold defaultstate="collapsed" desc="metodo()">
    public void calcularTotales(){
        try {
            totalarticulos = articuloRepository.count(new Document("activo","si"));
            totalclientes = clienteRepository.count(new Document("activo","si"));
            totalordenes =ordenRepository.count(new Document("activo","si"));
        } catch (Exception e) {
            JsfUtil.errorMessage("calcularTotales() "+e.getLocalizedMessage());
        }
    }
    // </editor-fold>

}
```


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://avbravo-2.gitbook.io/trucosjakartaee/overview/primefaces/dashboard/dashboard-basico.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.
