I tried to translate this js dock:http://safalra.com/web-design/javascript/mac-style-dock/ to gwt implementation.Blow is the complete translation(almost translated line by line),a little bit long,but logic is quite simple:MouseMove and MouseOut were registered to each item in the bar.When mouse move/out,icons size got updated based on a scale factor calculated from/according to "distance" to current cursor position.The primary scaling logic is handled by first lines of functions:processMouseMove/Out(..),actually by timer.The questions is :Timers:closeTimeout and closeInterval are set in MouseOut,and are"delet" in MouseMove.But since MouseMove event will be fired just after MouseOut event immediately,the operations set in MouseOut Timer will not get executed.But js demo do work,so there are some errors in my translation.And after 3 hours debugging,I can find them out.So, please help me to point them out?Thanks. (if you want to run blow code,these images must be put to war directory:) http://safalra.com/web-design/javascript/mac-style-dock/mac-icon-160-full.png http://safalra.com/web-design/javascript/mac-style-dock/mac-icon-160.png http://safalra.com/web-design/javascript/mac-style-dock/mac-icon-80.png http://safalra.com/web-design/javascript/mac-style-dock/mac-icon-80-reflection.png
http://safalra.com/web-design/javascript/mac-style-dock/mac-icon-160-reflection.png ------------------------------------- public class DockViewImpl extends Composite implements ClickHandler, MouseMoveHandler, MouseOutHandler { private Timer closeInterval = null; // initialise the time-outs and intervals to 0 private Timer closeTimeout = null; // create an array to store the DOM nodes of the icons private final Image[] icons;; // create an array to store the sizes of the icons private final double[] iconSizes; private final FlowPanel iconsNode = new FlowPanel(); private final ImageDetail[] imageDetails; // create an array to store the DOM nodes of the icons // private ImageElement[] images; private final int maxSize; // initialise the maximum width to 0 private int maxWidth; private final int minSize; private final FlowPanel node; Timer openInterval = null; private final int range; // create an array to store the DOM nodes of reflections of the icons private final Image[] reflectedIcons; private FlowPanel reflectedIconsNode = new FlowPanel(); // initialise the scale factor to 0 private double scale = 0; public DockViewImpl() { initWidget(node = new FlowPanel()); minSize = 80; maxSize = 160; range = 2; int len = 8; icons = new Image[len]; iconSizes = new double[len]; reflectedIcons = new Image[len]; imageDetails = new ImageDetail[len]; for (int i = 0; i < len; i++) { ImageDetail img = new ImageDetail(); img.setExtension(".png"); img.setName("mac-icon-"); img.setSizes(new int[] { 80, 160 }); imageDetails[i] = img; } loopOverImages(); node.add(iconsNode); node.add(reflectedIconsNode); } private void loopOverImages() { for (int i = 0, len = imageDetails.length; i < len; i++) { // create and store a node for the icon for this image Image icon = new Image(); icons[i] = icon; // position the icon for this image relatively icon.getElement().getStyle().setPosition(Position.RELATIVE); // store the initial size of the icon for this image iconSizes[i] = minSize; // create and store a node for the reflected icon for this image Image reflectedIcon = new Image(); reflectedIcons[i] = reflectedIcon; // update the properties of the icon for this image updateIconProperties(i); // add the span for this image to the dock iconsNode.add(icon); // add the span for this image to the dock reflectedIconsNode.add(reflectedIcon); icon.addClickHandler(this); icon.addMouseMoveHandler(this); icon.addMouseOutHandler(this); // loop over the sizes available for this image // for (int j = 0; j < imageDetails[i].getSizes().length; // j++){ // // // create a DOM node containing this image at this size // ImageElement image = document.createElement("img"); // image.setAttribute( // "src", // imageDetails[i).getName() // + imageDetails[i).sizes[j] // + imageDetails[i).getExtension()); // // add the DOM node to the array of stored images // images.push(image); // } } } @Override public void onClick(ClickEvent event) { Window.alert("You clicked the icon"); } @Override public void onMouseMove(MouseMoveEvent event) { processMouseMove(event); } @Override public void onMouseOut(MouseOutEvent event) { processMouseOut(); } /* * Processes a mousemove event on an image in the 'dock'. The parameter is: * e - the event object. Window.event will be used if this is undefined. */ private void processMouseMove(MouseMoveEvent e) { // clear the closing interval and time-out if (closeTimeout != null) { closeTimeout.cancel(); closeTimeout = null; } if (closeInterval != null) { closeInterval.cancel(); closeInterval = null; } // check that the opening interval is required but does not yet exist // System.out.println("scale:"+scale +"---openInterval:"+(openInterval==null?"null":"nonull")); if (scale != 1 && openInterval == null) { // create the opening interval openInterval = new Timer() { public void run() { if (scale < 1) { scale += 0.125; } if (scale >= 1) { scale = 1; openInterval.cancel(); openInterval = null; } for (int i = 0, size = icons.length; i < size; i++) { updateIconProperties(i); } } }; openInterval.scheduleRepeating(20); // set the event object if the browser does not supply it // if (!e) // e = Window.event; // find the DOM node on which the mouseover event occured // var target = e.get; // obtain the index of the icon on which the mouseover event occured int idx = 0; while (icons[idx] != e.getSource()) idx++; // obtain the fraction across the icon that the mouseover event // occurred double across = e.getX() / iconSizes[idx]; // check a distance across the icon was found (in some cases it will // not be) if (across != 0) { // initialise the current width to 0 int currentWidth = 0; // loop over the icons for (int i = 0, len = icons.length; i < len; i++) { // check whether the icon is in the range to be resized if (i < idx - range || i > idx + range) { // set the icon size to the minimum size iconSizes[i] = minSize; } else if (i == idx) { // set the icon size to be the maximum size iconSizes[i] = maxSize; } else { // set the icon size to the appropriate value iconSizes[i] = minSize + Math.round((maxSize - minSize - 1) * (Math.cos((i - idx - across + (i < idx ? 1 : 0)) / range * Math.PI) + 1) / 2); // add the icon size to the current width currentWidth += iconSizes[i]; } } // update the maximum width if necessary if (currentWidth > maxWidth) maxWidth = currentWidth; // detect if the total size should be corrected if (idx >= range && idx < iconSizes.length - range && currentWidth < maxWidth) { // correct the size of the smallest magnified icons iconSizes[idx - range] = iconSizes[idx - range] + Math.floor((maxWidth - currentWidth) / 2); iconSizes[idx + range] = iconSizes[idx + range] + Math.ceil((maxWidth - currentWidth) / 2); } // update the sizes of the images for (int i = 0, len = icons.length; i < len; i++) updateIconProperties(i); } } } // Processes a mouseout event on an image in the dock. private void processMouseOut() { // check that neither the closing interval nor time-out are set if (closeTimeout == null && closeInterval == null) { // create the closing time-out closeTimeout = new Timer() { public void run() { closeTimeout = null; if (openInterval != null) { openInterval.cancel(); openInterval = null; } closeInterval = new Timer() { public void run() { if (scale > 0) { scale -= 0.125; } if (scale <= 0) { scale = 0; closeInterval.cancel(); closeInterval = null; } for (int i = 0, len = icons.length; i < len; i++) { updateIconProperties(i); } } }; closeInterval.scheduleRepeating(20); } }; closeTimeout.schedule(100); } } /* * Sets a toolbar image to the specified size. The parameter is: index - the * 0-based index of the image to be sized */ private void updateIconProperties(int index) { // determine the size for the icon, taking into account the scale factor double size = minSize + scale * (iconSizes[index] - minSize); // find the index of the appropriate image size int sizeIdx = 0; ImageDetail image = imageDetails[index]; int[] sizes = image.getSizes(); while (sizes[sizeIdx] < size && sizeIdx + 1 < sizes.length) { sizeIdx++; } // check whether the full icon with its caption should be displayed String name = image.getName(); String extension = image.getExtension(); // HP change to iconStyle Element iconElem = icons[index].getElement(); // set the src attribute of the image for the icon iconElem.setAttribute("src", name + ((size == maxSize) ? maxSize + "-full" : sizes[sizeIdx]) + extension); // set the width and height of the image for the icon and its reflection Style style = iconElem.getStyle(); setStyle(style, size); style.setMarginTop(maxSize - size, Unit.PX); // HP change to reflectIconStyle Element reflectIconElem = reflectedIcons[index].getElement(); // set the src attribute of the image for the icon's reflection reflectIconElem.setAttribute("src", name + sizes[sizeIdx] + "-reflection" + extension); setStyle(style = reflectIconElem.getStyle(), size); style.setMarginBottom(maxSize - size, Unit.PX); } private void setStyle(Style style, double size) { style.setWidth(size, Unit.PX); style.setHeight(size, Unit.PX); } } -- You received this message because you are subscribed to the Google Groups "Google Web Toolkit" group. To post to this group, send email to [email protected]. To unsubscribe from this group, send email to [email protected]. For more options, visit this group at http://groups.google.com/group/google-web-toolkit?hl=en.
