[GSoC] Add Menu Component, Sidebar Component and Floating Action Button. #2299

singhalsara8 · 2020-08-29T18:18:46Z

I have added three components:

Menu Component- As part of the menu component, I have added the Options menu, Context menu, and Popup menu.
Sidebar
Floating Action Button

Change-Id: I4cb7bb717b5be11b6ba5ee5051e2a7f03fcb48f7

Change-Id: I1e1d053e5df5e0dc2be502d0129acb0ea99c88be

Change-Id: If02798124ff1ffed56b744131b1ed757c0522993

Change-Id: Ieec6064bdd863e6c2deba16f2c91ea6a421e54b8

Change-Id: I2d55479fb5f49f584a41390e00f39d571e907b03

ewpatton · 2020-08-31T18:09:53Z

I've been experimenting with this, and the FAB is bothering me a bit for two reasons.

It's there by default in the apps, but many apps won't need it and it now requires people who don't want it to turn it off as its added to every project. Can we make it so that you have to drag in a FAB to get it in the project? Dragging more than one could result in an error message.
In the designer it seems to take up space rather than floating above the UI:

versus on the phone:

It would be good if we could float it similarly.

Also note that in the app on the phone I get a back arrow rather than a hamburger menu. I'm not sure what's causing that.

ewpatton · 2020-08-31T20:39:19Z

@AppInventorWorkerBee ok to test

ewpatton · 2020-09-01T05:21:48Z

@singhalsara8 That doesn't seem to fix the issue. I don't think the issue is with the FAB's z-index (999 was likely fine), but rather that it's size is considered greater than 0 for the purposes of computing other element sizes in the MockForm's vertical arrangement. The easiest way to see this is to add any element and set its width and height to Fill Parent. Before this change, the component will fill the MockForm. After this change, it will only fill up to the FAB.

ewpatton · 2020-09-01T05:39:47Z

Also, I don't think the libraries are set up correctly for compiling apps. When I build an empty project and attempt to start it in the emulator I get:

E/AndroidRuntime( 2458): java.lang.RuntimeException: Unable to start activity ComponentInfo{appinventor.ai_ewpatton.BlankProject/appinventor.ai_ewpatton.BlankProject.Screen1}: java.lang.RuntimeException: Failed to resolve attribute at index 3
E/AndroidRuntime( 2458): 	at android.app.ActivityThread.performLaunchActivity(ActivityThread.java:2325)
E/AndroidRuntime( 2458): 	at android.app.ActivityThread.handleLaunchActivity(ActivityThread.java:2387)
E/AndroidRuntime( 2458): 	at android.app.ActivityThread.access$800(ActivityThread.java:151)
E/AndroidRuntime( 2458): 	at android.app.ActivityThread$H.handleMessage(ActivityThread.java:1303)
E/AndroidRuntime( 2458): 	at android.os.Handler.dispatchMessage(Handler.java:102)
E/AndroidRuntime( 2458): 	at android.os.Looper.loop(Looper.java:135)
E/AndroidRuntime( 2458): 	at android.app.ActivityThread.main(ActivityThread.java:5254)
E/AndroidRuntime( 2458): 	at java.lang.reflect.Method.invoke(Native Method)
E/AndroidRuntime( 2458): 	at java.lang.reflect.Method.invoke(Method.java:372)
E/AndroidRuntime( 2458): 	at com.android.internal.os.ZygoteInit$MethodAndArgsCaller.run(ZygoteInit.java:903)
E/AndroidRuntime( 2458): 	at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:698)
E/AndroidRuntime( 2458): Caused by: java.lang.RuntimeException: Failed to resolve attribute at index 3
E/AndroidRuntime( 2458): 	at android.content.res.TypedArray.getColorStateList(TypedArray.java:425)
E/AndroidRuntime( 2458): 	at com.google.android.material.resources.MaterialResources.getColorStateList(MaterialResources.java:71)
E/AndroidRuntime( 2458): 	at com.google.android.material.floatingactionbutton.FloatingActionButton.<init>(FloatingActionButton.java:221)
E/AndroidRuntime( 2458): 	at com.google.android.material.floatingactionbutton.FloatingActionButton.<init>(FloatingActionButton.java:200)
E/AndroidRuntime( 2458): 	at com.google.android.material.floatingactionbutton.FloatingActionButton.<init>(FloatingActionButton.java:196)
E/AndroidRuntime( 2458): 	at com.google.appinventor.components.runtime.AppInventorCompatActivity.onCreate(AppInventorCompatActivity.java:100)
E/AndroidRuntime( 2458): 	at com.google.appinventor.components.runtime.Form.onCreate(Form.java:309)
E/AndroidRuntime( 2458): 	at appinventor.ai_ewpatton.BlankProject.Screen1.onCreate(Screen1.yail:10003)
E/AndroidRuntime( 2458): 	at android.app.Activity.performCreate(Activity.java:5990)
E/AndroidRuntime( 2458): 	at android.app.Instrumentation.callActivityOnCreate(Instrumentation.java:1106)
E/AndroidRuntime( 2458): 	at android.app.ActivityThread.performLaunchActivity(ActivityThread.java:2278)
E/AndroidRuntime( 2458): 	... 10 more
W/ActivityManager( 1518):   Force finishing activity 1 appinventor.ai_ewpatton.BlankProject/.Screen1

ewpatton

Hi @singhalsara8, this is an impressive body of work. I've identified a number of improvements that could be made to the code. You will also want to reset your lib/blockly to match master. Assuming that you have mit-cml as a remote called upstream, you should be able to do the following:

git fetch upstream
git checkout upstream/master lib/blockly
git submodule update lib/blockly
git add lib/blocky
git commit -m "Reset lib/blockly to master"

ewpatton · 2020-09-01T05:43:39Z

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

@@ -360,12 +360,12 @@ public void rename() {

      @Override
      public boolean canDelete() {
-        return !isForm();
+        return !isForm() && !isSidebar() && !isSidebarHeader();


I would rather people be allowed to start a project without the sidebar and add it when they need it rather than force it to always be present. This would mean they should also have the ability to remove it. We also need this to be true of the FAB, which can be "deleted" but if you refresh the page it comes back

ewpatton · 2020-09-01T05:45:16Z

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

@@ -380,7 +380,7 @@ public void delete() {
    properties.addPropertyChangeListener(this);

    // Allow dragging this component in a drag-and-drop action if this is not the root form
-    if (!isForm()) {
+    if (!isForm() && !isMenu() && !isSidebar()) {


As a more generic approach, add a isDraggable method to MockComponent that returns true by default and then have MockForm, MockMenu, and MockSidebar (and probably MockFAB) return false

ewpatton · 2020-09-01T05:46:45Z

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

@@ -0,0 +1,51 @@
+package com.google.appinventor.client.editor.simple.components;


Add missing copyright preamble.

Indentation should be 2 spaces, not 4.

ewpatton · 2020-09-01T05:51:11Z

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

+ * @author singhalsara48@gmail.com (Sara Singhal)
+ */
+@DesignerComponent(version = YaVersion.SIDEBAR_HEADER_COMPONENT_VERSION,
+        description = "Container to contain components for Sidebar Header",


Indentation for these continuation lines should be 4 spaces.

ewpatton · 2020-09-01T05:51:38Z

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

+import com.google.appinventor.components.common.YaVersion;
+
+/**
+ * Container to contain components for Sidebar Header.


This description is used for the documentation, so you might want to expand on the text to explain the purpose of the sidebar, etc.

ewpatton · 2020-09-01T13:25:09Z

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

@@ -2393,6 +2397,20 @@ private void showAboutApplicationNotification() {
    Notifier.oneButtonAlert(this, message, title, buttonText);
  }

+  public void getComponent(View component,ContextMenu menu){
+    componentMap.put(component,menu);


Space after ,

ewpatton · 2020-09-01T13:25:24Z

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

+  }
+
+  @Override
+  public void onCreateContextMenu(android.view.ContextMenu menu, View v, android.view.ContextMenu.ContextMenuInfo menuInfo) {


You can import android.view.ContextMenu.ContextMenuInfo and not have to use it fully qualified here.

ewpatton · 2020-09-01T13:25:36Z

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

+  public void onCreateContextMenu(android.view.ContextMenu menu, View v, android.view.ContextMenu.ContextMenuInfo menuInfo) {
+    super.onCreateContextMenu(menu, v, menuInfo);
+    for (View.OnCreateContextMenuListener listener: onCreateContextMenuListeners) {
+      if(listener.equals(componentMap.get(v))) {


Space between if and (

ewpatton · 2020-09-01T13:27:06Z

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

+import java.util.ArrayList;
+import java.util.List;
+
+@DesignerComponent(version = YaVersion.MENU_COMPONENT_VERSION,


Add a Javadoc to describe more fully what this class does and how it is used. This is used to create the user facing documentation so you'll want it to be easily understood by non-programmers. Once you build the system, it will update docs/markdown/components/layout.md and docs/html/components/layout.html based on what you put here.

ewpatton · 2020-09-01T13:27:31Z

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

+  public void onCreateOptionsMenu(android.view.Menu menu) {
+    this.menu = menu;
+    for (MenuItem item : items) {
+      Log.d(LOG_TAG, "Adding menu item");


Could remove logging statements in this file.

ewpatton · 2020-09-01T13:34:56Z

The tests are also failing, but this is due to the presence of the FAB by default in the Form. I think we shouldn't have sidebar and FAB turned on by default and rather that they should be enabled by dragging the component into the form to turn it on. If they aren't initialized by default, I believe the tests should pass.

ewpatton · 2020-09-04T18:12:58Z

I'm still getting this error on the older emulator running SDK 7:

E/dalvikvm(  237): Could not find class 'com.google.android.material.navigation.NavigationView', referenced from method com.google.appinventor.components.runtime.AppInventorCompatActivity.getSidebar

It seems like we may need to punt on the Sidebar if the SDK is too old, similar to FAB. Check to see whether the SDK is < 14 before instantiating the sidebar view.

ewpatton · 2020-09-04T18:17:44Z

Also, I'm wondering if we should make it so that if the user selects the MockForm we close any open menus/sidebars. If you select these items in classic mode they open, but then there is no way to close them. Selecting the form would act as a "cancellation" intent.

Change-Id: I9502cfbcdc9eae7e6188ee3c9562ed2817a34c0e

singhalsara8 and others added 30 commits August 7, 2020 03:15

Add libraries

6f85230

Implement Floating Action Button

6e52a2c

add click listener

41fe7b2

disable width and height property

af658a0

minor changes

d02d5d5

styling changes

ddc9274

implement sidebar

bd86c79

fix build error

1095a18

minor change

27a443a

add icons

0367a9d

minor changes

9ad5faf

add Java doc

cc8227a

method for sidebar implementation

c8b5592

remove tab changes

da24513

position floating action button

213b7ea

minor changes

676ec84

Add Menu and MenuItem components to construct Android options menu

48443e3

Add MockMenu and MockMenuItem to simulate options menu in designer

41e86d8

Create new icons for Menu and MenuItem components

b653f83

Make menus work in Companion

c38a028

Change-Id: I4cb7bb717b5be11b6ba5ee5051e2a7f03fcb48f7

WIP menus

896a113

Change-Id: I1e1d053e5df5e0dc2be502d0129acb0ea99c88be

Add onPrepareOptionsMenuListener interface

0604c40

Change-Id: If02798124ff1ffed56b744131b1ed757c0522993

Update companion app

29cd190

Change-Id: Ieec6064bdd863e6c2deba16f2c91ea6a421e54b8

More work

f9bfc63

Change-Id: I2d55479fb5f49f584a41390e00f39d571e907b03

implement Context Menu Container

1b9670b

implement menuitems and basic functionality of context menu

6b66a05

add click event for menuitems

77f5b4e

add properties to context menu items.

f8e44b6

remove custom listener for context menu

a469a3a

implement Popup menu

e3898a9

make FAB float in the designer

e5ff05a

fix fab float issue

63b50aa

ewpatton requested changes Sep 1, 2020

View reviewed changes

ewpatton self-assigned this Sep 1, 2020

ewpatton modified the milestones: nb184a, GSOC Release Sep 1, 2020

ewpatton added pull request: needs reply to review and removed pull request: needs review labels Sep 1, 2020

singhalsara8 added 8 commits September 1, 2020 22:50

Enable Floating Action Button in designer palette

442c142

add background to sidebar

37408d5

Reset lib/blockly to master

876a829

add copyright preamble and modify indentation

21e7884

codestyle changes

7db1dd6

resolve build failure

f9d226a

remove code duplicacy in menu items

57d432d

add documentation

5204067

ewpatton modified the milestones: GSOC Release, nb187 Dec 1, 2020

SusanRatiLane self-assigned this Jan 25, 2021

SusanRatiLane mentioned this pull request Feb 12, 2021

Update robolectric to the latest version #2413

Open

Merge branch 'master' into GSoC-2020-Sara

bde7600

Change-Id: I9502cfbcdc9eae7e6188ee3c9562ed2817a34c0e

ewpatton removed this from the nb187 milestone Aug 4, 2021

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[GSoC] Add Menu Component, Sidebar Component and Floating Action Button. #2299

[GSoC] Add Menu Component, Sidebar Component and Floating Action Button. #2299

singhalsara8 commented Aug 29, 2020

ewpatton commented Aug 31, 2020

ewpatton commented Aug 31, 2020

ewpatton commented Sep 1, 2020

ewpatton commented Sep 1, 2020

ewpatton left a comment

ewpatton Sep 1, 2020

ewpatton Sep 1, 2020

ewpatton Sep 1, 2020

ewpatton Sep 1, 2020

ewpatton Sep 1, 2020

ewpatton Sep 1, 2020

ewpatton Sep 1, 2020

ewpatton Sep 1, 2020

ewpatton Sep 1, 2020

ewpatton Sep 1, 2020

ewpatton commented Sep 1, 2020

ewpatton commented Sep 4, 2020

ewpatton commented Sep 4, 2020

		@@ -0,0 +1,51 @@
		package com.google.appinventor.client.editor.simple.components;

[GSoC] Add Menu Component, Sidebar Component and Floating Action Button. #2299

Are you sure you want to change the base?

[GSoC] Add Menu Component, Sidebar Component and Floating Action Button. #2299

Conversation

singhalsara8 commented Aug 29, 2020

ewpatton commented Aug 31, 2020

ewpatton commented Aug 31, 2020

ewpatton commented Sep 1, 2020

ewpatton commented Sep 1, 2020

ewpatton left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

ewpatton commented Sep 1, 2020

ewpatton commented Sep 4, 2020

ewpatton commented Sep 4, 2020