Thursday, November 8, 2012

Getting jQueryMobile to play nicely with Wijmo

jQueryMobile is nice, but I sometimes find it difficult to get it to play nicely with other frameworks. One of these frameworks is “THE UI framework for the web”…Of course I am talking about Wijmo (http://wijmo.com).

Was teaching HTML5 for 3 days and during the last day (project day for students) one of the guys wanted to use Wijmo in jQueryMobile. I´ve done it before but I remember that I struggled alot to get all script references to work.

So this post is just a short script on howto place your scripts in the correct order… The trick is simple, but not obvious.
In your jQueryMobile CDN´s remove the jQuery reference, then place all wijmo references above the jQueryMobile references. This is it…

I´ve added a example of this on jsfiddle.net for you to view http://jsfiddle.net/codeplanner/5MYGm/.

Resources
http://wijmo.com/wiki/index.php/Using_Wijmo_with_Knockout
http://jquerymobile.com/download/

/Uffe

Thursday, November 1, 2012

Boost your WCF or ServiceLayer to be realtime with websockets

Today I wrote 2 examples… Both is about boosting legacy systems to be realtime, or atleast make the best of it.

Even though we all want to build things from scratch that is rarelly the case since we often have complex legacy systems with strong dependencies to other system. Not to mention the fact that lots of money has been put into these legacy systems. In most cases the architecture in the systems are great and you just want to get rid of the HTTP part since old systems is “chatty” sending lots of unnessesary data with AJAX (in best case).

Soo… Today I wrote two examples.

1: Howto boost a WCF service to be realtime… You will still have to call the service, but everybody else will be notified by websockets from the WCF. More about it + source code can be found here

2: Howto boost your existing services to be realtime without changing anything in your old architecture. Here we get a full duplex system based on a legacy architecture. More about it + source code can be found here

Regards
Uffe, Team XSockets.NET

Thursday, September 27, 2012

A proof of concept on XSockets, Wijmo, KnockoutJS, EntityFramework

 

Yesterday I developed a new application… The purpose was to show how easy it is to replace regular MVC with MVC for websockets (XSockets that is).

“The project is open source on GitHub so feel free to download and test it.”

Brief description

All my steps during development is registered in the readme.txt file so you can follow what I did.

The project has a fallback to longpolling so that it works on browsers not having websockets

The idea is to display changes between clients in real time, and to do it in an easy and smart way. To send messages with XSockets is a simple task, and together with KnockoutJS, Twitter Bootstrap and Wijmo you become a extremely efficient developer. And… you also get readable code that is easy to maintain.

If you download and run the project you will notice that stuff happends even if you did not click on anything… That´s because I added a longrunning plugin that manipulates data and triggers changes to clients. Just as a proof of concept.

Some snapshots

 

OverView

overview

Adding Person

adding

Instant Updates On All Clients

instanteUpdates

 

Regards

Uffe, Team XSockets

Tuesday, September 25, 2012

Remote control for Reveal.js with XSockets.NET

 

Yesterday I started writing a blogpost about how to create a remote control for Hakim El Hattab´s Reveal.js with XSockets.NET (websockets). After writing miles of text I realized that the post would suck big time!

Soo… what to do? Only one way to go… And that was to build the remote control as a plugin for Reveal.js. No need to say, building javascript plugins is way out of my area… But I gave it a shoot and here is the result.

“You can view/download it from github

But why… whyyyyyy?

Hakim and others has already developed stuff like this with nodejs etc, so why am I doing this? Well of course one reason is that XSockets is superior ;)

However, regarless of my feelings about XSockets I would like to use Hakims awesome tool without setting up a server, NodeJS, XSockets or whatever… So that´s why this plugin uses http://live.xsockets.net as communication platform. It´s a free Windows Azure based real time service.

Sooo, thats why :)

The goal…

was to create a plugin/extender for Reveal.js so that you only need to import some script-resources and write ONE line of code to get things running.

So last night I did some homework reading http://addyosmani.com/resources/essentialjsdesignpatterns/book/. Even though I do not understand it all (or read it all) it gave me lots of help in my task.

I believe I reached the goal (with the one-liner), but I am pretty sure that the code I wrote can be classified as near to garbage.. At least by a good JavaScript developer.

Example…

The source code is located at github (shown above), so I´ll just show you how to use it here. If you are following this example in your own project I presume that you´ve already downloaded reveal or downloaded my example (containing reveal).

1. Add references to index.html

We need references to some new js-files in Hakim´s example file index.html.
So, add the following references after the reference to reveal.

<!-- jQuery //-->
<script src="js/jquery-1.7.2.js" type="text/javascript"></script>
<!-- XSOCKETS //-->
<script src="js/json2.js" type="text/javascript"></script>
<script src="js/jXSockets.1.0.6.beta.js" type="text/javascript"></script>
 
<!-- RemoteJS //-->  
<script src="js/remoteConfig.js" type="text/javascript"></script>
<script src="js/remoteCommunication.js" type="text/javascript"></script>
<script src="js/remote.js" type="text/javascript"></script>

2. Enable remoting in the presentation


If you read Hakim´s notes you can see that you start Reveal by calling Reveal.Initialize(…)
After this is done we call the “plugin/extension” to enable remoting with Reveal.


We have two options starting the plugin.



  1. Call the plugin as shared, this will let one device control all instances of the preso world wide.


    Reveal.SetupRemote({ shared:true });

  2. Call the plugin and set a sessionId so it will be unique for every instance… So every instance can be controlled by a device.


    Reveal.SetupRemote({ sessionId: Communication.GUID() });


3. Add the remote page(s)


We have two html files on github for the remote (RemoteControl.htm and RemoteControlBusy.htm).
Just copy these pages to the same folder as Hakim´s index.html.


4. Now try it out…


If you have started the plugin with “{shared:true}” you might wanna start two instances of index.html. Remember to run the files on a webbserver so that you will get a correct origin (websocket will need it).


Since I am running on localhost I cant test the QR-code in the example, but I´ll use the link below the QR instead.


You should get something like this… Where it would be nice if the remote was an IPAD/IPHONE/ANDROID etc


xsocketsrevealjsxsocketsrevealjs2xsocketsrevealjs3


Note that you also get speaker notes in the remote :)




5. Connecting to another account or selfhosted server


As you can see below we can pass in optional parameters for connecting to another account on live.xsockets.net, or connect to a selfhosted xsockets server.



//You could also pass in new information to your own live.xsockets.net account
Reveal.SetupRemote({
    shared:true,
    config : {
        xsLiveAccount: {
            apikey: 'your api key'
        },
        xHandler: 'XSockets.Live.Realtime.API',
        wsUri: "ws://xsocketslive.cloudapp.net:10101/"
    }
});
 
//Or if you want to connect to a self hosted server
Reveal.SetupRemote({
    shared:true,
    config : {
        xHandler: 'NameOfHandler probably Generic',
        wsUri: "ws://127.0.0.1:4502/"
    }
});

 


Regards
Uffe, Team XSockets

Wednesday, September 5, 2012

XSockets.NET 2.0 – Getting started with realtimeweb

 

“We just released XSockets.NET 2.0, and feedback is our fuel”

This post will guide you through the easy steps of getting your realtime (websocket) development started. It will be short and focus on the things you need, and how to get them.

Pre Req/Info

You will need…

  • Visual Studio 2010 or Visual Studio 2012 (Other version are not tested at the moment)
  • Supported project types are MVC3/MVC4 and WebForms, but we create that in the guide.

Steps…

First of all! Open up your preferred version of Visual Studio.

1. Create a new project (MVC)

We recommend MVC since that will give you fallback support, and WebForms will not have that right now. You can ofcourse setup the fallback on a server and use WebForms in another project and get the fallback, but thats out of scope.

new_project

2. Install XSockets

  • Open up the Package Manager Console
  • Type “Install-package XSockets” and hit enter..

install_package

This will now install XSockets and its dependencies.

3. Quick look at what we got

The obvious thing is that we got 2 additional projects. XSocketHandler for writing custom plugins for the server, and XSockets.DevServer for being able to debug our serverside code. The XSockets.DevServer will be started from Application_Start in global.asax.

global.asax

You can see the fallback controller registered and also the start of the server in App_Start

4. but How do i communicate with the server?

There are several ways, but JavaScript is where we start today. You get a playground installed under PathToYourProject\XSockets\XFiddle and to make things easy, just right click on the defaul.htm in the XFidlle folder and select it as startpage for your application.

dafault.htm

5. Now lets get started…

We are actually done and the XSockets server will get started when you hit F5

”Tip: If you do not need to debug your plugins, set the XSockets.DevServer to run in release for higher speed”

This will now take us to the XFiddle page where you can see some basic demos, edit them and run your code.
You can also save you edited code in localstorage (note that you will loose this when you clear the storage).

”Tip: If you do debug you will be able to see stuff from the server in the output window of visual studio”

6. Xfiddle

xfiddle_start

XFidlle is divided into 4 sections, html, css, javascript and the output… When you click run the result will be shown in to right lower section. If you are happy with the result save it in local storage.

“You can also try http://xfiddle.net

By looking at these simple examples (selectable in the dropdown) you will get an understanding for the JavaScript API.

Current examples are:

  • Basics
    • Connecting
    • Publish/Subscribe
  • Storage (a storage persistent between connections for your client only)
    • Set
    • Get
    • GetAll
    • Remove
  • API fundamentals
    • Trigger
    • Bind
    • One
    • Many
  • Binary (you can send binary messages within XSockets)
    • Send images between clients
  • Channels (you can create private channels for 1 to x clients)
    • Create a channel
    • TBD

More examples to come (update the XSockets.Tutorial package to get them)…

Summary…

This was an short post on how to get XSockets and howto get started with the jXSockets (javascript) API. Next we will describe how you specify configurations, create a self hosted debugserver and how you create custom plugins.

“For production hosting we recommend using our Windows Service, or use our Windows Azure service at http://live.xsockets.net

Regards
Uffe
Team XSockets

Thursday, August 30, 2012

Howto use CodePlanner with MSSQL (and not Compact Edition)

I´ve got a mail today from a developer asking howto use CodePlanner with a regular MSSQL instance and not the Compact Edition that´s setup by default… Well here is how!

Psst… If you do not know CodePlanner read this http://average-uffe.blogspot.se/2012/03/codeplannercodeplannermvc3-10-released.html

___________________________________________________________

I have packed the solution and you can download it from here
It´s named CodePlannerDemo.rar

 

So here are ALL the steps I took to make it work.

  1. Create a new MVC3 project
  2. Run Install-Package CodePlanner.MVC3
  3. Remove System.Data.SqlServerCe from the references in the MVC3 project
  4. Remove the lines in web.config about SqlCE
  5. <!—<entityFramework>
    <defaultConnectionFactory type="System.Data.Entity.Infrastructure.SqlCeConnectionFactory, EntityFramework">
    <parameters>
    <parameter value="System.Data.SqlServerCe.4.0" />
    </parameters>
    </defaultConnectionFactory>
    </entityFramework>-->

  6. Add a connection string but DO NOT create a database (EF will do this for you).
    Note that the user in the connectionstring needs to have access to create databases.. I use SA
    <add name="CodePlannerDemo.Data.DataContext" connectionString="Data Source=.\sqlexpress;Initial Catalog=CodePlannerDemoDB;User Id=sa;Password=********;MultipleActiveResultSets=true;" providerName="System.Data.SqlClient" />

    Note: The name of the connectionsstring matches the Namespace and class name of the datacontext.

  7. I copied the example domain model into the CodePlannerDemo.Core.Model namespace
  8. Run Scaffold CodePlanner.ScaffoldAll
  9. Hit F5 and go to your entities... When the first query executes against the DataContext your database will be created.

Regards
Uffe

Sunday, May 6, 2012

Manipulating Visual Studio from Powershell (intro)

If you have been reading my blog before you know that I am very passionated about T4Scaffolding and generating code. This passion has created a nuget package called CodePlanner (see previous posts for info about CodePlanner). I have been getting  a lot of emails both about CodePlanner but also about how to create stuff like that... I have already written a introduction to how to get started with T4Scaffodling (http://average-uffe.blogspot.se/2011/06/basics-in-t4scaffolding-in-visual.html) so today I will show you the basics in using the Visual Studio DTE from powershell.

The goal with this introduction...

As a very easy start/intro to the subject we will just write powershell in the "Package Manager Console" to manipulate an empty Visual Studio solution. We will just add a ClassLibrary from powershell into our solution and doing it from a nuget package would be the same code.

Lets go...

PreReq

  1. Open Visual Studio and create a empty solution.
  2. Open the "Package Manager Console"Tools -> Library Package Manager -> Package Manager Console
Write Some Code...
All code below has to be written in the Package Manager Console.


#Get the path to the solution
$slnName = [System.IO.Path]::GetFilename($dte.DTE.Solution.FullName)

#Extract the path where we want to add our project
$path = $dte.DTE.Solution.FullName.Replace($slnName,'').Replace('\\','\')

#Get a reference to the solution and store it in the $sln variable
$sln = Get-Interface $dte.Solution ([EnvDTE8
0.Solution2]) 


#Get the path to the ClassLibrary template and store it in the $templatePath variable
$templatePath = $sln.GetProjectTemplate("ClassLibrary.zip","CSharp")

#Add a project to our solution with the ClassLibrary template named "MyDemoClassLib"
$sln.AddFromTemplate($templatePath, $path+'MyDemoClassLib','MyDemoClassLib')

Thats it :)


So its easy to see that you can automate very much with Powershell and also generate code using Powershell and T4. 

Regards
Uffe