Beth's Chinese blog
This month I spoke in Fresno, L.A., and Phoenix areas on Visual Studio LightSwitch. I broke up the “tour” into two driving trips since I spoke in Fresno on the 11th and then had a week in between before I left for L.A. and Phoenix last week. Of course, road trips would require me to tack on a couple days vacation :-). It’s summer and I LOVE the great outdoors so it was a perfect excuse to get away from home. See below for details on the awesome developer community (and hiking) experiences.
The Central California .NET user group meeting in Fresno was put together by Gustavo Cavalcanti. Gustavo has spoken at our local user group here in the San Francisco Bay Area before and so when he asked me to come to Fresno I wanted to return the favor of course. Fresno is only a few hours away from where I live in the Bay Area and was a perfect opportunity to make my way to Yosemite for the weekend :-). Gustavo and his family graciously let me stay the night at their house after the talk so I could take off to the amazing national park in the morning. (See below for pictures)
About 30 people came to the meeting in Fresno. There were predominantly professional developers in the room (people paid to write code) but there were also a few non-devs, and database and IT admins in the room. I also met an interesting fellow that knew me back in my FoxPro days that had moved onto Cold Fusion/JSP/Java instead of .NET 10 years ago that was extremely interested in LightSwitch. So because of the mixed crowd, I started with a basic intro for 45 minutes and then slowly transitioned into the pro developer uses around custom controls and extensibility. I first explained the SKU lineup and ran through all the designers to create my version of the Vision Clinic sample. I showed how to federate multiple data sources, use the screen templates, program access control, and ran through the deployment options.
I then transitioned to the more programmer-focused tasks. I showed all the method hooks in the “Write Code” button – I called this the “developer escape hatch” and got some smiles. :-) I talked about the 3-tier architecture & file view on the Solution Explorer. I then moved onto the more advanced development scenarios using the Contoso Construction sample and showed how to add your own helper classes to the Client & Server projects in order to customize the code. I also showed how to add a custom Silverlight control to a screen – this got applause. Finally I demonstrated the Extensibility Toolkit and some additional themes and shells. The pro-developers really appreciated the fact you could customize the app in a variety of ways. Most devs had no idea that LightSwitch was this flexible.
The L.A. Silverlight user group (or LASLUG as they call it) put together a cool venue in Santa Monica to have the meeting called Blank Spaces which lets people rent out office space by the hour. Unfortunately I was a bit late because my smartphone led me over to City Hall instead (argh!), but when I showed up people were still eating their pizza so I was cool :-). It was co-sponsored by LightSwitchHelpWebsite.com, a great LightSwitch developer resource run by Michael Washington that caters more to extending and customizing LightSwitch. The main organizers, Michael and Victor Gaudioso are Silverlight MVPs and considering this was a Silverlight user group I was expecting a room of Silverlight gurus (something that I definitely am not). I have to admit I was slightly nervous. Fortunately (for me) the room of about 40 people was mixed with developers of all skill levels and expertise. Victor later mentioned that they have talks on a variety of .NET technologies so it draws all kinds of .NET developers.
Because the room was almost all professional developers that had seen LightSwitch before, I did a super-quick intro and then ran through the more advanced development scenarios like I did in Fresno. I also showed a sneak peak of the Office Integration Pack that one of our partners is working on. It’s a free extension from Grid Logic that will help LightSwitch developers work with Microsoft Office (Outlook, Word, Excel) in a variety of ways. People were very interested in this as I imagined they would be – making working with Office via COM easier is always welcome by .NET developers ;-). Look for that release within the next couple weeks on the Developer Center.
In addition to questions about Office and LightSwitch, I also had a couple questions after the talk on deployment and pointed people to the Deployment Guide here. And we also had a couple folks from DevExpress who built the XTraReports extension for LightSwitch that provided some give-aways and bought me a well deserved glass of wine after the talk. Thanks Seth and Rachel!
The Southeast Valley .NET User Group is run by Joe Guadagno, the president of INETA in North America (which provides support to Microsoft .NET user groups). This venue was the coolest of all. The meeting was held at Gangplank – a FREE collaborative workspace that provides office space and equipment to the public. I spoke in an open space with desks scattered all over the back of the large room filled with people working on all sorts of stuff together, mostly hunched over a computer.
There were about 30 people in the area where I was presenting. What was interesting is that apparently I drew a very different crowd that normally Joe sees. He said he only recognized a few faces in the audience. He had booked 4 hours for the meeting but considering it was 118 degrees, we settled for a 2.5 hour presentation with a cold beer chaser :-). I started with a basic introduction to LightSwitch and then ended with the advanced extensibility similar to the format I did in Fresno. There weren’t very many questions with this group but there definitely was applause at the end so I think people enjoyed it. In fact, I was cc’d on an email to Joe from an attendee saying that he had traveled all the way from northern Arizona to see the presentation and that he really enjoyed it. Plus he won an ultimate MSDN subscription! I have to say Joe definitely had the best SWAG of all the groups. Thanks to all our partners that supported the event.
One of the prizes was a set of tickets to the Diamondbacks game the next evening. So one of the attendees got to come with us to see the Padres lose. See below for pictures and stories…
YOSEMITE - For me, Yosemite National Park is the most amazing place in the world that I have ever been. And I have been to a lot of places in the world. Born and raised in L.A. my family used to trek the 8 hours to go camping there every year. Every year of my childhood up to the time I was 16 has pictures of me in Yosemite. Yes it’s crowded on the weekends especially in the summer but it is 100% worth seeing. If you are a good hiker you can easily get away from the crowds. I have never been to a place where so many monuments and waterfalls are all contained in the same valley.
I camped out near Bass Lake because I only had two weeks notice to make a reservation and if you want to camp in the Yosemite valley you need to make plans months in advance. Not a big deal for me at all though because I love driving mountain roads in the summer and the campground I stayed in (Chilcoot) was beautiful and not crowded at all. There were no bees, bears or raccoons, only mosquitoes bothered me there so it was perfect. I was there for two nights so the first day I drove to the Wawona Tunnel and hiked up to Old Inspiration Point and then to Bridalveil Fall. (Click to enlarge pictures)
The second day I woke up early and hiked up to Vernal fall, up the mist trail and then to the top of Nevada fall. I have already been to the top of Half Dome (twice actually) and they started to require permits this year so I just went to the top of Nevada fall. It’s well worth the steep 7 mile (round trip) hike. It took me 80 minutes to go up and 70 minutes to come down which isn’t bad. It was absolutely gorgeous and afterward I grabbed a beer at Curry Village and then jumped into the Merced River to rinse off.
PHOENIX - Who can pass up a road trip from S.F. to L.A. to Phoenix to Sedona to S.F.? I definitely can’t. And neither could my friend Jenn who joined me. Even in August with a heat wave in Phoenix. Yes a heat wave in Phoenix that even the devil would think twice about visiting. My mom calls me a lizard because I love the heat. Well it was 115 degrees and that was about my breaking point! Thank god for air conditioning and a pool. We still had a blast. Being a huge baseball fan, Joe took us to the Diamond Backs game on Friday night. I was a little skeptical about going to an indoor stadium but once I got inside the place was amazing! (And air-conditioned thank the lord!) They did a really great job making it feel open with lots of huge glass windows all around. They also had a pool and Jacuzzi there that holds 30 people you could rent out for a game! Crazy! Anyways they were playing the San Diego Padres who looked like little league (or worse) out there with a 3 error shutout (D-backs 5, Padres 0). Thanks to Joe and the rest of the gang that took us out for a great baseball night!
SEDONA – After the talk in Chandler (Phoenix area), Jenn and I headed up to Sedona. I have been to the Southern half of Arizona many times but this was my first trip to the Northern part. WOW! I did not realize how beautiful and green Arizona actually is. When you think of Arizona you probably think cactus and sand. And the state definitely has a lot of those things. But once you get to Sedona and see the amazing red rock and alpine forest your opinion definitely changes. Oak Creek on the way up to Flagstaff is absolutely breathtaking. The trees and animals reminded me a lot of here in California, especially the sierras. But the rocks – WOW. Definitely like no other place I’ve seen. Sedona was beautiful but expensive so we only stayed one night but we maximized our time there. When we got there we went on a Pink Jeep tour up to Broken Arrow. Man that is the ultimate job! Driving a huge jeep up rocks and down deep canyons. It was a lot of fun.
The next day we hiked up to the top of Wilson Mountain, the tallest peak in Sedona. You rise above the red rock and it gives you a totally different perspective. An attendee of my talk recommended this one and I’m so glad I did it! (Thanks Mike!) It was about 8 miles round trip to the top with about a 2200 foot elevation gain. What was really awesome about this one was the change in terrain. You start at the bottom with red rock, snakes and cactus and then ascend into a lush, green, alpine forest – about 20 degrees cooler up there. Absolutely beautiful.
The drive back to S.F took us out Hwy 40 through Barstow, CA where we spent one last night and in the morning up 99 to 46 to 5 back home. I don’t think I’ve ever drank as much Starbucks as I did on this trip to keep alert while driving. But it was an absolute blast! I think I need to take a couple more weeks exploring Arizona. Thanks to the amazing developer community for having me come out and speak at your local user groups. I hope you had a great time because I definitely did!
In my last post I showed you how to create a multi-column auto-complete box in Visual Studio LightSwitch. I also showed you how to use multiple layouts and easily enable editing on the data inside the auto-complete box. In this post I want to address another very common use case in business applications – allowing the user to enter new rows of data directly into the auto-complete box. Our auto-complete box is displaying data from a lookup table and we want to allow users to add data to this table if they don’t see the selection they need. I’ll continue with the same data model I used in the previous post where Category has many Products.
I now have a Product screen that allows us to select a Category from an auto-complete box. You can edit the category by clicking on the category name.
Now I want to allow the user to add new Categories without having to open the Create New Category screen manually. It should be a simple click here on the screen. We could put a button on ribbon at the top but a better idea would be to put a button next to the auto-complete box itself.
You can add commands to screens in a variety of places. In fact all grouping controls expose what’s called a “command bar” where you can place buttons or links that execute commands. This allows you to place commands in the right contexts, near the controls that they work with. To add a command next to the auto-complete box, open the screen in the Screen Designer and expand the auto-complete box node in the content tree and select “command bar”. Then you can add a new button.
This will open the “Add Button” dialog that will allow you to create a method. You put code in this method to execute the command. For this example I’ll name the method AddNewCategory.
By default this shows up as a button right under the auto-complete box. You can also choose to display this as a link instead by changing the Control Type to “Link” in the property window. I also like to put an ellipses after the display name of the commands to indicate to the user that another screen will open.
When you run the application you will see the command displayed like so:
Now we need to write some code to execute our command. In the Screen Designer, right-click on the command and select “Edit Execute Code”.
Now we need to call our CreateNewCategory screen. You can access all the screens in your application through the Application object.
Private Sub AddNewCategory_Execute() ' Write your code here. Me.Application.ShowCreateNewCategory() End Sub
This will open the new data screen we want, however, LightSwitch by default always opens a default edit screen after the save of a new data screen. If you open the CreateNewCategory screen and click the “Write Code” button at the top of the designer, you will see code like this in there:
Private Sub CreateNewCategory_Saved() ' Write your code here. Me.Close(False) Application.Current.ShowDefaultScreen(Me.CategoryProperty) End Sub
I don’t want the default edit screen to display if the user is adding to the auto-complete box directly. So what we need to do is create a screen parameter and check that so we can optionally display the default edit screen. In the screen designer for the CreateNewCategory screen select “Add Data Item” on the designer toolbar. Add a local property of type Boolean and uncheck “Is Required”. Name the parameter “ShowDefaultEditScreen”. Then click OK.
This will add a property to the screen. Next in the property window make sure you check “Is Parameter”
Now drop down the “Write Code” button and select the CreateNewCaegory_Saved() method and write this code:
Private Sub CreateNewCategory_Saved() Me.Close(False) 'If the parameter was not passed in, or if it is explicitly True, then show the default edit screen If Not Me.ShowDefaultEditScreen.HasValue OrElse Me.ShowDefaultEditScreen Then Application.Current.ShowDefaultScreen(Me.CategoryProperty) End If End Sub
Now we just need to pass “False” when we call this screen from our command back on the ProductDetail screen.
Private Sub AddNewCategory_Execute() ' Write your code here. Me.Application.ShowCreateNewCategory(False) End Sub
Go ahead and run this now and see what you get. When you click the “Add New Category…” command the CreateNewCategory screen is displayed to allow you to enter a new Category. Click Save and the screen just closes to reveal the Product detail screen again. To see the new Category, click the “Refresh” button at the bottom of the auto-complete box.
One thing you might want to do is automatically refresh this auto-complete box for the user instead of making them click the “Refresh” button. Each collection of data on your screen exposes a .Refresh() method that you can call easily from the same screen. In the case of an auto-complete box (or modal window picker), to get this functionality you need to create a custom query and use that instead of the automatic query (more on that in a second).
However in order to call the Refresh from another screen we need to get into some threading details. LightSwitch applications are always multi-threaded so that the applications are always responsive while loading and working with remote data. Since LightSwitch is all about working with data, when you write code (even in the screen), you are writing code on the data thread. In order to have one screen call a method on another screen you need to marshal the call the the main UI thread. This may sound complicated but it’s actually not too bad.
There’s a couple ways to perform a data refresh across screens depending on your needs. One way is to use the technique described in How to Communicate Across LightSwitch Screens. This uses custom events on the Application object to notify all screens when particular sets of data are added to the system from any other screen. But for our purpose here we can do something simpler. Off of the Application object LightSwitch exposes an ActiveScreens collection which gets you the list of all the screens that are open. We can use this collection to check the type of screen and then call a method to refresh the data we want. This avoids having to deal with events and keeps the scope smaller.
So to make this particular refresh possible we need to do a few things.
So the first thing you need to do if you haven’t done so already is to create a query using the Query Designer for the auto-complete box and use that on the edit detail screen. I’m going to create a query called SortedCategories that sorts by Category.Name. Right-click on the Categories table and select Add Query and define the query like so:
Now open the ProductDetail screen and select “Add Data Item” on the designer toolbar once again. This time select the SortedCategories query.
Next set the “Choices” property of the Category auto-complete box to SortedCategories.
Next click the “Write Code” button at the top of the designer and create a Public method called RefreshCategories that calls Refresh on the SortedProducts query.
Public Sub RefreshCategories() Me.SortedCategories.Refresh() End Sub
The last thing we need to do is write the code to call this method back in the CreateNewCategory screen. Recall that we are checking a parameter here to determine whether we should display the default edit screen or not. We could add another parameter to this screen the same way to check whether a refresh is needed so that these checks would be independent. However for this example the ProductDetail screen is the only one sending a “False” for the parameter so I can just write the following for the CreateNewCategory_Saved() method:
Private Sub CreateNewCategory_Saved() Me.Close(False) 'If the parameter was not passed in, or if it is explicitly True then show the default edit screen If Not Me.ShowDefaultEditScreen.HasValue OrElse Me.ShowDefaultEditScreen Then Application.Current.ShowDefaultScreen(Me.CategoryProperty) Else 'ProductDetail is the only screen sending False. Refresh the Category auto-complete box Microsoft.LightSwitch.Threading.Dispatchers.Main.BeginInvoke( Sub() For Each s In Me.Application.ActiveScreens If TypeOf s.Screen Is ProductDetail Then DirectCast(s.Screen, ProductDetail).RefreshCategories() End If Next End Sub) End If End Sub
Notice that this code will call RefrechCategories on all open ProductDetail screens if there are multiple active. And if this code looks too complicated for your taste, you can simply hit the refresh button on the auto-complete box itself. :-)
I hope this helps you in building better user productivity business applications. And as you can see there are a lot of flexible ways to lay out controls and work with screens in Visual Studio LightSwitch. For videos showing some of these techniques please see:
#21 - How Do I: Add Commands as Buttons and Links to Screens? #22 - How Do I: Show Multiple Columns in an Auto-Complete Dropdown Box?
Enjoy!
I’ve got a few speaking engagements at some .NET user groups coming up in the next couple weeks. If you’re in the area and want to know what Visual Studio LightSwitch is all about, what it can do, and how to make the most out of developing LightSwitch applications come on and check me out… er… I mean check out the talks ;-)
I plan on doing an introduction to the LightSwitch development experience by building and deploying an end-to-end, fully functional data-centric application. Then we’ll dive a bit deeper into what makes these applications tick by discussing the architecture and technologies upon which a LightSwitch application is built. I’ll show how to tap into the LightSwitch API, save pipeline and query processing. I’ll also show you the array of customization available from building your own controls & RIA Services all the way to authoring full-blown extensions like themes and shells using the Extensibility Toolkit.
Fresno, CA - Central California .NET User Group Thursday August 11th, 6pm Click here for more details
Santa Monica, CA - Los Angeles Silverlight User Group Wednesday August 24th, 7pm Click here for more details
Chandler, AZ - Southeast Valley .NET User Group Thursday August 25th, 5:30pm Click here for more details
Hope to see you there!
In this post I’d like to address a very common usage of drop-downs (otherwise known as Combo-boxes or Auto-complete boxes) that allow users to pick from a list of values coming from a lookup or parent table, commonly referred to as “Lookup lists”. Typically these lists display one column like the “Name” of the item. But often times we want to display multiple columns of information to the user here. This is not only super-simple to do in Visual Studio LightSwitch, it’s incredibly flexible on what kind of layouts you can create. In this post I will walk through a variety of common layouts using the Auto-complete box in LightSwitch. You should keep in mind that most of these techniques are not limited to the Auto-complete box at all. In fact you will see these layout controls are available to you almost anywhere on the screen. Let’s get started!
For a video demonstration of this see How Do I: Create and Control Lookup Lists in a LightSwitch Application?
When you relate tables together in Visual Studio LightSwitch parent relationships are automatically presented on screens as an auto-complete box. For instance Products can belong to Categories so the Category table is the parent of the Product table.
When you create a Product screen, the Category is displayed in an auto-complete box which displays the Summary Property of the table. A summary property is used by LightSwitch to determine what to display when a row of data is represented on a screen. It not only applies to the auto-complete box but also anywhere in the system. For instance, search screens use this property to provide a link to the edit screen for the selected record. By default this is the first string property on the table but you can change this in the Properties window in the Data Designer.
Now when we create an Edit Detail screen for Product we automatically get an auto-complete box for the Category. If you build and run your application (F5) you will see something similar for your parent relationships that are displayed in the auto-complete box:
The summary property is being displayed by default and usually this is exactly what you would want. However, you are not limited to this. In fact, there are a lot of cool tricks you can do with the screen designer and its variety of layout controls (check out the Screen Designer Tips & Tricks Sheel wrote about on the team blog). Click the “Design Screen” button to go into the screen customization mode and expand the auto-complete box node to expose the Summary Control:
In order to display multiple columns in the auto-complete box, click the down arrow on the Summary Control and change it to a Columns Layout:
By default all the fields on the entity will show up. Delete the ones you don’t want to display in the auto-complete box and change the order how you like. In my example, the category has a Name, Description and Picture.
By default all the columns are set to 150 pixels wide. You can change this in the properties by setting the width to whatever you want. In this example I set the Description to “Auto-size” since I want that column to stretch. Now click Save on the customization mode and you can see the layout immediately updated.
For a video demonstration of how to do this see: How Do I: Show Multiple Columns in an Auto-Complete Dropdown Box?
As you can see this is pretty easy. However if you’re going to want to display a picture here then there are better layout controls you can use for this specific purpose, the “Picture and Text” and “Text and Picture” layout controls. Here you select the picture and then three additional pieces of information you want to display. The (TITLE) is a larger font then the rest and (SUBTITLE) is larger than the (DESCRIPTION).
In my example I also set the width property of Name to “Auto-size”. When you save the customization mode now you will see a much nicer layout. As a matter of fact, you are not required to choose a picture so you can use this layout for displaying just text.
Sometimes you want to allow editing of the row right from the drop-down. This way users can make corrections to the data without having to open another screen manually. LightSwitch allows this by setting label controls to show up as “Links”. These links look like hyperlinks but they navigate the user to an edit screen for the record. For example go back into customization mode and we can select the Name property and set it to “Show as Link” in the properties below.
Click Save and now you will see that the Name appears like a hyperlink in the auto-complete box. If you click it, then a default edit screen for the Category will open to allow the user to edit the record. After they save their changes they can click “Refresh” at the bottom of the auto-complete box to see their changes.
As you can see there are a lot of flexible ways to lay out controls in Visual Studio LightSwitch and allowing editing of the items is super-easy. In my next post I’ll show you how you can add commands to the auto-complete box to allow adding a new item to the list, another very common user-productivity scenario in business applications.
The August issue of MSDN Magazine is out and it features a couple Visual Studio LightSwitch articles you should definitely check out. LightSwitch is a new product in the Visual Studio family aimed at developers of all skill levels who want to quickly create data-centric business applications for the desktop, Web and cloud.
The first one by Robert Green is a good overview of the development experience and capabilities of LightSwitch:
Build Business Applications with Visual Studio LightSwitch In this article Robert shows you how LightSwitch simplifies the development process because it does most of the development work for you. You don’t need to write code to interact with databases and you don’t need to manually lay out screens. You can concentrate on the business logic.
The second one (written by yours truly) is aimed at the professional developer looking to customize their LightSwitch applications with more advanced features:
Advanced Programming Made Easy With Visual Studio LightSwitch In this article I’ll show you how to work with LightSwitch APIs, create custom screen layouts, use advanced query processing, write complex business rules, and use and create LightSwitch extensions. You’ll see that programming even the more advanced features of a LightSwitch business application is simplified dramatically because LightSwitch handles all the plumbing for you.
Visual Studio LightSwitch Starter Kits are project templates that help get you started building specific LightSwitch applications. You can download them right from the within Visual Studio LightSwitch and once installed they show up in your “New Project” dialog. Using the Starter Kits can help you learn about LightSwitch as well as get you started off right with a basic data model, queries and screens that you can customize further. Currently there are Starter Kits for:
It’s really easy to get started using them. There’s a few ways you can install the Starter Kits. The easiest way is directly through Visual Studio LightSwitch. You can find the Starter Kit templates when you create a LightSwitch project from the “File –> New Project” dialog. Select the “Online Templates” node on the left and you will see the Starter Kits listed. Each Starter Kit comes in both Visual Basic (VB) and C# (CS) versions.
Select the Starter Kit you want, name the project, and click OK. This will download and install the Starter Kit. You can also install the Starter Kits through the Extension Manager. Here you will also find LightSwitch third-party extensions that have been placed on the Visual Studio Gallery. Open up the Extension Manager from the Tools menu.
Then click the “Online Gallery” node on the left side and expand the Templates node and you will see the Starter Kits there. Click the download button to install the one you want.
Once you install the Starter Kits they will be listed in your New Project dialog along with the blank solutions you get out of the box.
You can also obtain the Starter Kits as well as other extensions directly from the Visual Studio Gallery.
Once you create a new project based on the Starter Kit, you are presented with a documentation window that explains how to use the Starter Kit and how the application works. You can then choose to customize the application further for your needs.
That’s it! For more information on building business applications with Visual Studio LightSwitch including articles, videos, and more, see: