Solved

Fit page using scroller - Adobe Flex Mobile

Posted on 2012-03-10
3
580 Views
Last Modified: 2012-03-17
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
0
Comment
Question by:Trying_to_Learn
  • 2
3 Comments
 
LVL 29

Accepted Solution

by:
dgofman earned 500 total points
ID: 37705227
<?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>
0
 

Author Closing Comment

by:Trying_to_Learn
ID: 37706048
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..
0
 

Author Comment

by:Trying_to_Learn
ID: 37733410
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
0

Featured Post

PRTG Network Monitor: Intuitive Network Monitoring

Network Monitoring is essential to ensure that computer systems and network devices are running. Use PRTG to monitor LANs, servers, websites, applications and devices, bandwidth, virtual environments, remote systems, IoT, and many more. PRTG is easy to set up & use.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
flex 4.5 upload with java servlet 1 1,063
Clickable link on fields from mysql 7 339
how to create a customized menu in Flex ? 1 579
learning partner 1 216
First things first - Preparation We need all the part for this install and it's much nicer to have them all on hand when you need them so here's what's required. Download Eclipse 3.5 32 bit (I like the Classic flavour) from here. (http://www.e…
An article on effective troubleshooting
This Micro Tutorial will give you a basic overview how to record your screen with Microsoft Expression Encoder. This program is still free and open for the public to download. This will be demonstrated using Microsoft Expression Encoder 4.
Windows 10 is mostly good. However the one thing that annoys me is how many clicks you have to do to dial a VPN connection. You have to go to settings from the start menu, (2 clicks), Network and Internet (1 click), Click VPN (another click) then fi…

813 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

Need Help in Real-Time?

Connect with top rated Experts

14 Experts available now in Live!

Get 1:1 Help Now