1. #1
    Ext GWT Premium Member
    Join Date
    May 2010
    Posts
    53
    Vote Rating
    0
    crehbein is on a distinguished road

      0  

    Default TaskBar scrolling for WebDesktop

    TaskBar scrolling for WebDesktop


    A handful of posts on the forms have asked for scrolling support for the desktop taskbar, and the quick & dirty solution (set overflow to auto) looks ugly. The original authors had about 75% of the work done to support scrolling similar to TabPanel scrolling, including all the graphical elements, so I finished up the code. We decided not to use WebDesktop, and I hate to see a good feature go to waste so I'm posting it up here in case anyone might find it useful.

    To use this, just add com.extjs.gxt.desktop.client as a package to your project and copy TaskBar.java from the attachment into this package. It'll override the default copy that's included in GXT (assuming your build order settings are sane).
    Attached Files

  2. #2
    Ext GWT Premium Member takayser's Avatar
    Join Date
    Oct 2008
    Location
    Lucerne, Switzerland
    Posts
    188
    Vote Rating
    0
    takayser is an unknown quantity at this point

      0  

    Default


    Works great, thanks alot for sharing!!!

  3. #3
    Ext GWT Premium Member
    Join Date
    May 2010
    Posts
    53
    Vote Rating
    0
    crehbein is on a distinguished road

      0  

    Default


    Thanks! I wrote this against GXT 2.1.3 and haven't tested the code since that version. What version are you running? Can you confirm it works against 2.2 or 2.2.1?

  4. #4
    Ext GWT Premium Member takayser's Avatar
    Join Date
    Oct 2008
    Location
    Lucerne, Switzerland
    Posts
    188
    Vote Rating
    0
    takayser is an unknown quantity at this point

      0  

    Default


    We work on GXT trunk. No issues.

    Why do you don't use the GXT desktop anymore? Do you use something similar now? Own implementation?

  5. #5
    Ext GWT Premium Member
    Join Date
    May 2010
    Posts
    53
    Vote Rating
    0
    crehbein is on a distinguished road

      0  

    Default


    Great news, thanks. We changed our design plans and didn't need a web desktop type of environment anymore. We'll probably come back to the original plan at some point though.

  6. #6
    Ext GWT Premium Member takayser's Avatar
    Join Date
    Oct 2008
    Location
    Lucerne, Switzerland
    Posts
    188
    Vote Rating
    0
    takayser is an unknown quantity at this point

      0  

    Default


    hover did not work, there were two issues in TaskButtonsPanel.java, I fixed it:
    Code:
    addStyleOnOver(scrollRight.dom, "ux-taskbuttons-scroller-left-over"); // wrong
    addStyleOnOver(scrollRight.dom, "ux-taskbuttons-scroller-right-over"); // fixed
    
    sinkEvents(Event.ONCLICK); // wrong
    sinkEvents(Event.ONCLICK | Event.ONMOUSEOVER | Event.ONMOUSEOUT); // fixed
    now it works.

  7. #7
    Ext User
    Join Date
    Dec 2010
    Location
    Brisbane, Australia
    Posts
    1
    Vote Rating
    0
    leemonte is on a distinguished road

      0  

    Default


    I've learned from this site. Thanks for the post..

  8. #8
    Ext GWT Premium Member
    Join Date
    May 2010
    Posts
    53
    Vote Rating
    0
    crehbein is on a distinguished road

      0  

    Default Updated zip, .java file

    Updated zip, .java file


    Hi,

    I updated the .zip file in the original post with fixes from takayser. Also, in case you don't like to or otherwise can't download zip files, here's the most recent copy.

    Code:
    package com.extjs.gxt.desktop.client;
    
    import java.util.ArrayList;
    import java.util.List;
    
    import com.extjs.gxt.ui.client.GXT;
    import com.extjs.gxt.ui.client.Style.IconAlign;
    import com.extjs.gxt.ui.client.Style.Orientation;
    import com.extjs.gxt.ui.client.aria.FocusFrame;
    import com.extjs.gxt.ui.client.core.El;
    import com.extjs.gxt.ui.client.core.Template;
    import com.extjs.gxt.ui.client.event.ComponentEvent;
    import com.extjs.gxt.ui.client.event.FxEvent;
    import com.extjs.gxt.ui.client.event.Listener;
    import com.extjs.gxt.ui.client.fx.FxConfig;
    import com.extjs.gxt.ui.client.util.Format;
    import com.extjs.gxt.ui.client.util.IconHelper;
    import com.extjs.gxt.ui.client.util.Padding;
    import com.extjs.gxt.ui.client.util.Size;
    import com.extjs.gxt.ui.client.widget.BoxComponent;
    import com.extjs.gxt.ui.client.widget.ComponentHelper;
    import com.extjs.gxt.ui.client.widget.LayoutContainer;
    import com.extjs.gxt.ui.client.widget.Window;
    import com.extjs.gxt.ui.client.widget.WindowManager;
    import com.extjs.gxt.ui.client.widget.button.Button;
    import com.extjs.gxt.ui.client.widget.layout.RowData;
    import com.extjs.gxt.ui.client.widget.layout.RowLayout;
    import com.google.gwt.dom.client.NodeList;
    import com.google.gwt.user.client.DOM;
    import com.google.gwt.user.client.Element;
    import com.google.gwt.user.client.Event;
    import com.google.gwt.user.client.ui.AbstractImagePrototype;
    
    /**
     * Displays the start menu button followed by a list of open windows.
     */
    
    /**
     * Note - modified to add support for
     * scrolling in the TaskBar.
     */
    public class TaskBar extends LayoutContainer {
    
        protected StartBox startBox; // west
        protected TasksButtonsPanel tbPanel; // center
    
    
        private String startButtonText = GXT.MESSAGES.desktop_startButton();
        // Note - replace above with below for GXT < 2.1.3
        //private String startButtonText = "Start";
    
        public TaskBar() {
            setId("ux-taskbar");
            setLayout(new RowLayout(Orientation.HORIZONTAL));
            startBox = new StartBox();
            startBox.startBtn.setText(startButtonText);
            tbPanel = new TasksButtonsPanel();
    
            add(startBox, new RowData(90, 1));
            add(tbPanel, new RowData(1, 1));
        }
    
        /**
         * Adds a button.
         * 
         * @param win the window
         * @return the new task button
         */
        public TaskButton addTaskButton(Window win) {
            return tbPanel.addButton(win);
        }
    
        /**
         * Returns the bar's buttons.
         * 
         * @return the buttons
         */
        public List<TaskButton> getButtons() {
            return tbPanel.getItems();
        }
    
        /**
         * Returns the start button text.
         * 
         * @return the start button text
         */
        public String getStartButtonText() {
            return startButtonText;
        }
    
        /**
         * Returns the bar's start menu.
         * 
         * @return the start menu
         */
        public StartMenu getStartMenu() {
            return (StartMenu) startBox.startBtn.getMenu();
        }
    
        /**
         * Removes a button.
         * 
         * @param btn the button to remove
         */
        public void removeTaskButton(TaskButton btn) {
            tbPanel.removeButton(btn);
        }
    
        /**
         * Sets the active button.
         * 
         * @param btn the button
         */
        public void setActiveButton(TaskButton btn) {
            tbPanel.setActiveButton(btn);
        }
    
        /**
         * Sets the start button text (defaults to 'Start').
         * 
         * @param startButtonText the start button text
         */
        public void setStartButtonText(String startButtonText) {
            this.startButtonText = startButtonText;
            if (rendered) {
                startBox.startBtn.setText(startButtonText);
            }
        }
    
        @Override
        protected void onRender(Element parent, int index) {
            super.onRender(parent, index);
            setStyleAttribute("zIndex", "10");
    
            startBox.startBtn.setText(startButtonText);
        }
    
    }
    
    class StartBox extends BoxComponent {
    
        StartButton startBtn = new StartButton();
    
        public StartBox() {
            setId("ux-taskbar-start");
        }
    
        @Override
        protected void doAttachChildren() {
            super.doAttachChildren();
            ComponentHelper.doAttach(startBtn);
        }
    
        @Override
        protected void doDetachChildren() {
            super.doDetachChildren();
            ComponentHelper.doDetach(startBtn);
        }
    
        @Override
        protected void onDisable() {
            super.onDisable();
            startBtn.disable();
        }
    
        @Override
        protected void onEnable() {
            super.onEnable();
            startBtn.enable();
        }
    
        @Override
        protected void onRender(Element target, int index) {
            super.onRender(target, index);
            setElement(DOM.createDiv(), target, index);
    
            startBtn.render(getElement());
        }
    
        @Override
        protected void onResize(int width, int height) {
            super.onResize(width, height);
            Size frameSize = el().getFrameSize();
            startBtn.setSize(width - frameSize.width, height - frameSize.height);
        }
    
    }
    
    class StartButton extends Button {
    
        private StartMenu startMenu;
    
        public StartButton() {
            setId("ux-startbutton");
            setIcon(IconHelper.createStyle("start", 23, 23));
            setMenuAlign("bl-tl");
    
            startMenu = new StartMenu();
            setMenu(startMenu);
    
            template = new Template(getButtonTemplate());
        }
    
        @Override
        public void setIcon(AbstractImagePrototype icon) {
            super.setIcon(icon);
            if (rendered) {
                if (buttonEl.selectNode("img") != null) {
                    buttonEl.selectNode("img").remove();
                }
                if (icon != null) {
                    buttonEl.setPadding(new Padding(7, 0, 7, 28));
                    Element e = (Element) icon.createElement().cast();
                    buttonEl.insertFirst(e);
                    El.fly(e).makePositionable(true);
                    String align = "b-b";
                    if (getIconAlign() == IconAlign.BOTTOM) {
                        align = "b-b";
                    } else if (getIconAlign() == IconAlign.TOP) {
                        align = "t-t";
                    } else if (getIconAlign() == IconAlign.LEFT) {
                        align = "l-l";
                    } else if (getIconAlign() == IconAlign.RIGHT) {
                        align = "r-r";
                    }
                    El.fly(e).alignTo(buttonEl.dom, align, null);
                }
            }
        }
    
        @Override
        protected void autoWidth() {
    
        }
    
        @Override
        protected void onResize(int width, int height) {
            super.onResize(width, height);
            buttonEl.setSize(width - 20, height, true);
        }
    
        private native String getButtonTemplate() /*-{
        return [
        '<table border="0" cellpadding="0" cellspacing="0" class="x-btn-wrap"><tbody><tr>',
        '<td class="ux-startbutton-left"><i> </i></td><td class="ux-startbutton-center"><em unselectable="on"><button class="x-btn-text" type="{1}" style="height:30px;">{0}</button></em></td><td class="ux-startbutton-right"><i> </i></td>',
        '</tr></tbody></table>'
        ].join("");
      }-*/;
    }
    
    class TaskButton extends Button {
    
        private Window win;
    
        TaskButton(Window win, Element parent) {
            this.win = win;
            setText(Format.ellipse(win.getHeading(), 26));
            setIcon(win.getIcon());
            template = new Template(getButtonTemplate());
    
            render(parent);
        }
    
        @Override
        public void setIcon(AbstractImagePrototype icon) {
            if (rendered) {
                El oldIcon = buttonEl.selectNode(".x-taskbutton-icon");
                if (oldIcon != null) {
                    oldIcon.remove();
                    buttonEl.setPadding(new Padding(7, 0, 7, 0));
                }
                if (icon != null) {
                    buttonEl.setPadding(new Padding(7, 0, 7, 20));
                    Element e = (Element) icon.createElement().cast();
                    e.setClassName("x-taskbutton-icon");
                    buttonEl.insertFirst(e);
                    El.fly(e).makePositionable(true);
                    String align = "b-b";
                    if (getIconAlign() == IconAlign.BOTTOM) {
                        align = "b-b";
                    } else if (getIconAlign() == IconAlign.TOP) {
                        align = "t-t";
                    } else if (getIconAlign() == IconAlign.LEFT) {
                        align = "l-l";
                    } else if (getIconAlign() == IconAlign.RIGHT) {
                        align = "r-r";
                    }
                    El.fly(e).alignTo(buttonEl.dom, align, null);
                }
            }
            this.icon = icon;
        }
    
        @Override
        protected void autoWidth() {
    
        }
    
        @Override
        protected void onClick(ComponentEvent ce) {
            super.onClick(ce);
            if (win.getData("minimized") != null || !win.isVisible()) {
                win.show();
            } else if (win == WindowManager.get().getActive()) {
                win.minimize();
            } else {
                win.toFront();
            }
        }
    
        @Override
        protected void onResize(int width, int height) {
            super.onResize(width, height);
            buttonEl.setSize(width - 8, height, true);
        }
    
        private native String getButtonTemplate() /*-{
        return [
        '<table border="0" cellpadding="0" cellspacing="0" class="x-btn-wrap"><tbody><tr>',
        '<td class="ux-taskbutton-left"><i> </i></td><td class="ux-taskbutton-center"><em unselectable="on"><button class="x-btn-text" type="{1}" style="height:28px;">{0}</button></em></td><td class="ux-taskbutton-right"><i> </i></td>',
        '</tr></tbody></table>'
        ].join("");
      }-*/;
    }
    
    class TasksButtonsPanel extends BoxComponent {
    
        private int buttonMargin = 2;
        private int buttonWidth = 168;
        private boolean buttonWidthSet = false;
        private boolean enableScroll = true;
        private El scrollLeft, scrollRight;
        private List<TaskButton> items;
        private int lastButtonWidth;
        private int minButtonWidth = 118;
        private boolean resizeButtons = true;
        private boolean scrolling = false;
        private boolean animScroll = true;
        private int scrollIncrement = -1;
        private TaskButton activeButton;
        private El stripWrap, strip, edge;
    
        TasksButtonsPanel() {
            setId("ux-taskbuttons-panel");
            items = new ArrayList<TaskButton>();
            sinkEvents(Event.ONCLICK | Event.ONMOUSEOVER | Event.ONMOUSEOUT);
        }
    
        public TaskButton addButton(Window win) {
            Element li = strip.createChild("<li></li>", edge.dom).dom;
            TaskButton btn = new TaskButton(win, li);
            items.add(btn);
            if (!buttonWidthSet) {
                lastButtonWidth = li.getOffsetWidth();
            }
            setActiveButton(btn);
            win.setData("taskButton", btn);
            if (isAttached()) {
                ComponentHelper.doAttach(btn);
            }
            if (!isEnabled()) {
                btn.disable();
            }
    
            return btn;
        }
    
        public List<TaskButton> getItems() {
            return items;
        }
    
        public int getItemCount() {
            return getItems().size();
        }
    
        public TaskButton getSelectedItem() {
            return activeButton;
        }
    
        public void removeButton(TaskButton btn) {
            Element li = (Element) btn.getElement().getParentElement();
            if (li != null && li.getParentElement() != null) {
                li.getParentElement().removeChild(li);
            }
    
            items.remove(btn);
    
            delegateUpdates();
            ComponentHelper.doDetach(btn);
        }
    
        public void setActiveButton(TaskButton btn) {
            this.activeButton = btn;
            delegateUpdates();
        }
    
        @Override
        public void onComponentEvent(ComponentEvent ce) {
            super.onComponentEvent(ce);
            if (ce.getEventTypeInt() == Event.ONCLICK) {
                El target = ce.getTargetEl();
                if (target.is(".ux-taskbuttons-scroller-left")) {
                    ce.cancelBubble();
                    onScrollLeft();
                }
                if (target.is(".ux-taskbuttons-scroller-right")) {
                    ce.cancelBubble();
                    onScrollRight();
                }
            }
            if (ce.getEventTypeInt() == Event.ONBLUR && GXT.isAriaEnabled()) {
                onBlur(ce);
            } else if (ce.getEventTypeInt() == Event.ONFOCUS && GXT.isAriaEnabled()) {
                onFocus(ce);
            }
        }
    
        protected void onBlur(ComponentEvent ce) {
            FocusFrame.get().unframe();
        }
    
        protected void onFocus(ComponentEvent ce) {
            FocusFrame.get().frame(this);
            if (getItems().size() > 0 && getSelectedItem() == null) {
                activeButton = getItems().get(0);
            } else if (getSelectedItem() != null) {
                focusItem(getSelectedItem());
            }
        }
    
        private void focusItem(TaskButton item) {
            scrollToBtn(item, true);
            item.el().focus();
            FocusFrame.get().frame(item);
        }
    
        @Override
        protected void doAttachChildren() {
            super.doAttachChildren();
            for (TaskButton btn : items) {
                ComponentHelper.doAttach(btn);
            }
        }
    
        @Override
        protected void doDetachChildren() {
            super.doDetachChildren();
            for (TaskButton btn : items) {
                ComponentHelper.doDetach(btn);
            }
        }
    
        protected int getScrollIncrement() {
            return scrollIncrement != -1 ? scrollIncrement : lastButtonWidth + 5;
        }
    
        @Override
        protected void onDisable() {
            super.onDisable();
            for (TaskButton btn : items) {
                btn.disable();
            }
        }
    
        @Override
        protected void onEnable() {
            super.onEnable();
            for (TaskButton btn : items) {
                btn.enable();
            }
        }
    
        @Override
        protected void onRender(Element target, int index) {
    
            super.onRender(target, index);
            setElement(DOM.createDiv(), target, index);
            setStyleName("ux-taskbuttons-panel");
    
            stripWrap = el().createChild("<div class='ux-taskbuttons-strip-wrap'><ul class='ux-taskbuttons-strip'></ul></div>");
            el().createChild("<div class='ux-taskbuttons-strip-spacer'></div>");
            strip = stripWrap.firstChild();
            edge = strip.createChild("<li class='ux-taskbuttons-edge'></li>");
            strip.createChild("<div class='x-clear'></div>");
        }
    
        @Override
        protected void onResize(int width, int height) {
            super.onResize(width, height);
            delegateUpdates();
        }
    
        private void autoScroll() {
            int count = this.getItems().size();
            int tw = this.el().getClientWidth();
    
            int cw = stripWrap.getWidth();
            int pos = stripWrap.getScrollLeft();
            int l = edge.getOffsetsTo(stripWrap.dom).x + pos;
    
            if (!enableScroll || count < 1 || cw < 20) {
                return;
            }
    
            if (l <= tw) {
    
                stripWrap.setWidth(tw);
                if (scrolling) {
                    stripWrap.setScrollLeft(0);
                    scrolling = false;
                    removeStyleName("x-taskbuttons-scrolling");
                    if (scrollLeft == null) {
                        createScrollers();
                    }
                    scrollLeft.setVisible(false);
                    scrollRight.setVisible(false);
                }
            } else {
                if (!scrolling) {
                    addStyleName("x-taskbuttons-scrolling");
                }
                tw -= 36;
                stripWrap.setWidth(tw > 20 ? tw : 20);
                if (!scrolling) {
                    if (scrollLeft == null) {
                        createScrollers();
                    } else {
                        scrollLeft.setVisible(true);
                        scrollRight.setVisible(true);
                    }
                }
                scrolling = true;
                if (pos > (l - tw)) {
                    stripWrap.setScrollLeft(l - tw);
                } else {
                    scrollTo(1, false);
                }
                updateScrollButtons();
            }
        }
    
        private void autoSize() {
            int count = items.size();
            int aw = el().getStyleWidth();
    
            if (!resizeButtons || count < 1) {
                return;
            }
    
            int each = (int) Math.max(Math.min(Math.floor((aw - 4) / count) - buttonMargin, buttonWidth), minButtonWidth);
            NodeList<com.google.gwt.dom.client.Element> btns = stripWrap.dom.getElementsByTagName("button");
    
            El b = items.get(0).el();
            lastButtonWidth = b.findParent("li", 5).getWidth();
    
            for (int i = 0, len = btns.getLength(); i < len; i++) {
                Element btn = btns.getItem(i).cast();
    
                int tw = items.get(i).el().getParent().dom.getOffsetWidth();
                int iw = btn.getOffsetWidth();
                btn.getStyle().setPropertyPx("width", (each - (tw - iw)));
            }
    
        }
    
        private void createScrollers() {
            int h = el().getHeight();
    
            scrollLeft = el().insertFirst("<div class='ux-taskbuttons-scroller-left'></div>");
            addStyleOnOver(scrollLeft.dom, "ux-taskbuttons-scroller-left-over");
            scrollLeft.setHeight(h);
    
            scrollRight = el().insertFirst("<div class='ux-taskbuttons-scroller-right'></div>");
            addStyleOnOver(scrollRight.dom, "ux-taskbuttons-scroller-right-over");
            scrollRight.setHeight(h);
        }
    
        private void delegateUpdates() {
            if (resizeButtons && rendered) {
                autoSize();
            }
            if (enableScroll && rendered) {
                autoScroll();
            }
        }
    
        private void onScrollRight() {
            int sw = getScrollWidth() - getScrollArea();
            int pos = getScrollPos();
            int s = Math.min(sw, pos + getScrollIncrement());
            if (s != pos) {
                scrollTo(s, animScroll);
            }
        }
    
        private void onScrollLeft() {
            int pos = getScrollPos();
            int s = Math.max(0, pos - getScrollIncrement());
            if (s != pos) {
                scrollTo(s, animScroll);
            }
        }
    
        private int getScrollArea() {
            return stripWrap.getClientWidth();
        }
    
        private int getScrollPos() {
            return stripWrap.getScrollLeft();
        }
    
        private int getScrollWidth() {
            return edge.getOffsetsTo(stripWrap.dom).x + getScrollPos();
        }
    
        private void scrollTo(int pos, boolean animate) {
            if (animate) {
                stripWrap.scrollTo("left", pos, new FxConfig(new Listener<FxEvent>() {
                    public void handleEvent(FxEvent fe) {
                        updateScrollButtons();
                    }
                }));
            } else {
                stripWrap.scrollTo("left", pos);
                updateScrollButtons();
            }
        }
    
        private void scrollToBtn(TaskButton btn, boolean animate) {
            com.google.gwt.dom.client.Element item =
                btn.getElement().getParentElement();
            if (item == null) {
                return;
            }
            int pos = getScrollPos();
            int area = getScrollArea();
            int left = fly((Element) item).getOffsetsTo(stripWrap.dom).x + pos;
            int right = left + getWidth();
            if (left > pos) {
                scrollTo(left, animate);
            } else if (right > (pos + area)) {
                scrollTo(right - area, animate);
            }
        }
    
        private void updateScrollButtons() {
            int pos = getScrollPos();
            scrollLeft.setStyleName("ux-taskbuttons-scroller-left-disabled", pos == 0);
    
            //  Changed the original logic because getScrollWidth - getScrollArea always
            //    returned 1 greater than pos when scrolled all the way to the right.
            //    scrollRight.setStyleName("ux-taskbuttons-scroller-right-disabled",
            //        pos >= (getScrollWidth() - getScrollArea());
    
            int widthMinusArea = getScrollWidth() - getScrollArea();
            boolean disableRight = (pos >= widthMinusArea - 1);
            scrollRight.setStyleName("ux-taskbuttons-scroller-right-disabled", disableRight);
    
        }
    
    }

Similar Threads

  1. WebDesktop app addicional taskbar panels
    By Reghin in forum Ext GWT: Discussion
    Replies: 4
    Last Post: 6 Dec 2010, 7:10 AM
  2. Desktop TaskBar not scrolling
    By kiran-gxt in forum Ext GWT: Discussion
    Replies: 9
    Last Post: 10 Jan 2010, 6:46 AM
  3. webdesktop sample
    By mfm in forum Community Discussion
    Replies: 2
    Last Post: 19 Aug 2009, 10:26 AM
  4. WebDesktop app taskbar stay on top
    By Reghin in forum Ext GWT: Discussion
    Replies: 2
    Last Post: 11 Aug 2009, 4:07 AM
  5. [Webdesktop] Need help
    By KENT in forum Ext 2.x: Help & Discussion
    Replies: 6
    Last Post: 29 Nov 2007, 6:03 PM

Thread Participants: 2

Tags for this Thread

Turkiyenin en sevilen filmlerinin yer aldigi xnxx internet sitemiz olan ve porn sex tarzi bir site olan mobil porno izle sitemiz gercekten dillere destan bir durumda herkesin sevdigi bir site olarak tarihe gececege benziyor. Sitenin en belirgin ozelliklerinden birisi de Turkiyede gercekten kaliteli ve muntazam, duzenli porno izle siteleri olmamasidir. Bu yuzden iste. Ayrica en net goruntu kalitesine sahip adresinde yayinlanmaktadir. Mesela diğer sitelerimizden bahsedecek olursak, en iyi hd porno video arşivine sahip bir siteyiz. "The Best anal porn videos and slut anus, big asses movies set..." hd porno faketaxi