Two days ago I have downloaded and installed new Microsoft Visual C++ 2008 Express.
First thing that you see when you start its IDE is the Start Page (close to what you see on the right). I was intrigued how this view is made. That clearly have look and feel of a web page. Some portions of data are coming from Internet.
So I took the Spy++ application and pointed it on the view. It was a surprise for me to discover that this view is made of separate windows in old VB style. It is made of 40 (forty) child windows. That is not so good to be honest:
- too resource greedy, e.g. without this view IDE takes 10 Mb less of memory;
- and as you might expect scales badly on high DPI settings, see example of actual rendering:
Thus I’ve decided to reproduce this screen in HTMLayout. Here are steps of how I’ve made it.
1. Images
For this particular view we need 4 ( and only four ) images:
– header background;
background of the body section;
background and borders of informational panel;
– background of panel’s caption.
(I took these images from screenshot I made from Microsoft Visual Studio window. These images are probably copyrighted. In any case my respect to their authors.)
Ok, back to business…
2. HTML
Structure of HTML for such a view is simple:
<body>
<div .header />
<div #sidebar >
<div .panel #recent-projects><caption>Recent projects</caption>
<ul><include src="content/list-of-projects.htm" /></ul>
<table>
<tr><td>Open:</td><td href="#">Project...</td></tr>
<tr><td>Create:</td><td href="#">Project...</td></tr>
</table>
</div>
<div .panel #getting-started><caption>Getting started</caption>
<ul><include src="content/getting-started.htm" /></ul>
</div>
<div .panel #headlines><caption>Headlines</caption>
<dl><include src="content/headlines.htm" /></dl>
</div>
</div>
<div .panel #msdn-news>
<caption>MSDN: Recent news</caption>
<dl><include src="content/msdn-recent-news.htm" /></dl>
<p style="text-align:right;"><a href="#">More news...</a></p>
</div>
</body>
Nothing spectacular so far I would say.
Note:
Markup above is HTMLayout specific: 1) <div .panel > is a short form of <div class=”panel” > and
<div #recent-projects > is <div id=”recent-projects” > and you can use both forms. And 2) <include src=”content/list-of-projects.htm” /> is so called client side include instruction – it allows to assemble final HTML from different source files. This include makes sense here as while parsing engine will generate HLN_LOAD_DATA notifications for each inclusion. These portions are dynamic so handling this notification we can generate HTML content fragments we need. That is close to the CGI idea.
3. Styles
Final piece left – styles. That is really simple as HTMLayout supports expandable backgrounds.
If you have read document under the link above then you should get the idea of this fragment. It defines styles for our panel and its caption:
div.panel
{
background-image: url(images/panel-back.png);
background-repeat: expand;
background-position: 14px 14px 14px 14px;
// top right bottom left offsets/margins
padding: 0 10px 10px 10px;
margin-bottom:20px;
}
div.panel > caption
{
background-image: url(images/panel-caption-back.png);
background-repeat: expand stretch-left stretch-middle stretch-right;
background-position: 3px 3px 3px 3px;
// top right bottom left offsets/margins
padding:6px 6px;
color:white;
font-weight:bold;
position:relative;
top:-0.7em;
margin-bottom:-0.6em;
}
Other styles are also simple as these two above.
To see this mock-up alive you can download demo browser.exe with samples and run /bin/browse.exe. Click open button and find /html_samples/MSVS-start-page/start-page.htm. This is it.
4. Epilogue
It took me one hour to design this sample (from the set of existing images).
Loaded document consumes 5 (five) times less resources than original solution.
And HTMLayout is free. For Microsoft Visual Studio Team (respect!) too 🙂