Nearly every major API provider uses OAuth for the user authentication and while it is easy to understand the concept, using it in a Windows Phone app isn’t pretty straightforward. So for this quick tutorial we will be using RestSharp for WP7 and the API from getglue.com (an entertainment site) to authorize the user.
So the first step is to get the OAuth request token and then we redirect our browserControl to the authorization URL
private void StartLogin()
{
var client = new RestClient("https://api.getglue.com/");
client.Authenticator = OAuth1Authenticator.ForRequestToken("ConsumerKey", "ConsumerSecret");
var request = new RestRequest("oauth/request_token");
client.ExecuteAsync(request, response =>
{
_oAuthToken = GetQueryParameter(response.Content, "oauth_token");
_oAuthTokenSecret = GetQueryParameter(response.Content, "oauth_token_secret");
string authorizeUrl = "http://getglue.com/oauth/authorize" + "?oauth_token=" + _oAuthToken + "&style=mobile";
Dispatcher.BeginInvoke(() =>
{
browserControl.Navigate(new Uri(authorizeUrl));
});
});
}
private static string GetQueryParameter(string input, string parameterName)
{
foreach (string item in input.Split('&'))
{
var parts = item.Split('=');
if (parts[0] == parameterName)
{
return parts[1];
}
}
return String.Empty;
}
Then we listen to the browser’s Navigating Event
private void Navigating(Microsoft.Phone.Controls.NavigatingEventArgs e)
{
if (e.Uri.AbsoluteUri.Contains("oauth_callback"))
{
var arguments = e.Uri.AbsoluteUri.Split('?');
if (arguments.Length < 1)
return;
GetAccessToken(arguments[1]);
}
}
private void GetAccessToken(string uri)
{
var requestToken = GetQueryParameter(uri, "oauth_token");
var client = new RestClient("https://api.getglue.com/");
client.Authenticator = OAuth1Authenticator.ForAccessToken(ConsumerKey, ConsumerSecret, _oAuthToken, _oAuthTokenSecret);
var request = new RestRequest("oauth/access_token");
client.ExecuteAsync(request, response => {
AccessToken = GetQueryParameter(response.Content, "oauth_token");
AccessTokenSecret = GetQueryParameter(response.Content, "oauth_token_secret");
UserId = GetQueryParameter(response.Content, "glue_userId");
});
}
Now to test it we can access the user’s friends list
var client = new RestClient("http://api.getglue.com/v2");
client.Authenticator = OAuth1Authenticator.ForProtectedResource(ConsumerKey, ConsumerSecret, GAccessToken, AccessTokenSecret);
var request = new RestRequest("/user/friends");
request.AddParameter("userId", UserId,ParameterType.GetOrPost);
// request.AddParameter("category", "all",ParameterType.GetOrPost);
client.ExecuteAsync(request, response =>
{
TreatFreindsList();
});
And that’s it now we can access all OAuth methods using RestSharp.
Creating the Project
We shall start with creating the project. In Flash Builder go to File > New > Flex Mobile Project and name it "TweetDeck" > Finish. For the template select the second one : View-Based Application. Flash Builder will create a new View named "TweetDeckHomeView.mxml" which will be the first one in our Project. Its in this View that the work will be done.
Placing the elements
Before we see every bit of the interface in detail, we will make a "skeleton" of our View. Here is the main Interface of the TweetDeck application on Android
Evidently,the application is composed of 3 main parts , vertically.Here we are not using the standard "ViewNavigator" hence we are not using the ActionBar.For deleting the actionBar, we use the propriety "actionBarVisible" of the View object which we are going to change to "false".
Here is the skeleton of the app with rectangles of colors :
<?xml version="1.0" encoding="utf-8"?>
<s:View xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark"
actionBarVisible="false">
<s:layout>
<s:VerticalLayout gap="0" />
</s:layout>
<s:Rect width="100%" height="40">
<s:fill>
<s:SolidColor color="0xFF0000" />
</s:fill>
</s:Rect>
<s:Rect width="100%" height="100%">
<s:fill>
<s:SolidColor color="0xFF0FF0" />
</s:fill>
</s:Rect>
<s:Rect width="100%" height="80">
<s:fill>
<s:SolidColor color="0xFFFF00" />
</s:fill>
</s:Rect>
</s:View>
After testing in the emulator , here is the result :
Many mobile apps define a texture as a background.Especially those on tablets like the iPad.
So to make your app more appealing you can add a Background Texture to your app.Fortunately Blackberry provided us with a Class in their GitHub Sample Called Background(source code in Listing)
1: /*
2: * Copyright (c) 2011 Research In Motion Limited.
3: *
4: * Licensed under the Apache License, Version 2.0 (the "License");
5: * you may not use this file except in compliance with the License.
6: * You may obtain a copy of the License at
7: *
8: * http://www.apache.org/licenses/LICENSE-2.0
9: *
10: * Unless required by applicable law or agreed to in writing, software
11: * distributed under the License is distributed on an "AS IS" BASIS,
12: * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
13: * See the License for the specific language governing permissions and
14: * limitations under the License.
15: */
16:
17: package samples.ui.components {
18:
19: import flash.display.Bitmap;
20:
21: import qnx.ui.core.Containment;
22: import qnx.ui.core.SizeUnit;
23: import qnx.ui.core.UIComponent;
24:
25:
26: public class Background extends UIComponent {
27:
28: private var _bg:Bitmap;
29:
30: /**
31: * Create a background that can be added to a component.
32: * @param classType - pass a png image class.
33: */
34: public function Background(classType:Class):void
35: {
36: var obj:Object = new classType();
37: _bg = obj as Bitmap;
38:
39: __height = _bg.height;
40: size = __height;
41: sizeUnit = SizeUnit.PIXELS;
42: containment = Containment.BACKGROUND;
43: }
44:
45: /**
46: * Set the size of the background
47: * @param width - number for background width
48: * @param height - number for background height
49: */
50: public override function setSize(width:Number, height:Number):void
51: {
52: __width = width;
53: if (_bg) {
54: __height = height;
55: invalidate();
56: }
57: }
58:
59: protected override function draw():void
60: {
61: if (_bg) {
62: with (graphics) {
63: clear();
64: beginBitmapFill(_bg.bitmapData);
65: moveTo(0,0);
66: lineTo(width, 0);
67: lineTo(width, height);
68: lineTo(0, height);
69: lineTo(0, 0);
70: endFill();
71: }
72: __height = _bg.height;
73: }
74: __width = width;
75: }
76: }
77: }
So to use it we need a PNG Background (I always go with wooden texture)
- Insert the background into your assets package
- Add this definition in your UIComponent class (eg: View)
1: [Embed(source="assets/YourBackgroundHere.png")]
2: private var imgClass:Class;
3: var background:UIComponent= new Background(imgClass);
- Add this background to the container you want to skin
That’s it
and here is an example :
If you don’t know TweetDeck , it’s a very popular app to check Twitter. It is created with Adobe Air for the Desktop versions(Windows,Mac) and native for mobile.
TweetDeck was integrated to twitter.Inc in Mai 2011. Its success is due to the columns of tweets.
What we are going to see in this tutorial :
- Creation of TweetDeck like UI with columns
- Skinning components
- Getting tweets using Twitter service (without authentication)
- Using States
- Showing the time of the tweet when scrolling
- Horizontal Scroll
What we’re not going to see
- Anything that uses authentication (Oauth v2)
- Composing Tweets
- Listing friends
- Following others
I will be starting a long Adobe Flex Series that I will be translating from the French site http://www.flex-tutorial.fr.
In the end of series you will end up with a full-fledged TweetDeck like app coded in 60 minutes.
Changing layout when the device orientation change is so common in many mobile apps that one might think it is automatic.But unfortunately it isn’t.
Given Adobe FLEX multiplatform nature it is wrong to listen to device OrientationChange but you should listen to resize Events.
First step , Add this code snippet to your view :
1: import mx.events.ResizeEvent;
2:
3: protected function application1_resizeHandler(event:ResizeEvent):void
4: {
5: if (width>height)
6: this.currentState="landscape";
7: else this.currentState="portrait";
8: }
Of course you need to listen to call this method every time the view changes its size.You do this by adding resize Listener to your View declaration
1: <s:View ..... resize="application1_resizeHandler(event)" >
Then we need to add two states that we can use to dynamically modify our orientation
1: <s:states>
2: <s:State name="portrait"/>
3: <s:State name="landscape"/>
4: </s:states>
Then we should use either the Design mode in Flash Builder or manually do the orientation Change.For Example i tell the TileLayout to lay its content in columns if in landscape or in row if in portrait:
1: <s:TileLayout id="Tiles" orientation.landscape="columns" orientation.portrait="rows" horizontalGap="0" verticalGap="0"/>
So that’s it and this was my first blog. Over.