Lab Session: Screen size and rotation: Difference between revisions

From NSB App Studio
Jump to navigation Jump to search
No edit summary
Line 4: Line 4:


# Open LabRotation.nsx.
# Open LabRotation.nsx.
# Remove the orientation control you added previously, since we'll be handling orientation changes for ourselves (at least for ''frmSavedData'').
# Remove the [[orientation]] control you added previously, since we'll be handling orientation changes for ourselves (at least for ''frmSavedData'').
# Add an onorientation event to ''frmSavedData'' and verify the device reacts to orientation changes.
# Add an onorientation event to ''frmSavedData'' and verify the device reacts to 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 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 they sit beside the top three when orientation is in landscape mode.
# On a larger screen (such as a tablet), you may want more spacing between the labels and values.  The easiest way to do this is by setting the left value to a percentage.  Try this in portrait mode first.  Verify that the labels change positions when the screen size changes.
# On a larger screen (such as a tablet), you may want more spacing between the labels and values.  The easiest way to do this is by setting the left value to a percentage.  Try this in portrait mode first.  Verify that the labels change positions when the screen size changes.
# You'll notice the percentages need to be changed when the orientation changes to landscape mode.  Experiment to find the correct values and verify this form now is properly arranged for many screen sizes and orientations.
# You'll notice the percentages need to be changed when the orientation changes to landscape mode.  Experiment to find the correct values and verify this form now is properly arranged for many screen sizes and orientations.

Revision as of 19:10, 6 January 2014

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, since we'll be handling orientation changes for ourselves (at least for frmSavedData).
  3. Add an onorientation event to frmSavedData and verify the device reacts to 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 they sit beside the top three when orientation is in landscape mode.
  5. On a larger screen (such as a tablet), you may want more spacing between the labels and values. The easiest way to do this is by setting the left value to a percentage. Try this in portrait mode first. Verify that the labels change positions when the screen size changes.
  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 this form now is properly arranged for many screen sizes and orientations.