We help IT Professionals succeed at work.

Check out our new AWS podcast with Certified Expert, Phil Phillips! Listen to "How to Execute a Seamless AWS Migration" on EE or on your favorite podcast platform. Listen Now

x

Build schedule as one on www.hbo.com

Medium Priority
566 Views
Last Modified: 2012-05-11
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 !
Comment
Watch Question

Most Valuable Expert 2011
Author of the Year 2014

Commented:
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

Commented:
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

Commented:
Unlock this solution and get a sample of our free trial.
(No credit card required)
UNLOCK SOLUTION
Pravin AsarPrincipal Systems Engineer
CERTIFIED EXPERT
Top Expert 2005

Commented:
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.


Unlock the solution to this question.
Thanks for using Experts Exchange.

Please provide your email to receive a sample view!

*This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

OR

Please enter a first name

Please enter a last name

8+ characters (letters, numbers, and a symbol)

By clicking, you agree to the Terms of Use and Privacy Policy.