Showing posts with label HTML5. Show all posts
Showing posts with label HTML5. Show all posts

Thursday, December 26, 2013

jQuery Tips: Develop infinite scrolling

[Originally posted on http://onlyms.net]
This simple below JQuery code can use for infinite scrolling. Just look into it, its extremely simple and easy task. Just follow below codes

Java Script
Include JQuery file as below:

< scri pt sr c="js/ jquery-1.10.2.js">

    < sc ript src="js/jquery-1.10.2.min.js">
and java script code as :


        $ ( func tion () {
            $(win dow) .scr oll(fu nction (ev ent) {
                cons ole.log($(".lo ad-more").off set().top < $(wi ndow).scroll Top() + $(win dow).outer Height()); // You can track if result is true or false
                if ($(". load-more").off set().top < $(win dow).scroll Top() + $(window).outer Height() == true) {
                    //Method to load next page
                }
                else {
                    //Do nothing or do as you want
                }
            });
        });
    < / sc ript


CSS section as below, just used for selector. You can update if you need.

        .load-more {
        }
    </ sty l e


HTML part as below:

< d iv>
    < text area style="wi dth: 50%; hei ght: 110vh;">
    This is to fill full screen, so load more button go to invisible section
< / text area>
    < in put clas s="load-more" val ue="load more" typ e="button" />
</ d iv>



Sunday, December 22, 2013

Hello World with SignalR

[Original Post from my blog OnlyMS.Net for better visibility read it from OnlyMS.Net]  

Programming with distributed technology is my passion. Earlier I have worked with Remoting, Socket, Web Service and a bit with WCF. So when I first came to know about SignalR technolog, really I can not wait to start coding on it. Now I can able to write own chat application for AlapMe and really its working fine. Most of all by using SignalR I can use socket of HTML5. I shall write multiple posts on SignalR as tutorial as I did in past with C# Socket programming. I shall publish these posts on this blog and on my socket programming blog as well.

I have started SignalR programming with Visual Studio Express 2013 which is freely downloadable from here. Also you can read full documentation from Microsoft from this link. As my target to share some practical example with ready to use code hence I shall not describe in detail about the technology. You can follow Microsoft documentation website for it. 

To start with SignalR first coding you need to follow steps are below.
Lunch your VS 2013 and create a blank project and add new item of SignalR Hub Class (v2) set its name as you wish, for my case its MyHub.cs. When you will add this class Visual Studio automatically add all related references and jquery classes. To add these things it may take some time may be 2-3 minutes. This new item will come with a sample method 'Hello()', for now just follow these later I shall describe what is these things and why these are. Full code will look like below:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using Microsoft.AspNet.SignalR;
namespace SignalR_Learning
{
    public class MyHub : Hub
    {
        public void Hello()
        {
            Clients.All.hello();
        }
    }
}


Now go to next step and add next item in project, that is OWIN Startup class. I am giving its default name 'Startup1.cs' for my sample project. Visual Studio will create this file with some pre-added code. We will extend these code as per your needs. Code as below:

 

using System;
using System.Threading.Tasks;
using Microsoft.Owin;
using Owin;
[assembly: OwinStartup(typeof(SignalR_Learning.Startup1))]
namespace SignalR_Learning
{
    public class Startup1
    {
        public void Configuration(IAppBuilder app)
        {
            // For more information on how to configure your application, visit http://go.microsoft.com/fwlink/?LinkID=316888
        }
    }
}
 In method Configuration I shall add just a line of code 'app.MapSignalR();' so full method will look like:

 

public void Configuration(IAppBuilder app)
{
    // For more information on how to configure your application, visit http://go.microsoft.com/fwlink/?LinkID=316888
    app.MapSignalR();
}
 Now we will move to front end coding and this part will develop with simple HTML page, however you can use ASPX page as well. Now I have added a HTML page with name 'index.html'

  < me ta http-equiv="X-UA-Compatible" content="IE=edge" / >

    < ! --Script references. -->
    < ! --Reference the jQuery library. -->
    < s cript src="Scripts/jquery-1.10.2.js">< / scr ipt>
    < s cript src="Scripts/jquery-1.10.2.min.js">< / scr ipt>   
    < s cript src="Scripts/json2.js"></ scr ipt>
    < ! --Reference the SignalR library.  - - >
    < s cript src="Scripts/jquery.signalR-2.0.0.js">< / scr ipt>
    < s cript src="Scripts/jquery.signalR-2.0.0.min.js">< / scri pt>
    < ! --Reference the autogenerated SignalR hub script. - - >
    "/signalr/hubs">
    < ! --Add script to update the page and send messages.-- >

 < s cript type="text/java scri pt" >

        var chat;
        $(function () {
            // Declare a proxy to reference the hub.
            //chat = $.hubConnection.myhub;
            chat = $.connection.myhub;
            //alert(chat);
            chat.client.hello = function (message) {
                alert(message);
            };
            // Start the connection.
            $.connection.hub.start().done(function () {
                $('#btnhello').click(function () {                   
                    alert(chat);
                });
            });
        });
< / scr ipt> 
 < in put ty pe="button" value="Hello" id="btnhello" / >

 

 Thank you for visiting my blog.

 

Monday, December 16, 2013

Mobile App development with PhoneGap

[Original Post from my blog OnlyMS.Net]

I am now starting to get into mobile app development and to start mobile app development using a suitable tool, I choose PhoneGap. I choose PhoneGap because to develop mobile app using PhoneGap I do not need to learn anything new as I know HTML, JavaScript, CSS and these things are using here to develop any mobile app for iOS, Android, Windows, Blackberry, Bada etc mobile OS.

To start PhoneGap first install node.js from here.
Next go to command line in your windows and type following (link here)
C:\> npm install -g phonegap

It will start installing the software.


Read full learning from here and can read basic stuff from  here.

Tuesday, November 26, 2013

jQuery Ajax: Create HTML Table with User details at Client based on Server Data

[This post initially posted on my MS Technical blog here. Visit http://onlyms.net for better readability]. 

I am sharing information on JQuery-AJAX on ASP.Net in incremental order to learn it properly. In last post on this topic I shared information about how to change some HTML control based on server data using jQuery. Now I shall share information how to create a user data list or table with some data which is coming from server. Here I am taking example of some user data with one image. In my project I am using one sample JPG image with IMG folder in project (available in 1st post attached project on that topic). 

Step 1: Create back-end server code to provide data. Look carefully at below server code to prepare a web-service [webmethod] method.


[WebMethod]public static string CreateUserList(){        List<object> user = new List<object>();        user.Add(new { Id = "10", Name = "A", Image = "img/sample.jpg" });        user.Add(new { Id = "20", Name = "B", Image = "img/sample.jpg" });        user.Add(new { Id = "30", Name = "C", Image = "img/sample.jpg" });        user.Add(new { Id = "40", Name = "D", Image = "img/sample.jpg" });
        return (new JavaScriptSerializer().Serialize(user));
}
In the above code I am creating a List object with property ID, Name and Image. For my case ID and Name is different but all are same image. In real life project you can change it with some different image name. I am adding these user data into List object and finally I am serializing the array/list to send it to client as JSON data format.  Using below line of code:

return (new JavaScriptSerializer().Serialize(user));
Step 2: Prepare HTML section as below:
< fo rm id="form1" runat="server">    
        jQuery Ajax: Create HTML Table with User details at client based on server data.


        
        < t able id="tblList">
        
        "btnClick" type="button" value="Click Me!" />    

In this HTML code I have declared a HTML Table where I shall append rows to design a table with server provided user data. The button will be used to invoke server method using JQuery. HTML section is extremely easy and simple.

Step 3: Invoke server webmethod/web service using JQuery AJAX.



"server">
"js/jquery-1.9.1.js">

< scr ipt type="text/javasc ript">    $(document).ready(function () {
        $("#btnClick").click(function () {
            $.ajax({                type: "POST",                url: "ArrayToList.aspx/CreateUserList",             
                contentType: "application/json; charset=utf-8",                dataType: "json",
                success: function (msg) {
                    var user = eval(msg.d);                    $.each(user, function () {                        $("#tb lList").app end("
User Id: "
+ thi s.Id + ",Name:"
+ this.Name + "< i m g al t= '' hei ght ='100' sr c='"
+ this.Image + "' /></ t r>");                    });                }            });        });    });
</ he ad>

Here I am coping full HEAD section where I have called JQuery 1.9.1 and then have written JQuery code (to know more about these part on each step by step from here). Here I am calling 'CreateUserList' web method and on successful AJAX call 'Success:' will executed where main table design will performed.
All JSON data will come at client as serialized and it will be parsed by eval() method based on message's properly. Next it will start looping with 'each' method will concatenate string with column value like 'this.Id','this.Name','this.Image'. Here need to note that Id, Name and Image was the column/parameter name in List. Finally this concatenated string is adding or appending at as row in declared table.

The whole thing will look like below image in browser.



Get source code from below attached files.
Thank you for reading my blow, please comeback again for next post, how to create a user search list as like facebook.

Saturday, November 16, 2013

JQuery-AJAX: Change a HTML control name from server



I want to share a very basic and simple but a bit advance sample code on ASP.Net Ajax using JSON and JQuery. Now I want to change a control name or text based on server response data.

To demonstrate this thing I shall change my clicked button name based on server. This type of sample code is very easy to learn and you can use similar concept to develop solution for lots of requirement. Say you are developing some code where you have a button to 'Like' but after clicking on it the button  name will change to 'Unlike', or in a social network one user will start following some group or person; so when user will click on 'Follow' button will be changed to 'Following' etc.
Lets have a look in to the code:

HTML for this solution as below -
in put id="btnClick" type="button" value="Click Me!"

Here button 'btnClick' text will be changed. Next look into the back-end C# code.


[WebMethod]
public static string ChangeButtonNameJQuery(string btnName)
{     
      return btnName+ " - changed from Server";
}



Very simple Web Method or WebService in page 'ChangeButtonName.aspx'. To declare a page method as WebService we need to use namespace 'System.Web.Services', which I have used in using namespace section. Besure this method is 'static' type and its 'public'. Return type of webservice is string and invoking with one string parameter 'btnName'.

Now look at the jQuery code.



"js/jquery-1.9.1.js">
"text/javascript">
      $(document).ready(function () {
            $("#btnClick").click(function () {               
                
                $.ajax({
                    type: "POST",
                    url: "ChangeButtonName.aspx/ChangeButtonNameJQuery",
                    data: JSON.stringify({ btnName: $("#btnClick").val() }),
                    contentType: "application/json; charset=utf-8",
                    dataType: "json",
                    success: function (msg) {                       
                        $("#btnClick").val(msg.d);                       
                    }
                });
            });
        });

I have used here Jquery version 1.9.1 and calling my method when document becomes ready to execute which will call just after loading completion of page.



$(document).ready(function ()
{
}

the above code is doing this thing (to know details about Jquery Ajax calling from ASP.Net, read my 1st post on Jquery-Ajax). In my present code We are calling web method 'ChangeButtonNameJQuery' from current page (ChangeButtonName.aspx/ChangeButtonNameJQuery). Once successful web method execution client browser is getting response and invoking method 'success:' with response in object 'msg'. We can access server response from 'msg' property 'd' by using 'msg.d' and that I am setting to change button value, by


$("#btnClick").val(msg.d);

I hope you have enjoyed this post and has helped to learn little more on ASP.Net ajax using JQuery. Continue reading my next blog post to know more on Ajax using JQuery.

Thank you for visiting my blog. Happy coding.

Wednesday, July 17, 2013

Small File Transfer Client to Client (via Server) using C#.Net socket programming



After long days I am writing this article and this is the complete package of these all articles about file transfer from one computer to another. Till now I have shown how to transfer file from client to server or server to client. But now I am merging these two things and creating one single application which can send data/file from one client to another client. It seems data is going directly from one client to another but actually it’s rotating via Server, I will explain here these things.

I am planning to stop this article series on Socket Programming in Desktop using C#.Net here for now and ignoring large file transfer sample from client to client because now a day is era of Web Programming. Long ago I tried to write code in web application with socket but I failed because web and desktop is totally different type of architecture. 

But in HTML5 is very powerful and it has introduced new thing to develop socket programming on web as well. In HTML5 there has Web Socket and using Web Socket Micorsoft has created SignalR which will be my next attraction of discussion. I shall try to explain and shall create multiple applications including Web Chat, message broadcasting system using these technologies. 

Before going to discuss Client to Client application I would like to recap earlier two post:


I am trying to explain how these were working.

   File Transfer from Client to Server

Server
Client
1. Server creates an IP End Point and a socket object then bind socket object with IP end point and sends it to listen mode for incoming client request.








5. Server receive client request and accept it. Once connection established, server create another socket object which will handle this client all requests until connection ends. Client will be informed internally by TCP about connect success.

6. Start preparations to store incoming byte data from client.



8. Server receives file byte data along with file name and stores it in byte array.

9. Server retrieve file name from byte data.

10. Server opens a binary stream writer with file name to store byte data in it. 

11. Once file save complete server closes binary stream writer and server socket objects.



14 Server program ends here.



2. Client creates an IP End Point and a socket object. 

3. Prepare byte data from file which will be sent to server.

4. Try to connect to server using client socket by help of IP end point.









7. Client starts sending byte data over connected socket.











12. Once data transfer complete and server closes socket connection, client also close client socket object.

13. Client program work ends here.



File Transfer from Client to Server
Server
Client
1. Server creates an IP End Point and a socket object then bind socket object with IP end point and sends it to listen mode for incoming client request.





4. Server receive client request and accept it. Once connection established, server create another socket object which will handle this client all requests until connection ends. Client will be informed internally by TCP about connect success.




6. Prepare byte data from file which will be sent to client.

7. Server starts sending byte data over connected socket.











12. Once data transfer complete and client closes socket connection, server also close server socket object.

13. Server program work ends here.



2. Client creates an IP End Point and a socket object.

3. Try to connect to server using client socket by help of IP end point.







5. Start preparations to store incoming byte data from server.






8. Client receives file byte data along with file name and stores it in byte array.

9. Client retrieve file name from byte data.

10. Client opens a binary stream writer with file name to store byte data in it.

11. Once file save complete client closes binary stream writer and server socket objects.






14. Client program work ends here.

So from these two tables it’s clear that in (1) Client to Server data transfer and (2) Server to Client program server and client is doing just like opposite execution.
 


When we transfer file over internet one client cannot connect to another directly because maximum client do not use static/global IP, so they cannot reach over other internet location directly. So to transfer file from client to client need server help. Server stays internet with a static IP which is accessible globally.  We will use server as temporary storage and to connect other client via server. Overall architecture will be as below:



In above picture, Client A is trying to send file to client B and both are taking help of Server in between to make connection. Client A and B both are inaccessible from outside internet because these are may be in DHCP inside a LAN or its IP has generated by some other local router. So both will connect to server and transfer data.
Now follow below communication chart to understand how data will be transferred. This chart is combination of first two chart. 


      Data Transfer      -- > -------------->-----------------------> -------------->----------------------->
Client A
Server
Client B





2. Client-A create IP End Point and a socket object.



4. Client A Prepare byte data from file which will be sent to server.

5. Client A tries to connect server using client socket by help of IP end point.





















8. Connection established with client A and server.







11. Client A starts sending byte data over connected socket.





































20. Client A receive file transfer success message from server.







22. Socket object closes and dispose.





24. Client A process ends here.
1. Server creates an IP End Point and a socket object then bind socket object with IP end point and sends it to listen mode for incoming client request.

















7. Server receives two client requests and accept these. Once connection established, server create new socket object for each connection (here total two, suppose sockObjectA for Client A and sockObjectB for Client B). These will handle client’s all requests until connection ends. Client will be informed internally by TCP about connect success. In our case sockObjectA will receive data and sockObjectB will send data.
For real life application can use socket object list (say array list or hash table) with some hash table to track client name and socket object name.






10. Start preparations to store incoming byte data from client A through sockObjectA.




12. Server receives file byte data along with file name and stores it in byte array. For large file can store in temporary file but I would suggest to store in array for faster processing. 

13. Server starts sending byte data over connected socket sockObjectB to client B.






















19. Server receive EOF successful message from client B and pass information to client A about file transfer success.





21. Server initiate to disconnect socket connection for sockObjectA and sockObjectB, so connection break with server and client A and B.
















26. Server process ends here for my case. For real life project server will stay in listen mode for next client request.








3. Client B creates IP End Point and a socket object.








6. Client B tries to connect server using client socket by help of IP end point.




















9. Connection established with client A and server.

















14. Client B receives file byte data along with file name and stores it in byte array.

15. Client retrieve file name from received byte data.

16. Client opens a binary stream writer with file name to store byte data in it.

17. Once file save complete client (do some technique to understand End Of File - EOF) closes binary stream writer and server socket objects.

18. Send a message to server to inform client A about file transfer success.


















23. Socket object closes and dispose.






25. Client B process here.
If you send large file then logic will be same and you need to loop step 11 to 20 until file ends. Here I have used EOF and then can use some fixed data packet every time. So once each packet receive in Client B, it will inform that successful receive of packet number and ask server to send next packet. 

For large file server will store file temporarily because connection speed in client A and B may not be same. Client A can send much faster data but client B may get it very slow. So buffering concept need to implement in server.

If possible I shall write this code in future.

Now I am posting this logic next will write code and once finish will post it for you with downloadable source code.