Creating custom entry renderer for Adobe Flex Schedule Viewer

July 15, 2008 at 11:09 AMAmer Gerzic

Last couple of weeks I have been coding a lot of Flex, specifically ScheduleViewer component included in flexlib version 1.9. I was mostly happy with ScheduleViewer component but I did have some minor annoyances. Actually, it was more curiosity than need that drove me to investigate the possibility of creating a custom entry renderer for ScheduleViewer component. As it turns out, it was very easy. Investigating the source code of the library, I noticed the component AbstracSolidScheduleEntryRenderer. This component was responsible for simple entry rendering, which I wanted to modify. Specifically, I wanted to modify the content of each schedule entry i.e. the date object was simply formatted as time rather than a date. Because of the fact that my schedule was really date related (rather than time related), I needed a renderer that would meet my needs. Let's look at the code of MyEntryRenderer.mxml:

<?xml version="1.0" encoding="utf-8"?>
<renderers:AbstractSolidScheduleEntryRenderer 
    xmlns:mx="http://www.adobe.com/2006/mxml" 
    xmlns:renderers="flexlib.scheduling.scheduleClasses.renderers.*" 
    paddingTop="0" 
    paddingLeft="0">
        
    <mx:Script>
        <![CDATA[
            import mx.formatters.DateFormatter;
            import flexlib.scheduling.scheduleClasses.IScheduleEntry;
            
            private var formatter:DateFormatter;
            
            override public function onPreinitialize() : void
            {
                formatter = new DateFormatter();
                formatter.formatString = "MM/DD";
            }
            
            override public function set data ( value : Object ) : void
            {
                super.data = value;
                
                entry = value as IScheduleEntry;
                var content : SimpleScheduleEntry = SimpleScheduleEntry( entry );
                
                drawTextContent(content);
            }
            
            protected function drawTextContent(content : SimpleScheduleEntry) : void
            {   
                formatter.error = "";
                
                var time : String = formatter.format( content.startDate ) 
                 + " - " + formatter.format( content.endDate );
                
                toolTip = time + "\n" + content.label;
                contentLabel.text = time;
                contentLabel.styleName = getStyle( "timeStyleName" );
                contentText.text = content.label;       
            }
        ]]>
    </mx:Script>
    
    <mx:Label id="contentLabel" />
    <mx:Text id="contentText" />
    
</renderers:AbstractSolidScheduleEntryRenderer>

From the code above it is clear that we are simply customizing existing component to meet our needs. Similar to any custom components in Flex, we are simply modifying the content of an existing component by using DateFormatter object. The function DrawTextContent is responsible to set the content of the text box and a label found on AbstractSolidScheduleEntryRenderer. This function is called by setter function of the data member of the AbstractSolidScheduleEntryRenderer, which is called by ScheduleViewer component during the drawing phase. Once the customization is performed, we simply have to specify that we want to use the new renderer in following way:

<ns1:ScheduleViewer
    id="MyScheduleViewer" 
    width="800" 
    height="100%"
    rowHeight="25"
    startDate="{ StartDate }"
    endDate="{ EndDate }"
    verticalGridLineAlpha=".1"
    horizontalGridLineAlpha=".1"
    entryRenderer="MyEntryRenderer"
    entryLayout="flexlib.scheduling.scheduleClasses.layout.SimpleLayout"
    color="#FFFFFF"
    borderColor="#FFFFFF" 
    themeColor="#FFFFFF" 
    backgroundColor="#FFFFFF" 
    click="OnScheduleClick(event)" />

As we can see from the code above, all we needed to do is set entryRenderer property to be our newly defined component. One thing to note is that we do have to set entryLayout property to be "…layout.SimpleLayout", because only then the rendering is performed using AbstractSolidScheduleEntryRenderer. At this point the customization is finished.

Posted in: Adobe Flex

Tags:

Setting up debugging environment - ASP.NET and Flex Builder

July 11, 2008 at 9:07 PMAmer Gerzic

Unlike Silverlight, Flex Builder does not integrate with Visual Studio programming environment. Therefore, debugging ASP.NET or Flex applications can become very cumbersome, especially when they become very large. However, with Flex Builder 3, Adobe has made possible to utilize built in ASP.NET web server (Cassini) to debug Flex applications. Following post describes one possible way to set up both environments to make debugging easier.

More...

Posted in: .NET | Adobe Flex | ASP.NET

Tags: , , ,

Adobe Flex and ASP.NET authentication using HTTPService and IHttpHandler

June 27, 2008 at 8:45 AMAmer Gerzic

Lately, Adobe Flex has been getting more and more attention in programming community. Especially after the launch of open source version of Flex SDK developers are able to make rich Internet applications (RIA) using Flex, which (as everybody knows) produces a flash file (swf) that can be used in any web application. The article will focus on the following topics:

  1. Communication between Action Script (HTTPService) and .NET (HTTP Handler);
  2. Security - securing HTTP Handler calls from unauthorized access;
  3. ASP.NET Forms Authentication and Authorization through Flex;
  4. ASP.NET Handlers and session management;

It is assumed that the reader is familiar with basic concepts of ASP.NET handlers, forms authentication, and Adobe's Action Script.
More...

Posted in: Adobe Flex | ASP.NET | C#

Tags: , , , , ,