<rt id="bn8ez"></rt>
<label id="bn8ez"></label>

  • <span id="bn8ez"></span>

    <label id="bn8ez"><meter id="bn8ez"></meter></label>

    gembin

    OSGi, Eclipse Equinox, ECF, Virgo, Gemini, Apache Felix, Karaf, Aires, Camel, Eclipse RCP

    HBase, Hadoop, ZooKeeper, Cassandra

    Flex4, AS3, Swiz framework, GraniteDS, BlazeDS etc.

    There is nothing that software can't fix. Unfortunately, there is also nothing that software can't completely fuck up. That gap is called talent.

    About Me

     

    Flex and Deep Linking

    What is Deep Linking?

    Deep Linking is a term that describes the support for URL based navigation in applications that are not a collection of HTML pages. In a web site, for example, if you have a menu with Home, About Us, and Contact, whenever someone chooses an item from the menu, the browser will point to a new URL, such as http://mysite/home.html or http://mysite/contact.html. This is great because you can bookmark the page that you have an interest in and you can give the link to your friend. Without this, you have to send your friend a link to http://mysite along with an explanation about how to get to the Contact page.

    In Flex applications, when you don’t use Deep Linking this is also the case. You are not able to bookmark a particular state of the application or to send someone just a link to get him to the Contact form page. Deep Linking fixes this and also enables the browser back button.

    How does it work in Flex?

    In Flex 3, Deep Linking is implemented using fragments, the portions of URLs after the “#”. For example, in this link http://mysite/page.html#view=1 the fragment is view=1. Whenever you add to URL fragments (and you can write basically anything you want) the browser does not reload the page. This is exactly what you need in a Flex application. In a Flex app you have all the states inside of a SWF file, and thus you don’t change the content by reloading another page.

    Flex uses these fragments to “store” the state and when an URL is loaded, the Flex application can analyze the URL fragments to recreate the state corresponding to that URL. Let’s see how a programmer can write and read URL fragments from within a Flex app.

    BrowserManager is a Singleton that acts as a proxy between the browser and the Flex application. It lets you:

    • set fragments in the current URL
    • set the HTML title
    • register event listeners on URL change events

    The second class we use is the static class URLUtil which has methods to manipulate URLs. The last thing to know is that we need to turn off the HistoryManager (which enables back/forward navigation in Flex apps) in order to not interfere with fragment processing. We can turn it off by setting the property historyManagementEnabled to false (for example: <mx:Application historyManagementEnabled=”false”>).

    Most of the work a programmer does for Deep Linking is centered on creating functions that either “serialize” the current state to URL or “deserialize” the URL and use that information to change the Flex application state.

    A Simple Example

    Let’s see a simple Flex application that use Deep Linking. It has three states: the default state, “Step 2″ state and “Step 3″ state. Click here to open the application – you can see the source code by choosing “View Source” from the contextual menu (right click on the application). To illustrate different states in the application, I used an accordion. I could have used mx:states, a tabset or some other UI components. It wouldn’t matter, the principle is the same. As I said the main task a programmer has while working with Deep Linking is to create the functions to serialize the state to URL and deserialize the URL to get the states out of it. Then, you need to hook these functions into your application by registering them as event listeners. Usually, the function for creating the URL gets called a lot from different parts of your application. In my sample these functions are doUpdateURL() for serializing to URL and parseURL() for deserializing the URL. In the application, the URL controls what step of the accordion is selected. For this I read the current selectedIndex from the accordion and I save it as a fragment. For example, for step 2, I will have something like this:http://corlan.org/downloads/examples/deep_linking_project/deep_linking_project.html#view=1 – note the view=1 at the end of the URL, this is the fragment that stores the selectedIndex.

    As you can see in the mx:Application I set the historyManagementEnabled property to false. Then I declare three variables: one to keep a reference to BrowserManager, one flag to use it when parsing the URL and one variable to store the titles I want to be displayed for each state.

    Then I define the init() function; this is called when the application gets loaded. Here we initialize the browserManager variable and add to browserManager the event listener for URL changes. The last line calls the parseURL() function, see the description of this function below.

    //local reference to the singleton class BrowserManager
    public var browserManager:IBrowserManager;
    //flag to signal that a URL parsing is in progress
    private var isParsing:Boolean;
    //string arrays which stores the titles to be used for each state
    private var arrTitles:Array = ["Welcome to Flex Deep Linking Example", "Step 2", "Step 3"];
    /**
     * this function is called when the app is loaded. 
     * It is initializing the browserManager variable and it registers an event listener 
     * for BROWSER_URL_CHANGE event.
     */
    private function init():void {
    browserManager = BrowserManager.getInstance();
    browserManager.init("", "Welcome to Flex Deep Linking Example");
    browserManager.addEventListener(BrowserChangeEvent.BROWSER_URL_CHANGE, parseURL);
    callLater(parseURL);
    }

    Next I define the parseURL() function which is the event listener registered to browserManager. This function reads the URL, and if fragments are found, it sets the title and changes the selection in the accordion.

    /**
     * This is the event listener called whenever the browser URL changes. 
     * @param event
     */
    private function parseURL(event:Event = null):void {
    isParsing = true;
    //retrieve the current fragmens from the browser URL and parse them into an Object;
    //eg if we had view=1 we will have an object with the propery "view" and value "1"
    var o:Object = URLUtil.stringToObject(browserManager.fragment);
    //if it is the default state URL;
    if (o.view == undefined)
    o.view = 0;
    //set the accordion selection to the one retrieve it from URL    
    ac.selectedIndex = o.view;
    //set the title displayed by the browser to the title coresponding to accordion selection
    var title:String = arrTitles[o.view];
    browserManager.setTitle(title);
    isParsing = false;
    }

    Then I define the updateURL() function which is called when someone makes a selection in the accordion. This function verifies that no other instance of parseURL() is running in the same time; if not, it calls doUpdateURL().

    /**
     * Event listener registered for accordion changes;
     */
    private function updateURL():void {
    //if we are not doing a parsing of URL
    if (!isParsing)
    //callLater postpones the execution of the given function until the next frame; 
    //thus the UI has a chance to be created;
    callLater(doUpdateURL);
    }

    The last function is doUpdateURL(). This function rewrites the browser URL and page title:

    /**
     * This function modifies the browser URL.
     */
    private function doUpdateURL():void {
    var title:String = "";
    var fragments:String = "";
    var o:Object = {};
    //if the user selected other step of the accordion than the first one
    if (ac.selectedIndex > 0)
    o.view = ac.selectedIndex;
    //retrieve the title for the selected state    
    title = arrTitles[ac.selectedIndex];
    //serialize the object to fragmenst string
    fragments = URLUtil.objectToString(o);
    //sets the title of the browser
    browserManager.setTitle(title);
    //sets the fragments to the browser URL
    browserManager.setFragment(fragments);
    }

    And last we need the UI. I used an accordion to simulate different states. On the mx:accordion I registered the function updateURL() for the change event.

    <mx:HBox>
    <mx:Accordion id="ac" change="updateURL()" width="200">
    <mx:Canvas label="Step 1" width="100%" height="100%">
    <mx:TextArea editable="false" text="Step 1 Accordion Content" height="300" width="100%"/>
    </mx:Canvas>
    <mx:Canvas label="Step 2" width="100%" height="100%">
    <mx:TextArea editable="false" text="Step 2 Accordion Content" height="300" width="100%"/>
    </mx:Canvas>
    <mx:Canvas label="Step 3" width="100%" height="100%">
    <mx:TextArea editable="false" text="Step 3 Accordion Content" height="300" width="100%"/>
    </mx:Canvas>
    </mx:Accordion>
    <mx:Canvas width="439" height="82">
    <mx:TextArea x="19" y="10" width="410" height="62" editable="false" text="Sample Application for Deep Linking in Flex. As you change the Accordion selection the URL is updated and you can paste this URL in a new browser. The state of the application is recreated from the URL."/>
    </mx:Canvas>
    </mx:HBox>

    One last thing: BrowserManager talks to the browser using JavaScript. because not all browsers work the same, Deep Linking works with: Internet Explorer 6 & 7 (Win), Firefox (Mac & Win), Safari (Mac).

    That’s it! If you want to find more you can visit the Adobe page or you can search the Flex 3 documentation on BrowserManager.

    from http://corlan.org/2008/06/25/flex-and-deep-linking/

    posted on 2010-11-12 15:06 gembin 閱讀(661) 評(píng)論(0)  編輯  收藏 所屬分類(lèi): Flex

    導(dǎo)航

    統(tǒng)計(jì)

    常用鏈接

    留言簿(6)

    隨筆分類(lèi)(440)

    隨筆檔案(378)

    文章檔案(6)

    新聞檔案(1)

    相冊(cè)

    收藏夾(9)

    Adobe

    Android

    AS3

    Blog-Links

    Build

    Design Pattern

    Eclipse

    Favorite Links

    Flickr

    Game Dev

    HBase

    Identity Management

    IT resources

    JEE

    Language

    OpenID

    OSGi

    SOA

    Version Control

    最新隨筆

    搜索

    積分與排名

    最新評(píng)論

    閱讀排行榜

    評(píng)論排行榜

    free counters
    主站蜘蛛池模板: 亚洲人色婷婷成人网站在线观看| 毛片免费视频观看| 欧洲亚洲国产精华液| 午夜毛片不卡免费观看视频| 亚洲免费网站在线观看| 亚洲免费视频网址| 在线观看免费视频一区| 中文字幕亚洲综合久久男男| 日韩在线视频免费| 亚洲伊人色欲综合网| 99精品热线在线观看免费视频| 无码一区二区三区免费视频| 最新亚洲精品国偷自产在线| 天天天欲色欲色WWW免费| 亚洲国产成人久久精品大牛影视| 日韩激情淫片免费看| 国产精品黄页免费高清在线观看| 久久国产成人亚洲精品影院 | j8又粗又长又硬又爽免费视频| 亚洲福利精品一区二区三区| a级特黄毛片免费观看| 亚洲一区二区中文| 日韩激情淫片免费看| 女人隐私秘视频黄www免费| 亚洲精品在线免费观看视频| 日本人的色道www免费一区| 久久久久免费视频| 亚洲成a人片在线观看精品| 免费一区二区视频| 四虎成人精品永久免费AV| 国产成人精品日本亚洲直接| 国产黄色片在线免费观看| 中文字幕高清免费不卡视频| 亚洲免费网站在线观看| 久久亚洲国产精品123区| 韩国免费一级成人毛片| 国内永久免费crm系统z在线| 蜜桃传媒一区二区亚洲AV| 亚洲一区二区三区四区在线观看| 亚洲国产成人久久综合碰| 女人被弄到高潮的免费视频|