We are Moving!

Cennest is finally moving to its new virtual home at www.cennest.com.

While we will be blogging at both places for sometime, you will find more information about “Whats Up at Cennest “ at our website.

Do visit!

Html5 – Simple Drag and Drop

 

Drag and Drop is a very useful and common feature. This allows you to drag an object to a location and drop the object there, with the help of a mouse click.

To achieve drag and drop functionality with traditional HTML4, developers would either have to use complex Javascript programming or other Javascript frameworks like flash etc.

Now HTML 5 has come up with a Drag and Drop(dnd) API that brings native a dnd support to the browser making it much easier to code up.

Html 5 Drag and Drop is supported by all major browsers – Internet Explorer 9, Firefox, Opera 12, Chrome support drag and drop.

Drag and Drop Events:

There are number of events which are fired during various stages of the drag and drop operation. These events are listed below:

Events

Description

dragstart

Fires when the user starts dragging the object.

dragenter

Fired when the mouse is first moved over the target element while a drag is occurring. A listener for this event should indicate whether a drop is allowed over this location. If there are no listeners, or the listeners perform no operations, then a drop is not allowed by default.

dragover

This event is fired as the mouse is moved over an element when a drag is occurring. Much of the time, the operation that occurs during a listener will be the same as the dragenter event.

dragleave

This event is fired when the mouse leaves an element while a drag is occurring. Listeners should remove any highlighting or insertion markers used for drop feedback.

drag

Fires every time the mouse is moved while the object is being dragged.

drop

The drop event is fired on the element where the drop was occurred at the end of the drag operation. A listener would be responsible for retrieving the data being dragged and inserting it at the drop location.

dragend

Fires when the user releases the mouse button while dragging an object.

In this ar­ticle, we’ll create a very simple ex­ample of an HTML5 drag and drop.

clip_image002

We’ll be dragging and dropping this image.

Html Code:DragandDrop.html

<!DOCTYPE html>

<html lang="en">

<head>

<title>Html5 Drag and Drop Demo</title>

<link rel="stylesheet" type="text/css" href="Content/DragandDrop.css">

<script type="text/javascript" src="Scripts/DragandDrop.js"></script>

</head>

<body>

<div id="content">

<section id="topBox">

<!–In Html5 we don’t need to add an ending tag for .css and img tag–>

<img id="image1" src="Images/image1.gif">

</section>

<section id="bottomBox">

Drag the image here!

</section>

</div>

</body>

</html>

Css Code:DragandDrop.css

#content {

width:400px;

margin:0 auto;

padding:30px;

}

#topBox

{

width:400px;

height:100px;

margin:5px;

border:2px solid #000000;

}

#bottomBox

{

width:400px;

height:300px;

margin:5px;

border:2px solid #0094ff;

}

1. Make an element draggable, by setting the draggable attribute to true. Here, I’ll be dragging an image so I am setting the draggable property of the image to true.

<img id="image1" src="Images/image1.gif" draggable="true" />

2. Write function() when web page has finished loading by calling

window.addEventListener("load", OnLoad, false);

in DragAndDrop.js

JS code:DragandDrop.js

window.addEventListener("load", OnLoad, false);

When window is loaded we’ll call OnLoad() method.

function OnLoad() {

//get the element with id’image1′ and store it in variable pic1.

pic1 = document.getElementById(‘image1’);

//When we start dragging the element,dragstart event is fired and StartDrag function //is called.

pic1.addEventListener("dragstart", StartDrag, false);

//bottomBox is the id of element where the image has to be dragged to.

bottomBox = document.getElementById(‘bottomBox’);

//dragenter event is fired when the image is dragged to the bottomBox and DragEnter //function is called. Inside the function we prevent the default action for the event //as it may differ in each browser.’e’ refers to event

bottomBox.addEventListener("dragenter", function (e) { e.preventDefault(); }, false);

//dragover event is fired when the image is dragged over the bottomBox and the //respective function is called.Inside the function we prevent the default action for //the event as it may differ in each browser.’e’ refers to event.

bottomBox.addEventListener("dragover", function (e) { e.preventDefault(); }, false);

//drop event is called when the image is dropped in the bottomBox and Dropped function //is called.

bottomBox.addEventListener("drop", Dropped , false);

}

//This function is called when dragstart event is fired. ‘e’ refers to event.An event //is some action that the user can do on a webpage.e.g dragging is an event.

//When dragstart event occurs it stores the information of image source code.

function StartDrag(e) {

//image source code is stored in a variable code.

var code = ‘ <img id="image1" src="Images/image1.gif" draggable="true">’;

//dataTransfer.setData() is used for storing information on the event. This method

//sets the data type and the value of the dragged data.

e.dataTransfer.setData(‘Text’, code);

}

Here,  the data type is "Text" and the value is the source code of the draggable element .

function Dropped(e) {

//Call preventDefault() to prevent the browser default handling of the data (default is //open as link on drop)

e.preventDefault();

//Get the dragged data with the dataTransfer.getData("Text") method. This method will //return any data that was set to the same type in the setData() method.

//Here, the content of bottomBox changes to an image.

bottomBox.innerHTML = e.dataTransfer.getData(‘Text’);

}

Here, the dragged data is the source code of the dragged element.

This is how it looks once you have dragged the image to the botom box.

clip_image004

Further Improvement.

In this we will make the upper image disappear once the dragging and dropping of image is complete.

 

JS Code: DragandDrop.js

function OnLoad() {

//get the element with id’image1′ and store it in pic1.

pic1 = document.getElementById(‘image1’);

//When we start dragging the element StartDrag function is called

pic1.addEventListener("dragstart", StartDrag, false);

//EndDrag function is called when its done with dragging the image.

pic1.addEventListener("dragend", EndDrag, false);

//bottomBox is the id of element where the image has to be dragged to.

bottomBox = document.getElementById(‘bottomBox’);

//dragenter event is fired when the image is dragged to the bottomBox and DragEnter //function is called.

bottomBox.addEventListener("dragenter", DragEnter, false);

//dragleave event is fired when the image is dragged to the bottomBox but has not yet //dropped the image and then leaves the bottomBox.

//DragLeave function is called.

bottomBox.addEventListener("dragleave", DragLeave, false);

//dragover event is fired when the image is dragged over the bottomBox and the //respective function is called.

//Inside the function we prevent the default action for the event as it may differ in each browser.’e’ refers to event

bottomBox.addEventListener("dragover", function (e) { e.preventDefault(); }, false);

//drop event is called when the image is dropped in the bottomBox and Dropped function is called.

bottomBox.addEventListener("drop", Dropped , false);

}

//This function is called when dragstart event is fired.’e’ is event.

//An event is something that the user can do on a webpage.e.g dragging is an event.

//When dragstart event occurs it stores the information of image source code.

function StartDrag(e) {

//image source code is stored in a variable code.

var code = ‘ <img id="image1" src="Images/image1.gif" draggable="true">’;

//dataTransfer.setData() is used for storing information on the event. This method

//sets the data type and the value of the dragged data.

e.dataTransfer.setData(‘Text’, code);

}

function EndDrag(e) {

//Event is dragging and target of event is image here.

pic = e.target;

//once the dragging is complete the visibility of the image in the topBox is hidden.

pic.style.visibility = ‘hidden’;

}

function DragEnter(e) {

e.preventDefault();

//When the image enters the bottomBox its background color and border color changes.

bottomBox.style.backgroundColor = ‘SkyBlue’;

bottomBox.style.border = ‘2px solid green’;

}

function DragLeave(e) {

e.preventDefault();

//When the image leaves the bottomBox and the image has not been dropped yet its background color and border color changes.

bottomBox.style.backgroundColor = ‘White’;

bottomBox.style.border = ‘2px solid #0094ff’;

}

function Dropped(e) {

//Call preventDefault() to prevent the browser default handling of the data (default is open as link on drop)

e.preventDefault();

//Get the dragged data with the dataTransfer.getData("Text") method.

//This method will return any data that was set to the same type in the setData() method.

bottomBox.innerHTML = e.dataTransfer.getData(‘Text’);

}

 

This is how it looks once you have dragged the image to the bottom box.

clip_image006

 

You can download the zipped up code for this example from here.

Hope this helps !!

Team Cennest !!

References

http://www.tutorialspoint.com/html5/html5_drag_drop.htm

http://www.w3schools.com/html5/html5_draganddrop.asp

http://www.youtube.com/watch?v=Kfi3uRJS6hA

http://www.youtube.com/watch?feature=fvwp&NR=1&v=-2qhd7uJkn8

http://www.youtube.com/watch?feature=fvwp&NR=1&v=SWR5ojeSmvM

http://www.youtube.com/watch?feature=fvwp&NR=1&v=e6t-8EoT2HM

BulbFlash:-PayPal IPN and Windows Azure

While working with integrating PayPal with an MVC 3 app hosted on Azure, we just couldn’t get the PayPal IPN notification to work.

We were stuck with the following message!!

IPN delivery failed. Unable to connect to the specified URL. Please verify the URL and try again.

After a lot of brainstorming , tracing, debugging and re-reading the documentation , we realized that the issue was that our website had a custom endpoint of 8080 as against the default 80.

Paypal sends the IPN HttpPost request on port 80 so a request to http://xxx.cloudapp.net:8080/PayPalController/IPin will fail!!.. Ensure you are hosted on port 80!!

Hope this helps a few of you PayPal -Azure devs out there!!!

Team Cennest!!

Using InsertOrReplace/InsertOrMerge with the Storage Client!

Trying out the new Replace or Insert option(Upsert) in the Storage Client and can’t get rid of the following error message

“"<?xml version=\"1.0\" encoding=\"utf-8\" standalone=\"yes\"?>\r\n<error xmlns=\"http://schemas.microsoft.com/ado/2007/08/dataservices/metadata\">\r\n  <code>InvalidHeaderValue</code>\r\n  <message xml:lang=\"en-US\">The value for one of the HTTP headers is not in the correct format.</message>\r\n</error>"”

The main issue is that the new API is available only in the "2011-08-18" version which the storage dll does not hit . The reason the below code is necessary is because the released library sends an older storage version “2009-09-19” that does not support these newly released features

So we need to specifically set the headers in the data-context request. Also remember that this does not work with the local development storage ( at least as of now), so remember to use these headers ( and these operations) only with the Cloud storage account.

dataContext.SendingRequest +=
   (sender, args) => (args.Request).Headers["x-ms-version"] = "2011-08-18";

               dataContext.AttachTo(<tableName>, <data>);
               dataContext.UpdateObject(<data>);
             dataContext.SaveChangesWithRetries(SaveChangesOptions.ReplaceOnUpdate);

This gives you Insert Or Replace option with Storage Client Lib!!

If you leave the SaveChangeOptions.ReplaceOnUpdate option then you get Insert or Merge!

Until Next time!

Team Cennest!

When Azure Diagnostics just won’t collect your data!!!

Recently realized that while we had happily implemented tracing and diagnostics in our applications , tools like Cerebrata , Azure MMC etc were just not showing any trace data.. We were doing everything by the book and even re-opened the training kit but the trace just won’t get collected. After A LOT of investigation and googling/binging it comes to light that the most optimized way of collecting diagnostics changed with Azure SDK 1.3 and further with 1.4.

If you are victim of “No WADLogsTable “ being generated try the below snippet. It just might resolve your woes

public override bool OnStart()
{
DiagnosticMonitorTraceListener tmpListener = new DiagnosticMonitorTraceListener();
System.Diagnostics.Trace.Listeners.Add(tmpListener);
string wadConnectionString = "Microsoft.WindowsAzure.Plugins.Diagnostics.ConnectionString";
CloudStorageAccount storageAccount =
CloudStorageAccount.Parse(RoleEnvironment.GetConfigurationSettingValue(wadConnectionString));

RoleInstanceDiagnosticManager roleInstanceDiagnosticManager =
storageAccount.CreateRoleInstanceDiagnosticManager(RoleEnvironment.DeploymentId,
RoleEnvironment.CurrentRoleInstance.Role.Name, RoleEnvironment.CurrentRoleInstance.Id);

DiagnosticMonitorConfiguration config = roleInstanceDiagnosticManager.GetCurrentConfiguration();
config.Logs.ScheduledTransferPeriod = TimeSpan.FromMinutes(1D);
config.Logs.ScheduledTransferLogLevelFilter = LogLevel.Undefined;
config.DiagnosticInfrastructureLogs.ScheduledTransferLogLevelFilter = LogLevel.Warning;
config.DiagnosticInfrastructureLogs.ScheduledTransferPeriod = TimeSpan.FromMinutes(1D);
config.Directories.ScheduledTransferPeriod = TimeSpan.FromMinutes(1D);

roleInstanceDiagnosticManager.SetCurrentConfiguration(config);
System.Diagnostics.Trace.TraceInformation("Diagnostics Running");

return base.OnStart();
}

Do let us know if this helped!!

Cennest!

Azure Table Storage Tip!

For all those working with Azure Table Storage and using the DateTime DataType, here is a quick tip!!

Ensure that you set the DateTime datatype with a valid value…while the dev fabric will allow you to get away without setting the value, the Azure prod fabric will not accept a junk value in the DateTime field and you will get a “One of the input values is out of range exception”!

Hope this helps save a few debug cycles as you move from Dev to Prod!!

Cennest!

Azure Tip:- WCF WebRole Accessing Table Storage:- SetPublisherAccess error

If you are using a WCF Web Role to access table storage you might come across the following error

SetConfigurationSettingPublisher needs to be called before FromConfigurationSetting can be used

The following steps can help you

1. Ensure you have the Cloud project set up as the start up project

2. Ensure you are using the service reference of the Dev Environment web role and not your local IIS port( Another post on that incase you are facing an Add Service reference issue here but for now just replace the port in the web.config with http://127.0.0.1:81/yourservice.svc).

3. If you are using Azure SDK 1.2 then add the following code to your WebRole.cs OnStart method

CloudStorageAccount.SetConfigurationSettingPublisher((configName,configSettingPublisher) =>
   {
    var connectionString = RoleEnvironment.GetConfigurationSettingValue(configName);
    configSettingPublisher(connectionString);
   });

4. If you are using Azure SDK 1.3 then add a Global.asax to your WebService Web Role and add the following code

protected void Application_Start(object sender, EventArgs e)
       {
           CloudStorageAccount.SetConfigurationSettingPublisher(
       (configName, configSettingPublisher) =>
       {
           var connectionString =
               RoleEnvironment.GetConfigurationSettingValue(configName);
           configSettingPublisher(connectionString);
       } );
        
       }

5. Ensure you have WCF Http Activation On ( in control panel—> Windows Features)

Watch this space for lots more Azure tips!

Cennest!

 

Bulb Flash:- Azure Development Quick Tip!!

Recently we were stumped with the following error while working on an Azure project

Error 1 The specified path, file name, or both are too long. The fully qualified file name must be less than 260 characters, and the directory name must be less than 248 characters. C:\Program Files\MSBuild\Microsoft\Cloud Service\1.0\Visual Studio 10.0\Microsoft.CloudService.targets 202 5 OrderManagement

After a lot of head-banging, a simple Quick-Fix was to move the project to a root directory like a C: or a D: (Basically reduce the path of the project)

Hope you get to this quick-fix before you get to the head-bangingSmile

Cennest!

Follow

Get every new post delivered to your Inbox.