<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
    主站蜘蛛池模板: 亚洲啪啪综合AV一区| 亚洲国产人成精品| 伊人久久综在合线亚洲2019| 两个人看的www免费| 伊人久久综在合线亚洲91| h片在线播放免费高清 | h视频在线免费观看| 一本久到久久亚洲综合| 亚洲中文字幕一区精品自拍| 亚洲H在线播放在线观看H| 最新黄色免费网站| 免费看国产精品3a黄的视频 | 中文字幕亚洲综合小综合在线| 日韩免费a级毛片无码a∨| 毛片无码免费无码播放| 在线观看日本免费a∨视频| 精品亚洲成a人片在线观看| 一区二区三区四区免费视频 | 免费看小12萝裸体视频国产| 国产在线ts人妖免费视频| 亚洲午夜国产精品无码| 亚洲一区二区成人| 国产成人免费片在线观看| 亚洲人成网站免费播放| 无人在线直播免费观看| 久久香蕉国产线看免费| 亚洲人AV在线无码影院观看| 成人亚洲网站www在线观看| 免费无码毛片一区二区APP| 国产激情久久久久影院老熟女免费| 亚洲一区精彩视频| 国产亚洲精品国看不卡| 亚洲国产精品自在拍在线播放| 亚洲国产成人精品女人久久久 | 视频免费在线观看| 亚洲av成本人无码网站| 亚洲av无码片在线观看| 911精品国产亚洲日本美国韩国| 亚洲AⅤ无码一区二区三区在线| 日韩视频在线精品视频免费观看| 亚洲精品黄色视频在线观看免费资源 |