canvas translator & new version of Seafox

Hi,

I've been working on an html -> canvas translator. Have a look at: http://seafox.seasidehosting.st and click on "Canvas translator". Then in another browser tab bring up your favourite web page (e.g. http://www.seaside.st/) highlight a section and copy. Then return to the "Canvas Translator" and paste into the text box below the default "Rendered html" tab. Be amazed as the html is automatically translated into Seaside canvas rendering methods. All the tabbed views are editable and you can switch between them, allowing you to edit in one and see the translation in another. For example try editing some raw html and flip to the canvas view to see the translation to canvas methods.

The translator is based on the parser I created for the Seafox Firefox plug-in. You can download a new version of the plug-in. Improvements include:

* Code formatting better conforms to Seaside's coding conventions.

* The plug-in now creates an editable syntax highlighted translation (if the translation isn't highlighted by again - there's an occasional weird first-time only bug)

* There's a small test-suite for the parser

You can load the code into your Seaside image with:

Gofer it

squeaksource: 'Seafox';

  package: 'ConfigurationOfSeafox';

  load.

(ConfigurationOfSeafox project version: '0.2-baseline') load.

Note: I've tested mainly on the Mac in Safari. I'd be interested to hear different platform browser combinations work.

Nick

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

Hi Larry,

Seafox is fantastic, but is it possible to output the seaside markup using the original css selectors rather than generating new css classes?  It would make it easier to work with an outside designer. 

I've added a checkbox beneath the edit box, which allows you to disable style -> class transformation. 

I originally added the style -> class transformation as I noticed that in Safari and Chrome, the browser attempts to maintain the style of page by adding style attributes to the elements which often makes the translation difficult to read. Firefox doesn't appear suffer from this issue. 

Hope this helps

Nick

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

This is also very nice, but what I think people working with a designer need is something that translates the html literally to seaside markup, but doesn't do anything with the stylesheets.  

Lets say my designer gives me foo.html that will be part of a seaside application.  He also gives me a foo.css file that handles the layout. What I need is seaside markup that includes the original css classes in line, so that I can re-use the css file that he gave me.  Otherwise, if he gives me another page tomorrow with the same css sheet, I'll end up with at totally new set of derived classes, making it very hard to maintain the stylesheets.  

This may be easier than what you've done since you can ignore the css almost entirely, and just convert, say <div class='foo-form'/>... to html div class: 'foo-form' with:[...

Hi Larry,

This is also very nice, but what I think people working with a designer need is something that translates the html literally to seaside markup, but doesn't do anything with the stylesheets.  

Lets say my designer gives me foo.html that will be part of a seaside application.  He also gives me a foo.css file that handles the layout. What I need is seaside markup that includes the original css classes in line, so that I can re-use the css file that he gave me.  Otherwise, if he gives me another page tomorrow with the same css sheet, I'll end up with at totally new set of derived classes, making it very hard to maintain the stylesheets.  

This may be easier than what you've done since you can ignore the css almost entirely, and just convert, say <div class='foo-form'/>... to html div class: 'foo-form' with:[...

The canvas translator [1] uses a rich-text editor [2] to capture html content. The way the content is pasted into the editor is out of my control and is at the whim of the OS/browser vendor. The translator simply works with what's been pasted in. Safari and Chrome add extra style information when you paste. Firefox doesn't produce the extra style information you see with Safari or Chrome. For you workflow try:

1) Open the html from your designer in Firefox, open another tab containing the canvas translator, copy from your designer's page and paste into the canvas translator

OR

2) open your designer's html page in a *text editor*, open the canvas translator in any browser, click to the "html source" tab in the translator. Copy from the text editor and paste into the "html source" tab. Click on the "Seaside canvas" to see the translation into Seaside canvas methods.

OR

3) Down the Seafox Firefox extension. Open your designer's html page in Firefox. With Seafox installed, the bottom right-hand-side of the browser frame should contain a Seaside star. Click on the star and the page will be converted into Seaside canvas methods.

For you workflow, I think 2) or 3) would be the most suitable.

[1] http://seafox.seasidehosting.st/seaside/canvasapi/canvasTranslator

[2] http://en.wikipedia.org/wiki/Online_rich-text_editor

Hi,

I wonder if it isn't clear from my original announcement that all views are editable. You can type into the canvas view and preview in rendered view OR type html directly into the html source view and flip the the canvas view to see the translation. At least that is the aim.

Nick

On 15 September 2011 09:39, Nick Ager <[hidden email]> wrote:

Hi Larry,

This is also very nice, but what I think people working with a designer need is something that translates the html literally to seaside markup, but doesn't do anything with the stylesheets.  

Lets say my designer gives me foo.html that will be part of a seaside application.  He also gives me a foo.css file that handles the layout. What I need is seaside markup that includes the original css classes in line, so that I can re-use the css file that he gave me.  Otherwise, if he gives me another page tomorrow with the same css sheet, I'll end up with at totally new set of derived classes, making it very hard to maintain the stylesheets.  

This may be easier than what you've done since you can ignore the css almost entirely, and just convert, say <div class='foo-form'/>... to html div class: 'foo-form' with:[...

The canvas translator [1] uses a rich-text editor [2] to capture html content. The way the content is pasted into the editor is out of my control and is at the whim of the OS/browser vendor. The translator simply works with what's been pasted in. Safari and Chrome add extra style information when you paste. Firefox doesn't produce the extra style information you see with Safari or Chrome. For you workflow try:

1) Open the html from your designer in Firefox, open another tab containing the canvas translator, copy from your designer's page and paste into the canvas translator

OR

2) open your designer's html page in a *text editor*, open the canvas translator in any browser, click to the "html source" tab in the translator. Copy from the text editor and paste into the "html source" tab. Click on the "Seaside canvas" to see the translation into Seaside canvas methods.

OR

3) Down the Seafox Firefox extension. Open your designer's html page in Firefox. With Seafox installed, the bottom right-hand-side of the browser frame should contain a Seaside star. Click on the star and the page will be converted into Seaside canvas methods.

For you workflow, I think 2) or 3) would be the most suitable.

[1] http://seafox.seasidehosting.st/seaside/canvasapi/canvasTranslator

[2] http://en.wikipedia.org/wiki/Online_rich-text_editor

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