Tech blog

  • Use an animated gif on long running post backs

    Use an animated gif on long running post backs
    20 december 2011
    Skriven av: Kristoffer

    With all the new jQuery and client callback methods available to .net developers, it has become a lot easier to refresh the DOM of a running page without a reload. However, sometimes you just want to display an animated gif after the user clicks a button until the page reloads, in order to display some sort of visual indication to the user that something is happening.

    This is not as easy as it sounds and I think I tried 5-6 options before I found a good solution.

    So in this case I am importing pages to EPiServer from a sitemap XML. I was importing 820 pages and it took too much time so I needed to display some kind of animation to show that the import still was in progress.

    So we have our html code. When the user clicks the btnImport we start to import the pages from the sitemap.

    <div class="epi-buttonContainer">
        <span class="epi-cmsButton">
            <asp:Button ID="btnImport" 
               runat="server" 
               CssClass="epi-cmsButton-text epi-cmsButton-tools epi-cmsButton-Import" 
               Text="Import" 
               OnClick="btnImport_Click" 
               OnClientClick="showLoading();" />
        </span>
        <div id="loading" style="float: left; visibility:hidden;">
            <img src="../../Img/loading.gif" alt="" />
        </div>
    </div>

     

    We have our div containing the animation. By default we set the visibility to hidden and when the user clicks the button we use the OnClientClick event to call the javascript function showLoading(); to display the div before postback.

    <script type="text/javascript">
            function showLoading() {
                setTimeout("document.getElementById('loading').style.visibility = 'visible'", 200); 
            }
    </script>

     

    As you can see we are just using ordinary JavaScript to change the visibility of the div, but we are calling the function via JavaScript setTimeout function. If we don't use the setTimeout the gif animation will just freeze, but if we set a little 200 ms wait on the function the animation will be loaded correctly. Once the post back is ready and the page is reloaded the animation will be hidden again.

    This is a really easy way to display an animated gif on post back without including jQuery or another typ of AJAX.

  • An EPiServer developer's introduction to the Umbraco Document API

    8 juni 2011
    Skriven av: Stephan

    When working with EPiServer we're used to having a single class to work with (if not using PageTypeBuilder), the PageData class. At first glance it's equivalent in Umbraco is the Document class, but after looking closer you'll see that there is one enormously important difference, caching.

    In EPiServer, we get all PageData objects from the DataFactory, since EPiServer implements a factory pattern. It's also implemented as a singleton, making it very simple to interact with. We get the page by passing a PageReference to the factory, getting the page we want. By default the DataFactory returns the currently published version of a page. In Umbraco, we instead call the constructor on the Document object, by passing it an ID of the page we want. A big difference here is that the Document API by default returns the latest version of that page, regardless if it's published or not, if a certain version is required, specify it by passing the version Guid.

    Another difference between the PageData and Document objects, is caching. The PageData object you get from the DataFactory is always cached (except when getting pages with FindPagesWithCriteria, but more on that in another post), whereas the Document object is never cached. For this reason, we only work with the Document API when we want to programatically change data. For a cached page in Umbraco, we use the Node API.

    In EPiServer, the PageData object is read-only, when we want to change a page, we call CreateWritableClone() on the PageData object, getting a writeable copy of our object, that we can change all we want. When we're done, we pass it back to the DataFactory for saving and/or publishing. In Umbraco, this is not as straight-forward. The Document is always open for changes, and changing a property will persist that change to the database immediately. Properties for an EPiServer PageData object is accessed throught its index property, by property name, like MyPageData["MyProperty"]. Getting a property on the Document object is done with a call to MyDocument.getProperties("MyProperty"), however, this performs a call to the database as soon as you access the Property.Value property. What this essentially means, is that each proeprty is saved as soon as you set its value, calling Document.Save() fires the BeforeSave and AfterSave events, updates the UpdateDate property, and the preview XML. This is important to know. Calling Document.Publish() performs different task related to publishing, but it doesn't push your data to the content cache, for this you need to call umbraco.library.UpdateDocumentCache(int) passing it the ID of the Document. This also ensures that any other servers, if your site uses load balancing, also performs the cache update.

    There are a number of methods to get cached content in Umbraco, the old-school way is to use the Node API, most commonly used via XSLT in Macros, but it's also available from code. Another way is to use Linq2Umbraco, that gets cached, typed, instances of your content. It has excellent performance, and if you're more comfortable with using C#/VB for your coding, this is probably the way for you. As I write there is also support for using Razor in Umbraco, and I dare say that it may make XSLT in Umbraco obsolete. It's the new black, and it's friggin' awesome :)

    There's a great set of wiki-articles called The Umbraco API Cheat-sheet. Amongst others, it clearly describes the difference between a Node and a Document.

    As usual, all and any comments, suggestions and additions are more than welcome.

    (This post was previously published here.)

  • An introduction to Umbraco for EPiServer-developers. Or vice-versa.

    17 maj 2011
    Skriven av: Stephan

    This is the first part in a series introducing Umbraco to EPiServer developers, however, it can also be seen as an introduction to EPiServer for Umbraco developers. It all depends on your perspective. Please keep in mind that this is not an attempt at comparing the two for the sake of which is better, and I do not make the argument for either platform. Both have their pro's and con's, but I leave it up to you to select the platform that best suits your needs and requirements.

    In my experience Umbraco is seen as a competent OSS alternative to EPiServer. In my opinion, EPiServer is a very competent product, although, the license costs often excludes it from consideration by many organizations. Umbraco, too, is very competent. They employ similar patterns for some of their functionality, and completely different approaches for some.

    I've planned the disposition for the series according to the list below, but it may change as I write. I'll update this post as the series progresses. 

    Part 1. The administration user interfaces.
    Part 2. Document vs. PageData
    Part 3. DocumentType vs. PageType
    Part 4. DataType vs. PropertyType
    Part 5. Property vs. PropertyData
    Part 6. Media vs. the VPP
    Part 7. Members vs. Users
    Part 8. Event hooking
    Part 9. Scheduled tasks
    Part 10. Building a Custom DataType, vs. Building a Custom PropertyType
    Part 11. Extending and customizing the UI.
    Part 12. Template vs. PageTemplate
    Part 13. Macros vs. DynamicContent
    Part 14. Macros (XSLT/Razor/UserControl/Python) vs. WebControls/UserControls
    Part 15. Searching with Examine vs. FindPagesWithCriteria

    I have been working with both platforms for many years, and I think both offer excellent performance and functionality. However, regardless of that experience, I may have gotten some things wrong, and I hereby invite anyone to correct me, add information, or otherwise express their opinions.

    (This post was previously published here.)

SoftResource

SoftResource är ett konsultföretag med spjutspetskompetens inom .NET-utveckling, med särskilt fokus på webben.

Referenser

Vi är EPiServer Associated Partner, Umbraco Certified Partner och Microsoft Silver Partner. Nedan kan du se några av våra referensuppdrag.