building a simple app with "active" gui in squeak?

Doug Way dway at riskmetrics.com
Sat Jun 2 04:42:05 UTC 2001


Hello Jack, welcome to Squeak!

Your project doesn't sound trivial to implement in a weekend for someone who's not that familiar with Squeak or Smalltalk, but it should be doable, with hopefully some progress made in a weekend.  (I'm guessing it should be possible for someone to write this in Squeak with less than half the source code it would take to implement in Visual Basic.)

Anyway, since I figured you'd want to start playing with something sooner rather than later (and I don't have all night to write up a detailed message), here's some code which implements a bit of the UI.

First, create a subclass of SimpleButtonMorph called GridButtonMorph.  Then add a instance-side method called #doButtonAction which does the following:

doButtonAction
	self color = Color red
		ifFalse: [self color: Color green darker].

(This overrides the doButtonAction in the superclass.)

Then, in a workspace, execute the following:

| y |
firstYearCourseNames := {'100'. '110'. '118'. '160'. '168H'}.
secondYearCourseNames := {'200'. '202'. '216'. '220'. '235H'}.  "etc."
columnMorph := RectangleMorph new.
columnMorph hResizing: #shrinkWrap.
columnMorph vResizing: #shrinkWrap.
y := 0.
firstYearCourseNames do:
	[ :courseName |
	fieldMorph := GridButtonMorph newWithLabel: courseName.
	fieldMorph color: Color yellow.
	courseName = '118' ifTrue: [fieldMorph color: Color red].
	fieldMorph position: 0 @ y.
	fieldMorph width: 70.
	fieldMorph useSquareCorners.
	columnMorph addMorph: fieldMorph.
	y := y + fieldMorph height].
columnMorph openInWorld.

This will bring up a column of yellow boxes.  If you click on a yellow box, it will turn green, but a red box won't (because of the code we added in #doButtonAction).  For your application, you'll need to add more logic to decide whether the code should be yellow or red in the first place (based on the course prerequisites), of course.

(An excellent exersize in figuring out how this code works is to put a "self halt." near the beginning of the code, execute it, and use the debugger to step through (or send into) each message.)

This code I provided isn't especially good, but it works as a quick example.  You'd want to move this workspace code into the UI-building code of a DegreePlannerMorph, or whatever you want to call the whole window.  You'll need to add an outer loop to build multiple columns.  You wouldn't want to hard-code the firstYearCourseNames as a variable as I did... you might want to use an Array2D instead, or a collection of collections.  And some of the messages sent to fieldMorph could be moved into the #initialize method in GridButtonMorph, etc.

Feel free to ask the list if you run into further problems. (also you can check the mailing list archives (see squeak.org) if you aren't receiving list messages)

Hope this helps,

- Doug Way
  dway at riskmetrics.com


jack wrote:
> 
> hi,
> 
> i am a 3rd year computer studies student at university in canada. i am
> in a summer course right now doing a 3 person group project to create a
> prototype for degree planning and academic advice software. i have
> attached a small .jpg that shows what we are trying to achieve (it shows
> the project in a web browser, but that is not essential). i have been
> reading about squeak and playing with the demo projects a little bit for
> maybe 2 weeks, and am now eager to try and use it more powerfully as an
> idea processor but don't know where to begin.
> 
> someone suggested smalltalk for wrapping my head around what oo really
> is, and i chose squeak. i have just spent the day with self 4.1 (mac)
> because i read that would help with morphic but i didn't make much
> progress there either.
> 
> the rest of my group wants to do this project in visual basic, and i
> wanted to try and get it done in squeak before the end of the weekend,
> so that we would have to resort to vb at all... and i could get some
> good experience with squeak.
> 
> here is a textual description of our functional requirements [see the
> diagram for more clarity]:
> 
> the student shall be presented with a grid. there shall be four columns,
> one to represent each year of an undergraduate degree. there shall be 5-
> rows, and each box in the grid will represent a course. for example:
> 100, 122, 205, etc.
> 
> there are two features that comprise the desired core functionality:
> 
> i) active gui:
> 
> the initial state of the grid will be as follows: courses for which no
> prerequisites are required shall be yellow. courses for which the
> student lacks the appropriate prerequisite shall be red.
> 
> once the student clicks on any given course, signifying that he/she has
> taken that course, or would like to see the effects of taking that
> course it shall turn green.
> 
> upon any course turning green, indicating successful completion of that
> course and therefor its eligibility as a prerequisite, any courses for
> which that newly green course alone or another combination of previous
> green courses with that new green course shall turn from red to yellow
> to indicate their availability.
> 
> this is mostly an exploratory way for the student to visualize the
> relationships between courses in a single major.
> 
> after indicating all of the courses he/she has completed and pressing
> the "process" button the student shall receive
> 
> ii) suggestion screen
> 
> the software must be able to store the courses that the student has
> taken and sort them against a list of the required courses for their
> major. the suggestion screen shall provide the student with a written
> indication of the courses he/she should take to complete the degree.
> 
> ----------------------------
> ideas so far:
> 
> i think that the active gui will have something to do with embedding
> morphs inside of each other, the buttons will go on top of rows or
> columns? i was in self all day, so i don't know how similar the squeak
> morphic is yet. i don't know how to implement that [to me] complex
> behaviour where the other buttons would all change the appropriate color
> in any language.... not a clue.
> 
> we were thinking that the gui state could be translated somehow into an
> array of courses taken and then sorted against an array of courses
> required or something like that, or maybe using an orderedcontainer or
> bag? then some simple text processing could transform that container
> into english sentences?
> 
> i would greatly appreciate any and all suggestions... i have been
> reading some of the broad kind of context level papers on smalltalk and
> squeak and i like the vision and goals much more than visual basic...
> besides i don't even have a pc so it would be hard for me to do any
> meaningful [all night] work on that platform. i think that these days it
> is irresponsible to develop in any language that is not ported to at
> least 3 hardware platforms anyway.
> 
> lastly, please cc your responses to me directly at jeaton at trentu.ca, as
> for some reason the list server won't send me the list traffic.
> 
> *big* thanks in advance,
> 
> jack eaton
> trent university
> canada
> 
>   ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
>  [Image]





More information about the Squeak-dev mailing list