Remarks by Eric Rudder, Senior Vice President, Server and Tools Business, Microsoft Corporation
Microsoft Professional Developers Conference 2005
Los Angeles, California
September 14, 2005
ANNOUNCER: Ladies and gentlemen, please welcome Microsoft’s senior vice president, Server & Tools business, Eric Rudder. (Applause.)
ERIC RUDDER: Well, good morning! My job is easy to day; I’ve got three things that I need to get done. First, I need to thank all of you, thank you for coming and spending some time with us, thank you for engaging with us and being part of a community, thank you for giving us feedback on our products, thanks for telling us how to make the PDC a great event, and keep the feedback coming.
The second thing I need to do is make sure I talk as quickly as possible and get to the cool demos. And we’ve got a lot of cool demos, there are six cool demos in 60 minutes, so we’ve got a lot of cool, fun stuff on tap.
And the third thing I want to do is I want to make sure that I get you guys thinking about the next set of technologies that are coming and for you to start thinking now about how that’s going to impact your applications and solutions in the future, because I think the more planning and the more you know what’s coming, the better you can go back and start to structure your code or structure some tasks that will leave you much better positioned for the future.
Community and World-Class Tools
This is a slide that I kind of closed my talk with at the PDC last time, and I thought it was important to bring out and kind of go forward, because it was our commitment to you, and there were four things we talked about. The first was talking about community and that we would listen and that we would be a respectful member of the community, and I want to thank you guys for all the engagement that you’ve done in the community. You saw kind of some fun with the Channel 9 video. We really appreciate the feedback that we get, whether it’s e-mail or grabbing a Microsoft person in the big room or coming to a Birds of a Feather session or however you want to engage, user groups; we really value that feedback and we really do try and listen, so keep it coming and let us know how we’re doing.
The second thing we promised was to deliver world-class tools. And the last PDC we talked a lot about Visual Studio 2005, “Whidbey”; this time we kind of are showing a little bit less, we kind of take for granted that “Whidbey” is here. Actually, before you leave we’ll have the final release candidate of “Whidbey” up, we’re looking forward to our launch, we’re going to launch Visual Studio 2005, SQL Server 2005 and BizTalk all together in early November, and I think we’ve done a great job building Visual Studio 2005. We’ve really expanded the audience for it, we’ve got tools all the way from the low end to the high end. Visual Studio Team System offers really great features for enterprise development and source code control. So I think we’ve done our part in building some great tools, and I’m going to show you some more great new tools in the demo further on.
The third point was to work with the ecosystem, because no matter how much work we do in our tools, we still need the partners, and we’ve really grown VSIP, I encourage you guys to check out the big room, you’ll see controls, you’ll see plug-ins, there’s a great service provider industry for people that can do .NET development, and I want to thank our partners as well; so I think we’ve done fairly well on that.
And the last thing really was to deliver the breakthrough platform. And I hope you really enjoyed the keynotes yesterday from Bill, from Jim, and saw all the great work we’re doing in the platform.
But there’s even more stuff coming in WinFX that we didn’t get to talk about yesterday. One of those things is Windows Workflow Foundation. And if you think about it, there is a lot of workflow in our applications, and Windows Workflow actually will integrate both system workflow and human workflow. And so a lot of times we can do structured workflow, but when there’s this task and the user needs to get involved and click or do something that’s asynchronous, it causes a lot of havoc for us.
And we’ve now had Windows Workflow Foundation shipping, it’s a natural extension to the .NET framework, so if you know .NET you’ll know how to use Windows Workflow. It’s got a nice provider architecture, so you can plug in your own implementations if you have some workflow functionality in your solution.
We’re going to be using this ourselves. Steven Sinofsky, who is going to talk after I am, is going to show you a little bit about how we’re using this in Office “12” and SharePoint, and we’re very excited about this.
The second thing that we’re going to show you today is some of our tools targeted towards designers. So I know that PDC stands for Professional Developer Conference, but we’re going to steal the D today for developers and talk a little bit about designers.
I know some of you may have read about Expression in the media, there’s been lots of speculation, “What’s Expression?” Expression is actually a suite of products targeted towards developers. So we have Acrylic Graphics Designer, which is a 2D and 3D vector and bitmap graphics design tool, very innovative, you’ll get to see a little bit of that.
There’s a second tool, which is put in, the Sparkle Interactive Designer. This is a tool for making 2D and 3D animations. We’ll show you that and how you can use some of that in your applications.
And finally we have a Web designer, which we put in, Quartz Web Designer, which helps people do some great things designing pages, designing Web sites, and I think you’ll be very impressed in terms of how it deals with standards and CSS and XSLT, lots of great stuff for again developers and designers to really work better together.
And the third thing I want to talk about is VSTA, which is Visual Studio Tools for Applications. And this really is kind of the next generation of VBA, if you will. It allows application customization with .NET, it uses the Visual Studio IDE, it’s a great development environment. It can run side by side with VBA so there’s no problem if you’ve got VBA code that needs customization. And you’ll actually see the Office group moving to this technology as well with InfoPath in Office “12.”
So I thought it would be great if we could actually rather than go through PowerPoint slides and all the features and all these products to actually do one kind of complete demo, which will show off all the new products, show all the new technologies in WinFX in context.
Using Windows Workflow Foundation, Expression, and Visual Studio Tools for Applications
So I’ve asked David Treadwell, who’s our vice president in the .NET group, who kind of owns WinFX, to put together kind of a lap around our fictional company, Fabricam. And during the demo we’re going to show how Expression is used, how workflow is used, and Visual Studio Tools for Applications is used. So please welcome David. (Applause.)
DAVID TREADWELL: Thanks very much, Eric.
Inside Microsoft I’m responsible for shepherding the various WinFX technologies. One of the best ways to see the things that we’re doing in WinFX and with the tools on top of WinFX is to actually walk through a demo. And so we’ve created this fictitious company, Fabricam. What they do is they create widgets. The important thing here is not the widgets that they create, but rather the ways in which they’re using the different WinFX and other technologies to put together the software that they use to run their business.
So here you have the Fabricam Web site. Like any self-respecting company today, Fabricam has put together a very solid, professional Web site that they use, and they did this with the Expression family of applications.
If you look at the product subset of the Fabricam Web site, you can look at the various products that Fabricam creates. All these are fictitious, and what we’re going to be talking about today is a product that they sell called the VPR 1000.
One of the things that Fabricam has done on their Web site is they use a Web browser application to give a much richer, deeper and more immersive user experience that’s a lot more exciting than a simple HTML page.
Here you can see the application that starts right off of their Web site using the click-once technology. You can see it’s much more interesting and compelling than a typical HTML application. For example, you have automatic resizing and rescaling, you have different mouse-over effects for the buttons that they have on their Web site. Here you can select different models that they have. Using the tab feature you can look at the different features of the VPR 1000 model. Of course, you can look at the specifications. And as I did that, you probably saw the automatic animation that occurred. All this is very easy for Fabricam to create.
What the VPR 1000 is it’s a widget. It has several pieces of functionality: it’s a music player, it’s a video projector and some other things. So on the site you can see a demonstration of the video projector functionality.
Here you can see the Windows Presentation Foundation and the performance it provides. Note that the video is running in the background, you can actually move it around, the different angles happen, and the video performance is unhindered by what I’m doing as a user as I walk through that. (Applause.)
It can also be rescaled easily, it’s very fast on the video.
The other thing this application does is it allows the user to actually request a quote for a larger order of VPR 1000s. So here we’re able to select different options for the VPR 1000. We’re going to load it up with all the different features that it has. Again, note the unique UI, very interesting look, easy to use it. We’re also going to change the skin. I’m a fan of red, so I’m going to change the top of it to be red, and I’m going to change the speakers on the side to be red.
And if we go over here, we can actually request a quote for the fabrications that we put together.
Now, we’ve prepopulated this form with a little bit of information so you don’t have to watch me type it in. One of the things that you’ll note is that we’re asking for it to be a carbon fiber part, so something different about the quote, which will come in later in the demonstration.
And one other thing we’re going to do is we want a logo on the VPR 1000 that we’re going to create, and you can see down here in the lower left the PDC logo that we’re going to want to put on the VPR 1000s that we request.
So the quote is all ready to go and we’re going to submit this to Fabricam.
So that’s the end user’s experience on their Web site and using the smart client application to interact with Fabricam.
When I click submit, the Fabricam application uses the Web Services infrastructure to submit that request up to Fabricam’s back-end. Inside Fabricam they also use the Windows Presentation Foundation and other technologies to have an internal application that they use as Fabricam employees to manage their process. Again, you can see the compelling UI; for example, they can look at charts, this is software effects charting software that’s integrated into the application that they’ve created. You can see various ways to do animations and other effects on the chart that they have.
You can also look at documentation. The internal employee might want to check out different things that the product can do. You can see the rescaling. It happens very quickly, again using the Windows Presentation Foundation and the features in it.
In addition, down at the bottom there is task management, and again you can see the performance of the rescaling and the animation that the Windows Presentation Foundation enables.
Now, what happens inside Fabricam is when I as an end user submitted that request for a VPR 1000, it went over Web Services to their back-end and, of course, Fabricam has to manage the process of walking through the different steps involved in processing that quote. You can see down at the bottom the quote that I just submitted has arrived inside Fabricam and is now ready to be processed.
What this shows is a good example of the use of workflow in an application. One of the things that we have found inside Microsoft is that workflow really applies to all kinds of applications. Today as a developer you typically instantiate your workflow in a lot of different ways in your apps. It’s down into the bits and the bytes and the code, every if statement is a form of workflow in your application. Hooking between different URLs and the link between them, that’s another form of workflow.
The Windows Workflow Foundation allows you to standardize the workflow that you have and visualize it much more effectively than code embedded deep in your application.
In addition, we’ve integrated Visual Studio with designers for workflow so that you can visualize and easily modify the workflow of an application that you use. And this is both the system workflow involving the different systems that you have inside your application and also the human workflow, because what happens with most applications is the human workflow, the steps that we people make decisions on and back up the application with is an essential part of the design of the application that you’re creating.
We’re using workflow deeply inside of Microsoft. As Eric mentioned, the Windows Workflow Foundation is one of the main technologies in the WinFX interfaces. In addition, we’re using WWF in Office “12”, BizTalk and MBS. So we inside Microsoft have found workflow to be very compelling and we hope you do, too.
An In-Depth Look at Windows Workflow Foundation
Now let’s go to the demo. People are excited about the demos. I’d like to ask Dennis Pilarinos to come out and show us what you can really do with the Windows Workflow Foundation.
DENNIS PILARINOS: Thanks, David. (Applause.)
Thank you very much. I’m very excited to be here today and talk to you about Windows Workflow Foundation.
Now, yesterday, as Bill mentioned, a workflow platform is key to building your connected system application. Now, a quote process that Fabricam is going to be using or that Fabricam has described is very workflow centric. Every time a quote comes in to their system, it’s going to kick off a workflow, powered by Windows Workflow Foundation.
Now, every time you have complex control flow logic in your application, you have a workflow. See, in the past what you had to do was write all this custom workflow infrastructure as part of your application. Well, Windows Workflow Foundation completely changes that. WWF is going to make it simple for developers to create, modify and execute workflow in their applications, because it’s just another .NET namespace. And like the other .NET namespaces, you can write to it in C# or VB .NET.
Now, there are a lot of features that I want to show you, but I only have a little it of time, so I’m going to show you three. Number one, I’m going to show you the tight integration that Windows Workflow Foundation has with Visual Studio. Number two, I’m going to show you how you can simply modify an application that’s backed by workflow. And number three, I’m going to show you how you can debug your workflow just like you debug your code today. Actually, it’s way better than you debug your code today. Let’s check it out on the designer.
Great. So here we are in Visual Studio .NET, and you can see I have a solution with two projects, the Fabricam dashboard and my workflow. Let me open up my workflow and you can see what I’ve done here is explicitly model my business logic or the application logic in terms of this workflow.
Now, yesterday I actually had to sit in the back and some of the demos I couldn’t see quite well, so maybe if I zoom this out for you or zoom it in, you’ll get a little bit of a better view of what that workflow looks like. (Applause.) You know, a lot of people wanted to — you know, the workflows get really large and you want to be able to make them fit to your screen.
Let’s take a look at what this workflow does. The first thing it’s going to do is send an e-mail to the engineering and finance department notifying them that they have a quote that they need to take a look at. If either one of them has an issue, they’re going to see that we’re going into this on-hold state.
Now let’s drill in and see what happens when we get into this on-hold state, and what we’re doing is we have a construct that’s going to go and create an Office “12,” kick off an Office “12” workflow.
Now, Office “12” is using the exact same Windows Workflow Foundation technology that we’re talking to you about today.
Now, you see, in the past, previous workflow systems relied on a fixed set of constructs that you had to use to model your workflow. Well, that kind of limited you to a certain extent. So with WWF’s extensibility framework you’re able to create new constructs. We call these constructs activities and those activities are actually executed by the runtime. You can check out a slough of activities that we have ready for you today on www.windowsworkflow.net.
But let me show you one right now. I’m going to create a custom activity, and what I’m going to do is add a new project and call that project My Library. And to that library we’re going to add a new activity. So you can see full integration with Visual Studio’s Project System here. Let’s call that activity “send text message.”
So what I’m going to do here is as the quote enters the on-hold stage, I want to send a text message to the quote fulfillment manager.
Now, what you’re seeing here is the Custom Activity Designer. It allows you to create custom activities via a graphical interface.
Now, I’m somewhat of a developer myself, so just as easily what we can do is take a look at the code that is behind that activity. Hopefully, you’ll notice a very similar model that you’re used to with like the controls analogy here. So what I’m going to do is just jumpstart our code development by using a code snipped.
Now, all I’ve done here is define a couple of properties like who we’re going to send the text message to, what that message is going to be, and an event handler in case we want to do some processing before we send that text message.
I mean, basically what we’ve designed is the programmability of that class or of that activity, but we’ve really missed the important thing of how do you actually send that text message. So we define that within the body of this execute method.
Again, just for expediency’s sake, let me drag and drop a little bit of code here, really straightforward code, we’re going to raise that event handler that we talked about just a second ago, we’re going to new up our text message, send that text message to the properties that we’ve defined on that activity, and then we’re going to return back to the workflow runtime that we’re finished, we’ve closed, we’ve finished our execution.
So now what I’m going to do is build this activity and in a few seconds we’re going to open up our workflow and see it appear in our toolbox. Here it is. And you can see that I’ve extended my workflow just by creating this new class, and there it is on my toolbar.
Now, just as you’d expect, I’m going to drag and drop that new construct, that new workflow construct right into my designer, and then I’m just going to wire up a couple of properties. Here are the properties that we just defined, so here is my handler, there’s the message that I set, and I’m going to send this notification off to me.
Now, this is new code and as a developer sometimes I want to make sure that it’s going to work exactly as I intended, so let’s go back to our state machine view. I’m going to right-click here and insert a break point. We’re starting to see something a little bit interesting here.
Now what I’m going to do is test my application. In order to do that, I’m going to re-launch the dashboard and essentially make sure that the workflow progresses as we’d expect.
Now, we’re actually going to be running the workflow engine inside the dashboard application. Here is my dashboard, and just as you saw David mention earlier, I can go ahead and create a new quote, and I’m just going to for expediency’s sake auto-fill this form out for me, and I’m going to submit that quote.
Now, essentially what we’re doing here is mimicking a quote coming in from that public facing Web site or potentially a call center representative actually filling out this quote. To make sure that everything is happening as we expect, I’ll go to this managed quote screen, and there’s the quote that I just submitted. Its now in the system and that workflow is executing.
Now, if you remember, what that workflow does is it sends an e-mail to the engineering and finance department. So let’s open up Outlook, let’s check my e-mail here and in just a second we’ll have an e-mail from engineering, there we go. And now to get into that on-hold stage, we need to reject that order. So let me go ahead and reject the order, and just as you’d expect, we’re back into Visual Studio and hit our break point. How cool is that? (Applause.)
Now, this is just the beginning that we’re back into VS and we have this tight integration with the debugger. You can see that we have a break point window, a call stack window but this is just the top level debugging. Let me hit F10 and I’m going to step into that state now. I can continue to step, and, you know, maybe I’m going to set a break point here as well because I want to make sure we’re going to kick off that SharePoint workflow exactly as we intended.
Now, to make sure that we’re really tightly integrated, let’s hit F11 now and I’m going to step into the code that I associated with that activity just a few seconds ago.
So here you can see that we’re debugging workflow code and C# or VB .NET code in the same experience.
I’m going to hit F5 and we’ve hit our next break point. I’m going to show you that I can go back in a call stack frame, I can even show you this execution status of each one of the activities. You can see them indicated by those icons there.
Now, I’m pretty satisfied at this point that I’ve modified the application just by modifying my workflow, and I’m ready to let it run.
So let me just recap what I’ve shown you today. One, we’re making workflow available to developers today. On disk four of your DVD you have our beta 1 bits that you can go and play with right now.
Number two, you can extend Windows Workflow Foundation by creating custom activities that fit in your scenario.
And number three, the tight integration of Windows Workflow Foundation with Visual Studio allows you to become immediately effective in building workflow enabled solutions.
Now, throughout the day we have sessions on Windows Workflow Foundation, so I encourage you to go check those out. They start immediately after the keynotes are done.
Thank you for your time. (Applause.)
DAVID TREADWELL: Great job, Dennis.
So hopefully you got a good sense of what we’re doing in extending WinFX with the Windows Workflow Foundation and make it a lot easier for you to have a good sense of workflow in your application to modify it, debug it and build applications for it.
One of the main themes of this week’s conference is the importance of the user experience in creating applications. We’ve all experienced applications that have a dull gray on gray kind of look to them. The experience might not be the only indicator of the quality of an application; certainly there are lots of great apps that don’t have a compelling experience on them.
But just like modern HDTV, high definition movies with a lot of impact and color are a lot better than black and white TV of 50 years ago, we think that the user experience has the opportunity to make applications much easier to use, much more compelling and to allow you to really differentiate your applications from those of your competitors by bringing forward a much richer experience.
Now, I grew up as a developer, and I know that I don’t have any particular design skill in making an application look great, but a lot of people, the designer group are able to make things look really compelling. Historically, however, it’s been difficult for developers and designers to work together: The tools weren’t well integrated, a designer would kind of have to throw over the wall the work that they’d done, and the developer would do their best to recreate the intent of the designer.
How Expression Helps Developers and Designers to Work Effectively Together
The Expression family of products that we’re announcing this week does a lot to make it easier for developers and designers to work effectively together. It lets the designer focus on the functionality of the application, the behavior that it should have, the look and feel, and lets the developer focus on the underlying code that they have to implement, making it robust, high quality, fast, so each person does what they’re best at, and they work effectively together.
Now let’s take a look at all the Expression family. We have several demos here of each of the products: Brian Goldfarb, Joe Marini, and Mark Boulter are going to show us the Expression products for real.
Brian, if you’d come out? (Applause.)
BRIAN GOLDFARB: Thanks, David.
DAVID TREADWELL: Thank you, Brian.
BRIAN GOLDFARB: I’m here to show you how we built the Fabricam Web site using the Expression tools. First, we’re going to look at Acrylic Graphic Designer and build out some assets for the site.
Now, as you can see here on the screen, Acrylic Graphic Designer provides a rich image editing solution for both vector and bitmap based graphics. I can very easily zoom in on these icons and zoom out and move them around, because they’re resolution independent.
Earlier, I was able to export these icons into bitmap format for incorporation into the Web site, but I could have also just as easily exported those icons directly into XAML for use with Sparkle Interactive Designer.
But that’s not the focus of this demo. I’m going to work on building out a bitmap masthead banner that we’ll use in the Web site. Acrylic provides a rich what we call hybrid graphics experience for working with both bitmaps and vector graphics at the same time.
So let’s go on ahead and get started. I’m going to turn off the icons and turn on the image that I want to work with. And now the goal here is to isolate the headshot from the background and incorporate it with the background that’s corporate approved for the Web site. Doing that sort of selection today is quite difficult, but Acrylic incorporates new technology from Microsoft Research that makes this incredibly easy.
So I’m going to go ahead and double-click to put us in the bitmap editing mode, I’m going to choose the lasso tool, and I’m going to make a selection, not a perfect one, around the edges of the image that I want to isolate. And now I’m going to use the smart select feature to do all the hard work for me of isolating that image.
Now, the selection is not perfect, you can clap, that’s all right, that’s very cool. (Applause.) But it’s not perfect, and this is where it gets even better. I can use this inclusion tool to make it very, very easy to add back in the areas that the smart select feature missed. (Applause.)
So now we have the selection. Now I’m going to go ahead and feather the selection to smooth the edges a little bit, and then I’m just going to invert the selection and hit delete. And now we’ve isolated the headshot. (Applause.)
I’m going to jump back now to the main image and I’m going to pull up a background that I built earlier that I want to place the headshot into. So I’m going to go ahead and use Acrylic to scale down the image here proportionally, and I can very easily now just flip the image over and keep the proportions the same and put it into place in the main image and there we go, we now have the headshot incorporated into the main image.
But I want to do some work with the background to liven it up a little bit, and I’m going to take advantage of the built-in styles that come with Acrylic to add some rich look and feel. So I can very easily build styles to do gradients, I can do custom styles that add lots of dimensionality and texture to the background, or I can use the blue corporate approved background that we’ll use on the site.
But I still want to do a little bit of work here to add some texture. So I’m going to go ahead and take advantage of the new Live Effects that come with Acrylic, and what I can do here is you’ll see a little bit of texture in the background, and I can customize the accented edges to bring those up to 50, and in real time now going to change that look and feel and add that texture effect.
Last but not least, let’s go ahead and export the image, put it into JPEG format, we’ll call it Top_PhotoBlue, drop it into the right folder, and we’re done.
All right, the next step. I’m going to move into Quartz Web Designer, and I’m going to go ahead and build out the pages of the site and incorporate that image. We’re going to do three things. First, we’re going to work with standards-based design, XHTML and CSS to build out the master page for the Web site. Second, we’re going to incorporate ASP .NET controls to connect up to data and display it on the page. And lastly, we’re going to take XML data, integrate that into the page, and use XSLT transforms to style it.
Here you see the Fabricam homepage. It’s a standards-based design, it’s a stretchy design, it’s designed use XHTML 1.0 transitional and CSS.
If I jump into Quartz here, we’ll see the design surface hosting this exact same page. It’s an incredible design surface, incredibly accurate and puts the page exactly as you’d expect it to see. It’s a design surface that designers can trust and rely on for building Web sites.
Now let’s go ahead and jump to the master page. What you’re looking at here is the semantic information provided on the page. If I go to split view, you’ll see that it’s just an incorporation of div tags, UL and LI tags, and basic semantic information as defined by the XHTML.
But I may want to apply some styles that I want to incorporate from an external CSS style sheet. So to do that, I can leverage the new apply styles pane and I’m going to browse to a prebuilt Fabricam_Red CSS sheet. When I attach that XHTML sheet in real time we get that new look and feel applied to the semantic information in the design view.
But Fabricam no longer uses the red branding, they use blue branding, so I can very, very easily now manage the style sheets that I link to externally, remove the Fabricam red style sheet, and add in the corporate approved Fabricam CSS and also in real time see those changes take place.
But you’ll notice the masthead image is missing and we want to add in the one that I just built. So I’m going to click up here in the middle to select the div that represents the banner photo that I want to add; jump here to the bottom left to the CSS properties, and I’m going to go ahead and modify the background image property to point at the image that we just built, top photo blue, hit open, and we see it added to the page.
But the really cool thing is we see the banner photo class has been updated here in the applied rules, and when I go to code, Quartz did the right thing. It added that class update directly to the linked external style sheet for you automatically and it will continue to do the right thing whenever you’re working with CSS inside of the tool. (Applause.)
Let’s go ahead and save that master page now and move on to the homepage, which you saw a little earlier. It’s got those icons that I exported from Acrylic, some text, some basic images, and what I want to do is use ASP .NET controls like the grid view to add some data.
So I’m going to go ahead and pull up my toolbox just like you’d expect and click on the grid view to insert it into the page. The beauty here is that just like Visual Studio 2005 I get all the great control hosting features inside of Quartz, just like common tasks, which I can then use to bind up to a data source and get that data preview on my grid.
But as a professional designer, I want to style that grid so it’s not quite as boring. To do that today takes a lot of work, but I want to use external CSS, which I’ve prebuilt. So what I can do now is go to the tag properties pane, set the CSS class property to table, and now in real time see those external CSS properties applied to my grid view inside of Quartz.
Okay, so now we have the grid view built. The last step, I want to build a new page from the Fabricam master that we’ve been working with, and here I’m going to incorporate some external XML data that simulates an RSS feed to provide a news PR page for the site.
So I’m going to go ahead and create some custom content in the content placeholder region, I’m going to drag and drop the news.XML file, and there we go, then tool automatically binds that XML file to an ASP:XML control and applies a default XSLT transform to give us this sort of table look and feel.
But earlier I prebuilt an XSLT called news.XSLT, which I can just drag and drop on and get that new styling applied very, very easily. (Applause.)
But it gets even better. I want to modify that XSLT file, but I really don’t want to go muck around with the XSLT code. So very easily I can click on the design surface, I can insert a new p tag, I can drag and drop the description field from my XML file, and it’s going to automatically update design view and the external XSLT file for me automatically. (Applause.)
Last but not least, I’m going to use the tag navigator to select the p tag, I’m going to jump to the new apply files pane where we see a live preview of all the CSS styles coming from our CSS, and I’m going to apply the new summary style to that tag, and it also will update the XSLT file accordingly.
The last step now is go ahead and save it, call it news.ASPX, it’s going to overwrite my XSLT with the changes, jump back to the default page, going to hit F12, it’s going to launch a built-in Web server and preview the site for me live with all the changes that I just made working right there.
So what have we just seen? Well, we’ve seen a few things: First, working with Acrylic Graphic Designer to work with rich vectors and bitmap based images; second, using standards-based Web design, CSS and XHTML with ASP .NET master pages; third, incorporating ASP .NET controls and styling them using CSS, and, of course, lastly, rich XML and XSLT support.
Now I’d like to invite Joe Marini and Mark Boulter up on stage to show you the rest of the Expression family. Thank you. (Applause.)
JOE MARINI: Hello, everyone, I’m Joe Marini.
MARK BOULTER: And I’m Mark Boulter.
JOE MARINI: So Mark and I are going to continue the new tools extravaganza by showing you how developers and designers can work together better than ever before.
MARK BOULTER: That’s right, you tell them, Joe.
JOE MARINI: Don’t get me started on this subject.
Okay, so as a designer, I’m going to be creating a visually rich form user interface, and when I do this I’m going to be doing things like changing the look and behavior of standard Windows controls, I’m going to incorporate some 3D into my form and animate it, and then I’m going to hook those animations up to controls on the forms, and I’m going to do it all without writing a single line of code, not code at all. And then when I’m done, I’m going to give my form back over to my developer friend Mark, who’s going to write the underlying form logic.
MARK BOULTER: Thanks, Joe.
JOE MARINI: Sound good?
MARK BOULTER: Sounds good to me.
JOE MARINI: Shall we dance? Okay.
So earlier you saw the Fabricam internal line of business applications and Mark and I have been asked to add a new form to this application to show a summary of a given court request coming in from the external site. So when David submitted that quote request, this is the form that’s going to show the internal employee a summary of that information. And it’s going to show information such as the unit being ordered, the customer name, the units, the price and so on and so forth.
Now, Mark, you built this form for me, the bare bones version in Visual Studio earlier.
MARK BOULTER: That’s right, and my manager said I wasn’t allowed to touch the UI.
JOE MARINI: Right, so he’s given it to me to make it look good, and I’m going to do that using Sparkle Interactive Designer.
So I’ve got Mark’s form open here in Sparkle and, in fact, actually I’ve got Mark’s exact Visual Studio project opening here. Here’s the XAML and the C# code. So right off the bat we’ve got project sharing between Sparkle and Visual Studio. I can open on C#, VB projects and work on them here in Sparkle.
MARK BOULTER: Very cool.
JOE MARINI: Yeah, it’s very cool.
Okay, so you can see that I’ve already done a bunch of work on this form, and we’ll be seeing Mark’s bare bones version in a couple of minutes, and trust me, it needs some help. So I’ve started by putting some nice graphics in here and I’m in the middle of making these radio buttons look like icons rather than the standard text.
Now, today this is code.
MARK BOULTER: That’s right.
JOE MARINI: You have to do custom rendering.
Well, in Sparkle WPF it’s much simpler. So what I’m going to do is just go to my graphic, I’m going to insert the graphic I want for the radio button onto the scene, and then I’m just going to scale it down to be the size that I want it. And now making an icon radio button is as simple as drag and drop. Presto, icon radio button. (Applause.)
MARK BOULTER: So have you just put the image on top of the radio?
JOE MARINI: No, no, that’s actually next to the radio button, I dropped it into the radio button and replaced the content.
MARK BOULTER: In the radio button, and you didn’t have to write any code to do that?
JOE MARINI: No code.
MARK BOULTER: That’s cool.
JOE MARINI: That’s great.
Okay, I agree it’s cool, but don’t go reaching for the credit cards just yet, there’s plenty more.
Suppose you wanted to change the very fundamental look and feel —
MARK BOULTER: I’m sorry, I don’t have time to do this now —
JOE MARINI: — of your controls and not just this form but across the entire application?
MARK BOULTER: I haven’t got ways to work on that.
JOE MARINI: Yeah, you wouldn’t want to do that today, right, that’s like a lot of custom code, you have to remember to override all the different events that might somehow affect how the control looks, right, now it’s done, now it’s over, now it’s upside down, whatever, there’s a lot of events.
Well, in the WPF it’s much easier because controls expose a set of templates and these templates define not just the look but the behavior of how the control interacts with the user.
Now, I’ve already defined one of these templates here in Sparkle, so just by applying this template I can change how these radio buttons fundamentally look. So I’m going to come down here and I’m going to select my radio button, and then over here in my properties I’m going to come down to the template field. Now, pay attention because you might miss it. So I’m going to apply this reusable resource to the radio button and then, presto, they change from standard Win 32 look to having these nice gradients, the selected guy has a nice glow on him; when I roll over the stroke lights up, no code.
MARK BOULTER: I think I’m going to like working with you, Joe.
JOE MARINI: All right. (Applause.)
Okay, so this area here is going to hold a 3D model of the VPR unit. So I’m going to activate my container and I’m going to insert my 3D model, and standard 3D model so it came out of Studio Max. Okay, there’s my 3D model. So now I need to animate this, because when the user clicks on these radio buttons, this model is going to rotate to show the appropriate view.
So the way that I do that is I’ve defined these two timelines down here for each animation, one for each, so I’m going to activate my timeline and move my play ahead out to the two second mark, because that’s how long I want it to last. And then I’m just going to activate my model here, and I’ve got these nice 3D manipulations, I’m just going to rotate the model down to the point where I want it to be at the two second mark, and that looks about right.
Now, when I did this, a key frame was created for me automatically in the timeline. So I can test the animation by clicking the play ahead and let’s see if it looks right, and indeed it does.
Okay, so now we need to hook that animation up to the radio button. So the way it’s going to do this —
MARK BOULTER: Is this where I get to write code?
JOE MARINI: Not yet.
MARK BOULTER: Oh, okay.
JOE MARINI: Patience, grasshopper.
So I’m going to set the radio button and then over here in the timeline properties I’m going to add an event trigger, and this is what’s going to control how the animation gets fired.
So I add the event trigger, it picks up the selected radio button for me, but I don’t want the default mouse down event, I’m going to change that to be a click. Okay, and that’s really all I have to do.
Now for the next I’m going to do the same thing for the other timeline, I’ll select the top view, and once again out to the two second mark, and select the model and we can see there that the nice picture map logo that David submitted has been on the VPR, and then I select my top view radio button, add the trigger, and change it to the click event.
Okay, that’s pretty much all I have to do, so I’m going to save. Now, since this form is being built as an embedded control that’s going to be included in another application, I can’t run it directly, but Mark has given me a test harness for me to try it out with, so I’m going to switch over to that. And I’m just going to hit F5.
And while this is building, I want to mention that Sparkle is using the same MS build subsystem that Visual Studio is using.
MARK BOULTER: Oh, is that right?
JOE MARINI: Yes, the same MS build.
So it will build and it will come up. Okay, there’s my form, and we can see, I click on the button and the timeline is all fired nice and very beautiful.
Okay, so at this point, I’m ready to hand my form over to Mark so he can write the underlying logic, but before I do that, I want to encourage all of you to try Sparkle out for yourselves. We’ve got a hands-on lab going in the main exhibition hall, so please stop on by and give Sparkle a run. Thanks. (Applause.)
MARK BOULTER: Thanks, Joe.
So as the developer of this piece of the app, I’m going to show you how I can take Joe’s work and easily integrate it into the Fabricam application using the Cider designer extensions for Visual Studio
Although if you look at my original UI design here, frankly, I’m not sure what all the fuss is about; this form looks fine to me. (Laughter.)
Now, Joe has finished working on the control in Sparkle and saved it, so I get this notification in Visual Studio that the underlying XAML file has changed. I can simply click on the button, reload the designer, and see Joe’s work.
JOE MARINI: Very nice.
MARK BOULTER: There we are. (Applause.) Thank you. This is so much easier and less time consuming than the past where Joe would give me a bitmap and I would have spent a week sweating to rebuild this UI, when Joe had already done the work for me. Now I simply click on a button and we’re away.
You will also notice that to Joe, this project, this same project that we’re sharing appeared as something a designer would work with, with drawing tools and an appearance palette and a timeline. To me it appears with a toolbox, a property browser, and a document outline; these are the things that I as a developer am used to. This is a very familiar environment for me.
Of course, the Cider designer is built on WPF, and so we can use things like scaling to implement our zoom feature. So we come down here and zoom out, and then zoom in. This is really useful when I’m doing detail work or I’ve got a large form to display.
The reason Joe and I are able to integrate like this is because Sparkle and Visual Studio share the same project and build system and share XAML as a common file format. Let’s go ahead and look at the underlying XAML that we’re using. Here’s the XAML for our form.
One of the things Visual Studio will enable is a really great XAML editing experience, in addition to the designer. So, for example, let’s edit this button and I’ll change the foreground property. And you can see I’m getting full IntelliSense support here. You know what, that button shouldn’t be okay, so it shouldn’t be closed, it should be okay.
Now let’s flip back to the designer and see what our changes look like. What do you think, Joe?
JOE MARINI: I seem to remember my original design saying close there, Mark.
MARK BOULTER: Close?
JOE MARINI: Close.
MARK BOULTER: Okay, you’re the designer, I’m just the developer, I guess you k now best. We’ll change that back to close. Is that better?
JOE MARINI: Yes.
MARK BOULTER: Are you happy there?
JOE MARINI: I am now.
MARK BOULTER: Are you going to stop bugging me?
JOE MARINI: Yes.
MARK BOULTER: Okay.
So having carefully formatted my XAML, you saw it was beautifully laid out, the last thing I want when I make updates on the design surface is for Cider to creatively re-format it. Let’s go back to the XAML view and see what’s happened.
JOE MARINI: Outstanding.
MARK BOULTER: And as you can see here, Cider has completely preserved my formatting. This looks exactly like it did before I used the designer.
JOE MARINI: Very nice, very nice. (Applause.)
MARK BOULTER: It’s a cool feature. If you see Chuck, say thanks to him for that feature.
So if you remember, I created the original version of the project, I gave it to Joe to use as a starting point. While Joe was working on the UI, I’ve integrated that project back into the main application. The only thing I have left to do now is to hook up the data bindings Joe created in Sparkle to the real data. So we’re going to go ahead and do that. This is a control that Joe set the data bindings up for, the quote summary display control. Let’s flip over to source view. This is where I finally get to write some code and hook that up.
Now, you can see I’ve already added a property to pass the quote summary object from the application into the control. Now what I need to do is take that quote summary object and push it into the quote summary display control. So let’s go ahead and do that. There we are.
Now, the reason this works is that Joe set up the data bindings in a data template, and so when I pass the quote summary object into the content property on the control, it causes the control to select that data template and use it to display the data.
Now I’ve hit F5 and I’m running the application, we can go ahead and test that our control is working. Here’s the manage quotes form, here’s the quote that David entered earlier, and there’s the UI that Joe and I created integrated into the application. You can see at the bottom of the form here we have the real data from the application and at the top Joe’s animations still work beautifully.
JOE MARINI: Very nice. Well done. (Applause.)
MARK BOULTER: Good cooperation.
JOE MARINI: Well done.
MARK BOULTER: With this demonstration I’ve shown — sorry, we’ve shown you how the next generation of tools – Sparkle and Visual Studio – work hand in hand to enable designers and developers to work together more closely than ever before, and I’ve shown you how this will make developers more productive by allowing us to focus on what we’re good at — writing the code for the application. Thank you very much.
JOE MARINI: Thank you. (Applause.)
Application Customization Using Visual Studio Tools for Applications
ERIC RUDDER: Great job, you guys.
So hopefully you got a sense of why we’re so enthusiastic about the Expression family of products and how we’ll help you build really compelling user experiences for your application and really allow you to differentiate them from your competitors by having such a compelling UI.
The last major area we’re going to demonstrate today is around application customization. At Microsoft we know that just as we ship a platform with Windows, often your applications or platforms are where your customers extend them, customize them in different ways, unanticipated by you. So we feel it’s very valuable for us to give you technologies to enable you to make your applications more customizable.
Historically, we’ve used VBA or Visual Basic for Applications for this, and it’s been a very successful technology over the years, and it’s had a number of people license it.
However, we think it’s really critical that we take the next step in application customization. At a high level the most important thing we want to do is bring the power of .NET programming to application customization to allow you to provide interfaces for your customers to extend their application using the .NET programming languages, using the .NET tools and all the other infrastructure that makes development so easy with .NET.
This is why we’ve created Visual Studio Tools for Applications and to walk us through what Visual Studio Tools for Applications can do I’ve asked Shoshanna Budzianowski to come out and show us what we can do with Autodesk and Visual Studio Tools for Applications. Shosh?
SHOSHANNA BUDZIANOWSKI: Thanks, David.
Good morning, everyone.
Today I’d like to show you how Visual Studio Tools for Applications makes it simple to customize applications. To do that, I’ve enlisted the help of Autodesk, who’s agreed to show a prototype of AutoCAD with VSTA embedded. Now, AutoCAD has always had an open architecture enabling their end users to customize it; what’s different today is that they can do that using the full Visual Studio IDE, VB and C#.
Now let’s go take a look at your order for your VPR 1000. Your order is now in engineering, and we need to figure out how to build it cost-effectively. But you’ve ordered a custom-designed dome made from carbon fiber and we need to price that out.
Well, fortunately, this entire model that you’re looking at is designed in AutoCAD, it’s not just a static model. Each image, each part here is an individually designed component.
So what we can do is this, we can write come custom code behind this drawing to go check out suppliers for the best price for the carbon-fiber done.
Let’s get started.
The first thing I’m going to do is launch the VSTA IDE directly from within AutoCAD using my favorite accelerator, alt-F11. Now, the VSTA IDE is embedded in the AutoCAD application so that when I start up the VSTA IDE, I automatically get some very good content specific information.
The first thing is AutoCAD has provided a project for me. They’ve also provided a set of helper classes to make my job of customizing this application easier.
Now, I went ahead in advance and I designed a form to show vendor data and to select the type of housing that we want to build. I also created a Web Service to go query vendors for their parts data and pricing information.
Let’s go start to stitch together the AutoCAD object model with the Windows Form.
The first thing I’m going to do is use the AutoCAD object model to figure out the currently selected part. Now, notice I’m getting context sensitive information on the AutoCAD object model, and I’ll use the block reference to get the currently selected part, and here I’m going to go use the helper function.
Okay, that’s all we need to do, and now let’s go show the form, passing in the name of the part, using that information, the formal send the part name of the Web Service and the Web Service will do the query.
Now, the next thing that we want to happen is this: Once the designer has selected the vendor that has the best price part, we actually want to add that information directly into the drawing, so that when the drawing makes it out of engineering, all the specifications are completely included in that drawing, and we’re going to do that using some information provided by AutoCAD. So they recognize that creating a table on an CAD drawing is just a typical kind of operation and they’ve provided me with a code snippet that I can use for doing that.
Now, this code snippet has parameters that I can simply tap through, and I’m going to go set the column height, width and row height and width on that, and I’m going to leave the rest of the parameters the same, I’m okay with that. And I’m going to quick drag in some code to set the table and column header.
Well, we’re ready to build this customization. The build succeeded. Let’s go back into our AutoCAD drawing and run our customization.
Here’s our carbon-fiber dome, I’m going to select it, and run that obtain vendor quotes customization you just saw me build. It’s going out now to bring up the Windows form, here it comes, we’ve got the dome. I’ll select carbon-fiber housing, and when I press query, we’re going to use the Web Service to go query vendors who supply that part.
I see that Kontoso manufacturing actually supplies that part fairly cost effectively. Let’s select them and go add that information directly into our drawing, and here’s that table that we created from the code snippet.
What you’ve seen is how simple it is to add custom business logic to your applications using VSTA.
AutoCAD provided the object model and the right set of helper functions and snippets to make coding easy. I was able to program in my favorite managed language, VB, and use my favorite features of Visual Studio and .NET, Windows forms, Web Services, and code snippets to create the right set of features for my end users. Every ISV should be doing this.
One more thing, if you need more information about VSTA, I would encourage you to attend our VSTA session immediately following the keynote. The session is TLN205, Future Directions, building customizable applications in the .NET world. Thank you. (Applause.)
ERIC RUDDER: So that was quite a demo. I think the cool thing is we’ve now seen some really great tools coming for developers, hopefully you agree there are some great tools coming for designers, and I think that the last thing I wanted to close with is some tools for information workers as well.
We’ve got all this great technology, a lot of it is targeted towards designer, developers, we tend to give a developer view for this audience, but it’s important that we really unlock the information as well, and I think Steven is going to do a great job of that in his next talk, but I wanted to tee up a little bit of information about how we’re going to enable Windows Vista and Visual Studio to share this information as well, especially around XAML.
And so I’d like to come out and invite Dave Mitchell from UGS, and he’s going to show us XAML integration for PLM CAD and how we can unlock this XAML data for information workers, in this case in kind of an engineering context and to make sure that that information can be shared across enterprise.
Please welcome Dave. (Applause.)
DAVID MITCHELL: Good morning. I want to talk to you today really about two points. There has been a lot of discussion about XML and I think everybody here understands how to use XML in a business context, but I want to talk to you today from the point of view of a CAD guy, because XML and XAML enable new data sharing processes that have not been possible before.
Secondly, I want to talk about how we’re going to enable millions of users, in fact, millions of consumers to be able to view very complex 3D data that in the past has been locked up in engineering, that unless you had specialized engineering applications, unless you had specialized CAD applications installed on your desktop, you couldn’t participate in viewing the product data.
Let me show you how we’re going to do that.
On the screen here you can see a change request from Fabricam. Fabricam is a company that I work with, I supply parts to them, and I’ve won the bid to go make a change. They’ve sent me this housing here and they want me to change the material to carbon fiber. They’ve also sent me the overall structure so that I can work on that part in the context of the overall assembly.
So I’m going to go into my CAD package and make that change. Now, you might notice something here, which is Fabricam, as you saw in the previous session, they chose AutoCAD as their corporate CAD system. My company went a different direction. My company chose to use Solid Edge, a Windows-based CAD application from UGS.
But because Autodesk and UGS are working together, using XAML in conjunction with our own formats, a UGS user can open and save parts that were saved in AutoCAD directly in Edge. So that’s great, because I want to use my tool to do the change order, I don’t want to have to use my partner’s tool. So this enables us to both stay with our tools and yet work effectively together.
So here’s my assembly. The first thing, even though I know I’m supposed to go change one specific part, I like to work in context and make that change. I’ll make that be my work part and now I’ll go change that material.
The change request, as you saw, said that I should go use carbon fiber as the material type, I’ll change that from the former material to carbon fiber. I can look at that, maybe I’m supposed to make other changes, but for this situation that’s enough to do this time.
I’ll return back to the context of the product and everything still fits well together, everything still looks nice, I’m ready to go.
What I’m going to do now is create a representation for downstream users. My binary format is great for me, I have lots of engineering applications that can use that precise math representation and share that data around engineering, but now I want to be able to share that information with a wider population of users.
So what I’m going to do is I’m going to take right now and translate my binary format to XAML.
So here’s what that part looks like when I send it down, it’s just like the changer order I just did, and I could go in and look at the parts list. If something was in the way, I could turn off some of the geometry, I could add annotation, I could section cut it if I wanted to see the insides of the part, but this looks good for me.
So what I’m going to do now is I’m going to save this as a container, and I’m just going to pick a filename here, and I’m going to save it right on my desktop.
Now, what I’ve done here is I’ve created an open packaging container on my desktop. Now, traditionally this would just be opened up as a XAML file, but I want to show you the inside of it. So I’m going to open it with Win ZIP because an open packaging container is inherently just a Win ZIP file.
And what you see here is a number of different things. It’s got my JT file, which is important to me for my engineering applications that want to retrieve that precise math model, but importantly also in there is the XAML file, and that’s what’s important because that’s going to allow me to get this information to a much wider population of users.
So you’ve seen me operating here as a CAD guy, I’ve been using high-end tools to do things that most users wouldn’t be able to do, and if I wanted Eric to participate in that product development process, I really couldn’t send him that CAD model. What I’d want to be able to do is send him a file that he could open on his workstation or that any of you could be able to open on your workstation, and that’s what we’ve done.
If I open that file that I just showed you the insides of, if I opened it up with the default viewer, the XAML viewer that comes with WinFX, what you’ll see is something that’s very important. You’ve got the business information that describes the quote, and you’ve got the 3D representation that I created in my CAD system. Now, this is important because that isn’t just an artist’s rendition, this is the actual math that I’m going to use to create this product structure.
And so I hope you realize how significant this is because this is something that discrete manufacturing companies can’t do today. I can’t go in engineering and design a product and share it with everybody, I can only share it to people that have the right plug-ins and the right applications to view that information. What this is going to do for me is it’s going to get lots of departments in my company involved in that product development process more than ever before. (Applause.)
So I hope you’ve seen two things here: number one, process enablement, sharing data between applications, facilitated by XAML; and secondly, unlocking data, getting it out of the engineering department, giving it to everybody on their desktop without having to install additional applications or additional software, anybody with a WinFS desktop could be able to view that.
That’s what we call democratizing 3D and CAD data for the masses, thanks to XAML.
Thank you. (Applause.)
ERIC RUDDER: Thanks, David.
Well, it’s really great to be able to have that friction free integration without having to locate the right plug-ins. And again if you think about tying everything together around the workflow engine, it’s even more important, because we think we’re going to create more and more interesting scenarios of people sharing information, sharing documents, whether it’s scientific data, engineering data or just plain business financial data.
Well, if you remember, I said I had three things to do. The first was to thank all of you for your time, the time that you spend with us. The second was to make sure you got a great preview of all the cool tools that are coming, and I think David and his team did a great job of really showing us what’s on tap. And the third was to make sure that you leave here today thinking about how all these tools and technologies affect your future.
We didn’t show too much detail on Visual Studio 2005, we kind of take for granted that it’s coming any day. You’ll get the final RC version before you leave the conference. And you’ll also get the final RC version of SQL Server 2005.
We didn’t have time to talk about SQL Server in this conference, I know there are tons of sessions out there about SQL Server 2005 and about the new data access technologies. I know people are very excited about LINQ. But I want to make sure that all of you get time that you need to evaluate SQL Server 2005 in detail, so we’re going to make sure that all PDC attendees receive a free copy of SQL Server 2005 when it ships. (Applause.)
The second thing I want you to really think hard about is how you can use workflow to really redefine your applications. I think you’ve got just a hint about how you can structure it, the fact that it’s a provider model really allows you to integrate your existing app logic. You saw some of the designers actually host it in Visual Studio, but we’ll build tools that actually allow you to host the designer in your application. This will allow you to offer your end users the ability to drag and drop workflows and customize with the activities that you want your users to have in your application. I think that’s very cool, it provides an incredible amount of time saving for you guys, and I think it’s really important to think about structuring your applications even now to understand that when you kind of make the switch over to Windows workflow how that is going to go for you.
The third thing I want to make sure that all of you guys go and do is really start to evaluate the Expression suite. I know between Acrylic, Sparkle, and Quartz there are some fantastic goodies in there for you, whether you’re doing page design, whether you’re using the XSLT, whether you want better tools for CSS, if you’re working with bitmap, vector graphics, if you want to do 2D, 3D animation, there’s a lot of great stuff in there, and we’re going to make sure that the runtime is available. Really check out the CTPs, check out the hands-on session, and we’ll make sure to have Community Technical Previews of these tools coming out fairly frequently as we drive towards shipment.
The fourth thing I want you to think about doing is enabling customization of your application with VSTA. You saw a simple example in Autodesk, but a lot of times we’re overburdened as developers on adding features to applications, we still have these huge solution backlogs. If we take the time to define an application object model and a few snippets, we get great integration to really let users drive some of these features by themselves. And again, if you think about that customization in concert with some of the workflow stuff, I think these scenarios start to tie together very nicely.
And finally, I want to encourage you to really continue to keep sharing your feedback with us. It keeps us thriving, we really thrive and enjoy your energy.
I really enjoyed spending some time with you at the PDC. I hope you have a great next session with Steven, and I hope you enjoy the PDC and I hope to see you next year.
Thank you. (Applause.)