|
|
|
Facebook Tabs for ASP.NET
Facebook Tab ASP.NET control is used to easily make tabs inside Facebook iFrame application the same style as Facebook FBML applications. The control can be included more than once without interfering on each other. The control doesn't require any additional code to set the active tab and there is no session variable for saving the state of active tab.
Picture of 2 Facebook Tabs ASP.NET controls:
Facebook Tab ASP.NET control has a demo page inside Demo Website that shows how it works. The most important fact is that the Demo website is contained in the package with the library, which is very useful resource for code examples, in both C# and VB.NET, for each control from the library. Look at the Facebook Tabs demo
ConfigurationConfiguration of the Facebook Tabs ASP.NET control is done in ASPX page by setting optional properties and in the code behind while adding each tab. If dynamic setting of properties is required, they can be also set in the code behind, for example on Page_Load method. Following tables show: list of all properties with their types and descriptions, and method for adding new tabs. Properties: 
Property Name
Type
Description
Width
Int
Width in pixels of whole tab control.
NumOfRightTabs
Int
Define how many tabs are on the left side of screen, the rest will be on the right side.
Distance
Int
Distance in pixels between each of the tab.
BorderWidth
Int
Distance between first tab and begining of tab line, and between last tab and the end of tab line.
AddTab method:
Parameter name
Type
Description
Name
String
Name of the tab.
URL
String
Location of target ASPX file.
Width
Int
Width of the tab.
Usage Examples:
Following examples show registration and insertion of Facebook Tabs ASP.NET control in ASPX file, and definition of tabs in the code behind. Examples are demonstrating how to define two Tabs controls from the picture above. The first Tabs control is created in main ASP.NET master page, while the second one is created in nested master page. Using a master page in Facebook application, especially if Tabs control is used, makes code more readable and easier to maintain. After the definition of each Tabs control in ASPX file, it is shown how to add tabs in code behind, in C# and VB.NET programming languages.
The first Tabs control in ASPX: <%@ Master AutoEventWireup="true" Inherits="FVK_Demo.Master" %> <%@ Register TagPrefix="fvk" TagName="initfvk" Src="~/FVK/InitFVK.ascx" %> <%@ Register TagPrefix="fvk" TagName="enableresizable" Src="~/FVK/EnableResizable.ascx" %> <%@ Register TagPrefix="fvk" TagName="tab" Src="~/FVK/TabControl.ascx" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xmlns:fb="http://www.Facebook.com/2008/fbml"> <head id="Head1" runat="server"> <title>FVK Demo</title> <link rel="stylesheet" type="text/css" href="/FVK/fvk.css" /> <asp:ContentPlaceHolder ID="head" runat="server"> </asp:ContentPlaceHolder> </head> <body> <fvk:initfvk ID="initfvk1" runat="server" /> <fvk:enableresizable ID="resizable" runat="server" /> <img src="/Images/banner.png" alt="" /> <br /> <form id="form1" runat="server"> <asp:ScriptManager ID="ScriptManager1" runat="server"> </asp:ScriptManager> <fvk:tab ID="tab1" runat="server" Width = "" NumOfRightTabs = "1" Distance = "5" BorderWidth = "10" /> <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server"> </asp:ContentPlaceHolder> </form> </body> </html> The first Tabs control - defining tabs in C#
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
namespace FVK_Demo
{
public partial class Master : System.Web.UI.MasterPage
{
protected void Page_Load(object sender, EventArgs e)
{
if (!Page.IsPostBack)
{
// enable third party cookies on IE
Response.AppendHeader("P3P", "CP=\"CAO PSA OUR\"");
// define tabs
tab1.AddTab("Home", "Default.aspx", 70);
tab1.AddTab("1st Component Set", "Invite.aspx", 140);
tab1.AddTab("2nd Component Set", "BookmarkButton.aspx", 140);
tab1.AddTab("3rd Component Set", "Tabs.aspx", 140);
tab1.AddTab("Data Access", "DataAccess.aspx", 100);
}
}
}
}
The first Tabs control - defining tabs in VB.NET
Imports System.Collections.Generic
Imports System.Linq
Imports System.Web
Imports System.Web.UI
Imports System.Web.UI.WebControls
Namespace FVK_Demo
Public Partial Class Master
Inherits System.Web.UI.MasterPage
Protected Sub Page_Load(sender As Object, e As EventArgs) Handles Me.Load
If Not Page.IsPostBack Then
' enable third party cookies on IE
Response.AppendHeader("P3P", "CP=""CAO PSA OUR""")
' define tabs
tab1.AddTab("Home", "Default.aspx", 70)
tab1.AddTab("1st Component Set", "Invite.aspx", 140)
tab1.AddTab("2nd Component Set", "BookmarkButton.aspx", 140)
tab1.AddTab("3rd Component Set", "Tabs.aspx", 140)
tab1.AddTab("Data Access", "DataAccess.aspx", 100)
End If
End Sub
End Class
End Namespace
The second Tabs control in ASPX: <%@ Master AutoEventWireup="true" MasterPageFile="~/Master.Master" Inherits="FVK_Demo.Components1Master" %> <%@ Register TagPrefix="fvk" TagName="tab" Src="~/FVK/TabControl.ascx" %> <asp:Content ID="HeadContent1" ContentPlaceHolderID="head" runat="server"> <asp:ContentPlaceHolder ID="HeadPlaceHolder2" runat="server"> </asp:ContentPlaceHolder> </asp:Content> <asp:Content runat="server" ID="Master1Content" ContentPlaceHolderID="ContentPlaceHolder1"> <fvk:tab id="tab2" runat="server" Width = "" NumOfRightTabs = "1" Distance = "5" BorderWidth = "10" /> <asp:ContentPlaceHolder ID="ContentPlaceHolder2" runat="server"> </asp:ContentPlaceHolder> </asp:Content> The second Tabs control - defining tabs in C#:
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
namespace FVK_Demo
{
public partial class Components1Master : System.Web.UI.MasterPage
{
protected void Page_Load(object sender, EventArgs e)
{
if (!Page.IsPostBack)
{
tab2.AddTab("Invite Friends", "Invite.aspx", 100);
tab2.AddTab("Stream Publish", "StreamPublish.aspx", 120);
tab2.AddTab("Permissions", "Permissions.aspx", 100);
tab2.AddTab("Like Box", "LikeBox.aspx", 100);
tab2.AddTab("Like Button", "LikeButton.aspx", 100);
tab2.AddTab("Send Status", "SendStatus.aspx", 100);
}
}
}
}
The second Tabs control - defining tabs in VB.NET:
Imports System.Collections.Generic
Imports System.Linq
Imports System.Web
Imports System.Web.UI
Imports System.Web.UI.WebControls
Namespace FVK_Demo
Public Partial Class Components1Master
Inherits System.Web.UI.MasterPage
Protected Sub Page_Load(sender As Object, e As EventArgs) Handles Me.Load
If Not Page.IsPostBack Then
tab2.AddTab("Invite Friends", "Invite.aspx", 100)
tab2.AddTab("Stream Publish", "StreamPublish.aspx", 120)
tab2.AddTab("Permissions", "Permissions.aspx", 100)
tab2.AddTab("Like Box", "LikeBox.aspx", 100)
tab2.AddTab("Like Button", "LikeButton.aspx", 100)
tab2.AddTab("Send Status", "SendStatus.aspx", 100)
End If
End Sub
End Class
End Namespace
|
