Skip to content

Commit

Permalink
Keyboard Navigation (#3193)
Browse files Browse the repository at this point in the history
  • Loading branch information
Venkata-Sai-Vishwanath-robo authored Jan 13, 2025
1 parent 38550a4 commit 3390576
Show file tree
Hide file tree
Showing 58 changed files with 986 additions and 127 deletions.
28 changes: 27 additions & 1 deletion appinventor/appengine/src/com/google/appinventor/client/Ode.java
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,7 @@
import com.google.appinventor.client.editor.EditorManager;
import com.google.appinventor.client.editor.FileEditor;
import com.google.appinventor.client.editor.ProjectEditor;
import com.google.appinventor.client.editor.simple.components.MockComponent;
import com.google.appinventor.client.editor.simple.palette.DropTargetProvider;
import com.google.appinventor.client.editor.youngandroid.BlocklyPanel;
import com.google.appinventor.client.editor.youngandroid.DesignToolbar;
Expand Down Expand Up @@ -83,7 +84,11 @@
import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.core.client.GWT;
import com.google.gwt.core.client.RunAsyncCallback;
import com.google.gwt.dom.client.NativeEvent;
import com.google.gwt.event.dom.client.BlurHandler;
import com.google.gwt.event.dom.client.ClickHandler;
import com.google.gwt.event.dom.client.KeyCodes;
import com.google.gwt.event.dom.client.KeyDownEvent;
import com.google.gwt.event.dom.client.MouseWheelEvent;
import com.google.gwt.event.dom.client.MouseWheelHandler;
import com.google.gwt.event.logical.shared.ValueChangeEvent;
Expand All @@ -95,6 +100,7 @@
import com.google.gwt.uibinder.client.UiField;
import com.google.gwt.user.client.Command;
import com.google.gwt.user.client.Event;
import com.google.gwt.user.client.Event.NativePreviewEvent;
import com.google.gwt.user.client.History;
import com.google.gwt.user.client.Timer;
import com.google.gwt.user.client.Window;
Expand All @@ -118,6 +124,8 @@
import com.google.gwt.user.client.ui.RootPanel;
import com.google.gwt.user.client.ui.VerticalPanel;
import com.google.gwt.user.client.ui.Widget;
import com.google.gwt.widgetideas.client.event.KeyDownHandler;

import java.util.Random;
import java.util.logging.Level;
import java.util.logging.Logger;
Expand Down Expand Up @@ -1616,6 +1624,15 @@ public DialogBox createEmptyTrashDialog(boolean showDialog) {
dialogBox.show();
}

Event.addNativePreviewHandler(new Event.NativePreviewHandler() {
@Override
public void onPreviewNativeEvent(Event.NativePreviewEvent event) {
if (event.getTypeInt() == Event.ONKEYDOWN && dialogBox.isShowing()) {
dialogBox.hide();
}
}
});

return dialogBox;
}

Expand All @@ -1642,7 +1659,7 @@ private void createWelcomeDialog(final boolean force) {
return;
}
// Create the UI elements of the DialogBox
final DialogBox dialogBox = new DialogBox(false, true); // DialogBox(autohide, modal)
final DialogBox dialogBox = new DialogBox(false, false); // DialogBox(autohide, modal)
dialogBox.setStylePrimaryName("ode-DialogBox");
dialogBox.setText(MESSAGES.createWelcomeDialogText());
dialogBox.setHeight(splashConfig.height + "px");
Expand Down Expand Up @@ -1673,7 +1690,16 @@ public void onClick(Widget sender) {
DialogBoxContents.add(message);
DialogBoxContents.add(holder);
dialogBox.setWidget(DialogBoxContents);
ok.setFocus(true);
dialogBox.show();

Event.addNativePreviewHandler(new Event.NativePreviewHandler() {
public void onPreviewNativeEvent(NativePreviewEvent event) {
if (event.getTypeInt() == Event.ONKEYDOWN && event.getNativeEvent().getKeyCode() == KeyCodes.KEY_ESCAPE && dialogBox.isShowing()) {
dialogBox.hide();
}
}
});
}

/**
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -660,15 +660,15 @@ public interface OdeMessages extends Messages, ComponentTranslations {
@Description("Message providing details about starting a USB connection.")
String usbMenuItem();

@DefaultMessage("Reset Connection")
@DefaultMessage("Reset Connection (Alt + Shift + R)")
@Description("Reset all connections.")
String resetConnectionsMenuItem();

@DefaultMessage("Hard Reset")
@Description("Hard Reset the Emulator.")
String hardResetConnectionsMenuItem();

@DefaultMessage("Refresh Companion Screen")
@DefaultMessage("Refresh Companion Screen (Alt + R)")
@Description("Refresh the companion screen.")
String refreshCompanionMenuItem();

Expand Down Expand Up @@ -730,6 +730,10 @@ public interface OdeMessages extends Messages, ComponentTranslations {
@Description("Redisplay the Splash Screen")
String showSplashMenuItem();

@DefaultMessage("Show Keyboard Shortcuts (Alt + ?)")
@Description("Display the Shortcuts dialog")
String showShortcuts();

@DefaultMessage("Library")
@Description("Name of Library link")
String libraryMenuItem();
Expand Down Expand Up @@ -1275,7 +1279,7 @@ public interface OdeMessages extends Messages, ComponentTranslations {
String blocksLoadFailure(String formName);

// Used in editor/youngandroid/palette/YoungAndroidPalettePanel.java
@DefaultMessage("Search Components...")
@DefaultMessage("Type / to search components")
@Description("Text shown in the component palette search box")
String searchComponents();

Expand Down Expand Up @@ -5140,6 +5144,32 @@ String newerVersionComponentException(String componentType, int srcCompVersion,
@Description("")
String MaximumRangeMethods();

@DefaultMessage(
"<table border='1' cellpadding='8' cellspacing='0'>" +
"<thead>" +
"<tr>" +
"<th>Action</th>" +
"<th>Key Combination</th>" +
"</tr>" +
"</thead>" +
"<tbody>" +
"<tr><td>Focus Component search box</td><td>/</td></tr>" +
"<tr><td>Focus Components tree</td><td>T</td></tr>" +
"<tr><td>Focus Viewer</td><td>V</td></tr>" +
"<tr><td>Focus Properties Panel</td><td>P</td></tr>" +
"<tr><td>Focus Media Panel</td><td>M</td></tr>" +
"<tr><td>Switch between Designer and Block editor</td><td>Ctrl + Alt</td></tr>" +
"<tr><td>Rename Component</td><td>Alt + N</td></tr>" +
"<tr><td>Delete Component</td><td>Delete/Backspace</td></tr>" +
"<tr><td>Reset Connection</td><td>Alt + Shift + R</td></tr>" +
"<tr><td>Refresh Companion Screen</td><td>Alt + R</td></tr>" +
"<tr><td>Navigate Components in components tree</td><td>↑/↓</td></tr>" +
"<tr><td>Open this dialog</td><td>Alt + ?</td></tr>" +
"</tbody>" +
"</table>")
@Description("")
String KeyBoardShortcuts();

// =========== ListPicker
@DefaultMessage("ItemTextColor")
@Description("")
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -174,6 +174,9 @@
<ai:DropDownItem name="ShowSplash" caption="{messages.showSplashMenuItem}">
<actions:ShowSplashAction/>
</ai:DropDownItem>
<ai:DropDownItem name="ShowShortcuts" caption="{messages.showShortcuts}">
<actions:ShowShortcutsAction/>
</ai:DropDownItem>
</ai:DropDownButton>

<!-- Admin Menu -->
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,79 @@
// -*- mode: java; c-basic-offset: 2; -*-
// Copyright 2009-2011 Google, All Rights reserved
// Copyright 2011-2023 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.actions;

import static com.google.appinventor.client.Ode.MESSAGES;

import com.google.appinventor.client.Ode;
import com.google.gwt.dom.client.NativeEvent;
import com.google.gwt.event.dom.client.KeyCodes;
import com.google.gwt.user.client.Command;
import com.google.gwt.user.client.Event;
import com.google.gwt.user.client.ui.Button;
import com.google.gwt.user.client.ui.DialogBox;
import com.google.gwt.user.client.ui.HTML;
import com.google.gwt.user.client.ui.VerticalPanel;

public class ShowShortcutsAction implements Command {

private DialogBox db;

public ShowShortcutsAction() {
db = new DialogBox(true, false);
db.setText("Keyboard Shortcuts");
db.setStyleName("ode-DialogBox");
db.setHeight("200px");
db.setWidth("400px");
db.setGlassEnabled(true);
db.setAnimationEnabled(true);

shortcutKeyHandler();
}

@Override
public void execute() {
VerticalPanel DialogBoxContents = new VerticalPanel();
HTML message = new HTML(MESSAGES.KeyBoardShortcuts());
Button button = new Button(Ode.MESSAGES.okButton());
button.addClickHandler(event -> db.hide());
DialogBoxContents.add(message);
DialogBoxContents.add(button);
db.setWidget(DialogBoxContents);
db.center();
db.show();
button.setFocus(true);
}

private void shortcutKeyHandler() {
Event.addNativePreviewHandler(new Event.NativePreviewHandler() {
@Override
public void onPreviewNativeEvent(Event.NativePreviewEvent event) {
NativeEvent nativeEvent = event.getNativeEvent();
if (event.getTypeInt() == Event.ONKEYDOWN) {
if (nativeEvent.getKeyCode() == 191 && nativeEvent.getAltKey()) {
shortcutPressed();
}
if (nativeEvent.getKeyCode() == KeyCodes.KEY_ESCAPE) {
escPressed();
}
}
}
});
}

private void shortcutPressed() {
if (!db.isShowing()) {
execute();
}
}

private void escPressed() {
if (db.isShowing()) {
db.hide();
}
}
}
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,7 @@

import com.google.gwt.uibinder.client.UiBinder;
import com.google.gwt.uibinder.client.UiField;
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;
Expand All @@ -42,6 +43,7 @@ interface SimpleVisibleComponentsPanelUiBinder extends UiBinder<VerticalPanel, S
@UiField(provided = true) protected 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" };
@UiField protected CheckBox HiddenComponentsCheckbox;

// 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
Expand Down Expand Up @@ -218,6 +220,10 @@ public void enablePhonePreviewCheckBox(boolean enable){
listboxPhonePreview.setEnabled(enable);
}

public void focusCheckbox() {
HiddenComponentsCheckbox.setFocus(true);
}

/**
* Associates a Simple form component with this panel.
*
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@
<ui:with field="messages" type="com.google.appinventor.client.OdeMessages"/>
<g:VerticalPanel styleName="ode-SimpleFormDesigner">
<g:VerticalPanel ui:field="phoneScreen" stylePrimaryName="ode-SimpleFormDesigner">
<ed:HiddenComponentsCheckbox text="{messages.showHiddenComponentsCheckbox}"/>
<ed:HiddenComponentsCheckbox ui:field="HiddenComponentsCheckbox" text="{messages.showHiddenComponentsCheckbox}"/>
<g:ListBox ui:field="listboxPhoneTablet">
<g:item value="0">
<ui:text from="{messages.previewPhoneSize}"/>
Expand Down
Loading

0 comments on commit 3390576

Please sign in to comment.