primefaces-extensions / primefaces-extensions Goto Github PK
View Code? Open in Web Editor NEWPrimeFaces Extensions
License: MIT License
PrimeFaces Extensions
License: MIT License
New version of Layout 1.8.5 @GedMarc
Based on https://github.com/serratus/quaggaJS
See: https://sipjs.com/
Doing some work on Apache Commons BeanUtils to clean it up I was using the same Eclipse formatter Maven plugin as here. Apache PMC Member suggested I switch to Spotless plugin https://github.com/diffplug/spotless.
It is great and allows me to replace the two current plugins we are using that this does the same thing but better:
You can run mvn spotless:check
to see the issues it wants to correct or fail on build.
And mvn spotless:apply
simply fixes all those problems! Now that we have a multi-module build I can enforce this in all projects with 1 config.
Switch to GitHub actions from Travis.
JS console will display:
Widget for var 'widget_xxx' not available!
It doesn't really break anything, but we should check for it.
Extend fileDownload tag, FileDownloadTagHandler, FileDownloadActionListener, StreamedContent, DefaultStreamedContent. The main goal is to generate a zip file of many StreamedContents.
Don't forget to check in action listener if response was completed. If yes ==> return from action listener. Call facesContext.responseComplete() (s. PF's FileDownloadActionListener) is not enough because events are queued and all action listeners are called in INVOKE_APPLICATION phase until the phase finished (regardless of set flags). At the end of each phase UIViewRoot.clearFacesEvents() is called, checks set flags and clears queued events if nessesary.
PF related bug http://code.google.com/p/primefaces/issues/detail?id=1656
By the way, iframe will not solve problem with ajaxified components. FileDownload cann't be ajaxified.
See: https://github.com/handsontable/dev-handsontable/issues/1893
Description
Do not use size()
or isEmpty()
for any child counting using getChildCount()
instead.
JFYI if you use getChildren().getSize() on a component, where childCount=0, a empty Child-List is created. So getChild() prevents unncessary list instances
Export built-in solutions for certain components like h:outputLink
or p:cellEditor
are very nice and can be enhanced by CustomExporter
.
ExportFunction:
It is not possible to write a custom exporter for any complex or composite type and exportFunction
of primefaces column lacks lacks support of alignment, styling, or potential future improvements like Number type exports (for excel).
It also does not supports an el expression like: #{el:getEnumLabel(varOrder.state)}
, which is a very common use case.
Idea
Give more control to the developer to define how to export in markup using a facet or new component.
With a export
component, styling could be overriden on cell level and alignment could also be defined which gives a flexible approach.
<p:column>
<!-- 1. use a facet -->
<f:facet name="export">
<h:outputText value="#{varOrder.timeRange.start}-#{varOrder.timeRange.end}"/>
</f:facet>
<!-- 2. export component - with optional column styles or type definition -->
<pe:export value="#{varOrder.timeRange.start}-#{varOrder.timeRange.end}" fontColor="#00ff00" align="center">
<!-- 2. a) or allow "complex" definition -->
<h:outputText value="#{varOrder.timeRange.start}-#{varOrder.timeRange.end}"/>
</pe:exporter>
<!-- complex composite which is not exported -->
<comp:timeRange value="#{varOrder.timeRange}"/>
</p:column>
Is your feature request related to a problem? Please describe.
It has been a few years since the underlying PDF.js lib has been updated under Document Viewer. There was an issue with fonts in a IFRAME but it was resolved recently.
problem:
if title attribute contains space, title of handle button will be breakdown in two part, and it's ugly on design
solution:
this problem will resolve by add "width: max-content" in .ui-slideouttab-handle css class
Add (auto)start attribute and start and stop functions to widget
Describe the bug
See Dependabot alert: https://github.com/primefaces-extensions/primefaces-extensions/network/alert/showcase/pom.xml/org.hibernate:hibernate-validator/open
Describe the bug
The CommandButtonSingleClick renderer appends new JavaScript code to the existing JavaScript code on each update. This increases the size of the DOM tree, and subsequently the data transmitted over the network, continually.
This behavior results, on complex pages, after a short while in multiple megabyte data per update/click.
Environment:
To Reproduce
Steps to reproduce the behavior:
Expected behavior
The size of DOM/transmitted data should be nearly constant even after ten updates.
Remove the CommandButtonSingleClickRenderer from your faces-config.xml to compare your results with vanilla primefaces.
JavaScript
With each update, the CommandButton onclick gets longer and longer with more disable/enable statements:
var w = PF('widget_frmTest_j_idt6_1_j_idt8'); if (w) { w.disable(); };
@jxmai looks like this has been a popular plugin request i wonder if we should just add it to the CKEditor by default?
Enhanced Image Plugin = http://ckeditor.com/addon/image2
Requests:
http://forum.primefaces.org/viewtopic.php?f=14&t=48571
Original PF issue: primefaces/primefaces#396
What about a new component which can markup any occurences of a word or a part of a word in a specified object(div, panel,...)? Same thing like the browser search function, but for specified containers. This would be great, especially in addition to filter in dataTable.
eg.
<p:mark styleClass="styleClassForMarkDown"
for=":form:searchContainer"
value="wordToSearch" />
This jquery component would be ideal: https://markjs.io/
Probably with Bootstrap (bootstrap.css) http://getbootstrap.com/css/#grid because it is more advanced than PrimeFaces Grid Layout. Requirements:
Describe the bug
After update to 8.0 to 8.0.4 the component Letter Avatar doesn't rendered correct! See above:
Reproducer
Use: <pe:letterAvatar value="#{twebusuariosTO.nomeCompleto}" size="1rem" rounded="false"/>
Environment:
To Reproduce
<pe:letterAvater/>
in some page!Sample XHTML
-Not necessary!
Sample Bean
-Not necessary!
PrimeFaces: 6.2.6, PrimeFaces Extensions: 6.2.7, JSF: mojarra 2.2, Server: jetty/9.4.11.v20180605
See also primefaces-extensions/primefaces-extensions.github.com#586
<pe:sheet>
component.ajax
listener for the change
event<pe:sheet>
...
<p:ajax event="change" global="false" listener="#{myBean.onSheetDataChanged}" />
...
<pe:sheet/>
On the client side, 3 new rows are created and displayed. However, when we retrieve the updates in the bean via org.primefaces.extensions.component.sheet.Sheet#getUpdates
, we only get one SheetUpdate
. All SheetUpdate
s for cell of newly created rows are missing. This results in inconsistencies between the client and server-side model for me.
As far as I can tell, this happens because a NullPointerException
was fixed in issue #586 by ignoring updates from cells of newly created rows.
Currently the default theme is Omega which is an old icon styled theme.
Default to modern theme Nova Light.
Set to "00:00" and submit. Fails both in production and when built from source.
We use TimePicker heavily in our apps and for new premium themes it doesn't look quite like it used to.
I am going to update the CSS to look great by default in Omega and Nova-Light themes. For all other premium themes you simply need to add this SCSS in your _extensions.scss provided by PrimeTek to have it styled for your theme.
/** PrimeFaces Extensions TimePicker used heavily in ExSchedule */
.ui-timepicker {
background-color: $panelContentBgColor;
.ui-timepicker-table {
background-color: $panelContentBgColor;
color: $textColor;
}
.ui-timepicker-title {
border: $inputListBorder;
padding: 0 1em;
}
.ui-timepicker-table td a {
width: 2em;
text-align: center;
&.ui-state-active {
color: $primaryTextColor;
background-color: $primaryColor;
}
&.ui-state-default {
border: 1px solid $inputBorderColor;
padding: 0.286em;
color: $textColor;
&.ui-state-active {
color: $primaryTextColor;
background-color: $primaryColor;
}
}
}
td.ui-timepicker-minutes {
padding-left: 4px;
padding-right: 4px;
padding-bottom: 4px;
border-left: 1px solid $inputBorderColor;
}
}
If using FontAwesome instead of PrimeIcons also add this.
.pe-timepicker-trigger {
.ui-icon-clock {
@include icon_override("\f017");
}
}
Seems that some attributes (closable, minSize, maxSize) for pe:layoutPane are not working if a layout is configured by options defined as attributes of layoutPane component. If a layoutPane is created via LayoutOptions as Java model it works.
Environment:
Expected behavior
It would be nice to also create a layout by options defined as attributes of pe:layoutPane.
Sample XHTML
<pe:layout id="documentLayout" fullPage="false"
stateCookie="false"
state="#{documentLayoutController.documentLayoutState}"
widgetVar="documentLayoutWidget">
<p:ajax event="resize" process="@this" update="@none"/>
<!--West pane-->
<pe:layoutPane id="westCnt"
position="west"
closable="false"
size="#{documentLayoutController.westSize}"
minSize="20%"
maxSize="70%"
rendered="#{documentLayoutController.layoutState.west}">
<p:outputPanel layout="block" id="westPane">
<h:form>
PF 9.0 has a PrimeFaces.createStorageKey
for creating a more unique cookie or local storage name. Use this in Layout where it used to create a cookie name.
I'm implementing an SPA (single page application) using the pe:layout component.
I'm using Primefaces 8 and Primefaces extensions 8
So the content of the layoutPanes need to be updated using ajax requests while the application runs.
So the whole construct looks more or less like that:
<h:form id="mainForm">
<pe:layout fullPage="true" id="layout">
<pe:layoutPane position="north">
</pe:layoutPane>
<pe:layoutPane position="west">
</pe:layoutPane>
<pe:layoutPane position="center">
<ui:include src="#{indexView.centerView}" />
</pe:layoutPane>
</h:form>
So now I want to update the center pane. I do that by updating the payoutPane element:
<p:menuitem value="User"
actionListener="#{indexView.showSettingsUser}"
update=":mainForm:center" />
When I do that, the center pane gets updated. But it gets moved to the top of the screen. Beeing displayed over the north pane.
So I try to update the whole layout component:
<p:menuitem value="User"
actionListener="#{indexView.showSettingsUser}"
update=":mainForm:layout" />
When I do that, absolutely nothing happns.
The only way that seems to work is updating everything at once:
<p:menuitem value="User"
actionListener="#{indexView.showSettingsUser}"
update=":mainForm" />
I was using pe:codeMirror with the autocomplete
feature via a bean method. The bean method returned several suggestions, including &&
. The problem was that this got displayed as &&
in the hint overlay from CodeMirror:
This is caused by the client script which evaluates the suggestions incorrectly. The fix #221 is a one-liner.
<pe:codeMirror id="input" value="#{model.customExpression}"
completeMethod="#{bean.completeCustomExpression}"
escapeSuggestions="true"
</pe:codeMirror>
public List<String> completeCustomExpression(CompleteEvent event) {
final List<String> suggestions = new ArrayList<>();
suggestions.add("&&");
return suggestions;
}
Based on this ticket reported to PF: primefaces/primefaces#6083
Modify the PrimeExt ResourceHandler to always add the extension version to URL's for cache busting and change it from v=
to e=
for extensions.
So for example this URL now becomes.
/primeext-showcase/javax.faces.resource/primeicons/primeicons.css.jsf?ln=primefaces&v=8.0&e=8.0.4
With the url displaying both versions ?ln=primefaces&v=8.0&e=8.0.4
This way it differentiates the two versions and it will cache bust if you update either PF or PF Extensions.
Is your feature request related to a problem? Please describe.
Currently the pe:documentviewer renders all possible buttons for pdf.js. Sometimes we want users to only use a subset of this buttons. It would be good to add a possibility to select which buttons are shown.
Describe the solution you'd like
It would be great if the pe:documentviewer tag gets a new attribute showButtons which can get a list of buttons that will rendered by pdf.js. E.g. <pe:documentviewer showButtons="download,print">
Wanted to float this out there to anybody watching about removal of the Extensions DataExporter.
PF DataExporter has most of the features now of this exporter and the code in PFE is both ugly and difficult to maintain.
Just wanted to get +1 votes for removal and -1 votes for leaving it in PFE.
NOTE:
I have an idea for a simple component without any gui but only javascript.
Preface:
When i restart, stop or reload my server on the client side the page can't be reloaded
and the user is currently not informed that the server is down at the moment.
So i tried the following to handle this special case which could also be
an improvement for other users:
1.) Try to ping the server via AJAX like the ping in the speedtest component.
2.) On Error remember that the server is currently offline and show a sidebar panel in fullscreen mode that the server is currently offline.
Retry with the ping as described on 1.)
3.) On Success check if the server was offline before. If so, now redirect to login page. If the server was not offline before retry with the ping as described on 1.)
Here is the sidebar i used in a general template:
<!-- Sidebar to show that server is currently offline -->
<p:sidebar widgetVar="SideBarServerOffline" fullScreen="true" baseZIndex="10000">
<div style="text-align: center;">
<h1 style="font-weight: normal;">
<p:outputLabel value="<span style='color:red;'>Server is currently offline.</span>" escape="false"/>
</h1>
<h2>
<p:outputLabel value="You will be redirected when server is online again." escape="false"/>
</h2>
</div>
</p:sidebar>
And here is the javascript which will do the action:
<h:outputScript>
var SERVERPINGTIME = 30*1000; // in ms
var SERVERTIMEOUTTIME = 10*1000; // in ms
var isServerOnline = true;
var ServerPingTimeout;
var RedirectURL = "/index?faces-redirect=true";
// Check server state
function CheckServerState() {
console.log("Checking current server state...");
// Try to ping server and get result or timeout:
$.ajax({
url: "/dummy.html" + "?id\x3d" + "1",
async: false,
cache: false,
type: "GET",
success: function(a) {
OnServerOnline();
},
error: function(a) {
OnServerOffline();
},
timeout: SERVERTIMEOUTTIME
});
}
function OnServerOnline() {
// Redirect to start page
if (isServerOnline == false) {
console.log(" Server is online again, try to redirect to '"+RedirectURL+"'");
window.location.href = RedirectURL;
}
// Re-Check
if (isServerOnline == true) {
console.log(" Server is online ...");
ServerPingTimeout = setTimeout("CheckServerState()", SERVERPINGTIME);
}
isServerOnline = true;
}
function OnServerOffline() {
console.log(" Server is now offline - retry ...");
isServerOnline = false;
// Show information that server is offline to user:
PF('SideBarServerOffline').show();
// Re-Check
ServerPingTimeout = setTimeout("CheckServerState()", SERVERPINGTIME);
}
// Execute script on page ready
$(document).ready(function()
{
// Install a timer to check the server's current state
clearTimeout(ServerPingTimeout);
ServerPingTimeout = setTimeout("CheckServerState()", SERVERPINGTIME);
});
</h:outputScript>
The only thing here todo is to create a new component which
is handling the parameters like SERVERPINGTIME, SERVERTIMEOUT, RedirectURL, ...
because it's currently tested in production and it works as it should ...
The should be an attribute to either use the system zone or the zone present in the time object
I don't understand how Visitor work.
Works as like I add disabled css for each uicomponent however I try disable only one from many.
Please visit forum topic
The current PF breadcrumb renderer does not follow the ARIA best practices, see:
With a custom renderer we could improve that. Only downside is, because of the different HTML, you would need to do the styling, as it differs per theme.
Based on 2 requests in PF...
primefaces/primefaces#67
primefaces/primefaces#40
OpenSteetMap: https://www.openstreetmap.org/#map=5/38.007/-95.844
In the newest component "Sheet" i am missing a ColType for handling button-actions
like Delete Row, Mark Row and so on.
I will eventually need this for our project because in the showcase
the example for using it with right-click is nice,
but not useable on e.g. a touch-screen
or a user who don't know how to use the right-click ;-)
Here would it always be better to support a button with a minimum height of
about 39px, a icon (font awesome if possible) and a listener or onclick .
Works in production, no longer when built from source:
Oct 04, 2020 11:34:47 AM org.primefaces.application.exceptionhandler.PrimeExceptionHandler logException
SEVERE: Unparseable date: "5/14/07 12:55:42 PM"
java.text.ParseException: Unparseable date: "5/14/07 12:55:42 PM"
at java.base/java.text.DateFormat.parse(DateFormat.java:395)
at javax.faces.convert.DateTimeConverter$FormatWrapper.parse(DateTimeConverter.java:489)
at javax.faces.convert.DateTimeConverter$FormatWrapper.access$100(DateTimeConverter.java:470)
at javax.faces.convert.DateTimeConverter.getAsObject(DateTimeConverter.java:437)
at org.primefaces.extensions.component.remotecommand.RemoteCommandRenderer.decode(RemoteCommandRenderer.java:77)
See: primefaces/primefaces#6254
Update the following components once that PR is merged:
See for example: https://primefaces.org/diamond/misc.xhtml
There the HTML for a button with a badge is:
<span class="ui-overlay-badge">
<button .../>
<span class="ui-badge ui-badge-warning">5</span>
</span>
To do so, I think we need to change from:
<p:button id="btnEmail" url="#" icon="fa fa-envelope" title="E-mail">
<pe:badge content="1" />
</p:button>
to:
<pe:badge content="1" severity="warning">
<p:button id="btnEmail" url="#" icon="fa fa-envelope" title="E-mail"/>
</pe:badge>
I'm not sure if this makes much sense... I guess it depends on what the plans with the badge will be in terms of the basic templates. Because the only reasons to use this component is that the styling is included. If styling is included you could simply create a composite or custom tag.
Add google place autocomplete component.
https://developers.google.com/maps/documentation/javascript/examples/places-autocomplete
Since we already have Geocoding and Rev. Geocoding from Google, we should also have other google maps features like Place autocomplete etc.
Hi,
It would be very great, if you can add the following component into PFE:
Here is one example, I guess there are also other JS available.
http://eragonj.github.io/Trip.js/
I would need this component to implement a Guide in my webpage, like you maybe know from intercom.
Please see as reference this video: https://www.youtube.com/watch?v=TyWefNd1Tlc
For me it´s also important
Properties
Events:
<p:repeat>
<pe:tourGuide>
<f:facet name="header">
List of Cars
</f:facet>
<h:outputText value="Text Text" />
<f:facet name="footer">
List of Cars
</f:facet>
</pe:tourGuide>
</p:repeat>
Many thanks
Is your feature request related to a problem? Please describe.
Based on this forum post: https://forum.primefaces.org/viewtopic.php?f=14&t=63179
Describe the solution you'd like
A way to set the font
and fontSize
of the editor without a custom config.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.