JSF Datatable Edit Using Popup Panel - java

I am using JSF 1.1 with Icefaces 1.8.2
I have datatables which displays my database records.Currently when user wishes to insert or edit a record, edit button is clicked and edit form or creating form is either displayed at the bottom of datatable or in a separate page.
Ideally I would like to display in the edit form or create form just on top of datatable like a panel popup like in the following URL.
http://postimage.org/image/pglvdcck/
How can I do this using JSF or with icefaces?
Any insight into this is highly appreciable.
Thanks

You need to use ICEFaces component ice:panelPopup. Look it up in ICEFaces Demos - Layout panels - Popup panel.
Example - add this to your source (anywhere in the page really, even in a separate included file):
<ice:panelPopup modal="true" visible="#{myBean.editPopupVisible}">
<ice:form>
<ice:input...> some inputs...
... Save/Cancel button
</ice:form>
</ice:panelPopup>

Related

Show or Hide Jsf Richfaces modal panel from java bean

In JSF Richfaces, I need to show or hide modalpanel and GIF image from bean according to certain functions.
For example, after I have entered all values and click submit means, processing GIF image will be displayed. At the time of completion it gets hidden by using
onclick="#{rich:component('wait1')}.show()",
oncomplete="#{rich:component('wait1')}.hide()"
wait1 is an image file name I have used.
At the time of submitting, I have been validating the required fields.
If its empty, I want to hide the process image and show the modalpanel to get value from user.
How to hide the processing image and display the modal panel to get input from user, from java back bean?
Thanks in advance
I am suggesting you a solution. Create Modal panel with property "showWhenRendered" .
create modalpanel as
<rich:modalPanel id = "idd" autosized="true" width="500" height="50"
showWhenRendered = "#{bean.booloeanvalue}">
</rich:modalPanel>
In Bean, create boolean variable booloeanvalue. If booloeanvalue is true, automatically modalpanel is rendered and came to display.

How to create Multi step form

We want to give option to author to create multi steps tabs or wizard. This number of steps/tabs should be configurable in Form Start component in Edit button. Once author selects the number of steps/tabs then steps/tabs will be created automatically and then author can drag and drop other components like "File Upload", etc.. Please refer to the attached screenshot.
Kindly let me know how to proceed on this.
You can try to leverage the OOTB tabctrl component provided in geometrixx-outdoors along with the OOTB form component. The only customization needed would be changing the form end component to accomodate prev and next buttons, and then adding a bit of javascript to navigate the tabs on click of those buttons.
Steps to create this.
Drag and drop the default form component on page.
Inside the form drag and drop the tab control component.
Configure the number of tabs required and the contents within each tab in the tab control component.
Modify the form end component to accomodate the previous and next buttons.
Attach handlers for the previous and next buttons using the following JS(currently consists only of the basic functionality. Can be modified according to your requirements).
JS:
jQuery(function ($) {
$(document).on('click', '.prev', function(){ // 'prev' is class of previous button
var tabctrl = $(this).closest('form').find('.tabctrl');
var currentItemHeader = $(tabctrl).find(".tabctrl-header li.active");
$(currentItemHeader).prev().find('a').click();
});
$(document).on('click', '.next', function(){ // 'next' is class of next button
var tabctrl = $(this).closest('form').find('.tabctrl');
var currentItemHeader = $(tabctrl).find(".tabctrl-header li.active");
$(currentItemHeader).next().find('a').click();
});
});
NOTE: Try to include the appropriate clientlibs in geometrixx site before testing this, else tabctrl wouldn't work properly. Or else, you can check this dierctly in geometrixx-outdoors site.

RichFaces: TabPanel and param

Currently, i am dealing with rich:tabPanel in my web application based on JSF 2.0.
I encounter a very strange problem, which is related to my richface component.
Basically, i print some same stuff on each panel (here, it is a schedule table of a show, tab contains the day and content of tab contains the differents hours ).
Consequently, i have something like that:
<rich:tabPanel>
<c:forEach items="#{show}" var="hour" ...>
<rich:tab>
<a4j:commandLink ...>
<a4j:param value="hour.something" assignTo="#{bean.method}" />
</a4j:commandLink>
</ ..... >
When i click on the first commandlink, when my webpage is displayed, it's ok. But when i choose an other tab, and i click on the commandlink, the "bean.method" is not call. I need to click a second time to make the call of the function.
Finally, when i put the tabPanel as "switchtype=server", it works very well (without clicking 2 times).
But that's not the purpose, i want to use the client mode.
I see that on JIRA of richfaces v3, this problem has been solved JIRA JBoss. But there is no more information (except a comment but it's not working).
If anyone can help, it would be great.
Regards,
The problem is you are using nested forms(form within form). This is not recommended in JSF. Even in HTML it is invalid. Remove one form and it will work.
Read this post too.

Hiding a <div> tag using wicket & eclipse

I've tried to hide a tag in wicket, I've managed to accomplish that only in the case that follows:
HTML
...
<div wicket:id="div_id">This is what hides</div>
JAVA
final WebMarkupContainer wmc = new WebMarkupContainer("div_id");
Method
public onSubmit(){
wmc.setVisible(false);
}
This manages to get the div hidden, but my div tag has another wicket components inside, and so I can't seem to get this working, error pops saying inner components are not defined in the component "div_id".
Any idea how to get this working?
Thanks guys!!
If you have other components inside that div, you have to add your other components to the markup container you have for the div instead of adding them to your page. What wicket is looking for is a match between the hierarchy on the Java and HTML part.
This is just a very wild guess, since I don't know how you add the inner components and what exactly fails, but if you add or modify them in onBeforeRender() and you're using Wicket 1.4.x, you'll need to override WebmarkupContainer.callOnBeforeRenderIfNotVisible() to return true...
For Wicket 1.5 this code should be moved to onConfigure()

Can we submit the specific html form using frameset and give the feeling of ajax in some sense?

i am working on legacy project. In one of the jsp, it has cascaded frames something like this
<frameset >
<frame src="Welcome.jsp">
<frameset cols="9,*" >
<frame src="Customer.jsp">
<frame src="Account.jsp">
</frameset>
</frameset>
I have skipped the jsp code between frameset/frames.
Now inside one account.jsp ,I am having the html form which gets submitted on click of submit button.The
experience i see on UI is that only account.jsp is refreshed with new data(leaving other jsps like welcome and customer intact). My understanding was this is
possible only through ajax request. But when i drilled down , i found it is same simple logic of form submission .
My question is then how come only that
particluar frame is refreshed but not the complete page. Is it frameset feature? I tried to do the googling about it but could not find relation of specific form
submission with frameset?
If you submit a form on an iframe, only that iframe will refresh. That's just how it works. I could not find documentation on it either. It behaves like an entirely separate tab to a degree. You can navigate in the frame as if it were a different tab, for example. If you want to refresh the parent page, use this:parent.location.href = parent.location.href
You can consider the frames to be different instances of browsers but presenting on same screen, (just like tabbed browsing) , we use frames only when we need all the parts to be detached and work as the way u said its working, if you want to update other frames from one frame use javascript to get hold of that frame and set the src property for that frame , if you want to revamp the whole page, then window.top.src = new_page

Categories