Taming the GWT PopupPanel

I was working on a feature of a GWT application today, and decided to fix a problem that had been bugging me.  While the issue was not a server crashing bug, it was a usability nuisance.

Between the main content of the app, and the navigation bar, there was an Anchor.  When a user moused over the Anchor, a PopupPanel would be shown with some user data in it.  Everytime i moved my mouse up to the navigation bar, I'd mouse over the anchor, and have this annoying PopupPanel in my way.  To compund the issue, there was a RPC call each time the panel was popped up.

To combat this issue, I decided to use the GWT Timer class, along with the MouseOverEvent and MouseOutEvent.  This was incredibly simple after I moved the presenter and view to use the UiField, and UiHandler annotations along with the UiBinder.

The Code:

@UiHandler("popupAnchor")
void showPopup(ClickEvent e)
{
 showPopup();
}

private long mouseOverTime = 0;
private int loadPopupTime = 300;

@UiHandler("popupAnchor")
void onMouseOut(MouseOutEvent e)
{
 mouseOverTime = 0;
}

@UiHandler("popupAnchor")
void onMouseOver(MouseOverEvent e)
{
 mouseOverTime = System.currentTimeMillis();
 Timer t = new Timer() {
       public void run() {
        /*
         * this ensures that the popup
         * will not trigger if the mouse
         * merely went over the anchor. 
                   */
        if(mouseOverTime != 0)
         showPopup();
       }
     };
 t.schedule(loadPopupTime);
}

private void showPopup()
{
 popup.getPopup().setPopupPosition(
   popupAnchor.getAbsoluteLeft(), 
   popupAnchor.getAbsoluteTop());
 popup.getPopup().show();
 
}

How this works:


When the user mouses over the anchor, a MouseOverEvent is fired. The handler onMouseOver is run, which sets mouseOverTime to the current time in milliseconds.  A Timer is also created, and set to run in loadPopupTime milliseconds.  

Now one of two things can happen:

  1. The user can stay hovering on the Anchor.  The timer will run, and see that mouseOverTime is not equal to zero, and the popup will be shown.
  2. The user can move the mose off the Anchor, which triggers the MouseOutEvent.  This sets mouseOverTime equal to zero.  When the timer runs, it sees that mouseOverTime is equal to zero, and the popup will not be shown. 
I also added in a click handler for the users that can't wait 300ms. I'm in this group for sure.

Pretty simple eh!?

Comments

Post a Comment

Popular posts from this blog

Write Admin Tools From Day One

Image
UPDATE:  I gave a talk expanding on this blog post at EMPEX NYC 2023 . The Problem Writing useful features for your users is key to a successful product.  It makes sense then that you should maximize your time writing features for those users.   This approach is very effective at the beginning of a product's life, but over time, you may find you are spending more time maintaining the product that developing it. Some of the biggest development time sucks can be: Tracking down the cause of unexpected behavior. Fixing data. Answering user, or team member questions. Running maintenance scripts, or other ad-hoc tasks. The "Oh #&@$" Solution These small support tasks start to add up, and there is no easy way to offload the work to product, or support.  You and your development team reach a breaking point where you must start prioritizing administrative tools. Unfortunately, you will slow down your new feature development even more in the short term.  It will take time for t
Read more

Phoenix LiveView: Async Assign Pattern

Image
UPDATE: LiveView has added a built in, more robust way of using this pattern.  Check it out here ! I've been using LiveView for about two years now. It's a great framework that makes snappy and responsive pages. One anti-pattern I see fairly often is loading a lot of data in the initial page render. For the un-initiated, the mount/3 function is called twice.  Once for the initial 'dead' render, and again after the socket is connected.   Many times, for the sake of simple straight forward code, not much is done differently between these two renders. I haven't found any references (I'm sure they exist) on a best practice for managing the following flow: Set sensible, lightweight default values on initial render. Kick off one or more async processes to make longer running function calls. Receive the values in the LiveView, and update the assigns. As always in Elixir, the tools are powerful, and theres many ways to accomplish this. Spawn a linked, or unlinked pro
Read more

Extremely Fake Cheapskates! Season One Recap

Image
If you've been browsing Netflix lately, you may have noticed a recent influx of trashy reality TV shows.  While I normally avoid these like the plague, there was one that recently piqued my interest.  I've been reading the Mr. Money Mustache blog lately so I just HAD to watch Extreme Cheapskates .   Have these extremists used any of MMM's penny pinching tactics? Maybe there would be some useful tricks I could impress my wife with! I was not disappointed.  This show was a gold mine of hilarity, but it was rather inconsistent.  On one hand there are characters such as Jeff, a man who may out stash Mr. Mustache himself.  On the other, we have people like Vickie, John, and Abdul, who's money saving methods seemed about as real as an episode of Keeping up with the Kardashians . Lets meet the cast of characters that Extreme Cheapskates has lined up and see if we can filter out the real eagle squeezers.  I'll rate each one on a scale of 1 (Gucci hidden under the bed) t
Read more