Microsoft BUILD 2011 Keynote #1

Microsoft keynote featuring Steven Sinofsky, Mike Angiulo and Julie Larson-Green talking about Windows 8.

Android Tip: Enable a progress bar for a WebView

This is how you enable a progress bar when loading web pages using a WebView in Android:

final Activity activity = this;

     

    @Override

    public void onCreate(Bundle savedInstanceState) {

        super.onCreate(savedInstanceState);

        getWindow().requestFeature(Window.FEATURE_PROGRESS);

        setContentView(R.layout.main);

     

       

        String url = "http://m.bing.com";

        WebView web = (WebView) findViewById(R.id.mainView);

             web.getSettings().setJavaScriptEnabled(true); 

             web.getSettings().setBuiltInZoomControls(true);

             web.getSettings().setUseWideViewPort(true);

              web.setWebChromeClient(new WebChromeClient() {

                  public void onProgressChanged(WebView view, int progress) {

                        activity.setProgress(progress * 100);

                  }

              });

             web.loadUrl(url);

       

    }

Note: requestFeature() must be call before any other content is added (call it right after super.onCreate).

Mango Beta 2 for WP7 available for developers

I received an invitation to participate in the WP7's Mago 'Beta 2' program; unfortunately, I don't have a WP7 device (I use the emulator to develop). So, at least it seems that MS may be ready to roll out the first WP7.5 aka Mago phones by the end of the year.

How to connect to a SQL server database in c#

The following code snippet will show you how to query an SQL Server database in C# using ADO.NET.

Namespaces you will need to include:

using System.Data;

using System.Data.SqlClient;

Source Code:

SqlConnection conn = new SqlConnection("Data Source=Server Name;UID=User Name;PWD=Password;Initial Catalog=Database Name");

           SqlCommand command = new SqlCommand("SELECT TOP 100 * FROM  tbl_Users",conn);

           DataTable dt = new DataTable();

            command.Connection.Open();

           SqlDataAdapter adapter = new SqlDataAdapter(command);

           adapter.Fill(dt);

           adapter.Dispose();

           command.Connection.Close();

           command.Dispose();

           foreach (DataRow dr in dt.Rows)

           {

               Console.WriteLine(dr["FirstName"].ToString()+" "+dr["LastName"].ToString());

           }

Breakdown

Initialize a SqlConnection object by passing you server connection string as a parameter. Then, initialize a SqlCommand object which you can use it to execute a SQL query or a stored procedure (We passed the SqlConnection object as an additional parameter).  I will be retrieving a set of data from the sample query; so, I need either a DataSet or DataTable object to store the result. Next, we initialize a SqlDataAdapter object that will serve us as a bridge between the SqlCommand and the DataTable (we passed the SqlCommand object as a parameter). Finally, we simply open a connection and call the Fill() method to retrieve our result. 

.NET Rocks Podcast

Software development podcasts are a great way to keep up with the always changing tech industry.

.NET Rocks Podcast is my favorite podcast about software development and not because I work with .NET but overall quality of the show is presented. The show is hosted by Carl Franklin and Richard Campbell; where they conducts a weekly interview to  industry experts such as Scott Guthrie and Billy Hollis.

To listen:

http://www.netcastia.com/dotNETRocks

or

http://www.dotnetrocks.com/

Remove read only attribute of a file in C#

To manipulate file attribute in C# we can use the System.IO.FileInfo class.

So, let’s say that we have a “Read Only” file located at C:\temp\test.jpg what we need to modify; however, we need to remove the “Read Only” attribute before we can continue.

Here is how to do it:

  FileInfo file = new FileInfo(@"C:\temp\test.jpg");

  file.Attributes = file.Attributes & ~FileAttributes.ReadOnly;

The above sample uses the bitwise operator in order to remove the “Read Only” attribute while ensuring that all other attributes that the file may have are not also removed during this operation.

Create Thumbnails with the C# Image Class

Here is a quick tutorial on how to create thumbnail images using the System.Image class.

First let’s create a Windows Form project.

Then add a Button control and a PictureBox control.

Now add a click event to the Button control.

private void button1_Click(object sender, EventArgs e)

{

   Image img = Image.FromFile(@"C:\folder\sampleImage.jpg");

   this.pictureBox1.Image = img.GetThumbnailImage(120, 120,

new Image.GetThumbnailImageAbort(ThumbnailCallback),

IntPtr.Zero);

}

public bool ThumbnailCallback()

{

   return true;

}

First, we need an empty method (ThumbnailCallback)  to pass to the GetThumbnailImageAbort delegate. Then, we simply create an Image object (I am using the FromFile method referencing a local file). Finally, assign the image to the PictureBox control to display it.

Let's run it:

Now click "Load Image":

JavaScript rollover images

Here is a quick tutorial to show you a function to make JavaScript rollovers.

The function

var devc = {

            rollover: function (id, img1, img2) {

                this.addEvent(id, 'mouseover', function () {

                    $(id).src = img2;

                });

                this.addEvent(id, 'mouseout', function () {

                    $(id).src = img1;

                });

            },

            addEvent: function (id, _event, _function) {

                _object = $(id);

                if (_object.addEventListener) {

                    _object.addEventListener(_event, _function, false);

                } else if (_object.attachEvent) {

                    if (_event.length > 2) {

                        if (_event.substring(0, 2) != "on") {

                            _event = 'on' + _event;

                        }

                    }

                    _object.attachEvent(_event, _function);

                }

            }

        };

I added the addEvent function from our previous post for convenience; however, you can see the original post from the link in the resource section of this post.

The rollover function simply adds two functions to the onmouseover and onmouseout events. The JavaScript on mouse over assigns image 2 to the image object and onmouseout adds image 1 to the image object.

Usage:

JavaScript

window.onload = function () {

            devc.rollover('roll', 'star.png', 'starover.png');

        };

HTML

<img id='roll' src="star.png" />

Using JavaScript to Change Opacity of an Object

I will show you how to change the opacity value of an object using JavaScript. I will create a function that can be use in conjunction with the animation function posted earlier (see resources below).

The function is simple

  var developercaster = {

             opacity: function (id, opacity) {

                var o = $(id).style;

                o.opacity = (opacity / 100);

                o.MozOpacity = (opacity / 100);

                o.KhtmlOpacity = (opacity / 100);

                o.filter = "alpha(opacity=" + opacity + ")";

            }

}

See usage example:

Set opacity to 0 on object id = ‘i’

developercaster.opacity(’i’, 0);

However, the function by itself is not as useful but when combined with our previously posted animation function it can be a neat tool to have. So, I will add two of our extra functions to this example:

var developercaster = {

             opacity: function (id, opacity) {

                var o = $(id).style;

                o.opacity = (opacity / 100);

                o.MozOpacity = (opacity / 100);

                o.KhtmlOpacity = (opacity / 100);

                o.filter = "alpha(opacity=" + opacity + ")";

            },

            animate: function (params) {

                var speed = Math.round(params.speed / 1000);

                var timer = 0;

                if (params.start > params.end) {

                    for (var i = params.start; i >= params.end; i--) {

                        (function (i, _f, speed, timer) {

                            setTimeout(function () { _f(i); }, (timer * speed));

                        })(i, params.func, speed, timer);

                        timer++;

                    }

                } else if (params.start < params.end) {

                    for (var index = params.start; index <= params.end; index++) {

                        (function (i, _f, speed, timer) {

                            setTimeout(function () { _f(i); }, (timer * speed));

                        })(index, params.func, speed, timer);

                        timer++;

                    }

                }

                //Callback

                if (typeof (params.callback) != 'undefined') {

                    if ((typeof (params.callback) == 'function')) {

                        window.setTimeout(function () {

                            params.callback(); //Execute callback

                        }, (speed * timer));

                    }

                }

            },

            addEvent: function (id, _event, _function) {

                _object = $(id);

                if (_object.addEventListener) {

                    _object.addEventListener(_event, _function, false);

                } else if (_object.attachEvent) {

                    if (_event.length > 2) {

                        if (_event.substring(0, 2) != "on") {

                            _event = 'on' + _event;

                        }

                    }

                    _object.attachEvent(_event, _function);

                }

            }

        };

Usage example:

JavaScript

        window.onload = function () {

            developercaster.opacity('i', 0);

            developercaster.addEvent('show', 'click', function () {

                developercaster.animate({

                    speed: 5000,

                    start: 0,

                    end: 100,

                    func: function (i) {

                        developercaster.opacity('i', i);

                    }

                });

            });

            developercaster.addEvent('hide', 'click', function () {

                developercaster.animate({

                    speed: 5000,

                    start:100,

                    end: 0,

                    func: function (i) {

                        developercaster.opacity('i', i);

                    }

                });

            });

        };

HTML

<input name="show" type="button" value="Show Object" />&nbsp;

<input name="hide" type="button" value="Hide Object" />

 <div id="i" style="width:300px; height:200px; border:1px solid #333333;background-color:Red">

        Box

</div>

See demo here

Resources:

Dollar function source code: here

AddEvent original post: here

Animate function previous post: here

MIX11 WP7 "Help Turn This Fan-Made Windows Phone Video into a Real TV Ad"

Load an External JavaScript File Dynamically

Let’s say that you have an external JavaScript Library that is used in some instances but not needed all the time so you wonder how you can load this file only when needed. Here is a short code snippet that will help you dynamically load JavaScript file using none other than 

JavaScript itself.

The first time I needed this feature I fell into the trap of using the XMLHttpRequest object (AJAX route) with the evil eval() function; I don’t need to explain why this is not safe (hint: cross site scripting attack).

var developercaster = {

            script: function (_src) {

                var tag = document.createElement('script');

                tag.setAttribute('type', 'text/javascript');

                tag.setAttribute('src', _src);

              

                document.getElementsByTagName('head')[0].appendChild(tag);

            }

        };

The breakdown

Create new “script” tag using document.createElement, set the “type” and “src” attributes, and finally append it to the “head” element (yes, it’s that simple).

Usage

Let’s create an external JavaScript file called “getLocation.js” and add the following function to it:

var getLocation = {

    current:window.location.href

};

Now to load the “getLocation.js” file dynamically we would proceed as follows:

<script language="javascript" type="text/javascript">

    window.onload = function () {

            if (typeof getLocation == 'undefined') {

                developercaster.script('getLocation.js');

            }

            alert(getLocation.current);

        };

      

</script>

Augmenting functions in JavaScript

This trick comes from Douglas Crockford’s JavaScript the good parts book (a must read); which, pour some syntactic sugar on our JavaScript code.

First we extend the global Function object via prototypal inheritance with a new method called "method". This method will allows us to skip the prototype call every time we need to extend an object. 

  Function.prototype.method = function (name, _function) {

        this.prototype[name] = _function;

        return this;

    };

And we are done.

Usage:

  <script language="JavaScript" type="text/JavaScript">

        function mainOperation() {

            this.main = 'main';

        }

        mainOperation.method('callMain', function () {

            alert('hi '+this.main);

        });

        window.onload = function () {

            var m = new mainOperation();

            m.callMain();

        };

     </script>

First we created a new object called "mainOperation()". Then, we augmented this object with the method "callMain" by using our new "method" property. Finally, to demonstrate what we just did we create on the window.onload a new instance of "mainOperation" and called the new "callMain" method.   

Output:

Recommended Reading:

JavaScript: The Good Parts