?
Solved

Build schedule as one on www.hbo.com

Posted on 2011-04-20
6
Medium Priority
?
467 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 !
0
Comment
Question by:passion420
  • 2
4 Comments
 
LVL 111

Expert Comment

by:Ray Paseur
ID: 35447352
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
 
LVL 11

Expert Comment

by:petiex
ID: 35447522
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
 
LVL 11

Accepted Solution

by:
petiex earned 2000 total points
ID: 35447888
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
 
LVL 29

Expert Comment

by:Pravin Asar
ID: 35451414
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

Featured Post

VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

When crafting your “Why Us” page, there are a plethora of pitfalls to avoid. Follow these five tips, and you’ll be well on your way to creating an effective page.
Although a lot of people devote their energy toward marketing for specific industries, there are some basic principles that can be applied to any sector imaginable. We’ll look at four steps to take and examine how those steps were put into action fo…
The viewer will get a basic understanding of what section 508 compliance can entail, learn about skip navigation links, alt text, transcripts, and font size controls.
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).
Suggested Courses

840 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question