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

Johan Brichau johan at inceptive.be
Sun Aug 5 18:43:42 UTC 2012


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: seaside-bounces at lists.squeakfoundation.org [mailto:seaside-bounces at lists.squeakfoundation.org] 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
> seaside at lists.squeakfoundation.org
> http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside
> _______________________________________________
> seaside mailing list
> seaside at lists.squeakfoundation.org
> http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside



More information about the seaside mailing list