Build schedule as one on www.hbo.com

Hello Experts- I am newbie to Flex, can anyone  please let me know the approach to build schedule as one on www.hbo.com

Thanks very much !
passion420Asked:
Who is Participating?
 
petiexCommented:
Note that the code I posted actually works with the HBO schedule service if you deploy it to localhost, because they include localhost in their crossdomain.xml file: http://www.hbo.com/crossdomain.xml

Also, I just noticed that the durationAfterMidnight function is terribly wrong. It should be this:

        private function durationAfterMidnight(x:XML):Number {
            var dur:int = parseInt(x.duration), hour:int =  parseInt(String(x.playDate).substring(11, 13)),
                    minute:int = parseInt(String(x.playDate).substring(14, 16));
            if(hour == 0){
                hour = 24;
            }
            return dur - (24-hour)*60 + minute;
        }

Open in new window


It's still a little off, but I don't suppose you actually want to be displaying the HBO data. :)
0
 
Ray PaseurCommented:
I'm going to assume that you understand how to do "view source" and see all the moving parts of the HBO web site HTML and JavaScript, and that you have a depth of understanding in HTML and JavaScript, as those are critical elements of the HBO site, too.  You might want to contact HBO and find out how much money they spent developing the web site, just so you're not suddenly stunned by the costs at some point in the future.  It was not developed by "newbies" and you cannot reasonably expect to get the results they have until you have a lot more experience.  So you might consider hiring their agency as a reasonable tradeoff - after all, time is money.

That said, if your objective is to learn Flex, the responses to this search include the Adobe-endorsed learning tools.  Don't be impatient with yourself if you don't get immediately satisfactory results.  Notwithstanding Adobe's specious claims about how easy this is, I am sure you will find that there are a lot of moving parts and details that require time-consuming and painstaking work.
http://lmgtfy.com?q=Learn+Flex

Best of luck with your project, ~Ray
0
 
petiexCommented:
If you look at the schedule with firebug enabled, you can see that the data request when you click a day of the week is like this:
http://www.hbo.com/apps/schedule/rest/scheduleService/schedule?start=2011-04-21T04%3A00%3A00Z&end=2011-04-22T10%3A00%3A00Z&channels=28%2C29%2C30%2C31%2C1701%2C1702%2C1703&nonDstOffset=5&zuluOffset=4&dstOffset=4

Each element that builds the schedule looks like this:
<linearSchedule>
   <channelId>30</channelId>
   <channelName>HBO SIGNATURE EAST</channelName>
   <duration>58</duration>
   <focusId>730693</focusId>
   <isHD>Y</isHD>
   <isHboGOPlay>Y</isHboGOPlay>
   <isOnDemandPlay>Y</isOnDemandPlay>
   <nextPlayDate>2011-04-21T22:00:00</nextPlayDate>
   <pid>565187</pid>
   <playDate>2011-04-21T21:00:00</playDate>
   <vid>217657</vid>
</linearSchedule>

Open in new window

If asked to recreate their schedule from that data, my first pass would be something like this:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
                xmlns:s="library://ns.adobe.com/flex/spark"
                xmlns:mx="library://ns.adobe.com/flex/mx" width="100%" height="100%"
                creationComplete="initApp()">


    <fx:Script>
                <![CDATA[
        import mx.controls.Label;
        import mx.events.SliderEvent;
        import mx.rpc.events.ResultEvent;
        import mx.rpc.http.mxml.HTTPService;


        public function initApp():void {
            var service:HTTPService = new HTTPService();
            service.url = "http://www.hbo.com/apps/schedule/rest/scheduleService/schedule";
            service.request = {start:"2011-04-21T04:00:00Z", end:"2011-04-22T10:00:00Z", channels:"28,29,30,31,1701,1702,1703",nonDstOffset:5,zuluOffset:4,dstOffset:4};
            service.resultFormat = "e4x";
            service.addEventListener(ResultEvent.RESULT, handleResult);
            service.send();
            slider.addEventListener(SliderEvent.CHANGE, sliderChangeHandler);
        }
        private function sliderChangeHandler(event:SliderEvent):void{
            scrollableBox.horizontalScrollPosition = 60 * event.target.value;
        }

        private function handleResult(event:ResultEvent):void {
            var entries:XMLList = event.result.body.ScheduleResponse.linearSchedule;
            var currentChannel:int = -1;
            var lastChannel:int = -1;
            var currentRow:HBox = new HBox();
            grid.addChild(currentRow);

            for each (var x:XML in entries) {
                currentChannel = x.channelId;
                var isFirst:Boolean = false;
                if (lastChannel != -1 && lastChannel != currentChannel) {
                    currentRow = new HBox();
                    grid.addChild(currentRow);
                    isFirst = true;
                    trace("channel " + currentChannel);
                }
                lastChannel = currentChannel;
                var item:HBox = new HBox();
                item.horizontalScrollPolicy = "off";
                var text:Label = new Label();
                var summary:XML = event.result.body.ScheduleResponse.miniSummary.(@focusId == x.focusId)[0];
                item.width = isFirst ? 2 * durationAfterMidnight(x) : 2 * x.duration;
                item.toolTip = summary.title + "\n" + x.playDate + "\n" + x.channelName + "\n" + summary.summary;
                text.text = summary.title;
                currentRow.addChild(item);
                item.addChild(text);
            }


        }

        private function durationAfterMidnight(x:XML):Number {
            var start:Number = parseInt(x.duration) - (60 * 24 - parseInt(String(x.playDate).substring(11, 13)) * 60 - parseInt(String(x.playDate).substring(14, 16)) );
            trace("start time: " + start);
            return start;

        }
                ]]>
        </fx:Script>
    <fx:Style>
        @namespace mx "library://ns.adobe.com/flex/mx";
        mx|HBox {
            borderStyle: solid;
            horizontalGap: 0
        }
    </fx:Style>
    <mx:HSlider id="slider" minimum="0" maximum="51" height="60" width="245"/>
    <mx:HBox id="scrollableBox" width="245" horizontalScrollPolicy="off" verticalScrollPolicy="off">
        <mx:VBox id="grid">
            <mx:HBox>
                <mx:HBox width="60">
                    <mx:Text text="12:00 AM"></mx:Text>
                </mx:HBox>
                <mx:HBox width="60">
                    <mx:Text text="12:30 AM"></mx:Text>
                </mx:HBox>
                <mx:HBox width="60">
                    <mx:Text text="1:00 AM"></mx:Text>
                </mx:HBox>
                <mx:HBox width="60">
                    <mx:Text text="1:30 AM"></mx:Text>
                </mx:HBox>
                <mx:HBox width="60">
                    <mx:Text text="2:00 AM"></mx:Text>
                </mx:HBox>
                <mx:HBox width="60">
                    <mx:Text text="2:30 AM"></mx:Text>
                </mx:HBox>
                <mx:HBox width="60">
                    <mx:Text text="3:00 AM"></mx:Text>
                </mx:HBox>
                <mx:HBox width="60">
                    <mx:Text text="3:30 AM"></mx:Text>
                </mx:HBox>
                <mx:HBox width="60">
                    <mx:Text text="4:00 AM"></mx:Text>
                </mx:HBox>
                <mx:HBox width="60">
                    <mx:Text text="4:30 AM"></mx:Text>
                </mx:HBox>
                <mx:HBox width="60">
                    <mx:Text text="5:00 AM"></mx:Text>
                </mx:HBox>
                <mx:HBox width="60">
                    <mx:Text text="5:30 AM"></mx:Text>
                </mx:HBox>
                <mx:HBox width="60">
                    <mx:Text text="6:00 AM"></mx:Text>
                </mx:HBox>
                <mx:HBox width="60">
                    <mx:Text text="6:30 AM"></mx:Text>
                </mx:HBox>
                <mx:HBox width="60">
                    <mx:Text text="7:00 AM"></mx:Text>
                </mx:HBox>
                <mx:HBox width="60">
                    <mx:Text text="7:30 AM"></mx:Text>
                </mx:HBox>
                <mx:HBox width="60">
                    <mx:Text text="8:00 AM"></mx:Text>
                </mx:HBox>
                <mx:HBox width="60">
                    <mx:Text text="8:30 AM"></mx:Text>
                </mx:HBox>
                <mx:HBox width="60">
                    <mx:Text text="9:00 AM"></mx:Text>
                </mx:HBox>
                <mx:HBox width="60">
                    <mx:Text text="9:30 AM"></mx:Text>
                </mx:HBox>
                <mx:HBox width="60">
                    <mx:Text text="10:00 AM"></mx:Text>
                </mx:HBox>
                <mx:HBox width="60">
                    <mx:Text text="10:30 AM"></mx:Text>
                </mx:HBox>
                <mx:HBox width="60">
                    <mx:Text text="11:00 AM"></mx:Text>
                </mx:HBox>
                <mx:HBox width="60">
                    <mx:Text text="11:30 AM"></mx:Text>
                </mx:HBox>
                <mx:HBox width="60">
                    <mx:Text text="12:00 PM"></mx:Text>
                </mx:HBox>
                <mx:HBox width="60">
                    <mx:Text text="12:30 PM"></mx:Text>
                </mx:HBox>
                <mx:HBox width="60">
                    <mx:Text text="1:00 PM"></mx:Text>
                </mx:HBox>
                <mx:HBox width="60">
                    <mx:Text text="1:30 PM"></mx:Text>
                </mx:HBox>
                <mx:HBox width="60">
                    <mx:Text text="2:00 PM"></mx:Text>
                </mx:HBox>
                <mx:HBox width="60">
                    <mx:Text text="2:30 PM"></mx:Text>
                </mx:HBox>
                <mx:HBox width="60">
                    <mx:Text text="3:00 PM"></mx:Text>
                </mx:HBox>
                <mx:HBox width="60">
                    <mx:Text text="3:30 PM"></mx:Text>
                </mx:HBox>
                <mx:HBox width="60">
                    <mx:Text text="4:00 PM"></mx:Text>
                </mx:HBox>
                <mx:HBox width="60">
                    <mx:Text text="4:30 PM"></mx:Text>
                </mx:HBox>
                <mx:HBox width="60">
                    <mx:Text text="5:00 PM"></mx:Text>
                </mx:HBox>
                <mx:HBox width="60">
                    <mx:Text text="5:30 PM"></mx:Text>
                </mx:HBox>
                <mx:HBox width="60">
                    <mx:Text text="6:00 PM"></mx:Text>
                </mx:HBox>
                <mx:HBox width="60">
                    <mx:Text text="6:30 PM"></mx:Text>
                </mx:HBox>
                <mx:HBox width="60">
                    <mx:Text text="7:00 PM"></mx:Text>
                </mx:HBox>
                <mx:HBox width="60">
                    <mx:Text text="7:30 PM"></mx:Text>
                </mx:HBox>
                <mx:HBox width="60">
                    <mx:Text text="8:00 PM"></mx:Text>
                </mx:HBox>
                <mx:HBox width="60">
                    <mx:Text text="8:30 PM"></mx:Text>
                </mx:HBox>
                <mx:HBox width="60">
                    <mx:Text text="9:00 PM"></mx:Text>
                </mx:HBox>
                <mx:HBox width="60">
                    <mx:Text text="9:30 PM"></mx:Text>
                </mx:HBox>
                <mx:HBox width="60">
                    <mx:Text text="10:00 PM"></mx:Text>
                </mx:HBox>
                <mx:HBox width="60">
                    <mx:Text text="10:30 PM"></mx:Text>
                </mx:HBox>
                <mx:HBox width="60">
                    <mx:Text text="11:00 PM"></mx:Text>
                </mx:HBox>
                <mx:HBox width="60">
                    <mx:Text text="11:30 PM"></mx:Text>
                </mx:HBox>
                <mx:HBox width="60">
                    <mx:Text text="12:00 AM"></mx:Text>
                </mx:HBox>
                <mx:HBox width="60">
                    <mx:Text text="12:30 AM"></mx:Text>
                </mx:HBox>
                <mx:HBox width="60">
                    <mx:Text text="1:00 AM"></mx:Text>
                </mx:HBox>
            </mx:HBox>
        </mx:VBox>
    </mx:HBox>

</mx:Application>

Open in new window

0
 
Pravin AsarPrincipal Systems EngineerCommented:
Adobe/Google has open source lib (flexlib)

http://code.google.com/p/flexlib/


This has many ideas and examples.

In particular see the schedule and timeline examples.


0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.