I need to draw a table with a column and a dynamic number of rows depending on a number of bills that I file with JSF without using an extension as PrimeFaces.
I've been looking for how to use the component h:panelGrid with h:panelGroup inside for bills without finding a solution.
welcome your suggestions
If you want to create a table of divs, one way would be to use iterating tag :
View :
<ui:repeat value="#{bean.rows}" var="row">
<div>
#{row.data}
</div>
</ui:repeat>
Bean :
public List<YourObject> getRows()
{
return this.rows;
}
This is only a draft, but it show you the way. If you add more informations how your data is constructed, It will be easier to give a more detailed answer.
Related
I'm trying to create a generic pageable table that will display any entity from database. I'm using annotations and reflection for that purpose. On the java side everything works fine, however I can't manage to create a view for my table. I tried two approaches, with c:forEach and ui:repeat:
Requirements for the view:
Fixed amount of records should be displayed on each page (eg. 10)
Components for browsing and editing table columns should be generated automatically based on viewed field type (field annotated in hibernate entity)
Additional column with actions should be added (removing, saving, filtering, adding entities)
Additional row for filtering and adding fresh entities should be added above table header
Each column has to be sortable
c:forEach approach problem:
When changing between pages that have different number of records, then proper records are displayed but number of rows is the same like on the previous page. If previous page had less records than next page will have less records than it should have and if previous page had more records than next page will have more records than it should have. However when I refresh the whole site on the given page everything renders properly.
On the first picture you can see, when I go to the last page unnecessary records are generated to match previous page size. On the second picture, page size is truncated to the last page size.
Table body code:
<tbody class="lot">
<c:forEach items="#{cc.attrs.wflBean.searchProvider.cells}" var="row" varStatus="rowStatus">
<tr>
<c:forEach items="#{row.cells}" var="cell" varStatus="cellStatus">
<td style="text-align: #{cell.alignment}; vertical-align: bottom;">
<h:commandLink action="#{cc.attrs.wflBean.editEntity}" value="Edit" styleClass="none"
rendered="#{cc.attrs.wflBean.isExternalEditSupported and cc.attrs.wflBean.canEdit}">
<f:setPropertyActionListener target="#{cc.attrs.wflBean.currentEntity}" value="#{cell.entity}"/>
</h:commandLink>
<!--TODO: cellIndex will not work properly for more then 10 columns/rows-->
<comp:pagableTableCell wflBean="#{cc.attrs.wflBean}" cell="#{cell}"
cellIndex="#{cellStatus.index}#{rowStatus.index}"
canEdit="#{not cc.attrs.wflBean.isExternalEditSupported and cc.attrs.wflBean.canEdit}"/>
</td>
</c:forEach>
...CODE FOR ADDING ADDITIONAL ACCTIONS...
</c:forEach>
</tbody>
pagableTableCell is a custom component that renders proper component for editing cell value it is done with c:choose/c:when/c:otherwise tags. When changing page, the cells are retrieved. Its done during RESTORE_VIEW and RENDER_RESPONSE phase. Cells for new page are recalculated and returned properly during RENDER_RESPONSE phase. Also, I read that c:forEach tag is evaluated during build view phase but I don't see what javax.faces.event.PhaseId is that? Page is set by another custom component and it is done properly right before RENDER_RESPONSE phase.
ui:repeat approach problem:
With this approach I replaced c:forEach with ui:repeat and c:choose/c:when/c:otherwise with ui:fragment but then, I can't evaluate EL expression within id attribute, to make it unique, for date component that you can see on images above. Unique id is required for date component to work properly. Is there any way to manually generate component id when using ui:repeat?
Overall I don't know how should I approach this problem. c:forEach seems to work better for me, at least table is usable. Could you advise me how to fix one of this problems?
Thanks,
I have a long text to display in a struts2 display:column. Thus, I truncate since it's not that important. How do I decorate each of those cells with a regular html tooltip (title/alt) when the cursor is positioned over that cell? This way I could still display the complete text to the user on demand.
Could I extend the display:column tag?
<display:column sortable="true" property="codeIdentification" />
Thanks,
Ok, I used a table decorator, which encapsulates the text (codeIdentification) with a span and an title attribute. i.e.
<span title="xxx">codeIdentification</span>
Sufficient.
You may define the decorator in the display:column tag.
<display:table name="dataPage" id="process" export="false"
decorator="com.mysite.decorator.CodeStringFormatter"
requestURI="dataList.action"
sort="list"
pagesize="30"
>
Of course, in this decorator class you need to create a getter method. In my case that is getCodeIdentificatin()
That does the job. Sufficient.
I am new to working with knockoutjs so need some assistance around what I am trying to achieve and best practise.
I am working on an mvc4 application where I am calling a controller action that returns json and I am then binding it to my view model eg.
$.getJSON("/cart/summary", function (data) {
myModel = ko.mapping.fromJS(items);
ko.applyBindings(myModel , document.getElementById("my-container"));
});
The myModel view model is a direct representation of the json object returned from the controller.
The object contains a property (Prop1) which is an object and another property (Prop2) with a list of objects.
Prop1 object contains a decimal property that I would like to format as currency using the Globalize plugin. What is the best practise, should this be done in the viewmodel and binded to the view? If so, how can I extend my model to do this? Or done in the view?
I want to show a div if Prop2 has more than 0 items, ie. its not empty. Similar question again, should I return a property signalling this or do it in the markup?
I would like to bind a property to append text to a div, how is this done?
Finally, after binding is completed, I would like to animate the fact that binding is complete - dont care what the affect is, just like to know how its done?
Thanks for any feedback.
That's a lot of questions for one "question". I think I addressed them all.
If you want to use the globalize plugin, you will be best off doing the currency formatting client side. As a general rule of thumb, presentation logic should be done in the presentation layer anyway. Your business logic, and even other views may not want the currency formatting.
Again, following the same rule of thumb, the presentation layer is the thing that cares how many items your model object has. This can easily be accomplished with ko bindings.
http://knockoutjs.com/documentation/if-binding.html
<!-- ko if: listObjectName.length > 0-->
// put your div and list bindings in here
<!-- /ko -->
To append text to a div, you can bind to the text or html of a span depending on your exact goal.
http://knockoutjs.com/documentation/html-binding.html
To put an animation after the load is complete, you can use the afterRender event.
http://knockoutjs.com/documentation/template-binding.html#note_4_using_afterrender_afteradd_and_beforeremove
To summarize the article, you need to set up your template:
<div data-bind='template: { name: "personTemplate",
data: myData,
afterRender: myPostProcessingLogic }'> </div>
And then you can create the myPostProcessingLogic function on the myData viewmodel.
Here is a stackoverflow post on adding a glow effect on mouse hover or at set intervals. You care most about the technique used for the interval. Instead of doing it at set intervals, you would just do it whenever the myPostProcessingLogic is called.
How do I animate a glowing effect on text?
I'm using primefaces and jstl to loop a datatable.I have a List in backing bean for the columns.
private List<String> visableCols;
public initCols(){
visableCols.add("andOr");
visableCols.add("operator");
......
}
// getter & setter
In the xhtml page.
<p:comlumns var="col" value="#{theBean.visableCols}" >
<c:if test="#{col == 'andOr'}">
<!-- do sth here -->
</c:if>
</p:comumns>
but I found the c:if always false.I tried to print out the #{col} and compare w/ 'andOr',they are the same value.
If you are using PrimeFaces and you want to dynamically add and remove columns, PrimeFaces provides a specific way of doing that. You don't need any JSTL tags. For a good example of how to do it just look at their showcase example. It is pretty involved but fairly clean.
Note: you use the p:columns tag instead of p:column.
I'm trying to create a page that contains a grid and searching. The issue is that I want to have a partial view for the grid and one for the searching.
If doing a search, this should render the grid partial view with the new information.
At the moment I need information, such as what column I'm sorting by and so on, from the grid (currently stored in viewdata), in order to do the search as I want to keep those settings. This information is only available in the grid partial though.
What's the best approach of this to make it neat and nice in the code, but not a mess to work with?
Where can I store information that I need in the other partial view?
Partial View 1;
<table>
<%= Html.CreateGrid(Model, "Grid", "Grid", (int)ViewData["SortColumn"], (bool)ViewData["SortedASC"])%>
</table>
Partial View 2;
<div class="searchControl">
<input type="text" class="SearchBox" href="<%= Url.Action("Grid", "Grid", new {page = 1, columnToSortBy=/* would like to access viewdata from partial view 1 here. */, sortASC = /* would like to access viewdata from partial view 1 here. */ } ) %>" />
<input type="submit" value="Search" class="SearchButton" />
</div>
I know I might take the completely wrong approach on this, so feel free to point me in the right one!
Thanks!
ViewData is a good place to store data that is accessed in Views and Partials.
Even better if you use strongly typed views. Then you could access the data for sorting an filtering via a typed model.
I would have the model-classes implement an interface IGridFeatures that has properties for SortedASC, SortColumn, Page.
Its often a good idea to have these optional properties not in the route but in a querystring.
I think you'll be better of controlling your link through javascript, since all you really want is to control the UI.