Add "Clickable" property

Change-Id: I8b10d3723b68a578ba9bd9d900f200c6529bce5b

appinventor/appengine/src/com/google/appinventor/client/youngandroid/YoungAndroidFormUpgrader.java

@@ -1078,7 +1078,7 @@ public final class YoungAndroidFormUpgrader {
     }
     if (srcCompVersion < 4) {
      // The Click event was added.
-     // No properties need to be modified to upgrade to version 4.
+     // The Clickable property was added.
      srcCompVersion = 4;
     }
     return srcCompVersion;

appinventor/blocklyeditor/src/versioning.js

@@ -1583,6 +1583,7 @@ Blockly.Versioning.AllUpgradeMaps =
     3: "noUpgrade",
 
     // Click event was added
+    // The Clickable property was added.
     4: "noUpgrade"
 
   }, // End Image upgraders

appinventor/components/src/com/google/appinventor/components/common/YaVersion.java

@@ -491,8 +491,10 @@ public class YaVersion {
   // For YOUNG_ANDROID_VERSION 197:
   // - BLOCKS_LANGUAGE_VERSION was incremented to 28
   // - WEB_COMPONENT_VERSION was incremented to 7
+  // For YOUNG_ANDROID_VERSION 198:
+  // - IMAGE_COMPONENT_VERSION was incremented to 4
 
-  public static final int YOUNG_ANDROID_VERSION = 197;
+  public static final int YOUNG_ANDROID_VERSION = 198;
 
   // ............................... Blocks Language Version Number ...............................
 
@@ -876,6 +878,7 @@ public class YaVersion {
   // - Scaling Property added, but hidden for now
   // For IMAGE_COMPONENT_VERSION 4:
   // - The Click event was added.
+  // - The Clickable property was added.
   public static final int IMAGE_COMPONENT_VERSION = 4;
 
   // For IMAGEPICKER_COMPONENT_VERSION 2:

appinventor/components/src/com/google/appinventor/components/runtime/Image.java

@@ -10,6 +10,7 @@ import android.Manifest;
 import com.google.appinventor.components.annotations.DesignerComponent;
 import com.google.appinventor.components.annotations.DesignerProperty;
 import com.google.appinventor.components.annotations.PropertyCategory;
+import com.google.appinventor.components.annotations.SimpleEvent;
 import com.google.appinventor.components.annotations.SimpleFunction;
 import com.google.appinventor.components.annotations.SimpleObject;
 import com.google.appinventor.components.annotations.SimpleProperty;
@@ -57,6 +58,8 @@ public final class Image extends AndroidViewComponent {
   private double rotationAngle = 0.0;
 
   private int scalingMode = Component.SCALING_SCALE_PROPORTIONALLY;
+  
+  private boolean clickable = false;
 
   /**
    * Creates a new Image component.
@@ -75,13 +78,6 @@ public final class Image extends AndroidViewComponent {
       }
     };
     view.setFocusable(true);
-    view.setClickable(true);
-    view.setOnClickListener(new View.OnClickListener() {
-      @Override
-      public void onClick(View v) {
-        Click();
-      }
-    });
 
     // Adds the component to its designated container
     container.$add(this);
@@ -97,6 +93,29 @@ public final class Image extends AndroidViewComponent {
     EventDispatcher.dispatchEvent(this, "Click");
   }
 
+  @DesignerProperty(editorType = PropertyTypeConstants.PROPERTY_TYPE_BOOLEAN,
+    defaultValue = "False")
+  @SimpleProperty(description = "Specifies whether the image should be clickable or not.")
+  public void Clickable(boolean clickable) {
+    this.clickable = clickable;
+    view.setClickable(this.clickable);
+    if (this.clickable) {
+      view.setOnClickListener(new View.OnClickListener() {
+        @Override
+        public void onClick(View v) {
+          Click();
+        }
+      });
+    } else {
+      view.setOnClickListener(null);
+    }
+  }
+
+  @SimpleProperty(description = "Specifies whether the image should be clickable or not.", category = PropertyCategory.APPEARANCE)
+  public boolean Clickable() {
+    return this.clickable;
+  }
+
   /**
    * Returns the path of the image's picture.
    *

appinventor/docs/html/reference/components/userinterface.html

@@ -414,6 +414,8 @@ Valid values for the month field are 1-12 and 1-31 for the day field.</dd>
   <dd>This is a limited form of animation that can attach a small number of motion types to images.
  The allowable motions are <code class="highlighter-rouge">ScrollRightSlow</code>, <code class="highlighter-rouge">ScrollRight</code>, <code class="highlighter-rouge">ScrollRightFast</code>,
  <code class="highlighter-rouge">ScrollLeftSlow</code>, <code class="highlighter-rouge">ScrollLeft</code>, <code class="highlighter-rouge">ScrollLeftFast</code>, and <code class="highlighter-rouge">Stop</code>.</dd>
+  <dt id="Image.Clickable" class="boolean"><em>Clickable</em></dt>
+  <dd>Specifies whether the image should be clickable or not.</dd>
   <dt id="Image.Height" class="number bo"><em>Height</em></dt>
   <dd>Specifies the <code class="highlighter-rouge">Image</code>’s vertical height, measured in pixels.</dd>
   <dt id="Image.HeightPercent" class="number wo bo"><em>HeightPercent</em></dt>
@@ -439,7 +441,10 @@ Valid values for the month field are 1-12 and 1-31 for the day field.</dd>
 
 <h3 id="Image-Events">Events</h3>
 
-<p class="events">None</p>
+<dl class="events">
+  <dt id="Image.Click">Click()</dt>
+  <dd>An event that occurs when an image is clicked.</dd>
+</dl>
 
 <h3 id="Image-Methods">Methods</h3>
 

appinventor/docs/markdown/reference/components/userinterface.md

@@ -367,6 +367,9 @@ Component for displaying images and basic animations.
  The allowable motions are `ScrollRightSlow`, `ScrollRight`, `ScrollRightFast`,
  `ScrollLeftSlow`, `ScrollLeft`, `ScrollLeftFast`, and `Stop`.
 
+{:id="Image.Clickable" .boolean} *Clickable*
+: Specifies whether the image should be clickable or not.
+
 {:id="Image.Height" .number .bo} *Height*
 : Specifies the `Image`'s vertical height, measured in pixels.
 
@@ -400,8 +403,9 @@ Component for displaying images and basic animations.
 ### Events  {#Image-Events}
 
 {:.events}
-None
 
+{:id="Image.Click"} Click()
+: An event that occurs when an image is clicked.
 
 ### Methods  {#Image-Methods}