Page Template Paradox - separating design and content?

Last post 10-08-2004 12:43 PM by everlearner. 332 replies.

Sort Posts:

  • Page Template Paradox - separating design and content?

    06-26-2002, 2:52 PM
    • Member
      40 point Member
    • givoni
    • Member since 06-24-2002, 9:52 AM
    • Barcelona, Spain
    • Posts 19
    Many praise the .Net framework because of the possibility of making object oriented web applications based on an n'tiered software design.
    But in my search for the optimal way of maintaining and reusing the website user interface (the presentation layer) I have run into two ways of doing so, each with different advantages over normal scripting code, but without being compatible with each other. My question is: is there a solution to this problem?

    1. Separating designers from developers.
    One praised way of coding with .Net is the use of codebehind files that takes care of the business logic, while the aspx-page itself contains the presentation - the webdesign. This gives makes work differentiation much easier between developers and designers, since they don't have to work on the same files any more. On the aspx-page the designer uses user controls and styles them and combines them the way he wants, and the developer provides the content for these user controls in a compiled code-behind file.
    But how does one then maintain a consistent and easily updated general template design of all pages, when each page needs to be designed by combining different user controls?

    2. Templates through page inheritance.
    To achieve this general template one can create a new class that inherits from the page class and contains the general design, but makes room for 'placeholders' (specific page content). Then each codebehind file inherits from this pagetemplate and adds the specific controls or whatever in the relevant placeholders.
    But this approach looses the work differentiation advantage of the first approach since now the html/xml tags are no longer separated from the high level server language and are much more difficult to understand and maintain.

    So is there a way around this paradox, and if not, which approach would you take?
  • Re: Page Template Paradox - separating design and content?

    06-27-2002, 1:51 PM
    • Member
      50 point Member
    • xc2k
    • Member since 06-24-2002, 1:28 PM
    • Posts 16
    This is my personal opinion on #2.

    I found that the best way to create a template is by developing a server control that has a PageContent property. Then on your aspx pate you will have something like.


    <%@ Page %>
    <%@ Register TagPrefix="PageTemplate" Namespace="MyControls" Assembly="MyControls" %>
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
    <html>
    <head>
    <title>My Page</title>
    <script language="vb" runat="server">
    Sub Page_Load(s as object, e as eventargs)

    pl1.PageContent = "This should contain all the text for this page"
    End Sub
    </script>
    </head>
    <body>
    <PageTemplate:PageLayout id="pl1" runat="server"/>
    </body>
    </html>
    Xavier
  • Re: Page Template Paradox - separating design and content?

    06-28-2002, 2:16 AM
    • Member
      40 point Member
    • givoni
    • Member since 06-24-2002, 9:52 AM
    • Barcelona, Spain
    • Posts 19
    Thanks for your opinion.
    I would also go for #2, but since my post I've read a bit more in other threads here as well and it seems that there are several discussions going on about the same thing.
    One is called : Application of MVC pattern to .NET. MVC means Model View Controller, which is a pattern that tries to solve the issue.
    Another is the one about the IBuySpy-framework provided by Microsoft as a best practice example.
    It looks like most go for #1, which to me seems to have some (perhaps minor) problems:
    - one is that a site with only one URL+parameters is not very userfriendly in terms of bookmarking or understanding navigation/location. This is a minor issue though.
    - another is the fact that still quite many search engines still don't register URL-passed parameters, they just cut them off. So the site would not be easily listed on search engines (apart from the index-page) and a lot of content would be hidden (Google is an exeption to this)
    - lastly there is a significant server overhead, since all requests have to be processed by the server and a top-layer of static html-pages (updated dynamically when the model/database changes) is not possible. It looks a bit like the 404-page solution from search engine optimizing dynamic websites.
    And well as I mentioned in my first post, the #1 solution doesn't really make it an option to give the presentation code to the designer, since it would be mixed with C#, VB or whatever highlevel server language we have chosen.
  • Re: Page Template Paradox - separating design and content?

    06-29-2002, 8:31 PM
    • Contributor
      4,745 point Contributor
    • bdesmond
    • Member since 06-15-2002, 6:02 PM
    • Chicago, IL USA
    • Posts 944
    • TrustedFriends-MVPs
    Just a comment on the server control with all the content - I really like that idea!
    --Brian Desmond
    Windows Server MVP - Directory Services
    http://www.briandesmond.com
  • Re: Page Template Paradox - separating design and content?

    06-29-2002, 9:40 PM
    • Participant
      1,057 point Participant
    • RHoward
    • Member since 06-08-2002, 4:54 PM
    • Dallas, TX
    • Posts 204
    • ASPInsiders
    -------------------------- edited by: RHoward --------------------------
    err, bad grammar<img src="/Forums/skins/default/images/emotions/emotion-1.gif" border="0" alt="Smiley" />
    -------------------------- edited by: RHoward --------------------------
    we've got some cool samples of code/content separation used in this forum system - once we publish the code, you'll see what I mean :)

    Esentially, none of the server controls contain any UI code, rather they simply execute logic and load their UI dynamically; this is what I've termed as 'skins' in the forums.

    Next week I'll enable user's to select their own systems, e.g. maybe we'll support a 'GotDotNet' skin or an 'XBox' skin and you could use that UI to view the site.
    » telligent
    Creators of Community Server (powering this site)
  • Re: Page Template Paradox - separating design and content?

    07-02-2002, 12:48 AM
    • Member
      40 point Member
    • givoni
    • Member since 06-24-2002, 9:52 AM
    • Barcelona, Spain
    • Posts 19
    sounds good, rhoward, I'm looking forward to see what you have come up with...
  • Re: Page Template Paradox - separating design and content?

    07-03-2002, 4:15 PM
    • Member
      75 point Member
    • wwwebconcepts
    • Member since 06-24-2002, 7:56 PM
    • Texas
    • Posts 15
    I am also looking for a skin solution. In asp I used a page with an fso to read the template.htm file and split it into an array of halfs. -1, 1. Page markers (XXXPAGECONTENTXXX) tell it where to put the dynamic content at runtime. The actual asp page has no design elements not needed to display the resulting data. Above the dynamic content I call for half of the array, below the other half. I want to do essentially the same with my aspx pages. So I am eagerly awaiting your info as well.

    I have been thinking of using the StreamReader() to implement this. However, any method that works and allows me work on design and logic separately is great.
  • Re: Page Template Paradox - separating design and content?

    07-04-2002, 10:23 PM
    • Member
      656 point Member
    • digory
    • Member since 06-16-2002, 7:39 PM
    • Australia
    • Posts 131
    • ASPInsiders
      TrustedFriends-MVPs
    Just a comment... bdesmond said that he really liked the idea whereby, you programatically pump all of the data into a control via the Page_Load event, like:

    &nbsp;&nbsp;
    pl1.PageContent = "This should contain all the text for this page"


    I'm personally not sure that I like that idea, because it seems very rigid and hard to extend.

    The whole idea of custom templated controls gets around this. You can create different types of templates and pump the pieces of page text into those.
    http://twitter.com/digory
  • Re: Page Template Paradox - separating design and content?

    07-05-2002, 7:49 AM
    • Member
      75 point Member
    • wwwebconcepts
    • Member since 06-24-2002, 7:56 PM
    • Texas
    • Posts 15
    You wrote:
    "I'm personally not sure that I like that idea, because it seems very rigid and hard to extend."

    Only experienced people can create and use controls. The beauty of the html template is anyone can make a template with Front Page or even AOL Press. They don't need to know anything about the application development. So you can create the application and sell copies for people to customize as they like by changing the template.

    Templates are not rigid. You can actually use a number of templates in single site and use conditions such as entry url to decide which template the visitor sees. Here's an example of that in asp: http://tsmwinc.com/tsmw_store/ and http://classiccopper.com use the same db and asp files. Only the user experience is different. This can be a very powerful tool.
  • Re: Page Template Paradox - separating design and content?

    07-05-2002, 7:53 AM
    • Member
      656 point Member
    • digory
    • Member since 06-16-2002, 7:39 PM
    • Australia
    • Posts 131
    • ASPInsiders
      TrustedFriends-MVPs
    So you are agreeing with me?
    http://twitter.com/digory
  • Re: Page Template Paradox - separating design and content?

    07-05-2002, 8:59 AM
    • Member
      75 point Member
    • wwwebconcepts
    • Member since 06-24-2002, 7:56 PM
    • Texas
    • Posts 15
    In part. I don't like the idea of using server controls for templating. I want to use a plain html template that anyone with minimal skills can edit. In other words, leave the logic to the programmers, the design to the designers. Making the template a plain html page will go a long way to keep the designers out of offices and out of our ears.
  • Re: Page Template Paradox - separating design and content?

    07-05-2002, 9:13 AM
    • Member
      50 point Member
    • xc2k
    • Member since 06-24-2002, 1:28 PM
    • Posts 16
    the example that I wrote

    pl1.PageContent = "This should contain all the text for this page"

    was a very simple one.

    Of course that my component has more properties and methods than just a PageContent.

    pl1.ShowRightMenu()
    pl1.SelectedSection = mSection

    etc.

    The point that I want to make was that I don't have to worry about any content that is outside the script tags. I can have control all the content of the page from the Load_Page method. Besides, it's a good way to encapsulate data when the code of your application is hosted in someone else's machine.



    Xavier
  • Re: Page Template Paradox - separating design and content?

    07-07-2002, 11:12 AM
    • Contributor
      3,715 point Contributor
    • PaulWilson
    • Member since 06-25-2002, 11:32 AM
    • Woodstock/Atlanta, GA (USA)
    • Posts 745
    • ASPInsiders
    The easiest way to have add a common header and/or footer on your web pages is to make your own base page class that renders the desired common functionality and then have the rest of your pages inherit from this page. I personally prefer to override the Render method directly in my base class since it is the most efficient (controls always add some overhead). You can add properties that each of your pages can set to supply things like a unique page title. I also check the Context to determine the current server path so that my common menubar reflects the correct selection automatically. The possibilities are endless -- see my site www.WilsonDotNet.com for a complete site that has been implemented in this manner. Every page is automatically inheriting the common header, with the menu bar, and footer as my code sample shows you. I also have another layer of inheritance that automatically adds the side boxes and box outline for the main content on most pages. I don't think any other technique comes close to this standard OOP solution, since the other approaches still require you to add controls or set placeholders for every page.

    Thanks, Paul Wilson
    Paul@WilsonDotNet.com
    www.WilsonDotNet.com

    //**********************************************************************
    // Create a Base Page Class that Inherits from System.Web.UI.Page
    // And Override OnInit, OnLoad, OnPreRender, or Render as Needed
    // My Tests Indicate that using Render is most Efficient if Possible
    // Although you can automatically Load User-Control with Others
    // Make it as simple or complex as Needed with other Properties too
    // Make your other Pages Inherit from This -- or Modify Web.config
    //
    // Example : YourBasePage.cs
    //**********************************************************************
    public class YourBasePage : System.Web.UI.Page
    {
    protected override void Render(System.Web.UI.HtmlTextWriter writer) {
    writer.Write("<HTML><HEAD><TITLE>Your Site</TITLE></HEAD><BODY>");
    base.Render(writer);
    writer.Write("</BODY></HTML>");
    }

    public YourBasePage() {
    // Note: Base Class -- Do Not Instantiate
    }
    }

    <!-- ***************************************************************** -->
    <!-- Example Web.config file that Automatically Uses the Above Class -->
    <!-- ***************************************************************** -->
    <?xml version="1.0" encoding="utf-8" ?>
    <configuration>
    <system.web>
    <pages pageBaseType="YourNameSpace.YourBasePage, YourAssembly" />
    </system.web>
    </configuration>
    Thanks, Paul Wilson, ASPInsider, MC**

    For the best .NET code, examples, and tools, visit:
    WilsonDotNet.com, WilsonWebPortal.com, ORMapper.net
  • Re: Page Template Paradox - separating design and content?

    07-07-2002, 3:38 PM
    • Member
      40 point Member
    • givoni
    • Member since 06-24-2002, 9:52 AM
    • Barcelona, Spain
    • Posts 19
    Very interesting website you've got, Paul, and I'm happy to see that you're going for the 'full' OO-solution.
    I have been experiencing a bit with the controls-approach, but I still find yours to be more logical. But have you come up with a solution to the designers vs. coders issue, in other words how to let a webdesigner do his HTML-part without interfering with the rest of the code?

    You say that your approach has a performance-advantage as well, can you explain that?

    /David
  • Re: Page Template Paradox - separating design and content?

    07-08-2002, 8:14 AM
    • Contributor
      3,715 point Contributor
    • PaulWilson
    • Member since 06-25-2002, 11:32 AM
    • Woodstock/Atlanta, GA (USA)
    • Posts 745
    • ASPInsiders
    Here's my take on your paradox and ASP.NET:
    I tried User Controls and found their lack of design-time support to be disappointing.
    I still use them for some things, mostly as a convenience, but not for most things.
    I then moved to Server Controls and found them to be almost the perfect answer.
    They aren't hard for experienced developers to write (probably hard for scripters),
    and they almost always provide full design-time support for rest of team (designers).
    However, they were not a good solution for encapsulating page headers and footers,
    since things in the <HEAD> section, like stylesheet links, are ignored in the designer.
    So, now I use User Controls for mostly content-only types of things for their simplicity.
    This allows anyone to maintain them, they can be cached, and site is not restarted.
    I use Server Controls for more complex situations, especially for any design support.
    I.e., my site has a Button Server Control that is great for designer-types to work with.
    I think that this is the preferable solution for teams with capable developers on them.
    However, the overall site look and feel doesn't get design-time support in any solution,
    so I gave up and moved it to base page classes instead of user or server controls.
    At first I really wanted my overall stylesheet and common menus in every page,
    but after a while you get used to these things not being present until rendering time.
    It forces you to focus on the page-specific details, and encourages use of CSS styles.
    Dependency on site layout during each page design can lead to poor assumptions,
    especially on sites that allow personalization, or multiple stylesheet options like I do.
    So, I don't know that I have really solved your paradox, but I came to terms with it.

    As for the performance advantages of rendering:
    Consider this most basic page event order: init, load, prerender, render, and unload.
    Every user and server control must go through this entire sequence (and others too).
    Also, note that every block of literal HTML in an .ASPX page is a literal user control.
    What if you can skip the init, load, and prerender stages, and go straight to rendering?
    My base page class does just this -- the header (and menu) and footer is only rendered.
    I ran tests (using trace for tracking the execution time) to compare the performance of
    pure html, old-style includes, user controls, server controls, and page inheritance too.
    Page inheritance tests included cases for dynamically adding controls on init or load,
    straight rendering, and even the complex page template case of Jonathan Goodyear.
    The best performer was straight rendering using page inheritance, with pure html and
    old-style includes being the next best case (these are essentially one literal control).
    Of course, pure html provides no reuse, and old-style includes are out of favor now.
    The worst performers were always those with the user controls, and especially the
    complex page templating techniques that require multiple user controls to be used.
    There was a slight advantage if delayed user controls until load, or prerender better.
    Server controls were also slightly better than user controls, but not by much either.
    All of these issues are actually quite minor, but each control (literal, user, or server)
    does increase this performance hit slightly, so it pays to at least be aware of it some.
    My point is that common site headers, menus, footers should be optimal performing,
    while the page-specific details make more sense to use controls and their positives.

    I hope this helps some. I am trying to get permission to write an article on this stuff,
    but so far the magazines are content with the published page templating techniques.

    Thanks, Paul Wilson
    Thanks, Paul Wilson, ASPInsider, MC**

    For the best .NET code, examples, and tools, visit:
    WilsonDotNet.com, WilsonWebPortal.com, ORMapper.net
Page 1 of 23 (333 items) 1 2 3 4 5 Next > ... Last »