WhatsApp – network ports TCP/UDP

To Enable WhatsApp open these ports TCP/UDP

I had an issue with users trying to make video calls on WhatsApp, they simply couldn’t, so i spent some time on this and can safely say if you open these ports, WhatsApp will work for Data messages, Voice and Video calls.

  • TCP (4244, 5222, 5223, 5242) outbound
  • UDP (3478, 45395) send and recieve

voila!

HTML 5 ASP.NET Drag n Drop IE Chrome Firefox

drag and drop, cross browser support in asp.net

part of a project involved allowing a user to select from a list of 200+ items, and it needed to be easy. So, we decided to provide users with a drag and drop facility

Drag and drop has been around for quite some time, and its a little tricky to get it right. I’m going to show you the basics that i used to enable a drag and drop between lists

What are we after?

we want draggable lists that will do the following

  • Two lists
  • drag and drop
  • support multi select
  • support re order of list items

The end result

this is what the HTML will look like once the page has rendered, go ahead, give it a try. Try selecting multiple items then dragging them over

as you play around with the drag and drop, monitor your browser console to view the events that are firing

notice that when you change the selected fields the text area displays a comma separated list of selected items

Filter list
Choice fields

  • Name 1
  • Name 2
  • Name 3
  • Name 4
  • Name 5
  • Name 6
  • Name 7
  Selected fields

  • Name 8
  • Name 9
  • Name 10
  • Name 11
  • Name 12
  • Name 13
  • Name 14

 

This drag and drop is tied together with just 4 javascript functions, tied to the browser drag events

  • handleStartDrag()
  • handleDragEnter()
  • handleDragOver()
  • handleDropped()

there are ancillary functions that bind events and respond to the filter

  • fltrChanged()
  • UpdatehiddenFields()
  • bindUIactions()

How its done

In a nutshell

The rendered HTML

So whats going on ?

Well a few things are happening here, CSS is styling our stuff. ASP.NET is loading the repeater and generating our “li” elements for the un-ordered lists. And jQuery is doing the rest

the keys points to note here are:

  • the classes used {ctlDrop, ctlDrag} (for CSS and more importantly jQuery hooks)
  • the draggable attribute on the items tell the browser these are allowed to be dragged
  • the use if ID‘s and Data- attributes as hooks for our functionality

how it works

first up i will say you have to do a few inexplicable things to get drag and drop working, but its a given, just do it and don’t ask, or you’ll simply lose your mind like many other techies who ask the “why did they do that?” question. like me

1. enable jQuery to support passing a payload across drag n drop.
2. declare a variable in your class to hold the last entered item that the drag action has entered.

The singleton script layout looks like this

 

The Code

Loading the form

The code infront

jumping straight in, we need two lists, driven by some data source. Here is how we load the lists, using .net repeaters

Notice we have a hidden field in the right hand column, this will be used to stored the selected values, as the selection changes

Code Behind – the repeater code

On our data bind we add list items to the list, and some information to the each list item. Class, draggable, data-fieldName, data-ordinal.

jQuery – the ancillary functions

bindUIactions()

We will bind to the dragover and the drop event on the elements with class ctlDrop

We will bind to the dragstart, dragenter, drop and click events of the elements with class ctlDrag

Finally we will bind to the txtfltr element so we can filter our list

UpdateHiddenFields()

handling the collecting of the selected items into a comma separated list is relatively simple, and this function will be called from the end of the drop event

jQuery – The Drag and Drop routines

handleStartDrag()

The start drag routine, a must have to set the sllowed effect property, this is searchable on the drop if you need to.

handleDragOver()

The drag over routine, this is another must have, without this, obscurely no draggable item will drop. Don’t ask just do

handleDragEnter()

The drag enter routine, this is required because internet explorer doesn’t correctly record which element the drop occurs over, so here we record the last entered element before the drop. And thus we have cross browser compatibility

handleDropped()

The drop routine, this is where all of the hard work is done. If you are a public facing website you might want to add screening of the mime type that is dropped, just incase its not what you are expecting. I’m not doing that here, our project was internal

 

the javascript file is available for download here dragndrop

the CSS is available for download here dragndrop CSS

Windows.Forms Settings : Auto Save state (size and position) of all my Forms

We will cover three topics in one

  • Using a single settings variable to save ever forms window state
  • Base class inheritance in winforms
  • Data contracts and JSON

In a nutshell, we will serialise and deserialise into a strongly typed custom settings class to and from JSON to store out our windows forms window states, in a settings variable in the project, using a custom settings class that is present in a baseClass that every form within your project will inherit from

What are data contracts

A data contract is essentially a simple way of serialising a class into a string for storage and/or transport

In simple terms, when you mark a class as a data contract you are telling .NET that this class will have properties that can be stored as a string (in our case serialised to JSON).

this is how to mark a class as a data contract

And members that you would like to store in your JSON should be marked as data members like so

How do data contracts work with JSON?

A long time ago I wrote a generic serialiser/deserialiser to convert datacontract classes to and from JSON, this is the code

we are going to reference these function later in this article

How do we use inheritance in winforms

Windows forms classes that you are exposed to are essentially partial classes. If you have a project open that contains a Windows.Forms.Form, then unhide all documents and take a look at the difference between the code behind the form that you see and the designer generated code. The file names will have this structure

  • frmName.vb
  • frmName.designer.vb

Partial classes are a really nice way to extend the reach of a single class, but separate the code file

So, create a baseclass ready to be inherited by all of your windows forms

  • frmName.vb
  • frmName.designer.vb
  • BaseForm.vb

create the project settings property

next we create our custom project settings property “FormSizesAndLocations”

projectsettings

The custom settings class

we need our settings class to be able to do the following

  • read the settings from the config
  • save a forms window state to the config
  • name, width, height, x position, y position, maximised, minimised

here is our custom settings class for saving window state and reading window state, note the data contract attribute and the data member attributes to those properties we want to persist

The BasePage class that will do all the work

Now lets create a base page class, in this class we will put the logic to handle the position save and load of any form that then inherits this class

Rather than describe the code, you should really be able to understand it, so lets dive into the forms base class

And there you have it