CSE 3461.03 User Intefaces, Fall Term 2012

Assignment A2 (in groups of 3) - Layout manager for Portrait and Landscape Display

Changes relative to last draft in red.

Many computer-based display systems on desktop displays or mobile devices feature aspect ratios of 3:2, 4:3, or 16:9. Tablet devices and smartphones can be held either in portrait or landscape orientation. Even on desktop sytems, windows are used either in full-screen or in a side-by-side configuration, where two "portrait" windows tile a landscape display. Moreover, there are LCD display that can be rotated into 2 orientations. The objective of this assignment is to implement a new layout manager that supports the easy specification of rotatable GUI. More specifically, your layout manager has to handle at least one of the three following pairs of aspect ratios: 3:2 and 2:3, 4:3 and 3:4, or 16:9 and 9:16. This corresponds to the most common smartphone aspect ratios.
Your layout manager does not have to be able to handle other aspect ratios. In particular, aspect ratios not within the range 2:1 and 1:2 are clearly outside of the scope of this assignment.

To facilitate testing, the first widget inside the application window must enable the user to toggle between portrait and landscape orientation for the window, based on the current window size. If your application supports more than one aspect ratio, the second widget must enable the user to select one of the supported aspect ratios. The window should still be resizeable, under the constraint that the current aspect ratio is maintained during resizing.

To demonstrate how the layout changes, you have to specify additional widgets beyond the two mentioned above. You must include at least two widgets that fills the window horizontally, whatever the size. These two "wide" widgets should not be directly adjacent, i.e. there should be other widgets between them. You must also include enough "small" widgets to illustrate how the layout manager redistributes them with changes on window size. Some examples for "small" widgets are buttons, radio buttons, or checkboxes. You also may want to include "tall" widgets, such as a list of items, or a tree-view. The objective of all these widgets is to show how the layout of the GUI changes with changes in the orientation, window size or aspect ratio. In other words, these widgets do not need any real functionality associated with them. You may assume a maximum display size of 1024 pixels in either the horizontal or vertical dimension.

One issue that you will encounter is that with a change of aspect ratio they layout manager may "run out of space", i.e. will not have enough space in the current window to display all widgets. Some possible solutions include resizing widgets (limited to a +50%/-50% change between portrait and landscape view) or support for scrolling of the window pane. You are welcome to come up with your own solution for this issue. Regardless of which solution you chooose, you need to describe your design rationale for this in the documentation.

Last, but not least, you are encouraged to consider support for more advanced layout features, such as widgets that stay adjacent to a label or another widget, centered or right-aligned widget, grid-like arrangements, etc. Ideally, you should support such features with reasonably minimal effort from the side of the programmer.

Notes:

  1. Your application should be robust with a good user interface. Make appropriate use of the various GUI components and features supported in JFC/Swing. Consider the organization, presentation, interaction, and over-all usability of your program. For this assignment this includes any features that you put into the API for your layout manager.
  2. Your source code should be well organised and documented.
  3. You must do this assignment in groups of three, unless you have received permission from the instructor.
  4. Do not use the york package or the type package.
  5. Your programs must compile and run in the Prism lab.
  6. The assignments will be awarded letter grades, according to the university's letter grade standard. A program that simply fulfils the requirements described here will be awarded a 'C'. To get a higher grade, we want to see "an excellent job and originality" in your assignment solution.
  7. Name your program 'a2.java'. Submit it on Prism with 'submit 3461 a2 a2.java'. Additional files, if required, may be submitted using the same command, with the filename as the last argument. Use 'man submit' for further details on using the submit command.
  8. Also submit a text file named readme.txt in which you describe the motivation behind your software design. Why did you use the JFC/Swing and HTML components that you did, and why did you organise them that way? Briefly justify your design. If your implementation includes any special features, make sure you describe these and provide appropriate instructions. The length of this description is limited to 500 words.
  9. The readme.txt file should also contain a record of your group meetings. Include the date and time of each meeting, the people present, and the topics discussed. If other forms of communication were used (e.g., e-mail, phone), indicate the type and extent. Also include in your readme.txt file a record of the tasks assigned and performed by each member of the team.
  10. Please make sure the first three lines of the readme.txt are formatted exactly as shown in the template file; namely,
    LoginID, StudentID, LastName, FirstName(s)
    LoginID, StudentID, LastName, FirstName(s)
    LoginID, StudentID, LastName, FirstName(s)
  11. The application must clearly show the functionality and main requirements as outlined in the specification. These requirements are directly used as grading criteria and should thus be targeted with the highest priority. Any additional functionality should not interfere with any of the basic requirements.
  12. Beyond this, try to make the GUI and/or API easy to use, self-explanatory, elegant, and intuitive. Any additional functionality that interferes in a negative manner with ease-of-use will have negative effects on the mark.