Welcome!

Open Source Cloud Authors: Pat Romanski, Elizabeth White, Liz McMillan, Rostyslav Demush, Yeshim Deniz

Related Topics: Open Source Cloud, Release Management

Open Source Cloud: Blog Feed Post

Event Handling in SproutCore 1.0 - Part 2 - Dragging a View

Adding event handlers to drag a view around the window

In my last post I introduced event delegation in SproutCore and the basics of how to handle events.   In this post I’m going to build on this foundation to show you how you can add event handlers to drag a view around the window.*

Introducing the Mouse Events

As I noted in the first post, SproutCore recognizes several different types of mouse events.  Most of these events are essentially the same events sent by most browsers, though some differ significantly in order to give you tighter control.

Remember that to listen for events, you just need to add a method to your view with the same name.  Here is a quick rundown of the different methods you can add to your view:

  • mouseDown() - Called when the mouse button is pressed while over your view.   You must return YES (i.e. true) from this method for mouseDragged() or mouseUp() to be called.
  • mouseDragged() - Called when the mouse is moved while the button is pressed.  This is only called if you returned YES from mouseDown().
  • mouseUp() - Called when the mouse button is released.  Only called if you returned YES from mouseDown().
  • mouseOver() - Called when the mouse enters the view’s visible area.
  • mouseOut() - Called when the mouse leaves the view’s visible area.
  • mouseMoved() - Called whenever the mouse is moved while over the view.

It’s important to note that all of these events, except for mouseDragged() and mouseUp() are sent first to the view that is directly under the mouse pointer at the time of the event.  mouseDragged() and mouseUp() only happen after a mouseDown() event.  They are always sent first to the view that implemented mouseDown() AND returned YES (or true) from that method.

Events do bubble up your view hierarchy using something called a Responder Chain, but that will be the subject for another post.

Event handler methods are always passed an SC.Event object describing the event.  This class provides a consistent cross-platform API for accessing event info.  In general, it follows the API conventions for the built-in Event object on Firefox.

Listening For Dragging

So, let’s say we want to create a view that can be dragged around the screen.  To do this, we need to implement three of the above event handlers: mouseDown(), mouseDragged() and mouseUp().

Let’s start with mouseDown().  The primary purpose of this method is to setup any information we need to save to handle dragging and, of course, to return YES so that we get our other calls.  Here’s some good starter code:

MyApp.MyDragView = SC.View.extend({

  mouseDown: function(evt) {
    var layout = this.get('layout');
    this._mouseDownInfo = {
      pageX: evt.pageX, // save mouse pointer loc for later use
      pageY: evt.pageY,
      left:  layout.left, // save layout info 
      top: layout.top
    };
    return YES; // so we get other events
  }

});

The mouseUp() handler is also pretty simple.  It just needs to do some cleanup.  Basically delete the mouseDownInfo hash and return YES to indicate that the event has been handled:

  mouseUp: function(evt) {
    // apply one more time to set final position
    this.mouseDragged(evt); 
    this._mouseDownInfo = null; // cleanup info
    return YES; // handled!
  }

Note that this method also calls mouseDragged().  This is the same method that will be called whenever the mouse is moved with the button pressed.  The reason you want to call this method again here is to give the view one last chance to position itself with the position mouse location.  Otherwise you might find your view will occasionally “miss” your last drag just before you release the mouse.

So with mouseDown() and mouseUp() handled, we just need to add the dragging support.  This is where the magic happens.  All we do in this method is compare the current location of the mouse against the original location of the mouse at mouseDown().  We then adjust the location by this same delta from the original position.  Here’s how this looks in code:

  mouseDragged: function(evt) {
    var info = this._mouseDownInfo,
        loc;
 
    // handle X direction
    loc = info.left + (evt.pageX - info.pageX);
    this.adjust('left', loc);

    // handle Y direction
    loc = info.top + (evt.pageY - info.pageY) ;
    this.adjust('top', loc);

    return YES ; // event was handled!
  }

One interesting thing to pay attention to here is the way we calculate the new location of the view.  Most developers write dragging code for the first time by examining the current mouse location against the last time mouseDragged() was called.  Then they adjust the top/left by the delta.  This code instead saves the mouse and view location at mouseDown() and compares against that.

Note also the use of adjust().  This method is an easy way to adjust one or more layout parameters on your view without having to generate a whole new layout object.  It is very efficient for rendering.

The reason we take this approach here is because you want the offset of the mouse, relative to the view, to always remain fixed while you drag around.  Sometimes when you just look at the delta between events, this won’t happen.  It is usually always better to write UI code using this kind of “instantaneous point” approach - where calling a method with the same params will always have the same results, regardless of how it was called in the past.

Putting It All Together

So that’s all there is to it.  Three methods and you’ve added nice professional draggable views to your UI.  To help finish this example out, I’m going to add a property called “isDragging” and update the render() method of the view to add/remove a class name when that changes.  This will allow you to draw the view highlighted.  Here’s how the view looks when you put it together:

MyApp.MyDragView = SC.View.extend({

  // ..........................................................
  // DISPLAY
  // 

  // class name is added to the output HTML  
  classNames: 'my-drag-view',
  
  // becomes YES when a drag becomes.
  isDragging: NO,
  
  // make sure view will auto-rerender.
  displayProperties: 'isDragging'.w(),
  
  render: function(context, firstTime) {
    // add/remove class name.  Use CSS rule like this to style:
    // .sc-view.my-drag-view.dragging 
    //
    context.setClass('dragging', this.get('isDragging'));
  },

  // ..........................................................
  // EVENT HANDLING
  // 
  
  mouseDown: function(evt) {
  
    // indicate dragging - rerenders view
    this.set('isDraggin', YES);
    
    var layout = this.get('layout');
    this._mouseDownInfo = {
      pageX: evt.pageX, // save mouse pointer loc for later use
      pageY: evt.pageY,
      left:  layout.left, // save layout info 
      top: layout.top
    };
    return YES; // so we get other events
  },
  
  mouseUp: function(evt) {
  
    // no longer dragging - will rerender
    this.set('isDragging', NO);
    
    // apply one more time to set final position
    this.mouseDragged(evt); 
    this._mouseDownInfo = null; // cleanup info
    return YES; // handled!
  },
  
  mouseDragged: function(evt) {
    var info = this._mouseDownInfo,
        loc;
 
    // handle X direction
    loc = info.left + (evt.pageX - info.pageX);
    this.adjust('left', loc);

    // handle Y direction
    loc = info.top + (evt.pageY - info.pageY) ;
    this.adjust('top', loc);

    return YES ; // event was handled!
  }
  

});

Now you know how to do basic mouse event handling. Next we’re going to head into keyboard land. Before that, however, you’ll need to learn another key concept with events: the Responder Chain

* Note that SproutCore also has a generic facility for drag and drop called SC.Drag.  SC.Drag is better for complex operations and will eventually integrate with the browser-based drag/drop events in HTML5.  But that is a topic for another day.

Read the original blog entry...

More Stories By Charles Jolley

Charles Jolley is the creator of SproutCore and CEO of Sproutit, which provides consulting and software services for building SproutCore applications on the web. He has helped build some of the most popular RIAs on the web today.

@ThingsExpo Stories
Andrew Keys is Co-Founder of ConsenSys Enterprise. He comes to ConsenSys Enterprise with capital markets, technology and entrepreneurial experience. Previously, he worked for UBS investment bank in equities analysis. Later, he was responsible for the creation and distribution of life settlement products to hedge funds and investment banks. After, he co-founded a revenue cycle management company where he learned about Bitcoin and eventually Ethereal. Andrew's role at ConsenSys Enterprise is a mul...
Amazon started as an online bookseller 20 years ago. Since then, it has evolved into a technology juggernaut that has disrupted multiple markets and industries and touches many aspects of our lives. It is a relentless technology and business model innovator driving disruption throughout numerous ecosystems. Amazon’s AWS revenues alone are approaching $16B a year making it one of the largest IT companies in the world. With dominant offerings in Cloud, IoT, eCommerce, Big Data, AI, Digital Assista...
The Founder of NostaLab and a member of the Google Health Advisory Board, John is a unique combination of strategic thinker, marketer and entrepreneur. His career was built on the "science of advertising" combining strategy, creativity and marketing for industry-leading results. Combined with his ability to communicate complicated scientific concepts in a way that consumers and scientists alike can appreciate, John is a sought-after speaker for conferences on the forefront of healthcare science,...
In his session at Cloud Expo, Alan Winters, U.S. Head of Business Development at MobiDev, presented a success story of an entrepreneur who has both suffered through and benefited from offshore development across multiple businesses: The smart choice, or how to select the right offshore development partner Warning signs, or how to minimize chances of making the wrong choice Collaboration, or how to establish the most effective work processes Budget control, or how to maximize project result...
In his keynote at 19th Cloud Expo, Sheng Liang, co-founder and CEO of Rancher Labs, discussed the technological advances and new business opportunities created by the rapid adoption of containers. With the success of Amazon Web Services (AWS) and various open source technologies used to build private clouds, cloud computing has become an essential component of IT strategy. However, users continue to face challenges in implementing clouds, as older technologies evolve and newer ones like Docker c...
When shopping for a new data processing platform for IoT solutions, many development teams want to be able to test-drive options before making a choice. Yet when evaluating an IoT solution, it’s simply not feasible to do so at scale with physical devices. Building a sensor simulator is the next best choice; however, generating a realistic simulation at very high TPS with ease of configurability is a formidable challenge. When dealing with multiple application or transport protocols, you would be...
Data is the fuel that drives the machine learning algorithmic engines and ultimately provides the business value. In his session at Cloud Expo, Ed Featherston, a director and senior enterprise architect at Collaborative Consulting, discussed the key considerations around quality, volume, timeliness, and pedigree that must be dealt with in order to properly fuel that engine.
Personalization has long been the holy grail of marketing. Simply stated, communicate the most relevant offer to the right person and you will increase sales. To achieve this, you must understand the individual. Consequently, digital marketers developed many ways to gather and leverage customer information to deliver targeted experiences. In his session at @ThingsExpo, Lou Casal, Founder and Principal Consultant at Practicala, discussed how the Internet of Things (IoT) has accelerated our abilit...
Dion Hinchcliffe is an internationally recognized digital expert, bestselling book author, frequent keynote speaker, analyst, futurist, and transformation expert based in Washington, DC. He is currently Chief Strategy Officer at the industry-leading digital strategy and online community solutions firm, 7Summits.
Two weeks ago (November 3-5), I attended the Cloud Expo Silicon Valley as a speaker, where I presented on the security and privacy due diligence requirements for cloud solutions. Cloud security is a topical issue for every CIO, CISO, and technology buyer. Decision-makers are always looking for insights on how to mitigate the security risks of implementing and using cloud solutions. Based on the presentation topics covered at the conference, as well as the general discussions heard between sessio...
Detecting internal user threats in the Big Data eco-system is challenging and cumbersome. Many organizations monitor internal usage of the Big Data eco-system using a set of alerts. This is not a scalable process given the increase in the number of alerts with the accelerating growth in data volume and user base. Organizations are increasingly leveraging machine learning to monitor only those data elements that are sensitive and critical, autonomously establish monitoring policies, and to detect...
In his session at @ThingsExpo, Arvind Radhakrishnen discussed how IoT offers new business models in banking and financial services organizations with the capability to revolutionize products, payments, channels, business processes and asset management built on strong architectural foundation. The following topics were covered: How IoT stands to impact various business parameters including customer experience, cost and risk management within BFS organizations.
Recently, REAN Cloud built a digital concierge for a North Carolina hospital that had observed that most patient call button questions were repetitive. In addition, the paper-based process used to measure patient health metrics was laborious, not in real-time and sometimes error-prone. In their session at 21st Cloud Expo, Sean Finnerty, Executive Director, Practice Lead, Health Care & Life Science at REAN Cloud, and Dr. S.P.T. Krishnan, Principal Architect at REAN Cloud, discussed how they built...
In his keynote at 18th Cloud Expo, Andrew Keys, Co-Founder of ConsenSys Enterprise, provided an overview of the evolution of the Internet and the Database and the future of their combination – the Blockchain. Andrew Keys is Co-Founder of ConsenSys Enterprise. He comes to ConsenSys Enterprise with capital markets, technology and entrepreneurial experience. Previously, he worked for UBS investment bank in equities analysis. Later, he was responsible for the creation and distribution of life settl...
IoT solutions exploit operational data generated by Internet-connected smart “things” for the purpose of gaining operational insight and producing “better outcomes” (for example, create new business models, eliminate unscheduled maintenance, etc.). The explosive proliferation of IoT solutions will result in an exponential growth in the volume of IoT data, precipitating significant Information Governance issues: who owns the IoT data, what are the rights/duties of IoT solutions adopters towards t...
With tough new regulations coming to Europe on data privacy in May 2018, Calligo will explain why in reality the effect is global and transforms how you consider critical data. EU GDPR fundamentally rewrites the rules for cloud, Big Data and IoT. In his session at 21st Cloud Expo, Adam Ryan, Vice President and General Manager EMEA at Calligo, examined the regulations and provided insight on how it affects technology, challenges the established rules and will usher in new levels of diligence arou...
Organizations planning enterprise data center consolidation and modernization projects are faced with a challenging, costly reality. Requirements to deploy modern, cloud-native applications simultaneously with traditional client/server applications are almost impossible to achieve with hardware-centric enterprise infrastructure. Compute and network infrastructure are fast moving down a software-defined path, but storage has been a laggard. Until now.
DXWorldEXPO LLC announced today that All in Mobile, a mobile app development company from Poland, will exhibit at the 22nd International CloudEXPO | DXWorldEXPO. All In Mobile is a mobile app development company from Poland. Since 2014, they maintain passion for developing mobile applications for enterprises and startups worldwide.
Digital Transformation is much more than a buzzword. The radical shift to digital mechanisms for almost every process is evident across all industries and verticals. This is often especially true in financial services, where the legacy environment is many times unable to keep up with the rapidly shifting demands of the consumer. The constant pressure to provide complete, omnichannel delivery of customer-facing solutions to meet both regulatory and customer demands is putting enormous pressure on...
The best way to leverage your CloudEXPO | DXWorldEXPO presence as a sponsor and exhibitor is to plan your news announcements around our events. The press covering CloudEXPO | DXWorldEXPO will have access to these releases and will amplify your news announcements. More than two dozen Cloud companies either set deals at our shows or have announced their mergers and acquisitions at CloudEXPO. Product announcements during our show provide your company with the most reach through our targeted audienc...