Showing posts with label ui. Show all posts
Showing posts with label ui. Show all posts

Wednesday, 14 August 2013

Antaris RazorEngine, Site Layouts

I have been using Antaris RazorEngine (v3) both at work and in the Asura framework used by Xizi. It is a light implementation of Razor that isn't strongly tied to MVC.

That said, documentation has been pretty thin on the ground. Especially around what I've been trying to do today which is to use the Layout functionality from within a file that is effectively in a .cshtml format.

So, the problem I am trying to address is doing ASP.Net MasterPage-like things but with isolated Razor templates using RazorEngine.

Certainly there are bits of documentation about how to use Layouts when creating and treating templates from code, but I couldn't find any complete examples on how to do it with template files.


The Layout file - mylayout.cshtml


<!DOCTYPE html>
<html>
@RenderSection("Head")
@RenderSection("Body")
</html>
This is a very basic layout comprised of the beginning and end of the markup and two section placeholders for "Head" and "Body".

That's all quite simple, but the problem is that if you are using RazorEngine in the raw way that I am, then when a template tries to resolve that layout it will fail as it is not in the template cache and I do not specify a resolver delegate to be able to do it.

Instead, the layout file must be compiled ahead of time. This can be performed by the following which, given an existing pathname for a .cshtml, will compile it into the template cache:


string viewPath = @"C:\code\razor\mylayout.cshtml";
string layoutName = @"mylayout";
if (File.Exists(viewPath))
{
ITemplate template = Razor.Resolve(viewPath);
if (template == null)
{
string templateContents = File.ReadAllText(viewPath);
Razor.Compile(
templateContents,
typeof(IDictionary<string, object>),
layoutName);
}
else
{
// already in cache
}
}
Assuming viewPath is the physical path of the mylayout.cshtml file and layoutName is the simple name that this layout will be known as in the template cache. Also, there should be a critical section between the Razor.Resolve and the Razor.Compile operations.

The Razor.Compile operation takes the contents of the mylayout.cshtml file and considers it with having a Model object of type IDictionary passed to it. This type should be repeated in the template file, as shown below.

Once the layout has been cached, any template file can use the layout.


The Template file - layout_test.cshtml

Here we go, then. This is the contents of my template, which is the one I want to use to fill the layout's section placeholders:
@inherits RazorEngine.Templating.TemplateBase<IDictionary<string, object>>
@{   
    this.Layout = @"mylayout";
}

@section Head
{
<head>
    <title>@Model["facebookAppID"].ToString()</title>
</head>
}

@section Body
{
<body>
my body
</body>
}
Firstly, the @inherits statement uses the generic version of RazorEngine's TemplateBase class to define the type that the @Model object will be interpreted as. This type should match whatever you are passing into the RazorEngine.Razor.Compile method when you compile the template. This should also match the type passed into the layout's compile operation.

Next, the setting of this.Layout. This is the name by which the layout's template is known within the RazorEngine cache, so it must match what was used to compile that template. Setting this string activates RazorEngine's ability to process this template while considering the contents of the layout.

After that are two @section definitions. One of which uses the @Model object which is treated as an IDictionary just as an example proving that it has access to @Model.

Note: You can also access @Model from the Layout template, without having to use the @inherit statement.

The template is compiled in much the same way, although in the Asura framework, templates are compiled on application startup and also when the last file write time is detected to be greater than that which we have recorded most recently.


Conclusion

So, long story, short, in order to get the Layout functionality working from within a .cshtml style use of RazorEngine, you have to pre-compile the templates that you will be using as a Layout before they are accessed, because RazorEngine will not do that work for you.

Hope that helps some people.

Monday, 29 July 2013

Bookmarks for 20130729

Well this just pulled me out of a terrible hole ... the dreaded "case folding error" in Mercurial. The following advice worked:
http://mercurial.selenic.com/wiki/FixingCaseCollisions

And this seemed useful...

Failing over from CDN to local storage:
http://www.hanselman.com/blog/CDNsFailButYourScriptsDontHaveToFallbackFromCDNToLocalJQuery.aspx

Twitter Bootstrap has a release candidate for version 3. Not sure how I feel about this yet. On the one hand the new stuff looks amazing, on the other, I'm not sure I like the new grid classes. But, worth a look and it is admirable that they are going for "mobile-first", so rolling the responsive stuff into the main build as default:
http://twitter.github.io/bootstrap


Friday, 14 June 2013

Bookmarks for 20130614

"No more miracles, loaves and fishes.
Been so busy with the washing of the dishes."

I'm back. Here's some stuff.

Some useful stuff on the blueimp jQuery.UI FileUpload control:

https://github.com/blueimp/jQuery-File-Upload/wiki/How-to-submit-additional-Form-Data

Twitter Bootstrap is just the best bloody thing ever. It feels like cheating when using it to produce what turn out to be really gorgeous, minimalistic, clean web designs.

https://github.com/twitter/bootstrap

Whole bunch of stuff I should have read BEFORE I started writing Xizi:

http://docs.mongodb.org/manual/core/data-modeling/

IPython Notebook looks like a lot of fun, bit like a live, interactive version of One Note maybe?

http://ipython.org/notebook.html


Friday, 24 May 2013

Bookmarks for 20130524

Not dead, merely dreaming.

Some useful stuff from today, which allowed me to make a monitor page showing me all the job processors across 12 different platforms. CSS to scale an iframe:

http://stackoverflow.com/questions/4660659/javascript-css-set-firefox-zoom-level-of-iframe

(bearing in mind that the width and height on the iframe will be scaled as well so it must be multiplied accordingly)


A really bloody simple and non-fussy lightbox for Javascript/JQuery - EasyBox:

https://code.google.com/p/easybox/


A great article from Fleet Street Fox on the Woolwich murder and the EDL. Yes, I know it's on The Mirror's site, but it's truly a good article:

http://www.mirror.co.uk/news/uk-news/edl-dont-defend-england-says-1908599


Friday, 12 April 2013

Bookmarks for 20130412

Interesting metrics UI stuff
http://ducksboard.com/tour/

At least partly atmosphere-based sci-fi space-fighter game. SHUT UP AND TAKE MY MONEY.
http://www.strikevector.net/


Tuesday, 19 March 2013

Bookmarks for 20130319


Fantastic article about Sean Smith, aka Vile Rat, Eve Online's greatest diplomat, killed in action in the attack on the US Embassy in Benghazi on September 11th 2012. It explains a little bit about the game and, in some part, about the community that I love. Reading it brought back the initial shock at hearing about the attack and then the ripples it sent through the game's players. Memento mori; Vita brevis.

http://www.playboy.com/playground/view/vile-rat-virtual-world-of-eve-online



And a first look at new Mozilla Firefox dev tools:

http://boingboing.net/2013/03/19/mozilla-foundation-unveils-dev.html


Wednesday, 13 March 2013

Bookmarks for 20130313

Retinal implant allowing blind people to navigate doors, read words. Amazing stuff. (via @realityisbuggy)

http://news.sky.com/story/1063789/bionic-eye-enables-blind-people-to-see

HTML5 seems to be replete with people making the same old mistakes about website UI.

http://econsultancy.com/uk/blog/62335-14-lousy-web-design-trends-that-are-making-a-comeback-due-to-html5

Saturday, 9 March 2013

Tuesday, 5 March 2013

Bookmarks for 20130305

DesignModo's Flat-UI, a free UI kit based on Bootstrap, JQuery:

EDIT: This is now defunct. GitHub got hit with a DMCA takedown on the software as the guy's previous employer deigned it to be their property.

http://designmodo.github.com/Flat-UI/

TIL that SqlBulkCopy is really awesome:

http://msdn.microsoft.com/en-us/library/1y8tb169.aspx