Archive for the ‘Content Management Systems (CMS)’ Category

“Get Your Feet Wet” in Scala

The programming language Scala, an acronym for “Scalable Language,” has been around for a while but is getting more popular recently due to its capability of mixing functional and object oriented features. Some of the features considered promising from a developer perspective are its static typing, expressive syntax similar to Java, and compilation to byte code which allows it to be executed on JVM and seamlessly integrated into existing Java applications if need be.

Scala supports many out-of-the-box features which include:

  • Full scale functional style programming which can be basically explained by the way it interprets everything as an expression with a value and also capabilities like tail recursion, lazy loading, pattern matching and immutability.
  • Object oriented programming by treating every value as an object and method – call as an operation.

As a simple example, a + b is actually interpreted as a.+(b) where ‘+’ is a method and ‘b’ as a  parameter to the method.

  • Static typing that supports inner classes, generic classes, views, polymorphic methods and many other types.
  • Interoperability with Java is a like a walk in the park.  It allows the use of Scala with the existing code but might need additional code on how the data is being handled on either side.

Getting Started. . .

With Scala, all you need to do is download it from its website and include in the path. This lets you run some simple Scala programs in command line which makes it even easier to play with.

Scala is also supported in Eclipse and Jet Brains IDEA with the appropriate plug-in.

Below is a SS of Scala Interpreter often called REPL (Read-Evaluate-Print Loop) which provides you with instant feedback and you can test it yourself with a task as simple as appending two strings to writing a function and then calling it. Some simple examples are shown in the snap shot.

Stay tuned for more on advanced Scala functions.

Scala

Read More Comments


AngularJS and Sitecore

AngularJS and Sitecore

I’ve been using a lot of jQuery and it’s the same old manipulating the DOM to get a page to look, feel and work the way I want it to work. There’s nothing wrong with this but I wanted to explore other JS libraries, from the thousands available, to possibly find a replacement or a complimentary library for jQuery.

After playing with AngularJS, I found its simplicity and its MVC capabilities very useful. Instead of manipulating the DOM, like jQuery, you can use AngularJS to extend HTML and treat HTML like XML to perform objectives such as creating custom tags. AngularJS uses jQLite, which is a version of jQuery, but if jQuery is already present on your site, it will use your version of jQuery instead.

Below is a simple example to showcase a powerful use of AngularJS that requires very little coding as found on their website.

<script src=”//ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js”></script>
<div ng-app>
    <label>Name:</label>
    <input type=”text” ng-model=”yourName” placeholder=”Enter a name here”>
    <hr>
    <h1>Hello {{yourName}}!</h1>
</div>
 

The app above is simple, declared as an Angular JS app by the “ng-app” attribute on the <div> tag. Every markup within the <div> is part of the declared app. The “ng-model” attribute, “yourName”, has been data bound to the <input> tag, hence it constantly listens to the <input> tag and upon entering any value within the <input> tag the value entered can be instantly displayed using mustache tags. In this example, the value would be {{yourName}}. This example demonstrates how powerful AngularJS is, because this code in jQuery would require at least a few lines of JavaScript.

Integrating AngularJS with Sitecore

I work with Sitecore almost daily, so I wanted to push it a bit further and see how AngularJS could integrate with Sitecore. To put it to the test, I chose to display a list of items from Sitecore using AngularJS.

With a typical Sitecore implementation, this is accomplished by getting the list of items and data binding the list to an asp:Repeater (then the rest is history). For this example, I focused on getting the list of items and data binding the list of items to a scope in AngularJS to let the app handle the rest.

The end result looks something like this.

    <script src=”//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js”></script>
    <script src=”//ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js”></script>
    <div class=”angularjs-app”>
        <div class=”list-data”>
            <asp:HiddenField runat=”server” ID=”ListCtrlData” />
        </div>
        <script type=”text/javascript”>
            //<![CDATA[
            var data = $('.list-data input[type=hidden]‘).val();
            data = JSON.parse(data);
            function ListCtrl($scope) {
                $scope.list = data;
            }
            //]]>
        </script>
        <div ng-app>
            <div ng-controller=”ListCtrl”>
                <ul>
                    <li ng-repeat=”item in list”>
                        {{ item.title }}
                    </li>
                </ul>
            </div>
        </div>
    </div>

Let’s break it down.

        <div ng-app>
            <div ng-controller=”ListCtrl”>
                <ul>
                    <li ng-repeat=”item in list”>
                        {{ item.title }}
                    </li>
                </ul>
            </div>
        </div>

The “ng-controller” defines the initial scope with methods to control behavior within the scope. “ng-repeat”, “item in list”, acts the <asp:Repeater> as it loops through the list provided and outputs, using mustache tags, values. Hence the goal is to data bind the list of items from Sitecore to the “list”. This is accomplished by first getting the list of items, then serializing it to JSON and storing the list within the hidden input field of ID “ListCtrlData”.

        public class ChildItems
        {
            public string title { get; set; }
        }
        private JavaScriptSerializer serializer = new JavaScriptSerializer();
        protected void Page_Load(object sender, EventArgs e)
        {
            Item currentItem = Sitecore.Context.Item;
            List<Item> descendants = currentItem.GetChildren().Where(i => i.TemplateName == “Destination Category”).ToList();
            List<ChildItems> children = new List<ChildItems>();
            if (descendants != null)
            {
                foreach (Item item in descendants)
                {
                    if (item != null)
                    {
                        ChildItems childItems = new ChildItems();
                        if (item.Fields["Title"] != null)
                        {
                            childItems.title = item.Fields["Title"].ToString();
                        }
                        children.Add(childItems);
                    }
                }
                ListCtrlData.Value = serializer.Serialize(children);
            }
        }

I won’t go into details about getting items from Sitecore. Let’s assume the list of items from Sitecore has been successfully added to a list of child items, List <ChildItems> children. The next step is to serialize the list to the hidden input, taken care of on the line below.

ListCtrlData.Value = serializer.Serialize(children);

Now that we have our json string within the “ListCtrlData” hidden input, we can pass the value to the “list” within the “ListCtrl” controller in AngularJS.

        <script type=”text/javascript”>
            //<![CDATA[
            var data = $('.list-data input[type=hidden]‘).val(); // Get serialized Value
            data = JSON.parse(data); // Parse Serialized Value
            //]]>
        </script>

After getting the serialized data, data, we need to parse it with JSON in order to convert the data to a JavaScript Object. Next we create a function for our “ListCtrl” controller within which we will data bind the data object to the “ng-repeater”.

function ListCtrl($scope) {
            $scope.list = data; // Databind data to the list.
       }

The data object ends up looking something like:

[
                {"title": “Item A Title”}
                {"title": “Item B Title”}
                {"title": “Item C Title”}
                {"title": “Item D Title”}
                {"title": “Item E Title”}
]

Hence the output ends up being:

Item A Title

Item B Title

Item C Title

Item D Title

Item E Title

 Conclusions

 AngularJS can be integrated with Sitecore but it takes a few additional steps to convert the data source to JSON then data bind the data to an AngularJS control. This can be useful when creating AJAX oriented modules or mini-apps within a Sitecore site, but I wouldn’t recommend using it for the entire implementation at the moment. I know most developers, especially backend developers, are terrified of a site being entirely JAVASCRIPT; however, I would encourage developers to explore more on integrating AngularJS with any Back End language.  It may be worthwhile.

For more info, visit http://angularjs.org/

 Download example files:

list

list_ascx

Read More Comments


In the Early Days of CMS

In the early days of Web Content Management Systems (CMS), there was a nice man on the sales team who’d once asked me: “Jeremy, why do you developers hate every CMS?” The answer was simple but nuanced: at the time, the platforms did not speak to us as developers.

There were plenty of CMS platforms out there, though most would force a developer into using esoteric patterns which were contrary to the way that a problem would be approached if it were a fully custom solution; contrary to what we knew to be the best way. As well, many of them came with large libraries of pre-built controls. At first glance this sounds like a good thing; however, after the world has seen the same control countless times over, something a little different is often required. Hence the problem: primarily, developers found themselves in situations where the pre-built controls–that were supposed to save them time–were of no use. Solutions often had to be built from scratch.

Ultimately, many of the CMS platforms boiled down to frustrating systems with time-savers which saved no time at all. It’s no wonder that the development team cringed every time a new platform came onto the scene.

After a while, we acclimated. We learned the patterns and they became second nature to us. We would play nice in the sandbox with them, but we didn’t have to like them. And then an interesting thing happened: we evaluated Sitecore for the first time. Initially we had a difficult time understanding it; it seemed quite foreign. One was left with the inevitable question: “how do I create a page?”

Following the developer training, it quickly became clear why we were having a difficult time: it did not behave like the CMS platforms to which we were accustomed. It was abstract and followed object-oriented practices. There were a few “ah-ha” moments that lead us to realize exactly how powerful the Sitecore CMS platform was. It would let us do anything as long as it was properly tied back to the CMS API; not to mention that it’s quick to get out of the way when required. Add in a proper inheritance model and you have a platform with far more flexibility and re-usability than any CMS platform that had been evaluated to date.

When explaining something intangible and abstract, I often like to relate it to something tangible. The early page-based CMS platforms were similar to Lincoln Logs®: they gave a pretty good indication as to how they should be assembled and a project could be built quite quickly. An abstract CMS, like Sitecore, is more akin to a ball of clay: it doesn’t tell you what it’s supposed to be or what form it is supposed to take. One thing is undeniable: so much more can be made with a ball of clay than could be built with Lincoln Logs®.

CMS platforms have certainly come a long way.

Read More Comments


EPiServer North American Partner Summit Wrap-up – A look at EPiServer 7

I had the pleasure to attend the North American Partner Summit for EPiServer in Chicago, Illinois on July 31. The two day event provided a unique opportunity for EPiServer partners to share insight on the latest developments in the market, but more importantly, it offered a preview of the upcoming release of EPiServer 7, set to launch in the fourth quarter of this year.

EPiServer is dropping the “CMS” label when referring to their flagship product, instead choosing to present their products as a platform. There were more than a few technical sessions which laid out these changes to architecture, most of which provided a bundle of new features for developers:

  • Strongly typed page models
  • ASP.NET MVC templating support
  • Built-in support for multiple channels
  • Reusable content “Blocks”
  • A new Add-on Store

These things all sound great to web developers, but part of our job is to look at these new technical features, and find out exactly what it will mean to our customers as they move in to utilizing these new products.

So, what do these new features mean to content editors?

Content Reuse: Write once, use it where you need it.

One of the notable changes in EPiServer 7 is a concentration on multi-channel. EPiServer had previously supported multi-device options via their Mobile Pack, which was a great offering to quickly build mobile sites off of your existing content.

They’ve gone one step further and built multi-device support right into the interface for content editors. As we write content, we want to ensure that we can reuse that content between traditional web browsers, and via mobile content. Developers will now be able to create multiple templates for each page type, and customize how users see content in these different templates. For editors, this means having the ability to preview content in each channel from within the CMS with a few clicks.

EPiServer 7 Preview

Less Teaching, More Instincts

EPiServer 7 brings a new administrative interface that puts the focus clearly on one thing:

Content on the page.

What does this mean? It means that the interface focuses the editor on the preview of the page at all times. See content you want to edit? Click directly on the content, and an editor slides out to allow that property to be edited. Click Save, and the editor slides back to the side of the screen, revealing the changes in the preview. Forgot to click save? That’s okay – EPiServer has saved it for you. Want to undo/redo your changes? That’s built in as well.

Content is only judged by how it’s seen on the page. There’s no doubt it influences what we publish, and we should work in an interface that helps us think in that mentality when editing content.

Don’t worry: As existing editors, the pieces you are accustomed to are still around: Pages are still managed in the Page Tree, and text is still edited in WYSIWYG editors, but these elements slide out of the way once editing is complete. Don’t like this new contextual interface? Pin these panels to their usual areas, or edit properties all on one page just as you did in EPiServer 6. The best of both worlds.

More Flexibility in Layout

EPiServer 7 introduces a new concept to the base CMS – Blocks. Although this feature is new to the CMS, it previously appeared as an add-on called EPiServer Composer. Blocks allow content editors to define reusable chunks of content that they can place in predefined areas of templates, such as sidebars. In addition, developers can create blocks that allow significant customization in layout. This will provide increased flexibility as content editors can stretch the use of existing templates by supplementing their design with Layout Blocks.

Don’t like the large content area on a landing page? No need to have a developer create an entirely new template – just have them create a Layout Block to customize the existing template. As a result, content editors will have less template overload and more customization.

When Blocks are created, they are done so globally. If you edit a specific instance of a block, it’s updated everywhere you’ve used it. As an added bonus, these blocks also support the multi-channel rendering I mentioned above, allowing them to be adaptive depending on device. Want sidebar content to display differently in your mobile template? That’s baked in.

Hopefully this gives content editors a real insight into how we think at agencyQ in terms of product releases, and we’re excited to see how these new features will benefit our clients in the future. For now, developers can download a preview of EPiServer 7 and see the changes first hand.

Read More Comments


Considering Sitecore? Take Note of Recent Changes

By Wyatt Queener, Vice President, Strategy

July was a month full of big announcements for Q partner and WCM leader, Sitecore. While Sitecore continues to follow a flexible size-based model for its CMS solution, the company announced changes to its North American pricing model on July 1. Sitecore also announced the launch of the App Center, an online marketplace of on-demand applications, services, and integration solutions developed for Sitecore’s Customer Engagement Platform. According to Sitecore, the App Center will serve as an “ecosystem of pluggable cloud applications [that] will include email marketing, social media monitoring, Windows Azure hosting, Search Engine Optimization (SEO), translation and web compliance.” These recent changes align with the company’s ongoing push to offer more robust analytic, marketing and customer engagement capabilities in addition to content management, raising the bar in the web content management (WCM) space.

Read More Comments