• Figured out there are actually 2 web servers running on fgmdev.com, one on port 80 and one on 8080.  I was deploying to the one on 8080 while trying to connect on port 80
• Spoke to Brian this morning and I’m not going to try and get out  more fully functional demo to give the customer an idea of where we are headed then go back and build the framework.
• Started this task by making a collapsible SkinnableContainer which, when compressed, displays only a header and a ”+’ button to expand it, expanding it them displays the widget which for now is either RichText or a datagrid
• Learned something new about TextFlows,  I originally thought they acted like the data providers for RichText components.  turns out they are in fact themselves gui components and not simply a data class.  This screws up my plan of having the display and text editor point at the same TextFlow.  I’m either going to have to make copies or figure out another way to do data binding with rich text.  I found this out when having a demo with multiple text areas all pointing at the same TextFlow.  It worked fine until you minimized one of the collapsible containers.  The null pointer exception in FocusManager immediately made me realize TextFlows can’t be shared… actually it was more like my big toe hurting because my arm was broken.

• Created a fake data dictionary and filled it with data similar to that in the report Allen gave me for the forecasting report
• Created a sample application with a single report in it modeled after the paper report Allen gave me
• Attempted to deploy the sample to fgmdev but ran it to some difficulties
  • I first just created a directory structure in the webapps directory and pasted the required file (this worked locally but not on the server)
  • the logs said the directory was successfully deployed but got a 404
  • Tried creating a war with the same file, this also worked locally but not on the server
  • the logs again said everything was deployed fine but still getting a 404

Looked in to incorporating KapLab’s Kap Inspect.  It’s a runtime debug tool which lets you look at all existing UIComponents, their current properties, styles, and other items.  Unfortunately it’s written with heavy dependence on Flex 3 and you can’t use it in Flex 4 without making some changes to Flex builder and your sdk directories.  The source is available but very large and I don’t want to spend a week trying to get some cool debug tool to work.

So it turns out Kap Inspect is based on another open source project with a much looser license: FlexSpy.  It has a few less features than Kap Inspect, but works in Flex 4 without any changes and still allows access to styles and properties so I added it to our framework as another debug window.  We may need to hide it when moving to production.

Enter Monkey Patching.  It is apparently possible to inject code in to any existing class by recreating the file in your project, placing it at the same package location, and changing anything inside the file you want.  Your class will the override the Flex library class and any class that extends will inherit your class, not the original one.  Doug Mccune came up with a way to override mx.core.FlexSprite (the base class of all flex components) and add a dictionary which keeps references whenever addEventListener is called.  This allows a debug window to view all event listeners on any component.  So I put together FlexSpy and the monkey patched Flex Sprite to get a very useful new debug window.

Working on a run-time config menu for advanced data grids, this menu will need to include:

• A hierarchical display of columns and a way to edit them since some columns will have multiple sub-columns and why stop there
• A way to ‘roll-up’ data based on one or more columns, this will give the appearance of rows having children rows even though the data will be flat

Started working on the first bullet with a tree / datagrid hybrid:

• Have a tree / datagrid list with existing columns in it and editable headerText fields
• Had a list of available columns and was planning on dragging / dropping from it but after lots of messing around it is apparently not easy to drag and drop from a list of flat data to a list of hierachical data
• decided to simply go with DropDownList and add/remove buttons

Did a quick example of Java to Java AMF as well as did some reading on Deep Linking in flex.

• Working on run-time reconfiguring on widgets starting with the RichTextWidget
• If a user has edit rights, they can mouse over a widget and click on the edit button, it looks very similar to editing a wiki article except the buttons show/hide dynamically
• The configuration page for that widget is brought up (with a nice animation) and the user can make changes then hit finish
• The new configuration is loaded by the widget
• I’ve had to put in a few hacks since I don’t have a data model yet, especially in how I had widget data providers around
• Looking around at cool flex stuff and found this debug util which you build in to your application : http://lab.kapit.fr/display/kapinspect/Kap+Inspect

Made a few architecture and functionality choices for the SWFManager:

• Desktops: A Desktop is exactly as it sounds.  It contains everything one would normally associate with the desktop: a set of applications in windows, a taskbar of some type and anything else added later at this level.  An instance of SWFManager can have multiple Desktops but only one visible at a time and, for now, applications can not be shared between desktops though it would not be impossible to implement.  Communication between desktops will be possible.  In fact, some events may be fired that can span desktops while others are limited to only live within a single desktop.
• Apps: An app is very similar to most applications on a windows machine.  They contain everything needed to run independently but, in this case, will be able to communicate between each other.  Every App is placed on a Desktop within an AppTitleWindow which is an extension of DynamicPanel.  An AppTitleWindow has buttons for minimize, maximize, and close and can be moved and resized around the desktop.  The interface for IApp as it stands now:
  • Get and Set configuration, this is a DataObject that contains all the information the application needs to restore its state
  • Get Icon, this returns an icon that will be used in the task bar and possible in menus elsewhere
  • Validate configuration, this returns a boolean indicating whether or not the provided configuration object is valid
  • Default configuration, takes a config object and defaults all its properties
• Widgets: A Widget is a basic user interface component such as a Chart, Datagrid, RichTextArea, or map with navigation controls.  Widgets live within SOME Apps.  A developer may make a very elaborate App with charts, datagrids, text, maps, and all sorts of things without needing to worry about defining them as Widgets or using our IWidget interface.  However, for some of our internal Apps, it makes sense to make reusable Widgets with certain capabilites.  All Widgets will be added to an App inside of an EditableWidgetContainer which contains controls for accessing Widget options.  The current inteface:
  • Get and Set configuration, this is a DataObject that contains all the information the widget needs to restore its state
  • Validate configuration, this returns a boolean indicating whether or not the provided configuration object is valid
  • Default configuration, takes a config object and defaults all its properties
  • Get Configuration Menu, returns a UIComponent containing whatever inputs are necessary to configure the widget, this is how users will configure their widgets at run-time
• A few notes on Apps and Widgets:
  • Their interfaces are very similar and it would be possible for a component to implement BOTH IApp and IWidget so an App can be contained within an App.  The interfaces are purposely being kept separate so the developer can make that choice.  For example, it makes sense that an RSSReader may exists as both a Widget within a report or as a standalone App.  However, it wouldn’t make sense for Visiblity to be contained within another App.
  • Their positioning and sizing information will not be held within their own configurations.  It will instead be held either in the parent container’s config or the parent container’s layout config.

• IApp, AppTitleWindow, and several applications are already written at this point so I’m now working on EditableWidgetContainer and a few sample widgets: AdvancedDataGrid, RichTextArea, and maybe a chart or 2

• Thought about architecture overnight and decided what I’m using now is good and all it is missing is defining how applications will interact with each other.  This will mainly depend on how our users will want to define actions.  Will they define very specific actions or should it be more automatic like the old global selected item stuff?
• Worked on the reportwidget.  Started by loading in xml at runtime which creates an app and adds it to the screen.  Now I’m going to define a ReportWidget App in xml and load it at runtime and see if I can get some text / datagrids to appear.

• Investigating the Flex Text Layout Framework
• The Good:
  • The mark-up language looks very similar to HTML and classes exist for importing and exporting from several sources
  • The language can be read by many existing flex components including TextArea, RichText, and RichEditableText
  • A fairly nice open-source text editor component exists
• The Bad:
  • Simple things like lists with bullets are not yet supported
  • FlowText does not actually flow around things until 2.0 is released with the Flex 4.5 SDK along with many other needed features
• I plan on making a Report application which will be able to contain other applications such as a rich text widget, advanced data grids, charts, and anything else we come up with down the line.  It will lay them out according to whatever layout the user wants and hopefully look just like a report would on paper.  I think the first iteration will read a config in from a xml file and the next version may have editing similar to a wiki page.
• When working on the report widget I started thinking about how widgets will communicate with each other so I decided to refresh my memory on some existing popular flex application frameworks:
  • Cairngorm – not very dynamic out of the box
  • PureMVC – Could work but it completely ignore the built in eventing of flex and makes its own publish/subcribe methods…. so every view component needs to be wrapped in another layer to translate events.  This is, of course, a good idea to make reusable widgets but if you’re already doing all this extra work for your widgets, why not use your own architecture instead?

• Came up with a decent restore animation for panels: create a small bitmap copy of the panel at the dock’s location and then quickly transition it to the panels restore location while increasing the image to the panels original size, add the panel back in to the container under the bitmap, finally remove the bitmap
• Moved the animation and physics engine stuff in to the flex desktop framework and got them working
• Met with Allen and looked at a sample report for the QuadChart application.  We will need for a starter demo:
  • Datagrids with grouped columns and rows
  • Ability to color columns and rows either by name or by the data they contain
  • Rich text with layout controls
  • A piechart or something that displays selected data from the datagrids would be nice

• Started experimenting with AdvancedDataGrids and checking out their capabilities
  • Grouped columns is definitely possible
  • Grouped rows can be done by rolling up the data in to a kind of Tree/Datagrid hybrid, can then sum up leaf values in to branch
  • Coloring rows / columns / cells is not  a problem
  • Rich Text should not be an issue
• Anything beyond is a very static demo is going to require a data backend

• Colored the tooltips to match the default theme
• Starting work on a smart layout that will suggest window position when asked but not lock windows in place.  It will also, hopefully, be able to save and load window positions from a configuration
• Got distracted by minimize animations and make a cool physics based one

• Added a gradient angle to the application background functionality
• Stylized the StyleManagerPanel
• Now have apps loading in to the new desktop looking framework and the dock bar working at the bottom to hold minimized panels
• Looked around for some better icons for the dock bar / Sample apps:
  • Phone Appish icons
  • Antiques
  • Large, High-quality, and random
  • Basic set of web icons
  • Techy looking windows icon set
• The Dockbar looks much nicer with pretty new icons

• Backgrounds
• Backgrounds
• Backgrounds
• Adding a background image to a Flex 4 app is a bit more complicated, you have to created a skin for you app, make an image component and set it on a layer below you application’s content
• Worked awhile on making the style config panel and binding the options to a background configuration dataobject
• Worked on the skin to actually draw the background with the selected position: fit, center, stretch, tile
• Still a few binding issues to work out but almost done

• Started combing everything in to a new application framework which is going to look at lot more like a Mac desktop
• I started out trying to create 2 separate Flex library project: FGMUtils and FGMGraphicUtils but all the graphics stuff required references to FMUtils so I just combined them in to FGMCoreLib
• Created a MenuBar that pulls it’s menu option from another class that manages them.  This other class will monitor the data model and listen for event pertaining to menu options (maybe a swf module gets loaded with new apps or who knows what).  It also removes all that code from the main app file which can get out of control with a massive switch case statement
• Added the creation date class Dong found in to my debug panel after updating it to work in Flex 4

Next on the To Do:

• Background images
• Add in the Dock bar
• Log in screen

• Fixed a problem with DynamicPanels getting lost to the right / bottom out of bounds of the application, as usual it was the parent’s fault
• Fixed several issues with panels getting states mixed up / display in the wrong size
• Fixed issues with making a panel minimized before adding it to the display list
• Got all the kinks out and DynamicPanel seems to be working well.  Did not add any resize animation as I’m almost positive it would screw up any layout that contain them.  Animations can be left to the layouts.
• Documented the hell out of the component.  With documentaion and skin classes it’s 1,480 lines.

Started work on DynamicPanel for Flex 4 today:

• Started by making a Resizeable panel that extends the Spark TitleWindow
• Added logic for drag / drop moving of the panel
• added in a resize button and a listener to the title bar for double-click maximizing
• Created a SparkSkin to be the layout for the panel, including the buttons, title, content, and resize handle
• Tried to put the minimized and maximized dimension stuff in the skin but it turns out that if explicit(Width|Height) is set in actionscript, the skin can no longer resize itself
  • This is a pretty annoying fact because if we want to reskin out minimizable panel down the road with, say, a title bar that’s smaller, we have to go in to the non-skin related code and change the minimized height instead of doing it in the skin where it belongs
• Started putting logic in for minimize/maximize/restore size and position but either I’m making a mistake saving/setting values, the transitions are screwing things up, or the states are getting mixed up/overlapped somewhere