You are viewing a plain text version of this content. The canonical link for it is here.
Posted to users@myfaces.apache.org by Yee CN <ye...@streamyx.com> on 2005/11/06 17:28:10 UTC
How to add a Wiki page
Hi,
I spent a good 40 minutes searching but could not figure out how to add a
page to myfaces wiki. I am new to wiki - but I think perhaps the wiki help
need rewriting.
Below is what I intend to add. Please feel free to improve.
Regards,
Yee
-------------
JavascriptWithJavaServceFaces
Is there a place for Javascript with JSF? I would say definitely yes.
One very common scenario is to introduce a confirmation dialog associated
with an action (for example deleting a record, canceling an edit). Another
common scenario is to perform client side validation thus saving a round
trip to the server. An example is to check that the 'Password' and 'Confirm
password' are equal before posting back to the server.
The article describe how to triggers client side javascript functions with
the <h:commandLink> and the <h:commandButton> components.
<h:commandLink>
Associating a javascript with a commandLink is not difficult, however in
order to do it successfully you need to understand how the <h:commandLink>
component is rendered by JSF.
The example below illustrates how the <h:commandLink> is rendered in html:
<h:form id="userForm">
<h:commandLink id="lnkDeelteUser" value="delete"
action="#{userBean.deleteUser}"/>
</h:form>
---------------------------------------------------------
<a href="#" onclick=
"clear_userForm();
document.forms['userForm'].elements['userForm:_link_hidden_'].value='userFor
m:lnkDeleteUser';
if (document.forms['userForm'].onsubmit){
if (document.forms['userForm'].onsubmit())
document.forms['userForm'].submit();
} else {
document.forms['userForm'].submit();
}
return false;
"
id="userForm:lnkDeleteUser">delete</a>
----------------------------------------------------------------------------
---------
There are a few points to note:
1. The <h:commandLink> is rendered as a hyperlink, <a href />
2. The hyperlink itself is "#", it is basically a dummy value.
3. JSF generates a block of Javascript and it is tied to the 'onclick'
event. Disregarding the details, it basically calls submit() which post the
form to the server.
4. Line 3 is of particular interest - the id of this particular
component ("userForm:lnkDeleteUser") is saved in a hidden field. This is how
the JSF engine knows which particular component does the postback and to
invoke at the server side actions appropriately.
Most JSF component allows us to inject javascript associated with various
client side DHTML events like onclick, ondoubleclick, onfocus etc. With
<h:commandLink>, since JSF is already generating Javascript associated with
the onclick event, this is where we need to inject our own javascript
functions as well.
Below illustrates how to inject a line of code to open confirm dialog
window, and the rendered HTML:
----------------------------------------------------------------------------
--------
<h:form id="userForm">
<h:commandLink id="lnkDeelteUser" value="delete"
onClick="if (!confirm('Are you sure you want to delete this record?'))
return false; "
action="#{userBean.deleteUser}"/>
</h:form>
---------------------------------------------------------
<a href="#" onclick=
"if (!confirm('Are you sure you want to delete this record?'))
return false;
clear_userForm();
document.forms['userForm'].elements['userForm:_link_hidden_'].value='userFor
m:lnkDeleteUser';
if (document.forms['userForm'].onsubmit){
if (document.forms['userForm'].onsubmit())
document.forms['userForm'].submit();
} else {
document.forms['userForm'].submit();
}
return false;
"
id="userForm:lnkDeleteUser">delete</a>
----------------------------------------------------------------------------
---------
Another point to note is that the javascript block should not return true
under any circumstance. It is does so, the browser will proceed to perform
<a href="#"> - which is redirecting the browser to the dummy "#" page.
<h:commandButton>
The command button is a little simpler. Below illustrates how to inject a
confirmation dialog with <h:commandButton> and how it is rendered in HTML.
<h:commandButton id="btnCancel" value="Cancel"
onclick="if (!confirm('You will lose all changes made. Are you sure?')
return false;
/>
-------------------------------------------------------
<input id="userForm:btnCancel" name="userForm:btnCancel"
type="submit" value="Cancel"
onclick="
if (!confirm('You will lose all changes made. Are you sure?') return false;
clear_userForm();
"/>
----------------------------------------------------------------------------
------------
Here the commandButton is rendered as a HTML submit button. If the
javascript block returns true then the form is submitted as usual. If it
returns false then the form submission is aborted.
The key to successful javascripting with JSF is to understand what is being
rendered. Some basic understanding of javascipt goes a long way as well.
Re: How to add a Wiki page
Posted by Mathias Brökelmann <mb...@googlemail.com>.
I used to look into the code of existing pages to know how something
is done in wiki
2005/11/6, Martin Marinschek <ma...@gmail.com>:
> You need to create a login for yourself - then you can start edit pages.
>
> As soon as you have a CamelCase word on a page, this word is a
> reference to a page - and by clicking on this word, you can start
> creating this page. That's the same with all WIKIs.
>
> regards,
>
> Martin
>
> On 11/6/05, Yee CN <ye...@streamyx.com> wrote:
> >
> >
> >
> > Hi,
> >
> >
> >
> > I spent a good 40 minutes searching but could not figure out how to add a
> > page to myfaces wiki. I am new to wiki – but I think perhaps the wiki help
> > need rewriting.
> >
> >
> >
> > Below is what I intend to add. Please feel free to improve.
> >
> >
> >
> > Regards,
> >
> > Yee
> >
> > -------------
> >
> >
> >
> > JavascriptWithJavaServceFaces
> >
> >
> >
> > Is there a place for Javascript with JSF? I would say definitely yes.
> >
> > One very common scenario is to introduce a confirmation dialog associated
> > with an action (for example deleting a record, canceling an edit). Another
> > common scenario is to perform client side validation thus saving a round
> > trip to the server. An example is to check that the 'Password' and 'Confirm
> > password' are equal before posting back to the server.
> >
> >
> >
> > The article describe how to triggers client side javascript functions with
> > the <h:commandLink> and the <h:commandButton> components.
> >
> >
> >
> > <h:commandLink>
> >
> >
> >
> > Associating a javascript with a commandLink is not difficult, however in
> > order to do it successfully you need to understand how the <h:commandLink>
> > component is rendered by JSF.
> >
> >
> >
> > The example below illustrates how the <h:commandLink> is rendered in html:
> >
> >
> >
> > <h:form id="userForm">
> >
> > <h:commandLink id="lnkDeelteUser" value="delete"
> > action="#{userBean.deleteUser}"/>
> >
> > </h:form>
> >
> > ---------------------------------------------------------
> >
> > <a href="#" onclick=
> >
> > "clear_userForm();
> >
> > document.forms['userForm'].elements['userForm:_link_hidden_'].value='userForm:lnkDeleteUser';
> >
> > if (document.forms['userForm'].onsubmit){
> >
> > if (document.forms['userForm'].onsubmit())
> >
> > document.forms['userForm'].submit();
> >
> > } else {
> >
> > document.forms['userForm'].submit();
> >
> > }
> >
> > return false;
> >
> > "
> >
> > id="userForm:lnkDeleteUser">delete</a>
> >
> >
> >
> > -------------------------------------------------------------------------------------
> >
> >
> >
> > There are a few points to note:
> >
> > The <h:commandLink> is rendered as a hyperlink, <a href />
> > The hyperlink itself is "#", it is basically a dummy value.
> > JSF generates a block of Javascript and it is tied to the 'onclick' event.
> > Disregarding the details, it basically calls submit() which post the form to
> > the server.
> > Line 3 is of particular interest – the id of this particular component
> > ("userForm:lnkDeleteUser") is saved in a hidden field. This is how the JSF
> > engine knows which particular component does the postback and to invoke at
> > the server side actions appropriately.
> >
> >
> >
> > Most JSF component allows us to inject javascript associated with various
> > client side DHTML events like onclick, ondoubleclick, onfocus etc. With
> > <h:commandLink>, since JSF is already generating Javascript associated with
> > the onclick event, this is where we need to inject our own javascript
> > functions as well.
> >
> >
> >
> > Below illustrates how to inject a line of code to open confirm dialog
> > window, and the rendered HTML:
> >
> > ------------------------------------------------------------------------------------
> >
> > <h:form id="userForm">
> >
> > <h:commandLink id="lnkDeelteUser" value="delete"
> >
> > onClick="if (!confirm('Are you sure you want to delete this record?'))
> > return false; "
> >
> > action="#{userBean.deleteUser}"/>
> >
> > </h:form>
> >
> > ---------------------------------------------------------
> >
> > <a href="#" onclick=
> >
> > "if (!confirm('Are you sure you want to delete this record?'))
> >
> > return false;
> >
> > clear_userForm();
> >
> > document.forms['userForm'].elements['userForm:_link_hidden_'].value='userForm:lnkDeleteUser';
> >
> > if (document.forms['userForm'].onsubmit){
> >
> > if (document.forms['userForm'].onsubmit())
> >
> > document.forms['userForm'].submit();
> >
> > } else {
> >
> > document.forms['userForm'].submit();
> >
> > }
> >
> > return false;
> >
> > "
> >
> > id="userForm:lnkDeleteUser">delete</a>
> >
> > -------------------------------------------------------------------------------------
> >
> > Another point to note is that the javascript block should not return true
> > under any circumstance. It is does so, the browser will proceed to perform
> > <a href="#"> – which is redirecting the browser to the dummy "#" page.
> >
> >
> >
> > <h:commandButton>
> >
> >
> >
> > The command button is a little simpler. Below illustrates how to inject a
> > confirmation dialog with <h:commandButton> and how it is rendered in HTML.
> >
> >
> >
> > <h:commandButton id="btnCancel" value="Cancel"
> >
> > onclick="if (!confirm('You will lose all changes made. Are you sure?')
> > return false;
> >
> > />
> >
> > -------------------------------------------------------
> >
> > <input id="userForm:btnCancel" name="userForm:btnCancel"
> >
> > type="submit" value="Cancel"
> >
> >
> >
> > onclick="
> >
> > if (!confirm('You will lose all changes made. Are you sure?') return false;
> >
> > clear_userForm();
> >
> > "/>
> >
> > ----------------------------------------------------------------------------------------
> >
> > Here the commandButton is rendered as a HTML submit button. If the
> > javascript block returns true then the form is submitted as usual. If it
> > returns false then the form submission is aborted.
> >
> >
> >
> > The key to successful javascripting with JSF is to understand what is being
> > rendered. Some basic understanding of javascipt goes a long way as well.
> >
> >
> >
> >
>
>
> --
>
> http://www.irian.at
> Your JSF powerhouse -
> JSF Trainings in English and German
>
--
Mathias
Re: How to add a Wiki page
Posted by Martin Marinschek <ma...@gmail.com>.
You need to create a login for yourself - then you can start edit pages.
As soon as you have a CamelCase word on a page, this word is a
reference to a page - and by clicking on this word, you can start
creating this page. That's the same with all WIKIs.
regards,
Martin
On 11/6/05, Yee CN <ye...@streamyx.com> wrote:
>
>
>
> Hi,
>
>
>
> I spent a good 40 minutes searching but could not figure out how to add a
> page to myfaces wiki. I am new to wiki – but I think perhaps the wiki help
> need rewriting.
>
>
>
> Below is what I intend to add. Please feel free to improve.
>
>
>
> Regards,
>
> Yee
>
> -------------
>
>
>
> JavascriptWithJavaServceFaces
>
>
>
> Is there a place for Javascript with JSF? I would say definitely yes.
>
> One very common scenario is to introduce a confirmation dialog associated
> with an action (for example deleting a record, canceling an edit). Another
> common scenario is to perform client side validation thus saving a round
> trip to the server. An example is to check that the 'Password' and 'Confirm
> password' are equal before posting back to the server.
>
>
>
> The article describe how to triggers client side javascript functions with
> the <h:commandLink> and the <h:commandButton> components.
>
>
>
> <h:commandLink>
>
>
>
> Associating a javascript with a commandLink is not difficult, however in
> order to do it successfully you need to understand how the <h:commandLink>
> component is rendered by JSF.
>
>
>
> The example below illustrates how the <h:commandLink> is rendered in html:
>
>
>
> <h:form id="userForm">
>
> <h:commandLink id="lnkDeelteUser" value="delete"
> action="#{userBean.deleteUser}"/>
>
> </h:form>
>
> ---------------------------------------------------------
>
> <a href="#" onclick=
>
> "clear_userForm();
>
> document.forms['userForm'].elements['userForm:_link_hidden_'].value='userForm:lnkDeleteUser';
>
> if (document.forms['userForm'].onsubmit){
>
> if (document.forms['userForm'].onsubmit())
>
> document.forms['userForm'].submit();
>
> } else {
>
> document.forms['userForm'].submit();
>
> }
>
> return false;
>
> "
>
> id="userForm:lnkDeleteUser">delete</a>
>
>
>
> -------------------------------------------------------------------------------------
>
>
>
> There are a few points to note:
>
> The <h:commandLink> is rendered as a hyperlink, <a href />
> The hyperlink itself is "#", it is basically a dummy value.
> JSF generates a block of Javascript and it is tied to the 'onclick' event.
> Disregarding the details, it basically calls submit() which post the form to
> the server.
> Line 3 is of particular interest – the id of this particular component
> ("userForm:lnkDeleteUser") is saved in a hidden field. This is how the JSF
> engine knows which particular component does the postback and to invoke at
> the server side actions appropriately.
>
>
>
> Most JSF component allows us to inject javascript associated with various
> client side DHTML events like onclick, ondoubleclick, onfocus etc. With
> <h:commandLink>, since JSF is already generating Javascript associated with
> the onclick event, this is where we need to inject our own javascript
> functions as well.
>
>
>
> Below illustrates how to inject a line of code to open confirm dialog
> window, and the rendered HTML:
>
> ------------------------------------------------------------------------------------
>
> <h:form id="userForm">
>
> <h:commandLink id="lnkDeelteUser" value="delete"
>
> onClick="if (!confirm('Are you sure you want to delete this record?'))
> return false; "
>
> action="#{userBean.deleteUser}"/>
>
> </h:form>
>
> ---------------------------------------------------------
>
> <a href="#" onclick=
>
> "if (!confirm('Are you sure you want to delete this record?'))
>
> return false;
>
> clear_userForm();
>
> document.forms['userForm'].elements['userForm:_link_hidden_'].value='userForm:lnkDeleteUser';
>
> if (document.forms['userForm'].onsubmit){
>
> if (document.forms['userForm'].onsubmit())
>
> document.forms['userForm'].submit();
>
> } else {
>
> document.forms['userForm'].submit();
>
> }
>
> return false;
>
> "
>
> id="userForm:lnkDeleteUser">delete</a>
>
> -------------------------------------------------------------------------------------
>
> Another point to note is that the javascript block should not return true
> under any circumstance. It is does so, the browser will proceed to perform
> <a href="#"> – which is redirecting the browser to the dummy "#" page.
>
>
>
> <h:commandButton>
>
>
>
> The command button is a little simpler. Below illustrates how to inject a
> confirmation dialog with <h:commandButton> and how it is rendered in HTML.
>
>
>
> <h:commandButton id="btnCancel" value="Cancel"
>
> onclick="if (!confirm('You will lose all changes made. Are you sure?')
> return false;
>
> />
>
> -------------------------------------------------------
>
> <input id="userForm:btnCancel" name="userForm:btnCancel"
>
> type="submit" value="Cancel"
>
>
>
> onclick="
>
> if (!confirm('You will lose all changes made. Are you sure?') return false;
>
> clear_userForm();
>
> "/>
>
> ----------------------------------------------------------------------------------------
>
> Here the commandButton is rendered as a HTML submit button. If the
> javascript block returns true then the form is submitted as usual. If it
> returns false then the form submission is aborted.
>
>
>
> The key to successful javascripting with JSF is to understand what is being
> rendered. Some basic understanding of javascipt goes a long way as well.
>
>
>
>
--
http://www.irian.at
Your JSF powerhouse -
JSF Trainings in English and German