Lab Session: Screen size and rotation: Difference between revisions

From NSB App Studio
Jump to navigation Jump to search
Created page with "In this lab, you'll make changes to ''frmSaves'' to make it rotate and resize properly."
 
m 6 revisions
 
(5 intermediate revisions by 2 users not shown)
Line 1: Line 1:
In this lab, you'll make changes to ''frmSaves'' to make it rotate and resize properly.
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 ==
 
# Open LabRotation.nsx.
# 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.
# 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.
# 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.

Latest revision as of 06:24, 7 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.