Microsoft Popfly (Mashup) Sample

Recently, I have created a mashup sample using Microsoft Popfly. Here is a video player that play a list of Youtube videos with the keyword "Mister Cupid".

Cross-Page Posting for handling some combination of user input

I believe everybody know ASP .Net supports same page Postback function by default. For example, same page posting back to the same page. For those that do not know, ASP .Net 2.0 introduces a new capability whereby pages can post to pages other than themselves. We call this Cross-Page posting and usually it gives a tight coupling for these pages.

Now, let's see what we need to create here.

Let's use Page 1 as a Posting Page and Page 2 as the Receiving Page.

1. To create a Cross Page posting, we can use PostbackURL from the button (LinkButton, Button, ImageButton) in Page 1 and point it to Page 2.

<asp:Button ID="Button1" runat="server" Text="Button" PostBackUrl="~/Page 2.aspx" />





2. In Page 2, add a PreviousPageType directive. This will allow you know set your previous page to Page 1.




<%@ PreviousPageType VirtualPath="~/Page 1.aspx" %>

Or Use TypeName to Class name

<%@ PreviousPageType TypeName="_Page_1" %>

Above steps will let you set the tight coupling relationship between Page 1 and Page 2 and you can access the properties, control or functions in Page 1 from Page 2.

public partial class Page_2 : System.Web.UI.Page
{
        _Page_1 PostingPage;

        protected void Page_Load(object sender, EventArgs e)
        {
            if (this.PreviousPage != null)
            {
                PostingPage = this.PreviousPage;

                Label1.Text = PostingPage.Page1_Propertise;
            }
            else
            {
                Label1.Text = "Previous Page is Null";
            }
        }
 }

Usually you can use when creating wizard or pages that required tight coupling. You have to set PreviousPageType directive in order to access Page 1 properties.

Okie now, you might ask how to access a page's properties, control, or function without using PreviousPageType directive. The answer is..you may use Reference directive. Let's create the scenario now.

Now, we do not want to use PostbackURL at the button in Page 1, instead, we use a normal navigation method.

<asp:Button ID="Button1" runat="server" Text="Button"OnClick="Button1_Click" />

In the Page 1 code behind,

protected void Button1_Click(object sender, EventArgs e)
{
    Server.Transfer("~/Page 2.aspx");
}

Now, we need to add reference in Page 2 so that it can access Page 1 with no problem.

<%@ Reference Page="~/_Page_1.aspx" %>

By using reference page, you may need to cast your page object like the code below.

public partial class Page_2 : System.Web.UI.Page
    {
        _Page_1 PostingPage;

        protected void Page_Load(object sender, EventArgs e)
        {
            if (this.PreviousPage != null)
            {
                PostingPage = (_Page_1)this.PreviousPage;

                Label1.Text = ((Label)PostingPage.FindControl("Label2")).Text;
            }
            else
            {
                Label1.Text = "Previous Page is Null";
            }    
        }
    }

Now, Questions raised when come to validation and Cross Page posting. If client-side validation (using javascript) is disabled on a web form, the validation will greatly depend on server-side validation. But using PostbackUrl on button will redirect to a new page. Although the server side validation has been in place, the problem is being ignored.

What you can do here is to use PreviousPage.IsValid() function.

See the samples below:

protected void Page_Load(object sender, EventArgs e)
{
    if (PreviousPage != null)
    {
        if (PreviousPage.IsValid == true )
        {
            //Continue
        }
        else
        {
            //Return to previous page
        }
    }
}

Hope the content helps. Cross Page posting may come handy when you really need a tight coupling pages like Wizards.

SQL Server FullText Search service could not be started

After you have installed SQL Server 2005 on Window Vista, you might find your the service above could not be started, and it returns you error like "the dependency service is missing or marked for future deletion".

The problem is that one of the service named "NTLMSSP" does not exist in Window Vista environment. If you want to know better about NTLMSSP, Live-Search it.

The solution is simple, install SQL Server SP2 for Vista. Then you will find the dependency service removed.

If the problem persisted, DIY method at below:

1. type in "regedit" in Search to open Registry Editor.
2. Go to HKEY_LOCAL_MACHINE -> SYSTEM -> CurrentControlSet -> Services
3. Select msftesql. Check that the display name is SQL Server FullText Search.
4. Find the item named "DependOnService". Right Click -> Modify
5. remove the NTLMSSP from the list and Click Ok
6. Reboot and you can try starting the service again.

Hope it helps.

SQL Server Management Studio missing after installing SQL Server 2005 on Window Vista

Sometimes this could happen when you install or reinstall SQL Server on Window Vista. I am not very sure what is the cause of it but it took away 1-3 days to figure out what was wrong with all these. It will be even worst when you find your Business Intelligence Development Studio missing as well.

Ok, do not worry about it.

What you need to do is

1. Do not uninstall it.
2. Go to your Microsoft SQL Server folder -> 90 -> Tools. And rename the Tools folder name to Tools-Bak
3. Insert your SQL Server DVD and Browse it.
4. Find a folder named Tools and execute the installer in the folder. It will basically install the missing tools (Management Studio, etc) and Sample Database.
5. if you have problem with the SQL Server instance attaching the sample databases, do not install it else it will bring more headaches to you.
6. Once you have finished installing the tools.. you will find a new Tools folder appear in your Microsoft SQL Server -> 90 folder.
7. Now it should solve your headaches. Do not think it is finished, Apply Service Pack 2.

Hope It helps.

How to deploy Silverlight component on IIS

When you publish your website to IIS, most probably you will find your xap file copied along into the server. But when you open it in your web browser, you may not be able to see the Silverlight component in your website. There is one thing that you may need to do in order to see it, it is to

Register your silverlight extension to MIME type

Go to your IIS, Add MIME type

Extension: .xap

Application: application/x-silverlight-app

How to integrate Silverlight component into ASP.Net Website

To integrate your Silverlight component into ASP.Net Website, all you need is your xap file. You may find it under Bin folder inside your Silverlight project folder. Before you copy it, make sure you have build and compiled it.

Steps:

1. In your Website project, create a folder named “ClientBin”.
2. Copy the xap file from your Silverlight application project into the ClientBin folder.
3. Open your Website project in VS 2008, and include the ClientBin folder into the solution. To include it, you need to open your Solution Explorer, click on the “Show All File” icon, and then right click on the invisible (ClientBin) folder and select “Include In Project”.
4. Then open the web page that you want to insert your silverlight component.

<!-- If ASPX page, use ScriptManager and Silverlight control -->
<form id="form1" runat="server" style="height:100%;">
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
      <div  style="height:100%;">
          <asp:Silverlight ID="Xaml1" runat="server" Source="~/ClientBin/Sample.xap" MinimumVersion="2.0.30523" Width="100%" Height="100%" />
      </div>
</form>
    
<!-- If HTML page, use Object control -->
<div id="silverlightControlHost">
<object data="data:application/x-silverlight," type="application/x-silverlight-2-b2" width="100%" height="100%">
    <param name="source" value="ClientBin/Sample.xap"/>
    <param name="background" value="white" />
            
    <a href=http://go.microsoft.com/fwlink/?LinkID=115261 style="text-decoration: none;">
        <img src="http://o.microsoft.com/fwlink/?LinkId=108181" alt="Gt Microsoft Silverlight" style="border-style: none"/>
    </a>
</object>

<iframe style='visibility:hidden;height:0;width:0;border:0px'>
</iframe>
</div>





5. Verify it by debugging your website project and view the page.

How to control an animation to be on/off at certain time

I find this useful when you want to catch your web user’s attention when they are browsing your website. Besides, animation can make your website look more lively and interactive.

In this section, I am not going to explain how to create an animation but how to control it to begin and stop in code behind using C#.

Before we go there, we need to create an animation in the first place and name it accordingly. You can create an animation easily using Expression Blend. You just have to click on the Add New Storyboard icon under the Objects and Timeline section and it will start recording. You may try to scale up and down an object or change its color. Let’s look at the following screenshot as an example:-

If you notice it, you may see the “Bip!” text coming out to represent ringing. So how do I set the animation begin time and stop time? The answer is “it depends on how you want it to be”.

Okay now, go to your Page.xaml.cs file.

1. Create a Storyboard object and set it to null under Page class.

Storyboard PhoneBip = null;





2. Under the Public Page() constructor, instantiate a Storyboard object.




PhoneBip = new Storyboard();





3. PhoneBip object is a new object that does not have any animation set. So now I want to reference it to the one that I have already created in XAML.




PhoneBip = (Storyboard)base.FindName("PhoneRing");





4. I also want to set its behavior to Stop once it has finished the animation.




PhoneBip.FillBehavior = FillBehavior.Stop;





5. You have done the necessary set-up, you may try to begin the animation.




PhoneBip.Begin();





6. You may want to start the animation at certain time, then you can use DispatcherTimer object to control the tick count.

Below is the sample code:-

public partial class Page : UserControl
    {
        Storyboard PhoneBip = null;
        DispatcherTimer t = null;
        private static int tickCount = 0;

        public Page()
        {
            InitializeComponent();

            PhoneBip = new Storyboard();
            PhoneBip = (Storyboard)base.FindName("PhoneRing");
            PhoneBip.FillBehavior = FillBehavior.Stop;

            t = new DispatcherTimer();
            t.Interval = TimeSpan.Zero; 
            t.Tick += new EventHandler(t_Tick); 
            t.Start();
            
        }

        protected void t_Tick(object sender, EventArgs e)
        {
            tickCount += 1;
            this.Update();
        }

        private void Update()
        {
            
            if (tickCount > 300)
            {
                PhoneBip.Begin();
                tickCount = 0;
                
            }
        }
…

How to create a template for a button type with visual states

Silverlight allows user to create template for button with visual states. For example let’s look at the following screenshot:

It is an image button that contains customized template. XAML will look like the following

<Button Height="Auto" Width="Auto" Content="Contact" Margin="10,0,10,0" x:Name="Contact" Template="{StaticResource LeftHeader_Top_Contact}" Cursor="Hand" Click="Contact_Click" >

...

</Button>

1. To create this using Expression Blend,



2. Drag a button into the page.



3. Select the button, Right Click and Select Edit Control Parts (Template) -> Create Empty.



4. The button is now assigned with an empty template and the XAML will look similar to the code above.



5. In the Edit Template section, you can put in image, text or create animation using visual states.



6. All of the states are remained in Base state, it means no animation. You may want to create a bit of animation during MouseOver state.                                                                       



7. To do that, click on the MouseOver state and it will start recording each change into key frame. For e.g Change color, Scale up and down, etc.

Once you have done, click on the Base state to stop recording.

How to create a tooltip with customized style

Tooltip is a very useful tool to provide brief information about an object (usually during mouse hover action) in a web application and Silverlight is flexible enough to let you customized its style. In my case, I am using it on image button.

By looking at 3 image button above, you may not understand where the buttons will lead you to. Thus, if you are using tooltip, you will know the information about the image button. For example, above image shown a mouse hover action on a “mail-like” icon, and tooltip appeared and shows “Contacts”.

XAML

<Button Height="Auto" Width="Auto" Content="Contact" Margin="10,0,10,0" x:Name="Contact" Template="{StaticResource LeftHeader_Top_Contact}" Cursor="Hand" Click="Contact_Click" >
    <ToolTipService.ToolTip>
        <TextBlock Height="Auto" Width="Auto" Text="Contacts" TextWrapping="Wrap" Style="{StaticResource ToolTipStyle}"/>
    </ToolTipService.ToolTip>
</Button>

Above code shown inheriting a style from a StaticResource named TooltipStyle. To create a Page level style:

<UserControl.Resources>
    <Style x:Key="ToolTipStyle" TargetType="TextBlock">
        <Setter Property="Foreground" Value="#FF9A9898" />
        <Setter Property="FontSize" Value="10"/>
        <Setter Property="VerticalAlignment" Value="Bottom"/>
        <Setter Property="FontFamily" Value="Times New Roman"/>
    </Style>

…

How to create shadow

Shadow effect gives 3D experience to the user and it greatly increases UX (user experience) during browsing. Unlike WPF, Silverlight does not have a pre-defined object that can create the effect for you. So to create shadow, you may need to create a shape and color it with black.

Let’s look at the MENU Bar again, when mouse hover over, the menu item will raise and leave a shadow below it. (“About Us”)

The shadow is created using Ellipse. XAML looks like this:

<Ellipse Height="4" x:Name="ellipse" Width="50" Opacity="0.5" RenderTransformOrigin="0.5,0.5" StrokeThickness="0" Margin="0,0,0,0" VerticalAlignment="Stretch">
    <Ellipse.Fill>
        <RadialGradientBrush>
            <GradientStop Color="#00000000"/>
            <GradientStop Color="#FFFFFFFF" Offset="1"/>
       </RadialGradientBrush>
    </Ellipse.Fill>
</Ellipse>

*Noticed that I am using a RadialGradientBrush to create the fading effect at the outer area.