Examples with ContextMenu edu.cmu.cs.hcii.cogtool.model.ContextMenu used on opensource projects

Example 1 with ContextMenu

use of edu.cmu.cs.hcii.cogtool.model.ContextMenu in project cogtool by cogtool.

the class SEDemoUI method populateContextMenu.

protected void populateContextMenu(TransitionSource source, List<MenuItemDefinition> menuItems) {
    Collection<Transition> values = source.getTransitions().values();
    Iterator<Transition> iter = values.iterator();
    SEDemoTransitionLID itemLID;
    while (iter.hasNext()) {
        Transition trans = iter.next();
        SEDemoUI.DemoTransition ftrans = new SEDemoUI.FollowTransition(selection, trans);
        // Add the ftrans to the list in the context menus
        itemLID = new SEDemoTransitionLID("PerformDemoTransition", ftrans);
        String transitionStr = KeyDisplayUtil.convertActionToMenuText(ftrans.getLocalizedString());
        MenuItemDefinition mItem = new SimpleMenuItemDefinition(transitionStr, itemLID, MenuUtil.ENABLED);
        menuItems.add(mItem);
    }
    // Check to see if any transitions are actually available.
    if (values.size() == 0) {
        MenuItemDefinition mItem = new SimpleMenuItemDefinition(L10N.get("SE.DemoNoPredefinedTransitions", "No defined transitions for ") + source.getName(), null);
        // Add a default disabled message
        menuItems.add(mItem);
    }
    boolean selfTransitionOK = true;
    // Add a default look-at transition for all regions except Devices
    if (source.getTransitionSourceType() == TransitionSourceType.Widget) {
        IWidget widget = (IWidget) source;
        Object isSep = widget.getAttribute(WidgetAttributes.IS_SEPARATOR_ATTR);
        if ((NullSafe.equals(WidgetAttributes.IS_SEPARATOR, isSep)) || (widget.getWidgetType() == WidgetType.Noninteractive) || ((widget instanceof MenuHeader) || (widget instanceof PullDownHeader) || (widget instanceof ContextMenu))) {
            selfTransitionOK = false;
        }
        // Add standard menus to the list of items
        menuItems.add(MenuUtil.SEPARATOR);
        SEDemoUI.DemoTransition lookAtTrans = new SEDemoUI.LookAtTransition(selection, widget);
        // Add default transition options.
        String itemLabel = L10N.get("SE.DemoLookAt", "Look at") + " " + widget.getName();
        itemLID = new SEDemoTransitionLID("PerformDemoLookAtTransition", lookAtTrans);
        menuItems.add(new SimpleMenuItemDefinition(itemLabel, itemLID, MenuUtil.ENABLED));
    }
    if (selfTransitionOK) {
        menuItems.add(MenuUtil.SEPARATOR);
        itemLID = new SEDemoTransitionLID("PerformSelfTransition", new SEDemoUI.SelfTransition(selection, source, null));
        MenuItemDefinition mItem = new SimpleMenuItemDefinition(L10N.get("SE.SelfTransition", "Perform Self-transition"), itemLID, MenuUtil.ENABLED);
        menuItems.add(mItem);
    }
}

Example 2 with ContextMenu

use of edu.cmu.cs.hcii.cogtool.model.ContextMenu in project cogtool by cogtool.

the class FrameEditorUI method confirmRenameFigure.

protected void confirmRenameFigure() {
    if ((editor != null) && editor.inUse()) {
        String newTitle = editor.getText();
        editor.cleanup();
        // figure whose title is currently being edited
        IFigure figure = (IFigure) editor.getData();
        if (figure instanceof PotentialFigure) {
            if ("".equals(newTitle)) {
                // nothing to do if empty string on potential item!
                return;
            }
            GraphicalTraversableWidget<?> parent = potentialUIFig.getFigureOwner();
            TraversableWidget parentModel = (TraversableWidget) parent.getModel();
            boolean isRightPotentialFigure = (figure == potentialUIFig.getRightFigure());
            WidgetType type = null;
            AParentWidget header = null;
            SimpleWidgetGroup group = null;
            boolean isSeparator = false;
            if (parentModel instanceof MenuItem) {
                type = WidgetType.MenuItem;
                MenuItem parentItem = (MenuItem) parentModel;
                if (isRightPotentialFigure) {
                    // position of selected figure is on the right
                    // parent menuitem becomes a submenu; figure to be
                    // created becomes a child of the submenu
                    parentItem.setSubmenu(true);
                    header = parentItem;
                } else {
                    // if position is on the bottom and the parent is not a
                    // header, put the new widget in the same menu as the
                    // parent item
                    header = parentItem.getParent();
                    // previous item should hide children if it's a submenu
                    ((GraphicalParentWidget<?, ?>) parent).closeChildren();
                }
                if (parentModel.getWidgetType() != WidgetType.Submenu) {
                    isSeparator = GraphicalWidgetRenderer.SEPARATOR_STRING.equals(newTitle);
                }
            } else if (parentModel instanceof ContextMenu) {
                header = (ContextMenu) parentModel;
                type = WidgetType.MenuItem;
                isSeparator = GraphicalWidgetRenderer.SEPARATOR_STRING.equals(newTitle);
            } else if (parentModel instanceof MenuHeader) {
                // and hide children of the previous header
                if (isRightPotentialFigure) {
                    type = WidgetType.Menu;
                    ((GraphicalParentWidget<?, ?>) parent).closeChildren();
                    group = parentModel.getParentGroup();
                } else {
                    header = (MenuHeader) parentModel;
                    type = WidgetType.MenuItem;
                    isSeparator = GraphicalWidgetRenderer.SEPARATOR_STRING.equals(newTitle);
                }
            } else if (parentModel instanceof PullDownItem) {
                type = WidgetType.PullDownItem;
                if (!isRightPotentialFigure) {
                    PullDownItem parentItem = (PullDownItem) parentModel;
                    header = parentItem.getParent();
                    isSeparator = GraphicalWidgetRenderer.SEPARATOR_STRING.equals(newTitle);
                }
            } else if (parentModel instanceof PullDownHeader) {
                type = WidgetType.PullDownItem;
                if (!isRightPotentialFigure) {
                    header = (PullDownHeader) parentModel;
                    isSeparator = GraphicalWidgetRenderer.SEPARATOR_STRING.equals(newTitle);
                }
            } else if (parentModel instanceof ListItem) {
                type = WidgetType.ListBoxItem;
                group = parentModel.getParentGroup();
                isSeparator = GraphicalWidgetRenderer.SEPARATOR_STRING.equals(newTitle);
            } else if (parentModel instanceof GridButton) {
                type = parentModel.getWidgetType();
                group = parentModel.getParentGroup();
            }
            Rectangle r = ((PotentialFigure) figure).getUnscaledBounds();
            DoubleRectangle bounds = new DoubleRectangle(r.x, r.y, r.width, r.height);
            performAction(CogToolLID.NewWidget, new FrameEditorUI.NewWidgetParameters(bounds, header, type, view.isAutomaticCreation(), newTitle, group, isSeparator));
        } else {
            boolean isSeparator = GraphicalWidgetRenderer.SEPARATOR_STRING.equals(newTitle);
            performAction(FrameEditorLID.ChangeTitleProperty, new FrameEditorUI.ActionStringParameters(newTitle, selection, isSeparator), true);
        }
    }
}

Example 3 with ContextMenu

use of edu.cmu.cs.hcii.cogtool.model.ContextMenu in project cogtool by cogtool.

the class FrameEditorController method createWidget.

private Widget createWidget(WidgetType defaultType, DoubleRectangle bounds, String widgetTitle, boolean isStandard) {
    Widget widget;
    // the user specified actual bounds interactively
    if (isStandard) {
        if (defaultType == WidgetType.Menu) {
            SimpleWidgetGroup newMenuHeaderGroup = new SimpleWidgetGroup(SimpleWidgetGroup.HORIZONTAL);
            widget = new MenuHeader(newMenuHeaderGroup, bounds, widgetTitle);
        } else if (defaultType == WidgetType.PullDownList) {
            widget = new PullDownHeader(bounds, widgetTitle);
        } else if (defaultType == WidgetType.ContextMenu) {
            widget = new ContextMenu(bounds, widgetTitle);
            // The default value for CONTEXT_MENU_ACTION_ATTR
            // is RIGHT_CLICK; must change to TAP_HOLD if the devices
            // contain a Touchscreen but not a Mouse
            Set<DeviceType> deviceTypes = design.getDeviceTypes();
            if (deviceTypes.contains(DeviceType.Touchscreen) && !deviceTypes.contains(DeviceType.Mouse)) {
                widget.setAttribute(WidgetAttributes.CONTEXT_MENU_ACTION_ATTR, WidgetAttributes.TAP_HOLD);
            }
        } else if (defaultType == WidgetType.ListBoxItem) {
            SimpleWidgetGroup newListItemGroup = new SimpleWidgetGroup(SimpleWidgetGroup.VERTICAL);
            widget = new ListItem(newListItemGroup, bounds, widgetTitle);
            newListItemGroup.setAttribute(WidgetAttributes.FIRST_VISIBLE_ATTR, widget);
        } else if (defaultType == WidgetType.Radio) {
            RadioButtonGroup newRadioGroup = new RadioButtonGroup();
            widget = new RadioButton(newRadioGroup, bounds, widgetTitle);
        } else if (defaultType == WidgetType.Check) {
            GridButtonGroup newCheckGroup = new GridButtonGroup();
            widget = new CheckBox(newCheckGroup, bounds, widgetTitle);
        } else {
            // Create new widget in specified location
            // Note: could be a child widget;
            //       if so, the user is managing the hierarchy!
            widget = new Widget(bounds, defaultType);
        }
        widget.setAttribute(WidgetAttributes.IS_STANDARD_ATTR, WidgetAttributes.IS_STANDARD);
    } else {
        // Create new widget in specified location
        // Note: could be a child widget;
        //       if so, the user is managing the hierarchy!
        widget = new Widget(bounds, defaultType);
        widget.setAttribute(WidgetAttributes.IS_STANDARD_ATTR, WidgetAttributes.IS_CUSTOM);
    }
    return widget;
}

Example 4 with ContextMenu

use of edu.cmu.cs.hcii.cogtool.model.ContextMenu in project cogtool by cogtool.

the class DesignExportToHTML method buildFrameHTML.

/**
	 * Build the HTML around a single frame.
	 * This really just involves building an image map over the
	 * areas specified by the widgets, as well as the GraphicalDevices
	 * Since the graphical Devices don't really have a "Name"
	 * Also, since the Graphical devices and the frame name are not in the
	 * Normal frame... (and we are using a frame not a design)
	 * Need to add graphical devices using normal HTML.
	 *
	 * Requires the name of the frame image to be passed in.
	 *
	 * A copy of overlib.js needs to be copied to the output directory as well.
	 * InputStream stream =
	 *     ClassLoader.getSystemResourceAsStream
	 *          ("edu/cmu/cs/hcii/cogtool/resources/overlib.js");
	 *
	 * @param frame
	 * @param frameImageName
	 * @return
	 */
protected String buildFrameHTML(Frame frame) {
    String notHelpString = NOT_HELP_DEFAULT;
    StringBuilder html = new StringBuilder();
    html.append("<!DOCTYPE HTML PUBLIC \"-//W3C//DTD HTML 4.01 Transitional//EN\">\n");
    html.append("<html>\n");
    html.append("<title>");
    html.append(frame.getName());
    html.append("</title>\n");
    //html.append("<style type='text/css'> body { margin:0; padding:0; } </style>\n");
    html.append("<link rel='stylesheet' type='text/css' href='build/fonts-min.css' />\n");
    html.append("<link rel='stylesheet' type='text/css' href='build/menu.css' />\n");
    html.append("<script type='text/javascript' src='build/yahoo-dom-event.js'></script>\n");
    html.append("<script type='text/javascript' src='build/container_core.js'></script>\n");
    html.append("<script type='text/javascript' src='build/menu.js'></script>\n");
    // Add javascript load for overlay code.
    html.append("<script type='text/javascript' ");
    html.append(" src='build/overlib.js' ");
    html.append(" language='JavaScript'></script>\n");
    html.append("<style type='text/css'> div.yuimenu { position: absolute; visibility: hidden; } </style>\n");
    html.append("<body style=\"cursor:default;\" class=' yui-skin-sam' onload=\"onLoad()\" onkeydown=\"checkKey(event)\">\n");
    // Create the table with the frame name.
    html.append("<table border=1>\n");
    html.append("<tr>\n");
    // -------------------------
    // Add the frame title
    // -------------------------
    html.append("<td align='center'>\n");
    html.append(frame.getName());
    html.append("</td>\n");
    html.append("</tr>\n");
    // -------------------------
    // Add the device interfaces.
    // -------------------------
    html.append("<tr>\n");
    html.append("<td>\n");
    html.append("<img align=center src='");
    html.append(getFrameURL(frame, ".jpg"));
    //Overlib is a javascript biult-in function that shows a nice pop-up box. DEMONSTRATE!
    //I have added a map for this image so that this image will follow a map in the case of "HotSpots"
    html.append("' onclick=\"" + NOT_ACCOMPLISH_GOAL + "\" usemap=\"#Button_Map\" />\n");
    html.append("</td>\n</tr>\n</table>\n");
    // save any menus encountered to create them in javascript later
    List<AMenuWidget> menus = new ArrayList<AMenuWidget>();
    // only build a group of radio buttons or list box items once
    Set<SimpleWidgetGroup> visitedGroups = new HashSet<SimpleWidgetGroup>();
    // loop over all widgets
    Iterator<IWidget> widgetIterator = frame.getWidgets().iterator();
    //NoticS: while function to go over all widgets
    while (widgetIterator.hasNext()) {
        IWidget widget = widgetIterator.next();
        //html.append(buildWidgetHTML(widget, visitedGroups));
        widgetHTML += buildWidgetHTML(widget, visitedGroups, frame);
        if ((widget instanceof MenuHeader) || (widget instanceof ContextMenu)) {
            menus.add((AMenuWidget) widget);
        }
    }
    mapHTML += "</map>\n";
    html.append(mapHTML);
    html.append(widgetHTML);
    mapHTML = "<map name=\"Button_map\">\n";
    widgetHTML = "";
    //javascript functions
    html.append("<script type='text/javascript'>\n");
    html.append("var isIE = navigator.appName.indexOf(\"Microsoft\")!=-1;\n");
    html.append("var isWin = navigator.appVersion.indexOf(\"Win\")!=-1;\n");
    html.append("var notAccomplishGoal = \"" + notHelpString + "\";\n");
    html.append("var keyboardString = \"\";\n");
    html.append("var hoverElt = null;\n");
    html.append("var keyTransitionMap = new Object();\n");
    html.append("var clickMap = null;\n");
    html.append("var curEvt = null;\n");
    html.append("var numClicks = 0;\n");
    html.append("var focusString = \"\";\n");
    html.append("var focusTransitionMaps = new Object();\n");
    html.append("var curFocusMap = null;\n");
    int devTypes = DeviceType.buildDeviceSet(frame.getDesign().getDeviceTypes());
    if (DeviceType.Keyboard.isMember(devTypes) || DeviceType.Touchscreen.isMember(devTypes)) {
        html.append(buildKeyTransitionMap(frame.getInputDevices(), frame.getWidgets()));
    }
    // Function to account for IE versus Firefox differences in
    // mouse events - they use a different set of mouse button constants
    html.append("\nfunction getMouseButton(button)\n{\n");
    html.append("  if (button == " + LEFT_MOUSE + ") {\n");
    html.append("    return isIE ? 1 : 0;\n  }\n");
    html.append("  if (button == " + MIDDLE_MOUSE + ") {\n");
    html.append("    return isIE ? 4 : 1;\n  }\n");
    html.append("  if (button == " + RIGHT_MOUSE + ") {\n");
    html.append("    return isIE ? 2 : 2;\n  }\n}\n\n");
    html.append("function onLoad()\n{\n");
    html.append("  var str = document.location.search;\n");
    html.append("  if (str != null) {\n");
    html.append("    str = str.substr(1);\n");
    html.append("    var search = str.split(\"&\");\n");
    html.append("    var searchCount = search.length;\n");
    html.append("    for (i = 0; i < searchCount; i++) {\n");
    html.append("      var check = search[0].split(\"=\");\n");
    html.append("      if ((check.length == 2) && (check[0] == \"focusID\")) {\n");
    html.append("        var elt = document.getElementById(decodeURIComponent(check[1]));\n");
    html.append("        if (elt != null) {\n");
    html.append("          elt.focus();\n");
    html.append("          if (elt.type == 'radio') {\n");
    html.append("            elt.checked = true;\n        }\n");
    html.append("          else if (elt.type == 'checkbox') {\n");
    html.append("            elt.checked = ! elt.checked;\n");
    html.append("          }\n");
    html.append("        }\n");
    html.append("        break;\n");
    html.append("      }\n    }\n  }\n} // onLoad\n\n");
    // The following two methods are only used for Yahoo menu events.
    // newframe is a string representing the html file of the frame to be
    // transitioned to; button is the mouse button that causes that
    // transition, and e is the actual event that is checked against
    html.append("function checkMenuTransitions(newFrame, button, e)\n{\n");
    html.append("  return (newFrame && (button == e.button));\n}\n\n");
    // The Yahoo menus use this function, so it requires three parameters.
    // The first we don't use, the second stores the event, and the third
    // is an array of strings representing html files. The function above
    // takes this information plus a mapping from the index in that array
    // to the mouse button that effects the corresponding transition, and
    // determines whether a transition should occur.  If so, it changes
    // the location of the document.
    html.append("function menuTransition(ignore, p_aArgs, p_oValue)\n{\n");
    html.append("  var transitionIndex = -1;\n  for (i = 0; i < p_oValue.length; i++) {\n");
    html.append("    if (checkMenuTransitions(p_oValue[i], getMouseButton(i+1), p_aArgs[0])) {\n");
    html.append("      if ((p_oValue[i] == " + IGNORE_LEFT_CLICK + ")) {\n");
    html.append("        return;\n      }\n");
    html.append("      transitionIndex = i;\n    }\n  }\n");
    html.append("  if (transitionIndex >= 0) {\n");
    html.append("    document.location.href = p_oValue[transitionIndex];\n  }\n");
    html.append("  else {\n    " + NOT_ACCOMPLISH_GOAL + "\n  }\n}\n\n");
    // Return an integer representing the modifier state of the current
    // event object (NOTE: event has "metaKey" but no fnKey or cmdKey)
    html.append("function getModifiers(e)\n{\n");
    html.append("  var result = 0;\n  if (e.shiftKey) {\n");
    html.append("    result += " + AAction.SHIFT + ";\n  }\n");
    html.append("  if (e.ctrlKey) {\n    result += " + AAction.CTRL + ";\n  }\n");
    html.append("  if (e.altKey) {\n    result += " + AAction.ALT + ";\n  }\n\n");
    html.append("  return result;\n}\n\n");
    // The following two functions are used for transitions from regular
    // HTML elements.  This one takes the current event object, the set
    // of values to be considered, and the number of clicks that have
    // occurred and determines whether a transition should be followed.
    html.append("function checkTransitions(clicks, params, event)\n{\n");
    html.append("  if (clicks != params[1]) {\n    return false;\n  }\n\n");
    html.append("  var modifiers = getModifiers(event);\n");
    html.append("  var button = event.button;\n");
    html.append("  if ((params[0] == " + RIGHT_MOUSE + ") &&");
    html.append(" (modifiers & " + AAction.CTRL + ") && (! isWin)) {\n");
    html.append("    button = getMouseButton(" + RIGHT_MOUSE + ");\n");
    html.append("    modifiers -= " + AAction.CTRL + ";\n  }\n\n");
    html.append("  if (getMouseButton(params[0]) != button) {\n");
    html.append("    return false;\n  }\n  if (modifiers != params[2]) {\n");
    html.append("    return false;\n  }\n\n  return true;\n}\n\n");
    // clicks is the number of clicks performed on the widget (1, 2, or 3),
    // and event is the HTML event object.  transitionMap is an array of
    // arrays.  The sub-arrays have four elements that together define a
    // mouse transition: which button, how many clicks, the keyboard
    // modifier state, and the destination frame, in that order.
    html.append("function followTransition(clicks, event, transitionMap)\n{\n");
    html.append("  var frame = null;\n");
    html.append("  for (i = 0; i < transitionMap.length; i++) {\n");
    html.append("    var params = transitionMap[i];\n");
    html.append("    if (checkTransitions(clicks, params, event)) {\n");
    html.append("      frame = params[3];\n");
    html.append("      if ((frame == " + IGNORE_LEFT_CLICK + ") && (clicks == 1)) return;\n    }\n  }\n\n");
    html.append("  if (frame != null) {\n");
    html.append("    document.location.href = frame;\n");
    html.append("    return true;\n  }\n");
    html.append("  " + NOT_ACCOMPLISH_GOAL + "\n  return false;\n}\n\n");
    // Used for context menus to put the menu where the mouse was clicked
    html.append("function displayContextMenu(event, menu)\n{\n");
    html.append("  menu.cfg.setProperty(\"x\", event.clientX);\n");
    html.append("  menu.cfg.setProperty(\"y\", event.clientY);\n");
    html.append("  menu.show();\n}\n\n");
    // This function allows clicking on the label of a checkbox to toggle
    // it instead of only being able to click on the box itself.  CogTool
    // checkbox widgets work this way.
    html.append("function toggleCheckbox(eltId)\n{\n");
    html.append("  var elt = document.getElementById(eltId);\n");
    html.append("  if (typeof(elt) != 'undefined') {\n");
    html.append("    if (elt.type == 'checkbox') {\n");
    html.append("      elt.checked = ! elt.checked;\n    }\n  }\n}\n");
    // Similar to toggleCheckbox, but for radio buttons
    html.append("function selectRadio(eltId)\n{\n");
    html.append("  var elt = document.getElementById(eltId);\n");
    html.append("  if (typeof(elt) != 'undefined') {\n");
    html.append("    if (elt.type == 'radio') {\n");
    html.append("      elt.checked = true;\n    }\n  }\n}\n\n");
    // There is no notion of "hover" in html, only mouse over.  So if
    // there is a hover transition, it needs to save the frame to be
    // transitioned to in a global variable and start a timer to see
    // if the cursor remains hovered over the element.
    html.append("function timeHover(frame)\n{\n  hoverElt = frame;\n");
    html.append("  window.setTimeout(\"checkHover()\", 1000);\n}\n\n");
    // When the timer is up, if the cursor is still there, it does the
    // transition.
    html.append("function checkHover()\n{\n  if (hoverElt) {\n");
    html.append("    document.location.href = hoverElt;\n  }\n");
    html.append(/*else {\n" + NOT_ACCOMPLISH_GOAL + "\n}\n*/
    "}\n\n");
    // If there is a mouse out event on any widget, it discards the hover
    // information.
    html.append("function cancelHover()\n{\n  hoverElt = null;\n}\n\n");
    // Used for keyboard transitions.  Taking into account regexp special
    // characters, it uses a regular expression to test whether the string
    // str (the string that collects keyboard input) ends with the string
    // s (the string that causes a transition)
    html.append("function endsWith(str, s)\n{\n");
    html.append("  s = s.replace(/\\\\|\\(|\\)|\\*|\\^|\\$|\\+|\\?|\\.|\\||\\{|\\}|\\[|\\]/g, escaper);\n");
    html.append("  var reg = new RegExp(s + \"$\");\n");
    html.append("  return reg.test(str);\n}\n\n");
    // Called when a key is pressed; adds the new key to the keyboard
    // string and, if applicable, the string for the widget that has the
    // focus (first), and checks whether it should do a transition
    // TODO NOTE: Widgets for which key transitions don't work:
    // radio buttons, links, menu items, pull-down items, list box items
    html.append("function checkKey(e)\n{\n  if (curFocusMap) {\n");
    html.append("    focusString += String.fromCharCode(e.keyCode);\n");
    html.append("    var result = checkStrings(focusString, curFocusMap);\n");
    html.append("    if (result) {\n      document.location.href = result;\n");
    html.append("      return;\n    }\n  }\n");
    html.append("  keyboardString += String.fromCharCode(e.keyCode);\n");
    html.append("  var result = checkStrings(keyboardString, keyTransitionMap);\n");
    html.append("  if (result) {\n      document.location.href = result;\n  }\n}\n\n");
    // Returns the longest string that matches the currently collected
    // input, or null
    html.append("function checkStrings(collector, map)\n{\n");
    html.append("  var longest = null;\n");
    html.append("  for (var i in map) {\n");
    html.append("    if (endsWith(collector.toLowerCase(), i)) {\n");
    html.append("      if (! longest) {\n        longest = i;\n      }\n");
    html.append("      if (i.length > longest.length) {\n        longest = i;\n");
    html.append("      }\n    }\n  }\n");
    html.append("  if (longest) {\n    return map[longest];\n  }\n");
    html.append("  return null;\n}\n\n");
    // adds escape characters to special keys so the regexp doesn't
    // get confused
    html.append("function escaper(c)\n{\n  return \'\\\\\' + c;\n}\n\n");
    // html detects left double-clicks but not middle or right double clicks,
    // so the next two functions handle that.  This one is called on mouse
    // up (onclick doesn't detect right clicks, see buildWidgetHTML()).
    // transitionMap is an array of arrays (see the comments above
    // followTransition).  It starts a timer after it is called; if
    // it is called again before the timer runs out (as determined by the
    // state of the global numClicks variable), it starts another timer,
    // otherwise it checks a single click transition.  If the second timer
    // runs out, it checks a double click transition, but if this function
    // is called a third time, it checks a triple click transition.
    // TODO: NOTE: Even with onmouseup, html seems to fail to detect middle
    // clicks in Firefox, so this solution works only with right clicks.
    html.append("function checkClicks(transitionMap, e)\n{\n");
    html.append("  curEvt = e;\n  numClicks++;\n\n");
    html.append("  if (numClicks == 3) {\n");
    html.append("    if (followTransition(3, e, transitionMap)) {\n");
    html.append("      window.clearTimeout();\n    }\n\n");
    html.append("    numClicks = 0;\n  }\n  else {\n");
    html.append("    clickMap = transitionMap;\n");
    html.append("    if (numClicks == 1) {\n");
    html.append("      window.setTimeout(\"doClick1()\", 500);\n    }\n");
    html.append("    else if (numClicks == 2) {\n");
    html.append("      window.clearTimeout();\n");
    html.append("      window.setTimeout(\"doClick2()\", 300);\n    }\n  }\n}\n\n");
    // If there was only a single click, it uses the saved
    // map to try to perform a transition with one click, and clears the state.
    html.append("function doClick1()\n{\n");
    html.append("  if ((clickMap != null) && (numClicks == 1)) {\n");
    html.append("    followTransition(1, curEvt, clickMap);\n");
    html.append("    clickMap = null;\n    numClicks = 0;\n  }\n}\n\n");
    // If there was a double click, it uses the saved
    // map to try to perform a transition with two clicks, and clears the state.
    html.append("function doClick2()\n{\n");
    html.append("  if ((clickMap != null) && (numClicks == 2)) {\n");
    html.append("    followTransition(2, curEvt, clickMap);\n");
    html.append("    clickMap = null;\n    numClicks = 0;\n  }\n}\n\n");
    // Called when any widget gets the focus (html's onfocus).  Uses the
    // widgets ID to index into the map of widgets' keyboard transitions.
    html.append("function onFocus(eltID)\n{\n");
    html.append("  keyboardString = \"\";\n");
    html.append("  var map = focusTransitionMaps[eltID];\n");
    html.append("  if (typeof(map) != 'undefined') {\n");
    html.append("    curFocusMap = focusTransitionMaps[eltID];\n  }\n}\n\n");
    // Clears the current focus map so it knows that no widget has the focus
    html.append("function onBlur()\n{\n  curFocusMap = null;\n}\n\n");
    html.append("YAHOO.util.Event.onDOMReady(function () {\n");
    // use yahoo javascript library to build up menus
    if (menus.size() > 0) {
        for (int i = 0; i < menus.size(); i++) {
            AMenuWidget menu = menus.get(i);
            String menuVar = "oMenu" + i;
            String context = "";
            if (menu instanceof MenuHeader) {
                // associate it with the corresponding menu header
                context = ", { context: [\"" + menu.getName() + "\", \"tl\", \"bl\"]}";
            }
            // else, if it is a context menu, have it appear wherever the
            // mouse is clicked (in a javascript method)
            // create the javascript menu object
            html.append("  var " + menuVar + " = new YAHOO.widget.Menu(\"menu" + i + "\"" + context + ");\n");
            html.append("  " + menuVar + ".addItems(" + buildItemsString(menu.getChildren().iterator()) + ");\n");
            html.append("  " + menuVar + ".showEvent.subscribe(function () { this.focus(); });\n");
            html.append("  " + menuVar + ".render(document.body);\n");
            if (menu instanceof MenuHeader) {
                html.append("  YAHOO.util.Event.addListener(\"" + menu.getName() + "\", \"click\", " + menuVar + ".show, null, " + menuVar + ");\n");
            } else if (menu instanceof ContextMenu) {
                html.append("  YAHOO.util.Event.addListener(\"" + menu.getName() + "\", \"contextmenu\", displayContextMenu, " + menuVar + ", " + menuVar + ");\n");
            }
        }
    }
    html.append("\n  document.body.oncontextmenu = function () {\n    return false;\n  }\n});\n\n");
    html.append("</script>\n");
    html.append("</body>\n");
    html.append("</html>\n");
    return html.toString();
}

Example 5 with ContextMenu

use of edu.cmu.cs.hcii.cogtool.model.ContextMenu in project cogtool by cogtool.

the class DesignExportToHTML method buildWidgetHTML.

protected String buildWidgetHTML(IWidget widget, Set<SimpleWidgetGroup> visitedGroups, Frame frame) {
    //Function is called once for each widget...
    StringBuilder html = new StringBuilder();
    DoubleRectangle bounds = widget.getEltBounds();
    String name = widget.getName();
    //How does below boolean work?
    boolean isStandard = widget.isStandard();
    //MAYBE CREATE AN IF STATEMENT TO HANDLE BUTTONS/MENU BUTTON DIFFERENTLY
    // Put the html widget in the same place as the CogTool widget
    // (adjusting for the position of the html table)
    //WE ARE ADDING TEN HERE TO COMPENSATE FOR LOCATION WITHIN BROWSER
    //WE DO NOT WANT TO ADD THAT SINCE WE ARE SWITCHING TO AREA TAG AND DEALING WITHIN IMAGE ONLY
    //POSITION AS OF NOW IS RELATIVE TO IMAGE :)
    String properties = "onfocus=\"onFocus('" + name + "')\" onblur=\"onBlur()\"" + " id=\"" + name + "\" style=\"position: absolute; left: " + (bounds.x + 10) + "; top: " + (bounds.y + 33) + "; width: " + bounds.width + "; height: " + bounds.height + ";\"";
    WidgetType type = widget.getWidgetType();
    // don't pop up the "does not help..." message if there is no left click
    // transition defined from these widgets
    int ignoreButton = 0;
    boolean ignoreLeftClick = (WidgetType.Check.equals(type) || WidgetType.TextBox.equals(type) || WidgetType.Graffiti.equals(type) || WidgetType.Menu.equals(type));
    if (ignoreLeftClick) {
        ignoreButton = LEFT_MOUSE;
    } else if (WidgetType.ContextMenu.equals(type)) {
        ignoreButton = RIGHT_MOUSE;
    }
    String eventString = getEventString(widget, ignoreButton);
    if (!widget.isRendered() && "".equals(widget.getTitle()) && widget.getImage() == null && frame.getBackgroundImage() == null && !WidgetType.Noninteractive.equals(type)) {
        blindHotSpotWarning += "This CogTool model has a hidden widget on screen. " + "You will not be able to visibly identify the location of +" + widget.getName() + ".\n";
    }
    //Why did they not use a switch statement here ?
    if (isStandard) {
        if (WidgetType.Noninteractive.equals(type) || WidgetType.Text.equals(type)) {
            return getHotspotString(widget, properties, eventString);
        }
        if (WidgetType.Button.equals(type)) {
            if (!widget.isRendered()) {
                if (!"".equals(widget.getTitle())) {
                    html.append("<div align=\"middle\"" + properties + eventString + ">" + widget.getTitle() + "</div>\n");
                }
                //In the below 6 lines I create an area tag that will be placed within the map tags, within the html code,
                //in order to create HotSpots over the image of the frame
                mapHTML += "<area shape=\"rect\" name=value ";
                mapHTML += "value ='" + widget.getTitle() + "'";
                mapHTML += " onfocus=\"onFocus('" + name + "')\" onblur=\"onBlur()\"" + " id=\"" + name + "\"" + " coords=\"" + bounds.x + "," + bounds.y + "," + (bounds.x + bounds.width) + "," + (bounds.y + bounds.height) + "\"";
                mapHTML += eventString + "/>\n";
            } else {
                html.append("<input type=button name=value value='");
                html.append(widget.getTitle());
                html.append("' " + properties + eventString + ">\n");
            }
        } else if (WidgetType.Check.equals(type)) {
            String checked = "";
            Object isSel = widget.getAttribute(WidgetAttributes.IS_SELECTED_ATTR);
            if (NullSafe.equals(WidgetAttributes.IS_SELECTED, isSel)) {
                checked = " checked";
            }
            // for checkboxes, width and height don't matter, so only deal with
            // the x and y
            String styleString = properties.substring(0, properties.indexOf("width")) + "\"";
            html.append("<input type=checkbox " + styleString + eventString);
            html.append(checked + ">\n");
            String textStyle = "style=\"position: absolute; left: " + (bounds.x + 30) + "; top: " + (bounds.y + 33) + ";\"";
            String textEvent = eventString;
            if (textSelect(widget)) {
                textEvent += " onclick=\"toggleCheckbox('";
                textEvent += widget.getName();
                textEvent += "')\"";
            }
            html.append("<a " + textStyle + textEvent + ">");
            html.append(widget.getTitle() + "</a>\n");
        } else if (WidgetType.Radio.equals(type)) {
            SimpleWidgetGroup group = widget.getParentGroup();
            if ((group != null) && !visitedGroups.contains(group)) {
                visitedGroups.add(group);
                String groupName = widget.getName();
                Iterator<IWidget> widgets = group.iterator();
                while (widgets.hasNext()) {
                    IWidget w = widgets.next();
                    DoublePoint origin = w.getShape().getOrigin();
                    String itemString = getEventString(w, LEFT_MOUSE);
                    String checked = "";
                    Object isSel = w.getAttribute(WidgetAttributes.IS_SELECTED_ATTR);
                    if (NullSafe.equals(WidgetAttributes.IS_SELECTED, isSel)) {
                        checked = " checked";
                    }
                    // for radio buttons, width and height don't matter, so only deal with
                    // the x and y
                    String styleString = "onfocus=\"onFocus('" + w.getName() + "')\" onblur=\"onBlur()\"" + "style=\"position: absolute; left: " + (origin.x + 10) + "; top: " + (origin.y + 33) + ";\"";
                    // TODO: if transitioned from, never deselects
                    html.append("<input type=radio name=\"" + groupName + "\"");
                    html.append(" id=\"");
                    html.append(w.getName());
                    html.append("\" " + styleString + itemString + checked + ">\n");
                    String textStyle = "style=\"position: absolute; left: " + (origin.x + 30) + "; top: " + (origin.y + 33) + ";\"";
                    String textEvent = itemString;
                    if (textSelect(w)) {
                        textEvent += " onclick=\"selectRadio('";
                        textEvent += w.getName();
                        textEvent += "')\"";
                    }
                    html.append("<a " + textStyle + textEvent + ">");
                    html.append(w.getTitle() + "</a>\n");
                }
            }
        } else if (WidgetType.TextBox.equals(type) || WidgetType.Graffiti.equals(type)) {
            html.append("<input type=text name=value value='");
            html.append(widget.getTitle());
            html.append("' " + properties + eventString + ">\n");
        } else if (widget instanceof ListItem) {
            SimpleWidgetGroup group = widget.getParentGroup();
            // this code will change
            if (!(visitedGroups.contains(group))) {
                visitedGroups.add(group);
                ListItem firstItem = (ListItem) group.get(0);
                DoubleRectangle itemBounds = firstItem.getEltBounds();
                // use properties of the first item in the list
                properties = "onfocus=\"onFocus('" + firstItem.getName() + "')\" onblur=\"onBlur()\"" + " id=\"" + firstItem.getName() + "\" style=\"position: absolute; left: " + (itemBounds.x + 10) + "; top: " + (itemBounds.y + 33) + "; width: " + itemBounds.width + ";\"";
                html.append("<select size=" + group.size() + " " + properties + ">\n");
                Iterator<IWidget> widgets = group.iterator();
                while (widgets.hasNext()) {
                    IWidget w = widgets.next();
                    String itemEvent = getEventString(w, 0);
                    html.append("<option" + itemEvent + " id=\"");
                    html.append(w.getName() + "\">");
                    html.append(w.getTitle() + "\n");
                }
                html.append("</select>\n");
            }
        } else if (widget instanceof MenuHeader) {
            // make hotspot associated w/ menu, use widget's
            // name for ID
            //            html.append("<input type=button name=value value='");
            //            html.append(widget.getTitle());
            //            html.append("' style=" + style + " id=\"");
            //            html.append(widget.getName());
            //            html.append("\">\n");
            // TODO: add background color?
            properties = properties.substring(0, properties.length() - 1);
            properties += " background: lightGray;\"";
            html.append("<div " + properties + eventString + ">");
            html.append(widget.getTitle());
            html.append("</div>\n");
        } else if (widget instanceof ContextMenu) {
            // TODO: add background color?
            //            style = style.substring(0, style.length() - 1);
            //            style += " background: lightGray;\"";
            html.append("<div " + properties + eventString + ">");
            html.append(widget.getTitle());
            html.append("</div>\n");
        } else if (widget instanceof PullDownHeader) {
            PullDownHeader pdh = (PullDownHeader) widget;
            //"select tag is used to create a select list" --> http://www.w3schools.com/TAGS/tag_Select.asp
            html.append("<select " + properties + ">\n");
            if (pdh.itemCount() > 0) {
                //html.append("<optgroup>\n"); //TODO: style
                Iterator<IWidget> children = pdh.getChildren().iterator();
                while (children.hasNext()) {
                    IWidget pdi = children.next();
                    String childEvent = getEventString(pdi, 0);
                    html.append("<option" + childEvent + " id=\"");
                    html.append(pdi.getName() + "\">" + pdi.getTitle() + "\n");
                }
            //html.append("</optgroup>\n");
            }
            html.append("</select>\n");
        } else if (WidgetType.Link.equals(type)) {
            properties = properties.substring(0, properties.length() - 1);
            html.append("<a " + properties + " color: blue;\"");
            html.append(eventString + "><u>");
            html.append(widget.getTitle());
            html.append("</u></a>\n");
        }
    } else {
        // unknown widget or custom version of an interactive widget
        return getHotspotString(widget, properties, eventString);
    }
    return html.toString();
}