Silverlight

GTasks Plus v1.0 – Open Source Windows Phone 7 Application

Max — Mon, 30 Jan 2012 09:53:49 GMT

I am happy to announce that I have open sourced and released my first Windows Phone 7 Application to Marketplace a few days back. You can get the source code from http://gtasksplus.codeplex.com/. I will also do a series of few blog posts to take you all through developing the application from scratch. Check back regularly.

Sorry for not posting anything for a long time, I have been concentrating on learning some new things and did not really get a chance to continue blogging. Will try and be consistent here after.

Thanks

Max

Technorati Tags: Wp7,windows phone 7,open source,GTasks Plus,Google tasks

Silverlight 4 Twitter Client – Part 7

Max — Thu, 29 Apr 2010 10:19:46 GMT

Download this article as a PDF

Welcome back :) This week we are going to look at something more exciting and a much required feature for any twitter client – auto refresh so as to show new status updates. We are going to achieve this using Silverlight 4 Timers and a bit and refresh our datagrid every 2 minutes to show new updates. We will do this so that we do only minimal request to the twitter api, so that twitter does not block us – there is a limit of 150 request an hour. Let us get started now. Also we will get the profile user id hyperlinked, so that when ever the user click on it, we will take them to their twitter page.

Also it was a pain to always run this application by pressing F5, then it would open in a browser you would have to right click uninstall and install it again to see any changes. All this and yet we were not able to debug it :( Now there is a solution for this to run a silverlight application directly out of browser and yet have the debug feature. Super cool, here is how.

Right on the Silverlight project and go to debug and then select the Out-Of-Browser application option and choose the *.Web project.

Then just right click on the SL project and set as Startup Project. There you go, now every time you press F5, it will automatically run out of browser and still have the debug options. I go to know about this after some binging.

Now let us jump to the core straight away.

1) To get the user id hyperlinked, we need to have a DataGridTemplateColumn and within that have a HyperLinkButton. The code for this will be

<data:DataGridTemplateColumn>

    <data:DataGridTemplateColumn.CellTemplate>

        <DataTemplate>

            <HyperlinkButton Click="HyperlinkButton_Click" Content="{Binding UserName}" TargetName="_blank" ></HyperlinkButton>

        </DataTemplate>

    </data:DataGridTemplateColumn.CellTemplate>

</data:DataGridTemplateColumn>

2) Now let us look at how we are getting this done by looking into HyperlinkButton_Click event handler. There we will dynamically set the NavigateUri to the twitter page. I tried to do this using some binding, eval like stuff as in ASP.NET, but no luck!

private void HyperlinkButton_Click(object sender, RoutedEventArgs e)

    HyperlinkButton hb = (HyperlinkButton)e.OriginalSource;

    hb.NavigateUri = new Uri("http://twitter.com/" + hb.Content.ToString(), UriKind.Absolute);

3) Now we need to switch on our Timer right in the OnNavigated to event on our SL page. So we need to modify our OnNavigated event to some thing like below:

protected override void OnNavigatedTo(NavigationEventArgs e)

    image1.Source = new BitmapImage(new Uri(GlobalVariable.profileImage, UriKind.Absolute));

    this.Title = GlobalVariable.getUserName() + " - Home";

    if (!GlobalVariable.isLoggedin())

        this.NavigationService.Navigate(new Uri("/Login", UriKind.Relative));

    else

        currentGrid = "Timeline-Grid";

        TwitterCredentialsSubmit();

        myDispatcherTimer.Interval = new TimeSpan(0, 0, 0, 60, 0);

        myDispatcherTimer.Tick += new EventHandler(Each_Tick);

        myDispatcherTimer.Start();

I use a global string – here it is currentGrid variable to indicate what is bound in the datagrid so that after every timer tick, I can rebind the latest data to it again. Like I will only rebind the friends timeline again if the data grid currently holds it and I’ll only rebind the respective list status again in the data grid, if already a list status is bound to the data grid.

In the above timer code, its set to trigger the Each_Tick event handler every 1 minute (60 seconds). TimeSpan takes in (days, hours, minutes, seconds, milliseconds).

4) Now we need to set the list name in the currentGrid variable when a list button is clicked. So add the code line below to the list button event handler

currentGrid = currentList = b.Content.ToString();

5) Now let us see how Each_Tick event handler is implemented.

public void Each_Tick(object o, EventArgs sender)

    if (!currentGrid.Equals("Timeline-Grid"))

        getListStatuses(currentGrid);

    else

        WebRequest.RegisterPrefix("https://", System.Net.Browser.WebRequestCreator.ClientHttp);

        WebClient myService = new WebClient();

        myService.AllowReadStreamBuffering = true;

        myService.UseDefaultCredentials = false;

        myService.Credentials = new NetworkCredential(GlobalVariable.getUserName(), GlobalVariable.getPassword());

        myService.DownloadStringCompleted += new DownloadStringCompletedEventHandler(TimelineRequestCompleted);

        myService.DownloadStringAsync(new Uri("https://twitter.com/statuses/friends_timeline.xml"));

If the data grid hold friends timeline, I just use the same bit of code we had already to bind the friends timeline to the data grid. Copy Paste.

But if it is some list timeline that is bound in the datagrid, I then call the getListStatus method with the currentGrid string which will actually be holding the list name.

6) I wanted to make the hyperlinks inside the status message as hyperlinks and when the user clicks on it, we can then open that link. I tried using a convertor and using a regex to recognize a url and wrap it up with a href, but that is not gonna work in silverlight textblock :( Anyways that convertor code is in the zip file.

7) You can get the complete project files from here.

8) Please comment below for your doubts, suggestions, improvements. I will try to reply as early as possible. Thanks for all your support.

Technorati Tags: Silverlight 4,Datagrid,Twitter API,Silverlight Timer

Silverlight 4 Twitter Client – Part 5

Max — Sat, 27 Mar 2010 11:03:02 GMT

In this post, we will look at implementing the following in our twitter client - displaying the profile picture in the home page after logging in. So to accomplish this, we will need to do the following steps.

1) First of all, let us create another field in our Global variable static class to hold the profile image url. So just create a static string field in that.

public static string profileImage { get; set; }

2) In the Login.xaml.cs file, before the line where we redirect to the Home page if the login was successful. Create another WebClient request to fetch details from this url - .xml">http://api.twitter.com/1/users/show/<TwitterUsername>.xml I am interested only in the “profile_image_url” node in this xml string returned. You can choose what ever field you need – the reference to the Twitter API Documentation is here.

3) This particular url does not require any authentication so no need of network credentials for this and also the useDefaultCredentials will be true. So this code would look like.

WebRequest.RegisterPrefix("http://", System.Net.Browser.WebRequestCreator.ClientHttp);

WebClient myService = new WebClient();

myService.AllowReadStreamBuffering = myService.UseDefaultCredentials = true;

myService.DownloadStringCompleted += new DownloadStringCompletedEventHandler(TimelineRequestCompleted_User);)

myService.DownloadStringAsync(new Uri("http://api.twitter.com/1/users/show/" + TwitterUsername.Text + ".xml"));

4) To parse the xml file returned by this and get the value of the “profile_image_url” node, the LINQ code will look something like

XDocument xdoc;

xdoc = XDocument.Parse(e.Result);

var answer = (from status in xdoc.Descendants("user")

              select status.Element("profile_image_url").Value);

GlobalVariable.profileImage = answer.First().ToString();

5) After this, we can then redirect to Home page completing our login formalities.

6) In the home page, add a image tag and give it a name, something like

<Image Name="image1" Stretch="Fill" Margin="29,29,0,0" Height="73" VerticalAlignment="Top" HorizontalAlignment="Left" Width="73" />

7) In the OnNavigated to event in home page, we can set the image source url as below

image1.Source = new BitmapImage(new Uri(GlobalVariable.profileImage, UriKind.Absolute));

Hope this helps. If you have any queries / suggestions, please feel free to comment below or contact me.

Technorati Tags: Silverlight,LINQ,Twitter API,Twitter

Silverlight 4 Twitter Client – Source Files

Max — Wed, 24 Mar 2010 09:35:12 GMT

Here you can download the source files this includes all the parts we have discussed and one more list feature which I am currently working on, its not fully finished. This is a VS2010 RC / SL 4 RC compliant version files, so make sure you use it with them. Will see you soon in my next post with the next part ready.

I received a few emails, saying that my tutorial is good – Thanks for all your support. A few asked for source files, here it is. All your support gives me more reasons to keep blogging!

Cheers!

Silverlight 4 Twitter Client – Part 3

Max — Tue, 16 Mar 2010 01:36:00 GMT

Finally Silverlight 4 RC is released and also that Windows 7 Phone Series will rely heavily on Silverlight platform for apps platform. its a really good news for Silverlight developers and designers. More information on this here. You can use SL 4 RC with VS 2010. SL 4 RC does not come with VS 2010, you need to download it separately and install it. So for the next part, be ready with VS 2010 and SL4 RC, we will start using them and not betas.

With this momentum, let us go to the next part of our twitter client tutorial. This tutorial will cover setting your status in Twitter and also retrieving your

1) As everything in Silverlight is asynchronous, we need to have some visual representation showing that something is going on in the background. So what I did was to create a progress bar with indeterminate animation. The XAML is here below.

<ProgressBar Maximum="100" Width="300" Height="50" Margin="20" Visibility="Collapsed" IsIndeterminate="True" Name="progressBar1" VerticalAlignment="Center" HorizontalAlignment="Center" />

2) I will be toggling this progress bar to show the background work. So I thought of writing this small method, which I use to toggle the visibility of this progress bar. Just pass a bool to this method and this will toggle it based on its current visibility status.

public void toggleProgressBar(bool Option)

    if (Option)

        if (progressBar1.Visibility == System.Windows.Visibility.Collapsed)

            progressBar1.Visibility = System.Windows.Visibility.Visible;

    else

        if (progressBar1.Visibility == System.Windows.Visibility.Visible)

            progressBar1.Visibility = System.Windows.Visibility.Collapsed;

3) Now let us create a grid to hold a textbox and a update button. The XAML will look like something below

<Grid HorizontalAlignment="Center">

    <Grid.RowDefinitions>

        <RowDefinition Height="50"></RowDefinition>

    </Grid.RowDefinitions>

    <Grid.ColumnDefinitions>

        <ColumnDefinition Width="400"></ColumnDefinition>

        <ColumnDefinition Width="200"></ColumnDefinition>

    </Grid.ColumnDefinitions>

    <TextBox Name="TwitterStatus" Width="380" Height="50"></TextBox>

    <Button Name="UpdateStatus" Content="Update" Grid.Row="1" Grid.Column="2" Width="200" Height="50" Click="UpdateStatus_Click"></Button>

</Grid>

4) The click handler for this update button will be again using the Web Client to post values. Posting values using Web Client. The code is:

private void UpdateStatus_Click(object sender, RoutedEventArgs e)

    toggleProgressBar(true);

    string statusupdate = "status=" + TwitterStatus.Text;

    WebRequest.RegisterPrefix("https://", System.Net.Browser.WebRequestCreator.ClientHttp);

    WebClient myService = new WebClient();

    myService.AllowReadStreamBuffering = true;

    myService.UseDefaultCredentials = false;

    myService.Credentials = new NetworkCredential(GlobalVariable.getUserName(), GlobalVariable.getPassword());

    myService.UploadStringCompleted += new UploadStringCompletedEventHandler(myService_UploadStringCompleted);

    myService.UploadStringAsync(new Uri("https://twitter.com/statuses/update.xml"), statusupdate);

    this.Dispatcher.BeginInvoke(() => ClearTextBoxValue());

5) In the above code, we have a event handler which will be fired on this request is completed – !! Remember SL is Asynch !! So in the myService_UploadStringCompleted, we will just toggle the progress bar and change some status text to say that its done. The code for this will be StatusMessage is just another textblock conveniently positioned in the page.

void myService_UploadStringCompleted(object sender, UploadStringCompletedEventArgs e)

    if (e.Error != null)

        StatusMessage.Text = "Status Update Failed: " + e.Error.Message.ToString();

    else

        toggleProgressBar(false);

        TwitterCredentialsSubmit();

6) Now let us look at fetching the friends updates of the logged in user and displaying it in a datagrid. So just define a data grid and set its autogenerate columns as true.

7) Let us first create a data structure for use with fetching the friends timeline. The code is something like below:

namespace MaxTwitter.Classes

    public class Status

        public Status() {}

        public string ID { get; set; }

        public string Text { get; set; }

        public string Source { get; set; }

        public string UserID { get; set; }

        public string UserName { get; set; }

You can add as many fields as you want, for the list of fields, have a look at here. It will ask for your Twitter username and password, just provide them and this will display the xml file. Go through them pick and choose your desired fields and include in your Data Structure.

8) Now the web client request for this is similar to the one we saw in step 4. Just change the uri in the last but one step to

https://twitter.com/statuses/friends_timeline.xml

Be sure to change the event handler to something else and within that we will use XLINQ to fetch the required details for us. Now let us how this event handler fetches details.

public void parseXML(string text)

    XDocument xdoc;

    if(text.Length> 0)

        xdoc = XDocument.Parse(text);

    else

        xdoc = XDocument.Parse(@"I  USED MY OWN LOCAL COPY OF XML FILE HERE FOR OFFLINE TESTING");

    statusList = new List<Status>();

    statusList = (from status in xdoc.Descendants("status")

                  select new Status

                      ID = status.Element("id").Value,

                      Text = status.Element("text").Value,

                      Source = status.Element("source").Value,

                      UserID = status.Element("user").Element("id").Value,

                      UserName = status.Element("user").Element("screen_name").Value,

                  }).ToList();

    //MessageBox.Show(text);

    //this.Dispatcher.BeginInvoke(() => CallDatabindMethod(StatusCollection));

    //MessageBox.Show(statusList.Count.ToString());

    DataGridStatus.ItemsSource = statusList;

    StatusMessage.Text = "Datagrid refreshed.";

    toggleProgressBar(false);

in the event handler, we call this method with e.Result.ToString() Parsing XML files using LINQ is super cool, I love it.

I am stopping it here for this post. Will post the completed files in next post, as I’ve worked on a few more features in this page and don’t want to confuse you. See you soon in my next post where will play with Twitter lists. Have a nice day!

Technorati Tags: Silverlight,LINQ,XLINQ,Twitter API,Twitter,Network Credentials

Silverlight Twitter Client - Part 1

Max — Sat, 27 Feb 2010 22:41:34 GMT

Hi,

Just as I promised a few months back, here is my tutorial for developing a simple Silverlight Twitter client. I was battling to get this done, but in the mean time I decided to attend the Sydney Silverlight User Group. I met Brendan there and he has helped me a lot to accomplish this. Thanks to him and SDDN. The basis of this tutorial is derived from the technique as prescribed in here. So let's get started without any further delay. In this post, we will look into creating the necessary UI elements for Login page.

Software Requirements:

Visual Studio 2010 Beta 2 Ultimate – Note you need beta 2 and not RC, as for SL4 it's compatible only with Beta 2. Get it here.
Download Silverlight 4 beta tools from here.

Name it something and say yes when it asks to create a Web project.
Now this type of project would create a skeleton for you to play around, which is fantastic, you don't have to do all the hacks we used to do in SL version 2 and lower.
Now add a new Silverlight page to Views folder, by right clicking and choosing add > new item and say Silverlight Page and name it "Login.xaml".
Now go to MainPage.xaml, which is the xaml for the main page. Goto the first element within the <uriMapper:UriMapper> change the first element to something like this below which says what is the default page that gets loaded when the application runs. Here we are saying that it is the Login page.
<uriMapper:UriMapping Uri="" MappedUri="/Views/Login.xaml"/>
Now go to stackpanel which holds the hyperlinks in the MainPage.xaml and add this to the beginning of the existing "home" hyperlink.
<HyperlinkButton x:Name="Login" Style="{StaticResource LinkStyle}"
NavigateUri="/Login" TargetName="ContentFrame" Content="Login"/>
<Rectangle x:Name="Divider1" Style="{StaticResource DividerStyle}"/>
Now let us dive into the UI for Login page. I've used the legendary grid for positioning my elements in here. This what the Login page will look like.
There should be a grid there named LayoutRoot, within that, let us create a Grid with 4 rows and 2 columns. The basic ideology of grids in SL is that, you create the layout first and then say for each control in the page to be within which column and row of the grid.
<Grid Height="120" Width="212" HorizontalAlignment="Center" VerticalAlignment="Center">

<Grid.RowDefinitions>

</Grid.RowDefinitions>

<Grid.ColumnDefinitions>

</Grid.ColumnDefinitions>

</Grid>

All the elements that need to be within this grid must be within the Grid node. And each of those elements will have Grid.Column and Grid.Row to specify the column and row numbers.
Here comes the individual Login block element, you can always use the powerful designer to drag and position your controls. Because of that, you will have funny margins in the controls.
<TextBlock Foreground="White" HorizontalAlignment="Center" FontSize="20" Text="Login" Grid.Column="1" Margin="21,0,155,0"></TextBlock>
<TextBlock HorizontalAlignment="Left" Foreground="White" Grid.Row="1" Grid.Column="0" VerticalAlignment="Center" Width="Auto">Username</TextBlock>
<TextBox Width="150" Name="TwitterUsername" Grid.Row="1" Grid.Column="1" HorizontalAlignment="Left"></TextBox>
<TextBlock Grid.Row="2" Grid.Column="0" HorizontalAlignment="Left" Foreground="White" VerticalAlignment="Center" Width="Auto">Password</TextBlock>
<PasswordBox Grid.Row="2" Grid.Column="1" Width="150" Name="TwitterPassword" HorizontalAlignment="Left"></PasswordBox>
<Button Name="btnTwitterCredentialsSubmit" Grid.Row="3" HorizontalAlignment="Center" Width="105" Click="btnTwitterCredentialsSubmit_Click" Content="Submit" Margin="0,0,125,0" Grid.Column="1"></Button>
I think I am gonna stop it here for now, blog post is becoming too lengthy. I think this tutorial will go for at least 10 posts. So catch you soon in the next post with more information. In the next part, we will setup a global class to storing and accessing the username and password, retrieving your friends status updates, no access to few pages if the user is not logged in, set your status. We will add more features to make it a more feature rich.
Here is the complete Login.xaml and the completed MainPage.xaml.
If you've any comments / suggestions / questions, please leave a feedback for contact me.

Silverlight Tutorial Part 1

Max — Fri, 27 Nov 2009 10:34:59 GMT

Welcome to the first part of the Silverlight 3 tutorial. I know SL4 Beta is out, but if you have your fundamentals right, versions are not a problem, just a little bit of study will keep you abreast of the latest version. Here are some prerequisites for this tutorials. Remember, our ultimate aim here is to create a Twitter client from Silverlight.

Softwares required:

1) Visual Studio 2008 with SP1

2) Silverlight 3 Tools for VS2008 - here

3) Silverlight 3 SDK – here

4) Expression Blend 3 – I am not a designer myself, but still its a wonderful and worth exploring, I will throw a bit of light on this.

Knowledge requirements (I assume these):

1) Familiarity with .Net Framework programming and C# – I’ll be using C# for this tutorials.

Now lets us start jump right into the tutorial.

1) Once you install the above said softwares, you can go to New > Project and choose C# > Silverlight App, like below

2) Now after you do this, it will ask you this, you can choose Website and Application, it really does not matter here. As this is more to do with deployment.

3) Now by default, it will create the MainPage.xaml.cs. Just create a new button by typing <But and choose <Button from the intellisense, then add a content, which can be compared as “Text” to other WPF and ASP.NET textbox property.

4) Now add the click event handler, when you do this, VS2008 will automatically create the event handler for you. So just go to code behind view and in there, create a alert box using MessageBox.Show method.

private void Button_Click(object sender, RoutedEventArgs e)
{
    MessageBox.Show("Hello World.");
    Button1.Content = "Hello World";
}

5) Voila, run it and you should be able to see the Silverlight in a browser. Click button and there you go!

See you in the next tutorial! Comment below for any doubts or clarifications / issues.

Technorati Tags: Silverlight

Our plan for the next few months…

Max — Wed, 25 Nov 2009 10:35:43 GMT

We look to learn the Silverlight, WPF and ASP.NET MVC 2 over the next few months. We’ll start developing a data driven application to explore each one of these. I am now in the process of finding a sample database for use.

We will start our tutorials from next week. Stay tuned until then.

Technorati Tags: ASP.NET,MVC,Silverlight,WPF