I am currently trying to create a p:menubar which has one dynamically created submenu, but all the other submenus should be normally declared in the xhtml. Sadly I couldn't find any information on how to do so, as it seems that you always have to create a MenuModel and use that as the model for a complete p:menubar.
When just using two separate menubars it is possible to have multiple submenus open at the same time, which leads to them overlapping. And also the spacing is wrong then.
EDIT: I can't use JSTL, so the solution with c:forEach is not possible.
It has to be dynamic because the items are loaded from the database on each request.
EDIT 2: I could use JSTL, but I still don't really grasp how this could best be accomplished. I wan't to have a menubar with some submenus being normal static ones, but one submenu is built dynamically in the code (for every request, nothing with ajax). This dynamic submenu however has multiple child submenus which have their own children in turn, so in theory I would have to somehow iterate recursively over all children.
I am using Primefaces 8.0 and JSF 2.2
Thank you Kukeltje for answering my questions, I now ended up using c:forEach like in the linked post.
Related
I want to list the faculties at the university.Then I want to list the departments at the selected faculty,then I want to list the lessons at the selected department.
Faculties>|selected faculty|>departments>|selected dept|> list of lesson
What should I use to view for this structure?Which datatable/uicomponent is more suitable for me? I use Primefaces 5.0 in the view layer.
Datatable
You will have to implement some listeners (i.e. to fetch your next list based on the selected value) but that won't be a tough task since PrimeFaces datatables provide selection features (row click, button, ...) Just look at the showcase links below to get an overview.
Showcase:
http://www.primefaces.org/showcase/ui/data/datatable/basic.xhtml
Master Detail
This is part of Primefaces Extension but seems to fit your needs because most of the logic is ready to use out of the box (ajax: update list view, update breadcrumbs, ...)
Showcase: http://www.primefaces.org/showcase-ext/sections/masterDetail/basicNavigation.jsf
Tree
Either horizontal (http://www.primefaces.org/showcase/ui/data/htree/basic.xhtml) or vertical (http://www.primefaces.org/showcase/ui/data/tree/basic.xhtml). If you want to display your data within a table, consider using the TreeTable (http://www.primefaces.org/showcase/ui/data/treetable/basic.xhtml).
However this will require to handle a TreeNode and it will, IMO, be way more difficult to build the TreeNode dynamically
I'm interested is it possible to create tabs with Primefaces using this example?
The idea is to create dynamically loaded tabs and when I switch between pages to display "Loading" at the top right of the page. What are the usual ways is this case?
The example you reference in your question carries the answer to the question. Generally, you have two options
Primefaces ajaxStatus component is designed specifically for your use case and is also the same component used in the dynamic tab sample you linked (albeit the PF team neglected to reference/declare it in the sample markup for that example). It's the same component that is used to generate the "loading" pinwheel you see in that example
A more powerful/exotic option is the blockUi component that will achieve the same effect, albeit with a little more in terms of options and visual effect.
I'm looking for a ready made, freely available component that provides the following features:
editing list entries
deleting entries
adding a new entry - possibly invoked multiple times
bind to property in managed bean of type List, or similar
optional: reordering entries
optional, simple: allow verification that at least one element is entered (required="true"? required="1"?)
optional, better: restrict by minimum and maximum allowed number of elements
The simplest way to allow editing entries would be to represent them as input element. Preferably the element won't need to sync to the server for every change in the number of elements.
Alternatively: is there a trivial way to create or compose such a component oneself?
If this if of importance: currently I'm using Richfaces 3.3.3 and MyFaces 2.0.
Edit: The component is expected mostly to be used for creating new lists from scratch, so that should be as simple for the user as possible. Preferably just tabbing to the next empty input element automatically created at the end of the list. I'd like to use the component for editing these lists, too, but that feature is expected to be used much less often.
You could take a look at Primefaces p:collector. The example in the Primefaces showcase is a good starting point. It can be used for adding elements to a list and for editing and removing these elements.
Probably the simplest way that I would know of going about almost all of these is the PrimeFaces dataTable component. With the exception of adding and deleting entries inline, all of this comes out of box. Deleting entries can be as simple as adding a delete button in a row and adding entries can be done through invoking a modal dialog with a form to create a new entry, add it to the backing bean list for the table, then asynchronously updating the dataTable.
http://www.primefaces.org/showcase/ui/datatableHome.jsf
It really does seem to be the most fully featured JSF dataTable component out there.
I have a form which one of it's fields is a code and description, also a button for opening a popup window that contains a list of all of the available codes.
when the user double clickes a row from that table i want to set these values to the code and description. - how can this be done?
Another question, I want to create this popup and table to be initialized dynamically - by that i mean that if i have a few forms in my application, when ever i have a field which has a description i want to be able to open this popup and to see the available list for that field. (every field can be from a diffrent table). is it possible to create something like that? if so, how?
Any help will be appritiated,
Thank's In Advance.
Yes, it is possible. Even more, many component libraries have ready to use popup/dialog components, such as RichFaces with <rich:popupPanel> and PrimeFaces with <p:dialog>.
If you do not want to use a component library for some reason, you would need to create a custom component for this which generates basically an absolutely positioned HTML <div> element with a CSS overlay which get shown/hidden by JS on a particular click/action. The HTML/CSS/JS part should be relatively simple if you are familiar with those languages. The JSF part is somewhat hard if you have never created a custom component before, but it should be possible with a composite component as well, so you could also just create one with pure XHTML. The updating/refreshing can just take place by the usual <f:ajax> means.
I have links and pictures related to these links on my page. I want to change the pictures everytime when onmouseover event occurred in the links. I want to do this in JSF.
A lot of Thanks to everyone.
You are looking specifically for JSF to do it, or you are open to other Javascript frameworks that provide a slick and easy solution on this? For example Jquery and Dojo etc may be easy to incorporate in your application and will give Rich UI effects.
On the other hand if you are looking at JSF specifically for these UI effects than probably I can try to think of some ways and let you know.
JSF isn't designed directly to do this; It's designed to give you the tools to do this yourself. In order to do this you would need to create a custom JSF component to do this and you would use Java script to do it.
You could possibly find a JSF framework that does this already (a4j, IceFaces, etc.) but this is such a simple and well documented JavaScript thing that just tossing a little Java script among your JSF is perfectly acceptable. However, if you don't want to reinvent the wheel, take a look at those other options.
Javascript solution:
Define onmouseover event on the commandLink tag calling some kind of javascript you may give link address from like onmouseover="doSomething('addressOfImage')" then in doSomething javascript method, first find the image, then set src attribute of a default image to given address.
JSF Solution:
You might want to use a4j for this.
Add a4j:support to link for onmouseover event then just rerender graphicImage component ofcourse you need to give value of graphicImage dynamically. There is an example of using a4j support below. You can add this a4j:support between your link tags for mouseonover event. Then manage everything on backing bean to handle which image to be displayed.
example
<h:graphicImage id="imageToBeRendered" value="#{myBean.imageAddress}"/>
Just google a4j if you have no idea.