I just started on a Primefaces program. I want to display chronometer in a Datatable. I want to use setInterval for displaying a "real time chronometer". I got a Date object in the attribute synopticBean.enteredTime which I use for start counting.
But I don't know how to call a JavaScript function for displaying the chronometer.
<p:dataTable var="synopticBean" value="#{synopticLocationBean.synopticBeans}">
<p:column headerText="Family">
<h:outputText value="#{synopticBean.family}" />
</p:column>
<p:column headerText="id">
<h:outputText value="#{synopticBean.brNumber}" />
</p:column>
<p:column headerText="Target Time">
<h:outputText value="#{synopticBean.referenceTime}" />
</p:column>
<p:column headerText="Δ">
<h:outputText value="setInterval(function(){ alert("Hello"); }, 3000);" />
</p:column>
<p:column headerText="Elapsed Time">
<h:outputText value="#{synopticBean.enteredTime}" />
</p:column>
</p:dataTable>
The result I want it's a datatable where the two last columns display realtime chronometer that decrease and increase :
My datas are available with a java bean. The "Elapsed Time" column get a java Date like "Mon Jan 21 15:26:40 CET 2019". I don't know how to display a real time chronometer in each cell for the column. How can I set my java date to a setInterval method and display the "result" in a cell that I don't know the html's id?
To convert your above code into a working example you would do something like this,
<p:dataTable var="synopticBean" value="#{synopticLocationBean.synopticBeans}">
<p:column headerText="Famille">
<h:outputText value="#{synopticBean.family}" />
</p:column>
<p:column headerText="BT">
<h:outputText value="#{synopticBean.brNumber}" />
</p:column>
<p:column headerText="Temps cible">
<h:outputText value="#{synopticBean.referenceTime}" />
</p:column>
<p:column headerText="Δ">
<script type="text/javascript">
//<![CDATA[
setInterval(function(){ console.log("Hello"); }, 3000);
//]]>
</script>
<!-- You can add any HTML code needed to display the chronometer here -->
</p:column>
<p:column headerText="Temps Accumulé">
<h:outputText value="#{synopticBean.enteredTime}" />
</p:column>
</p:dataTable>
As stated in the comments you don't use h:outputText value for this - that's intended for fetching a backing bean value.
Also note that this will call setInterval for each and every cell in the Δ column - which I guess is what you want. Just replace the console.log call with the call for updating your chronometer and it should work.
As as side note - it might be prefered to update all chronometers with just one setInterval call instead of having one for every cell in the Δ column. In the end it depends on what you want to accomplish here.
The solution by #Kukeltje, I used the Primefaces extension, but I don't know how to start my counter by a value. I can have a date object or a millisecond as long type but I don't know how to use one of these two values can be the start value of my counter.
I add the following include to my JSF page :
xmlns:pe="http://primefaces.org/ui/extensions"
and to my pom.xml file :
<dependency>
<groupId>org.primefaces.extensions</groupId>
<artifactId>primefaces-extensions</artifactId>
<version>6.0.0</version>
</dependency>
So the table :
<p:dataTable var="synopticBean" value="#{synopticLocationBean.synopticBeans}">
<p:column headerText="Family">
<h:outputText value="#{synopticBean.family}" />
</p:column>
<p:column headerText="BT">
<h:outputText value="#{synopticBean.brNumber}" />
</p:column>
<p:column headerText="Target time">
<h:outputText value="#{synopticBean.referenceTime}" />
</p:column>
<p:column headerText="Δ">
<pe:timer
style="color:grey;"
forward="true"
format="HH:mm:ss"/>
</p:column>
<p:column headerText="Elapsed time">
<h:outputText value="#{synopticBean.enteredTime}" />
</p:column>
</p:dataTable>
Related
I have a problem in PrimeFaces Mobile with the DataTable and the event taphold.
problem:
If I use the event taphold in a datatable, the event occurs, before the row can be selected.
the desired behaviour:
the click or finger touch selects the row (visually through a different background color for the row too). The event taphold occurs, if I press long enough, additionally.
first ideas, to solve the problem
I think, the problem is, that for row selection the .mouseup()-event is responsible and not the mousedown()-event for example. So, I have to change the event, to select the row, before the taphold-event occurs. But I don't know how.
current source code:
<p:dataTable id="music_songs" var="music" value="#{musicPlayerBean.musicSongs}" selectionMode="single"
selection="#{musicPlayerBean.selectedMusicSong}" rowKey="#{music.id}" style="background: white;"
paginator="true" rows="25" tableStyleClass="ui-table-columntoggle" emptyMessage="keine Musik-Songs vorhanden">
<p:ajax event="taphold" oncomplete="alert('Hallo');"/>
<p:column headerText="Interpret" priority="1" sortBy="#{music.interpret}">
<h:outputText value="#{music.interpret}"/>
</p:column>
<p:column headerText="Titel" priority="1" sortBy="#{music.title}">
<h:outputText value="#{music.title}" />
</p:column>
<p:column headerText="Dauer" priority="2" sortBy="#{music.duration}">
<h:outputText value="#{music.durationAsString}"/>
</p:column>
<p:column headerText="Album" priority="2" sortBy="#{music.album}">
<h:outputText value="#{music.album}"/>
</p:column>
</p:dataTable>
Examples for mobile data tables on PrimeFaces-Website
Versions:
JSF 2.2
Java 1.7
Glassfish 4
PrimeFaces 5.2
I'm trying to use the count up feature of a script found here inside of a <h:dataTable>
Using JSF, I have an <h:dataTable> which displays timestamps from a database (this works). For each column, I want to display the timestamp and the time passed since that timestamp (using the script). I have the library loaded correctly but the counting is never displayed. I'm trying to use jquery as suggested.
<h:dataTable value="#{bean.list}" var="_item">
<h:column>
<f:facet name="header">
<h:outputText value="Column 1"/>
</f:facet>
<h:outputText value="_item.alertTime"/>
<div id="timethis">
</div>
<rich:jQuery name="timerstuff"
selector="#timethis"
query="$(#localform\\:timethis).countdown({since: _item.alertTime});">
</rich:jQuery>
</h:column>
</h:dataTable>
<h:dataTable id="merchantDataTable"
value="#{merchantManagementBean.merchants}" first="0"
rows="#{merchantManagementBean.rowsPerPage}" var="merchant"
styleClass="dataTable"
columnClasses="users-colMerchant, users-colMerchantDescr, nostyle"
rowClasses="oddRow, evenRow">
<h:column>
<f:facet name="header">
<h:panelGrid columns="1">
<h:selectBooleanCheckbox />
</h:panelGrid>
</f:facet>
<h:selectBooleanCheckbox value="#{merchant.selected}"/>
</h:column>
</h:datatable>
Yea so I have this code part and I need to make the main checkbox to make them all checked I can use Probably only Javascript based solution since communication with bean is going to server side.
Please have a look at the following posts:
How to create effective "select all" checkbox in JSF
how to create selectAll checkbox in JSF-2
Or you can approach this problem witj jQuery to select all checkboxes:
http://www.sanwebe.com/2014/01/how-to-select-all-deselect-checkboxes-jquery
How can i dynamically change the value of a h:dataTable? I have the following code (just a snippet):
<h:dataTable value="#{DataProvider.mapValues}" var="o" border="1">
<h:column>
<h:outputText value="#{o.key}"></h:outputText>
</h:column>
<h:column>
<h:outputText value="#{o.value}"></h:outputText>
</h:column>
</h:dataTable>
<h:selectOneMenu>
<f:selectItem itemLabel="Choose Language.."></f:selectItem>
<f:selectItem itemLabel="DE"></f:selectItem>
<f:selectItem itemLabel="CZ"></f:selectItem>
<f:selectItem itemLabel="EN"></f:selectItem>
<f:selectItem itemLabel="FR"></f:selectItem>
<f:selectItem itemLabel="ES"></f:selectItem>
<f:selectItem itemLabel="PT"></f:selectItem>
</h:selectOneMenu>
So, basically, when I choose a language from the SelectOneMenu, the dataTable should use different values (like "#{DataProvider.mapValues(en)"). To be clear: everytime I select a value from the Combobox, the dataTable should reload with an other value.
I guess this would work with JavaScript, but I don't know how exactly it has to be done.
Any help would be appreciated. Thanks!
EDIT: I have to use JSF1.2, so I can't use any built-in AJAX features.
Make DataProvider.getMapValues something like this:
private String selectedLanguage; // + getter and setter
private Map getMapForLanguage(String language)
{ ... }
public Map getMapValues(){
return getMapForLanguage(selectedLanguage);
}
bind the selectedLanguage to your h:selectOneMenu selected value and do an ajax update of h:dataTable upon selection like this:
<h:dataTable id="myTable" ... >
...
<h:selectOneMenu value="#{DataProvider.selectedLanguage}">
...
<f:ajax render="myTable"/>
</h:selectOneMenu>
I was looking through a number of websites, but i couldn't find out how to use a toggle panel to change the visibility of another element. Please see the example..
<rich:togglePanel switchType="client"
stateOrder="panelOneOff, panelOneOn">
<f:facet name="panelOneOff">
<rich:toggleControl>
<h:outputText value="Start"/>
</rich:toggleControl>
</f:facet>
<f:facet name="panelOneOn">
<rich:toggleControl switchToState="panelOneOff">
<h:outputText value="Close"/>
</rich:toggleControl>
</f:facet>
</rich:togglePanel>
<rich:effect name="hideDiv" for="toggleAccordingToTheTogglePanel" type="Fade" />
<rich:effect name="showDiv" for="toggleAccordingToTheTogglePanel" type="Appear" />
<div id="toggleAccordingToTheTogglePanel">
please show me on start and hide me on Close
</div>
What listeners will work to call the hideDiv() or showDiv() javascript functions so the DIV-Element at the end will appear or fade out?
update It be run on jboss 5.1 using richfaces 3.3.2
<rich:toggleControl onclick="hideDiv()">