Flex 4 Theme Voodoo Part 2 4
Styling with CSS The Theme Way
In part one of this series we reviewed the anatomy of a theme. In this post I will cover the theory behind styling when creating a theme as well as some tricks I have picked up along the way.
In this post we will cover
- Theme styling theory
- Applying a skin class
- Custom style properties
- Styling base classes
- Style property Metadata
- Style pseudo selectors
- Style modifiers
Flex 4 Theme Voodoo Part 1 1
Flex 4 theme anatomy
Recently I have been working with teams adding skins to their applications. I was surprised to see all the ways that they were adding styling. I was even more surprised to see that none of those approaches were using themes. From my perspective themes are the best practice for adding styling to an application. Themes allow the most decoupled and easiest to update approach to styling Flex applications to date. They also force you to limit the amount of styling exceptions you use in your design which assists greatly in the consistency of your products look and feel.
What follows is a brief review of what is needed in a theme. Future posts will delve into some of the details and approaches I have come up with while developing themes.
Things I will cover in this series:
- Anatomy of a theme
- Styling with CSS the smart way
- Adding Classes to your theme
- Adding Fonts to a theme
- Adding Assets to your theme
- Creating a build script for your theme
- Applying your theme
Using Signals in FlexUnit 4 Asynchronous tests 13
Recently I switched over to using Robbert Penners great as3 Signals project when sending application level events for a number of reasons. You should really read about the benefits here. The rub came when I wanted to write my tests ( first ) and realized that FlexUnit 4 was tied to flash events. Read on to see how we can get around this limitation.
SWFObject 2.2 and Safari Gotcha 3
When setting the style class attribute using dynamic embedding with SWFObject, Safari will throw a parse error and not embed your Flash file. You need to use object bracket notation instead of dot notation.
Example: foo["pantyhose"] instead of foo.pantyhose
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<script type="text/javascript" src="assets/js/swfobject.js"></script>
<script type="text/javascript">
var flashvars = {};
flashvars.event = "%2fevent_guid_1%2f";
var params = {};
var attributes = {};
attributes["class"] = "flashcontent";
attributes.id = "FlashContent";
swfobject.embedSWF("yourHappySWF.swf", "alternativeContent", "100%", "100%", "9.0.0", false, flashvars, params, attributes);
</script>
<style type="text/css" media="screen">
html, body { height:100%; }
body { margin:0; padding:0; overflow:auto; text-align:center; }
#flashcontent { display:none; }
</style>
</head>
Flex & Rails: REST Fix 3
Before Rails 2.3.1 you could send a PUT request with application/xml contentType by appending ?_method=put to your HTTPServices url parameter. Unfortunately this stopped working. You can accomplish the same thing by sending a custom header of #X-Http-Method-Override# and setting it to PUT, or DELETE.
Example
If you have an update HTTPService like so:
<mx:HTTPService id="updateThing"
resultFormat="e4x"
url="http://localhost:3000/thing/{dataGrid.selectedItem.id}.xml"
contentType="application/xml"
method="POST"
result="index.send()" />
You would add your custom header like this:
/**
* @private
*/
protected function update_thing():void
{
var thing:XML = new XML(_thingXMLTemplate);
thing['first-name'] = firstNameInput.text;
thing['last-name'] = lastNameInput.text;
var headers:Object = new Object();
headers['X-Http-Method-Override'] = "PUT";
updatePerson.headers = headers;
updatePerson.send(thing);
}
*Note the headers['X-Http-Method-Override']
Same goes for sending a DELETE. Hope this helps.
Arduino and Flash on Snow Leopard 4
I was recently inspired ( once again ) by Kevin Hoyt at the Adobe MAX unconference which was put on by FITC and Influxus. Kevin gave a talk about physical computing which showed off a few examples of real world programming. This is where you use your developer know-how to interact with the world outside of the computer for a change. We had recently been talking at work about how we needed to build a robot, so the timing couldn’t have been better.
After recently upgrading to Snow Leopard I found that most of the getting started information was outdated for getting Flash to talk to the Arduino. I’ll show you what I did so I can hopefully save you some time. Less Googleing (is that a word?) and more tinkering.
What you need to get started
- Arduino micro controller board
- Ebay
- Maker Shed this is what I picked up
- I also use the Adafruit Proto Sheild which basically extends the power outs and grounds of your Arduino (among other useful things) which makes wiring up ideas much easier. I highly recommend getting one.
- Arduino IDE You will need this for uploading your initial firmware to the board. It also has the USB drivers needed for communication over a socket packaged with it on the disk image.
- Actionscript 3 development environment of some sort
- Flash 30 day trial
- Flex SDK is what I use with Textmate and Simon Gregory’s bundles
- Flash Builder
- AS3 Glue The library for interfacing between Flash and Arduino
- Firmata This is all that needs to be uploaded to your Arduino in order for AS3 Glue to do it’s magic
- TinkerProxy 2 OSX Download link the updated proxy for talking to your Arduino over a serial port connection
*I saved all of these into a new Arduino directory under Documents. I like having all of my related assets in the same directory.
Monokai theme for eclipse
UPDATE
- I was able to fix my TextMate install. Turns out it was due to updating the default ruby installed in Snow Leopard to 1.9.1 ( So I could use MacRuby ). In order to fix this I followed Hivelogic’s tutorial on installing rails on Snow Leopard and then sym-linked usr/local/bin/ruby to the default. I know bandaid, but it works until I have the faith to try the dual ruby install method from jurisgalang .
- I also have updated this Style to include MXML and Actionscript for Flash Builder. ( It is missing css though since I couldn’t decide ).
After Snow Leopard hosed my TextMate 
I had to go back to using Eclipse for my daily development. One thing that I did to make the transition more bearable was to port the Monokai theme I use religiously to Eclipse. Now granted it isn’t exact, but it is pretty close… close enough for me to pretend. It’s like hugging the unwashed pillow of your ex-girlfriend after she moves out, pitiful. I can’t wait until Macromates releases a fix or at least tells me how I can fix the bundles I use ( ant, actionscript, flex, cough)
How to embed fonts from a library SWC in Flex 3 5
The problem:
You have two or more Flex projects that you want to share fonts between.
Solution:
Add the fonts to a shared library project then reference them in your css… right?
- create a new library project
create an assets folder?This won’t work!- you have to add your fonts directly under the src folder
Add the fonts to the swc’s build path:
go to Project Properties > Flex Library Build Path > Assets and check the checkbox next to the font files.
in your project you want to use the font in link to the library project:
go to project properties > Flex Build Path > Library Path > Add Project
The rub:
For some reason Flex Builder can’t seem to find the fonts in the library project if they are in any directory BUT src?!
Usage:
You will then be able to reference your fonts in the linked projects css like so:
@font-face {
src:url("MyriadPro.ttf");
fontFamily: MyriadPro;
}
Hopefully this saves someone some time.
Multi Bitrate Live Streaming with FMLE ( Adobe Flash Media Live Encoder ) 8
How to connect to a multi bitrate encoded live stream from Adobe Flash Media Live Encoder. What follows is the easiest way to connect to a multi bitrate live stream produced from FMLE 3.0 and played back through the FLVPlayback 2.50015 component along with some tips I picked up while trouble shooting.
What you will need:
- Flash Media Server 3.5
- Adobe Flash Main Encoder 3
- FLVPlayback 2.50015 this was recently updated to fix a bug in connecting to multiple supplied streams.
This post assumes you have all of these installed properly and you are able to connect to a single stream without issue. For information on getting started with any of these refer to their accompanying documentation. More info can be found at the Adobe Developer Connection FMS resources page including some tutorials to get you started. Any issues you find that are not covered in this post should be referred to the forums.
*Disclaimer: I am using Edgecast as my CDN. They make it very easy to find all of the info needed. Different CDN’s may vary. Things you will need to know that will be specific to your CDN are:
- how to enable an authentication token
- how to add your authentication token to your stream name in FMLE
- What version of FMS they are running ( You will need 3.5 )
Sandboxing in Actionscript 3.0 5
I wanted to take a minute and share a development approach I find is very useful. I call it Sandboxing. All it really is is a separate project that you do all of your figuring out in. It might seem obvious to a lot of people, but to those who don’t use this approach, it is amazing how much more productive you are once you set it up.
How to set up a Sandbox
- Create a new project ( I use a plain old vanilla Actionscript project )
- Create a new class for whatever you are figuring out
- In your Sandbox class constructor add a new WhateverTheTestClassIs()
- Comment it our once you are done ( just in case you want to reference it later )
- Rinse Repeat
Seems dead simple I know but t keeps you focused on the problem at hand instead of mucking around with whatever larger project you are working on. I don’t even deal with packages, just throw them in the root. Fast, easy, done.
Older posts: 1 2
