Willow documentation

Hi Tomas,

Comments inline.

On Sun, Jan 19, 2020 at 2:59 PM Tomaž Turk <[hidden email]> wrote:

Dear all,

I'm trying out Willow which looks very interesting, however I'm struggling with simple examples ... 

I basically follow the blogs (here). I loaded Willow with Bootstrap and prepared the To-Do app as described in blog series. This works OK, however when I try to do something more, like

    button := AsynchronicButtonWebView labeled: 'Now it''s time to click'.
    button onTrigger executeOnClient: [ :canvas | canvas javascript alert: 'You just clicked a button' ]

the browser's javascript gives no response, and its console reports some errors:

I will check because this looks like a problem in the online version of the jquery library. You've got this error following just the tutorial steps?

It looks like problems with libraries. I checked the examples in WillowPlayground (which works OK, BTW), and found out that some basic things are way richer than described in the blogs. For instance, component supplier is not just

componentSupplierForApplication
    ^ Bootstrap4ComponentSupplier online

as in the blog, but:

componentSupplierForApplication
    ^ BootstrapComponentSupplier
        withBootstrapLibrary: (self deploymentMode libraryFor: Bootstrap3MetadataLibrary) withoutOptionalTheme
        selectLibrary: ((self deploymentMode libraryFor: BootstrapSelectLibrary) using: self language)
        datepickerLibrary: ((self deploymentMode libraryFor: BootstrapDatepickerLibrary) using: self language)
        typeaheadLibrary: (self deploymentMode libraryFor: BootstrapTypeaheadLibrary) new

There are two operations modes for the component supplier.

1. If your application will be online on the open internet you can use  Bootstrap4ComponentSupplier online, and this will get the required JS libraries from the official CDNs.
   
2. The second option is to self-serve the libraries (this case is more common for applications that will run in a closed environment like a company intranet, or a heavy regulated environment where the access to open resources on the internet are probably forbidden or require a lot of bureaucracy and approvals).
   

 

My question is - is there a better documentation available for Willow? It's quite hard to study all bits and pieces from scratch.

The doc available is the one in the repo under /docs, the blog posts and the sample applications in Willow-Playground. If you have some ideas on missing docs or parts of the documentation that can be improved please fill an issue in  https://github.com/ba-st/Willow/issues

The second question is about the suggested "architecture" or design pattern that should be followed when using Willow. The blog mixes Seaside components (e.g. #PendingTask as a subclass of WAPainter) that engages Seaside rendering elements (e.g.  html paragraph on one hand, with the components supplier's components (e.g. singleLineTextField ...) implemented directly in the Willow Application on the other hand. This probably isn't the way things should be done

Mixing standard Seaside rendering with Willow components it's Ok. The rule to follow here is:

• if the component will need some kind of interaction from the user, a Willow component will suit your needs better. Usually this gets initialized once in the component containing it and then it's rendered many times. In this way you can access the component state easily.
• for elements that are more like presentation parts and will not have any state nor interactions associated it's perfectly Ok to use standard Seaside rendering. The exception here is in the case of containers (divs, spans, etc) that you want to get replaced dynamically, for that cases it's better to use GenericContainerWebView or PhrasingContainerWebView.

Since some versions Willow extended standard Seaside facilities so you can use the command-like interface with standard Seaside brushes. Take a look at WATagBrush Willow extensions. So you can do something like:

html  
  div
    with: [ html text: 'Hi!']
    applying: [:container | container addClass bootstrap backgroundInfo]

 Where the block in applying: allows the same command-like interface available for components.

Best wishes,

Tomaz

Regards,

Gabriel

Hi there.

I just tried reproducing all the steps in the tutorials, then adding the onTrigger for the button, exactly as you wrote in your mail, and it works for me.

I don't get any errors in the console. I implemented it in a clean installation of Pharo with the latest release of Willow-Playground, on Windows 10, rendering with Opera.

Could you check if those same steps give you the result you mention?

Thanks for your interest in Willow!