Saturday, August 30, 2008

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.
  2. <asp:Button ID="Button1" runat="server" Text="Button" PostBackUrl="~/Page 2.aspx" />



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


  4. <%@ 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.



Thursday, August 21, 2008

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.

Thursday, August 7, 2008

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.
  5. <!-- 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>



  6. 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:-

clip_image002

clip_image004

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.
  2. Storyboard PhoneBip = null;



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


  4. PhoneBip = new Storyboard();



  5. 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.


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



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


  8. PhoneBip.FillBehavior = FillBehavior.Stop;



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


  10. PhoneBip.Begin();



  11. 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:

clip_image002

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.                                                                        clip_image004


  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.



clip_image006



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.

clip_image002

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.

clip_image002

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.

How to create a Silverlight Application

Technology

Technology Used:

  1. Microsoft Silverlight 2.0 Beta 2
  2. Microsoft Silverlight 2.0 SDK Beta 2
  3. Microsoft Silverlight 2.0 Tools Beta 2 for Visual Studio 2008
  4. Microsoft Expression Blend 2.5 June 2008 Preview
  5. Microsoft Visual Studio 2008
  6. IIS 7

Implementation

How to create a Silverlight Application

Silverlight Application can be created in both Visual Studio 2008 and Expression Blend. It can be opened in both programs too.

Visual Studio 2008

To create in VS 2008,

  1. Run Visual Studio 2008 (if Win Vista, run as Administrator)
  2. Go to File -> New and click on Project.
  3. Select Silverlight at the Project Type panel, and then select Silverlight Application at the Template List panel.
  4. Noticed that it prompts you a new window with the title “Add a Silverlight Application”, in this window you may select a default settings and it will create a Website Project and a Silverlight Application Project.
  5. Build the solution, and you will notice that a file with the extension .xap is created in the ClientBin folder under the website project.clip_image002
  6. You can find 2 XAML files under Silverlight Application project. App.xaml is a XAML file that stores application level resources while Page.xaml is a main page that stores the resources and page elements at page level. To View the Page.xaml file, you will see:-
<UserControl x:Class="SilverlightApplication6.Page"


    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 


    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 


    Width="400" Height="300">


    <Grid x:Name="LayoutRoot" Background="White">


  </Grid>


</UserControl>







Expression Blend



To create in Expression Blend,




  1. Run Expression Blend 2.5 (if Win Vista, run as Administrator.


  2. Click on New Project on the start-up menu.


  3. You will see 4 options, WPF Application (.exe), WPF Control Library, Silverlight 1 Site, and Silverlight 2 Application. You need to select Silverlight 2 Application.


  4. After it is completed, you will see the same file structure as in Visual Studio 2008 but without the website project. If you build and debug it, it will dynamically generate a test page to display the result.







How to use Grid Layout to partition the layout of the website

Grid Layout is one of the widely used layouts in Silverlight application. It allows the user to partition it into structural grid like TABLE element in HTML.

To create columns/rows, user needs to define the columns and rows first under the Grid tag.

<Grid x:Name="LayoutRoot" Background="White">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="0.5*"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="0.5*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="0.3*" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
</Grid>










The value “*” means the rest of the remaining space but if value like “0.5*”, it works as a percentage. User may also use pixels as value, for e.g. “300”.

Once you have finished definining the layout, you can assign them to elements. You can imagine them like Array, their index starts with value “0”. The Border element must be inside the Grid tag.

<Border Grid.Column="0" Grid.Row="0">
...
</Border>


Or if you want to work with RowSpan or ColumnSpan,

<Border Grid.Column="1" Grid.Row="0" Grid.ColumnSpan="2"






If you do not want to define the columns and spans, the items under the Grid element can overlap each other, and this can give another type of good effect like

clip_image002

The above picture shows 3 Border elements under a Grid element.



How to use StackPanel Layout to arrange the items

StackPanel layout is another one of the widely used layouts but its behavior differs from other layouts. As the name speaks (Stack), it can stack child elements vertically or horizontally. Thus, you can find it neat and you do not need to adjust the position manually.

Stack Horizontally

One scenario that I can think of is Horizontal Menu Bar. Let’s look at the sample screenshot below for more feel of it.

clip_image002

XAML

<StackPanel Orientation="Horizontal" x:Name="stackPanel_Name" HorizontalAlignment="Right" Margin="0,5,0,0">

</StackPanel>











Stack Vertically









I used this quite often when I was creating shadow effect or reflection effect, and it works perfectly. Let’s look at the next screenshot.









clip_image004









XAML









<StackPanel Orientation="Vertical" VerticalAlignment="Stretch" HorizontalAlignment="Stretch">

</StackPanel>



















How to create reflection on images and objects

Different type of objects may have different way to create reflection in Silverlight. If you wish to brush an image, you may need to use ImageBrush object. Or if you need to brush a video, you may need to use VideoBrush. Or otherwise, just duplicate the object, turn it around by using transform.

We are going to use the same sample here.

clip_image002

Inside the StackPanel, the code will look like this

//Create an Image inside a ContentPresenter

<ContentPresenter>
<Image x:Name="imgLogo" Source="images/logo.jpg" >
</Image>
</ContentPresenter>

//Create a Rectangle that will use ImageBrush on the jpg file

<Rectangle x:Name="rectReflect" Height="28" Width="190" Opacity="0.5">
<Rectangle.OpacityMask>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#00000000" Offset="0.5"/>
<GradientStop Color="#FF000000" Offset="1"/>
</LinearGradientBrush>
</Rectangle.OpacityMask>

<Rectangle.Fill>
<ImageBrush ImageSource="images/logo.jpg" Stretch="Uniform"/>
</Rectangle.Fill>

<Rectangle.RenderTransform>
<TransformGroup>
<ScaleTransform CenterY="0.5" ScaleX="1" ScaleY="-1"/>
</TransformGroup>
</Rectangle.RenderTransform>
</Rectangle>