We help IT Professionals succeed at work.

Fit page using scroller - Adobe Flex Mobile

Trying_to_Learn
on
Extension to http://www.experts-exchange.com/Web_Development/Web_Languages-Standards/Flex/Q_27623442.html

Need to use scroller to fit screen size in my flex app
Comment
Watch Question

Top Expert 2011
Commented:
<?xml version="1.0" encoding="utf-8"?>
<s:View xmlns:fx="http://ns.adobe.com/mxml/2009"
            xmlns:s="library://ns.adobe.com/flex/spark"
            xmlns:mx="library://ns.adobe.com/flex/mx"
            actionBarVisible="true"
            overlayControls="false" tabBarVisible="false" title="Book"
            viewActivate="init()">
      
      <fx:Script>  
            <![CDATA[  
                  import mx.collections.*;
                  import mx.controls.SWFLoader;
                  import mx.core.UIComponent;
                  import mx.events.ItemClickEvent;

                  private var loader:Loader;
                  [Bindable]
                  private var pdfContent:MovieClip;
                  [Bindable]
                  private var currentPage:uint;
                  
                  private var lastSearchIndex:int;
                  private var lastSearchText:String;
                  
                  private function init():void{
                        var lc:LoaderContext = new LoaderContext(false, ApplicationDomain.currentDomain);
                        lc.allowLoadBytesCodeExecution = true;
                        loader = new Loader();
                        loader.contentLoaderInfo.addEventListener(Event.COMPLETE, onComplete);
                        loader.load(new URLRequest("Paper.swf"));
                        pdfHolder.addChild(loader);
                        initCollections();
                  }
                  
                  private function onComplete(event:Event):void{
                        event.target.removeEventListener(Event.COMPLETE, onComplete);
                        var timer:Timer = new Timer(100);
                        timer.addEventListener(TimerEvent.TIMER, handleTimer);
                        timer.start();
                  }

                  
                  private function handleTimer(event:TimerEvent):void{
                        pdfContent = loader.content as MovieClip;
                        if(pdfContent && pdfContent.currentFrame == 2 && pdfContent.numChildren > 0) {
                              event.target.removeEventListener(TimerEvent.TIMER, handleTimer);
                              event.target.stop();
                              sendMessage("PageNum", 1);
                        }
                  }
                  
                  private function sendMessage(arg1:*, arg2:*=null):void{
                        var zoomFactor:Number = .1;
                        scroller.viewport.verticalScrollPosition = 0;
                        scroller.viewport.horizontalScrollPosition = 0;
                        switch(arg1){
                              case "PageDn":
                                    if(pdfContent.currentFrame < pdfContent.framesLoaded){
                                          currentPage = pdfContent.currentFrame + 1;
                                          pdfContent.gotoAndStop(currentPage);
                                    }
                                    break;
                              case "PageUp":
                                    if(pdfContent.currentFrame > 1){
                                          currentPage = pdfContent.currentFrame - 1;
                                          pdfContent.gotoAndStop(currentPage);
                                    }
                                    break;
                              case "PageNum":
                                    if(arg2 >= 1 && arg2 <= pdfContent.framesLoaded){
                                          currentPage = arg2;
                                          pdfContent.gotoAndStop(currentPage);
                                    }
                                    break;
                              case "ZoomIn":
                                    if(pdfContent.scaleX < 2){
                                          pdfContent.scaleX += zoomFactor;
                                          pdfContent.scaleY += zoomFactor;
                                    }
                                    break;
                              case "ZoomOut":
                                    if(pdfContent.scaleX > 1){
                                          pdfContent.scaleX -= zoomFactor;
                                          pdfContent.scaleY -= zoomFactor;
                                    }
                                    break;
                              case "Find":
                                    if(lastSearchText != arg2){
                                          lastSearchText = arg2;
                                          lastSearchIndex = -1;
                                    }
                                    if(findText(lastSearchIndex, currentPage, pdfContent.framesLoaded, arg2) == false)
                                          findText(-1, 1, currentPage, arg2)
                        }
                        pdfHolder.width = pdfContent.width;
                        pdfHolder.height = pdfContent.height;
                  }
                  
                  private function findText(searchIndex:int, start:uint, end:uint, text:String):Boolean{
                        for(var i:uint = start; i <= end; i++){
                              pdfContent.gotoAndStop(i);
                              var snap:TextSnapshot = pdfContent.textSnapshot;
                              var index:int = snap.findText(searchIndex + 1, text, false);
                              if(index != -1){
                                    lastSearchIndex = index;
                                    return true;
                              }
                        }
                        return false;
                  }
                  
            /*
                  protected function load():void{
                        _webView = new StageWebView();
                        _webView.stage = stage;
                        _webView.loadURL("file:///C:/Users/hp/Adobe Flash Builder 4.6/SwipeMenu/src/test.html");
                        _webView.addEventListener(Event.COMPLETE,handleLoad);
                        stage.addEventListener(StageOrientationEvent.ORIENTATION_CHANGE, orientationChangeHandler);
                        orientationChangeHandler();
                  }
                  
                  protected function orientationChangeHandler(event:Event=null):void{
                        _webView.viewPort = new Rectangle(0, hGr.height, width, height);
                  }
                  
                  protected function orientationChangeHandler2(event:Event=null):void{
                        _webView.viewPort = new Rectangle(300, hGr.height, width-300, height);
                  }
                   */
                  
                  
                  

                  protected function button2_clickHandler(event:MouseEvent):void
                  {
                        trace(event.target.label + " clicked! " + hg.isPopUp);
                        hg.closeDropDown();
                  }
                  
                  [Embed(source="MxTree.swf", mimeType="application/octet-stream")]
                  private var treeSWF:Class;
                  
                  private var loader2:Loader;
                  private var tree:*;
                  
                  public var xmlBalanced:XMLList =
                        <>
                                                                  <node page="1" label="Cover Page"/>
                                                                  <node page="2" label="Forward"/>
                                                                  <node page="3" label="Table of Contents"/>
                                                                  <node page="5" label="Chapter 1">
                                                                  <node page="6" label="1.0 Direct Link Networks-----------------6"/>
                                                
                                                                  <node page="6" label="1.1 Hardware Building Blocks-------------6">
                                                                  <node page="7" label="1.1.1 Nodes------------------------------7"/>
                                                                  <node page="7" label="1.1.2 Links------------------------------7"/>
                                                                  </node>
                                                
                                                                  <node page="8" label="1.2 Encoding-----------------------------8"/>
                                                
                                                                  <node page="9" label="1.3 Framing------------------------------9">
                                                                  <node page="10" label="1.3.1 Byte-Oriented Protocols-----------10"/>
                                                                  <node page="10" label="1.3.2 Bit-Oriented Protocols (HDLC)-----10"/>
                                                                  <node page="10" label="1.3.2 Clock-Based Framing (SONET)-------10"/>
                                                                  </node>
                                                
                                                                  <node page="10" label="1.4 Error Detection---------------------10">
                                                                  <node page="11" label="1.4.1 Two-Dimensional Parity------------11"/>
                                                                  <node page="11" label="1.4.2 Internet Checksum Algorithm-------11"/>
                                                                  <node page="12" label="1.4.3 Cyclic Redundancy Check0000-------12"/>
                                                                  </node>
                                                
                                                                  <node page="13" label="1.5 Reliable Transmission---------------13">
                                                                  <node page="14" label="1.5.1 Stop-and-Wait---------------------14"/>
                                                                  </node>
                                                
                                                                  <node page="14" label="1.6 Ethernet----------------------------14">
                                                                  <node page="15" label="1.6.1 Physical Properties---------------15"/>
                                                                  <node page="16" label="1.6.2 Access Protocol-------------------16"/>
                                                                  <node page="17" label="1.6.3 Experience with Ethernet----------17"/>
                                                                  </node>
                                                      </node>
                                                </>;
                  
                  private function initCollections():void {
                        if(treeHolder.numChildren == 0){
                              var lc:LoaderContext = new LoaderContext(false, ApplicationDomain.currentDomain);
                              lc.allowLoadBytesCodeExecution = true;
                              loader2 = new Loader();
                              loader2.loadBytes(new treeSWF(), lc);
                              loader2.contentLoaderInfo.addEventListener(Event.COMPLETE, onComplete2);
                              treeHolder.addChild(loader2);
                              //treeHolder.addEventListener(StageOrientationEvent.ORIENTATION_CHANGE, orientationChangeHandler2);
                              //orientationChangeHandler2();
                        }else{
                              //treeHolder.removeEventListener(StageOrientationEvent.ORIENTATION_CHANGE, orientationChangeHandler);
                              //treeHolder.removeChildAt(0);
                              //treeHolder.addEventListener(StageOrientationEvent.ORIENTATION_CHANGE, orientationChangeHandler);
                              //orientationChangeHandler();
                        }
                  }
                              

            /*             treeHolder.addEventListener(StageOrientationEvent.ORIENTATION_CHANGE, orientationChangeHandler2);
                        orientationChangeHandler2();
                  } */
                  
                  private function onComplete2(event:Event):void{
                        event.target.removeEventListener(Event.COMPLETE, onComplete2);
                        var timer:Timer = new Timer(100);
                        timer.addEventListener(TimerEvent.TIMER, handleTimer2);
                        timer.start();
                  }
                  
                  private function handleTimer2(event:TimerEvent):void{
                        var content:MovieClip = loader2.content as MovieClip;
                        if(content && content.currentFrame == 2 && content.numChildren > 0) {
                              event.target.addEventListener(TimerEvent.TIMER, handleTimer2);
                              event.target.stop();
                              tree = content["application"].tree;
                              tree.labelField = "@label";
                              tree.dataProvider = xmlBalanced;
                              tree.width = treeHolder.width;
                              tree.height = treeHolder.height;
                              tree.setStyle("borderStyle", "none");
                              tree.addEventListener(ItemClickEvent.ITEM_CLICK, onItemClick);
                        }
                  }
                  
                  private function onItemClick(event:*):void{
                        var item:Object = event.itemRenderer.data;
                        if (tree.dataDescriptor.isBranch(item)) {
                              tree.expandItem(item, !tree.isItemOpen(item), true);
                        }
                        
                        var data:XML = event.itemRenderer.data;
                        if(data.@page.length())
                              sendMessage("PageNum", data.@page.toString()-1);
                        if(data.@url.length())
                              parentDocument.rightView.webView.loadURL(data.@url);
                  }
                                                
            ]]>
            
      </fx:Script>  
            
      <mx:UIComponent id="treeHolder" width="300" height="400"/>
      <s:Scroller id="scroller" x="{treeHolder.width}" width="{width - treeHolder.width}" height="{height}">
            <s:Group width="100%" height="100%">
                  <mx:UIComponent id="pdfHolder"/>
            </s:Group>
      </s:Scroller>

      <s:navigationContent>
            <s:Button   label="Back" icon="assets/book.png"/>
      </s:navigationContent>
      <s:titleContent>
            <s:HGroup id="hGr"   width="787" height="55"
                          clipAndEnableScrolling="true" gap="8" horizontalAlign="left"
                          verticalAlign="middle">
                  <s:Button width="102" height="52" label="TOC" icon="@Embed('assets/contents-32.png')" click="initCollections()"/>
                  <s:Button id="pageDown"   width="52" height="52" click="sendMessage('PageDn')" icon="@Embed('assets/Down_32.png')"/>
                  <s:Button id="pageUp"   width="52" height="52" click="sendMessage('PageUp')" icon="@Embed('assets/Up_32.png')"/>
                  <s:Label   color="#FDF9F9" fontSize="20" text="Page: {pdfContent.framesLoaded}"/>
                  <s:TextInput id="PN" text="{currentPage}" width="59" height="52" enter="sendMessage('PageNum', int(PN.text)-1)" fontSize="16" fontStyle="normal"/>
                  <s:CalloutButton id="cb_Search" width="127" height="52" label="Search" calloutDestructionPolicy="never"
                                           icon="assets/Zoom-32.png"
                                           verticalPosition="start">
                        <s:calloutLayout>
                              <s:HorizontalLayout />
                        </s:calloutLayout>
                        <s:calloutContent>
                              <s:TextInput id="src_txt" width="127" height="52" enter="sendMessage('Find', src_txt.text)"/>
                        </s:calloutContent>
                  </s:CalloutButton>
                  
                  
                  <s:CalloutButton id="hg" height="52" calloutDestructionPolicy="never"
                                           icon="@Embed('assets/Highlightmarker-green-32.png')" verticalPosition="after">
                        <!-- layout the callout content here -->
                        <s:calloutLayout>
                              <s:VerticalLayout paddingTop="10" paddingBottom="10" paddingLeft="10" paddingRight="10" horizontalAlign="center" gap="5"/>
                        </s:calloutLayout>
                        <s:calloutContent>
                              <s:Button icon="@Embed('assets/Highlightmarker-green-32.png')" click="button2_clickHandler(event)"/>
                              <s:Button icon="@Embed('assets/Highlightmarker-32.png')" click="button2_clickHandler(event)"/>
                              <s:Button icon="@Embed('assets/Highlightmarker-red-32.png')" click="button2_clickHandler(event)"/>
                              <s:Button icon="@Embed('assets/Highlightmarker-blue-32.png')" click="button2_clickHandler(event)"/>
                        </s:calloutContent>
                  </s:CalloutButton>
                  <s:Button   height="52" icon="@Embed('assets/Emblem-Note-32.PNG')"/>
                  <s:Button   height="52" icon="@Embed('assets/bookmark-32.png')"/>
                  <s:Button id="zoomin"   height="52" click="sendMessage('ZoomIn')" icon="@Embed('assets/Zoom-in-32.png')"/>
                  <s:Button id="zoomout"   height="52" click="sendMessage('ZoomOut')" icon="@Embed('assets/Zoom-out-32.png')"/>
            </s:HGroup>
      </s:titleContent>

      <!--s:actionContent>
            <s:CalloutButton width="80" icon="@Embed('assets/Settings.png')" toolTip="Settings"
                                     verticalPosition="after">
                  <s:calloutLayout>
                        <s:VerticalLayout paddingTop="10" paddingBottom="10" paddingLeft="10" paddingRight="10" horizontalAlign="center" gap="5"/>
                  </s:calloutLayout>
                  <s:calloutContent>
                  </s:calloutContent>
            </s:CalloutButton>
            <s:Button width="80" fontStyle="normal" fontWeight="bold"
                          icon="@Embed('assets/consulting.png')" lineThrough="false" textDecoration="none"
                          toolTip="Help"/>
      </s:actionContent-->

      <s:states>
            <s:State name="portrait"/>
            <s:State name="landscape"/>
      </s:states>
</s:View>

Author

Commented:
Scroller is a lot better than before.. Thanks!

P.S. Search is still not working.. not sure how to compile in another SWF format because of my videos..

Author

Commented:
Scroller not working so well :)

http://www.experts-exchange.com/Web_Development/Web_Languages-Standards/Flex/Q_27636933.html

I have it almost fixed.. just need to know how to go left/right on left/right swipe when user is zoomed in

Explore More ContentExplore courses, solutions, and other research materials related to this topic.