Customizing magritte/pier

I am looking for some tips/info on how to customize the look of
magritte/pier components.

My first excursion found this quite difficult. Since it appears that
textInput's always have class='text'. I solved this by wrapping them in
a div class='agent-code' in a custom component and using the following
to effect the styling.

 .contents form .agent-code input.text {
    width : auto;
}

What would be the correct way to change the pier login buttons to
'Login' 'Cancel' rather than 'Save' 'Cancel'. Do I subclass PULogin, and
change its asComponent to take the std component and search for its
FormDecoration for the button label in order to change it?

many thanks in advance

Keith

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

> My first excursion found this quite difficult. Since it appears  
> that textInput's always have class='text'.

This is a Seaside feature coming from the fact that IE doesn't  
support CSS selectors like input[type=text].

> What would be the correct way to change the pier login buttons to
> 'Login' 'Cancel' rather than 'Save' 'Cancel'. Do I subclass  
> PULogin, and
> change its asComponent to take the std component and search for its
> FormDecoration for the button label in order to change it?

I guess that's the easiest way to do, yes. Relabeling with CSS could  
also work, but again IE will fail to do properly.

Note that Pier also puts a class into the body representing the  
current structure. It does not do so for different commands/views  
though, so maybe we should add that?

Lukas

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


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

 
>> What would be the correct way to change the pier login buttons to
>> 'Login' 'Cancel' rather than 'Save' 'Cancel'. Do I subclass  
>> PULogin, and
>> change its asComponent to take the std component and search for its
>> FormDecoration for the button label in order to change it?
>>    
>
> I guess that's the easiest way to do, yes.
Ok - it's not pretty, but for the record:

MyLoginSubclass-asComponent

    | component |
   
    component := super asComponent.
   
    component allDecorationsDo: [ :dec | dec class = MAFormDecoration
ifTrue: [ dec buttons first value: 'Login'  ]].
   
    ^ component
> Relabeling with CSS could  
> also work, but again IE will fail to do properly.
>  
I am afraid IE is main customer in this case.
> Note that Pier also puts a class into the body representing the  
> current structure. It does not do so for different commands/views  
> though, so maybe we should add that?
>  
Good idea I think

Keith


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

>> Note that Pier also puts a class into the body representing the
>> current structure. It does not do so for different commands/views
>> though, so maybe we should add that?
>
> Good idea I think

Name: Pier-All-lr.224
Author: lr
Time: 11 August 2007, 8:33:38 am
UUID: 5779ace6-07cf-499f-84b8-c8c06d78cf03
Ancestors: Pier-All-lr.223
Dependencies: Pier-Model-cdlm.159, Pier-Tests-lr.72, Pier-Seaside-lr.
188, Pier-Security-lr.85, Pier-Blog-lr.57

- not only add the type of the structure, but also the command and  
view as css classes to the body-tag

Lukas

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


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

  I was finding it tricky to target specific input.text elements within a
custom subclass of MATextInputComponent.

how about this change?

MAComponentRenderer-classFor: aDescription

    ^ String streamContents: [ :stream |
"<mod>"
        stream nextPutAll: ((self childAt: aDescription) ifNil: [
component ]) cssClass.
"</mod>"
        aDescription isReadonly
            ifTrue: [ stream space; nextPutAll: 'readonly' ].
        aDescription isRequired
            ifTrue: [ stream space; nextPutAll: 'required' ].
        (self hasError: aDescription)
            ifTrue: [ stream space; nextPutAll: 'error' ] ]

together with

MAComponent-cssClass
    "Answer a CSS class that should be used when this component is
rendered."
   
    ^ ((self class fullName readStream) next:2;  upToAll: 'Component')
asLowercase
 
best regards

Keith

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