Component for Network Speedtest

Community Driven Extensions Project
Melloware
Posts: 3716
Joined: 22 Apr 2013, 15:48

01 Nov 2017, 20:35

Do you mind posting more XHTML here on how you envision this component being used such as ...

Code: Select all

<pe:speedtest  widgetVar="speedtest">
    <p:ajax listener="#{resultListener.results}" />
</pe:speedtest>

<p:button onclick="PF('speedtest').start()"/>
That will help me figure out how to help...
PrimeFaces Developer | PrimeFaces Extensions Developer
GitHub Profile: https://github.com/melloware
PrimeFaces Elite 13.0.0 / PF Extensions 13.0.0
PrimeReact 9.6.1

stefan.sibitz
Posts: 38
Joined: 11 Nov 2016, 09:44

01 Nov 2017, 20:52

Yes, something like this, but i am thinking to keep it "small" to also add the listener direct to the component if it's possible:

Code: Select all

<pe:speedtest  widgetVar="speedtest" listener="#{resultListener.results}"/>

<p:button onclick="PF('speedtest').start()"/>
and on the Method-Expression on the managed bean should be something like:

Code: Select all

public void results(Double TimeMS, Double JitterMS, Double DownloadMbps, Double UploadMbps)
...

But i don't know how to implement this (In the right way)
in the primefaces extension's framework...
------------
Using Wildfly 11.0.0,
Mojarra 2.2.13.SP4

stefan.sibitz
Posts: 38
Joined: 11 Nov 2016, 09:44

01 Nov 2017, 20:58

But also the way with the

Code: Select all

<p:ajax listener="..."/>
sound interesting if i can call this then from the javascript-part of my component
(when the measuring is done and the result's are displayed...)
------------
Using Wildfly 11.0.0,
Mojarra 2.2.13.SP4

tandraschko
PrimeFaces Core Developer
Posts: 3979
Joined: 03 Dec 2010, 14:11
Location: Bavaria, DE
Contact:

01 Nov 2017, 21:03

Please use p:ajax listener... It's the preferred way and 95% of the components works with attached behaviors (p:ajax in this case).
Thomas Andraschko

PrimeFaces | PrimeFaces Extensions

Apache Member | OpenWebBeans, DeltaSpike, MyFaces, BVal, TomEE

Sponsor me: https://github.com/sponsors/tandraschko
Blog: http://tandraschko.blogspot.de/
Twitter: https://twitter.com/TAndraschko

Melloware
Posts: 3716
Joined: 22 Apr 2013, 15:48

01 Nov 2017, 22:07

OK set let's assume you do it like this...

Code: Select all

<pe:speedtest  widgetVar="speedtest">
    <p:ajax listener="#{resultListener.results}" />
</pe:speedtest>

<p:button onclick="PF('speedtest').start()"/>
Then in your resultListener code the java method will accept a POJO called SpeedTestEvent ...

Code: Select all

public void resultListener(final SpeedTestEvent speedTestEvent) {
       speedTestEvent.getTimeMs();
       ...
   }
Here is an example ClipboardSuccessEvent POJO when the clipboard copies successfully:

https://github.com/primefaces-extension ... Event.java


Then here is how to pass those values from Javascript to your Event POJO:

https://github.com/primefaces-extension ... get.js#L80
PrimeFaces Developer | PrimeFaces Extensions Developer
GitHub Profile: https://github.com/melloware
PrimeFaces Elite 13.0.0 / PF Extensions 13.0.0
PrimeReact 9.6.1

stefan.sibitz
Posts: 38
Joined: 11 Nov 2016, 09:44

02 Nov 2017, 08:33

OK, I will try to do it in that way with ajax.
I then will also test the component against my real project to see if it's work right on each devices / modern browsers.
In the primefaces-extension showcase (locally) the component is already working.

Thank you for the code snippet's -
a good example is all what a developer need's :lol:
------------
Using Wildfly 11.0.0,
Mojarra 2.2.13.SP4

Melloware
Posts: 3716
Joined: 22 Apr 2013, 15:48

02 Nov 2017, 15:28

If you get stuck let me know. Make sure to look at the ClipboarRenderer the important lines are ...

Code: Select all

@Override
    public void decode(final FacesContext context, final UIComponent component) {
        decodeBehaviors(context, component);
    }
And...

Code: Select all

encodeClientBehaviors(context, clipboard);

wb.finish();
PrimeFaces Developer | PrimeFaces Extensions Developer
GitHub Profile: https://github.com/melloware
PrimeFaces Elite 13.0.0 / PF Extensions 13.0.0
PrimeReact 9.6.1

stefan.sibitz
Posts: 38
Joined: 11 Nov 2016, 09:44

02 Nov 2017, 17:47

I currently got it running in the Primefaces-Extensions-Showcase by now
and added some optional Attributes to makes it more configurable.

The "optional" caption*-Attributes are needed for my project because i am using my own translation-service
(instead of the "static" msg[]-Tag's) which can (re)load resources
at runtime, automatically check's for new languages and so on...
Also the color of the single speed-test's can be changed by setting the optional attribute.

On the jsf-side i can use it by this simple example...

Code: Select all

	<!-- EXAMPLE-SOURCE-START -->
    <p:growl id="growl" autoUpdate="true" showDetail="true" showSummary="true" />

    <pe:speedtest id="speedtest" widgetVar="speedtest" captionDownload="Down" captionUpload="Up" captionJitter="Jit" captionPing="Pg">
        <p:ajax listener="#{speedTestController.SaveResults}" process="@this" update="growl" />
    </pe:speedtest>

    <div class="ui-g">
        <p:commandButton id="btnStart" value="Start Speedtest" icon="fa fa-tachometer" style="width:100%;" onclick="PF('speedtest').start();"/>
    </div>
	<!-- EXAMPLE-SOURCE-END -->
...and as bean i can now use:

Code: Select all

    public void SaveResults(SpeedTestEvent speedTestEvent)
    {
        String msg =    "PingTimeMS       ='"+String.valueOf(speedTestEvent.getPingTimeMS()) + "', \n"+
                        "Jitter           ='"+String.valueOf(speedTestEvent.getJitterTimeMS()) + "', \n" +
                        "SpeedMbpsDownload='"+String.valueOf(speedTestEvent.getSpeedMbpsDownload()) + "', \n" +
                        "SpeedMbpsUpload='"+String.valueOf(speedTestEvent.getSpeedMbpsUpload()) +"'";
        FacesMessage message =  new FacesMessage(FacesMessage.SEVERITY_INFO, "Saved your speed results:", msg);
        FacesContext.getCurrentInstance().addMessage(null, message);
    }
The only thing i don't get running is to build up the primefaces-extension libraries
in combination with the primefaces 6.2 SNAPSHOT
and get it running in my own application cause of multiple errors beginning on the start page
coming from javascript...
...here i need to analyze if it's a bug in Primefaces 6.2-SNAPSHOT or in my application...

If you want you can see/preview my fork of the primefaces-extensions-core at:
https://github.com/ssibitz/core

Feedback is welcome :-)
------------
Using Wildfly 11.0.0,
Mojarra 2.2.13.SP4

Melloware
Posts: 3716
Joined: 22 Apr 2013, 15:48

02 Nov 2017, 18:35

I just reviewed it and the code is looking pretty clean thanks for following all the conventions!
PrimeFaces Developer | PrimeFaces Extensions Developer
GitHub Profile: https://github.com/melloware
PrimeFaces Elite 13.0.0 / PF Extensions 13.0.0
PrimeReact 9.6.1

Melloware
Posts: 3716
Joined: 22 Apr 2013, 15:48

02 Nov 2017, 18:40

Can you try and change

Code: Select all

 @ResourceDependency(library = "primefaces-extensions", name = "speedtest/raphael-min.js"),
to..

Code: Select all

@ResourceDependency(library="primefaces", name="raphael/raphael.js"),
And see if it still works? PrimeFaces includes raphael.js in their JAR.
PrimeFaces Developer | PrimeFaces Extensions Developer
GitHub Profile: https://github.com/melloware
PrimeFaces Elite 13.0.0 / PF Extensions 13.0.0
PrimeReact 9.6.1

Post Reply

Return to “Extensions”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 3 guests