University of Waterloo, SFF Technical Speaking Competition, 2nd Place I presented a visually stunning presentation on (1) software refactoring and (2) the model-view-controller design pattern, based on my coop experience at BlackBerry. Details: One of my previous coops was at BlackBerry, where I worked on the Core User Interface API development team – this team made the UI widgets for the BlackBerry devices. I was tasked with a project for one of the UI components — the Gaugefield component (a progress bar) — and I had to refactor the component according to the MVC design pattern. The project was a great learning experience; it taught me how to preserve the existing API while refactoring a component behind the scenes. I created a presentation on this for my SE 464 Architecture class at UWaterloo, and I have attached it here as well. (I subsequently entered it in the SFF Technical Speaking Competition at UWaterloo, and won 2nd Place.)

1. Refactoring the BlackBerry’s
GaugeField component
Mohammad Talha Khalid
All respective BlackBerry images and logos are the property of BlackBerry (Research In Motion)

2. Presentation Background
I originally created this presentation for my SE 464 Software
Architecture class, based on my co-op experience at BlackBerry.
I subsequently entered it into the SFF Technical Speaking
Competition (2nd Place Award).

3. GaugeField component
• UI Components team
– Makes UI Components
for the BlackBerry

4. Project Overview
• Refactor the GaugeField component to
adhere to the MVC pattern
– Restructure & Rearrange the code
– Splitting up into M, V, C
• SE 464 Relevance
– Refactoring
– MVC Design Pattern

5. Why refactor the GaugeField?
• Code will be easier to understand
– All the code was in one class... messy
• MVC makes sense for a UI component
– Easier to modify the component
– Add more input controllers
• Support touch-screen devices
– Add more Views

6. Refactoring Process
Applying behavior-preserving transformations
1) Adding new classes
– Controller & View
2) Method extraction
– Identify all the code relevant to M, V, C
– Extract code
– Put it in the View and Controller classes
1
2

7. #1: Adding Classes
Original GaugeField class

8. #1: Adding Classes
• Adding 2 aggregate classes
– GaugeField “has a” GaugeFieldView

9. #2: Method Extraction
1. Select code
2. Place it in a new (private) method
3. Call the new method
private void clone(){
}

10. #2: Method Extraction
GaugeField(){
//constructor…
}
TrackBall_Input (){
//handle trackball events…..
}
Paint_ProgressBar(){
//paint the progress bar…
}
Controller
View

11. GaugeField(){
GaugeFieldController _controller;
GaugeFieldView _view;
}
TrackBall_Input (){
_controller.TrackBall_Input()
}
Paint_ProgressBar(){
_view.Paint_ProgressBar()
}
GaugeFieldController
TrackBall_Input(){
//handle trackball events…..
}
GaugeFieldView
Paint_ProgressBar(){
//paint the progress bar…
}

12. GaugeField(){
GaugeFieldController _controller;
GaugeFieldView _view;
}
TrackBallInput (){
_controller.TrackBallInput()
}
PaintProgressBar(){
_view.PaintProgressBar()
}
GaugeFieldController
FooTrackBallInput(){
//handle trackball events…..
}
GaugeFieldView
PaintProgressBar(){
//paint the progress bar…
}
Adding Classes
GaugeField has a
Controller and View
1

13. GaugeField(){
GaugeFieldController _controller;
GaugeFieldView _view;
}
TrackBallInput (){
_controller.TrackBallInput()
}
GaugeFieldController
TrackBallInput(){
//handle trackball events…..
}
Method Extraction
Redirecting to the Controller
2

14. A note about re-directing
• Cannot destroy current
methods
– Developers rely on the API
• But old methods can
redirect to the new
methods

15. Just re-directing?
• Many methods were self-contained
– Extraction
– Re-direction
• There was code that was not self-contained

16. Benefits
• Code is neatly organized
– Split up into M, V, C
• Beneficial for the Controller & View
– Easier to add more methods in the future
1
2

17. Beneficial for the View
Progress Bar View Pyramid View

18. Beneficial for the Controller
Trackball Trackpad Touch-screen

19. Beneficial for the Controller
GaugeFieldController
TrackBall_Input(){
//handle trackball events…..
}
TouchEvents(){
//handle touchscreen events…
}
Trackpad(){
//handle trackpad…
}

20. Beneficial for BlackBerry?

21. Summary
• Restructured the GaugeField code
• Added Classes
• Method Extraction
– Old methods re-directed to the new
methods
– Helped preserve the API
• MVC allows you to enhance the
View & Controller with more
functionality
1
2

22. The End
All respective BlackBerry images and logos are the property of BlackBerry (Research In Motion)

23. Image References
Images in this presentation were extracted from the Internet, and are the property of
their respective owners, including BlackBerry.
A non-exhaustive list of miscellaneous image references follows. Caveat: Some of the
labels in the domain names are a bit peculiar.
Peculiar URL References:
• http://2.bp.blogspot.com/_xhI2QKKA6cY/ScFMZdFhxMI/AAAAAAAAAWI/YsmJKn7
Doz4/s400/image.axd+%281%29.png
• http://www.stopgettingcheated.com/images/easy-button.jpg
• http://www.stop-age.com/userfiles/image/syringe2.jpg
• http://www.code-magazine.com/article.aspx?quickid=0401071&page=2
• http://www.dreamstime.com/doctor-with-syringe-needle-image5290308