blackcj.com » Twitter http://www.blackcj.com/blog Cutting edge development with Adobe Flex, ActionScript and AIR Thu, 15 Dec 2011 01:01:57 +0000 en hourly 1 http://wordpress.org/?v=3.3 Skimmer http://www.blackcj.com/blog/2009/03/24/skimmer/ http://www.blackcj.com/blog/2009/03/24/skimmer/#comments Tue, 24 Mar 2009 06:51:25 +0000 Chris Black http://www.blackcj.com/blog/?p=275 “A lifestreaming thing that lets you see it all in one place”

Skimmer. The next Adobe AIR app and the hard work of many individuals over the past 6 months. It has been amazing to see this application turn from design into reality. This is a summary of the technologies used and some of the lessons learned throughout the development of Skimmer:

Skimmer

Skimmer

The first decision was easy. Use an MVC framework, more specifically PureMVC. This application was estimated in the thousands and having a backbone was very important. We spent the extra time upfront developing a solid structure which ended up helping out immensely when it came to bug fix and adding new features. Creating new views became a snap when the data providers that accessed third party API’s were completed.

The second major decision was to use a SQLite database to store content locally. This allowed for fast filtering of data and pre-processing of information. It also greatly improved the load time of the application since we only needed to gather new information.

Thirdly, we decided to use image caching for all of the commonly used images to improve load times. This increased the application start up and allows for fluid transitions between images in slide shows. By extending a bulk loader class Skimmer is able to first check the local cache before making any requests to the internet for images.

One of the major challenge was working with the third party API’s. The API’s for Flickr, YouTube, Twitter, TwitPic, Facebook and Blogger had varying levels of documentation and support. Flickr had the most feature rich API while Facebook had the most difficult API to work with. Many of them had third party AS3 libraries to use for interfacing with the service that we used as a base.

Another challenge was in skinning the flex components. The application was not designed to look like an AIR application, which is a good thing :) This, however, did create some interesting problems along the way. We used a combination of CSS, class inheritance, overrode drawing methods, and even created some custom flex components.

You can download skimmer here:
http://www.fallon.com/skimmer

A shout out to everyone that made this happen:
AL KELLY, BRENDA FOGG, CHRIS WIGGINS, DAVID SCHWEN. EXTENDED TEAM: ANDY GUGEL, SIERRA BRAVO, ANDREW WATSON, BEN DOLMAR, BLAGVOST DACHEV, CLAYTON SMITH, JON REXEISEN, KARSTEN LUNDQUIST, KONR NESS, KRIS SZAFRANSKI, MARK SEEMANN, MANISH SHRESTHA, MATT TONAK, MICHAEL WOODS, MINH VU, ROBB THOMAS, THOMAS O’NEILL.

Feel free to post any comments or questions you have about Skimmer.

http://mashable.com/2009/03/24/skimmer/

]]> http://www.blackcj.com/blog/2009/03/24/skimmer/feed/ 18 Display TwitPic Images in Flex & AIR http://www.blackcj.com/blog/2009/02/23/display-twitpic-images-in-air-or-anywhere/ http://www.blackcj.com/blog/2009/02/23/display-twitpic-images-in-air-or-anywhere/#comments Tue, 24 Feb 2009 00:50:37 +0000 Chris Black http://www.blackcj.com/blog/?p=230 Problem:
The TwitPic API does not currently support outgoing requests and the image source from amazon aws contains an AWS AccessKeyId, expiration time stamp, and signature. This would normally require a regular expression to rip the source JPG path out of the HTML. Ripping the source out of the HTML is a bit of a pain and is not a long term solution. It is possible to use the following shortened url to gain access to the full image path using the TwitPic image id.

Solution:
Use this url to gain access to the full http://twitpic.com/show/full/s0z4.jpg and thumbnail http://twitpic.com/show/thumb/s0z4.jpg images (replace the s0z4 with your image id). Notice that this shortened path returns the longer url that would normally have to be ripped out of the HTML to gain access to the image.

PLAIN TEXT
HTML:
  1. <mx:HTTPService
  2.     id="rssParse"
  3.     url="php/twitpic.php"
  4.     result="processResult(event)"
  5.     resultFormat="e4x" />

PLAIN TEXT
PHP:
  1. <?php
  2.   $twitter_feed = 'http://twitpic.com/photos/chrisjblack/feed.rss';
  3.   $rawfeed = @file_get_contents($twitter_feed);
  4.   print $rawfeed; 
  5. ?>

PLAIN TEXT
Actionscript:
  1. import mx.collections.ArrayCollection;
  2. import mx.rpc.events.ResultEvent;
  3.  
  4. [Bindable]
  5. private var _rssResults:ArrayCollection;
  6.  
  7. // Define and use atom namespace.
  8. private namespace atom = "http://www.w3.org/2005/Atom";
  9. use namespace atom;
  10.  
  11. private function processResult(event:ResultEvent):void
  12. {
  13.     var xmlList:XMLList = event.result.channel.item as XMLList;
  14.     for each(var item:XML in xmlList){
  15.         // Formatt the date
  16.         var myDate:String = item.pubDate;
  17.         myDate = myDate.slice(0,22);
  18.        
  19.         // Pull the image id out of the link url
  20.         var imageId:String = item.link;
  21.         imageId = imageId.replace("http://twitpic.com/", "");
  22.        
  23.         // Push the results into our data array
  24.         _rssResults.addItem({title: item.title, date: myDate, id: imageId});
  25.     }
  26. }
  27.  
  28. private function init():void
  29. {
  30.     _rssResults = new ArrayCollection();
  31.     rssParse.send();
  32. }

PLAIN TEXT
HTML:
  1. <mx:VBox width="900" height="500" horizontalAlign="center"> 
  2.     <mx:Label styleName="subTitleText" text="Twitter Feed:" fontWeight="bold" fontSize="16"/>
  3.     <mx:VBox height="450" width="800" verticalScrollPolicy="auto" horizontalScrollPolicy="off" horizontalAlign="center">
  4.         <mx:Repeater id="twitter" dataProvider="{_rssResults}">
  5.             <mx:Text textAlign="center" width="300" text="{twitter.currentItem.date}"/>
  6.             <mx:Text textAlign="center" width="300" text="{twitter.currentItem.title}"/>
  7.             <mx:Image source="http://twitpic.com/show/thumb/{twitter.currentItem.id}.jpg" />
  8.             <mx:Image source="http://twitpic.com/show/full/{twitter.currentItem.id}.jpg" />
  9.         </mx:Repeater>     
  10.     </mx:VBox> 
  11. </mx:VBox>

This allows for Adobe AIR applications to post to (Post to TwitPic from Adobe AIR) and retrieve images from TwitPic.

View Sample / Source Files

Links:
TwitPic Previewer

]]> http://www.blackcj.com/blog/2009/02/23/display-twitpic-images-in-air-or-anywhere/feed/ 2 10 Steps to Improve Your Online Presence http://www.blackcj.com/blog/2009/01/09/10-steps-to-improve-your-online-presence/ http://www.blackcj.com/blog/2009/01/09/10-steps-to-improve-your-online-presence/#comments Fri, 09 Jan 2009 21:16:01 +0000 Chris Black http://www.blackcj.com/blog/?p=159 I've read a number of blog posts about 10 things not to do or 6 reasons why you should do something and I'm finally giving in to the idea of an ordered list as a blog post.  One of the pitfalls of the ordered list approach is that everyone is different.  The only way everyone could possible benefit from all 10 steps is if they are so vague that they read like a horoscope.  We all know that 'design patterns have a time and place.'  They cause problems when not used correctly.  I swear it still hits everyone's top whatever list.  Does something that vague really help anyone?  I feel like I'm reading today's horoscope whenever I see that.

Enough ranting for one day. Back to the topic at hand. Ten things you can do to improve your online presence. Before you read any further write down the type of business your in. What do you do? Who is your target market? Will an online presence even help you? These are things you need to figure out on your own or pay someone to figure out for you. This list will not help you until you know the basics. And there is not a pre-prescribed method for determining the basics.

1. Obviously, Get a Web Page
Or is it that obvious? Why do most people fail at this simple step? Think about this: You have a company with 15 employees who all sit at a desk. Would you buy an office building that can hold 1,000? Not unless you know something I don't. Simply put, start simple. Build a static page, make it look professional and grow your web page with the company over time (for example PSDTemple). Facebook didn't start with apps, photos, and videos. They started simple and restricted the user base. Don't assume it's a one time cost. The more you try to do at once the higher likelihood that it will fail. Grow your web page with your business. As always there is a friendly web development company near you.

2. Get a Twitter Account
It's easy, it's free and will improve your SEO tremendously if used correctly. Post company updates, links to press releases, or even just random tidbits. Link your twitter page to your web page. Take advantage of Twitters strong online presence to help out your company.

3. Get a Facebook Account, Right? Wrong!
Next logical step is to move to the next social networking site? NO, at least in most cases. Facebook is for people. Unless your a Freelancer it really doesn't benefit to have a Facebook page (if you are a freelancer or working for yourself than get a Facebook account, now!). Maybe a Facebook app though? (for example Sacrifice Your Friends). Maybe your company needs a Facebook fan page? Look at your target market list. What would they want? What would they use?

4. Start a Blog
A regularly updated blog will improve traffic to your site, you can be pretty much sure of that. Again, who is your target market? What would they be interested in hearing? Check out Sierra Bravo's blog for a great example of marketing towards your customers: Nerdery Blog. Most blog services are FREE. I personally recommend WordPress. Using WordPress, your blog could even be your website. Save some time and money but still get professional results.

5. Track Analytic Data for Your Site
How will you ever know if any of these steps are working? Google Analytics, it's free and easy to use. Find out what keywords your getting, and which ones your not. Determine how many people are visiting your site from Twitter or viewing your blog. Don't just stop at Google Analytics. Most hosting companies provide AWStats or WebLog as well. I find that AWStats is better for tracking unique hits / bots and Google Analytics is better for keywords / data presentation.

6. Help People
If your company makes web pages, join a web forum and answer peoples questions. Create an account on Yahoo answers and help people with problems. Join Linkedin and participate in the discussion groups. Nothing says online presence like helping someone else in need. Just make sure to put a link to your webpage, twitter account, or blog at the bottom. It helps you and will let them find out more about your company and services. If you helped them solve a simple problem for free who do you think they will call when they need a complex problem solved?

7. Contribute to Open Source Projects
This one is more IT related and I must admit I have not participated in any open source projects to date. I do, however, see the value in them and plan to contribute in the future.

8. Buy Some Ad-Words
Notice that most of the items I've listed so far have been FREE. It's amazing how few people realize that online presence has very little to do with money. This one is not free but very useful. Buy up some keywords in Google Ads. You will probably never see the light of day on a search result for 'pet food' unless you pay for the advertisement. Facebook advertisements are a great way to target specific people based on their profile information.

9. Time
Only time will build your online presence. All of these items will help expedite the process but as with everything in life, there is no guarantee. You may be in the business of making money but I assure you that time will be on your side if you truly attempt to help the internet community. If you are nice to the internet it will be nice back to you.

10. Don't Assume Design Patterns will Always Make Your Life Easier
You can't have a top 10 list without this one :) Please just read this wikipedia article.

I would love to hear any other suggestions on improving online presence. Here is your chance to help out others and start promoting your online presence today! How cheesy did that just sound? I feel like I'm selling a book. This is what I get for creating an ordered list blog post...

A few companies highlighted in this post:

Twitter
Sierra Bravo
Facebook
PSDTemple
Burger King
Google
WordPress

Related Posts:
101 Tips to Improve Your Web Presence

]]> http://www.blackcj.com/blog/2009/01/09/10-steps-to-improve-your-online-presence/feed/ 3 Validate Twitter Credentials in AIR http://www.blackcj.com/blog/2008/12/21/validate-twitter-credentials-in-air/ http://www.blackcj.com/blog/2008/12/21/validate-twitter-credentials-in-air/#comments Sun, 21 Dec 2008 22:21:42 +0000 Chris Black http://www.blackcj.com/blog/?p=131 Problem:
Your AIR application needs to validate the username / password and handle failure gracefully within the application. If the user enters the wrong information you do not want them to be prompted with a windows prompt asking them to enter their Twitter username / password. If the application needs to hold on to the credentials for any reason the windows authentication to the API will break the AIR application.

"The server twitter.com at Twitter API requires a username and password."

Windows Authentication Pop-up Message.

Windows Authentication Pop up message.

Solution:
The URLRequest object has a property called 'authenticate' that must be set to false.

PLAIN TEXT
Actionscript:
  1. /**
  2. *
  3. * Setting result.authenticate to false prevents the operating system from
  4. * taking over and prompting the user to authenticate.  It allows the AIR
  5. * application to take the correct action.
  6. *
  7. */  
  8. private function twitterRequest (url : String):URLRequest
  9. {
  10.     var result:URLRequest = new URLRequest (url);
  11.     if (this.authorizationHeader){
  12.         result.authenticate = false;  // <--------- Most Important Line of Code!!!!
  13.         result.requestHeaders = [this.authorizationHeader]; 
  14.     }
  15.     return result;
  16. }

Most of the code from the example attached below is from the Google code repository:

http://code.google.com/p/twitterscript/

Here are the source files to an example AIR application that uses actionscript to verify Twitter credentials without prompting a windows box on failure:

Source Files

I would like to give credit to Clayton (file_cabinet) for coming up with the solution to this problem. Thanks Clayton!

]]> http://www.blackcj.com/blog/2008/12/21/validate-twitter-credentials-in-air/feed/ 7 Post to TwitPic from Adobe AIR http://www.blackcj.com/blog/2008/11/20/post-to-twitpic-from-adobe-air/ http://www.blackcj.com/blog/2008/11/20/post-to-twitpic-from-adobe-air/#comments Fri, 21 Nov 2008 00:19:44 +0000 Chris Black http://www.blackcj.com/blog/?p=103 TwitPic is a service that lets you share photos on Twitter by generating a tiny url to the image being uploaded. The flash.filesystem.File class allows Adobe AIR to post an image to TwitPic. By specifying the username, password and posting method it is possible to submit a query to the TwitPic API.

PLAIN TEXT
Actionscript:
  1. package com.cb.twitpic
  2. {
  3.     import flash.events.DataEvent;
  4.     import flash.events.Event;
  5.     import flash.filesystem.File;
  6.     import flash.net.FileFilter;
  7.     import flash.net.URLRequest;
  8.     import flash.net.URLRequestMethod;
  9.     import flash.net.URLVariables;
  10.    
  11.     public class TwitPic
  12.     {
  13.         private var _file:File;
  14.        
  15.         public function TwitPic()
  16.         {
  17.             _file = new File();
  18.             _file.addEventListener(DataEvent.UPLOAD_COMPLETE_DATA,uploadCompleteDataHandler);
  19.             browse();
  20.         }
  21.         private function browse():void {
  22.             _file.addEventListener(Event.SELECT, fileSelected);
  23.             _file.browse( new Array( new FileFilter( "Images (*.jpg, *.jpeg, *.gif, *.png)", "*.jpg;*.jpeg;*.gif;*.png" ) ) );
  24.         }
  25.        
  26.         private function fileSelected(event:Event):void {
  27.             var urlRequest:URLRequest = new URLRequest("http://twitpic.com/api/upload");
  28.            
  29.             // The API requires the request be sent via POST
  30.             urlRequest.method = URLRequestMethod.POST;
  31.            
  32.             // Enter a valid Twitter username / password combination
  33.             var urlVars:URLVariables = new URLVariables();
  34.             urlVars.username = TWITTER_USERNAME;
  35.             urlVars.password = TWITTER_PASSWORD;
  36.             urlRequest.data = urlVars;
  37.            
  38.             // The API requires the file be labeled as 'media'
  39.             _file.upload(urlRequest, 'media');
  40.         }
  41.        
  42.         private function uploadCompleteDataHandler(event:DataEvent):void
  43.         {
  44.             var resultXML:XML = new XML(event.text);
  45.            
  46.             // Trace the path to the resulting image tiny url (mediaurl)
  47.             trace(resultXML.child("mediaurl")[0]);
  48.         }
  49.     }
  50. }

This can be used within an AIR application by importing TwitPic and initializing the class.

Sample Code
http://www.blackcj.com/PostTwitPicFromAIR.zip

]]> http://www.blackcj.com/blog/2008/11/20/post-to-twitpic-from-adobe-air/feed/ 17 FlexFeed: Twitter RSS Feeds in Flex http://www.blackcj.com/blog/2008/10/04/flexfeed-integrate-twitter-rss-feeds-into-flex/ http://www.blackcj.com/blog/2008/10/04/flexfeed-integrate-twitter-rss-feeds-into-flex/#comments Sat, 04 Oct 2008 20:29:12 +0000 Chris Black http://www.blackcj.com/blog/?p=3 Using Flex and PHP it is possible to integrate Twitter RSS feeds into a Flex web page. Twitters cross domain policy (which is used by Flash) does not allow external resources to access feeds. Using PHP as a medium to the data, Flex can access the feed and display all contents. This technique can be used to access any xml data that Flex may not have access to.

Let's start by creating an HTTPService:

PLAIN TEXT
HTML:
  1. <mx:HTTPService
  2.     id="rssParse"
  3.     url="http://twitter.com/statuses/user_timeline/16584421.rss"
  4.     result="processResult(event)"
  5.     resultFormat="e4x" />

Next we will create the function to process the results:

PLAIN TEXT
Actionscript:
  1. import mx.collections.ArrayCollection;
  2. import mx.rpc.events.ResultEvent;
  3.  
  4. [Bindable]
  5. private var _rssResults:ArrayCollection;
  6.  
  7. // Define and use atom namespace.
  8. private namespace atom = "http://www.w3.org/2005/Atom";
  9. use namespace atom;
  10.  
  11. private function processResult(event:ResultEvent):void
  12. {
  13. var xmlList:XMLList = event.result.channel.item as XMLList;
  14. for each(var item:XML in xmlList){
  15. var myDate:String = item.pubDate;
  16. myDate = myDate.slice(0,22);
  17. _rssResults.addItem({title: item.title, date: myDate});
  18. }
  19. }
  20.  
  21. private function init():void
  22. {
  23. _rssResults = new ArrayCollection();
  24. rssParse.send();
  25. }

Now lets add the mxml to display the content:

PLAIN TEXT
HTML:
  1. <mx:VBox width="400" height="600" horizontalAlign="center"> 
  2.     <mx:Label styleName="subTitleText" text="Twitter Feed:" fontWeight="bold" fontSize="16"/>
  3.     <mx:VBox height="500" width="400" verticalScrollPolicy="auto" horizontalScrollPolicy="off" horizontalAlign="center">
  4.         <mx:Repeater id="twitter" dataProvider="{_rssResults}">
  5.             <mx:Text textAlign="center" width="300" text="{twitter.currentItem.date}"/>
  6.             <mx:Text textAlign="center" width="300" text="{twitter.currentItem.title}"/>
  7.         </mx:Repeater>     
  8.     </mx:VBox> 
  9. </mx:VBox>

After testing the application locally everything works great! But wait... what about the PHP code? Well first export a release build of the application and upload it to a web server for testing.

Here is the error that you should recieve:
[RPC Fault faultString="Security error accessing url" faultCode="Channel.Security.Error" faultDetail="Destination: DefaultHTTP"]

To get around this let's create a php file that collects the twitter data:

PLAIN TEXT
PHP:
  1. $twitter_feed = 'http://twitter.com/statuses/user_timeline/16584421.rss';
  2. $rawfeed = @file_get_contents($twitter_feed);
  3. print $rawfeed;

Now we need to update our HTTPService request to pull from the new php file:

PLAIN TEXT
HTML:
  1. <mx:HTTPService
  2.     id="rssParse"
  3.     url="php/twitter.php"
  4.     result="processResult(event)"
  5.     resultFormat="e4x" />

Now everything works great!

Check out this link to view a functional example:
http://www.blackcj.com/FlexFeed/index.html

And the source files:
http://www.blackcj.com/FlexFeed/srcview/index.html

Please leave a comment if you have any questions, comments, or suggestions. Thanks!

]]> http://www.blackcj.com/blog/2008/10/04/flexfeed-integrate-twitter-rss-feeds-into-flex/feed/ 11