Search in sources :

Example 11 with WidgetType

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

the class FrameEditorView method layOutPalette.

protected void layOutPalette(int deviceTypes, final Palette parent) {
    Object selectedWidgetType = parent.clearButtons();
    Control lastButton = null;
    boolean customStandardEnabled = false;
    for (WidgetType widgetTypeOpt : WidgetType.DISPLAY) {
        if (widgetTypeOpt.worksOn(deviceTypes)) {
            Image icon = null;
            // String statusMessageString = null;
            String toolTipString = "Default Tool Tip";
            if (widgetTypeOpt.equals(WidgetType.Button)) {
                icon = BUTTON_ICON;
                toolTipString = L10N.get("FEV.ButtonToolTip", "Use a Button widget for anything that looks like a button as defined by current conventions. Use this widget for hardware buttons on a cellphone, the Close, Hide, and Full-Size buttons at the top of application windows, the buttons in an application's toolbar, etc. Also use a buston widget for tabs in a tabbed interface (e.g., Firefox's webpage tabs, but the Close button within each tab would be represented by a separate button widget). Standard button widgets can be configured to appear to toggle from unpressed to pressed when you demonstrate tasks on them. If you want that behavior with Custom button widgets, you have to use two frames with two images for the buttons, with transitions between them. Using Standard button widgets saves a lot of work.");
                customStandardEnabled = true;
            } else if (widgetTypeOpt.equals(WidgetType.Link)) {
                icon = LINK_ICON;
                toolTipString = L10N.get("FEV.LinkToolTip", "Use a Link widget for anything that acts as a link in a web page or document. A link could be text or an image. Standard link widgets and Custom link widgets are the same.");
                customStandardEnabled = true;
            } else if (widgetTypeOpt.equals(WidgetType.Check)) {
                icon = CHECKBOX_ICON;
                toolTipString = L10N.get("FEV.CheckBoxToolTip", "Use a CheckBox widget anytime there is an interactive box that can be toggled on or off (checked or not checked) independently of any other checkboxes. Draw the checkbox widget the size of the area the user can click to check the box (on most UIs this is the entire extent of the text; on some it is only the box itself). Standard checkbox widgets appear to toggle from unchecked to checked when you demonstrate tasks on them. If you want that behavior with Custom checkbox widgets, you have to use two frames with different images for the checkboxes in different states, with transitions between them. Using Standard checkbox widgets saves a lot of work.");
                customStandardEnabled = true;
            } else if (widgetTypeOpt.equals(WidgetType.Graffiti)) {
                icon = GRAFFITI_ICON;
                toolTipString = L10N.get("FEV.GraffitiToolTip", "Use a Graffiti widget to designate an area on a touchscreen that can interpret Graffiti(R) strokes.");
                customStandardEnabled = true;
            } else if (widgetTypeOpt.equals(WidgetType.ListBoxItem)) {
                icon = LISTBOXITEM_ICON;
                toolTipString = L10N.get("FEV.ListBoxItemToolTip", "Use a ListBoxItem widget when there is a visible list of items, from which one or more can be selected, that does not have to be pulled down or popped up to be visible. Standard ListBoxItem widgets and Custom ListBoxItem  widgets are the same.");
                customStandardEnabled = true;
            } else if (widgetTypeOpt.equals(WidgetType.ContextMenu)) {
                icon = CONTEXT_MENU_ICON;
                toolTipString = L10N.get("FEV.ContextMenuToolTip", "Use a ContextMenu widget for a menu that is accessible by right-click (Windows) or CTRL-click (MacOS). Standard context menu widgets allow you to type in entire hierarchical menu systems with as many levels of submenus as your storyboard needs. These menus automatically expand and contract as you demonstrate tasks on them. If want this behavior with Custom context menus, you would have to use context menu widgets, submenu widgets and menu item widgets separately. This is not only much more effort to construct, with many more frames, but it has proven to be error-prone. We strongly recommend that you use Standard context menu widgets unless your menu system does not look like a standard hierarchical menu system, e.g., you are using pie menus.");
                customStandardEnabled = true;
            } else if (widgetTypeOpt.equals(WidgetType.Menu)) {
                icon = MENU_ICON;
                toolTipString = L10N.get("FEV.MenuToolTip", "Use a Menu widget for menu headers, like File and Edit at the top of this window. When you use Standard menu widgets you can type in an entire hierarchical menu system with several menu headers with menu items and as many levels of submenus as your storyboard needs. These menus automatically expand and contract as you demonstrate tasks on them. See 'Creating a Menu System' in the CogTool User Guide. If want this behavior with Custom menus, you will have to use menu widgets, submenu widgets and menu item widgets separately. This is not only much more effort to construct, with many more frames, but it has proven to be error-prone. We strongly recommend that you use Standard menu widgets unless your menu system does not look like a standard hierarchical menu system, e.g., you are using pie menus.");
                customStandardEnabled = true;
            } else if (widgetTypeOpt.equals(WidgetType.MenuItem)) {
                icon = MENUITEM_ICON;
                toolTipString = L10N.get("FEV.MenuItemToolTip", "Use a MenuItem widget only when creating Custom menus or context menus. See the User Guide for more information about creating Custom widgets.");
                customStandardEnabled = true;
            } else if (widgetTypeOpt.equals(WidgetType.Noninteractive)) {
                toolTipString = L10N.get("FEV.NoninteractiveToolTip", "Use a Non-interactive widget when a user might have to look at something to get information but cannot manipulate that information with the widget. An example is the altimeter in the cockpit of an airplane. The altitude display would be defined as a non-interactive widget because the task could involve looking at that display, but the display cannot be changed directly. Standard non-interactive widgets and Custom non-interactive widgets are the same.");
                icon = NONINTERACTIVE_ICON;
            } else if (widgetTypeOpt.equals(WidgetType.PullDownList)) {
                icon = PULLDOWN_ICON;
                toolTipString = L10N.get("FEV.PullDownToolTip", "Use a PullDown widget anytime a list drops down in response to the click (or tap) on the displayed item, only one item on the list can be selected, and the selected item replaces the original displayed item as the label of the list. A common example is the widget for choosing the month of the year that a credit card expires. Standard pull-down list widgets allow you to type in all the items in the list and identify which item should be initially selected. These pull-down lists automatically expand and contract as you demonstrate tasks on them. If want this behavior with Custom pull-down lists, you would have to use PullDown widgets and PullDownItem widgets separately. This is not only much more effort to construct, with many more frames, but it has proven to be error-prone. We strongly recommend that you use Standard pull-down list widgets.");
                customStandardEnabled = true;
            } else if (widgetTypeOpt.equals(WidgetType.PullDownItem)) {
                icon = PULLDOWNITEM_ICON;
                toolTipString = L10N.get("FEV.PullDownItemToolTip", "Use a PullDownItem widget only when creating Custom pull down lists. See the User Guide for more information about creating Custom widgets.");
                customStandardEnabled = true;
            } else if (widgetTypeOpt.equals(WidgetType.Submenu)) {
                icon = SUBMENU_ICON;
                toolTipString = L10N.get("FEV.SubMenuToolTip", "Use a SubMenu widget only when creating Custom menus or context menus. See the User Guide for more information about creating Custom widgets.");
                customStandardEnabled = true;
            } else if (widgetTypeOpt.equals(WidgetType.Radio)) {
                icon = RADIO_ICON;
                toolTipString = L10N.get("FEV.RadioToolTip", "Use a RadioButton widget anytime there is a set of visible options where (1) the options remain visible after clicking on one, (2) the state of the option is visible and remains visible, and (3) only one option can be selected at a time. These often have circles beside them that show the state of the options, but they may also take other shapes (like the days of the month in a calendar). Draw the radio button widget the size of the area the user can click to select the radio button (on most UIs this is the entire extent of the text; on some it is only the circle itself). Standard radio button widgets appear to toggle between unselected and selected when you demonstrate tasks on them, and they automatically enforce that only one is selected at a time. If you want that behavior with Custom radio button widgets, you have to use many frames with many images for the radio buttons, with transitions between them, for each state the set of radio buttons can be in. In addition Standard radio button widgets automatically align as you created them and can be resized and re-aligned as a group. Using Standard radio button widgets saves a lot of work.");
                customStandardEnabled = true;
            } else if (widgetTypeOpt.equals(WidgetType.Text)) {
                icon = STATICTEXT_ICON;
                toolTipString = L10N.get("FEV.TextToolTip", "Use a Text widget for any text that can be selected and copied, deleted, pasted over, or typed over. It can be the text in a text box, the text someone is editing in a word processor, text on the web the user will copy, etc. NOTE: Text is different from a text box that contains it. See 'Working with Text Boxes and Text' in the CogTool User Guide.");
                customStandardEnabled = true;
            } else if (widgetTypeOpt.equals(WidgetType.TextBox)) {
                icon = TEXTBOX_ICON;
                //statusMessageString = L10N.get("FEV.TextBoxStatusMessage", "xxx IN THE STATUS BAR");
                toolTipString = L10N.get("FEV.TextBoxToolTip", "Use a TextBox widget anytime there is a place to enter text (letters or numbers). These can have different looks, such as Username and Password boxes, or even the entire page area in a document editor. NOTE: A text box is different from the text inside the text box. See 'Working with Text Boxes and Text' in the CogTool User Guide.");
                customStandardEnabled = true;
            }
            String widgetTypeName = widgetTypeOpt.toString();
            //                lastButton =
            //                    parent.createPaletteButton(icon,
            //                                               lastButton,
            //                                               parent,
            //                                               widgetTypeOpt,
            //                                               setCurrentNewWidgetType,
            //                                               L10N.get("Create", "Create")
            //                                                   + " " + widgetTypeName);
            lastButton = parent.createPaletteButton(icon, lastButton, parent, widgetTypeOpt, setCurrentNewWidgetType, toolTipString);
        }
        parent.layout();
        if (selectedWidgetType != null) {
            parent.selectPaletteButton(selectedWidgetType);
        }
    }
    standardCreation = new Button(editor.zoomComposite, SWT.RADIO);
    standardCreation.setText(STANDARD_LABEL);
    standardCreation.setEnabled(customStandardEnabled);
    SelectionListener autoListener = new SelectionAdapter() {

        protected Button disableButton(WidgetType wType) {
            Button b = parent.getButton(wType);
            if (b != null) {
                b.setEnabled(false);
            }
            return b;
        }

        @Override
        public void widgetSelected(SelectionEvent e) {
            isAutomatic = true;
            Button pdi = disableButton(WidgetType.PullDownItem);
            Button mi = disableButton(WidgetType.MenuItem);
            Button smi = disableButton(WidgetType.Submenu);
            if ((pdi != null) && pdi.getSelection()) {
                Button pdh = parent.getButton(WidgetType.PullDownList);
                pdh.setSelection(true);
                setCurrentNewWidgetType.selectButton(pdh);
            }
            if ((mi != null) && (mi.getSelection() || smi.getSelection())) {
                Button menuHdr = parent.getButton(WidgetType.Menu);
                menuHdr.setSelection(true);
                setCurrentNewWidgetType.selectButton(menuHdr);
            }
        }
    };
    standardCreation.addSelectionListener(autoListener);
    FormData data = new FormData();
    data.left = new FormAttachment(0, 0);
    data.bottom = new FormAttachment(100, -5);
    standardCreation.setLayoutData(data);
    standardCreation.setSelection(true);
    autoListener.widgetSelected(null);
    customCreation = new Button(editor.zoomComposite, SWT.RADIO);
    customCreation.setText(CUSTOM_LABEL);
    customCreation.setEnabled(customStandardEnabled);
    customCreation.addSelectionListener(new SelectionAdapter() {

        @Override
        public void widgetSelected(SelectionEvent e) {
            isAutomatic = false;
            Button pdi = parent.getButton(WidgetType.PullDownItem);
            Button mi = parent.getButton(WidgetType.MenuItem);
            Button smi = parent.getButton(WidgetType.Submenu);
            pdi.setEnabled(true);
            mi.setEnabled(true);
            smi.setEnabled(true);
        }
    });
    data = new FormData();
    data.left = new FormAttachment(standardCreation, 5);
    data.top = new FormAttachment(standardCreation, 0, SWT.TOP);
    customCreation.setLayoutData(data);
}
Also used : FormData(org.eclipse.swt.layout.FormData) SelectionAdapter(org.eclipse.swt.events.SelectionAdapter) Image(org.eclipse.swt.graphics.Image) Control(org.eclipse.swt.widgets.Control) Button(org.eclipse.swt.widgets.Button) SelectionEvent(org.eclipse.swt.events.SelectionEvent) WidgetType(edu.cmu.cs.hcii.cogtool.model.WidgetType) FormAttachment(org.eclipse.swt.layout.FormAttachment) SelectionListener(org.eclipse.swt.events.SelectionListener)

Example 12 with WidgetType

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

the class BalsamiqButtonAPIConverter method parseBMMLWidget.

/** Helper function used by parseFrame
	 * This method is used to parse the tags of each control tag in Balsamiq XML. A control tag
	 * represents a Balsamiq Widget.
     * 
     * @param  node a node of the tree that represents a Balsamiq widget
     * @frame  frame that the widget is being added to
     * @group  parent group
     * @groupX x coordinate of parent group
     * @groupY y coordinate of parent group
     * @return      the newly created widget
     */
protected Widget parseBMMLWidget(Node node, Frame frame, SimpleWidgetGroup group, double groupX, double groupY) throws IOException {
    System.out.println("parseBMMLWidget " + group + " x: " + groupX + "y: " + groupY);
    NodeList children = node.getChildNodes();
    Widget widget = null;
    WidgetType widgetType = null;
    String balsamiqControlType = getAttributeValue(node, CONTROL_TYPE_ATTR);
    String widgetTypeString = (balsamiqControlType == null) ? null : getBMMLWidgetType(balsamiqControlType);
    String widgetName = getAttributeValue(node, CONTROL_ID_ATTR);
    if (widgetName == null) {
    //TODO: make a random widget name and move on. report to the user. need to be unique within the frame. Frame.java has a method for this
    }
    System.out.println("462- wN " + widgetName + "widT " + widgetTypeString);
    if (widgetTypeString == null) {
    //TODO: report to the user
    } else {
        widgetType = getWidgetType(widgetTypeString);
        //Parse the widget name, location and size from the attributes of the XML tag
        //TODO: Error check all of the getAttributeValues()
        double x = Double.parseDouble(getAttributeValue(node, X_ATTR));
        double y = Double.parseDouble(getAttributeValue(node, Y_ATTR));
        //TODO: difference between w and measuredW, same for height
        double width = Integer.parseInt(getAttributeValue(node, BWIDTH_ATTR));
        double height = Integer.parseInt(getAttributeValue(node, BHEIGHT_ATTR));
        double measWidth = Integer.parseInt(getAttributeValue(node, MEASURED_WIDTH_ATTR));
        double measHeight = Integer.parseInt(getAttributeValue(node, MEASURED_HEIGHT_ATTR));
        if (//TODO: make sure the dimensions are positive
        width == -1 && height == -1) {
            System.out.println("493- changing widget dimensions");
            width = measWidth;
            height = measHeight;
        }
        /*bounds is the size and location of the widget*/
        if (group != null) {
            System.out.println("488-Group is not null");
            DoubleRectangle rect = group.getGroupBounds();
            if (rect != null) {
                System.out.println("500-rect is not null");
            //x += groupX;
            //y += groupY;
            }
        }
        x += groupX;
        y += groupY;
        System.out.println("new widget has dimens:" + x + " " + y);
        DoubleRectangle bounds = new DoubleRectangle(x, y, width, height);
        if (widgetType == WidgetType.Check) {
            System.out.println("505-The widget is a check so now make a group for it");
            if (group == null) {
                group = new GridButtonGroup();
                //give it a random widget name										
                group.setName("newName");
                groupRegistry.put("newName", group);
            }
            //if(group instanceof GridButtonGroup)
            //{
            int eltCount = group.elementCount();
            System.out.println("513-group is gridbuttongroup " + group.getName() + " " + eltCount);
            if (eltCount > 0) {
                //TODO: check if the widgets align best horizontally or vertically
                //align the widgets to average coord, first, left or rightmost
                IWidget wid = group.getElement(group.elementCount() - 1);
                DoubleRectangle bounds2 = wid.getEltBounds();
                System.out.println("530 " + bounds2.getX() + " " + bounds2.getWidth() + " " + bounds2.getY() + " " + bounds2.getHeight());
                double diffX = Math.abs(x - bounds2.getX());
                double diffY = Math.abs(y - bounds2.getY());
                System.out.println("diffX " + diffX + " " + diffY);
                DoubleRectangle bounds3 = new DoubleRectangle(bounds2.getX() + bounds2.getWidth(), bounds2.getY(), width, height);
                if (diffX < diffY) {
                    bounds3 = new DoubleRectangle(bounds2.getX(), bounds2.getY() + bounds2.getHeight(), width, height);
                }
                widget = new CheckBox((GridButtonGroup) group, bounds3, widgetName);
            } else {
                widget = new CheckBox((GridButtonGroup) group, bounds, widgetName);
            }
            widget.setWidgetType(widgetType);
        /*}
				else
				{
					System.out.println("517-group2 is gridbuttongroup");
					GridButtonGroup group2 = new GridButtonGroup();
					group2.setName("newNameCheck");										
					groupRegistry.put("newNameCheck", group2);
					widget = new CheckBox(group2, bounds, widgetName);
					//group.addElement((IWidget) group2);

				}*/
        } else {
            widget = new Widget(bounds, widgetType);
        }
        widget.setName(widgetName);
        for (int i = 0; i < children.getLength(); i++) {
            Node child = children.item(i);
            String nodeName = child.getNodeName();
            /*Whitespace in the DOM tree is represented as #text. Ignore these nodes. Anywhere between the open and closed tag*/
            if (!nodeName.equals("#text")) {
                if (nodeName.equalsIgnoreCase(CONTROL_PROP_ELT)) {
                    NodeList controlTags = child.getChildNodes();
                    for (int j = 0; j < controlTags.getLength(); j++) {
                        Node controlTag = controlTags.item(j);
                        String propertyTag = controlTag.getNodeName();
                        //CogTool widget Display Label
                        if (propertyTag.equalsIgnoreCase(BALSAMIQ_TEXT_ELT)) {
                            /*Must decode the title. For instance the title in
							    Balsamiq, "First%20Frame" is "First Frame" in CogTool*/
                            String title = getElementText(controlTag);
                            title = URLDecoder.decode(title, "UTF-8");
                            widget.setTitle(title);
                        } else //CogTool transition on the present widget
                        if (propertyTag.equalsIgnoreCase(HREF_ELT)) {
                            String destinationFileName = getElementText(controlTag);
                            File destinationFile = new File(designPathName, destinationFileName);
                            //Make sure the file exists before attempting to parse the file
                            if (destinationFile.exists()) {
                                parseBalsamiqFile(destinationFile);
                                parseTransition(destinationFileName, widget);
                            }
                        } else if (propertyTag.equalsIgnoreCase(STATE_ELT)) {
                            //TODO: work on states
                            //A Balsamiq Button can be normal, selected, or disabled
                            String state = getElementText(controlTag);
                            if (state.equals("selected")) {
                                widget.setAttribute(WidgetAttributes.IS_SELECTED_ATTR, Boolean.TRUE);
                            } else {
                            //TODO: Other Balsamiq states like "disabled", "disabled and selected"
                            }
                        }
                    // END OF STATE OF BUTTON
                    }
                // END OF PROPERTY TAG
                }
            // END OF CONTROL PROPERTIES TAG
            }
        }
    }
    widget.setRendered(true);
    return widget;
}
Also used : CheckBox(edu.cmu.cs.hcii.cogtool.model.CheckBox) NodeList(org.w3c.dom.NodeList) Node(org.w3c.dom.Node) IWidget(edu.cmu.cs.hcii.cogtool.model.IWidget) Widget(edu.cmu.cs.hcii.cogtool.model.Widget) WidgetType(edu.cmu.cs.hcii.cogtool.model.WidgetType) DoubleRectangle(edu.cmu.cs.hcii.cogtool.model.DoubleRectangle) File(java.io.File) IWidget(edu.cmu.cs.hcii.cogtool.model.IWidget) GridButtonGroup(edu.cmu.cs.hcii.cogtool.model.GridButtonGroup)

Example 13 with WidgetType

use of edu.cmu.cs.hcii.cogtool.model.WidgetType 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();
}
Also used : SimpleWidgetGroup(edu.cmu.cs.hcii.cogtool.model.SimpleWidgetGroup) MenuHeader(edu.cmu.cs.hcii.cogtool.model.MenuHeader) ContextMenu(edu.cmu.cs.hcii.cogtool.model.ContextMenu) PullDownHeader(edu.cmu.cs.hcii.cogtool.model.PullDownHeader) DoubleRectangle(edu.cmu.cs.hcii.cogtool.model.DoubleRectangle) DoublePoint(edu.cmu.cs.hcii.cogtool.model.DoublePoint) DoublePoint(edu.cmu.cs.hcii.cogtool.model.DoublePoint) Iterator(java.util.Iterator) ListItem(edu.cmu.cs.hcii.cogtool.model.ListItem) WidgetType(edu.cmu.cs.hcii.cogtool.model.WidgetType) IWidget(edu.cmu.cs.hcii.cogtool.model.IWidget)

Example 14 with WidgetType

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

the class DesignExportToHTML method warningStrings.

public String warningStrings(Design d) {
    StringBuilder result = new StringBuilder();
    for (Frame frame : d.getFrames()) {
        for (IWidget widget : frame.getWidgets()) {
            WidgetType type = widget.getWidgetType();
            if (widget.isStandard()) {
                if (WidgetType.Button.equals(type)) {
                    if (!widget.isRendered()) {
                        String title = widget.getTitle();
                        if (title == null || title.length() == 0) {
                            result.append("Frame \"");
                            result.append(frame.getName());
                            result.append("\" contains a hidden hot-spot button at widget \"");
                            result.append(widget.getName());
                            result.append("\".\n");
                        }
                    }
                }
            }
        }
    }
    return (result.length() > 0 ? result.toString() : null);
}
Also used : Frame(edu.cmu.cs.hcii.cogtool.model.Frame) WidgetType(edu.cmu.cs.hcii.cogtool.model.WidgetType) IWidget(edu.cmu.cs.hcii.cogtool.model.IWidget)

Aggregations

WidgetType (edu.cmu.cs.hcii.cogtool.model.WidgetType)14 IWidget (edu.cmu.cs.hcii.cogtool.model.IWidget)8 SimpleWidgetGroup (edu.cmu.cs.hcii.cogtool.model.SimpleWidgetGroup)4 DoubleRectangle (edu.cmu.cs.hcii.cogtool.model.DoubleRectangle)3 GridButtonGroup (edu.cmu.cs.hcii.cogtool.model.GridButtonGroup)3 Widget (edu.cmu.cs.hcii.cogtool.model.Widget)3 AParentWidget (edu.cmu.cs.hcii.cogtool.model.AParentWidget)2 ActionType (edu.cmu.cs.hcii.cogtool.model.ActionType)2 ContextMenu (edu.cmu.cs.hcii.cogtool.model.ContextMenu)2 DeviceType (edu.cmu.cs.hcii.cogtool.model.DeviceType)2 ListItem (edu.cmu.cs.hcii.cogtool.model.ListItem)2 MenuHeader (edu.cmu.cs.hcii.cogtool.model.MenuHeader)2 PullDownHeader (edu.cmu.cs.hcii.cogtool.model.PullDownHeader)2 PullDownItem (edu.cmu.cs.hcii.cogtool.model.PullDownItem)2 RadioButtonGroup (edu.cmu.cs.hcii.cogtool.model.RadioButtonGroup)2 Iterator (java.util.Iterator)2 SelectionEvent (org.eclipse.swt.events.SelectionEvent)2 Button (org.eclipse.swt.widgets.Button)2 Node (org.w3c.dom.Node)2 AAction (edu.cmu.cs.hcii.cogtool.model.AAction)1