如何使用SplitViewNavigator组件在Flex中显示主/详细导航 [英] How do I use a SplitViewNavigator component to show Master/Detail navigation in Flex

查看:218
本文介绍了如何使用SplitViewNavigator组件在Flex中显示主/详细导航的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我在使用Adobe Flash Builder在flex 4.6中使用SplitViewNavigator组件时遇到问题。



[更新] * * *



我正在为黑莓手册平板电脑构建一个reddit应用程序,并利用reddit的API。我有三个mxml视图:RedditReaderHomeView.mxml,redditFeed.mxml和subredditList.mxml。在RedditReaderHomeView.mxml中我有一个splitViewNavigator。在我的SplitViewNavigator的左侧,存在subredditList.mxml,右侧的位置是redditFeed.mxml。在初始化时,redditFeed.mxml引入XML数据以使用reddit条目填充其列表,subredditList.mxml将XML数据拉入其中,并将其列表中的subreddits(category)进行显示。当用户点击左侧的子项目时,右侧的redditFeed.mxml应该更新,以便它提取的数据是从左侧选择的子列表类别的条目。换句话说,经典主/细节导航。左侧的类别,在右侧打开该类别的条目。



嗯,我有一个功能,将所选的subreddit的URL传递给redditFeed.mxml。



subredditList.mxml - 此处选择一个subreddit,并将其url发送到redditFeed.mxml

$ b中的函数
$ b

  public function list_clickHandler(event:IndexChangeEvent):void {
var RSSItem:Object = redditList.dataProvider.getItemAt(event.newIndex);
var thisItem:Item = RSSItem as Item;
rlink = thisItem.link;
var moddedLink:String = rlink.slice(1,int.MAX_VALUE)
var pushSub:redditFeed = new redditFeed();
pushSub.myList_creationCompleteHandler(moddedLink);
}

redditFeed.mxml - 该URL用于从这个特定的子目录中获取数据...

  public function myList_creationCompleteHandler(url:String):void 
{
getRedditFeedResult.token = redditFeedGrabber.getRedditFeed(url);
}

...虽然这个数据从来没有似乎显示在spark列表组件,即使我可以看到通过网络监视器进行呼叫。
我花了几个小时试图解决这个问题。而且我相信它与视图是活跃与停用有关,因为当我尝试在redditFeed.mxml中放置相同的调用时,调用已经过,列表中的数据被更新。我以为也许是因为在同一个视图中执行的操作包含显示数据的列表。所以在这种情况下会是活跃的,因为该视图中正在执行该操作。



感谢任何人都可以提供的帮助。另外,请不要犹豫,要求澄清/我的更多细节。我reeallly想解决这个。
谢谢!



RedditReaderHomeView.mxml - 以下是您请求的代码。 Lemme知道你是否需要更多/别的东西。

 <?xml version =1.0encoding =utf-8 ?> 
< s:查看xmlns:fx =http://ns.adobe.com/mxml/2009
xmlns:s =library://ns.adobe.com/flex/spark
actionBarVisible =falsetabBarVisible =truetitle =Domisy的Reddit阅读器creationPolicy =all
actionBarVisible.landscape =true>



< fx:脚本>
<![CDATA [
import com.adobe.fiber.core.model_public;
import mx.events.FlexEvent;
import views.redditFeed;

public var defUrl:String = new String();


public function refreshRSS(event:Event):void
{
// *** UPDATED CODE ****
var refreshFunction:Object = redditFeedNav.getElementAt(0);
refreshFunction.refreshList();


// var refreshFunction:redditFeed = new redditFeed();
//refreshFunction.refreshList();
}
]]>

< / fx:脚本>


< fx:声明>

< / fx:声明>



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




< s:actionContent>
< s:Button includeIn =landscapeclick =navigator.pushView(profileView)
icon =@ Embed('assets / images / profileIcon.png')/>
< / s:actionContent>




< s:SplitViewNavigator width =100%height =100%id =splitViewNavigatorautoHideFirstViewNavigator =true>
< s:ViewNavigator id =redditListNavfirstView =views.subredditListwidth =300height =100%/>
< s:ViewNavigator id =redditFeedNavfirstView =views.redditFeedwidth =100%height =100%>



< s:actionContent.landscape>
< s:Button id =refreshButtonlLandscapeicon =@ Embed('assets / refresh160.png')click =refreshRSS(event)/>
< / s:actionContent.landscape>

< s:actionContent.portrait>
< s:Button id =refreshButtonicon =@ Embed('assets / refresh160.png')click =refreshRSS(event)/>
< s:Button id =navigatorButtonlabel =Searchclick =splitViewNavigator.showFirstViewNavigatorInPopUp(navigatorButton)/>
< / s:actionContent.portrait>
< / s:ViewNavigator>
< / s:SplitViewNavigator>


< / s:查看>


解决方案

好的,我看到了什么问题。您正在创建redditFeed对象的新实例,而不是使用MXML中实例化的一个。在你的RedditReaderHomeView.mxml中给出redditFeed的声明一个id,然后在上面的函数中使用它,如:

  private var redditFeedId: RedditFeed; //从RedditReaderHome传入,绑定到实际的一个id 
public function list_clickHandler(event:IndexChangeEvent):void {
var RSSItem:Object = redditList.dataProvider.getItemAt(event.newIndex );
var thisItem:Item = RSSItem as Item;
rlink = thisItem.link;
var moddedLink:String = rlink.slice(1,int.MAX_VALUE)
redditFeedId.myList_creationCompleteHandler(moddedLink);
}

如果最终需要任何帮助,请粘贴到RedditReaderHome。 >

感谢您的追踪[ADDED]

  public function refreshRSS(event:Event ):void 
{
trace(redditFeedNav.getElementAt(0));
redditFeedNav.getElementAt(0).refreshList();
}


I am having an issue with using the SplitViewNavigator component in flex 4.6 using Adobe Flash Builder.

[UPDATED]* * *

I am building a reddit app for the blackberry playbook tablet, and am making use of reddit's API. I have three mxml views: RedditReaderHomeView.mxml, redditFeed.mxml, and subredditList.mxml. In RedditReaderHomeView.mxml I have a splitViewNavigator. In left side of my SplitViewNavigator resides subredditList.mxml, and on the right side resides redditFeed.mxml. On initialization, redditFeed.mxml pulls in XML data to populate its list with reddit entries, and subredditList.mxml pulls in XML data which populates its list with subreddits(categories) to display. When a user clicks on of the subreddit entries on the left, the redditFeed.mxml on the right should update so that the data it pulls are entries from the subreddit category that was selected on the left. In other words, classic master/detail navigation. Category on the left, which opens entries of that category on the right.

Well, I have a function that passes the url of the selected subreddit over to redditFeed.mxml.

subredditList.mxml - here a subreddit is selected and its url is sent over to a function in redditFeed.mxml

public function list_clickHandler(event:IndexChangeEvent):void {
                var RSSItem:Object = redditList.dataProvider.getItemAt(event.newIndex);
                var thisItem:Item = RSSItem as Item;
                rlink = thisItem.link;
                var moddedLink:String = rlink.slice(1, int.MAX_VALUE)
                var pushSub:redditFeed = new redditFeed();
                pushSub.myList_creationCompleteHandler(moddedLink);
            }

redditFeed.mxml - the url is used to grab data from that particular subreddit...

public function myList_creationCompleteHandler(url:String):void
            { 
                getRedditFeedResult.token = redditFeedGrabber.getRedditFeed(url);
            }

... though this data never seems to be displayed in the spark List component, even though I can see the call being made through the Network Monitor. I've spent hours and hours trying to solve this. And I belive it has something to do with views being 'active' vs. 'deactivated', as when i tried placing this same call from within redditFeed.mxml, the call went through and the data in the list updated. I thought perhaps this was because the action was being performed within the same view that contains the list where the data is displayed. So it would be 'active' in this instance as the action is being performed in that view.

I appreciate any help anyone can offer. Also, dont hesitate to request clarification/more details from me. I reeeallly want to solve this. Thanks!

RedditReaderHomeView.mxml - Here's the code you requested. Lemme know if you need more/something else.

<?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"
        actionBarVisible="false" tabBarVisible="true" title="Reddit Reader by Domisy" creationPolicy="all"
        actionBarVisible.landscape="true">



    <fx:Script>
        <![CDATA[
            import com.adobe.fiber.core.model_public;
            import mx.events.FlexEvent;
            import views.redditFeed;

            public var defUrl:String = new String("");


            public function refreshRSS(event:Event):void
            {
                          //***UPDATED CODE****
                          var refreshFunction:Object = redditFeedNav.getElementAt(0);
                  refreshFunction.refreshList();


                          //var refreshFunction:redditFeed = new redditFeed();
            //refreshFunction.refreshList();                
            }
        ]]>

    </fx:Script>


    <fx:Declarations>

    </fx:Declarations>



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




    <s:actionContent>
        <s:Button includeIn="landscape" click="navigator.pushView(profileView)"
                  icon="@Embed('assets/images/profileIcon.png')"/>
    </s:actionContent>




    <s:SplitViewNavigator width="100%" height="100%" id="splitViewNavigator" autoHideFirstViewNavigator="true">
        <s:ViewNavigator id="redditListNav" firstView="views.subredditList" width="300" height="100%"/>
        <s:ViewNavigator id="redditFeedNav" firstView="views.redditFeed" width="100%" height="100%">



            <s:actionContent.landscape>
                <s:Button id="refreshButtonlLandscape" icon="@Embed('assets/refresh160.png')" click="refreshRSS(event)" />
            </s:actionContent.landscape>

            <s:actionContent.portrait>
                <s:Button id="refreshButton" icon="@Embed('assets/refresh160.png')" click="refreshRSS(event)" />
                <s:Button id="navigatorButton" label="Search" click="splitViewNavigator.showFirstViewNavigatorInPopUp(navigatorButton)" />
            </s:actionContent.portrait>
        </s:ViewNavigator>
    </s:SplitViewNavigator>


</s:View>

解决方案

Okay I see what the problem is I think. You're creating a new instance of the redditFeed object instead of using the one instantiated in MXML. In your RedditReaderHomeView.mxml give the declaration of redditFeed an id, then in the function above use it like:

private var redditFeedId:RedditFeed; //Passed in from RedditReaderHome, bound to the id of the actual one in there
public function list_clickHandler(event:IndexChangeEvent):void {
     var RSSItem:Object = redditList.dataProvider.getItemAt(event.newIndex);
     var thisItem:Item = RSSItem as Item;
     rlink = thisItem.link;
     var moddedLink:String = rlink.slice(1, int.MAX_VALUE)
     redditFeedId.myList_creationCompleteHandler(moddedLink);
 }

Paste in RedditReaderHome if you end up needing any help on that.

Thanks for following up [ADDED]

        public function refreshRSS(event : Event) : void
        {
            trace(redditFeedNav.getElementAt(0));
            redditFeedNav.getElementAt(0).refreshList(); 
        }

这篇关于如何使用SplitViewNavigator组件在Flex中显示主/详细导航的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆