Help with the interaction with widgets or morphs like Checkboxes, and Radio buttons and Texteditor boxes

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

Help with the interaction with widgets or morphs like Checkboxes, and Radio buttons and Texteditor boxes

Nelson Pingitore
Hello Pharo Users.  I am seeking help with the interaction with widgets or morphs like Checkboxes, and Radio buttons and Texteditor boxes, I am creating a User Settings Class to learn how to use Pharo. I copied some core widgets from the UITheme exampleBasicControls. I would like to know, starting with the code below, how to detect if the User has selected the "Ok" or "Cancel" button in the lower right of the form, and then if the user selects "Ok" how do I detect the state of the widgets (Checkboxes, Radio buttons, or Texteditor), and save those states to instance variables?
 
|dialog builder radioModel treeModel CheckboxA|
 builder := UITheme exampleBuilder.
 dialog := (builder newPluggableDialogWindow: 'Example basic controls') useDefaultOKCancelButton.
 radioModel := ExampleRadioButtonModel new.
 treeModel := ValueHolder new contents: TextStyle actualTextStyles explorerContents.
 dialog contentMorph:
 (
  (
   dialog newRow:
   {
    dialog newLabelGroup:
    {
     'Normal Label'->(dialog newLabel: 'A Label').
     'Normal Button'->(dialog newButtonFor: nil action: nil label: 'A Button' help: 'This is a button').
     'Default Button'->((dialog newButtonFor: nil action: nil label: 'Default Button' help: 'This is a default button') isDefault: true).
     'Selected Button'->(dialog newButtonFor: (ValueHolder new contents: true) getState: #contents
       action: nil arguments: #() getEnabled: nil label: 'A Button' help: 'This is a selected button').
     'Checkbox A'->(dialog newCheckboxFor: (ValueHolder new contents: true)
       getSelected: #contents setSelected: #contents: label: 'A Checkbox' help: 'This is a checkbox').
     'Checkbox B'->(dialog newCheckboxFor: (ValueHolder new contents: true)
       getSelected: #contents setSelected: #contents: label: 'A Checkbox' help: 'This is a checkbox').
     'Checkbox C'->(dialog newCheckboxFor: (ValueHolder new contents: true)
       getSelected: #contents setSelected: #contents: label: 'A Checkbox' help: 'This is a checkbox').
     'Radio Buttons'->
     (
      (
       dialog newColumn:
       {
        (dialog newRadioButtonFor: radioModel getSelected: #isLeft setSelected: #beLeft label: 'Left' help: 'This is a radio buton').
        (dialog newRadioButtonFor: radioModel getSelected: #isCenter setSelected: #beCenter label: 'Center' help: 'This is a radio buton').
        (dialog newRadioButtonFor: radioModel getSelected: #isRight setSelected: #beRight label: 'Right' help: 'This is a radio buton')
       }
      )
     vResizing: #shrinkWrap
     ).   
     'Text Entry'->(dialog newTextEntryFor: (ValueHolder new contents: 'Hello')  getText: #contents setText: #contents: help: 'This is a text entry').
     'Slider'->(dialog newSliderFor: (ValueHolder new contents: 0.5)  getValue: #contents setValue: #contents: help: 'This is a slider').
     'Bump Temp'->(dialog newTextEntryFor: (ValueHolder new contents: '75') getText: #contents setText: #contents: help: 'This is the random shift').
    }.
    dialog newVerticalSeparator.
    dialog newLabelGroup:
    {
     'Drop List'->(dialog newDropListFor: (ListModel new list: #('One' 'Two' 'Three' 'Four'))
       list: #list getSelected: #selectionIndex setSelected: #selectionIndex: help: 'This is a drop list').
     'Normal List'->
     (
      (
       dialog newListFor: (ListModel new list: #('One' 'Two' 'Three' 'Four'); selectionIndex: 3) list: #list selected: #selectionIndex changeSelected: #selectionIndex:
       help: 'This is a list'
      )
      minWidth: 120
     ).
    }.
   }
  )
  vResizing: #spaceFill
 );
 model: nil.
 builder openModal: dialog.
Reply | Threaded
Open this post in threaded view
|

Re: Help with the interaction with widgets or morphs like Checkboxes, and Radio buttons and Texteditor boxes

S Krish
I am not sure I would recommend using Builder.. except for playing initially around.

It is better to simply use the basic capabilities in Morph and tie it up with TableLayout policy.. Proportional Layout

In that you do have a better chance of working these issues out once you get the core behaviors, the API/ methods of each of the morphs. That said many of these morphs are not perfect and will require patience to rip through the attributes you need and save to inst vars et al.

Maybe sometime soon I can package a clean MorphicView system that will alleviate this pain of figuring out Morphic.. but its fun once you figure it out..



On Sat, Mar 31, 2012 at 7:44 AM, Nelson Pingitore <[hidden email]> wrote:
Hello Pharo Users.  I am seeking help with the interaction with widgets or morphs like Checkboxes, and Radio buttons and Texteditor boxes, I am creating a User Settings Class to learn how to use Pharo. I copied some core widgets from the UITheme exampleBasicControls. I would like to know, starting with the code below, how to detect if the User has selected the "Ok" or "Cancel" button in the lower right of the form, and then if the user selects "Ok" how do I detect the state of the widgets (Checkboxes, Radio buttons, or Texteditor), and save those states to instance variables?
 
|dialog builder radioModel treeModel CheckboxA|
 builder := UITheme exampleBuilder.
 dialog := (builder newPluggableDialogWindow: 'Example basic controls') useDefaultOKCancelButton.
 radioModel := ExampleRadioButtonModel new.
 treeModel := ValueHolder new contents: TextStyle actualTextStyles explorerContents.
 dialog contentMorph:
 (
  (
   dialog newRow:
   {
    dialog newLabelGroup:
    {
     'Normal Label'->(dialog newLabel: 'A Label').
     'Normal Button'->(dialog newButtonFor: nil action: nil label: 'A Button' help: 'This is a button').
     'Default Button'->((dialog newButtonFor: nil action: nil label: 'Default Button' help: 'This is a default button') isDefault: true).
     'Selected Button'->(dialog newButtonFor: (ValueHolder new contents: true) getState: #contents
       action: nil arguments: #() getEnabled: nil label: 'A Button' help: 'This is a selected button').
     'Checkbox A'->(dialog newCheckboxFor: (ValueHolder new contents: true)
       getSelected: #contents setSelected: #contents: label: 'A Checkbox' help: 'This is a checkbox').
     'Checkbox B'->(dialog newCheckboxFor: (ValueHolder new contents: true)
       getSelected: #contents setSelected: #contents: label: 'A Checkbox' help: 'This is a checkbox').
     'Checkbox C'->(dialog newCheckboxFor: (ValueHolder new contents: true)
       getSelected: #contents setSelected: #contents: label: 'A Checkbox' help: 'This is a checkbox').
     'Radio Buttons'->
     (
      (
       dialog newColumn:
       {
        (dialog newRadioButtonFor: radioModel getSelected: #isLeft setSelected: #beLeft label: 'Left' help: 'This is a radio buton').
        (dialog newRadioButtonFor: radioModel getSelected: #isCenter setSelected: #beCenter label: 'Center' help: 'This is a radio buton').
        (dialog newRadioButtonFor: radioModel getSelected: #isRight setSelected: #beRight label: 'Right' help: 'This is a radio buton')
       }
      )
     vResizing: #shrinkWrap
     ).   
     'Text Entry'->(dialog newTextEntryFor: (ValueHolder new contents: 'Hello')  getText: #contents setText: #contents: help: 'This is a text entry').
     'Slider'->(dialog newSliderFor: (ValueHolder new contents: 0.5)  getValue: #contents setValue: #contents: help: 'This is a slider').
     'Bump Temp'->(dialog newTextEntryFor: (ValueHolder new contents: '75') getText: #contents setText: #contents: help: 'This is the random shift').
    }.
    dialog newVerticalSeparator.
    dialog newLabelGroup:
    {
     'Drop List'->(dialog newDropListFor: (ListModel new list: #('One' 'Two' 'Three' 'Four'))
       list: #list getSelected: #selectionIndex setSelected: #selectionIndex: help: 'This is a drop list').
     'Normal List'->
     (
      (
       dialog newListFor: (ListModel new list: #('One' 'Two' 'Three' 'Four'); selectionIndex: 3) list: #list selected: #selectionIndex changeSelected: #selectionIndex:
       help: 'This is a list'
      )
      minWidth: 120
     ).
    }.
   }
  )
  vResizing: #spaceFill
 );
 model: nil.
 builder openModal: dialog.

Reply | Threaded
Open this post in threaded view
|

Re: Help with the interaction with widgets or morphs like Checkboxes, and Radio buttons and Texteditor boxes

S Krish
I hope this might help...

Simple SUnit tests.. through basic morphic...

LayoutTests and MorphicWidgetTests would be nice.. #testModelAndView would be basics of what might help...

But they are really the very rudimentary stuff.. Always use Model /controller - presenter along with the View/ UI class. makes it easier..



On Sun, Apr 1, 2012 at 2:54 AM, S Krish <[hidden email]> wrote:
I am not sure I would recommend using Builder.. except for playing initially around.

It is better to simply use the basic capabilities in Morph and tie it up with TableLayout policy.. Proportional Layout

In that you do have a better chance of working these issues out once you get the core behaviors, the API/ methods of each of the morphs. That said many of these morphs are not perfect and will require patience to rip through the attributes you need and save to inst vars et al.

Maybe sometime soon I can package a clean MorphicView system that will alleviate this pain of figuring out Morphic.. but its fun once you figure it out..




On Sat, Mar 31, 2012 at 7:44 AM, Nelson Pingitore <[hidden email]> wrote:
Hello Pharo Users.  I am seeking help with the interaction with widgets or morphs like Checkboxes, and Radio buttons and Texteditor boxes, I am creating a User Settings Class to learn how to use Pharo. I copied some core widgets from the UITheme exampleBasicControls. I would like to know, starting with the code below, how to detect if the User has selected the "Ok" or "Cancel" button in the lower right of the form, and then if the user selects "Ok" how do I detect the state of the widgets (Checkboxes, Radio buttons, or Texteditor), and save those states to instance variables?
 
|dialog builder radioModel treeModel CheckboxA|
 builder := UITheme exampleBuilder.
 dialog := (builder newPluggableDialogWindow: 'Example basic controls') useDefaultOKCancelButton.
 radioModel := ExampleRadioButtonModel new.
 treeModel := ValueHolder new contents: TextStyle actualTextStyles explorerContents.
 dialog contentMorph:
 (
  (
   dialog newRow:
   {
    dialog newLabelGroup:
    {
     'Normal Label'->(dialog newLabel: 'A Label').
     'Normal Button'->(dialog newButtonFor: nil action: nil label: 'A Button' help: 'This is a button').
     'Default Button'->((dialog newButtonFor: nil action: nil label: 'Default Button' help: 'This is a default button') isDefault: true).
     'Selected Button'->(dialog newButtonFor: (ValueHolder new contents: true) getState: #contents
       action: nil arguments: #() getEnabled: nil label: 'A Button' help: 'This is a selected button').
     'Checkbox A'->(dialog newCheckboxFor: (ValueHolder new contents: true)
       getSelected: #contents setSelected: #contents: label: 'A Checkbox' help: 'This is a checkbox').
     'Checkbox B'->(dialog newCheckboxFor: (ValueHolder new contents: true)
       getSelected: #contents setSelected: #contents: label: 'A Checkbox' help: 'This is a checkbox').
     'Checkbox C'->(dialog newCheckboxFor: (ValueHolder new contents: true)
       getSelected: #contents setSelected: #contents: label: 'A Checkbox' help: 'This is a checkbox').
     'Radio Buttons'->
     (
      (
       dialog newColumn:
       {
        (dialog newRadioButtonFor: radioModel getSelected: #isLeft setSelected: #beLeft label: 'Left' help: 'This is a radio buton').
        (dialog newRadioButtonFor: radioModel getSelected: #isCenter setSelected: #beCenter label: 'Center' help: 'This is a radio buton').
        (dialog newRadioButtonFor: radioModel getSelected: #isRight setSelected: #beRight label: 'Right' help: 'This is a radio buton')
       }
      )
     vResizing: #shrinkWrap
     ).   
     'Text Entry'->(dialog newTextEntryFor: (ValueHolder new contents: 'Hello')  getText: #contents setText: #contents: help: 'This is a text entry').
     'Slider'->(dialog newSliderFor: (ValueHolder new contents: 0.5)  getValue: #contents setValue: #contents: help: 'This is a slider').
     'Bump Temp'->(dialog newTextEntryFor: (ValueHolder new contents: '75') getText: #contents setText: #contents: help: 'This is the random shift').
    }.
    dialog newVerticalSeparator.
    dialog newLabelGroup:
    {
     'Drop List'->(dialog newDropListFor: (ListModel new list: #('One' 'Two' 'Three' 'Four'))
       list: #list getSelected: #selectionIndex setSelected: #selectionIndex: help: 'This is a drop list').
     'Normal List'->
     (
      (
       dialog newListFor: (ListModel new list: #('One' 'Two' 'Three' 'Four'); selectionIndex: 3) list: #list selected: #selectionIndex changeSelected: #selectionIndex:
       help: 'This is a list'
      )
      minWidth: 120
     ).
    }.
   }
  )
  vResizing: #spaceFill
 );
 model: nil.
 builder openModal: dialog.



SKRMorphicTests.st (33K) Download Attachment
Reply | Threaded
Open this post in threaded view
|

Re: Help with the interaction with widgets or morphs like Checkboxes, and Radio buttons and Texteditor boxes

Nelson Pingitore
When I am using a construct such as the following:

builder := UITheme exampleBuilder.
 dialog := (builder newPluggableDialogWindow: 'Example basic controls') useDefaultOKCancelButton.
.
.
.

 model: nil.
 builder openModal: dialog.

is there another option other than "openModel", to use to open the dialog?


On Sat, Mar 31, 2012 at 5:34 PM, S Krish <[hidden email]> wrote:
I hope this might help...

Simple SUnit tests.. through basic morphic...

LayoutTests and MorphicWidgetTests would be nice.. #testModelAndView would be basics of what might help...

But they are really the very rudimentary stuff.. Always use Model /controller - presenter along with the View/ UI class. makes it easier..



On Sun, Apr 1, 2012 at 2:54 AM, S Krish <[hidden email]> wrote:
I am not sure I would recommend using Builder.. except for playing initially around.

It is better to simply use the basic capabilities in Morph and tie it up with TableLayout policy.. Proportional Layout

In that you do have a better chance of working these issues out once you get the core behaviors, the API/ methods of each of the morphs. That said many of these morphs are not perfect and will require patience to rip through the attributes you need and save to inst vars et al.

Maybe sometime soon I can package a clean MorphicView system that will alleviate this pain of figuring out Morphic.. but its fun once you figure it out..




On Sat, Mar 31, 2012 at 7:44 AM, Nelson Pingitore <[hidden email]> wrote:
Hello Pharo Users.  I am seeking help with the interaction with widgets or morphs like Checkboxes, and Radio buttons and Texteditor boxes, I am creating a User Settings Class to learn how to use Pharo. I copied some core widgets from the UITheme exampleBasicControls. I would like to know, starting with the code below, how to detect if the User has selected the "Ok" or "Cancel" button in the lower right of the form, and then if the user selects "Ok" how do I detect the state of the widgets (Checkboxes, Radio buttons, or Texteditor), and save those states to instance variables?
 
|dialog builder radioModel treeModel CheckboxA|
 builder := UITheme exampleBuilder.
 dialog := (builder newPluggableDialogWindow: 'Example basic controls') useDefaultOKCancelButton.
 radioModel := ExampleRadioButtonModel new.
 treeModel := ValueHolder new contents: TextStyle actualTextStyles explorerContents.
 dialog contentMorph:
 (
  (
   dialog newRow:
   {
    dialog newLabelGroup:
    {
     'Normal Label'->(dialog newLabel: 'A Label').
     'Normal Button'->(dialog newButtonFor: nil action: nil label: 'A Button' help: 'This is a button').
     'Default Button'->((dialog newButtonFor: nil action: nil label: 'Default Button' help: 'This is a default button') isDefault: true).
     'Selected Button'->(dialog newButtonFor: (ValueHolder new contents: true) getState: #contents
       action: nil arguments: #() getEnabled: nil label: 'A Button' help: 'This is a selected button').
     'Checkbox A'->(dialog newCheckboxFor: (ValueHolder new contents: true)
       getSelected: #contents setSelected: #contents: label: 'A Checkbox' help: 'This is a checkbox').
     'Checkbox B'->(dialog newCheckboxFor: (ValueHolder new contents: true)
       getSelected: #contents setSelected: #contents: label: 'A Checkbox' help: 'This is a checkbox').
     'Checkbox C'->(dialog newCheckboxFor: (ValueHolder new contents: true)
       getSelected: #contents setSelected: #contents: label: 'A Checkbox' help: 'This is a checkbox').
     'Radio Buttons'->
     (
      (
       dialog newColumn:
       {
        (dialog newRadioButtonFor: radioModel getSelected: #isLeft setSelected: #beLeft label: 'Left' help: 'This is a radio buton').
        (dialog newRadioButtonFor: radioModel getSelected: #isCenter setSelected: #beCenter label: 'Center' help: 'This is a radio buton').
        (dialog newRadioButtonFor: radioModel getSelected: #isRight setSelected: #beRight label: 'Right' help: 'This is a radio buton')
       }
      )
     vResizing: #shrinkWrap
     ).   
     'Text Entry'->(dialog newTextEntryFor: (ValueHolder new contents: 'Hello')  getText: #contents setText: #contents: help: 'This is a text entry').
     'Slider'->(dialog newSliderFor: (ValueHolder new contents: 0.5)  getValue: #contents setValue: #contents: help: 'This is a slider').
     'Bump Temp'->(dialog newTextEntryFor: (ValueHolder new contents: '75') getText: #contents setText: #contents: help: 'This is the random shift').
    }.
    dialog newVerticalSeparator.
    dialog newLabelGroup:
    {
     'Drop List'->(dialog newDropListFor: (ListModel new list: #('One' 'Two' 'Three' 'Four'))
       list: #list getSelected: #selectionIndex setSelected: #selectionIndex: help: 'This is a drop list').
     'Normal List'->
     (
      (
       dialog newListFor: (ListModel new list: #('One' 'Two' 'Three' 'Four'); selectionIndex: 3) list: #list selected: #selectionIndex changeSelected: #selectionIndex:
       help: 'This is a list'
      )
      minWidth: 120
     ).
    }.
   }
  )
  vResizing: #spaceFill
 );
 model: nil.
 builder openModal: dialog.



Reply | Threaded
Open this post in threaded view
|

Re: Help with the interaction with widgets or morphs like Checkboxes, and Radio buttons and Texteditor boxes

S Krish
openInWorld / openCenteredInWorld / openInWorld: 

all of them should work..

openModal: does what it says...! makes the dialog modal.



On Sat, Apr 7, 2012 at 9:07 AM, Nelson Pingitore <[hidden email]> wrote:
When I am using a construct such as the following:

builder := UITheme exampleBuilder.
 dialog := (builder newPluggableDialogWindow: 'Example basic controls') useDefaultOKCancelButton.
.
.
.

 model: nil.
 builder openModal: dialog.

is there another option other than "openModel", to use to open the dialog?


On Sat, Mar 31, 2012 at 5:34 PM, S Krish <[hidden email]> wrote:
I hope this might help...

Simple SUnit tests.. through basic morphic...

LayoutTests and MorphicWidgetTests would be nice.. #testModelAndView would be basics of what might help...

But they are really the very rudimentary stuff.. Always use Model /controller - presenter along with the View/ UI class. makes it easier..



On Sun, Apr 1, 2012 at 2:54 AM, S Krish <[hidden email]> wrote:
I am not sure I would recommend using Builder.. except for playing initially around.

It is better to simply use the basic capabilities in Morph and tie it up with TableLayout policy.. Proportional Layout

In that you do have a better chance of working these issues out once you get the core behaviors, the API/ methods of each of the morphs. That said many of these morphs are not perfect and will require patience to rip through the attributes you need and save to inst vars et al.

Maybe sometime soon I can package a clean MorphicView system that will alleviate this pain of figuring out Morphic.. but its fun once you figure it out..




On Sat, Mar 31, 2012 at 7:44 AM, Nelson Pingitore <[hidden email]> wrote:
Hello Pharo Users.  I am seeking help with the interaction with widgets or morphs like Checkboxes, and Radio buttons and Texteditor boxes, I am creating a User Settings Class to learn how to use Pharo. I copied some core widgets from the UITheme exampleBasicControls. I would like to know, starting with the code below, how to detect if the User has selected the "Ok" or "Cancel" button in the lower right of the form, and then if the user selects "Ok" how do I detect the state of the widgets (Checkboxes, Radio buttons, or Texteditor), and save those states to instance variables?
 
|dialog builder radioModel treeModel CheckboxA|
 builder := UITheme exampleBuilder.
 dialog := (builder newPluggableDialogWindow: 'Example basic controls') useDefaultOKCancelButton.
 radioModel := ExampleRadioButtonModel new.
 treeModel := ValueHolder new contents: TextStyle actualTextStyles explorerContents.
 dialog contentMorph:
 (
  (
   dialog newRow:
   {
    dialog newLabelGroup:
    {
     'Normal Label'->(dialog newLabel: 'A Label').
     'Normal Button'->(dialog newButtonFor: nil action: nil label: 'A Button' help: 'This is a button').
     'Default Button'->((dialog newButtonFor: nil action: nil label: 'Default Button' help: 'This is a default button') isDefault: true).
     'Selected Button'->(dialog newButtonFor: (ValueHolder new contents: true) getState: #contents
       action: nil arguments: #() getEnabled: nil label: 'A Button' help: 'This is a selected button').
     'Checkbox A'->(dialog newCheckboxFor: (ValueHolder new contents: true)
       getSelected: #contents setSelected: #contents: label: 'A Checkbox' help: 'This is a checkbox').
     'Checkbox B'->(dialog newCheckboxFor: (ValueHolder new contents: true)
       getSelected: #contents setSelected: #contents: label: 'A Checkbox' help: 'This is a checkbox').
     'Checkbox C'->(dialog newCheckboxFor: (ValueHolder new contents: true)
       getSelected: #contents setSelected: #contents: label: 'A Checkbox' help: 'This is a checkbox').
     'Radio Buttons'->
     (
      (
       dialog newColumn:
       {
        (dialog newRadioButtonFor: radioModel getSelected: #isLeft setSelected: #beLeft label: 'Left' help: 'This is a radio buton').
        (dialog newRadioButtonFor: radioModel getSelected: #isCenter setSelected: #beCenter label: 'Center' help: 'This is a radio buton').
        (dialog newRadioButtonFor: radioModel getSelected: #isRight setSelected: #beRight label: 'Right' help: 'This is a radio buton')
       }
      )
     vResizing: #shrinkWrap
     ).   
     'Text Entry'->(dialog newTextEntryFor: (ValueHolder new contents: 'Hello')  getText: #contents setText: #contents: help: 'This is a text entry').
     'Slider'->(dialog newSliderFor: (ValueHolder new contents: 0.5)  getValue: #contents setValue: #contents: help: 'This is a slider').
     'Bump Temp'->(dialog newTextEntryFor: (ValueHolder new contents: '75') getText: #contents setText: #contents: help: 'This is the random shift').
    }.
    dialog newVerticalSeparator.
    dialog newLabelGroup:
    {
     'Drop List'->(dialog newDropListFor: (ListModel new list: #('One' 'Two' 'Three' 'Four'))
       list: #list getSelected: #selectionIndex setSelected: #selectionIndex: help: 'This is a drop list').
     'Normal List'->
     (
      (
       dialog newListFor: (ListModel new list: #('One' 'Two' 'Three' 'Four'); selectionIndex: 3) list: #list selected: #selectionIndex changeSelected: #selectionIndex:
       help: 'This is a list'
      )
      minWidth: 120
     ).
    }.
   }
  )
  vResizing: #spaceFill
 );
 model: nil.
 builder openModal: dialog.