{"id":9,"date":"2007-09-28T10:01:04","date_gmt":"2007-09-28T18:01:04","guid":{"rendered":"http:\/\/www.installaware.com\/blog\/?p=9"},"modified":"2008-01-04T07:50:10","modified_gmt":"2008-01-04T15:50:10","slug":"installaware-goes-aero-with-vista-glass-component","status":"publish","type":"post","link":"https:\/\/www.installaware.com\/blog\/?p=9","title":{"rendered":"InstallAware goes Aero with Vista Glass component"},"content":{"rendered":"

Hello again. I’d promised myself to make at least one post per week<\/strong> here, but the last two weeks<\/strong>, boy, have been a hell of a time<\/strong> for me – I almost broke my leg<\/strong> and then got a real bad cold that’s still bothering me. Now I know how Walt Disney’s Donald Duck<\/strong> feels about his bad luck<\/strong>. Anyway, my leg is better, it doesn’t hurt so much anymore and I’ve decided that its time to get back on this blog and post some new stuff<\/strong>. Some cool stuff, like the Vista Glass component<\/strong> on InstallAware’s forms designer<\/strong>.<\/p>\n

The Vista Glass component<\/strong> gives the glass feeling (Aero)<\/strong> to your setup UI, making window regions appear “glassy”<\/strong> like Windows Media Player on Windows Vista. Although still in beta, it works like a charm. In this post, you’ll find info<\/strong> about how to use it<\/strong>, what it does<\/strong>, what the drawbacks are<\/strong>, how to overcome them<\/strong> and you’ll get a push on creating your very first InstallAware Theme with Vista Glass support. Amazing<\/strong>, isn’t it? And it gets better<\/strong>.<\/p>\n

Getting Started<\/strong><\/p>\n

In order to start exploiting<\/strong> InstallAware’s Vista Glass features, you’ll want to create a new project<\/strong> (you could also use an existing project, but this is just experimentation so I suggest creating a new one). Then, in the visual designers, go to the “User Interface”<\/strong> section and click on the “Dialogs”<\/strong> option.<\/p>\n

<\/p>\n

You get a list of the dialogs<\/strong> in your project sorted by the order they appear during install procedure. Highlight the “Welcome” dialog<\/strong> and get a preview of it, before beginning to apply Vista Glass effects.<\/p>\n

<\/a>\u00c2\u00a0<\/p>\n

When you double click a dialog<\/strong>, the form designer pops up, allowing you to change anything you want<\/strong> on your form, from simply re-arranging elements<\/strong> (textboxes etc.), to creating scripted events <\/strong>and reading\/writing variables<\/strong> to interact with MSICode.<\/p>\n

Let’s Go Glass!<\/strong><\/p>\n

Finding<\/strong> the Vista Glass<\/strong> component is really easy<\/strong>. Click<\/strong> the “Win32”<\/strong> tab<\/strong> and the right-most control<\/strong> on the palette is “VistaGlass”<\/strong>, the one we’re looking for.<\/p>\n

<\/p>\n

Click the component icon<\/strong> and then click anywhere on the dialog form<\/strong>. The VistaGlass component icon appears on your dialog<\/strong>. Click it to edit <\/strong>it’s properties<\/strong>: change the “GlassEnabled” and “SheetOfGlass” properties to “True”<\/strong>. Just by doing this, you get a VistaGlass (Aero) dialog!<\/p>\n

\u00c2\u00a0<\/p>\n

To preview<\/strong> your achievement, click on the Test Dialog toolbar button<\/strong> (the one with the thunderbolt icon<\/strong>).<\/p>\n

Next Steps<\/strong><\/p>\n

You might be wondering if it’s really that simple<\/strong>. Basically, yes! You now have full Vista Aero Glass effects on your dialog<\/strong>. Due to the beta nature of the component however, some controls render awkward<\/strong>. We can make it all look better<\/strong> with some tricks. Instead of glassing the entire dialog, lets focus on glassing a targeted region first. We need to change two properties<\/strong> for this one. The first <\/strong>is called “SheetOfGlass” – change it from “True” to “False”<\/strong>. The second<\/strong> is “GlassBottom”<\/strong>, which sets<\/strong> the pixels<\/strong> occupied by the glass effect, counting up from the bottom of the dialog. <\/strong>With the “Official Theme”<\/strong>, try setting“GlassBottom”<\/strong> to “301”<\/strong>. Now our UI looks much better!<\/p>\n

Pro’s and Con’s<\/strong><\/p>\n

It’s obvious that by using VistaGlass<\/strong> on your setup UI, you’re giving your users a richer setup experience<\/strong>. They get the “wow”<\/strong> before even having used your product for the first time, giving you a clear advantage<\/strong> over your competition<\/strong> just by using the right setup tool. Also, don’t<\/strong> worry<\/strong> if your setup needs to run on versions of Windows earlier than Vista.<\/strong> The VistaGlass<\/strong> component auto-detects<\/strong> the end-user’s Windows version, and disables the glass effect<\/strong> on legacy operating systems automatically, without any error messages or other undesirable UI artifacts.<\/p>\n

The only issue<\/strong> is that some controls don’t render correctly<\/strong>, but you can easily overcome those issues<\/strong> (even at this beta stage). InstallAware’s flexible MSICode <\/strong>lets you do anything you want<\/strong>. For example, I’ve manually calculated the <\/strong>TotalRequiredSpace value using MSICode<\/strong>, because the static label showing TotalRequiredSpace<\/strong> renders incorrectly on Glass, as a black rectangle.<\/p>\n

\u00c2\u00a0<\/a><\/p>\n

I used the MSIcode functions<\/strong> “Get Component Space”<\/strong> to get the total bytes required, “Mathematics” <\/strong>to convert those bytes into KB or MB, and then “Set Variable”<\/strong> to concatenate the string “KB” or “MB” at the end of the value – finally displaying the result in a regular label, which does render correctly.<\/p>\n

Conclusion<\/strong><\/p>\n

I’ve said <\/strong>this before<\/strong> but I’m going to say it again<\/strong>. By leveraging the Aero Experience<\/strong> on your setups, you impress your customers<\/strong> – on every single trial download! Give them the “wow”<\/strong> feeling right from the beginning<\/strong>…with your setup! You can also create your own themes<\/strong> by using<\/strong> the VistaGlass component and building on top of empty dialogs, or based off of an existing theme. You could even replicate, for example, the look and feel of Office 2007 installations using the tab component<\/strong>!<\/p>\n

That’s all for today. Stay tuned<\/strong> people, more to come<\/strong>.<\/p>\n

Panagiotis Kefalidis
\nInstallAware CCP — DataFire Software, Greece<\/p>\n","protected":false},"excerpt":{"rendered":"

Hello again. I’d promised myself to make at least one post per week here, but the last two weeks, boy, have been a hell of a time for me – I almost broke my leg and then got a real bad cold that’s still bothering me. Now I know how Walt Disney’s Donald Duck feels … <\/p>\n

Continue reading “InstallAware goes Aero with Vista Glass component”<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[9,1],"tags":[],"class_list":["post-9","post","type-post","status-publish","format-standard","hentry","category-custom-dialogs","category-news"],"_links":{"self":[{"href":"https:\/\/www.installaware.com\/blog\/index.php?rest_route=\/wp\/v2\/posts\/9","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.installaware.com\/blog\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.installaware.com\/blog\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.installaware.com\/blog\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.installaware.com\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=9"}],"version-history":[{"count":0,"href":"https:\/\/www.installaware.com\/blog\/index.php?rest_route=\/wp\/v2\/posts\/9\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.installaware.com\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=9"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.installaware.com\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=9"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.installaware.com\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=9"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}