blackcj.com » CSS 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 Skinning Flex Components – Part 1: CSS http://www.blackcj.com/blog/2009/01/06/skinning-flex-components-part-1-css/ http://www.blackcj.com/blog/2009/01/06/skinning-flex-components-part-1-css/#comments Wed, 07 Jan 2009 05:50:19 +0000 Chris Black http://www.blackcj.com/blog/?p=146 This will be a three part series on skinning Flex components. For part one I have chosen to desolve the myth that Flex 3 can't truly cascade styles. This three part series will start simple and get more complex with each post. You can use this code to mimic descendant selectors, dimensioning and multiple class names within Flex.

Problem:
Flex can't do true cascading styles like HTML (for example a black play button)

Solution:
YES, flex can do cascading styles. It just requires a different approach. A programmatic approach. Don't worry, I assure you that even a non-programmer can pick this one up.

Lets dive a little deeper. Cascading styles refers to the ability to start with a button, style it into a black button then go a step further and make it a play button. First, create a button and use some CSS to style various properties of that button.

PLAIN TEXT
HTML:
  1. <?xml version="1.0" encoding="utf-8"?>
  2. <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" xmlns:text="flash.text.*">
  3.     <mx:Style source="css/styles.css" />
  4.    
  5.     <mx:Button label="Click Me"/>
  6. </mx:Application>

PLAIN TEXT
CSS:
  1. Button {
  2.     cornerRadius: 12;
  3.     fontSize: 15;
  4. }

Simple enough, right?

Next we want a black button:

PLAIN TEXT
Actionscript:
  1. package com.cb
  2. {
  3.     import mx.controls.Button;
  4.  
  5.     public class BlackButton extends Button
  6.     {
  7.         public function BlackButton()
  8.         {
  9.             super();
  10.         }
  11.     }
  12. }

There it is. All the actionscript you will need. And to think it was all auto generated!

Actionscript Class Generation

Actionscript Class Generation

Add the MXML and CSS:

PLAIN TEXT
HTML:
  1. ...
  2. <button:BlackButton label="Click Me" /> 
  3. ...

PLAIN TEXT
CSS:
  1. BlackButton {
  2.     fillAlphas: 1.0, 1.0;
  3.     fillColors: #000000, #000000;
  4.     color: #FFFFFF;
  5. }

Now we have a black button. This process can be used as many times as you want to continually inherit properties from another object. You could have a small, blue button with red text all styled at each level.

Lastly, we need to add the play icon:

PLAIN TEXT
HTML:
  1. ...
  2. <button:BlackButton label="Click Me" styleName="playButton" /> 
  3. ...

PLAIN TEXT
CSS:
  1. .playButton {
  2.      icon: Embed(source='assets/play.png');
  3. }

Now we have a black play button. Add a stop, pause, and mute button as BlackButton's and they will all be updated when you modify the style for either the base Button class or the BlackButton class. Again, this tutorial is not very technical but the next two will be. This is meant to be the first step in bridging the gap between design and actionscript using Flex 3.

The number of comments I get on this post will exponentially increase the likelihood of part 2 coming out sooner :)


Sample

Source View



References:

The Woes of Flex

CSS in Flex is not real CSS at all

Adobe Bug Page


]]> http://www.blackcj.com/blog/2009/01/06/skinning-flex-components-part-1-css/feed/ 6 Anchor Tags in ActionScript Textfields http://www.blackcj.com/blog/2008/11/30/anchor-tags-in-actionscript-textfields/ http://www.blackcj.com/blog/2008/11/30/anchor-tags-in-actionscript-textfields/#comments Mon, 01 Dec 2008 03:38:36 +0000 Chris Black http://www.blackcj.com/blog/?p=109 This example is for anyone who needs to use anchor tags in ActionScript TextFields. If using AIR than the best route is to use an HTMLLoader to load in the raw HTML. If an HTMLLoader is not an option you can use this example to create a wrapper class that mimics the anchor tag functionality. Before we get started it is important to note that TextFields have a number of properties, formats and styles available which all have an effect on the way text is rendered. This example takes advantage of a specific set of properties in order to accurately determine the line number and char location of certain strings. Variables may require some adjustments / tweaks (or may not work at all) if the TextField properties are changed.

To get started lets take a look at the HTML we plan to load in:

PLAIN TEXT
HTML:
  1. <b>Index</b>
  2. <a href="#sectionA"><u>Jump to Section A</u></a>
  3. <a href="#sectionB"><u>Jump to Section B</u></a>
  4. <a href="#sectionC"><u>Jump to Section C</u></a>
  5. <a href="#sectionD"><u>Jump to Section D</u></a>
  6. <a href="#sectionE"><u>Jump to Section E</u></a>
  7. <span name="sectionA"><b>Section A</b></span>
  8. <p>...</p>
  9. <p>...</p>
  10. <a href="#top">Back to Top</a>
  11. <span name="sectionB"><b>Section B</b></span>
  12. <p>...</p>
  13. <p>...</p>
  14. <a href="#top">Back to Top</a>
  15. <span name="sectionC"><b>Section C</b></span>
  16. <p>...</p>
  17. <p>...</p>
  18. <a href="#top">Back to Top</a>
  19. <span name="sectionD"><b>Section D</b></span>
  20. <p>...</p>
  21. <p>...</p>
  22. <a href="#top">Back to Top</a>
  23. <span name="sectionE"><b>Section E</b></span>
  24. <p>...</p>
  25. <p>...</p>
  26. <a href="#top">Back to Top</a>

The content of the paragraph files has been removed to save space (you can view the source below to get a copy of the full file). Notice that the 'a name' tags have been replaced with 'span name.' This was a quick way to prevent the styling of the link tags from modifying the style of the headers. There is probably a better way to get around this but it's not within scope of this example. Speaking of the style sheet... here it is:

PLAIN TEXT
CSS:
  1. /* CSS file */
  2. a:hover {
  3.     color: #0000FF;
  4. }
  5.  
  6. a:link {
  7.     color: #555555;
  8.     text-decoration: underline;
  9. }
  10.  
  11. a:active {
  12.     color: #FF0000;
  13. }
  14.  
  15. a:visited {
  16.     color: #555555;
  17.     text-decoration: underline; 
  18. }

Lets start by loading in the HTML text:

PLAIN TEXT
Actionscript:
  1. import com.cb.util.AnchorText;
  2. import flash.text.TextField;
  3. import flash.events.TextEvent;   
  4.  
  5. private var _htmlLoader:URLLoader = new URLLoader();
  6.  
  7. private var html_url:String = "assets/test.html";
  8. private var myText:AnchorText;
  9.  
  10. private function init():void
  11. {
  12.     _htmlLoader.addEventListener(Event.COMPLETE, htmlLoadHandler);
  13.     _htmlLoader.load(new URLRequest(html_url));
  14. }
  15.  
  16. private function htmlLoadHandler(event:Event):void
  17. {
  18.     myText = new AnchorText(_htmlLoader.data, 300);
  19.     myTextComponent.addChild(myText);
  20. }

Now lets take a look at some of the key functions within the Anchor Text class. First we will want to replace the a href # tags with something ActionScript can understand:

PLAIN TEXT
Actionscript:
  1. // Replaces '#' with 'event:' to trigger actionscript events                   
  2. protected function createAnchors():void
  3. {
  4.     var regEx:RegExp = new RegExp("<a href=\"#", "ig");
  5.     _text = _text.replace(regEx, "<a href=\"event:");            
  6. }

Next we will want to add event listeners for the event and set up our dynamic text field:

PLAIN TEXT
Actionscript:
  1. // Constructor
  2. public function AnchorText(text:String, width:Number = 200, height:Number = 300)
  3. {
  4.     _width = width;
  5.     _height = height;
  6.     _text = text;
  7.    
  8.     // Add event dispatching to the a href tags
  9.     createAnchors();
  10.    
  11.     _dynamicText = new TextField();
  12.     _dynamicText.addEventListener(TextEvent.LINK, anchorText);
  13.     this.addChild(_dynamicText);
  14.  
  15.     _styleSheet = new StyleSheet();
  16.    
  17.     // Comment out the following three lines if you don't have an external stylesheet
  18.     _styleLoader = new URLLoader();
  19.     _styleLoader.addEventListener(Event.COMPLETE, styleLoadHandler);
  20.     _styleLoader.load(new URLRequest(css_url)); 
  21.    
  22.     updateFormat();  
  23. }
  24. // Set up the TextField
  25. protected function updateFormat():void
  26. {
  27.     _dynamicText.width = _width;
  28.     _dynamicText.height = _height; 
  29.         _dynamicText.styleSheet = _styleSheet;
  30.     _dynamicText.wordWrap = true;
  31.     _dynamicText.htmlText = _text;
  32.     _dynamicText.selectable = true; // Text MUST be selectable     
  33. }

Finally we will want to handle the mouse clicks to the events that we set up within the text string:

PLAIN TEXT
Actionscript:
  1. protected function anchorText(event:TextEvent):void
  2. {
  3.     // Recognize 'back to top' links
  4.     if(event.text == "top"){
  5.         _dynamicText.scrollV = 0;
  6.         return;
  7.     }
  8.    
  9.     // Set up ghost text field to match properties of the current one
  10.     var anchorText:TextField = new TextField();
  11.     anchorText.wordWrap = true;
  12.     anchorText.width = _width;
  13.     anchorText.styleSheet = _styleSheet;  // This is REQUIRED
  14.  
  15.     // Replace the name tag with a unique pattern (^#^)
  16.     var regEx:RegExp = new RegExp("<span name=\""+ event.text +"\">", "ig");
  17.     anchorText.htmlText = _text.replace(regEx, "^#^"); 
  18.    
  19.     // Replace newlines with '&' to keep char count consistant
  20.     regEx = new RegExp("^", "gm");
  21.     anchorText.htmlText = anchorText.htmlText.replace(regEx, "&"); 
  22.  
  23.     // Remove duplicate newlines
  24.     regEx = new RegExp("&&", "g");
  25.     anchorText.htmlText = anchorText.htmlText.replace(regEx, "x"); 
  26.    
  27.     // Find the char location of the unique pattern   
  28.     var myIndex:int = anchorText.text.indexOf("^#^") + 3;
  29.    
  30.     // Set the scroll index to the line number of the char index
  31.     var scrollIndex:int = _dynamicText.getLineIndexOfChar(myIndex) + 1;
  32.    
  33.     // Scroll to the necessary line
  34.     _dynamicText.scrollV = scrollIndex;
  35. }

Some key things to note would be:

  • The TextField MUST be selectable
  • A StyleSheet must be applied to the TextField (even if you don't load one in)
  • This example assumes '^#^' and '&&' are unique sequences
  • A TextFormat can not be used along with a StyleSheet
  • There are always exception cases when dealing with RegExp and TextFields (no warranty provided)


View Sample / Source Files

Here are a few resources I found helpful along the way:
http://www.kirupa.com/forum/showthread.php?t=303186

http://troyworks.com/blog/2008/03/14/flash-textfield-actionscript-hyperlink-in-as30/

]]> http://www.blackcj.com/blog/2008/11/30/anchor-tags-in-actionscript-textfields/feed/ 1