What should I use to view for nested data? - jsf

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

Related

Primefaces fetch dropdown values on show

I have a strange situation where one needs to dynamically populate dropdown values. The best idea I have come up with is creating a button, which triggers ajax request that fetches new dropdown values and on complete updates the dropdown and displays it.
I was wondering if there is any other more elegant way of handling situations like this. I am using the latest primefaces version 11.0.0.
I suggest to use the p:autoComplete component with the dropdown attribute set to true instead. It allows you to get the values when the button is clicked or when a query is typed. You don't need to take care of updating the component yourself. The only thing you need to do is have a completeMethod in your bean or have a completeEndpoint (REST endpoint).
With PrimeFaces 12 you can even (re)use a LazyDataModel as a suggestions provider.

p:menubar with both dynamic and non-dynamic submenus

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.

jsf add and remove the items from onel ist box to another list box

I am new to JSF and I wanted to create a small add and remove functionality to list box from another list box.
For example I have one list box and contains values A,B,C and when I select the value from list one and click add it should
be added to the right side of the list and should be removed from the right side list box and added bakc to the left side of the list box. How do create the layout for that? Any sample code is available for that? I am using JSF primefaces. please find the attached screen shot.
The "PickList" Primefaces feature is designed to fit exactly this requirement.
Take a look: Primefaces - PickList - Showcase
You can also use this one, builtin primefaces listboxes- http://www.primefaces.org/showcase/ui/data/pickList.xhtml

JSF input component for string lists?

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.

jsf popupwindow with a datatable

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.

Resources