Posted by: edsyrett | 18 August 2009

Overlay colours in Google Maps

ColourScheme Test App

When you have more than one route overlay shown on a map, it gets a bit difficult to separate them out.  We needed to show several routes on a map all at once, and generating the colours using some fancy colour-wheel stuff just didn’t make the route overlays show up.

So we went for Plan B.  We needed to generate a fixed set of colours that we knew would show up on the map.  I needed a way of showing about 20 colours up against each other so that as routes were added, the colours would be so different that we would be able to see each route.  In addition, we wanted to make sure that the route colours were different to the default colours used to show roads etc on the maps themselves.

So I wrote a simple little app to show colours in a list.  You can drag the colours around, and as you select each colour, the colour picker at the top gets set, and you can then edit that individual colour with the picker.  You can click on the add button to add a new bar to the list.   As you make changes, the code window on the right gets updates, and you can copy that and paste it into your actionscript to create a colour array.

Advertisements
Posted by: edsyrett | 21 June 2009

Flash Builder 4 and netmon.swc

I downloaded the latest build of the new Flash Builder 4.0 standalone, hoping for a bit of a fiddle to see what it did.  Unfortunately I didn’t get very far.  I created about the simplest test app you’re like to to find, but when I came to build it, I got this error:

unable to open ‘C:\Program Files\Adobe\Flash Builder4 Beta\sdks\4.0.0\frameworks/libs/netmon.swc’

I’m not sure whether the forward slashes at the end of the path are the problem, and even if they were, I couldn’t find any configuration file to correct it. In any case, I really don’t think Flash Builder should throw an error like this just after a vanilla installation.

You can get around the issue by simply unchecking “enable network monitor” in the compiler settings for the project, but to me that’s not acceptable as I wanted to play around with the network monitor.

I’ve had a look at the Adobe bugs and there is an issue that mentions this error message here, but the issue report isn’t actually about the error itself. I’ve commented on this issue asking if there should be a separate issue for this.  After thinking about it for a bit, I added a new bug report anyway, and it’s here.

Posted by: edsyrett | 25 May 2009

Sliding Panel

Sliding Panel Test App

Sliding Panel Test App

I’ve been working on a screen that shows a diary something like the calendar in Outlook.  We’re targeting fairly low-spec machines with screen resolutions not more than 1024 x 768.

On one side I have a list of items that I can drag onto the schedule to create entries.  As development continues, the width of this list is getting wider as the implementors want more columns in the list, and the visible area of the schedule is getting smaller.

Once again, the old saying is never more true – Necessity is the Mother of Invention. I need to show a list and a schedule almost at the same time.

So here’s my solution to the problem.  My list of things to drag onto the schedule will go in a SlidingPanel on the right.  The user can click on the arrow button to show or hide the panel.  Once they have selected an item from the list on the right they can drag it onto the schedule, close the panel, and then move the item around on the schedule.

Click on the image above to go to my test app.  The SlidingPanel component can be set to anchor to the left or right, and start up open or closed.  The tab (the vertical bar with the button on it) is a separate component, SlidingPanelTabSkin, and you can change that to alter how the tab is displayed.   The only requirement is that it implements ISlidingPanelTabSkin and dispatches a SlidingPanelEvent when the user clicks somewhere on the tab to get the panel to open or close.

Posted by: edsyrett | 23 April 2009

Expanding TextArea Component

I’ve been working with printing with Flex for a while now, and hit a problem where my TextArea controls weren’t showing all their text when they were printed.

The problem arises because it’s difficult to figure out how many lines of text the TextArea will show, and hence how high to make the TextArea control.  My first attempt involved searching through the text for \r\n etc and adding the height of one text line for each of them.  That won’t work if the text has automatically wrapped within the control.

Why not use the textHeight property of TextArea, you’re asking?  Well, that’s what I tried, and I would have finished a lot quicker if it was that easy.  But unfortunately there are some bugs with the calculations that produce the textHeight.  One of them is described here.

I found some helpful stuff on the web, and the most promising page was from a bunch of guys called idletogether.com, here.  So I used that and created a test app that demonstrates a control based on TextArea, which will automaticlly expand or shrink as you edit the text.  It will also print properly by sizing itself according the length of text in it.  My app is here.

For a while we have been wondering why we get a Security Sandbox Violation when we run an effect over a container that has a map in it. Just to make sure we all know what we’re talking about, here’s the error that we currently get:


SecurityError: Error #2122: Security sandbox violation: BitmapData.draw: http://10.44.181.34:8080/tls-hs/HomeServices.swf/%5B%5BDYNAMIC%5D%5D/1 cannot access http://mt0.google.com/mt/v=ap.92&hl=en&x=253&y=167&zoom=8&s=Galile. A policy file is required, but the checkPolicyFile flag was not set when this media was loaded.
at flash.display::BitmapData/draw()
at mx.effects.effectClasses::MaskEffectInstance/getVisibleBounds()[E:\dev\3.1.0\frameworks\projects\framework\src\mx\effects\effectClasses\MaskEffectInstance.as:771]
at mx.effects.effectClasses::MaskEffectInstance/initMask()[E:\dev\3.1.0\frameworks\projects\framework\src\mx\effects\effectClasses\MaskEffectInstance.as:650]
at mx.effects.effectClasses::MaskEffectInstance/startEffect()[E:\dev\3.1.0\frameworks\projects\framework\src\mx\effects\effectClasses\MaskEffectInstance.as:463]
at mx.effects::Effect/play()[E:\dev\3.1.0\frameworks\projects\framework\src\mx\effects\Effect.as:930]
..etc...

I think we have finally found the answer here.  And the answer is…

You can’t.   So don’t try.

When you run an effect, it attempts to render the entire container and everything in it to a bitmap, which it then processes to produce the effect.  But as Pamela Fox explains in the Google Groups post, they don’t really want to allow people to render parts of their maps to bitmaps which people can then mess about with.

I’ve had a moan about this on three points:

  1. I can’t find any documentation anywhere that explicitly says that you can’t do effects over a map. At least if you type in “Google maps flash effects” there’s nothing that I could see to tell me that effects aren’t supported.
  2. I think effects should be able to run over a map.  After all, the whole point of Flex it provide a “Rich” application, and effects are a sizeable part of that.
  3. The error message we get relates to a Sandbox Violation.  How are we supposed to figure out from that that drawing to a bitmap (and hence effects) is disabled?

In the meantime, it seems we have to remove the map from the display list whilst an effect is playing, and that’s the solution described in the Google Groups post.

Update – I had a reply from Pamela Fox on the Google Maps team and there’s a issue for this here.  Please star this issue and add to the growing band of developers who want to do effects stuff….

Posted by: edsyrett | 6 March 2009

Printing using layout and images

I needed to print an exam ready for someone to fill in.  Looking at the demos for printing in the SDK documentation, they were a bit thin on the ground. 

According to the documentation, printing is simple – you create a FlexPrintJob, create your display objects and add them to the job using addObject() and then call send().   What could be easier?

Well a lot of things actually.  

The documentation doesn’t mention a bunch of pitfalls that you need to overcome before you can print properly.  Here is a brief list of the ones I found…
  1. Images need to be downloaded before you start printing.  Image loading is inherently asynchronous, so if you request the images at print time, there is no guarantee that they will be loaded by the time printing occurs. So you have to explicitly go through your document, request each image, and wait until they are all loaded before starting to create the display objects for printing.
  2. The sample code in the documentation always seems to lay out the display objects with specific x and y coordinates.  But what happens if you want to use the standard layout components?  When I tried that, nothing appeared.  I simply tried to use VBox and HBox to position the individual parts of the page, and whatever I tried, the layout of the controls on the display objects didn’t work properly. Its seems that you have to add any display objects that you want to print to the actual display list otherwise they won’t be laid out properly, if at all.  In other words you have to add your printed page to a parent that already exists on the display list.  There might be a function somewhere that you can call to ensure that all your pages are laid out, but I couldn’t find it.
  3. In  addition to point 2, you have to allow the LayoutManager a few frames to actually perform the layout, otherwise some containers seemed to be laid out properly, but others didn’t.  In my test app, I create the controls and then the printing is done at the other end of a callLater(). 

My working test app is here.  The printed layout is pretty much the same as the displayed layout, and it only works because I have solved the particular problems described above.

I have just upgraded to FB 3.0.1. It just happened that I needed to create a small test project for a problem that I wanted to isolate and sort out. When I ran the project, I got a little message asking me if I wanted to update my Flash Player to 10.

Update to Flash Player 10    

This is quite obviously a bug.   It’s wrong on two counts:

  • Firstly I don’t have to update to Flash Player 10.  The code in my test project will happily work on Flash Player 9.0.115.
  • Secondly it doesn’t tell me what version I do need to update to.   By default, the required Flash Player version in a new project is version 9.0.128.  If that’s what the developer has set (by default or otherwise), then that’s what the message should say.

There is already an issue with Flash Player detection on the Adobe bug system here.  But this didn’t cover all the issues I was seeing.  It turned out that I could reproduce this issue by turning off  Express Install in the project compiler settings.   My issue seems to revolve specifically around the detection of the Flash Player version when Express Install is set.  I did a cursory check to see if anyone has already reported this and found nothing much.  So I added my own bug report here – vote it up, comment on it, shout it down at your leisure.

There’s a sort of workaround in that you can artificially lower the required version of Flash Player in the project compiler settings so that there’s less likelihood that anyone will get this message.

Posted by: edsyrett | 27 February 2009

Full Screen…but not quite

Right now I’m writing a Flex app that manages and runs online exams.  Currently, the part of the app that shows the exam ready for the candidate to enter answers is part of the same application that allows a user to manage the details of the exams etc.  

This is actually what the specification required.  It might be the case that our candidates take the exam by ticking boxes on a piece of paper and then an admin enters the results later.  But I think a candidate should be able to enter sit in front of a pc running the app and be able to take the exam online.  Whilst taking the exam, the candidate should be prevented from accessing any other part of the app.

So I started thinking about maximising the exam.  Sure enough, Flash allows us to show an app full screen.  Full details of how to do this appear in the livedocs here.

But about half way down there’s a paragraph that’s a real killer…

All keyboard-related ActionScript, such as keyboard events and text entry in TextField instances, is disabled in full-screen mode. The exception is the keyboard shortcuts that close full-screen mode.

In other words, you can’t type into TextInput fields when your app is full screen.  Note that this only applies to apps that run in Flash Player – if you’re writing for AIR, then StageDisplayState.FULL_SCREEN_INTERACTIVE is available and everything works as normal.

So I had to settle for making a particular container full screen within the application stage, i.e the browser.  It turns out that this isn’t too difficult, as all you need to do is remove the display object that you want to make full screen from its parent and add it as a child of the System Manager.

That worked fine for me, but the test app I did removed a container from within a popup TitleWindow.  I found that although the container was now a child of the the top-level System Manager, the popup (which used to be its parent) still showed over the top.  So I also had to hide all popups whilst my container is full screen.

My test app is here.  To quote one of my Flex Heroes, Alex Harui, “the usual caveats apply”…

Posted by: edsyrett | 18 February 2009

I’ve developed my own OLAP Cube

..and here is a test app that shows it working.

I originally had a go with the SDK OLAP classes.  One of my previous posts here shows a test app that I produced.  This app shows just a grid with the cube output.  

But we wanted to put the data in a chart.  I had a good look at the source code for OLAPCube etc and I just couldn’t understand any of it.  It seems way too complicated – I guess it has a whole load of functionality that I don’t understand and probably will never need.

So I had a go at creating my own simplistic OLAP Cube.  It quite happily allows me to add dimensions made up of one data column.  I know that the SDK classes allow you to create a hierarchy of columns, i.e. you build up a dimension out of more than one column.  Whilst we don’t need anything like that at the moment, I’m pretty sure I could add that functionality to my classes if I need to.

So my Cube classes seem to work, they are simple to understand, and I can output the data to a chart (although in the test app the charting a bit odd – I need to introduce drag and drop in there somewhere…)

Finally, my Cube classes don’t come with a price tag like the advanced classes in the SDK….

Posted by: edsyrett | 18 February 2009

Multi-column forms

If you have ever tried to create multiple columns within a Form, I guess you probably gave up.  So did I.  Until I realised that a Form is a pretty simple little class that just arranges the FormItems within it.  I think I approached the problem thinking that <mx:Form> was like a HTML form, i.e. it had some functionality that managed the form items. But no, it’s just a container.   

The next problem was that we had some forms that had only one column and some that had more.  If you have a specific style for Form in your stylesheet, the multi-column forms will look wrong, for example each column may have a border around it.  

The easy solution is to derive a class from HBox, call it MultiColumnForm, and derive a class from Form, call it FormColumn.  You can then create multi-column forms by embedding FormColumn objects inside a MultiColumnForm. You can style MultiColumnForm and FormColum explicitly in your stylesheet without worrying about styles clashing with Form.

Here is my little test app.

« Newer Posts - Older Posts »

Categories