×
Namespaces

Variants
Actions
Revision as of 09:44, 29 August 2012 by Vaishali Rawat (Talk | contribs)

How to implement session-time out in a WP app

From Nokia Developer Wiki
Jump to: navigation, search

This wiki article shows how to implement session time out in a windows phone 7 app using Dispatch Timer

WP Metro Icon UI.png
SignpostIcon XAML 40.png
WP Metro Icon WP8.png
SignpostIcon WP7 70px.png
Article Metadata
Code Example
Source file: [[1]]
Tested with
SDK: Windows Phone SDK 7.1
Compatibility
Platform(s): Windows Phone 7.1 and later
Windows Phone 8
Windows Phone 7.5
Article
Created: Vaishali Rawat (28 Aug 2012)
Last edited: Vaishali Rawat (29 Aug 2012)

Contents

Introduction

Several times we encounter apps where if the user does not refresh or request a page within the time-out period, the session ends. Session time-outs are treated as security "feature". In this app we will implement the session time-out feature.

Basic Concept

In this app we will use three pages.

  • login page
  • registration page
  • detail page

Once the app is launched a login page is displayed. User is requested to enter login credentials and incase its a new user he/she can navigate to registeration page. registration page is session bound. If the user dosen't provide the credentials in the specific time (session time e.g 20sec) or else doesn't even tap the screen the session ends and user is navigated back to the login page. Upon successful registration user is navigated to detail page.

Creating UI

Starting a New Project

  • Create a new project in Visual Studio 2010 from File>>New Project>>Windows Phone Application - Visual C#. Give a desired name of the project.

Creating a new Project in Windows Phone 7 using Visual C#

Designing LoginPage

In the MainPage.xaml file, we will drop down a few Text Block & Text Box controls. We will also use few App bar buttons. We will set the desired properties like shown below:

  <Grid x:Name="LayoutRoot" Background="Transparent">
<Grid.RowDefinitions>
<RowDefinition Height=".50*"/>
<RowDefinition Height=".40*"/>
<RowDefinition Height=".30*"/>
<RowDefinition Height=".20*"/>
<RowDefinition Height=".30*"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
 
<TextBlock x:Name="PageTitle" Text="login" Grid.Row="0" FontSize="80" Margin="10,0" VerticalAlignment="Bottom"/>
<TextBlock x:Name="txt_username" Text="UserName" Grid.Row="1" FontSize="40" Margin="15,0" VerticalAlignment="Bottom" FontWeight="Medium"/>
<TextBox x:Name="txtbx_username" Text="" Grid.Row="2" TextWrapping="Wrap" Margin="10,0" />
<TextBlock x:Name="txt_password" Text="Password" Grid.Row="3" FontSize="40" Margin="15,0" VerticalAlignment="Bottom" FontWeight="Medium"/>
<PasswordBox x:Name="txtbx_password" Password="" Grid.Row="4" Margin="10,0" />
</Grid>
 
<!--Sample code showing usage of ApplicationBar-->
<phone:PhoneApplicationPage.ApplicationBar>
<shell:ApplicationBar IsVisible="True" IsMenuEnabled="True">
<shell:ApplicationBarIconButton x:Name="btn_login" Click="btn_login_Click" IconUri="/Icons/Tick.png" Text="login"/>
<shell:ApplicationBarIconButton x:Name="btn_reset" Click="btn_reset_Click" IconUri="/Icons/Reset.png" Text="reset"/>
<shell:ApplicationBarIconButton x:Name="btn_register" Click="btn_register_Click" IconUri="/Icons/Reset.png" Text="register"/>
</shell:ApplicationBar>
</phone:PhoneApplicationPage.ApplicationBar>

Designing Registeration Page

In the Page1.xaml file, we will drop down a few Text Block & Text Box controls. We will also use few App bar buttons. We will set the desired properties like shown below:

  <Grid x:Name="LayoutRoot" Tap="LayoutRoot_Tap">
<Grid.RowDefinitions>
<RowDefinition Height=".20*"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
 
<!--TitlePanel contains the name of the application and page title-->
<TextBlock x:Name="PageTitle" Text="register" Grid.Row="0" FontSize="80" Margin="10,0" VerticalAlignment="Bottom"/>
 
<!--ContentPanel - place additional content here-->
<Grid x:Name="ContentPanel" Grid.Row="1" Margin="10">
<ScrollViewer>
<Grid >
<Grid.RowDefinitions>
<RowDefinition Height=".20*"/>
<RowDefinition Height=".30*"/>
<RowDefinition Height=".20*"/>
<RowDefinition Height=".30*"/>
<RowDefinition Height=".20*"/>
<RowDefinition Height=".30*"/>
<RowDefinition Height=".20*"/>
<RowDefinition Height=".30*"/>
</Grid.RowDefinitions>
 
<TextBlock x:Name="txt_username" Text="UserName" Grid.Row="0" FontSize="40" Margin="15,0" VerticalAlignment="Bottom" FontWeight="Medium"/>
<TextBox x:Name="txtbx_username" Text="" Grid.Row="1" TextWrapping="Wrap" Margin="10,0" />
<TextBlock x:Name="txt_password" Text="Password" Grid.Row="2" FontSize="40" Margin="15,0" VerticalAlignment="Bottom" FontWeight="Medium"/>
<PasswordBox x:Name="txtbx_password" Password="" Grid.Row="3" Margin="10,0" />
 
<TextBlock x:Name="txt_Emailid" Text="E-mail Id" Grid.Row="4" FontSize="40" Margin="15,0" VerticalAlignment="Bottom" FontWeight="Medium"/>
<TextBox x:Name="txtbx_Emailid" Text="" Grid.Row="5" TextWrapping="Wrap" Margin="10,0" />
<TextBlock x:Name="txt_Country" Text="Country" Grid.Row="6" FontSize="40" Margin="15,0" VerticalAlignment="Bottom" FontWeight="Medium"/>
<TextBox x:Name="txtbx_Country" Text="" Grid.Row="7" TextWrapping="Wrap" Margin="10,0" />
</Grid>
</ScrollViewer>
</Grid>
</Grid>
 
<!--Sample code showing usage of ApplicationBar-->
<phone:PhoneApplicationPage.ApplicationBar>
<shell:ApplicationBar IsVisible="True" IsMenuEnabled="True">
<shell:ApplicationBarIconButton x:Name="btn_register" Click="btn_register_Click" IconUri="/Icons/Tick.png" Text="register"/>
</shell:ApplicationBar>
</phone:PhoneApplicationPage.ApplicationBar>

Designing Details Page

In the welcome.xaml' file, we will drop down a few Text Block & image controls. We will set the desired properties like shown below:

<Grid x:Name="LayoutRoot" Background="Transparent">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
 
<!--TitlePanel contains the name of the application and page title-->
<StackPanel x:Name="TitlePanel" Grid.Row="0" Margin="12,17,0,28">
<TextBlock x:Name="PageTitle" Text="Welcome !!" Margin="9,-7,0,0" Style="{StaticResource PhoneTextTitle1Style}"/>
</StackPanel>
 
<!--ContentPanel - place additional content here-->
<Grid x:Name="ContentPanel" Grid.Row="1" Margin="10">
<Image Source="/Session-TimeOut%20App;component/Images/Penguins.jpg" Stretch="Fill" />
</Grid>
</Grid>

Code Behind

We have a session time-out class named as SessionOut.cs which keeps track of the dispatch timer. Once the user is navigated to registration page the dispatch timer is invoked. Below mention is the code used :

public void start_timer(int time)
{
if (_timer.IsEnabled == true)
{
_timer.Stop();
}
_timeLeft = time;
_timer.Tick += TimerTick; // event handler
_timer.Start();
}

time parameter used in the start_timer() is the default session time.

  • Timer tick event :
void TimerTick(object sender, EventArgs e)
{
_timeLeft--;
if (_timeLeft == 0)
{
_timer.Stop();
log_off = true;
}
}

In the above function we are decrement the _timeLeft. Once the value for _timeLeft becomes zero the timer is stopped and log_off variable is set to true. Now, if the user will tap on the registration page "Session Timed-Out" is popped and he/she is navigated back to the login page. Where as if the user will tap the registration page before the value of _timeLeft becomes zero , timer is reset to default session time and in case he/she will provide the credentials before the value of _timeLeft becomes zero , timer is stopped and user is navigated to details page.

  • Method used to re-invoke the dispatch timer
 private void LayoutRoot_Tap(object sender, GestureEventArgs e)
{
if (SessionOut.log_off == true) // if SessionOut flag is set to true , user is navigated back to main screen
{
MessageBox.Show("Session Expired");
SessionOut.log_off = false;
NavigationService.Navigate(new Uri("/MainPage.xaml", UriKind.Relative));
}
else
{
_SessionOut.start_timer(25); // reset the timer
}
}

LayoutRoot_Tap is the event used to capture the tap event in registration page.

  • Now build the project and run it using F5.
122 page views in the last 30 days.
×