The first thing we do as we continue working on our UI is clean up a few things from the last time. While we created screen objects so we could tightly bind our views to something, we didn’t do the same for the Master pages. Since we didn’t do that, we ended up casting our BlogConfig object on the master page like so:
1: <script type="text/javascript" src='https://www.google.com/jsapi?key=
2: <%: (ViewData["BlogConfig"] as BlogConfig).GoogleApiKey %>'></script>
Specifically we’re talking about line 2. We really want to avoid this wherever possible. However, since this is the Master Page, we’re not currently binding it to a specific object type (besides our VeritasViewMasterPage). We can get past this by binding it to the ScreenBase object. Since we’re passing screen objects which all descend from ScreenBase to our views as the model, this will work and it means that on our master page, we can access any public properties or methods of the ScreenBase class. So in our master pages (all of them, not just Site.Master), we’ll change our inherits line to:
Inherits="Veritas.UI.Web.Views.VeritasViewMasterPage<Veritas.BusinessLayer.Screens.ScreenBase>"Now, we’ll just add a BlogConfig variable to our ScreenBase class:
1: public BlogConfig blogConfig
2: {
3: get { return CacheHandler.GetBlogConfig(); }
4: }
Now, we can change the javascript reference up above to this cleaner version:
1: <script type="text/javascript" src='https://www.google.com/jsapi?key=
2: <%: Model.blogConfig.GoogleApiKey %>'></script>
We’re going to continue making a few more changes to our site master’s head element:
1: <title><asp:ContentPlaceHolder ID="TitleContent" runat="server" /></title>
2: <asp:ContentPlaceHolder ID="MetaContent" runat="server" />
3: <script type="text/javascript" src='https://www.google.com/jsapi?key=
4: <%: Model.blogConfig.GoogleApiKey %>'></script>
5: <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs
6: /jquery/1.4.4/jquery.min.js"></script>
7: <script type="text/javascript" src="https://ajax.googleapis.com/ajax
8: /libs/jqueryui/1.8.9/jquery-ui.min.js"></script>
9: <script language="javascript" type="text/javascript" src="
10: <%= Url.Content("~/Scripts/watermark/jquery.watermark.min.js") %>"></script>
11: <script language="javascript" type="text/javascript" src="
12: <%= Url.Content("~/Scripts/highslide/highslide-with-gallery.min.js") %>"></script>
13: <script language="javascript" type="text/javascript" src="
14: <%= Url.Content("~/Scripts/site.js") %>"></script>
15: <link rel="stylesheet" type="text/css" href="
16: <%= Url.Content("~/Scripts/highslide/highslide.css") %>" />
17: <%= Model.blogConfig.WebStatsJavascript %>
18: <%= Model.blogConfig.HeaderScript %>
This is everything in the head but we’ll just cover the new stuff. Line 2 is a new Content Place Holder that we’ll use for meta data. This way we can inject things like the page description and keywords into the page based on the content (i.e. so the keywords for a certain blog entry are specific to it’s content). Lines 9 through 12 are for loading up the Highslide javascript library and the jQuery Watermark library. Lines 13 and 14 are just to load up our site.js which we’ll put all or most of our site’s javascript into (later on we should probably change this to use a minimized version). 15 and 16 are for the Highslide css file. Lastly 17 and 18 bind to stuff we have in the Blog Config. Specifically, whatever javascript we want to load for analytics or statistics (Google Analytics) and any javascript we want to store in the database (this way we can make quick and global script changes).
We’ve already done quite a bit and we haven’t even gotten to anything that actually shows up in the UI! Let’s do one more config related thing and then actually start making our UI. The last thing I want to do before doing some visual stuff is add a way for us to load a custom CSS file. The idea is that eventually we’ll want to give users the ability to change between CSS files from the admin portal and alter the appearance of their site. So, let’s add this to our head:
1: <link href="<%= Url.Content("~/Content/Themes/" +
2: Model.blogConfig.Skin + ".css") %>" rel="Stylesheet" type="text/css" />
Again we’re pulling from the BlogConfig. Now we want to have a default in case of the Skin not being set. However, instead of specifying that here in the UI, we’ll go to the BlogConfig class and change it from an Automatic Property to something with a little logic:
1: private string _skin;
2: public string Skin
3: {
4: get { return (String.IsNullOrEmpty(_skin) ? "Default" : _skin); }
5: set { _skin = value; }
6: }
Now we’ll always get “Default” if something isn’t set. For our UI, we’re going to go with a 2 column Fixed Fixed layout with the content column on the left and the menu column on the right. The html for this is actually pretty simple:
1: <div id="maincontainer">
2: <div id="topsection">
3: <div class="innertube">
4: <p id="logo">
5: </p>
6: <h1 class="titleOnlyHeader">
7: <%= Model.blogConfig.Title %>
8: </h1>
9: </div>
10: </div>
11: <!-- Legacy support for rounded corners -->
12: <b class="rtop"><b class="r1"></b>
13: <b class="r2"></b><b class="r3"></b><b
14: class="r4"></b></b>
15: <div name="contentwrapper" id="contentwrapper">
16: <b style="background:#000;height:2px;display:block;width:700px;margin-left:30px;"></b>
17: <div id="contentcolumn">
18: <div class="innertube">
19: <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server" />
20: </div>
21: </div>
22: </div>
23: <div id="rightcolumn">
24: <b style="background:#000;height:2px;display:block;width:170px;"></b>
25: <b class="leftMenuBar"></b>
26: <div class="innertube" >
27: </div>
28: </div>
29: <div id="footer">
30: <p>
31: <%= Model.blogConfig.CopyrightText%>
32: </p>
33: </div>
34: </div>
There are a couple things to point out here. At the top there is a P tag for a logo and then a h1 header tag with the class titleOnlyHeader in it. The idea is that in general we’ll put a logo and the title into the Logo tag and then hide the titleOnlyHeader tag. If we don’t have a logo though, we can just leave the titleOnlyHeader with the title as visible. Right above ContentWrapper there is a section that will handle rounding the corners at the top of our main content area. We might change this down the road to use jQuery but for now, we’ll stick with a css only solution. The rest of it is more straight forward. ContentColumn will contain all of our actual content. The MainContent place holder is where all of the blog entries and page content will end up. Then we have our RightColumn which will be our menu, links, etc. Of course all of this is dependent on the CSS that will actually make things look the way we want them to. Instead of going through all of our CSS (cause there is a fair amount) you can just look at it in the below attached code.
That’s all we’re going to do for today. We only got to a little bit of the actual UI, but we did handle a lot of set up. Next time we’ll actually start putting some content into the site. As always, the latest code is available here.
