Lab Session: Screen size and rotation: Difference between revisions

From NSB App Studio
Jump to navigation Jump to search
No edit summary
Line 7: Line 7:
# Add an onorientation event to ''frmSavedData'' and verify you can sense orientation changes.
# Add an onorientation event to ''frmSavedData'' and verify you can sense orientation changes.
# The layout of ''frmSavedData'' will look better as two columns when in landscape mode.  Change the top and left values of the 3 lower data labels and values so that they sit beside the top three when orientation is in landscape mode.
# The layout of ''frmSavedData'' will look better as two columns when in landscape mode.  Change the top and left values of the 3 lower data labels and values so that they sit beside the top three when orientation is in landscape mode.
# On a larger screen (a tablet, as opposed to phone), you might want more spacing between the labels and values.  One way to accomplish this is by setting the left value to a percentage.  Try this, first in portrait mode.  Verify the labels change positions given the screen width.
# You'll notice the percentages need to be changed when the orientation changes to landscape mode.  Experiment to find the correct values and verify that this form now is properly arranged for many screen sizes and orientations.

Revision as of 22:23, 13 December 2013

In this lab, you'll make changes to frmSavedData to make it rotate and resize properly in order to gain experience with these technologies.

Student Outline

  1. Open LabRotation.nsx.
  2. Remove the orientation control you added previously, as we'll be handling orientation changes for ourselves (at least for frmSavedData)
  3. Add an onorientation event to frmSavedData and verify you can sense orientation changes.
  4. The layout of frmSavedData will look better as two columns when in landscape mode. Change the top and left values of the 3 lower data labels and values so that they sit beside the top three when orientation is in landscape mode.
  5. On a larger screen (a tablet, as opposed to phone), you might want more spacing between the labels and values. One way to accomplish this is by setting the left value to a percentage. Try this, first in portrait mode. Verify the labels change positions given the screen width.
  6. You'll notice the percentages need to be changed when the orientation changes to landscape mode. Experiment to find the correct values and verify that this form now is properly arranged for many screen sizes and orientations.