[GSoC] Adding Different Preview Options To The Designer

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

@@ -63,11 +63,77 @@ public interface Images extends Resources {
   ImageResource close();
 
   /**
-   * Phone status bar shown above the form in the visual designer
+   * Phone status bar for Android Holo shown above the form in the visual designer
    */
   @Source("com/google/appinventor/images/phonebar.png")
   ImageResource phonebar();
 
+  /**
+   * Phone status bar for the Android Material form in the visual designer
+   */
+  @Source("com/google/appinventor/images/phonebarAndroidMaterial.png")
+  ImageResource phonebarAndroidMaterial();
+
+  /**
+   * Phone status bar for iPhone containing white left side icons in the visual designer
+   */
+  @Source("com/google/appinventor/images/iPhoneLeftWhiteFB.png")
+  ImageResource phonebariPhoneLeftWhite();
+
+  /**
+   * Phone status bar for iPhone containing white right side icons in the visual designer
+   */
+  @Source("com/google/appinventor/images/iPhoneRightWhite.png")
+  ImageResource phonebariPhoneRightWhite();
+
+  /**
+   * Phone status bar for iPhone containing black left side icons in the visual designer
+   */
+  @Source("com/google/appinventor/images/iPhoneLeftBlack.png")
+  ImageResource phonebariPhoneLeftBlack();
+
+  /**
+   * Phone status bar for iPhone containing black right side icons in the visual designer
+   */
+  @Source("com/google/appinventor/images/iPhoneRightBlack.png")
+  ImageResource phonebariPhoneRightBlack();
+
+  /**
+   * Phone status bar for iPad containing black left side icons in the visual designer
+   */
+  @Source("com/google/appinventor/images/iPadBlackFB.png")
+  ImageResource phonebariPadLeftBlack();
+
+  /**
+   * Phone status bar for iPad containing black right side icons in the visual designer
+   */
+  @Source("com/google/appinventor/images/iPadRightBlack.png")
+  ImageResource phonebariPadRightBlack();
+
+  /**
+   * Phone status bar for iPad containing white left side icons in the visual designer
+   */
+  @Source("com/google/appinventor/images/iPadLeftWhiteFB.png")
+  ImageResource phonebariPadLeftWhite();
+
+  /**
+   * Phone status bar for iPad containing white right side icons in the visual designer
+   */
+  @Source("com/google/appinventor/images/iPadRightWhite.png")
+  ImageResource phonebariPadRightWhite();
+
+  /**
+   * Phone status bar containing white book icon for the iOS form in the visual designer
+   */
+  @Source("com/google/appinventor/images/iOSBookmarkWhite.png")
+  ImageResource bookIconWhite();
+
+  /**
+   * Phone status bar containing black book icon for the iOS form in the visual designer
+   */
+  @Source("com/google/appinventor/images/iOSBookmarkBlack.png")
+  ImageResource bookIconBlack();
+
   /**
    * Spinning/wait graphic to indicate long-running operations.
    */

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

@@ -947,6 +947,18 @@ public interface OdeMessages extends Messages, AutogeneratedOdeMessages {
   @Description("Listbox (monitor) controlling whether to display a preview on Monitor size.")
   String previewMonitorSize();
 
+  @DefaultMessage("Android 3.0-4.4.2 Devices")
+  @Description("Listbox (monitor) controlling whether to display Android Holo Theme Style")
+  String previewAndroidHolo();
+
+  @DefaultMessage("Android 5+ Devices")
+  @Description("Listbox (monitor) controlling whether to display Android Material Theme Style")
+  String previewAndroidMaterial();
+
+  @DefaultMessage("iOS 13 Devices")
+  @Description("Listbox (monitor) controlling whether to display iOS Theme Style")
+  String previewIOS();
+
   // Used in editor/simple/components/MockComponent.java
 
   @DefaultMessage("Rename Component")

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

@@ -10,7 +10,6 @@
 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.MockComponent;
 import com.google.appinventor.client.editor.simple.components.MockForm;
 import com.google.appinventor.client.editor.simple.palette.SimplePaletteItem;
 import com.google.appinventor.client.explorer.project.ComponentDatabaseChangeListener;
@@ -37,7 +36,9 @@ public final class SimpleVisibleComponentsPanel extends Composite implements Dro
   private final VerticalPanel phoneScreen;
   private final CheckBox checkboxShowHiddenComponents;
   private final ListBox listboxPhoneTablet; // A ListBox for Phone/Tablet/Monitor preview sizes
+  private final ListBox listboxPhonePreview; // A ListBox for Holo/Material/iOS preview styles
   private final int[][] drop_lst = { {320, 505}, {480, 675}, {768, 1024} };
+  private final String[] drop_lst_phone_preview = { "Android Material", "Android Holo", "iOS" };
 
   // 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
@@ -128,6 +129,38 @@ public void onChange(ChangeEvent event) {
 
     phoneScreen.add(listboxPhoneTablet);
 
+    listboxPhonePreview = new ListBox() {
+      @Override
+      protected void onLoad() {
+        // onLoad is called immediately after a widget becomes attached to the browser's document.
+        String previewStyle = projectEditor.getProjectSettingsProperty(SettingsConstants.PROJECT_YOUNG_ANDROID_SETTINGS,
+                SettingsConstants.YOUNG_ANDROID_SETTINGS_THEME);
+        boolean classic = (previewStyle.equals("Classic"));
+        listboxPhonePreview.setVisible(!classic);
+        if (classic) {
+          changeFormPhonePreview(-1, "Classic");
+        } else {
+          getUserSettingChangePreview();
+        }
+      }
+    };
+    listboxPhonePreview.addItem("Android 5+ Devices");
+    listboxPhonePreview.addItem("Android 3.0-4.4.2 Devices");
+    listboxPhonePreview.addItem("iOS 13 Devices");
+    listboxPhonePreview.addChangeHandler(new ChangeHandler() {
+      @Override
+      public void onChange(ChangeEvent event) {
+        int idx = listboxPhonePreview.getSelectedIndex();
+        String val = drop_lst_phone_preview[idx];
+        // here, we can change settings by putting chosenStyle value into it
+        projectEditor.changeProjectSettingsProperty(SettingsConstants.PROJECT_YOUNG_ANDROID_SETTINGS,
+            SettingsConstants.YOUNG_ANDROID_SETTINGS_PHONE_PREVIEW, val);
+        changeFormPhonePreview(idx, val);
+      }
+    });
+
+    phoneScreen.add(listboxPhonePreview);
+
     initWidget(phoneScreen);
   }
 
@@ -159,12 +192,32 @@ private void getUserSettingChangeSize() {
     changeFormPreviewSize(idx, width, height);
   }
 
+  // get Phone Preview stored in user settings, and change the preview style.
+  private void getUserSettingChangePreview() {
+    String val = projectEditor.getProjectSettingsProperty(SettingsConstants.PROJECT_YOUNG_ANDROID_SETTINGS,
+        SettingsConstants.YOUNG_ANDROID_SETTINGS_PHONE_PREVIEW);
+    int idx = 0;
+
+    if (val.equals("Classic")) {
+      val = "Android Material";
+    }
+
+    if (val.equals("Android Holo")) {
+      idx = 1;
+    } else if (val.equals("iOS")) {
+      idx = 2;
+    }
+    listboxPhonePreview.setItemSelected(idx, true);
+    changeFormPhonePreview(idx, val);
+  }
+
   private void changeFormPreviewSize(int idx, int width, int height) {
 
     if (form == null)
       return;
 
     form.changePreviewSize(width, height, idx);
+
     String info = " (" + height + "," + width + ")";
     if (idx == 0) {
       listboxPhoneTablet.setItemText(idx, MESSAGES.previewPhoneSize() + info);
@@ -182,6 +235,30 @@ private void changeFormPreviewSize(int idx, int width, int height) {
     // change settings
   }
 
+  private void changeFormPhonePreview(int idx, String chosenVal) {
+
+    if (form == null)
+      return;
+
+    form.changePhonePreview(idx, chosenVal);
+
+    String info = " (" + chosenVal + ")";
+    if (idx == 0) {
+      listboxPhonePreview.setItemText(idx, MESSAGES.previewAndroidMaterial() + info);
+      listboxPhonePreview.setItemText(1, MESSAGES.previewAndroidHolo());
+      listboxPhonePreview.setItemText(2, MESSAGES.previewIOS());
+    } else if (idx == 1) {
+      listboxPhonePreview.setItemText(idx, MESSAGES.previewAndroidHolo() + info);
+      listboxPhonePreview.setItemText(0, MESSAGES.previewAndroidMaterial());
+      listboxPhonePreview.setItemText(2, MESSAGES.previewIOS());
+    } else if (idx == 2){
+      listboxPhonePreview.setItemText(idx, MESSAGES.previewIOS() + info);
+      listboxPhonePreview.setItemText(0, MESSAGES.previewAndroidMaterial());
+      listboxPhonePreview.setItemText(1, MESSAGES.previewAndroidHolo());
+    }
+    // change settings
+  }
+
   public void enableTabletPreviewCheckBox(boolean enable){
     if (form != null){
       if (!enable){
@@ -195,6 +272,19 @@ public void enableTabletPreviewCheckBox(boolean enable){
     listboxPhoneTablet.setEnabled(enable);
   }
 
+  public void enablePhonePreviewCheckBox(boolean enable){
+    if (form != null){
+      if (!enable){
+        changeFormPhonePreview(-1,"Classic");
+        listboxPhonePreview.setVisible(enable);
+      } else {
+        getUserSettingChangePreview();
+        listboxPhonePreview.setVisible(enable);
+      }
+    }
+    listboxPhonePreview.setEnabled(enable);
+  }
+
   /**
    * Associates a Simple form component with this panel.
    *

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

@@ -0,0 +1,27 @@
+// -*- mode: java; c-basic-offset: 2; -*-
+// Copyright 2020 MIT, All rights reserved
+// Released under the Apache License, Version 2.0
+// http://www.apache.org/licenses/LICENSE-2.0
+
+package com.google.appinventor.client.editor.simple.components;
+
+/**
+ * Listener interface for receiving events when the Design Preview
+ * is changed.
+ *
+ * Classes interested in knowing then the Design Preview is changed
+ * should listen for onDesignPreviewChanged. In particular components
+ * that need to draw different svg elements for different previews
+ * should listen and act on these change notices.
+ *
+ * @author  jis@mit.edu (Jeffrey I. Schiller)
+ */
+public interface DesignPreviewChangeListener {
+
+  /**
+   * Invoked when the DesignPreview is Changed
+   *
+   */
+  void onDesignPreviewChanged();
+
+}