Hotspots: Admin Pages | Turn-in Site |
Current Links: Case Final Project Summer 2007
DDMM-Milestone 3
Design
The focus of this milestone was to implement the basic functionality and user interface of our movie player. When we began implementing the user interface portion of our milestone we realized that our design would work perfectly for it.
User Interface
Ask any common user and they will tell you that good reliable software is nothing if it is hard to use. Our main goal when developing the user interface was to make our program as user friendly as possible. Part of this meant that we would have to imitate other programs; programs that the common user was already familiar with. Our group decided on an implementation like that of quicktime - simple, obvesious, easy to understand and commonly used. The buttons that we used had symbols on them to make them so simple that even a child could use them. We decided early on in planning this milestone that we would use Squeak's morphic gui model as apposed to the normal MVC model. We came to this conclusion mainly because morphic had alot more to offer and looked more attractive (emphasis on the latter). We also decided on using dialogs boxes for all user interaction instead of menus or other forms of getting user input for sake of reusability and obvesiousness. Making the dialogs was one of the harder tasks of this milestone.
Making the Dialogs
Making the dialog boxes was a challenge because we had to determine how to use morphic to make a dialog box (reference the great morphic tutorial: Group Orgy: Morphs for Dummies or how we learned to live and love morphs) and learning how to get input from the user through buttons. Below is a common example of how we figured out how to do so:
The following opens a list of all items in the current movie and allows the user to view and select the desired object to edit.
Note: MovieItemsListPanel is a child class of SystemWindow.
WORKSPACE CODE
MovieItemsListPanel openOn: mic
In this case mic stands for movie item collection which represents all of the movie items in the current movie organized into one "OrderCollection" this is gotten from the MovieEditor class which had gotten it from the individual MovieItems classes through a getSummary function that each one has specified for itself (refer to class daigram in milestone 2 to see exact interaction between classes).
openOn: mic – class method
This function makes an instance of MovieItemsListPanel, calls an instance method openOn, and then returns the message returned from the instance method getSelectedMovieItem.
openOn: mic – instance method
This method creates the actual morphic look and feel of the dialog box. This includes a PluggableListMorph and a couple of SimpleButtonMorphs.
getSelectedMovieItem – instance method
The purpose of this method is to wait until the user clicks a button and then handle that button's action appropriately. The best way to show how this function works is to actually show some code, so here it goes:
| theWorld |
theWorld _ Smalltalk currentWorld. "gives us the current world we are working in"
theWorld ifNil: [^itemToReturn]. "if we are not working in anything then go ahead and return nil"
done _ false. "initialize that we haven't gotten any input yet"
[done] whileFalse: [ World doOneCycle]. "tell the thing that we are working in to listen for a action"
self delete. "once you have an action go ahead and delete the dialog because you don't want to have more than one action at once"
World doOneCycle. "tell the working area to refresh itself"
^ itemToReturn. "return the item that was selected"
Most of this code depends on other methods called when a button is selected - look up SimpleButtonMorph in the tutorial mentioned above for exact implementation of how to call a method when a button is selected - once a button is selected that method then sets the done variable to true and the cycle for input ends and other variables are set within that function that determine what is to be done next or returned.
We actually figured out this method by looking at the code for the FillInTheBlankMorph. A big lesson there: look at how similar things are already implemented! This was an important part of all aspects of our program.
And that was about all of the hard stuff that we had to figure out when implementing the user interface, just be sure to have plenty of time to research what morphic can do visually and then you will see how much morphic really loves you.
Functionality Implementation
The functionality part of this assignment was easy because we had all already implemented it individually. Our design for this particular part of the project had been derived from previous experience from our individual accounts of what we had already done. You can see pretty much the outline of what we implemented in the functionality classes from our UML class diagram - it's function for function. The key functionality we got to work as follows:
Add New Movie Item
This involved getting information about the movie item from the user (which is discussed above) and taking that information, giving it to MovieEditor which then creates a new MovieItem of the specified type and appends it to the MovieItemCollection.
Delete Movie Item
The only thing this involved was getting the specific movie item from the user and then calling a delete function on that movie item in the MovieItemCollection class from the MovieEditor class. The class diagram shows the communication beautifully.
Play
In this case the MovieEditor just told MovieItemCollection to see what was being displayed at that particular second and then told that MovieItem to display itself. It then increase the second till it reached the end of the movie.
Pause
This just told the seconds to stop ticking.
Resume
Told the seconds to start ticking again.
Rewind
Reset the seconds back to 0.
Conclusion
Through this milestone we first learned how to work together and stick to the plan that we had initially made. I believe that this was why we were so successful in this milestone, because we could work well together and didn't have to worry about going back over and reworking our design.
Link to this Page