Getting Started with Brew - shellscape/Brew GitHub Wiki
Once you've gone through Downloading and Installing Brew and have Brew in your project, you'll need to setup a few things. To recap, the following takes place when you've installed Brew:
- Brew.dll and Brew.Webforms.dll now appear in your bin directory.
- References to both assemblies have been added automagically.
- brew.js and brew.min.js have been added to your Scripts directory (and in some cases, the Scripts directory has been added).
- The web.config.transform file that comes with Brew has altered your web.config file to included a pages/control reference for Brew controls.
- NuGet has also grabbed the jQuery and jQuery UI packages, placed scripts for both in the Scripts directory, and jQuery UI has added some goodies in the Content directory. These are both dependencies of Brew.
Getting started isn't difficult at all. There are a few things that are recommended to do before you jump right in.
Place a script manager on your page, if you don't already. Brew will place a ScriptManager on the pace for you if one doesn't exist, but other ASP.NET controls aren't so nice. The UpdatePanel, for example, will throw an exception if it doesn't locate one. It's recommended to add the script manager to a master page, if you're using one. (And if you're not, look into master pages, they're cool.) The markup around your form should look something like this:
<form runat="server">
<asp:scriptmanager runat="server" />
...
<asp:contentplaceholder id="content" runat="server" />
...
</form>
Setup the jQuery UI css. jQuery UI comes with a fantastic css framework and has made dozens of themes available via the Themeroller Gallery. When NuGet installs the jQuery UI package, it'll place several directories in the Content base directory. The structure will look like this:
content | +- themes | +- base
You'll find several css files in the base directory. Depending on your app, include the appropriate file. To include css for all widgets, use jquery.ui.all.css. To include the file on your page, locate the
tag and place a new to the css file like so:<head runat="server">
<title>Shellscape Software → Brew Demos</title>
<link rel="stylesheet" href="Content/themes/base/jquery.ui.all.css" />
<link rel="stylesheet" href="css/style.css" />
<script src="js/modernizr-2.5.3.min.js"></script>
</head>
And that's it. If you're wondering how jQuery and jQuery UI are added to the page, the assemblies that ship with the NuGet package for each take care of that for you. If you'd like to handle including jQuery and jQuery UI on your own, you'll have to remove the assembly for each in the bin directory each time Brew is updated. That's just a limitation of NuGet at the moment.
You're now ready to start using Brew!