RadNavigation deep linking

Boryana Miloshevska — Sat, 20 Dec 2008 04:21:00 GMT

Deep linking is an unique feature of RadNavigation allowing you to use page navigation by simply changing the URL in the browser address bar. Now you can provide a link directly to every page from your application. Implementing this RadNavigation feature is just as easy as using the other navigation classes all you have to do is just follow the next steps:

1. Create Silverlight application.
In order to use deep linking in page navigation scenario you have to make sure that any changes in the state the page is reflected to the browser's address (bookmark). To do this you have two choices:

- If you do not want to use AjaxBrowserHistory (Back/Forward buttons of the browser) functionality set:

     NavigationService.UseBrowserHistory = true;   
  

- Otherwise if you use browser history set :

    NavigationService. UseHistoryBookmark = true;  
  

For more information visit the help section.

In both cases you must set these properties to true before writing any other code in App.xaml.cs:

    private void Application_Startup(object sender, StartupEventArgs e)  
         {  
              NavigationService.UseBrowserHistory = true;  
             // NavigationService.UseHistoryBookmark= true;  
             ..  
         }  
  

2. The next step is to add some RadPage classes in your application.

3. After you have added all the pages and navigation structure between them then you are ready to use DeelLinking just go again in App.xaml.ca and add the following:

    private void Application_Startup(object sender, StartupEventArgs e)  
         {  
             ...  
             if (!NavigationService.LoadDeepLink())  
             {  
                 //Navigate to some page   
             }  
         }  
  

NavigationService.LoadDeepLink() method checks wheter you have deep linking or just want to navigate to some page.
So the final peas of code should look like the following:

    private void Application_Startup(object sender, StartupEventArgs e)  
         {  
             NavigationService.UseBrowserHistory = true;  
             this.RootVisual = new RadFrameContainer();  
             NavigationService service = NavigationService.GetNavigationService();  
             if (!NavigationService.LoadDeepLink())  
             {  
                 service.Navigate(new Page1());  
             }  
         }  
  

RadNavigation framework uses the NavigationIdentifier property of RadPage in order to change borwser bookmarks while navigating between pages. By default its value is set to the full name of the RadPage class. But if you prefer to use can custom navigation identifiers or custom browser bookmarks. You can also navigate to the same page but with different content and different browser identifier.
The Silverlight application below shows how you can use all these features of the RadNavigation framework(The full source code you can find attached at the end of the blog post):

BooksExample-source

Page Navigation for Silverlight 2 RC0

Boryana Miloshevska — Fri, 03 Oct 2008 03:18:00 GMT

Hi my name is Boryana Miloshevska and� I'm a member of� Telerik`s Silverlight team.
This is my first blog post and it is about the new RadPageNavigation framework that we just released� for Silverlight 2 RC0.

RadPageNavigation is a framework that allows you to easily add navigation service to your application.

To do that you can use the provided RadPage, RadFrame, RadFrameContainer and NavigationService classes, or you can use your own classes to implement the IFrame and ITransition interfaces. The framework is 100%� compatible with the WPF navigation service. Navigation between pages is supported. You can also use frames inside each page and to navigate in the frame (very similar to the HTML iframe). Full history journal for backward/forward is available as well as Deep Linking support (which means that now you can provide a link directly to every Page from your application). In my next blog post I will blog in details about RadPageNavigation deep linking.

NavigationService is the most important class in this framework. In order to perform page navigation you can use one of the following methods:

Navigate(string) -navigate using string representing RadPage name or fullname.
Navigate(IFrame)- navigate using string representing IFrame instance.
GoForward()- If there is items in the ForwordHistory then navigate to last item.
GoBack()-If there is items in the FrameHistory then navigate to last item.
LoadFrames(Stream assemblyStream, string initialPagePath) - allows users to load RadPages from different assemblies.
GetPageByName(Assembly targetAssembly, string frameType)- return RadPage instance using it`s name.
GetPageByFullName(Assembly targetAssembly, string frameType)- return RadPage instance using it`s fullname.
PerformTransition(IFrame previousFrame, IFrame nextFrame)-add animation effect between page navigation.By default is uses DefaultTransition but you can set Transition property to SlideTransition or FadeTransition.

In order to implement Deep Linking you can use:
HtmlPage.Window.CurrentBookmark = SelectedPage.GetType().Name or you can use � NavigateToUri(RadFrame frame, Panel pageContent, RadPage currentPage)� method.
NavigationService� also has Navigating event that is raised when�� Navigate, GoBack or GoForward is called.
If you prefer not to use NavigationService you may call RadFrame`s Navigate method� or SetSource property and implement the same functionality.

Navigate(IFrame)
Navigate(IFrame, ITransition)
Navigate(string, ITransition)
Navigate(string)
Setsource

Another important part from the framework is RadFrameContainer. If you want to use RaFrames or any animation Transition you� must place each RadFrame or RadPage in RadframeContainer.

This tutorial demonstrates how to create a PageNavigation example using nothing more than few RadPages and RadFrameContainers. Here is the final result:

http://demos.telerik.com/silverlight/cvexample

To start off, create a new Silverlight project and call it CvExample. Once you have the project created go ahead and add a reference to the Telerik.Windows.Controls.dll. At the top of your main UserControl, add a namespace in order to use the dll. Next thing you need to do is changing the UserControl with RadPage:

In XAML:

    
            <Telerik:RadPage�x:Class="CVExample.CvViewerPage"�
        
            ����xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"�
        
            ����xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"�
        
            ����xmlns:Telerik="clr-namespace:Telerik.Windows.Controls;assembly=Telerik.Windows.Controls">�
        
            </�Telerik:RadPage�>�

�

In Code-Behind:

    
            public�partial�class�CvViewerPage�:�RadPage�
        
            ����{�
        
            ��������public�CvViewerPage()�
        
            ��������{�
        
            ������������InitializeComponent();�
        
            ��������}�
        
            ����}�

�

In exactly the same way add another six RadPages for our CvExampl� and name it in that way:
MainPage, AboutPage, WorkExperiencePage, EducationPage, QualificationPage and SkilsPage.
In order to perform navigation between pages you need an instance of NavigationService class. Open App.xaml.cs , set RadFrameContainer as application RootVisual and call NavigationService`s Navigate method:

    
            private�void�Application_Startup(object�sender,�StartupEventArgs�e)�
        
            ��������{�
        
            ������������this.RootVisual�=�new�RadFrameContainer();�
        
            ������������NavigationService�service�=�NavigationService.GetNavigationService(this.RootVisual);�
        
            ������������service.Navigate(new�CvViewerPage());�
        
            ��������}�

In this "CVexample" we have 3 main pages for navigation as RootVisual and 4 pages that are used for navigation in MainPage RadFrameContainer.
Next thing we need to do is adding some content in the pages. It is important to add RadFrameContainer in MainPage in order to have navigation.

�

    
            <Telerik:RadFrameContainer�Grid.Column="1"�Grid.Row="1"�x:Name="panel">�
        
            </Telerik:RadFrameContainer>��

After you have done all this operations the one thing that is left is calling NavigationService.
Each time you want to navigate from one page to another you have to call NavigationService's Navigate method. To do this first obtain an instance of NavigationService and passing desired target navigation container in its constructor.

    
            NavigationService��service�=�NavigationService.GetNavigationService(this.panel);�
        
            NavigationService�service�=�NavigationService.GetNavigationService(this);�

�

If you want just a simple navigation without any animation transitions between pages just call for example
service.Navigate(new AboutPage());.
The other choice is to use RadPageNavigation FadeTransition or SlideTransition.
Slide Effect:

    
            SlideTransition�transition�=��
        
            ��new�SlideTransition(this.panel,�new�TimeSpan(0,�0,�0,�0,�500),�Direction.Up);�
        
            ��service.Transition�=�transition;�
        
            ��service.Navigate(new�QualificationPage());�

FadeEffect:

    
            FadeTransition�transition�=�
        
            �new�FadeTransition((this.ParentFrame�as�RadFrameContainer),�new�TimeSpan(0,�0,�1));�
        
            �service.Transition�=�transition;�
        
            �service.Navigate(new�CvViewerPage());�

Setting one of this transition means that tou tell NavigationService where to navigate the page , how long will
�be the animation effect and in SlideTransitio you can also select Up/Down/Left/Right Directons.

�

Download the source of the project:

CVExample.zip(Change the extention to .zip and unzip it, once you save it locally)

Boryana Miloshevska`s blog

RadNavigation deep linking

Page Navigation for Silverlight 2 RC0