Intersoft Community - WebGrid Enterprise - How to access nested uxFrame ?

How to access nested uxFrame ?

jimBlake — Sun, 25 Mar 2012 13:00:28 GMT

I've finished this scenario by binding a navigateUri property to the viewModel.

Big thanks Yudi..! now I know how to map a uri.
You described me more detail than I expected.

Regards.
Jim

How to access nested uxFrame ?

yudi — Thu, 22 Mar 2012 00:05:04 GMT

Let’s say there are three pages: MainPage.xaml; InventoryPage.xaml; and InventoryDetails.xaml. MainPage.xaml has UXFrame named as ContentFrame with following UriMapper configuration.

<Intersoft:UXFrame x:Name="ContentFrame" Intersoft:DockPanel.Dock="Top"
                    Intersoft:DockPanel.IsFillElement="True" Margin="0,10,0,0"
                    EnablePageTransition="True" DefaultTransitionEffect="FlipLeft"
                    AutoDetectNavigationDirection="True" NewTransitionEffect="FlipLeft"
                    AllowNestedFrameNavigation="True">
    <Intersoft:UXFrame.UriMapper>
        <Intersoft:UriMapper>
            <Intersoft:UriMapping Uri="" MappedUri="/Views/Home.xaml"/>
            <Intersoft:UriMapping Uri="/Error" MappedUri="/ErrorPage.xaml"/>
            <Intersoft:UriMapping Uri="/Inventory/{page}"
                                    MappedUri="/Views/InventoryPage.xaml"
                                    IsChildNavigation="True"/>
            <Intersoft:UriMapping Uri="/Intersoft" MappedUri="/Views/IntersoftPage.xaml"/>
            <Intersoft:UriMapping Uri="/{page}" MappedUri="/Views/{page}.xaml"/>
        </Intersoft:UriMapper>
    </Intersoft:UXFrame.UriMapper>
</Intersoft:UXFrame>

Clicking “Inventory” navigation button (in MainPage.xaml) will load InventoryPage.xaml page into ContentFrame UXFrame.

InventoryPage.xaml has UXFrame named as uXFrame1 with following UriMapper configuration.

<Intersoft:UXFrame Name="uXFrame1" DisplayFragmentInBrowser="True"
                    Intersoft:DockPanel.IsFillElement="True">
    <Intersoft:UXFrame.UriMapper>
        <Intersoft:UriMapper>
            <Intersoft:UriMapping Uri="" MappedUri="/Views/Detail/Corporate.xaml"/>
            <Intersoft:UriMapping Uri="/Inventory/{page}"
                                    MappedUri="/Views/Detail/{page}.xaml"/>
        </Intersoft:UriMapper>
    </Intersoft:UXFrame.UriMapper>
</Intersoft:UXFrame>

Clicking “Inventory Details” navigation button (in Inventory.xaml) will load InventoryDetails.xaml page into uXFrame1 UXFrame.

For your scenario, to have a navigation button – in InventoryDetails.xaml page – which allow users to navigate to “Customers” page, there are two options:

To display Customers.xaml in uXFrame1
Please specify the TargetName property to uXFrame1. You may need to add the UriMapping in Inventory.xaml

<Intersoft:UXNavigationButton Content="Customers" NavigateUri="/Customers"
                                Name="uXNavigationButton1" TargetName="uXFrame1"
                                Icon="/ClientUIAdvNavApp1;component/Assets/Images/Home.png"
                                DisplayMode="ContentAndImage" HorizontalContentAlignment="Left"
                                IsDefaultNavigationSource="True"/>

To display Customers.xaml in ContentFrame
Please specify the TargetName property to ContentFrame.

<Intersoft:UXNavigationButton Content="Customers" NavigateUri="/Customers"
                                Name="uXNavigationButton1" TargetName="ContentFrame"
                                Icon="/ClientUIAdvNavApp1;component/Assets/Images/Home.png"
                                DisplayMode="ContentAndImage" HorizontalContentAlignment="Left"
                                IsDefaultNavigationSource="True"/>

In order to give some condition to navigate to the specific page, please try to bind the NavigateUri property to the ViewModel. In ViewModel, you can specify the conditions and determine the returns.

Hope this helps. Please feel free to let us know if you have another questions.

How to access nested uxFrame ?

jimBlake — Tue, 20 Mar 2012 23:24:23 GMT

OK, based on your sample above;

        <Intersoft:UriMapper>
            <Intersoft:UriMapping Uri="" MappedUri="/Views/Detail/ProductDetail.xaml"/>
            <Intersoft:UriMapping Uri="/Inventory/{page}" MappedUri="/Views/Detail/{page}.xaml"/>
        </Intersoft:UriMapper>
    </Intersoft:UXFrame.UriMapper>

Then I add 1 UriMapping :

<Intersoft:UriMapping Uri="/Customers" MappedUri="/Views/Detail/Customer.xaml"/>

At the first state, I set (in mainpage.xaml)

<Intersoft:UXStackItem Text="Header Name" FontSize="12"  NavigateUri="/Products"/>

In ProductDetail.xaml, i want to have a button which can change NavigateUri above to "/Customers"

Do you have any idea ?

Jim

How to access nested uxFrame ?

yudi — Mon, 19 Mar 2012 00:37:26 GMT

It is suggested to add the conditional navigation in the code behind. However, could you please inform us about the conditional navigation that you would like to achieve?

How to access nested uxFrame ?

jimBlake — Fri, 16 Mar 2012 17:55:26 GMT

Thank you so much for the detail answer Yudi. This is really really helps..

Anyway, when I want to give some condition to navigate to the specific page, how do I set the xaml ? Can I achieve this without using code behind ?

How to access nested uxFrame ?

yudi — Fri, 16 Mar 2012 05:18:47 GMT

Thank you for the detail information regarding the navigation topology of your scenario.

This kind of topology, as described in your previous message, can be categorized as nested hierarchy topology. This topology allows your application to define another frame inside the page that already hosted in an upper level frame. The nested hierarchical topology is typically used in a more advanced line-of-business applications that comprises of chained modules such as in master-detail scenario.

For example, consider an inventory application that shows a list of available products in the left section of the page, and the details of the product in the right section of the page. In this case, the content can be refactored into two pages, one for the listing and another for the details. This design pattern allows for better code reusability, maintainability, and extensibility.

The following illustration shows a master-detail scenario in a typical inventory application that use nested hierarchical topology.

This section shows you how to configure the nested navigation frame to support nested hierarchy topology (based on the above illustration).

To create the nested UXFrame page

Set the UriMapper property in UXFrame (of InventoryPage) as shown in the snippet below:

<Intersoft:UXFrame Name="InventoryDetailsFrame" DisplayFragmentInBrowser="True"
                    Intersoft:DockPanel.IsFillElement="True">
    <Intersoft:UXFrame.UriMapper>
        <Intersoft:UriMapper>
            <Intersoft:UriMapping Uri="" MappedUri="/Views/Detail/ProductDetail.xaml"/>
            <Intersoft:UriMapping Uri="/Inventory/{page}" MappedUri="/Views/Detail/{page}.xaml"/>
        </Intersoft:UriMapper>
    </Intersoft:UXFrame.UriMapper>
</Intersoft:UXFrame>

Add a new UXNavigationButton and set the TargetName to InventoryDetails frame as shown in the snippet below:

<StackPanel Name="stackPanel1" Width="125" Margin="5,0,5,0" Intersoft:DockPanel.Dock="Left">
    <Intersoft:UXNavigationButton Content="Product Detail" NavigateUri="/Inventory/ProductDetail"
                                  Name="uXNavigationButton1"
                                  TargetName="InventoryDetailsFrame" 
                                  Icon="/ClientUIAdvNavApp1;component/Assets/Images/Home.png"
                                  DisplayMode="ContentAndImage" HorizontalContentAlignment="Left"
                                  IsDefaultNavigationSource="True"/>
    <Intersoft:UXNavigationButton Content="Dairy Products Detail" NavigateUri="/Inventory/Dairy"
                                  Name="uXNavigationButton2"
                                  TargetName="InventoryDetailsFrame"
                                  Icon="/ClientUIAdvNavApp1;component/Assets/Images/Contact.png"
                                  DisplayMode="ContentAndImage" HorizontalContentAlignment="Left"/>
</StackPanel>

To add link a link to the nested UXFrame page

In order to allow nested hierarchy topology, you need to set the parent frame’s AllowNestedFrameNavigation property to True.

Update the parent’s frame element (in the MainPage) UriMapper property for navigation to the InventoryPage and the InventoryDetails page.

<Intersoft:UXFrame x:Name="MainPageFrame" Intersoft:DockPanel.Dock="Top"
                    Intersoft:DockPanel.IsFillElement="True" Margin="0,10,0,0"
                    EnablePageTransition="True"
                    DefaultTransitionEffect="FlipLeft"
                    AutoDetectNavigationDirection="True"
                    NewTransitionEffect="FlipLeft"
                    AllowNestedFrameNavigation="True">
    <Intersoft:UXFrame.UriMapper>
        <Intersoft:UriMapper>
            <Intersoft:UriMapping Uri="" MappedUri="/Views/Home.xaml"/>
            <Intersoft:UriMapping Uri="/Error" MappedUri="/ErrorPage.xaml"/>
            <Intersoft:UriMapping Uri="/Inventory/{page}" MappedUri="/Views/InventoryPage.xaml"
                                    IsChildNavigation="True"/>
            <Intersoft:UriMapping Uri="/Inventory" MappedUri="/Views/InventoryPage.xaml"/>
            <Intersoft:UriMapping Uri="/{page}" MappedUri="/Views/{page}.xaml"/>
        </Intersoft:UriMapper>
    </Intersoft:UXFrame.UriMapper>
</Intersoft:UXFrame>

Add a new UXNavigationButton to navigate to InventoryPage.

<Grid Intersoft:DockPanel.Dock="Bottom">
    <Intersoft:UXItemsControl x:Name="NavigationItemsContainer"
                              ItemContainerStyle="{StaticResource NavigationButtonStyle}"
                              Orientation="Horizontal"
                              Background="{StaticResource NavigationContainerBackground}">
        ...
        <Intersoft:UXNavigationButton Content="Inventory" NavigateUri="/Inventory"
                                      Icon="Assets/Images/Inventory.png"/>
    </Intersoft:UXItemsControl>    
</Grid>

Hope this helps.

How to access nested uxFrame ?

jimBlake — Thu, 15 Mar 2012 02:43:05 GMT

Well, here is the simple scenario;

I use 'Intersoft ClientUI MVVM Business Application' template.. there is uxFrame inside mainpage.xaml ..
In customer.xaml, there is uxTreeView and uxFrame.

And, what I want to do is when I click an item from uxTreeView, I want to navigate uxFrame inside Customer.xaml to the specific page.

How can I achieve this goal?
I've tried to navigate uxFrame inside customer.xaml, but the result is uxFrame inside mainpage.xaml that navigated.

Jim.

How to access nested uxFrame ?

yudi — Wed, 14 Mar 2012 20:51:42 GMT

Could you please provide me more information regarding the navigation topology of your required scenario? The way you arrange the navigation structure, that is, the correlation between UXFrame and the UXPage that navigates to other pages in the application.

There are common topologies used in business application such as linear topology, hierarchical topology, and nested hierarchical topology.

Look forward to hearing back from you.

How to access nested uxFrame ?

jimBlake — Tue, 13 Mar 2012 19:33:46 GMT

Hi Team,

Could you provide me a simple sample to access nested uxFrame in 'Intersoft ClientUI MVVM Business Application' template.

thanks & regards.

Jim