I cannot figure out for the life of me how to add a custom class to a YUI datatable.
e.g.,
<table class="custom-class">...</table>
In YUI3 it's just a matter of doing:
var datatable = new Y.DataTable(...);
datatable.get('boundingBox').addClass('custom-class');
Related
I’m rewriting static menu to dynamic, since our customer wants to dynamically change the menu on the fly. Before that I had standard <p:menu> <p:menuItem> </p:menu> structure in my xhtml.
But now I have changed it to:
<p:menu model="#{pageTemplateView.menuModel}"/>
And I’m creating model in my backing bean like this:
DefaultMenuItem menuItem = new DefaultMenuItem();
menuItem.setIcon(item.getIcon());
menuItem.setTarget(item.getLink());
menuItem.setValue(item.getName());
But the problem is I don’t know how to add <pe:badge> component inside menu item from bean.
Before that I included badges to menus the following way:
<p:menuitem id="tasks_icon_menuitem_id" icon="fa fa-tasks" url="#">
<pe:badge content="#{badgeCountBean.badgeCount()}"/>
</p:menuitem>
So how do I add <pe:badge> to dynamically created menu in bean?
I'm using PrimeFaces 8
After few hours of testing and plying around I found the issue that prevents me from adding badge to default menu item.
The issue is when you try to add child to DefaultManuItem like this:
Badge badge = new Badge();
DefaultMenuItem defaultMenuItem = new DefaultMenuItem();
defaultMenuItem.getChildren().add(badge);
You get unsupported operation exception since DefaultMenuItem:: getChildren() is implemented like this:
public List<UIComponent> getChildren() {
return Collections.emptyList();
}
But I have found an ugly workaround for this issue. So I might share it and maybe well get to better solution eventuality.
In my xhtml I added empty menu and gave it fixed ID like this:
<!-- MENU PLACEHOLDER -->
<p:menu id="dynamic_menu_placeholder"/>
<!-- need to add dummy badge to xhtml otherwise it wont be displayed -->
<pe:badge/>
And then in my bean I got the component by ID and added UIMenuItem elements to it like this:
// get component by ID
UIComponent component = FacesContext.getCurrentInstance().getViewRoot().findComponent(":form:dynamic_menu_placeholder");
Menu menu = (Menu) component;
menu.getChildren().clear();
for (MenuItem item : menuItemList) {
// creating menu item
UIMenuItem menuItem = new UIMenuItem();
menuItem.setUrl(item.getLink());
menuItem.setValue(item.getValue());
menuItem.setId(... generated some id);
// creating badge
Badge badge = new Badge();
badge.setContent(...getBadgeCount()..);
// adding badge to menu item
menuItem.getChildren().add(badge);
}
// addin menu item to menu
menu.getChildren().add(menuItem);
PrimeFaces.current().focus method works with inputTexts but with a commandButton I see no results, alternative I can use executeScript but the idea is to use focus for this kind of requeriment:
This works:
PrimeFaces.current().executeScript("document.getElementById('frmAperturaCajaMasiva:btnAceptarAperturaCajaMasiva').focus();");
This works on inputTexts but not working on button:
PrimeFaces.current().focus("frmAperturaCajaMasiva:btnAceptarAperturaCajaMasiva");
Any idea why? its the same thing but different in both commands
This is the code of the button on the xhtml nothing fancy :)
<p:commandButton id="btnAceptarAperturaCajaMasiva"
value="#{etiquetasMsg.cerrar_caja}" styleClass="cds-icon-button"
icon="cds-icon aprobar"
disabled="#{aperturaMasivaMB.blBtnProcesar}"
title="#{tooltipsMsg.cierrecaja_masiva_cerrar}"
onclick="if(!confirmarSeleccionTabla(PF('dtbFrmCajaWv'),null)){ return false; }"
actionListener="#{aperturaMasivaMB.validarCierreCajaMasivo}"
rendered="#{adminRestriccionMB.validarRestriccion('BTN_CERRAR_CAJAMASIVO')}" />
Yes I know why. The focus method in PrimeFaces specifically excludes buttons it was intended to focus input fields. Here is the source code.
focus: function(id, context) {
var selector = ':not(:submit):not(:button):input:visible:enabled[name]';
Notice the "not(:submit):not(:button)" in the Jquery selector.
Source code:
https://github.com/primefaces/primefaces/blob/master/primefaces/src/main/resources/META-INF/resources/primefaces/core/core.js#L699-L728
I'm using p:steps as a workflow, it works well except active index doesn't have an URL attach
xhtml:
<p:fieldset legend="Etape" toggleable="true" toggleSpeed="500" style="height:110px;">
<p:steps model="#{etapeModel.model}" activeIndex="#{besoin.etape.code}"
styleClass="custom" readonly="false" />
</p:fieldset>
java code:
public EtapeModel(){
model = new DefaultMenuModel();
Map<String, String> params = FacesContext.getCurrentInstance().getExternalContext().getRequestParameterMap();
selected = BesoinService.get(Integer.parseInt(params.get("id")));
for(Etape e : Etape.values()){
DefaultMenuItem item = new DefaultMenuItem(e.getLibelle());
item.setUrl("besoinForm.xhtml?faces-redirect=true&i=1&id="+selected.getId()+"&etape="+e.getCode());
item.setId("etape"+e.getCode());
model.addElement(item);
}
}
I understand this behaviour, but what possibilities I have to attach an url on active index ?
Mojarra 2.2.0 and Primefaces 5.3
I don't use this component anymore, but best solution I found is to write a custom component based on Steps, a good example here
http://www.mastertheboss.com/jboss-web/primefaces/extending-primefaces-components
By extending Steps and StepsRenderer using this source and modify the way attribute "href" is write (and "class" too for thing like cursor:hover)
The calendar component gets hidden behind the accordion item, no matter what z-index value you assign to the component, be it for accordion/calendar it simply won't budge, can some one help me on this. I'm using RichFaces 4.2.0.
Sample code:
<h:form>
<rich:accordion style="z-index:10;" id="acrdion" switchType="client">
<rich:accordionItem id="acdItm" header="Overview:">
<rich:calendar value="#{bean.date}" datePattern="dd/M/yy"
id="Cal1" style="z-index:100;"/>
</rich:accordionItem>
</rich:accordion>
<h:form>
You can workaround this issue by overriding the rf-ac-itm-cnt class as follows:
<h:outputStylesheet>
.rf-ac-itm-cnt {
overflow: visible;
}
</h:outputStylesheet>
How to get the co-ordinates of a JSF component after onclick event ? I need to place an overlay just below an icon that was clicked.
Is there any such in-built facility provided by JSF rather than manually writing a javascript function for that ?
No, there isn't. The position is browser (client) dependent. In the client side there is also totally no means of JSF, it's all just plain HTML/CSS/JS. The location can only be extracted from the HTML DOM element. You'd have to pass it from JS to JSF or do the business job fully in JS instead of JSF.
As PrimeFaces ships with jQuery, your best way to retrieve the element position relative to the document is using jQuery.offset().
var $element = jQuery('#someid');
var offset = $element.offset();
var x = offset.left;
var y = offset.top;
// ...
In addition to BalusC's answer, here is an example, where a click on a component with id=placeholder (maybe a link or button) will open another component (id=menu) directly below the triggering component. If the mouse is moved away from the triggering component, the menu will disappear:
<script type="text/javascript">
jQuery(document).ready(function() {
jQuery("#placeholder").click(function(event) {
//get the position of the placeholder element
var pos = jQuery(this).offset();
var height = jQuery(this).height();
//show the menu directly below the placeholder
jQuery("#menu").css( { "left": pos.left + "px", "top": (pos.top + height) + "px" } );
jQuery("#menu").show();
});
// hide the menu on mouseout
jQuery("#placeholder").mouseout(function(event) {
jQuery("#menu").hide();
});
});
</script>
The component with id=menu can be a div or a jsf h:panelGroup or any other component. The style attribute with display: none will initially hide the component:
<h:panelGroup style="position: absolute; display: none;" id="menu">
<!-- content here -->
</h:panelGroup>
Make sure that the jQuery id selector gets the correct id of the component. E.g. if your elements are inside a form with id=form1, the jQuery call has to look something like this:
jQuery("#form1\\:placeholder").click(function(event)
Notice the double backslash.
I'd recommend using a JSF component library like RichFaces or IceFaces. Many of them have AJAX capabilities and JavaScript library integration, and therefore have components for doing that kind of thing.