DZone
Mobile Zone
Thanks for visiting DZone today,
Edit Profile
  • Manage Email Subscriptions
  • How to Post to DZone
  • Article Submission Guidelines
Sign Out View Profile
  • Post an Article
  • Manage My Drafts
Over 2 million developers have joined DZone.
Log In / Join
  • Refcardz
  • Trend Reports
  • Webinars
  • Zones
  • |
    • Agile
    • AI
    • Big Data
    • Cloud
    • Database
    • DevOps
    • Integration
    • IoT
    • Java
    • Microservices
    • Open Source
    • Performance
    • Security
    • Web Dev
DZone > Mobile Zone > Browser app with bit.ly shortening for Windows Phone 7

Browser app with bit.ly shortening for Windows Phone 7

Denzel D. user avatar by
Denzel D.
·
Sep. 09, 10 · Mobile Zone · Interview
Like (0)
Save
Tweet
8.03K Views

Join the DZone community and get the full member experience.

Join For Free

The mobile version of Internet Explorer is not really extendable and this has its reasons – security, stability and general reliability. Therefore, developers don’t really have the “keys” to extending the built-in browser. However, there are many workarounds to this, including the possibility to develop your own browser app that is based on the same IE core, but with custom functionality.

This is done with the help of the WebBrowser control that is available in the default Toolbox. In this article, I am going to show how to create a browser application that incorporates bit.ly shortening and allows the end-user to share the link via email.

First of all, I created a simple Windows Phone 7 application and edited the contents of the main XAML file to represent a page with a WebBrowser control, a TextBox where the user will enter the URL and a Go button.

I also added the Application Bar (displayed at the bottom when the application is running), where I placed the Shorten button.

The overall XAML markup for the page looks like this:

<phone:PhoneApplicationPage
    x:Class="WindowsPhoneTest.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
    xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    FontFamily="{StaticResource PhoneFontFamilyNormal}"
    FontSize="{StaticResource PhoneFontSizeNormal}"
    Foreground="{StaticResource PhoneForegroundBrush}"
    SupportedOrientations="Portrait" Orientation="Portrait"
    mc:Ignorable="d" d:DesignWidth="480" d:DesignHeight="696"
    shell:SystemTray.IsVisible="True">
    
    <Grid x:Name="LayoutRoot" Background="Transparent">
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>

        <TextBlock Grid.Row="0" Height="30" Margin="10,10,420,10" Text="URL:"></TextBlock>
        <TextBox x:Name="urlBox" Grid.Row="0" Margin="50,0,100,0" Text="http://"></TextBox>
        <Button Grid.Row="0" Margin="360,0,0,0" Content="GO" Click="Button_Click"></Button>

        <phone:WebBrowser Grid.Row="1"   Name="webBrowser"  />
    </Grid>
    
    <phone:PhoneApplicationPage.ApplicationBar>
        <shell:ApplicationBar IsVisible="True">
            <shell:ApplicationBarIconButton x:Name="getBitLy" Click="getBitLy_Click" IconUri="/Images/bitly.png" Text="Shorten"></shell:ApplicationBarIconButton>
        </shell:ApplicationBar>
    </phone:PhoneApplicationPage.ApplicationBar>
</phone:PhoneApplicationPage>

The image I am referencing for the Application Bar button is a sample bit.ly logo – you can either download one or use any other image. It will be automatically framed in a circle and resized accordingly when you reference it as IconUri (given that it is present in your project).

The code part is a bit more complicated, but at the same time it is easily understandable.

For the Go button, the procedure is simple:

if (!string.IsNullOrEmpty(urlBox.Text.Trim()))
{
    if (Uri.IsWellFormedUriString(urlBox.Text, UriKind.Absolute))
    {
        webBrowser.Navigate(new Uri(urlBox.Text));
    }
    else
    {
        MessageBox.Show("Invalid URL string. Make sure you are using the www prefix.","Invalid URL",MessageBoxButton.OK);
    }
}
I am making sure that a correctly-formatted URL is entered before the navigation occurs.

When the user clicks on the Shorten button, you need to actually find out whether there is a URL to shorten. Since this functionality is directly tied to the WebBrowser control, you need to check whether there is a URL to which the WebBrowser control already navigated.

This is done inside the getBitLy_Click event handler:

if (webBrowser.Source != null)
{
    // The validation passed - there is a correct URI present
}
else
{
    // No valid URI - nothing to shorten
    MessageBox.Show("URL cannot be shortened.\nYou need to open a web page first.", "Shorten URL", MessageBoxButton.OK);
}

When the user decides to shorten an inexistent URL, he will be prompted with a popup message:

The actual shortening is done in two parts. The triggering part and the asynchronous part, that will obtain the server response. The triggering part looks like this:

enum Format
{
    XML,
    JSON,
    TXT
}

enum Domain
{
    BITLY,
    JMP
}

void ShortenUrl(string longURL,
    string username, string apiKey, Format format = Format.XML, Domain domain = Domain.BITLY)
{
    string _domain;

    // Build the domain string depending on the selected domain type
    if (domain == Domain.BITLY)
        _domain = "bit.ly";
    else
        _domain = "j.mp";

    HttpWebRequest request = (HttpWebRequest)WebRequest.Create(
        string.Format(@"http://api.bit.ly/v3/shorten?login={0}&apiKey={1}&longUrl={2}&format={3}&domain={4}",
        username, apiKey, HttpUtility.UrlEncode(longURL), format.ToString().ToLower(), _domain));

    request.BeginGetResponse(new AsyncCallback(GetResponse), request);
}

There are two enums that define allowed domains and return formats. The API call is structured the way you see it passed to the request. Eventually, you will need a bit.ly API key for your application to perform the shortening, so make sure you have a bit.ly account (can be created at no cost).

As you see, the response is obtained through an AsyncCallback that is referencing the GetReponse method.

void GetResponse(IAsyncResult result)
{
    XDocument doc;
    HttpWebRequest request = (HttpWebRequest)result.AsyncState;
    HttpWebResponse response = (HttpWebResponse)request.EndGetResponse(result);

    using (StreamReader reader = new StreamReader(response.GetResponseStream()))
    {
        doc = XDocument.Load(reader.BaseStream);
    }
    
    var x = from c in doc.Root.Element("data").Elements() where c.Name == "url"
            select c;

    XElement n = ((IEnumerable<XElement>)x).ElementAt(0);

    EmailComposeTask task = new EmailComposeTask();
    task.Subject = "Shortened Link";
    task.Body = n.Value;
    task.Show();
}

First of all, it reads the response and presents it in a form of XDocument (I selected XML as the return format) and then I read the URL element. Of course, you can add error handling here, since there is a slight chance one time the phone won’t be connected and it might cause an issue. But right now I am just showing the idea behind my method.

All you have to do now is create a request to the bit.ly API by calling ShortenUrl:

ShortenUrl(webBrowser.Source.AbsoluteUri, USER_NAME, API_KEY); 

Once the URL is obtained, it will be shared through the built-in email application. Although you cannot test it directly on the emulator, you are able to do this on an actual Windows Phone 7 device.

If you want to learn more about URL shortening via bit.ly in a .NET application, take a look at this article.

Windows Phone mobile app

Opinions expressed by DZone contributors are their own.

Popular on DZone

  • A Complete Guide About Scaled Agile Framework (SAFe)?
  • Three Mantras for Effective Standup Meetings
  • What Is SSO and Why Do You Need It?
  • Growth in Java Development for Web and Mobile Apps

Comments

Mobile Partner Resources

X

ABOUT US

  • About DZone
  • Send feedback
  • Careers
  • Sitemap

ADVERTISE

  • Advertise with DZone

CONTRIBUTE ON DZONE

  • Article Submission Guidelines
  • MVB Program
  • Become a Contributor
  • Visit the Writers' Zone

LEGAL

  • Terms of Service
  • Privacy Policy

CONTACT US

  • 600 Park Offices Drive
  • Suite 300
  • Durham, NC 27709
  • support@dzone.com
  • +1 (919) 678-0300

Let's be friends:

DZone.com is powered by 

AnswerHub logo