Gunnar Peipman's ASP.NET blog

ASP.NET, C#, SharePoint, SQL Server and general software development topics.

Sponsors

News

 
 
 
DZone MVB

Links

Social

February 2012 - Posts

Creating gadget-like blocks for Windows Home Server 2011 web add-in user interface

To keep user interface of your Windows Home Server 2011 (WHS) web add-in similar to other parts of UI you may need styled blocks like shown on WHS web interface home page. In this post I will show you HTML mark-up and CSS you need to create your own gadget block.

Example of gadget-like block

WHS YouTube help blockHere is the example of custom gadget-like block from the UI of my WHS YouTube Downloader. There is no out-of-box control or some other UI component you can use on different pages that renders you simple area to show some custom content.

I extracted mark-up and styles of gadget and made my own fixes to make block look nice. Although I’m not very happy because of massive use of tables my solution still works and it is simple to use.

Mark-up for gadget-like block

Here is the HTML mark-up for gadget-like block.


<div class="Homepage-GadgetBoxBase Homepage-GadgetBox My-Sidebar">
    <table class="Homepage-GadgetTable">
        <tbody>
            <tr class="Homepage-GadgetTopRow">
                <td class="Homepage-GadgetTLCell"/>
                <td class="Homepage-GadgetTMCell single-line">
                    <a title="Title link description">Title</a>
                </td>
                <td class="Homepage-GadgetTRCell"/>
            </tr>
        </tbody>
    </table>
    <table class="Homepage-GadgetTable">
        <tbody>
            <tr class="Homepage-GadgetMiddleRow">
                <td class="Homepage-GadgetMLCell"/>
                <td class="Homepage-GadgetMCell">
                    <div class="My-Gadget-Content">
                        Content here
                    </div>
               
</td>
                <td class="Homepage-GadgetMRCell"/>
            </tr>
        </tbody>
    </table>
    <table class="Homepage-GadgetTable">
        <tbody>
            <tr class="Homepage-GadgetBottomRow">
                <td class="Homepage-GadgetBLCell"/>
                <td class="Homepage-GadgetBMCell"/>
                <td class="Homepage-GadgetBRCell"/>
            </tr>
        </tbody>
    </table>
</div
>

You can wrap this box to some base user control and output all container mark-up around inherited controls when render method is called.

Fixing styles

To get the gadget-like block to be rendered correctly we need some additional styles. Looking at source of WHS home page we can see that all gadgets organize their own content containers styling. Here are styles I use for gadget-like block shown above.


<style type="text/css">
.youTubeDownloaderButton
{
   
background-color:rgb(220,227,168)
;
   
border: 1px solid green
;
   
color: black
;
}    
.My-Gadget-Content
{
   
margin-top: 12px
;  
   
margin-right: 12px

   
margin-bottom: 0px

   
margin-left: 12px
;  
}
.My-Gadget-Content li
{
   
margin-left: -20px
;
}
tr.Homepage-GadgetTopRow
{
   
cursor:default
;  
}
.My-Sidebar
{
   
float:right
;
   
width:300px
;    
}
</style
>

You can create your own CSS file for style fixes like this and provide with your add-in installer.

Writing simple named pipes server in C#

I solved a little problem last night when playing with named pipes. I created named pipe that writes all output to file. Named pipe is opened for all users in machine. In this posting I will show you simple class that works as pipe server.

In .NET Framework languages we can use System.IO.Pipes namespace classes to work with named pipes. Here is my simple pipe server that writes all client output to file.


public class MyPipeServer

{

    public void Run()

    {

        var sid = new SecurityIdentifier(WellKnownSidType.WorldSid, null);

        var rule = new PipeAccessRule(sid, PipeAccessRights.ReadWrite,
                                     
AccessControlType.Allow);

        var sec = new PipeSecurity();

        sec.AddAccessRule(rule);

 

        using (NamedPipeServerStream pipeServer = new NamedPipeServerStream
              ("testpipe",
PipeDirection.InOut, 100,
               PipeTransmissionMode.Byte, PipeOptions.None, 0, 0, sec))

        {

            pipeServer.WaitForConnection();

 

            var read = 0;

            var bytes = new byte[4096];

 

            using(var file=File.Open(@"c:\tmp\myfile.dat", FileMode.Create))

                while ((read = pipeServer.Read(bytes, 0, bytes.Length)) > 0)

                {

                    file.Write(bytes, 0, read);

                    file.Flush();

                }

        }

    }

}


Real-life pipe scenarios are usually more complex but this simple class is good to get things running like they should be.

Posted: Feb 24 2012, 12:04 PM by DigiMortal | with 1 comment(s)
Filed under: ,
Setting up Windows Home Server 2011 development environment

For Windows Home Server 2011 (WHS) there are new API-s available you can use to extend WHS web and desktop interfaces. Actually there is no Windows Home Server SDK anymore – now we have common Windows Server Solutions (WSS) SDK that works also for Windows Small Business Server, Windows Storage Server and Windows MultiPoint Server. In this posting I will show you how to create development environment for Windows Home Server 2011.

Step by step guide

To set up development environment for WHS follow the steps given below.

  1. Create new virtual machine for WHS2011. You can use whatever virtualization solution you like (Hyper-V, VMWare Player, VirtualBox). Make sure to give at least 160GB HDD and 2GB of RAM to WHS2011 image. This is needed only during installation. You can later change the size of virtual HDD and then resize it to smaller size.
     
  2. Install WHS2011. Nothing special here, just follow the installation steps (next-next-next).
     
  3. Configure WHS2011. Configure RDC access to WHS2011. It faster and way better than those slow and weird sized windows that virtualization software offers you.
     
  4. Install Visual Studio 2010. Install VS2010 with SP1. Also make sure to apply all important updates to WHS2011 and VS2010.
     
  5. Download and install WSS SDK. Now download and install Windows Server Solutions SDK.
     
  6. Create project templates folder for VS2011. Open Windows Explorer and move to folder C:\Users\<MY USERNAME>\Documents\Visual Studio 2010\Templates\ProjectTemplates\Visual C#. Create subfolder names as Windows Server Solution.
     
  7. Copy WSS templates. Move to folder C:\Program Files (x86)\Microsoft SDKs\Windows Server Solutions\6.1\Templates and copy all subfolders to your VS2010 templates directory you created before.
     
  8. Check if templates are there. Run VS2010 and open new project dialog. See if all WSS templates are there.

    Windows Server Solutions templates

If you did everything right then you should see Windows Server Solutions folder in new project dialog of VS2010. RWW is folder for web add-ins. I’m not sure why the name like this but you can change it if you wish.

That’s it. Now we have virtual machine for Windows Home Server development. You can find more information from Windows Server Solutions SDK site and from We Got Served – site dedicated to Windows Home Server. To get one not-so-easy example take a look at my WHS YouTube Downloader – it is open-source project hosted in Codeplex.

Just released: WHS YouTube Downloader beta

I just released to Codeplex the first beta of my Windows Home Server 2011 web add-in called WHS YouTube Downloader. Log in to WHS web interface, add YouTube videos to download queue, do something useful while home server downloads videos and watch them later when downloads are done. Sounds easy? Well, okay, it is easy!

Features

Currently there are implemented following features:

  • web add-in has form integrated to WHS web interface (yes, it’s done using official tools, no hacks),
  • there is home page gadget that shows contents of download queue,
  • users can choose shared media library where videos are saved,
  • users can select video format before file download,
  • download progress is shown on downloader page,
  • file downloads are parallel.

WHS YouTube Downloader
Click on image to see it at original size.

Some limitations:

  • only shared media libraries of Windows Home Server are supported as download folders,
  • currently all communication between web interface and downloader service host uses port 8732, so make sure this port is not used by any other program or service,
  • files can be saved in formats that YouTube offers – there is no transcoder that converts between file formats.

I plan to release first stable version during next two weeks. Meanwhile I appreciate all testing feedback and feature requests. And, of course, I will update product documentation to better support home users who are not IT gurus. :)

More Posts