HTML5 Drag&Drop demo


Drag&Drop API is one of many great things that new HTML5 specs offers.

In this post I have provided you with an example of how you might use that API to create a very basic portal.

About the demo

To see the demo mentioned above, visit this page.

The file dealing with DnD API is called urldnd.js. This file contains a definition of a Portal (URLDnD) class, which attaches Drag&Drop features to registered portal portlets.

Portlets are draggable and may be dropped within each of the portal columns. Portal columns are the containers for protal’s portlets and to be registered as a drop zones I had to add event listeners to certain DnD events. One of the most important handlers is registered in this line:
column.addEventListener('drop', dnd.handleDrop, false);

This is how you make a column react on each portal drop event. So whenever portal is dragged over a column, and dropped inside of it dnd.handleDrop function is executed and it contains the logic of removing the portal from the previous container (column) and appending it to the new targeted container (column).

The moment we start dragging the portlet, the dragstart event would be triggered so in order to catch that event and attach the minimal amount of data to it I am registering the handler to that event in the following line of code:
portlet.addEventListener('dragstart', dnd.handleDragStart, false);

The dnd.handleDragStart function is the place where I am taking the dragged portlet’s id and storing it within the event in the following line of code:
e.dataTransfer.setData('text/plain', this.id);
The reason for doing that is simple – so that at the end, when the portlet gets dropped I could grab the portlet that was dragged and manipulate it accordingly. The above line shows how you might attach some extra information to the event itself.
The code for the demo is very intuitive and straightforward.
There is so much more in relation to the Drag&Drop API that is outside of the scope of this demo and tutorial, but if this can help you get started in any way than my mission is accomplished. ūüėČ
Good luck!

Links

Advertisements

URL Express CRUD Library


A few days ago, as a result of playing with Node, I have created and published an open source node based library called url-express-crud.

The main library objectives are:

  • Quickly expose basic CRUD operations in the application for a concrete model (resource).
  • Make it as flexible as possible, enabling clients (developers) to configure it based on their needs and desires (override resource related templates, make route handlers configurable, …).
  • Make it support content negotiation.

The main motivation for creating this library was to make it possible to quickly provide basic boilerplate CRUD operations for models (resources) that almost every app needs and all with certain level of flexibility in terms of customization that might be required.

However its important to note that the library is its very early phase and there’s a lots of things still to be implemented…

Installation

Just require the library as a dependency in your project’s package.json file:
"url-express-crud": "*"
Than just require it within your project file:
var urlCrud = require('url-express-crud');

And you can start using the library.

Usage

In order to help you understand how to use the library I have created a demo application.

The example application’s source code can be found in the separate github repo located here.

I’ve record a short screen-cast of me going though the process of using the library and creating the example application mentioned above. For now in order to provide you with the video pls contact me here, but if you are patient it will be soon uploaded to this blog.

Links

Playing with google maps api


Few months ago I had a need for building a form that has some address related logic built into it.

The aim was enabling the users to quickly fill in their address form fields, in that manner that they would be interpreted correctly for the persistence layer, meaning all of the address components would be extracted correctly (like country region, city, ….) and placed in appropriate input fields.

So I was playing a bit with the Google Maps API and here is what I ended up with in the initial phase (a thing that I can share).

Please note that the only purpose of this tutorial is to try to expose some code that might hopefully help you learn some parts of that API and maybe help you getting some idea how to address your own problems (in this area).

Brief Code overview

index.html page contains all the html markup that the demo needs.

You will find that I’ve been using Twitter’s Bootstrap framework for styling the demo page.

The JavaScript dependencies are:

  • Google Maps API v3:
  <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=false&libraries=places&language=en"></script>
  • jQuery:
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
  • Twitter Bootstrap library:
<script src="bootstrap/js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
  • My custom utility functions for dealing with Google Maps API responses and address form fileds:
<script type="text/javascript" src="../url.google-maps-utils.js"></script>
  • The main demo script, bootstrapping everything:
<script type="text/javascript" src="script.js"></script>

Demystifying source files

I have created documentation for my custom JavaScript files and you can find them here:

Links