Best way for change a window style

Previous Topic Next Topic
 
classic Classic list List threaded Threaded
24 messages Options
12
Reply | Threaded
Open this post in threaded view
|

Best way for change a window style

gerard alis
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.
Reply | Threaded
Open this post in threaded view
|

Re: Best way for change a window style

Stéphane Ducasse

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.
>


Reply | Threaded
Open this post in threaded view
|

Re: Best way for change a window style

Alexandre Bergel
>> 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
^~:;._,.;:~^~:;._,.;:~^~:;._,.;:~^~:;._,.;:~^~:;.






Reply | Threaded
Open this post in threaded view
|

Re: Best way for change a window style

gerard alis
In reply to this post by gerard alis
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
Reply | Threaded
Open this post in threaded view
|

Re: Best way for change a window style

laurent laffont
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.


Reply | Threaded
Open this post in threaded view
|

Re: Best way for change a window style

Olivier Auverlot
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.



Reply | Threaded
Open this post in threaded view
|

Re: Best way for change a window style

laurent laffont

On Wed, Jan 5, 2011 at 8:38 AM, Olivier Auverlot <[hidden email]> wrote:
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 :)

The first step is to create a ConfigurationOfUIBuilder and put it in http://squeaksource.com/MetacelloRepository. Feel free to do it :)

Laurent

 

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.




Reply | Threaded
Open this post in threaded view
|

Re: Best way for change a window style

Stéphane Ducasse
In reply to this post by gerard alis
This is really good

On Jan 5, 2011, at 2:18 AM, nullPointer 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.
>


Reply | Threaded
Open this post in threaded view
|

Re: Best way for change a window style

Stéphane Ducasse
In reply to this post by gerard alis
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:

>
> 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.
>


Reply | Threaded
Open this post in threaded view
|

Re: Best way for change a window style

gerard alis
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
Reply | Threaded
Open this post in threaded view
|

Re: Best way for change a window style

Stéphane Ducasse
> I don´t know if I understand correctly the question...

Yes

> 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 .}.
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.


> 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 .}.
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.
>


Screen shot 2011-01-05 at 12.03.13 PM.png (15K) Download Attachment
Screen shot 2011-01-05 at 12.03.48 PM.png (29K) Download Attachment
Reply | Threaded
Open this post in threaded view
|

Re: Best way for change a window style

Stéphane Ducasse
In reply to this post by Olivier Auverlot
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:

> 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.
>>
>>
>
>


Reply | Threaded
Open this post in threaded view
|

Re: Best way for change a window style

Igor Stasenko
In reply to this post by Stéphane Ducasse
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.

> On Jan 5, 2011, at 2:18 AM, nullPointer 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.
>>
>
>
>



--
Best regards,
Igor Stasenko AKA sig.

Reply | Threaded
Open this post in threaded view
|

Re: Best way for change a window style

gerard alis
In reply to this post by Stéphane Ducasse
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.
Reply | Threaded
Open this post in threaded view
|

Re: Best way for change a window style

Stéphane Ducasse

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.
>


Reply | Threaded
Open this post in threaded view
|

Re: Best way for change a window style

Igor Stasenko
On 5 January 2011 13:41, Stéphane Ducasse <[hidden email]> wrote:

>
> 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.
>
yes. please no WPF no XAML .. lets keep it simple.. just UI builder
producing specs in smalltalk code

>> 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.
>>
>
>
>



--
Best regards,
Igor Stasenko AKA sig.

Reply | Threaded
Open this post in threaded view
|

Re: Best way for change a window style

hilaire
In reply to this post by Olivier Auverlot
CONTENTS DELETED
The author has deleted this message.
Reply | Threaded
Open this post in threaded view
|

Re: Best way for change a window style

hilaire
In reply to this post by gerard alis
CONTENTS DELETED
The author has deleted this message.
Reply | Threaded
Open this post in threaded view
|

Re: Best way for change a window style

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

Regards.
Reply | Threaded
Open this post in threaded view
|

Re: Best way for change a window style

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

gracias!

mariano

On Wed, Jan 5, 2011 at 6:19 PM, nullPointer <[hidden email]> wrote:

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

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


12