Tuesday, February 27, 2007

Home on the TextRange

I've been having some grief with a Flex project. It's has a few modules that are loaded at runtime based on a menu. One of these Modules occasionally produced an error message when it loads. It was a strange message relating to a ButtonBar's Programmatic skin. Which seemed strange as I wasn't using a ButtonBar anywhere. Until I realised I was using a RichTextEditor which contains a ButtonBar. I tried many things to fix this problem with no luck.

So I started thinking about making my own RichTextEditor. I created a quick test component with a TextArea and a button. The idea being that the button would call a function to set the selected text to bold. You can get the start and end index of the selection easy enough using the TextArea.selectionBeginIndex and TextArea.selectionEndIndex properties. But there is a problem. The text components have two properties you need to worry about;text and htmlText. The selection index properties relate to the text property. But the actual changes need to effect the htmlText property. I started thinking about an array to manage the position of the html elements. But it wasn't going to be straight forward.

Which got me wondering how the RichTextEditor managed this. A quick look in the class file revealed an import for mx.controls.textClasses.TextRange. "The TextRange class provides properties that select and format a range of text in the Label, Text, TextArea, TextEditor, and RichTextEditor controls.". In other words it does exactly what I was looking for in my RichTextEditor. Using TextRange I rewrote my bold function:


/*
* Listen for click event from bold_btn
* set selected text to bold
*/

private function bold(event:Event):void
{
var b :int = text_area.selectionBeginIndex;
var e :int = text_area.selectionEndIndex;

if(b != e)
{
var tf:TextRange = new TextRange(text_area,true,b,e);
tf.fontWeight = "bold";
}
}

The TextRange object receives four parameters.


  • The Text component that is the target of the action.

  • Are we going to make a change.

  • The start index of the change.

  • The end index of the change.

In the following line we change the fontWeight property of the TextRange object and consequently the htmlText property of the selection. The TextRange class can effect most of the html elements available to Flex Text. The only exception I've found so far is inserting an image. Obviously this is only the beginning of a custom RichTextEditor. But TextRange will greatly simplify the task.

Wednesday, February 21, 2007

Hacking htmlText in Flex 2

During the last fortnight I've needed to use htmlText with Flex 2. My needs were simple. But I still ran into lots of problems. As you probably know htmlText supports a subset of html elements (<p>,<a>, <b>, <i>, <u>, <img>, <br>, <font>). This short list can be enough for simple projects. But it's never as simple as it should be.


htmlText wrapping problem

For future reference I offer the following list of problems I encountered using htmlText. The Flex documentation notes that the img element is not fully support and many of the problems below relate to images. Still displaying images in htmlText is too useful to ignore and so image problems are included in this list. I don't have many solutions and the ones I offer are hacks. But sometimes it's helpful to be forewarned.



  • If you include more than one image and have text links within htmlText the links hit area is often too small. It is either a single pixel at the lower right edge of the text or a thin line below the text. The text itself doesn't act as a link. This problem may be cache related or relate to server response time as it may go away after frequent viewings.

  • Text links often extend well beyond the end of the word. Typically they run the width of the component. But if you create a space below the link (i.e. <p> </p><br/>) then the entire space will act as a link.

  • When using <font> within a list item to apply color to the text the color is inconsistently applied to the bullet. That is sometimes the bullet will be colored and sometimes it won't. This occurs infrequently and I can find no pattern to determine when it will occur.

  • If an image is the last element in the htmlText the component may incorrectly measure the scroll height of the component. Consequently the scroll bar may not appear even though the image extends beyond the components bottom edge. This typically occurs when the component without the image wouldn't need to scroll. You may be able to work around this by including some text after the image and coloring the text the same as the background (i.e. <p><font color='#FFFFFF'>...</font></p>).

  • If you want an image to occupy the entire width of the component you can try to force the text not wrap by setting a hspace value. But the component will always have a single character per line regardless of whether the characters are visible or not. Therefore it will appear that some characters are missing from the paragraph that follows the image. The workaround for this problem is the same as the previous problem. Except you need a character for each line the image requires.


Curious to hear any other htmlText problems you've found and even better any solutions you may have.

Friday, February 16, 2007

Where are all the Flex developers

At work we are currently looking for a web developer ( php/SQL/Actionscript). We have been looking for the last six months. Ideally we hoped to get someone who had some experience with Flex. But most of the applicants had never heard of Flex. I guess Flex is sort of new ( I attended numerous Flex presentations at MXDU in 2005 ; so it's not that new). But over the last six months I've found myself asking where are all the Flex developers?


At the university where I work there are now fewer Flash developers than there were two years ago. Some have moved on, some have moved up and some have been put off (I don't mean sacked). It's this last group that I started to think about.


The last three releases of Flash have seen major changes to the structure of Actionscript. Each release has made Flash faster and more flexible. But each successive release has also required a steeper learning curve. Keeping up with all these changes wasn't essential because most of the practices we learned in Flash 5 still worked in Flash 8. Consequently many developers haven't bothered to keep up with all the new changes. For these developers learning Flex requires a different development metaphor using a scripting language that has become unfamiliar. Instead of exploring Flex they are in fact exploring their career options.


Perhaps this is fair enough. Many of these people were attracted with the promise of an easy to use tool for creating exciting user experiences. But the problem for them is that the web has moved on. Clients are less interested in flashy front ends and more interested in functionality (RIA's). RIA's require the power and complexity of the Flash Platform. Hence those who were put off must now find a way to move on or move up. Either way they recognise that they lack the skills we are looking for in a web developer.


Most of the "put offs" that I've met started life in multimedia or design courses. But what we really need from our developers is design attitude and IT aptitude. A few years ago I was teaching multimedia and one thing I noticed was that there was a lot of movement between multimedia and design (multimedia teachers were teaching Flash and Dreamweaver to design students; graphic design teachers were teaching Illustrator and Photoshop to multimedia students). But there was absolutely no movement between IT and multimedia or IT and design. Yet it seemed clear to me that there is a clear continuum from design to IT ( with multimedia sitting right on the cusp). In any multimedia class there is always a small number of students who could easily become graphic designers and a small number of students who could move into IT. From the IT side there would no doubt be students who could benefit from the perspective offered in multimedia studies. But there was no interaction between multimedia and IT. One consequence is that Flash development isn't on the radar for the vast majority of IT students. Part of me suspects that this isn't a global problem. That it is a direct consequence of how Australian education is structured (I'd be interested to hear your thoughts and experience on this).


So here we are in the Web 2.0 world and the vast majority of RIA's are AJAX or Flash based. Our IT graduates are still dreaming in Java, old world Flash developers are trying to pretend that Actionscript 3.0 doesn't exists and we are left wondering where our next web developer is coming from. I could be reading too much into this. It could just be that there is lots of well paid, exciting Flash work available and that the education sector has a bad reputation. But six months spent trying to fill a position tends to make you obsessive and paranoid.

Thursday, February 15, 2007

Bookmarking sites : Traffic Compared

Alexa graph : Comparing del.icio.us,BlueDot and Ma.gnolia

I was messing around with Alexa yesterday (after finding Movers) and decided to compare del.icio.us, BlueDot and Ma.gnolia. The first thing that struck me was the magnitude of difference : del.icio.us is way ahead of the others for traffic. This seemed particularly interesting to me because I find BlueDot much more useful than del.icio.us. To quantify that a little I can find more useful links in ten minutes with BlueDot than I could in the same time in del.icio.us. Part of the reason for this is that BlueDot offers an easier to use system with more useful functions. BlueDot also seems to have a more targeted selection of users. Hence I am finding other users dots more relevant for me.


Ma.gnolia is another great looking system. But one reason I've never gotten really interested in it is I haven't found any useful links in Ma.gnolia. It is well designed and easy to use. But the target audience is less interested in web development issues. Hence Ma.gnolia is less useful to me. But I imagine if more people started using Ma.gnolia then it may become more useful than BlueDot. Of course, having more users can quickly point to the limitations of a system. The biggest problem for del.icio.us is success.


For del.icio.us to become more useful it would need to find ways to simplify link finding within it's system. Because the two real factors that will determine the most successful system is the number of useful links for a specific target audience and how efficiently those links can be found.

Monday, February 05, 2007

Would you like images with that bookmark?

Songbird dot on Blue Dot

Still thinking about thumbnails to go with your online bookmarks (A del.icio.us makeover and Going Dotty). I prefer BlueDot's system that allows you to select a graphic from the page to use with your dot. My Songbird Media Player dot provides an ideal example. But what about pages that don't have a suitable image. Perhaps they don't have any images or the only images are ads. Then it would be great if you could use a screen grab of the page. No doubt this is a bit labor intensive to do on the fly on the off chance that you might want that. But perhaps it could be a distinct process that the user could initiate.

Another option might be that sites could provide a preferred image for use by bookmarking systems, in the same way that they supply a favicon (I guess a 'doticon' is going too far) . This would provide sites an additional opportunity to control their branding. Which is never a bad thing IMHO.

Saturday, February 03, 2007

A del.icio.us make over

del.icio.us re-designed front page

While Going Dotty
I took a few good looks at del.icio.us to make sure I wasn't being unfair. This eventually lead me back to the front page. To my surprise it had changed. Turns out it had changed in early December, which just goes to show how often I went to the front page. Anyway the page design is subtly but substantially improved. Of particular note is that links are now accompanied by an image. The images look like sceenshots as opposed to BlueDot's method of selecting images from the page. It will be interesting to see if this is a taste of what is to come and how the image selection is implemented. But it's great to see some movement over at del.icio.us.

widgetboxing my Throbbing Thumb

widgetbox Flickr slideshow

Yesterday I was doing some tests with widgetbox. Specifically I was trialling the Flickr slideshow on my other blog (The Throbbing Thumb). The Flickr slideshow can be customised to show photos from a specific user ID and/or a specific tag. In my test I decided to display all the Flower photos from my account.

Widgetbox is a brilliant idea. Essentially developers create code snippets and define parameters and users select and customise the component. Widgetbox manages this process delivering custom javascript to the users blog. This system allows for a very wide range of widgets that are easily installed by the blogger.

I was really impressed by what widgetbox offers. Still after a day of testing I removed the Flickr slideshow. Mostly because it made the page load much slower. But also because for all it's customisation I couldn't tweak the widget to really fit my blog. The biggest problem was the Flickr ad (there was also a second option: a yahoo ad) which was too white and too close to my photos.

I hope to test some of the other widgets in the near future to determine if the slow load was specific to this widget or typical of widgetbox and to see if I can find widgets that better fit my design.

Thursday, February 01, 2007

Going Dotty

My Dots on BlueDot

Having embraced the Web 2.0 memes I was keen to compare BlueDot and del.icio.us. When I first saw BlueDot I suspected it of being a bit lightweight. But at the same time I was getting a bit frustrated with del.icio.us's lack of depth and awkward interface (see 'Getting a taste for del.icio.us'). So last week I resolved to give BlueDot a go (BlueDot : My Dots).



Post registration BlueDot is keen to impress presenting three options for newbies:


add toolbar buttons

The toolbar buttons were easy to install and worked exactly as with del.icio.us.

import from del.icio.us

Import from del.icio.us is a painless process that copies over all your del.icio.us bookmarks and their tags with the option of adding an "imported from del.icio.us" tag. It even offers the option of only imported new bookmarks. Allowing you to continue using del.icio.us and regularly syncronising your dots.

find friends

friends seems a strong word (contacts seems more useful) but essentially it's a mechanism for sharing your dots with specific users. You find someone who you'd like to be friends with and send a friend request. If they accept they will appear in your friends list and their latest links are added to your page. Choosing your friends carefully gives you a great tool for finding relevant sites.


There are a few features that aren't immediately apparent when you import your bookmarks :

  • The most useful for me is the ability to select an image for your dot. This is best explained with an example. You've found a page you want to dot. This page contains a number of images. You use your toolbar button to add this dot. A dialog appears with space for some notes and tags. But it also shows an image from the page with the option to select a different image from the page (or no image). The image you select will be displayed when you are browsing your dots. This visual reminder makes it very easy to quickly find a specific dot from your vast collection. My only grumble about images is that you can't change them later. Which means you need to take care selecting an image when adding the dot. It also means that imported bookmarks will never have an image.

  • Highlighting text when dotting a page will automatically add that text to your dot as a note. This is very similar to del.icio.us functionality with one exception; BlueDot appends 'quoted :' to the start of the note. It's a simple thing but it quickly distinguishes between your opinions and site hype.

  • BlueDot offers the option to rate your dots. This was one thing I really missed in del.icio.us in transitioning from my personal bookmarking system. It's a great feature but it needs to go further. Currently your rating is displayed but not really used. Ideally it would be great if you could filter and order your links based on their rating.


BlueDot is must better designed than del.icio.us. Each dot is given a reasonable amount of room. Edit and delete buttons are easily spotted but not in the way. The rating stars and shared users is a bit cramped. But these are less used features. My one complaint is that the BlueDot banner and the user profile take up too much space of the screen real estate. When you add in the ads you need to scroll quite a bit before reaching the actual dots (which is the sites purpose). I can't help but think that a mini profile on the sidebar with a link to the full profile page would be useful but not intrusive. Ideally I think an option allowing users to choose between the current layout and the sidebar profile would be perfect.


In fact a bit more customisation would be wonderful. There is an option to change the default page background or to select a pattern. But the options are very limited. Reminding me of the worst cell color options for Excel.


Despite a few quibbles I'm essentially sold on using BlueDot. It has all the functionality of del.icio.us plus more with the added bonus that it's easy to find and to use.