Styling Magritte

I am interested to know how people are managing to style Magritte Forms.
I don't know if attachments get through but I have attached an image of
what I have managed to achieve so far...

I dont know much about css, but I assumed that it was not possible to
take the tables of field key/values generated by magritte and to move
things around as much as I would like.

I produced my own renderer which renders the key/values, using divs.
However I still have some problems. For example, the "Confirm" "Cancel"
buttons are rendered outside of the form as a decoration. As such they
have no knowledge of the form that they are operating on, and so render
without any identifiable "class". Style applied to them applies to all
uses of "Confirm"/"Cancel" buttons.

It looks to me like some re-architecting is needed here, its not that I
dont like the use of the decorator in this instance. I am thinking that
this is another instance where the lack of child parent communication is
a problem.

regards

Keith


_______________________________________________
SmallWiki, Magritte, Pier and Related Tools ...
https://www.iam.unibe.ch/mailman/listinfo/smallwiki

> I am interested to know how people are managing to style Magritte  
> Forms. I don't know if attachments get through but I have attached  
> an image of what I have managed to achieve so far...

Wow, that looks very interesting.

> I dont know much about css, but I assumed that it was not possible  
> to take the tables of field key/values generated by magritte and to  
> move things around as much as I would like.

Then it is probably easier to use MACssRenderer. In some situations it  
is really hard to use CSS to style a Magritte form as it is generated  
automatically. In such cases it might be easier to manually render the  
Magritte fields. For example the login form on www.seasidehosting.st  
instantiates a normal Magritte component, but then renders the  
individual fields manually by querying #childAt: for the child  
components.

> It looks to me like some re-architecting is needed here, its not  
> that I dont like the use of the decorator in this instance. I am  
> thinking that this is another instance where the lack of child  
> parent communication is a problem.

The latest version of Magritte-Seaside adds the class .magritte to  
<form> tags rendered by Magritte. This allows to distinguish Magritte  
forms much simpler from other forms. The standard MATableRenderer can  
now be styles like this:

        .magritte table th { /* the label styles */ }
        .magritte table td input { /* the control styles */ }
        .magritte .buttons input { /* the button-styles */ }
        etc.

You can find more examples of form styling in the default CSS of Pier.  
Pier doesn't use the new .magritte class yet.

If you want to differentiate multiple Magritte forms, you probably  
want to enclose them into DIVs with different clases or IDs, so that  
you can style them along:

        .minimal ... { }
        .sideways ... { }

Cheers,
Lukas

--
Lukas Renggli
http://www.lukas-renggli.ch

_______________________________________________
SmallWiki, Magritte, Pier and Related Tools ...
https://www.iam.unibe.ch/mailman/listinfo/smallwiki

Richard E. Flower wrote: Basic packages which you may or may not want to use...

Installer lukas project: 'magritteaddons';
    install: 'Magritte-RealMemento';
    install: 'Magritte-CustomBuilder';
    install: 'Magritte-Scriptaculous.

Magritte-RealMemento package uses a real copy of the object as a
memento, rather than a dictionary of key value pairs. The real object
has behaviour which may relate data items. To use the real memento you
have to override #mementoClass for your model.

"Magritte-CustomBuilder" sets the default builder to use a numeric in
the description selector to set the priority, like so. (I find this very
useful)

description0250Documents

    ^ MAToManyRelationDescription new
        classes: (Array with: DTIExternalFileModel);

        "Magritte-Scriptaculous extends the accessors so you can do
things like this...
          Where the visibility of this item is determined by
#hasOrderNumber."

        accessor: (#documents asAccessor visible: #hasOrderNumber);

        componentClass: MAOneToManyDocumentsComponent;
         label: 'Documents';
        yourself

Accessors augmented in this manner can provide #readonly #visible
#cssClasses #tooltip and #options (for lists)

For rendering, lukas has his MACssRenderer, and I have my MADivsRenderer
(part of Magritte-Scriptaculous).
There is also Magritte-ComponentDecoration another add on that you might
find useful.

best regards

Keith





_______________________________________________
SmallWiki, Magritte, Pier and Related Tools ...
https://www.iam.unibe.ch/mailman/listinfo/smallwiki