Hello
I would like to construct a three pane browser to inspect a dictionary of dictionaries (see data structure example code below). How do I do this using the ToolBuilder? I would like to learn to use it.
The class comment of ToolBuilder "I am a tool builder, that is an object which knows how to create concrete widgets from abstract specifications. Those specifications are used by tools which want to be able to function in diverse user interface paradigms, such as MVC, Morphic, Tweak, wxWidgets etc"
What I have done so far it to construct a two pane browser for browsing a dictionary showing only the keys not the instance variables. I did this by subclassing DictionaryInspector and overriding 4 methods. (see screen shot)
I assume for the Three pane browser I'd have to construct a three pane browser from scratch using ToolBuilder.
myLessons := Dictionary new.
myLessons at: 'lesson1' put: ((((Dictionary new at: 'section1' put: 'the string for section 1 of lesson01'; yourself) at: 'section2' put: 'the string for section 2 of lesson01'; yourself) at: 'section3' put: 'the string for section 3 of lesson01'; yourself)). myLessons at: 'lesson2' put: (((((Dictionary new at: 'section1' put: 'the string for section 1 of lesson2'; yourself) at: 'section2' put: 'the string for section 2 of lesson2'; yourself) at: 'section3' put: 'the string for section 3 of lesson2'; yourself)) at: 'section4' put: 'the string for section 4 of lesson2'; yourself). myLessons at: 'lesson3' put: ((((Dictionary new at: 'section1' put: 'the string for section 1 of lesson3'; yourself) at: 'section2' put: 'the string for section 2 of lesson3'; yourself) at: 'section3' put: 'the string for section 3 of lesson3'; yourself)). myLessons explore
Thank you for suggestions/hints or maybe just the answer in advance. For me this is an example for constructing more complex things.
Hannes
On 19.04.2010, at 11:45, Hannes Hirzel wrote:
Hello
I would like to construct a three pane browser to inspect a dictionary of dictionaries (see data structure example code below). How do I do this using the ToolBuilder? I would like to learn to use it.
The class comment of ToolBuilder "I am a tool builder, that is an object which knows how to create concrete widgets from abstract specifications. Those specifications are used by tools which want to be able to function in diverse user interface paradigms, such as MVC, Morphic, Tweak, wxWidgets etc"
What I have done so far it to construct a two pane browser for browsing a dictionary showing only the keys not the instance variables. I did this by subclassing DictionaryInspector and overriding 4 methods. (see screen shot)
I assume for the Three pane browser I'd have to construct a three pane browser from scratch using ToolBuilder.
myLessons := Dictionary new.
myLessons at: 'lesson1' put: ((((Dictionary new at: 'section1' put: 'the string for section 1 of lesson01'; yourself) at: 'section2' put: 'the string for section 2 of lesson01'; yourself) at: 'section3' put: 'the string for section 3 of lesson01'; yourself)).
myLessons at: 'lesson2' put: (((((Dictionary new at: 'section1' put: 'the string for section 1 of lesson2'; yourself) at: 'section2' put: 'the string for section 2 of lesson2'; yourself) at: 'section3' put: 'the string for section 3 of lesson2'; yourself)) at: 'section4' put: 'the string for section 4 of lesson2'; yourself).
myLessons at: 'lesson3' put: ((((Dictionary new at: 'section1' put: 'the string for section 1 of lesson3'; yourself) at: 'section2' put: 'the string for section 2 of lesson3'; yourself) at: 'section3' put: 'the string for section 3 of lesson3'; yourself)).
myLessons explore
Thank you for suggestions/hints or maybe just the answer in advance. For me this is an example for constructing more complex things.
Hannes
Maybe look at Browser>>buildWith: or all the other buildWith: implementations? No need to subclass DictionaryInspector, I'd simply subclass Model.
You would have two lists, and a text pane. Your model will have to provide methods to get the list and get/set the current index. E.g. #lessonList, #lessonListIndex, #lessonListIndex: and #sectionList, #sectionListIndex, #sectionListIndex:.
When you select something in the lesson list, #lessonListIndex: will be sent. In response, you would send "self changed: #sectionList" which will cause the section list to be updated. Etc.
- Bert -
On 19.04.2010, at 12:02, Bert Freudenberg wrote:
On 19.04.2010, at 11:45, Hannes Hirzel wrote:
Hello
I would like to construct a three pane browser to inspect a dictionary of dictionaries (see data structure example code below). How do I do this using the ToolBuilder? I would like to learn to use it.
Maybe look at Browser>>buildWith: or all the other buildWith: implementations? No need to subclass DictionaryInspector, I'd simply subclass Model.
You would have two lists, and a text pane. Your model will have to provide methods to get the list and get/set the current index. E.g. #lessonList, #lessonListIndex, #lessonListIndex: and #sectionList, #sectionListIndex, #sectionListIndex:.
When you select something in the lesson list, #lessonListIndex: will be sent. In response, you would send "self changed: #sectionList" which will cause the section list to be updated. Etc.
- Bert -
After actually having a look, Browser>>buildWith: etc. are already specialized for code tools. No need for that.
Also, for lists as in your case, working with indices for the selection is less convenient than with objects.
So here's a build method for your model - just implement all the accessors and it works. A complete UI in one method ;)
buildWith: builder ^builder build: (builder pluggableWindowSpec new model: self; children: { (builder pluggableListSpec new) model: self; list: #lessonList; getSelected: #lesson; setSelected: #lesson:; frame: (0@0 corner: 0.5@0.2). (builder pluggableListSpec new) model: self; list: #sectionList; getSelected: #section; setSelected: #section:; frame: (0.5@0 corner: 1@0.2). (builder pluggableTextSpec new) model: self; getText: #contents; frame: (0@0.2 corner: 1@1). })
- Bert -
PS: I'd consider it cheating if you look at this:
Bert Thank you for this second mail. I actually was struggling with converting the 'lesson1', 'lesson2' etc back to the index.
I had a method
lessonListIndex: aLessonString lessonListIndex := self lessonList indexOf: aLessonString. self changed: #sectionList
Your 'buildWith: builder' looks very need. So I'll go for that do not go for Integer indices.
I'll try it - without looking at your solution :-)
Hannes
On 4/19/10, Bert Freudenberg bert@freudenbergs.de wrote:
On 19.04.2010, at 12:02, Bert Freudenberg wrote:
On 19.04.2010, at 11:45, Hannes Hirzel wrote:
Hello
I would like to construct a three pane browser to inspect a dictionary of dictionaries (see data structure example code below). How do I do this using the ToolBuilder? I would like to learn to use it.
Maybe look at Browser>>buildWith: or all the other buildWith: implementations? No need to subclass DictionaryInspector, I'd simply subclass Model.
You would have two lists, and a text pane. Your model will have to provide methods to get the list and get/set the current index. E.g. #lessonList, #lessonListIndex, #lessonListIndex: and #sectionList, #sectionListIndex, #sectionListIndex:.
When you select something in the lesson list, #lessonListIndex: will be sent. In response, you would send "self changed: #sectionList" which will cause the section list to be updated. Etc.
- Bert -
After actually having a look, Browser>>buildWith: etc. are already specialized for code tools. No need for that.
Also, for lists as in your case, working with indices for the selection is less convenient than with objects.
So here's a build method for your model - just implement all the accessors and it works. A complete UI in one method ;)
buildWith: builder ^builder build: (builder pluggableWindowSpec new model: self; children: { (builder pluggableListSpec new) model: self; list: #lessonList; getSelected: #lesson; setSelected: #lesson:; frame: (0@0 corner: 0.5@0.2). (builder pluggableListSpec new) model: self; list: #sectionList; getSelected: #section; setSelected: #section:; frame: (0.5@0 corner: 1@0.2). (builder pluggableTextSpec new) model: self; getText: #contents; frame: (0@0.2 corner: 1@1). })
Bert
This was a very helpful learning experience.
Crucial is that lesson and section are the keys (strings) of the dictionaries.
Very neat that only a model class with the GUI code defined in one method is needed.
Thank you!
Hannes
On 4/19/10, Hannes Hirzel hannes.hirzel@gmail.com wrote:
Bert Thank you for this second mail. I actually was struggling with converting the 'lesson1', 'lesson2' etc back to the index.
I had a method
lessonListIndex: aLessonString lessonListIndex := self lessonList indexOf: aLessonString. self changed: #sectionList
Your 'buildWith: builder' looks very need. So I'll go for that do not go for Integer indices.
I'll try it - without looking at your solution :-)
Hannes
On 4/19/10, Bert Freudenberg bert@freudenbergs.de wrote:
On 19.04.2010, at 12:02, Bert Freudenberg wrote:
On 19.04.2010, at 11:45, Hannes Hirzel wrote:
Hello
I would like to construct a three pane browser to inspect a dictionary of dictionaries (see data structure example code below). How do I do this using the ToolBuilder? I would like to learn to use it.
Maybe look at Browser>>buildWith: or all the other buildWith: implementations? No need to subclass DictionaryInspector, I'd simply subclass Model.
You would have two lists, and a text pane. Your model will have to provide methods to get the list and get/set the current index. E.g. #lessonList, #lessonListIndex, #lessonListIndex: and #sectionList, #sectionListIndex, #sectionListIndex:.
When you select something in the lesson list, #lessonListIndex: will be sent. In response, you would send "self changed: #sectionList" which will cause the section list to be updated. Etc.
- Bert -
After actually having a look, Browser>>buildWith: etc. are already specialized for code tools. No need for that.
Also, for lists as in your case, working with indices for the selection is less convenient than with objects.
So here's a build method for your model - just implement all the accessors and it works. A complete UI in one method ;)
buildWith: builder ^builder build: (builder pluggableWindowSpec new model: self; children: { (builder pluggableListSpec new) model: self; list: #lessonList; getSelected: #lesson; setSelected: #lesson:; frame: (0@0 corner: 0.5@0.2). (builder pluggableListSpec new) model: self; list: #sectionList; getSelected: #section; setSelected: #section:; frame: (0.5@0 corner: 1@0.2). (builder pluggableTextSpec new) model: self; getText: #contents; frame: (0@0.2 corner: 1@1). })
And here is the code written along the same lines for a simple dictionary browser (the initial example).
MyDictionaryInspector example
or
d := Dictionary new. d at: 'green' put: 'gruen'. d at: 'red' put: 'rot'. d at: 'blue' put: 'blau'. inspector := MyDictionaryInspector new dictionary: d. ToolBuilder open: inspector label: 'MyDictionaryInspector'.
Hannes
"-------------------------------------------------------------------------------------------------------------------------"
'From Squeak4.1 of 17 April 2010 [latest update: #9956] on 20 April 2010 at 9:06:08 am'! Model subclass: #MyDictionaryInspector instanceVariableNames: 'dictionary key' classVariableNames: '' poolDictionaries: '' category: 'HHWorkplace2010'! !MyDictionaryInspector commentStamp: 'hjh 4/20/2010 04:41' prior: 0! A MyDictionaryInspector is a Model for a dictionary which has a user-friendly view. It does not show internal things like the regular DictionaryInspector which is as well a subclass of Model. Note: It might have been an idea to subclass StringHolder instead of model.
more see class side example
April 2010 !
!MyDictionaryInspector methodsFor: 'toolbuilder' stamp: 'hjh 4/20/2010 04:08'! buildWith: builder "self example" ^builder build: (builder pluggableWindowSpec new model: self; children: { (builder pluggableListSpec new) model: self; list: #keysList; getSelected: #key; setSelected: #key:; frame: (0@0 corner: 0.5@1.0). (builder pluggableTextSpec new) model: self; getText: #contents; setText: #contents:; frame: (0.5@0 corner: 1.0@1.0). }) ! !
!MyDictionaryInspector methodsFor: 'accessing' stamp: 'hjh 4/20/2010 04:21'! contents key isNil ifTrue: [^'']. ^dictionary at: key! !
!MyDictionaryInspector methodsFor: 'accessing' stamp: 'hjh 4/20/2010 04:19'! dictionary: aDictionary dictionary := aDictionary! !
!MyDictionaryInspector methodsFor: 'accessing' stamp: 'hjh 4/20/2010 04:10'! key ^ key! !
!MyDictionaryInspector methodsFor: 'accessing' stamp: 'hjh 4/20/2010 04:25'! key: aString key := aString. self changed: #contents.! !
!MyDictionaryInspector methodsFor: 'accessing' stamp: 'hjh 4/20/2010 04:20'! keysList ^ dictionary keys! !
"-- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- "!
MyDictionaryInspector class instanceVariableNames: ''!
!MyDictionaryInspector class methodsFor: 'documentation' stamp: 'hjh 4/20/2010 04:41'! example "self example" | example | example := self new. example dictionary: self exampleDictionary. ^ToolBuilder open: example label: 'MyDictionaryInspector - Colors'! !
!MyDictionaryInspector class methodsFor: 'documentation' stamp: 'hjh 4/20/2010 04:18'! exampleDictionary
| d | d := Dictionary new. d at: 'red' put: 'rot'. d at: 'blue' put: 'blau'. d at: 'green' put: 'gruen'. d at: 'yellow' put: 'gelb'. d at: 'orange' put: 'orange'. d at: 'brown' put: 'braun'. d at: 'white' put: 'weiss'. d at: 'black' put: 'schwarz'. ^d! !
On 4/19/10, Hannes Hirzel hannes.hirzel@gmail.com wrote:
Bert
This was a very helpful learning experience.
Crucial is that lesson and section are the keys (strings) of the dictionaries.
Very neat that only a model class with the GUI code defined in one method is needed.
Thank you!
Hannes
On 4/19/10, Hannes Hirzel hannes.hirzel@gmail.com wrote:
Bert Thank you for this second mail. I actually was struggling with converting the 'lesson1', 'lesson2' etc back to the index.
I had a method
lessonListIndex: aLessonString lessonListIndex := self lessonList indexOf: aLessonString. self changed: #sectionList
Your 'buildWith: builder' looks very need. So I'll go for that do not go for Integer indices.
I'll try it - without looking at your solution :-)
Hannes
On 4/19/10, Bert Freudenberg bert@freudenbergs.de wrote:
On 19.04.2010, at 12:02, Bert Freudenberg wrote:
On 19.04.2010, at 11:45, Hannes Hirzel wrote:
Hello
I would like to construct a three pane browser to inspect a dictionary of dictionaries (see data structure example code below). How do I do this using the ToolBuilder? I would like to learn to use it.
Maybe look at Browser>>buildWith: or all the other buildWith: implementations? No need to subclass DictionaryInspector, I'd simply subclass Model.
You would have two lists, and a text pane. Your model will have to provide methods to get the list and get/set the current index. E.g. #lessonList, #lessonListIndex, #lessonListIndex: and #sectionList, #sectionListIndex, #sectionListIndex:.
When you select something in the lesson list, #lessonListIndex: will be sent. In response, you would send "self changed: #sectionList" which will cause the section list to be updated. Etc.
- Bert -
After actually having a look, Browser>>buildWith: etc. are already specialized for code tools. No need for that.
Also, for lists as in your case, working with indices for the selection is less convenient than with objects.
So here's a build method for your model - just implement all the accessors and it works. A complete UI in one method ;)
buildWith: builder ^builder build: (builder pluggableWindowSpec new model: self; children: { (builder pluggableListSpec new) model: self; list: #lessonList; getSelected: #lesson; setSelected: #lesson:; frame: (0@0 corner: 0.5@0.2). (builder pluggableListSpec new) model: self; list: #sectionList; getSelected: #section; setSelected: #section:; frame: (0.5@0 corner: 1@0.2). (builder pluggableTextSpec new) model: self; getText: #contents; frame: (0@0.2 corner: 1@1). })
beginners@lists.squeakfoundation.org
-
Bert Freudenberg -
Hannes Hirzel