Re: [Seaside-dev] Inserting JQuerySVG plug in

Previous Topic Next Topic
 
classic Classic list List threaded Threaded
7 messages Options
Reply | Threaded
Open this post in threaded view
|

Re: [Seaside-dev] Inserting JQuerySVG plug in

Johan Brichau-2
Hi Lorenzo,

(this seems like a general question - I'm replying this to the general Seaside discussion mailinglist as well)

There is the SeasideDynamicSVG work (www.squeaksource.com/SeasideDynamicSVG) and we included a package SeasideDynamicSVG-JQuery there. This supports the svg.load() (~= jQuery load html) functionality in Seaside and also adds svg animation function to JQAnimate.

You will have to include the jQuery svg javascript files with your Seaside application yourself because he package does not include them.

We are extensively using jQuery and SVG in Seaside, but have never needed to add anything else because merely including the jQuery.dom plugin means you have jQuery support over svg elements. If you want other specific jQuery svg functions integrated, I suggest to add wrappers for them to this package. In this way, all wrappers for jQuery svg stay together.

I'm happy to help you get started on figure out specific problems. So do not hesitate if you have further questions!

Johan

On 28 Jul 2012, at 13:33, Lorenzo Schiavina wrote:

> Hi,
>  
> I am almost new to Seaside, but I have a very good knowledge of ST.
>  
> I would like to use JQuerySVG plug in in Seaside: could you suggest me a detailed documentation that enables me to insert this plug in Seaside or there is anybody that has already done this work?
>  
> Thanks
>  
> Lorenzo
>  
> _______________________________________________
> seaside-dev mailing list
> [hidden email]
> http://lists.squeakfoundation.org/mailman/listinfo/seaside-dev

_______________________________________________
seaside mailing list
[hidden email]
http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside
Reply | Threaded
Open this post in threaded view
|

R: [Seaside] Re: [Seaside-dev] Inserting JQuerySVG plug in

Lorenzo
Hi Johan,

Before all, thank you very much for your kindness and availability.
I try to explain may problem in the general discussion, hoping this could be
useful to someone.
I have to insert a SVG object into JQUilayout for being able to receive
return from SVG events.
The item I need to build is an SVG to which I have to connect a slider for
presenting the slider return value on SVG.
I have already inserted into a JQUilayout pane the SVG standard example and
everything is ok: the display is correct, but I am not able to set up a
callback action.
I suppose I have to change the standard callback of SVG example but I am not
able to do it.
Beside that specific problem, I would like to become able to create and
manage plugin set up and maintain them along Seaside standard, as I have lot
of Smalltalk applications that I would like to update porting them in Web
2.0 and that (I hope) could be of interest for someone.

Any kind of help would be GREATELY appreciate.

Grazie

Lorenzo


-----Messaggio originale-----
Da: [hidden email]
[mailto:[hidden email]] Per conto di Johan
Brichau
Inviato: domenica 29 luglio 2012 15.40
A: Seaside - general discussion
Cc: Seaside - developer list
Oggetto: [Seaside] Re: [Seaside-dev] Inserting JQuerySVG plug in

Hi Lorenzo,

(this seems like a general question - I'm replying this to the general
Seaside discussion mailinglist as well)

There is the SeasideDynamicSVG work (www.squeaksource.com/SeasideDynamicSVG)
and we included a package SeasideDynamicSVG-JQuery there. This supports the
svg.load() (~= jQuery load html) functionality in Seaside and also adds svg
animation function to JQAnimate.

You will have to include the jQuery svg javascript files with your Seaside
application yourself because he package does not include them.

We are extensively using jQuery and SVG in Seaside, but have never needed to
add anything else because merely including the jQuery.dom plugin means you
have jQuery support over svg elements. If you want other specific jQuery svg
functions integrated, I suggest to add wrappers for them to this package. In
this way, all wrappers for jQuery svg stay together.

I'm happy to help you get started on figure out specific problems. So do not
hesitate if you have further questions!

Johan

On 28 Jul 2012, at 13:33, Lorenzo Schiavina wrote:

> Hi,
>  
> I am almost new to Seaside, but I have a very good knowledge of ST.
>  
> I would like to use JQuerySVG plug in in Seaside: could you suggest me a
detailed documentation that enables me to insert this plug in Seaside or
there is anybody that has already done this work?
>  
> Thanks
>  
> Lorenzo
>  
> _______________________________________________
> seaside-dev mailing list
> [hidden email]
> http://lists.squeakfoundation.org/mailman/listinfo/seaside-dev

_______________________________________________
seaside mailing list
[hidden email]
http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside

_______________________________________________
seaside mailing list
[hidden email]
http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside
Reply | Threaded
Open this post in threaded view
|

Re: [Seaside-dev] Inserting JQuerySVG plug in

Johan Brichau-2
Hi Lorenzo,

On 29 Jul 2012, at 17:38, Lorenzo Schiavina wrote:

> I have already inserted into a JQUilayout pane the SVG standard example and
> everything is ok: the display is correct, but I am not able to set up a
> callback action.
> I suppose I have to change the standard callback of SVG example but I am not
> able to do it.

What kind of callback on which element?
It's better if you send actual code snippets of the parts that do not work so we can understand what you are doing.

> Beside that specific problem, I would like to become able to create and
> manage plugin set up and maintain them along Seaside standard, as I have lot
> of Smalltalk applications that I would like to update porting them in Web
> 2.0 and that (I hope) could be of interest for someone.

What kind of plugins are you referring to? Maybe it's best if you take a look at how the jQueryWidget library is organized and implemented. For now, still on squeaksource:http://www.squeaksource.com/JQueryWidgetBox.html (but I promised I will move it to ss3 asap). I'm sure if you browse around in that library and the implementation of the existing bindings, that you can learn how to implement other bindings.

But send us some code about your problem, so we can understand the actual problem.

best,
Johan_______________________________________________
seaside mailing list
[hidden email]
http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside
Reply | Threaded
Open this post in threaded view
|

R: [Seaside] [Seaside-dev] Inserting JQuerySVG plug in

Lorenzo

Hi Johan,

 

I have seen that you have a long line of requests; I feel less alone!

 

So, I try to explain what I would test:

 

what I am trying is to understand how to port a SVG part into a UILayout pane; this is the path I followed:

 

- I have created a class (JQSVGFunctionalTest) that is a subclass of SVGExample (the example of items available in SeasideDinamicsSVG-Examples)

- I have created a class JQSVGXFunctionalTest that is a subclass of JQFormFunctionalTest, which I have seen is working in UILayout

- I have added the following snippet to renderDemosOn: in JQUILayoutExample

 

      html anchor

            url: '#';

            onClick: (html jQuery ajax script: [:s |

                  s << (s jQuery: #center) html: JQSVGXFunctionalTest new.

 

- I have loaded JQSVGXFunctionalTest on JQUILayoutExample with these two snippets:

 

renderContentOn: html

self renderSVGOn: html.

      html anchor

            with: 'svg';

            url: self url;

            onClick: (html jQuery ajax script: [:s |

                        s << (s jQuery: #center) html: JQSVGXFunctionalTest new.

                        self updateHistoryOn: s with: 'SVG demo'  ]);

            with: 'SVG demo'.

 

renderSVGOn: html

JQSVGFunctionalTest new renderContentOn: html

                  self updateHistoryOn: s with: 'SVG demo'  ]);

            with: 'SVG demo'.

 

- the standard presentation of SVGXExample is working in my pane.

- of course, my problem is the callback of renderContentOn:

 

      html anchor

            with: 'svg';

            url: self url;

            onClick: (html jQuery ajax script: [:s |

                        s << (s jQuery: #center) html: JQSVGXFunctionalTest new.

                        self updateHistoryOn: s with: 'SVG demo'  ]);

            with: 'SVG demo'.

 

- I am not familiar with it (yet) and I got it from a very shallow browsing of other callbacks.

 

Can you give me some hints for creating a working one? (i.e. that is able to display the next choice of SVGDemo, as in the original one)

Please, consider that I would like to become quite good in managing this kind of problem, so I will appreciate any suggestion that I will be very happy to deepen myself.

 

(My secret dream is to become as good as you)

 

Many thanks

 

Ciao

 

Lorenzo

 

 

 

 

-----Messaggio originale-----
Da: [hidden email] [mailto:[hidden email]] Per conto di Johan Brichau
Inviato: lunedì 30 luglio 2012 9.23
A: Seaside - general discussion
Oggetto: Re: [Seaside] [Seaside-dev] Inserting JQuerySVG plug in

 

Hi Lorenzo,

 

On 29 Jul 2012, at 17:38, Lorenzo Schiavina wrote:

 

> I have already inserted into a JQUilayout pane the SVG standard example and

> everything is ok: the display is correct, but I am not able to set up a

> callback action.

> I suppose I have to change the standard callback of SVG example but I am not

> able to do it.

 

What kind of callback on which element?

It's better if you send actual code snippets of the parts that do not work so we can understand what you are doing.

 

> Beside that specific problem, I would like to become able to create and

> manage plugin set up and maintain them along Seaside standard, as I have lot

> of Smalltalk applications that I would like to update porting them in Web

> 2.0 and that (I hope) could be of interest for someone.

 

What kind of plugins are you referring to? Maybe it's best if you take a look at how the jQueryWidget library is organized and implemented. For now, still on squeaksource:http://www.squeaksource.com/JQueryWidgetBox.html (but I promised I will move it to ss3 asap). I'm sure if you browse around in that library and the implementation of the existing bindings, that you can learn how to implement other bindings.

 

But send us some code about your problem, so we can understand the actual problem.

 

best,

Johan_______________________________________________

seaside mailing list

[hidden email]

http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside


_______________________________________________
seaside mailing list
[hidden email]
http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside
Reply | Threaded
Open this post in threaded view
|

Re: [Seaside-dev] Inserting JQuerySVG plug in

Johan Brichau-2
Lorenzo,

Sorry for the long delay in answering.
Browsing through your email, the following questions/comments pop into mind:

- What browser are you using?

- Do I understand it correctly that the SVGExample renders correctly inside the JQUiLayout component? Or do you mean that the SVGExample works standalone? In general, does the SVG rendering work in your image?

- If you are concatenating JS expressions using the << message, do not forget to put parentheses right. E.g:
        s << (s jQuery: #center) html: JQSVGXFunctionalTest new
                should be:
        s << ((s jQuery: #center) html: JQSVGXFunctionalTest new)
(it does often work correctly without the parentheses too but it depends on the situation and thus better to always put them correctly)

- Never send #renderContentOn: directly. To render a component, you should send #renderOn: to the component (or #render: to the canvas)

- Are you sending #beHtml5 in any updateRoot: method? I am not sure, but inline SVG only works for sure in html5. SVG works in different browsers and in different ways, but since over a year ago, we are using the standard SVG HTML5 embedding (works in Chrome, Firefox, safari, ...)

- I am not sure I see where you actually render the svg canvas itself. In each SVG component, we have the following control flow:

Somewhere inside renderContentOn:
        ...
        html svg  
                width: '1200px';
                height: '1000px';
                drawWith:[:svg | svg render: self]].

SVG is then rendered inside the drawSVGContentOn: method of that component.

Let's see if we make progress from here.

Johan

On 31 Jul 2012, at 19:43, Lorenzo Schiavina wrote:

> Hi Johan,
>  
> I have seen that you have a long line of requests; I feel less alone!
>  
> So, I try to explain what I would test:
>  
> what I am trying is to understand how to port a SVG part into a UILayout pane; this is the path I followed:
>  
> - I have created a class (JQSVGFunctionalTest) that is a subclass of SVGExample (the example of items available in SeasideDinamicsSVG-Examples)
> - I have created a class JQSVGXFunctionalTest that is a subclass of JQFormFunctionalTest, which I have seen is working in UILayout
> - I have added the following snippet to renderDemosOn: in JQUILayoutExample
>  
>       html anchor
>             url: '#';
>             onClick: (html jQuery ajax script: [:s |
>                   s << (s jQuery: #center) html: JQSVGXFunctionalTest new.
>  
> - I have loaded JQSVGXFunctionalTest on JQUILayoutExample with these two snippets:
>  
> renderContentOn: html
> self renderSVGOn: html.
>       html anchor
>             with: 'svg';
>             url: self url;
>             onClick: (html jQuery ajax script: [:s |
>                         s << (s jQuery: #center) html: JQSVGXFunctionalTest new.
>                         self updateHistoryOn: s with: 'SVG demo'  ]);
>             with: 'SVG demo'.
>  
> renderSVGOn: html
> JQSVGFunctionalTest new renderContentOn: html
>                   self updateHistoryOn: s with: 'SVG demo'  ]);
>             with: 'SVG demo'.
>  
> - the standard presentation of SVGXExample is working in my pane.
> - of course, my problem is the callback of renderContentOn:
>  
>       html anchor
>             with: 'svg';
>             url: self url;
>             onClick: (html jQuery ajax script: [:s |
>                         s << (s jQuery: #center) html: JQSVGXFunctionalTest new.
>                         self updateHistoryOn: s with: 'SVG demo'  ]);
>             with: 'SVG demo'.
>  
> - I am not familiar with it (yet) and I got it from a very shallow browsing of other callbacks.
>  
> Can you give me some hints for creating a working one? (i.e. that is able to display the next choice of SVGDemo, as in the original one)
> Please, consider that I would like to become quite good in managing this kind of problem, so I will appreciate any suggestion that I will be very happy to deepen myself.
>  
> (My secret dream is to become as good as you)
>  
> Many thanks
>  
> Ciao
>  
> Lorenzo
>  
>  
>  
>  
> -----Messaggio originale-----
> Da: [hidden email] [mailto:[hidden email]] Per conto di Johan Brichau
> Inviato: lunedì 30 luglio 2012 9.23
> A: Seaside - general discussion
> Oggetto: Re: [Seaside] [Seaside-dev] Inserting JQuerySVG plug in
>  
> Hi Lorenzo,
>  
> On 29 Jul 2012, at 17:38, Lorenzo Schiavina wrote:
>  
> > I have already inserted into a JQUilayout pane the SVG standard example and
> > everything is ok: the display is correct, but I am not able to set up a
> > callback action.
> > I suppose I have to change the standard callback of SVG example but I am not
> > able to do it.
>  
> What kind of callback on which element?
> It's better if you send actual code snippets of the parts that do not work so we can understand what you are doing.
>  
> > Beside that specific problem, I would like to become able to create and
> > manage plugin set up and maintain them along Seaside standard, as I have lot
> > of Smalltalk applications that I would like to update porting them in Web
> > 2.0 and that (I hope) could be of interest for someone.
>  
> What kind of plugins are you referring to? Maybe it's best if you take a look at how the jQueryWidget library is organized and implemented. For now, still on squeaksource:http://www.squeaksource.com/JQueryWidgetBox.html (but I promised I will move it to ss3 asap). I'm sure if you browse around in that library and the implementation of the existing bindings, that you can learn how to implement other bindings.
>  
> But send us some code about your problem, so we can understand the actual problem.
>  
> best,
> Johan_______________________________________________
> seaside mailing list
> [hidden email]
> http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside
> _______________________________________________
> seaside mailing list
> [hidden email]
> http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside

_______________________________________________
seaside mailing list
[hidden email]
http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside
Reply | Threaded
Open this post in threaded view
|

Re: R: [Seaside] Re: [Seaside-dev] Inserting JQuerySVG plug in

Holger Kleinsorgen
In reply to this post by Lorenzo
Hello,

Lorenzo wrote
Before all, thank you very much for your kindness and availability.
I try to explain may problem in the general discussion, hoping this could be
useful to someone.
I have to insert a SVG object into JQUilayout for being able to receive
return from SVG events.
The item I need to build is an SVG to which I have to connect a slider for
presenting the slider return value on SVG.
I have already inserted into a JQUilayout pane the SVG standard example and
everything is ok: the display is correct, but I am not able to set up a
callback action.
I'm not sure if that is what you're looking for, but here's a rough sketch:

- a subclass of JQUILayout that renders the SVG examples:

https://dl.dropbox.com/u/21555916/smalltalk/JQSVGExample.st

- the SVG examples are not AJAX-ified, so callbacks like the anchors in the Smiley example have to be AJAX-ified by replacing #callback: with an appropriate AJAX request.

Reply | Threaded
Open this post in threaded view
|

R: R: [Seaside] Re: [Seaside-dev] Inserting JQuerySVG plug in

Lorenzo
Hi Holger and Johan,

thank you very much for your valuable help.
I succeeded in my experiences and now I can complete my project.
If ever, now or in the future, you will be interested into fuzzy logic
and/or expert systems, please call me!

Thank you

Lorenzo

-----Messaggio originale-----
Da: [hidden email]
[mailto:[hidden email]] Per conto di Holger
Kleinsorgen
Inviato: lunedì 6 agosto 2012 17.24
A: [hidden email]
Oggetto: Re: R: [Seaside] Re: [Seaside-dev] Inserting JQuerySVG plug in

Hello,


Lorenzo wrote

>
> Before all, thank you very much for your kindness and availability.
> I try to explain may problem in the general discussion, hoping this could
> be
> useful to someone.
> I have to insert a SVG object into JQUilayout for being able to receive
> return from SVG events.
> The item I need to build is an SVG to which I have to connect a slider for
> presenting the slider return value on SVG.
> I have already inserted into a JQUilayout pane the SVG standard example
> and
> everything is ok: the display is correct, but I am not able to set up a
> callback action.
>

I'm not sure if that is what you're looking for, but here's a rough sketch:

- a subclass of JQUILayout that renders the SVG examples:

https://dl.dropbox.com/u/21555916/smalltalk/JQSVGExample.st

- the SVG examples are not AJAX-ified, so callbacks like the anchors in the
Smiley example have to be AJAX-ified by replacing #callback: with an
appropriate AJAX request.





--
View this message in context:
http://forum.world.st/Re-Seaside-dev-Inserting-JQuerySVG-plug-in-tp4642053p4
643363.html
Sent from the Seaside General mailing list archive at Nabble.com.
_______________________________________________
seaside mailing list
[hidden email]
http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside

_______________________________________________
seaside mailing list
[hidden email]
http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside