Developing Rawr4

Rawr4 is a complex application that is developed in Silverlight. The vast majority of its code is identical to the code in Rawr2. In fact, the Rawr4 projects currently just use references to the same Rawr2 code files, so that Rawr4 uses the same core code as Rawr2, as we make fixes/updates to Rawr2.

WPF Compatibility

In addition to Silverlight, we're also planning to release Rawr4 as a WPF application. This isn't as big of an ordeal as it may sound at first glance, however. Since WPF and Silverlight both use XAML and C#, the actual functionality can be identical. The only difference is the class libraries they depend on. Since Silverlight is mostly a subset of WPF, we can develop for Silverlight, and have it work in WPF too. The only thing that other devs should need to worry about is XAML files, which reference different namespaces for WPF and Silverlight. Currently we have preprocessing tags in the XAML, around the different namespaces, but that makes invalid XAML, which means Blend doesn't like it. We're working on a different system, to avoid that situation. In the mean time, just copy out the preprocessor tags somewhere safe when using Blend, and put them back in before checking in. Sorry for that hassle in the mean time.

Development Environment

Most developers are probably not setup for Silverlight development yet, so here's how to set things up:

  1. Install .NET Framework 3.5SP1
  2. Install Visual Studio 2010, or Visual Web Developer 2010 (Visual C# Express will not work)
  3. Install Visual Studio 2010 SP1, or Visual Web Developer 2010 SP1
  4. Restart
  5. Install Silverlight 4 - http://silverlight.net/
  6. Install Silverlight Tools - http://www.microsoft.com/downloads/en/confirmation.aspx?FamilyID=b3deb194-ca86-4fb6-a716-b67c2604a139&displaylang=en (see http://stackoverflow.com/questions/5402774/cannot-install-silverlight-4-tools-on-visual-studio-2010-sp1 for info on how to install if you already have VS 2010 SP1)
  7. Install Silverlight Toolkit - http://silverlight.codeplex.com/releases/view/43528
  8. Restart
  9. Open Rawr/Rawr4/Rawr4.sln (That's the normal Silverlight solution) NOTE: While opening for the first time, there will be a dialog about opening projects securely. Choose "Open Normally", and uncheck "Ask me for each project".
  10. Once it finishes opening, right-click on the Rawr.Silverlight.Web project, and choose "Set as Startup Project..."
  11. If you use a default web browser other than Internet Explorer, choose ONE of the following:
    1. Make VS always use IE for debugging: Right click on Default.aspx in the Rawr.Silverlight.Web project, and choose "Browse With...". Select Internet Explorer, and click Set Default. Hit OK. VS will use IE when you debug now, instead of your OS-wide default browser, whatever that may be.
    2. Or if you want to debug in your normal browser, you can, it just may be a bit complicated. I use Chrome, which uses a different process for each window, and one master process. Unfortunately, when you start debugging, VS will attach to the master process, but it's the process for the new window that actually is running the Silverlight code, so you have to goto Debug > Attach to process, and choose the one running Silverlight. It's annoying having to do that all the time, but it works. I think Firefox will work normally as well, but I'm not sure.
  12. Go to Rawr.Silverlight/App.xaml.cs, and put a breakpoint in the Application_UnhandledException method. That will be hit whenever there's an unhandled exception.
  13. Hit Play to start debugging.
  14. The first time you start debugging, it'll ask you if you want to use Silverlight Debugging. Choose Yes.
  15. You should now have Rawr4 running in your browser, fully debuggable. Note that unlike with WinForms development, you can't use Edit and Continue, so you have to relaunch after making changes. Annoying, I know.

XAML Editing

XAML is the language used for creating GUIs in WPF and Silverlight. VS2010 has a designer for it in Silverlight 4.

One important thing to note while designing interfaces is that it XAML is designed to be vector-based, with very dynamic layouts, that resize, and relayout, as the size of the containing object changes. So you don't typically lay things out by assigning pixel coordinates for controls (you can do that, but it's frowned upon, and gives inferior results). Instead, you let it lay things out using Grids (where you assign controls to cells in a grid, with col/rowspans, etc), StackPanels (where controls are just stacked on top of each other, or next to each other), or DockPanels (where controls are docked to a side, or fill, the container). XAML is also designed with data binding especially in mind. There's a wealth of info out on the internet and in books about XAML; the things you can do compared to Winforms are incredible. I'd suggest checking out some of the showcases on http://silverlight.net for some idea of the things you can do.

All that said, most model devs won't need to create amazing complex visually stunning controls. Rather, you just need some simple labels, text boxes, dropdowns, numerics, perhaps a tab control, etc. VS2010 will help you do that very quickly and easily. Here's how to get started:

  1. In Visual Studio, with the Rawr4 solution open, go to the project for the model you intend to work on.
  2. Check to see if the following references are there; add them if they're not:
    • System.Windows.Controls
    • System.Windows.Controls.Input.Toolkit
    • System.Windows.Controls.Layout.Toolkit
  3. Save all, the project and solution.
  4. Find a XAML file to look at. Rawr.Mage/CalculationOptionsMage.xaml is a good one that's not too complex, but has a decent number of controls, across a few tabs. Double click on it in the Projects tab.
  5. You should see the control in the middle of the screen. In the bottom left, in the Objects and Timeline tab, is a tree of all the controls in the xaml file. This one has a Grid (named LayoutRoot), which has a TabControl, several TabItems, some Grids, a whole bunch of TextBlocks (labels), TextBoxes, CheckBoxes, Buttons, etc.
  6. On the left edge of the screen is a vertical bar of tools, including common controls like grids, textboxes, and buttons. The last tool there pops out a list of all controls, which are grouped in several categories, that you can choose from.

That should get you started on making the XAML controls you need for Rawr4.

Last edited Nov 12, 2012 at 5:03 AM by Kavan, version 10

Comments

tarix Jun 21, 2011 at 4:07 AM 
In order to compile the WPF version of Rawr you also need to install the WPF Toolkit:

http://wpf.codeplex.com/releases/view/40535