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 ...
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

Ecto - Using select_merge for flexible aggregates

Image
Problem PostgreSQL is a rock solid database.   I've been using aggregate expressions for a number of features over the past few years in various languages.  They can be used to build powerful features for your platform.  When teamed up with Elixir and Ecto, you get amazing flexibility in your query generation.  Typically the data you want to retrieve via a select is fairly static, or there are only one or two different versions of the select you need.   @ doc """ Returns an aggregation of user activity """ @ spec user_activity_history () :: UserActivityHistory def user_activity_history () do query = from ( u in User , select : %UserActivityHistory { captured_at : fragment ( "now()" ) , hour_1 : filter ( count ( u . id ) , fragment ( "? >= now() - interval '1 hour'" , u . last_active )) , hour_6 : filter ( count ( u . id ) , fragment ( "...
Read more