Add drop down menu for designer preview size

Resolves #1428 

appinventor/appengine/src/com/google/appinventor/client/OdeMessages.java

@@ -953,14 +953,18 @@ public interface OdeMessages extends Messages {
   @Description("Checkbox controlling whether to display invisible components in the designer.")
   String showHiddenComponentsCheckbox();
 
-  @DefaultMessage("Check to see Preview on Tablet size.")
-  @Description("Checkbox (check) controlling whether to display a preview on Tablet size.")
+  @DefaultMessage("Tablet size")
+  @Description("Listbox (tablet) controlling whether to display a preview on Tablet size.")
   String previewTabletSize();
 
-  @DefaultMessage("Un-check to see Preview on Phone size.")
-  @Description("Checkbox (un-check) controlling whether to display a preview on Phone size.")
+  @DefaultMessage("Phone size")
+  @Description("Listbox (phone) controlling whether to display a preview on Phone size.")
   String previewPhoneSize();
 
+  @DefaultMessage("Monitor size")
+  @Description("Listbox (monitor) controlling whether to display a preview on Monitor size.")
+  String previewMonitorSize();
+
   // Used in editor/simple/components/MockComponent.java
 
   @DefaultMessage("Rename Component")
@@ -5576,7 +5580,7 @@ public interface OdeMessages extends Messages {
   @DefaultMessage("UriEncode")
   @Description("")
   String UriEncodeMethods();
-  
+
   @DefaultMessage("UriDecode")
   @Description("")
   String UriDecodeMethods();

appinventor/appengine/src/com/google/appinventor/client/editor/simple/SimpleVisibleComponentsPanel.java

@@ -6,6 +6,8 @@
 
 package com.google.appinventor.client.editor.simple;
 
+import com.google.gwt.event.dom.client.ChangeEvent;
+import com.google.gwt.event.dom.client.ChangeHandler;
 import static com.google.appinventor.client.Ode.MESSAGES;
 import com.google.appinventor.client.editor.ProjectEditor;
 import com.google.appinventor.client.editor.simple.components.MockForm;
@@ -20,6 +22,8 @@ import com.google.gwt.user.client.ui.CheckBox;
 import com.google.gwt.user.client.ui.Composite;
 import com.google.gwt.user.client.ui.VerticalPanel;
 import com.google.gwt.user.client.ui.Widget;
+import com.google.gwt.user.client.ui.ListBox;
+
 
 import java.util.List;
 import java.util.Map;
@@ -32,7 +36,8 @@ public final class SimpleVisibleComponentsPanel extends Composite implements Dro
   // UI elements
   private final VerticalPanel phoneScreen;
   private final CheckBox checkboxShowHiddenComponents;
-  private final CheckBox checkboxPhoneTablet; // A CheckBox for Phone/Tablet preview sizes
+  private final ListBox listboxPhoneTablet; // A ListBox for Phone/Tablet/Monitor preview sizes
+  private final int[][] drop_lst = { {320, 505}, {480, 675}, {768, 1024} };
 
   // Corresponding panel for non-visible components (because we allow users to drop
   // non-visible components onto the form, but we show them in the non-visible
@@ -83,56 +88,84 @@ public final class SimpleVisibleComponentsPanel extends Composite implements Dro
     });
     phoneScreen.add(checkboxShowHiddenComponents);
 
-    checkboxPhoneTablet = new CheckBox(MESSAGES.previewPhoneSize()) {
+    listboxPhoneTablet = new ListBox() {
       @Override
       protected void onLoad() {
         // onLoad is called immediately after a widget becomes attached to the browser's document.
-        boolean showPhoneTablet = Boolean.parseBoolean(
-            projectEditor.getProjectSettingsProperty(
-                SettingsConstants.PROJECT_YOUNG_ANDROID_SETTINGS,
-                SettingsConstants.YOUNG_ANDROID_SETTINGS_PHONE_TABLET));
-        checkboxPhoneTablet.setValue(showPhoneTablet);
-        changeFormPreviewSize(showPhoneTablet);
+        String val = projectEditor.getProjectSettingsProperty(SettingsConstants.PROJECT_YOUNG_ANDROID_SETTINGS,
+            SettingsConstants.YOUNG_ANDROID_SETTINGS_PHONE_TABLET);
+
+        int idx = 0;
+        int width = 320;
+        int height = 505;
+
+        if (val.equals("True")) {
+          idx = 1;
+          width = drop_lst[idx][0];
+          height = drop_lst[idx][1];
+        }
+
+        String[] parts = val.split(",");
+        if (parts.length == 3) {
+          idx = Integer.parseInt(parts[0]);
+          width = Integer.parseInt(parts[1]);
+          height = Integer.parseInt(parts[2]);
+        }
+        listboxPhoneTablet.setItemSelected(idx, true);
+        changeFormPreviewSize(idx, width, height);
       }
     };
-    checkboxPhoneTablet.addValueChangeHandler(new ValueChangeHandler<Boolean>() {
+    listboxPhoneTablet.addItem("Phone size");
+    listboxPhoneTablet.addItem("Tablet size");
+    listboxPhoneTablet.addItem("Monitor size");
+    listboxPhoneTablet.addChangeHandler(new ChangeHandler() {
       @Override
-      public void onValueChange(ValueChangeEvent<Boolean> event) {
-          boolean isChecked = event.getValue(); // auto-unbox from Boolean to boolean
-          projectEditor.changeProjectSettingsProperty(
-              SettingsConstants.PROJECT_YOUNG_ANDROID_SETTINGS,
-              SettingsConstants.YOUNG_ANDROID_SETTINGS_PHONE_TABLET,
-              isChecked ? "True" : "False");
-          changeFormPreviewSize(isChecked);
-        }
+      public void onChange(ChangeEvent event) {
+        int idx = listboxPhoneTablet.getSelectedIndex();
+        int width = drop_lst[idx][0];
+        int height = drop_lst[idx][1];
+        String val = Integer.toString(idx) + "," + Integer.toString(width) + "," + Integer.toString(height);
+        // here, we can change settings by putting val into it
+        projectEditor.changeProjectSettingsProperty(SettingsConstants.PROJECT_YOUNG_ANDROID_SETTINGS,
+            SettingsConstants.YOUNG_ANDROID_SETTINGS_PHONE_TABLET, val);
+        changeFormPreviewSize(idx, width, height);
+      }
     });
-    phoneScreen.add(checkboxPhoneTablet);
+    phoneScreen.add(listboxPhoneTablet);
 
     initWidget(phoneScreen);
   }
 
-  private void changeFormPreviewSize(boolean isChecked) {
-    if (form != null){
-      if (isChecked){
-        form.changePreviewSize(true);
-        checkboxPhoneTablet.setText(MESSAGES.previewPhoneSize());
-      }
-      else {
-        form.changePreviewSize(false);
-        checkboxPhoneTablet.setText(MESSAGES.previewTabletSize());
+  private void changeFormPreviewSize(int idx, int width, int height) {
+    if (form != null) {
+      form.changePreviewSize(width, height);
+      String info = " (" + height + "," + width + ")";
+      if (idx == 0) {
+        listboxPhoneTablet.setItemText(idx, MESSAGES.previewPhoneSize() + info);
+        listboxPhoneTablet.setItemText(1, MESSAGES.previewTabletSize());
+        listboxPhoneTablet.setItemText(2, MESSAGES.previewMonitorSize());
+      } else if (idx == 1) {
+        listboxPhoneTablet.setItemText(idx, MESSAGES.previewTabletSize() + info);
+        listboxPhoneTablet.setItemText(0, MESSAGES.previewPhoneSize());
+        listboxPhoneTablet.setItemText(2, MESSAGES.previewMonitorSize());
+
+      } else {
+        listboxPhoneTablet.setItemText(idx, MESSAGES.previewMonitorSize() + info);
+        listboxPhoneTablet.setItemText(0, MESSAGES.previewPhoneSize());
+        listboxPhoneTablet.setItemText(1, MESSAGES.previewTabletSize());
       }
+      // change settings
     }
   }
 
   public void enableTabletPreviewCheckBox(boolean enable){
     if (form != null){
       if (!enable){
-        form.changePreviewSize(false);
-        checkboxPhoneTablet.setText(MESSAGES.previewTabletSize());
-        checkboxPhoneTablet.setChecked(false);
+        form.changePreviewSize(320, 505);
+        listboxPhoneTablet.setItemSelected(0, true);
       }
     }
-    checkboxPhoneTablet.setEnabled(enable);
+    listboxPhoneTablet.setEnabled(enable);
   }
 
   /**

appinventor/appengine/src/com/google/appinventor/client/editor/simple/components/MockForm.java

@@ -235,11 +235,11 @@ public final class MockForm extends MockContainer {
   private static int verticalScrollbarWidth;
 
   private MockFormLayout myLayout;
-  
+
   // flag to control attempting to enable/disable vertical
   // alignment when scrollable property is changed
   private boolean initialized = false;
-  
+
   private YoungAndroidVerticalAlignmentChoicePropertyEditor myVAlignmentPropertyEditor;
 
   public static final String PROPERTY_NAME_HORIZONTAL_ALIGNMENT = "AlignHorizontal";
@@ -278,7 +278,7 @@ public final class MockForm extends MockContainer {
     formWidget.add(new NavigationBar());
 
     initComponent(formWidget);
-    
+
     // Set up the initial state of the vertical alignment property editor and its dropdowns
     try {
       myVAlignmentPropertyEditor = PropertiesUtil.getVAlignmentEditor(properties);
@@ -292,19 +292,12 @@ public final class MockForm extends MockContainer {
     setScrollableProperty(getPropertyValue(PROPERTY_NAME_SCROLLABLE));
   }
 
-  public void changePreviewSize(boolean isTablet) {
-    if (isTablet) {
-      PORTRAIT_WIDTH   = TABLET_PORTRAIT_WIDTH;
-      PORTRAIT_HEIGHT  = TABLET_PORTRAIT_HEIGHT;
-      LANDSCAPE_WIDTH  = TABLET_LANDSCAPE_WIDTH;
-      LANDSCAPE_HEIGHT = TABLET_LANDSCAPE_HEIGHT;
-    }
-    else {
-      PORTRAIT_WIDTH = PHONE_PORTRAIT_WIDTH;
-      PORTRAIT_HEIGHT = PHONE_PORTRAIT_HEIGHT;
-      LANDSCAPE_WIDTH = PHONE_LANDSCAPE_WIDTH;
-      LANDSCAPE_HEIGHT = PHONE_LANDSCAPE_HEIGHT;
-    }
+  public void changePreviewSize(int width, int height) {
+    // It will definitely be modified in the future to add more options.
+    PORTRAIT_WIDTH = width;
+    PORTRAIT_HEIGHT = height;
+    LANDSCAPE_WIDTH = height;
+    LANDSCAPE_HEIGHT = width;
 
     if (landscape)
       resizePanel(LANDSCAPE_WIDTH, LANDSCAPE_HEIGHT);
@@ -627,7 +620,7 @@ public final class MockForm extends MockContainer {
           SettingsConstants.YOUNG_ANDROID_SETTINGS_APP_NAME, aname);
     }
   }
-  
+
   private void setTitleVisibleProperty(String text) {
     boolean visible = Boolean.parseBoolean(text);
     titleBar.setVisible(visible);