You are viewing a plain text version of this content. The canonical link for it is here.
Posted to users@myfaces.apache.org by Bjørn T Johansen <bt...@havleik.no> on 2006/11/24 13:50:40 UTC
Progress bar?
Does myfaces have a progress bar component one can use or if not, some hints on how to make one?
Regards,
BTJ
--
-----------------------------------------------------------------------------------------------
Bjørn T Johansen
btj@havleik.no
-----------------------------------------------------------------------------------------------
Someone wrote:
"I understand that if you play a Windows CD backwards you hear strange Satanic messages"
To which someone replied:
"It's even worse than that; play it forwards and it installs Windows"
-----------------------------------------------------------------------------------------------
Re: Progress bar?
Posted by Werner Punz <we...@gmx.at>.
Bjørn T Johansen schrieb:
> Does myfaces have a progress bar component one can use or if not, some hints on how to make one?
>
>
No progress bar yet, however there is a way...
you can use partial page rendering and a t:div...
it should work the following way,
put a ppr field with a cyclic refresh into a page...
in the backend at the time of the triggering of the refresh measure your
progress and adjust the css width of the t:div element accordingly
(or set a progress text, to your liking)
Since the t:div does not use any javascript this should work as expected.
this is quite natural because you do not have to do some huge tricks in
the backend, ppr panel backend binding to the panel if needed, div
element backend binding to the element, and progress code, thats it
basically.
I have not tried this, but given my experiments with the tomahawk ppr
control, it should work as expected as long as there is a command link
in the page (the ppr control needs one command in the page due to a bug)
Sorry to say that you have to use explicetly t:div because verbatim tags
do not work with the ppr controls as of yet....
Re: Progress bar?
Posted by Werner Punz <we...@gmx.at>.
Martin Marinschek schrieb:
> Hi Werner,
>
> the problem is that a verbatim-tag generates a transient output-text -
> it's not included in the state-saving process. When a PP request runs
> through, the JSP is not triggered anymore - and the transient
> components are not rendered.
>
So I assume a t:verbatim tag is needed soon :-)
Re: Progress bar?
Posted by Martin Marinschek <ma...@gmail.com>.
Hi Werner,
the problem is that a verbatim-tag generates a transient output-text -
it's not included in the state-saving process. When a PP request runs
through, the JSP is not triggered anymore - and the transient
components are not rendered.
regards,
Martin
On 11/27/06, Werner Punz <we...@gmx.at> wrote:
> Werner Punz schrieb:
>
> > Does not work yet. sorry...
> > I ran into this ppr limitation a week ago.
> >
> >
> The ppr has a limit, you cannot render verbatim for now, and you
> cannot embed any javascript.
>
> On the javascript side this would be solvable by a parser within the ppr
> which fetches the embedded javascripts
> and runs an eval/exec on them.
>
> as for the verbatim, I have no clue yet why this does not work, I have
> to check the code of both tags.
>
>
>
>
--
http://www.irian.at
Your JSF powerhouse -
JSF Consulting, Development and
Courses in English and German
Professional Support for Apache MyFaces
Re: Progress bar?
Posted by Werner Punz <we...@gmx.at>.
Werner Punz schrieb:
> Does not work yet. sorry...
> I ran into this ppr limitation a week ago.
>
>
The ppr has a limit, you cannot render verbatim for now, and you
cannot embed any javascript.
On the javascript side this would be solvable by a parser within the ppr
which fetches the embedded javascripts
and runs an eval/exec on them.
as for the verbatim, I have no clue yet why this does not work, I have
to check the code of both tags.
Re: Progress bar?
Posted by Werner Punz <we...@gmx.at>.
Mario Ivankovits schrieb:
> Hi Werner!
>> <h:form>
>> <t:saveState value="#{progressor.percentage}"></t:saveState>
>> <h:commandLink></h:commandLink>
>> <s:pprPanelGroup id="pprmain" periodicalUpdate="500">
>> <t:div id="process_done" rendered="#{progressor.percentage ==
>> 100}" forceId="true"/>
>> <t:div id="progressbar" binding="#{progressor.bar}"
>> style="#{progressor.style}">
>> <h:outputFormat binding="#{progressor.outputformat}"
>> value="Login in progress, please wait"/>
>> </t:div>
>> </s:pprPanelGroup>
>> </h:form>
> Shouldn't it be possible to embed a f:verbatim within the process_done
> div which renders the window.location stuff then?
>
>
Does not work yet. sorry...
I ran into this ppr limitation a week ago.
Re: Progress bar?
Posted by Mario Ivankovits <ma...@ops.co.at>.
Hi Werner!
> <h:form>
> <t:saveState value="#{progressor.percentage}"></t:saveState>
> <h:commandLink></h:commandLink>
> <s:pprPanelGroup id="pprmain" periodicalUpdate="500">
> <t:div id="process_done" rendered="#{progressor.percentage ==
> 100}" forceId="true"/>
> <t:div id="progressbar" binding="#{progressor.bar}"
> style="#{progressor.style}">
> <h:outputFormat binding="#{progressor.outputformat}"
> value="Login in progress, please wait"/>
> </t:div>
> </s:pprPanelGroup>
> </h:form>
Shouldn't it be possible to embed a f:verbatim within the process_done
div which renders the window.location stuff then?
Ciao,
Mario
Re: Progress bar?
Posted by Matthias Wessendorf <ma...@apache.org>.
cool stuff dude!
On 11/24/06, Werner Punz <we...@gmx.at> wrote:
> Gerald Müllan schrieb:
> > Hi,
> >
> > i would suggest the way, Werner mentioned; It`s really very easy.
> >
> > In a very simple example, it can be something like this:
> >
> > <s:pprPanelGroup id="progressBar" periodicalUpdate="500">
> > <t:div style="#{bean.style}">
> > </t:div>
> > </s:pprPanelGroup>
> >
> > The getStyle method returns a broader width (same height, color..) on
> > every poll.
> >
> actually this works really well, I just tried it, almost perfect.
> The only problem is that you cannot trigger a direct forward once
> you are done with the job, this is not a big issue...
> you can render a control dynamically via ppr and then have a timing
> javascript checking if the control is accessible,
>
> here is a small example utilizing ppr to render a progress bar:
>
> <h:form>
> <t:saveState value="#{progressor.percentage}"></t:saveState>
> <h:commandLink></h:commandLink>
> <s:pprPanelGroup id="pprmain" periodicalUpdate="500">
> <t:div id="process_done" rendered="#{progressor.percentage == 100}"
> forceId="true"/>
> <t:div id="progressbar" binding="#{progressor.bar}"
> style="#{progressor.style}">
> <h:outputFormat binding="#{progressor.outputformat}" value="Login in
> progress, please wait"/>
> </t:div>
> </s:pprPanelGroup>
> </h:form>
>
> <script type="text/javascript">
> <!--
> function forwardPage() {
> if(dojo.byId("process_done") != null)
> window.location = "../main/MainPage.jsf";
> else
> setTimeout("forwardPage();", 1000);
> }
> setTimeout("forwardPage();", 1000);
> -->
> </script>
>
>
> The trick is that once it is done, the process_done div is rendered and
> the javascript can trigger and can issue a forward.
>
> Going the response way is not possible in this case because the ppr is
> in an ajax context.
>
> the backend code can look like this:
>
> @Bean(name = "progressor", scope = Scope.REQUEST)
> public class Progressor implements Serializable {
> private static final long serialVersionUID = 1L;
>
> int percentage = 0;
>
> String style = "";
>
> transient Div bar = null;
>
> transient HtmlOutputFormat outputformat = null;
>
> public int getPercentage() {
> return percentage;
> }
>
> public void setPercentage(int percentage) {
> this.percentage = percentage;
> }
>
>
> public Div getBar() {
> return bar;
> }
>
> public void setBar(Div bar) {
>
> this.bar = bar;
>
> }
>
> public String getStyle() {
>
> percentage += 10;
> style = "background-color: red;height: 20px; width: "
> + (percentage * 3) + "px;";
>
> if (percentage > 100) {
> percentage = 100;
> }
> outputformat.setValue(percentage+"% Login in progress, please wait");
> return style;
> }
>
> public void setStyle(String style) {
> this.style = style;
> }
>
> public HtmlOutputFormat getOutputformat() {
> return outputformat;
> }
>
> public void setOutputformat(HtmlOutputFormat outputformat) {
> this.outputformat = outputformat;
> }
>
>
> }
>
>
> note, this bean uses the shale tiger extensions, hence the annotations
> on top of the bean class,
>
> also in the jsp code the savestate is mandatory since we have
> a request scoped bean, and we do not want to lose the percentage.
>
>
--
Matthias Wessendorf
http://tinyurl.com/fmywh
further stuff:
blog: http://jroller.com/page/mwessendorf
mail: mwessendorf-at-gmail-dot-com
Re: Progress bar?
Posted by Werner Punz <we...@gmx.at>.
Gerald Müllan schrieb:
> Hi,
>
> i would suggest the way, Werner mentioned; It`s really very easy.
>
> In a very simple example, it can be something like this:
>
> <s:pprPanelGroup id="progressBar" periodicalUpdate="500">
> <t:div style="#{bean.style}">
> </t:div>
> </s:pprPanelGroup>
>
> The getStyle method returns a broader width (same height, color..) on
> every poll.
>
actually this works really well, I just tried it, almost perfect.
The only problem is that you cannot trigger a direct forward once
you are done with the job, this is not a big issue...
you can render a control dynamically via ppr and then have a timing
javascript checking if the control is accessible,
here is a small example utilizing ppr to render a progress bar:
<h:form>
<t:saveState value="#{progressor.percentage}"></t:saveState>
<h:commandLink></h:commandLink>
<s:pprPanelGroup id="pprmain" periodicalUpdate="500">
<t:div id="process_done" rendered="#{progressor.percentage == 100}"
forceId="true"/>
<t:div id="progressbar" binding="#{progressor.bar}"
style="#{progressor.style}">
<h:outputFormat binding="#{progressor.outputformat}" value="Login in
progress, please wait"/>
</t:div>
</s:pprPanelGroup>
</h:form>
<script type="text/javascript">
<!--
function forwardPage() {
if(dojo.byId("process_done") != null)
window.location = "../main/MainPage.jsf";
else
setTimeout("forwardPage();", 1000);
}
setTimeout("forwardPage();", 1000);
-->
</script>
The trick is that once it is done, the process_done div is rendered and
the javascript can trigger and can issue a forward.
Going the response way is not possible in this case because the ppr is
in an ajax context.
the backend code can look like this:
@Bean(name = "progressor", scope = Scope.REQUEST)
public class Progressor implements Serializable {
private static final long serialVersionUID = 1L;
int percentage = 0;
String style = "";
transient Div bar = null;
transient HtmlOutputFormat outputformat = null;
public int getPercentage() {
return percentage;
}
public void setPercentage(int percentage) {
this.percentage = percentage;
}
public Div getBar() {
return bar;
}
public void setBar(Div bar) {
this.bar = bar;
}
public String getStyle() {
percentage += 10;
style = "background-color: red;height: 20px; width: "
+ (percentage * 3) + "px;";
if (percentage > 100) {
percentage = 100;
}
outputformat.setValue(percentage+"% Login in progress, please wait");
return style;
}
public void setStyle(String style) {
this.style = style;
}
public HtmlOutputFormat getOutputformat() {
return outputformat;
}
public void setOutputformat(HtmlOutputFormat outputformat) {
this.outputformat = outputformat;
}
}
note, this bean uses the shale tiger extensions, hence the annotations
on top of the bean class,
also in the jsp code the savestate is mandatory since we have
a request scoped bean, and we do not want to lose the percentage.
Re: Progress bar?
Posted by Gerald Müllan <bi...@gmail.com>.
Hi,
i would suggest the way, Werner mentioned; It`s really very easy.
In a very simple example, it can be something like this:
<s:pprPanelGroup id="progressBar" periodicalUpdate="500">
<t:div style="#{bean.style}">
</t:div>
</s:pprPanelGroup>
The getStyle method returns a broader width (same height, color..) on
every poll.
cheers,
Gerald
On 11/24/06, Bjørn T Johansen <bt...@havleik.no> wrote:
> Thx for all the suggestions, I'll see what fit my requirements best... :)
>
> BTJ
>
> On Fri, 24 Nov 2006 15:00:00 +0100
> "Matthias Wessendorf" <ma...@apache.org> wrote:
>
> > examples from Irian go here:
> >
> > http://www.irian.at/trinidad-demo/faces/components/progressIndicator.jspx
> >
> > -M
> >
> > On 11/24/06, Simon Lessard <si...@gmail.com> wrote:
> > > Hello,
> > >
> > > You can also use Trinidad in addition to my-faces, it has a progress bar
> > > component.
> > >
> > >
> > > Regards,
> > >
> > > ~ Simon
> > >
> > >
> > > On 11/24/06, Werner Punz <we...@gmx.at> wrote:
> > > > David Delbecq schrieb:
> > > > > Bjørn T Johansen a écrit :
> > > > >> Does myfaces have a progress bar component one can use
> > > > > Define progress bar. Something like 'your are a step 15 out of 20, still
> > > > > 5 more forms to complete registration'
> > > > > Or something like 'submitting value, then validating , then calling
> > > > > action, then redirecting' ?
> > > > >
> > > > > For the first one, well, it's just a matter of showing picture
> > > > > <h:graphicsImage
> > > > > value="/images/progress/step_#{myprogressbean.currentStep}.png"/>
> > > > >
> > > > > For the second one, as everything happens server side there is no point
> > > > > trying to show a client progress bar as there is no way in http protocol
> > > > > for server to inform client of such progress.
> > > > >> or if not, some hints on how to make one?
> > > > >>
> > > > > There are lots of docs on the net on how to create your own components.
> > > > > You problem however might be that JSF renders html, not pictures :). So
> > > > > you might go the javascript way. Personnaly, i like the most simple gif
> > > > > animation that get removed when operation is complete :)
> > > > Actually in this case there is no need for any componentization, 95% of
> > > > all progress bar use cases probably can be solved within tomahawk by
> > > > application of the partial page rendering control and other non
> > > > javascript rendering jsf controls.
> > > >
> > > > (h:image in your case, t:div in the case of a progress bar which has to
> > > > grow etc...)
> > > >
> > > >
> > >
> > >
> >
>
--
http://www.irian.at
Your JSF powerhouse -
JSF Consulting, Development and
Courses in English and German
Professional Support for Apache MyFaces
Re: Progress bar?
Posted by Bjørn T Johansen <bt...@havleik.no>.
Thx for all the suggestions, I'll see what fit my requirements best... :)
BTJ
On Fri, 24 Nov 2006 15:00:00 +0100
"Matthias Wessendorf" <ma...@apache.org> wrote:
> examples from Irian go here:
>
> http://www.irian.at/trinidad-demo/faces/components/progressIndicator.jspx
>
> -M
>
> On 11/24/06, Simon Lessard <si...@gmail.com> wrote:
> > Hello,
> >
> > You can also use Trinidad in addition to my-faces, it has a progress bar
> > component.
> >
> >
> > Regards,
> >
> > ~ Simon
> >
> >
> > On 11/24/06, Werner Punz <we...@gmx.at> wrote:
> > > David Delbecq schrieb:
> > > > Bjørn T Johansen a écrit :
> > > >> Does myfaces have a progress bar component one can use
> > > > Define progress bar. Something like 'your are a step 15 out of 20, still
> > > > 5 more forms to complete registration'
> > > > Or something like 'submitting value, then validating , then calling
> > > > action, then redirecting' ?
> > > >
> > > > For the first one, well, it's just a matter of showing picture
> > > > <h:graphicsImage
> > > > value="/images/progress/step_#{myprogressbean.currentStep}.png"/>
> > > >
> > > > For the second one, as everything happens server side there is no point
> > > > trying to show a client progress bar as there is no way in http protocol
> > > > for server to inform client of such progress.
> > > >> or if not, some hints on how to make one?
> > > >>
> > > > There are lots of docs on the net on how to create your own components.
> > > > You problem however might be that JSF renders html, not pictures :). So
> > > > you might go the javascript way. Personnaly, i like the most simple gif
> > > > animation that get removed when operation is complete :)
> > > Actually in this case there is no need for any componentization, 95% of
> > > all progress bar use cases probably can be solved within tomahawk by
> > > application of the partial page rendering control and other non
> > > javascript rendering jsf controls.
> > >
> > > (h:image in your case, t:div in the case of a progress bar which has to
> > > grow etc...)
> > >
> > >
> >
> >
>
Re: Progress bar?
Posted by Matthias Wessendorf <ma...@apache.org>.
examples from Irian go here:
http://www.irian.at/trinidad-demo/faces/components/progressIndicator.jspx
-M
On 11/24/06, Simon Lessard <si...@gmail.com> wrote:
> Hello,
>
> You can also use Trinidad in addition to my-faces, it has a progress bar
> component.
>
>
> Regards,
>
> ~ Simon
>
>
> On 11/24/06, Werner Punz <we...@gmx.at> wrote:
> > David Delbecq schrieb:
> > > Bjørn T Johansen a écrit :
> > >> Does myfaces have a progress bar component one can use
> > > Define progress bar. Something like 'your are a step 15 out of 20, still
> > > 5 more forms to complete registration'
> > > Or something like 'submitting value, then validating , then calling
> > > action, then redirecting' ?
> > >
> > > For the first one, well, it's just a matter of showing picture
> > > <h:graphicsImage
> > > value="/images/progress/step_#{myprogressbean.currentStep}.png"/>
> > >
> > > For the second one, as everything happens server side there is no point
> > > trying to show a client progress bar as there is no way in http protocol
> > > for server to inform client of such progress.
> > >> or if not, some hints on how to make one?
> > >>
> > > There are lots of docs on the net on how to create your own components.
> > > You problem however might be that JSF renders html, not pictures :). So
> > > you might go the javascript way. Personnaly, i like the most simple gif
> > > animation that get removed when operation is complete :)
> > Actually in this case there is no need for any componentization, 95% of
> > all progress bar use cases probably can be solved within tomahawk by
> > application of the partial page rendering control and other non
> > javascript rendering jsf controls.
> >
> > (h:image in your case, t:div in the case of a progress bar which has to
> > grow etc...)
> >
> >
>
>
--
Matthias Wessendorf
http://tinyurl.com/fmywh
further stuff:
blog: http://jroller.com/page/mwessendorf
mail: mwessendorf-at-gmail-dot-com
Re: Progress bar?
Posted by Simon Lessard <si...@gmail.com>.
Hello,
You can also use Trinidad in addition to my-faces, it has a progress bar
component.
Regards,
~ Simon
On 11/24/06, Werner Punz <we...@gmx.at> wrote:
>
> David Delbecq schrieb:
> > Bjørn T Johansen a écrit :
> >> Does myfaces have a progress bar component one can use
> > Define progress bar. Something like 'your are a step 15 out of 20, still
> > 5 more forms to complete registration'
> > Or something like 'submitting value, then validating , then calling
> > action, then redirecting' ?
> >
> > For the first one, well, it's just a matter of showing picture
> > <h:graphicsImage
> > value="/images/progress/step_#{myprogressbean.currentStep}.png"/>
> >
> > For the second one, as everything happens server side there is no point
> > trying to show a client progress bar as there is no way in http protocol
> > for server to inform client of such progress.
> >> or if not, some hints on how to make one?
> >>
> > There are lots of docs on the net on how to create your own components.
> > You problem however might be that JSF renders html, not pictures :). So
> > you might go the javascript way. Personnaly, i like the most simple gif
> > animation that get removed when operation is complete :)
> Actually in this case there is no need for any componentization, 95% of
> all progress bar use cases probably can be solved within tomahawk by
> application of the partial page rendering control and other non
> javascript rendering jsf controls.
>
> (h:image in your case, t:div in the case of a progress bar which has to
> grow etc...)
>
>
Re: Progress bar?
Posted by Werner Punz <we...@gmx.at>.
David Delbecq schrieb:
> Bjørn T Johansen a écrit :
>> Does myfaces have a progress bar component one can use
> Define progress bar. Something like 'your are a step 15 out of 20, still
> 5 more forms to complete registration'
> Or something like 'submitting value, then validating , then calling
> action, then redirecting' ?
>
> For the first one, well, it's just a matter of showing picture
> <h:graphicsImage
> value="/images/progress/step_#{myprogressbean.currentStep}.png"/>
>
> For the second one, as everything happens server side there is no point
> trying to show a client progress bar as there is no way in http protocol
> for server to inform client of such progress.
>> or if not, some hints on how to make one?
>>
> There are lots of docs on the net on how to create your own components.
> You problem however might be that JSF renders html, not pictures :). So
> you might go the javascript way. Personnaly, i like the most simple gif
> animation that get removed when operation is complete :)
Actually in this case there is no need for any componentization, 95% of
all progress bar use cases probably can be solved within tomahawk by
application of the partial page rendering control and other non
javascript rendering jsf controls.
(h:image in your case, t:div in the case of a progress bar which has to
grow etc...)
Re: Progress bar?
Posted by David Delbecq <de...@oma.be>.
Bjørn T Johansen a écrit :
> Does myfaces have a progress bar component one can use
Define progress bar. Something like 'your are a step 15 out of 20, still
5 more forms to complete registration'
Or something like 'submitting value, then validating , then calling
action, then redirecting' ?
For the first one, well, it's just a matter of showing picture
<h:graphicsImage
value="/images/progress/step_#{myprogressbean.currentStep}.png"/>
For the second one, as everything happens server side there is no point
trying to show a client progress bar as there is no way in http protocol
for server to inform client of such progress.
> or if not, some hints on how to make one?
>
There are lots of docs on the net on how to create your own components.
You problem however might be that JSF renders html, not pictures :). So
you might go the javascript way. Personnaly, i like the most simple gif
animation that get removed when operation is complete :)
>
> Regards,
>
> BTJ
>
>