Best way for change a window style

For a TIP example I want implement in Pharo the steps for build a GUI like that:



The main problem for me is the window style. I understand one way for change the style of windows is create my own UITheme subclass; but exists some alternative way for generate a new style for windows? a generic window: I only want a one panel with the three buttons for close, minimize and maximize, and the rounded corners, much more rebranded in top corners than bottom, with the default behavior of window: draggable for the Desktop.

Perhaps the best way for implement it is know if is possible change a few properties of a panel for have the same behavior of a window.

Many thanks for the help.

On Nov 8, 2010, at 6:21 PM, nullPointer wrote:

>
> For a TIP example I want implement in Pharo the steps for build a GUI like
> that:
>
> http://forum.world.st/file/n3032341/eBox.png 


gorgeous!

> The main problem for me is the window style. I understand one way for change
> the style of windows is create my own UITheme subclass; but exists some
> alternative way for generate a new style for windows? a generic window: I
> only want a one panel with the three buttons for close, minimize and
> maximize, and the rounded corners, much more rebranded in top corners than
> bottom, with the default behavior of window: draggable for the Desktop.

I do not know.

> Perhaps the best way for implement it is know if is possible change a few
> properties of a panel for have the same behavior of a window.
>
> Many thanks for the help.
> --
> View this message in context: http://forum.world.st/Best-way-for-change-a-window-style-tp3032341p3032341.html
> Sent from the Pharo Smalltalk mailing list archive at Nabble.com.
>

>> For a TIP example I want implement in Pharo the steps for build a GUI like
>> that:
>>
>> http://forum.world.st/file/n3032341/eBox.png 
>
>
> gorgeous!

Really cool!

Alexandre

--
_,.;:~^~:;._,.;:~^~:;._,.;:~^~:;._,.;:~^~:;._,.;:
Alexandre Bergel  http://www.bergel.eu
^~:;._,.;:~^~:;._,.;:~^~:;._,.;:~^~:;._,.;:~^~:;.

Finally I implemented the posibility of create a custom windows in CLFramework.

The final visual result fails in somethings, but seems the original:



http://www.youtube.com/watch?v=QAu6fPyz1b0
http://www.youtube.com/watch?v=Gb9NoWFdhXo
http://www.youtube.com/watch?v=5CpUnIH9KVw

Cool !

uibuilder is a very impressive tool !

Pharo must have this type of tool for to be a credible solution in the development of desktop applications.I think that integrate uibuilder in the standard image will be a good idea :)

this is planed ?

Best regards
Olivier
www.auverlot.fr

Cool !

Laurent

On Wed, Jan 5, 2011 at 2:18 AM, nullPointer <[hidden email]> wrote:

Finally I implemented the posibility of create a custom windows in
CLFramework.

The final visual result fails in somethings, but seems the original:

http://forum.world.st/file/n3174741/example.png

http://www.youtube.com/watch?v=QAu6fPyz1b0
http://www.youtube.com/watch?v=Gb9NoWFdhXo
http://www.youtube.com/watch?v=5CpUnIH9KVw
--
View this message in context: http://forum.world.st/Best-way-for-change-a-window-style-tp3032341p3174741.html
Sent from the Pharo Smalltalk mailing list archive at Nabble.com.

This is really good

On Jan 5, 2011, at 2:18 AM, nullPointer wrote:

How do you save the ui once designed because I'm thinking that we could ask one of our guy here to help (implementing a kind of UIBuilder).

Stef

On Jan 5, 2011, at 2:18 AM, nullPointer wrote:

I don´t know if I understand correctly the question...

The design code is saved in a basic message #specmorph:


specMorph

        | cLStatusbar container cLPanel  |

       
        "container"
        container := CLPanel new.
        self containerSpec: container.
        container visible: false.
        container openInWorld.
       
        "cLPanel"
        cLPanel := CLPanel new.
        container addMorph: cLPanel.
        self cLPanelSpec: cLPanel.
       
        "cLStatusbar"
        cLStatusbar := CLStatusbar new.
        cLPanel addMorph: cLStatusbar.
        self cLStatusbarSpec: cLStatusbar.

        ^container

and another spec method for define each control of view, in current example be #cLPanelSpec:, #cLStatusbarSpec: and #containerSpec:, for example:

cLPanelSpec: aTCLControl

        aTCLControl name: 'cLPanel'.
        aTCLControl usePolymorphStyleMechanism: false.
        aTCLControl balloonText: nil.
        aTCLControl enabled: true.
        aTCLControl location: 0@0.
        aTCLControl extent: 530@377.
        aTCLControl anchors: {true .true .true .true .}.
        aTCLControl imageResource: nil.
        aTCLControl style: {(BorderStyle width: 0 color: Color transparent) .(Color r: 0.892 g: 0.887 b: 0.879) .(Color r: 0.503 g: 0.553 b: 0.662) .false .true .}.
        aTCLControl minWidth: 2.
        aTCLControl minHeight: 2.
        aTCLControl layout: {ProportionalLayout .#spaceFill .#spaceFill .0 .false .false .false .0 .0 .1073741823 .#topToBottom .#none .#center .#topLeft .#topLeft .#none .#none .}.


I believe the definition of UI must be do with XUL, or XAML. Of that way don´t need a designer in Smalltalk, else could be use some of tools for create XAML o XUL uis. Later, a "Reader" could parse the XML and build a Morphic GUI or a Seaside GUI.


Regards

> I don´t know if I understand correctly the question...

Yes
ok this is better than to serialize the object.

> I believe the definition of UI must be do with XUL, or XAML. Of that way
> don´t need a designer in Smalltalk, else could be use some of tools for
> create XAML o XUL uis. Later, a "Reader" could parse the XML and build a
> Morphic GUI or a Seaside GUI.

As I told you before (read my previous emails) you do not need XML or XAML. You just need what is done in VW a spec
They have done that and it works well. Here I did not formatted it well but you GET EXACTLY THE SAME EXPRESSION POWER THAN XML
without the need for yet another parser.

can be turned into

#(Spec
        name:  'cLPanel';
        usePolymorphStyleMechanism: false;
        ...
        and...)

this is strictly equivalent to XML. Now if you build an XML reader we will be able to reuse the interpretation (oh there is this reference in the XML then
I should create an object of a specific class).



Look at the example below for the changeList widget. I do not have the time to format it well.



#(#{UI.FullSpec} #window: #(#{UI.WindowSpec}
        #label: #(#{Kernel.UserMessage} #key: #ChangeList #defaultString: 'Change List' #catalogID: #labels)
        #min: #(#{Core.Point} 300 400) #bounds: #(#{Graphics.Rectangle} 512 268 942 768)
        #menu: #menuBar #isEventDriven: true)
        #component: #(#{UI.SpecCollection}
        #collection: #(#(#{UI.SequenceViewSpec}
                                        #properties: #(#{UI.PropertyListDictionary} #dragOkSelector #wantToDrag: #dragEnterSelector #dragEnter: #dragOverSelector #dragOver: #dragStartSelector #doDrag: #dropSelector #drop: #dragExitSelector #dragLeave:)
                                        #layout: #(#{Graphics.LayoutFrame} 0 0 0 0 -100 1 150 0)
                                                                #name: #listView
                                                                #model: #selectionInList
                                                                #callbacksSpec: #(#{UI.UIEventCallbackSubSpec} #doubleClickSelector: #toggleRemoveForListController: #requestValueChangeSelector: #changeRequest) #menu: #changeListMenuHolder) #(#{UI.CompositeSpecCollection} #collection: #(#(#{UI.CheckBoxSpec} #layout: #(#{Core.Point} 4 0) #model: #fileFilterAdaptor #label: #(#{Kernel.UserMessage} #key: #file #defaultString: 'file' #catalogID: #labels)) #(#{UI.CheckBoxSpec} #layout: #(#{Core.Point} 4 25) #model: #changeTypeFilterAdaptor #label: #(#{Kernel.UserMessage} #key: #type #defaultString: 'type' #catalogID: #labels)) #(#{UI.CheckBoxSpec} #layout: #(#{Core.Point} 4 50) #model: #classNameFilterAdaptor #label: #(#{Kernel.UserMessage} #key: #class #defaultString: 'class' #catalogID: #labels)) #(#{UI.CheckBoxSpec} #layout: #(#{Core.Point} 4 75) #model: #protocolFilterAdaptor #label: #(#{Kernel.UserMessage} #key: #protocol #defaultString: 'protocol' #catalogID: #labels)) #(#{UI.CheckBoxSpec} #layout: #(#{Core.Point} 4 100) #model: #selectorFilterAdaptor #label: #(#{Kernel.UserMessage} #key: #selector #defaultString: 'selector' #catalogID: #labels)) #(#{UI.CheckBoxSpec} #layout: #(#{Core.Point} 4 125) #model: #valuesFilterAdaptor #label: #(#{Kernel.UserMessage} #key: #same #defaultString: 'same' #catalogID: #labels))) #compositeSpec: #(#{UI.CompositeSpec} #layout: #(#{Graphics.LayoutFrame} -100 1 0 0 0 1 150 0) #name: #filters #flags: 8)) #(#{UI.ResizingSplitterSpec} #layout: #(#{Graphics.LayoutFrame} 0 0 150 0 0 1 153 0) #name: #ResizingSplitter1 #horizontal: true #minAboveSize: 150 #minBelowSize: 25 #aboveWidgets: 'listView filters' #belowWidgets: 'textCanvas') #(#{UI.SubCanvasSpec} #layout: #(#{Graphics.LayoutFrame} 0 0 153 0 0 1 0 1) #name: #textCanvas #flags: 0 #minorKey: #standardText))))


The first view is what you get in the UIbuilder and the second view is the widget once it is open






>
>
> Regards
>
> --
> View this message in context: http://forum.world.st/Best-way-for-change-a-window-style-tp3032341p3175227.html
> Sent from the Pharo Smalltalk mailing list archive at Nabble.com.
>

First people should use it, second we should check if the code is overriding or not the code in the image (if this is the case we should see how the code in the kernel and in the builder should be changed to avoid overrides), ....

Now you can load the package and use it. and this is the best move for pushing its adoption. I looked at the code long time ago and I should redo it.

Stef


On Jan 5, 2011, at 8:38 AM, Olivier Auverlot wrote:

On 5 January 2011 10:07, Stéphane Ducasse <[hidden email]> wrote:
> This is really good
>
+1

This is something, morphic was needed 10 years ago. Not saying about today.



--
Best regards,
Igor Stasenko AKA sig.

Yeah, that is dicussed before, many times.

UIBuilder is dead, and I believe any type of classic designer like VW use.
Try implement a classic designer for UIs is lost time. I have many time for lost :)

I believe the future is WPF, and the tools for generate XAML. Too exists some tools for create XUL. Don´t is needed a UI designer in Smalltalk, only is needed a "Reader" for build the UI from a XML text.

Regards.

On Jan 5, 2011, at 12:38 PM, nullPointer wrote:

>
> Yeah, that is dicussed before, many times.
>
> UIBuilder is dead, and I believe any type of classic designer like VW use.
> Try implement a classic designer for UIs is lost time. I have many time for
> lost :)

I do not think so but this is your right to think that
>
> I believe the future is WPF, and the tools for generate XAML.

oh no. You mix the techno and the concept. Anyway when you will see that I'm right you will smile.

> Too exists
> some tools for create XUL. Don´t is needed a UI designer in Smalltalk, only
> is needed a "Reader" for build the UI from a XML text.
>
> Regards.
> --
> View this message in context: http://forum.world.st/Best-way-for-change-a-window-style-tp3032341p3175319.html
> Sent from the Pharo Smalltalk mailing list archive at Nabble.com.
>

On 5 January 2011 13:41, Stéphane Ducasse <[hidden email]> wrote: yes. please no WPF no XAML .. lets keep it simple.. just UI builder
producing specs in smalltalk code



--
Best regards,
Igor Stasenko AKA sig.

CONTENTS DELETED

CONTENTS DELETED

CLFramework continues in develop but don´t the subset UIBuilder. For the change of window styles I didn´t almost update UIBuilder.

Regards.

WHich is the difference between CLFramework and UIBUilder?  I thought it was the same....

gracias!

mariano