Umbraco – 6 Tips for Version 4

Sunday, December 4th, 2011

Although it has been quite some time since I have worked with Umbraco, it always has a place in my heart, primarily because it’s Microsoft Technologies based, and, since it’s open source, it has unlimited potential.

Umbraco is on to Version 5, Beta 1, and is about to get a full release very soon. Every user of Umbraco is looking forward to its release since Version 5 is a ground-up rebuild on top of ASP.net MVC 3. We will talk about all its great new features soon.

Meanwhile, as we look forward to the new release of Umbraco, it is worth noting that it is not going to entirely replace old version, but will co-exist for at least a couple of years, as the migration from V4 to V5 is not going to be easy.

These few tips are for those who are still on V4, but looking to make the move to V5:

1. “A potentially dangerous Request.Form value was detected” when updating content with HTML tags – most of the time rich text box for the authors and end up getting this error. This error has nothing to do with Umbraco, but .Net frameworks trying to validate the input and to protect your site from cross-site scripting. So by making the validateRequest=”false” and setting requestValidationMode to 2.0 helps. Also, notice the maxRequestlength, the default value is 4096kb, so if you want to increase the size to upload large files, make sure to change it to different value.

2. Additionally, if you are trying to upload a large zip file in the media section, you may get “Maximum request length exceeded, error.” If this occurs, increase the above property in web.config file.

3. If large contour forms fail to save: Increase the maxJsonLength to whatever is needed, by default it’s 4096kb.

4. Exporting a Umbraco Contour form does not export the workflow so you will have to do it manually.

5. To add the Author editable dropdown with Text/Value: Create a form with two fields; create a node for holding these forms, and make sure it’s hidden from navigation; now program to get the nodes and the text/value and populate the dropdown – it becomes author-able as the author can update the text/value in the form.

ddl.Items.Add(new ListItem("Select...", ""));
var node = new Node(1000);
var childrenNodes = node.Children;
foreach (Node n in childrenNodes)
{
  ddl.Items.Add(new ListItem(n.GetProperty("Text").Value, n.GetProperty("Value").Value));
}

6. To get the dropdown text/value created from the Umbraco interface

SortedList ddDataList = umbraco.cms.businesslogic.datatype.PreValues.GetPreValues(1000);
foreach (umbraco.cms.businesslogic.datatype.PreValue pv in ddDataList.GetValueList())
{
  ddl.Items.Add(new ListItem(pv.Value, pv.Id.ToString()));
}

jQuery Validations Plugin – Part II

Saturday, December 3rd, 2011

In Part I of this blog, we saw how to get started with jQuery Validations; here, let’s focus on adding custom methods, rules, messages, other type of validations.

<div class="error" style="display:none;">
      <span></span><br clear="all"/>
</div>
<label> First Name *</label>
<input type="text" id="txtFirstName" class="required"/>
<label> Last Name *</label>
<input type="text" id="txtLastName" class="required"/>
<label> Email Address *</label>
<input type="text" id="txtEmail" class="required email"/>
<input type="hidden" id="hdn" class="required"/>
<SELECT NAME="ddlCountry" id="ddlCountry" class="required">
<OPTION VALUE="">Select…</OPTION>
<OPTION VALUE="">India</OPTION>
<OPTION VALUE="">US</OPTION>
<OPTION VALUE="">UK</OPTION>
</SELECT>
<SELECT NAME="ddlState" id=" ddlState " class="required">
<OPTION VALUE="-1">Select…</OPTION>
<OPTION VALUE="">IL</OPTION>
<OPTION VALUE="">ID</OPTION>
</SELECT>

<input type="button" value="Cancel" class=”cancel”>
<input type="submit" value="Submit">

Now for the JavaScript
<script type="text/javascript">
$(document).ready(function(){

	 jQuery.validator.addMethod("ddlStateReqd", function(value, element) {
			if ($('#ddlState').val()=='-1') {
				return false;
			}
			else {
				return true;
			}
	    }, "");

jQuery.validator.messages.required = "";
    $("form").validate({
    	errorLabelContainer: $("div.error"),
        invalidHandler: function(e, validator) {
            var errors = validator.numberOfInvalids();
            if (errors) {
                var message = 'Following fields are required';
                $("div.error span").html(message);
                $("div.error").show();
            } else {
                $("div.error").hide();
            }
        },
        onkeyup: false,
        submitHandler: function() {
            $('div.error').hide();
		//do post of any other functionality
        },
  messages: {
        	txtEmail: {
                required: "Email should be entered ",
                email: "Please enter a valid email address "
            }},
        debug:true
    });

});
</script>

1. class=”cancel” and just by adding this class the jQuery validations will not be triggered.
2. Class=”email”, will do the email validations, notice the messages for the control txtEmail with the classes “required” and “email”
3. ddlCountry is validated automatically as it does not have the value for the first item, just by keep the empty value for the dropdown it gets validated automatically
4. ddlState we add the custom method as it has the value of “-1” for the first item. Notice jQuery.validator.addMethod, so we can add any custom methods for complex validations.
5. Check the hidden filed, though its class is required, it is not validated as its hidden.
6. With a combinations of jQuery selectors, we can hide/show multiple controls, add/remove attributes, all by just few lines of code

jQuery Validations Plugin – Part I

Saturday, December 3rd, 2011

Most of the time, I have used jQuery for its good user interface and great user experience, be it dialog box, accordion, carousel, auto complete, date picker, Ajax updates, or shadow box. I am so fascinated by it, in fact, that I want to use jQuery more and more in the applications I work with.

From the time I first started using jQuery, I had a soft spot for it — especially since using plain JavaScript has always been a nightmare for more complex tasks, which jQuery handles very elegantly.

One of the forms I recently worked on was very complex — with more than 600 controls (don’t ask me who would fill out such a gigantic form…) — and obviously had many validations and many conditions where some controls would be visible/invisible, enabled/disabled, or required/not required.

The more I thought about it, it started to seem that I would end up writing bulky, ugly JavaScript — but then it occurred to me, why not use the jQuery Validations plugin? Using it would make the code more manageable, complete the job with just a few lines of smart code, and reduce some kbs during page download. It would keep the html clean and compact. In addition, it can be implemented with any language — ASP.Net, Java, php, or, in my case, the Adobe CQ5 Web Experience Management (WEM) system.
What more is required?

The jQuery Validations Plugin makes client-side validations very simple, is customizable, has default in-built validations for email, and an API for writing your own methods for seamless integration. It also has its own default messages, which can be overridden and are available in many languages.

As with any other jQuery plugins, all you need to do is include the plugin file and you are ready to go. In this case, it is: “jquery.validate.min.js”

Let’s see how a very simple validation will work, where we want to validate if the “First Name” and “Last Name” has been entered:
Notice the class=”required” in the below html

<label> First Name *</label>
<input id="txtFirstName" class="required" type="text" />
<label> Last Name *</label>
<input id="txtLastName" class="required" type="text" />
<input type="submit" value="Submit" />

Now for the JavaScript
<script type="text/javascript">
$(document).ready(function(){
jQuery.validator.messages.required = "";
    $("form").validate({
    	errorLabelContainer: $("div.error"),
        invalidHandler: function(e, validator) {
            var errors = validator.numberOfInvalids();
            if (errors) {
                var message = 'Following fields are required';
                $("div.error span").html(message);
                $("div.error").show();
            } else {
                $("div.error").hide();
            }
        },
        onkeyup: false,
        submitHandler: function() {
            $('div.error').hide();
		//do post of any other functionality
        }
        debug:true
    });

});
</script>

We are all set! Now, if your two fields or 200 fields, most of this is taken care of automatically. If you want to add some more complex validations, we can add custom methods. The beauty of jQuery is its available selectors, which allows us to select multiple controls together and apply the rules in one go.

In part two of this series, let’s see how we can customize the messages for individual fields, add custom methods, and try some more validations with dropdowns, email etc

You can download the plugin here  and demos and examples available here

Groovy in session at Über Conf 2011

Friday, July 22nd, 2011

Denver, CO July 12-15, 2011

The best possible outcome for a developer attending a software conference is to leave feeling inspired and invigorated — anxious to explore new tools & technologies while gaining no more than 10 pounds in cookie-weight. NFJS had assembled an impressive variety of sessions, but I opted to focus on those related to the Groovy ecosystem, plus a few Scala and NoSQL sessions to escape my comfort zone. I’ll further limit my observations below to three Groovy-based tools in particular — Spock, Geb, and Gradle.

I was especially anxious to attend a few sessions on Spock, a testing framework for Java and Groovy code created by Peter Niederwieser of Gradleware. I was already familiar with the framework from prior project work, but I hoped to gain a more complete understanding of the tool and learn some best practices. The conference offered a unique opportunity to sit in on a few sessions with the man himself, and it was tremendously helpful to see some concrete examples of the slick, highly expressive Groovy DSL that powers the framework. For a “pet project”, as Peter describes it, Spock continues to impress me with it’s maturity and excellent documentation. Peter also posted his code and slides from the session on his GitHub page — check them out here:

https://github.com/spockframework/spock-uberconf-2011

Peter also led a session on Geb (pronounced “jeb”), a browser automation tool combining WebDriver and Groovy (pronounced “jroovy” in this context?) with a jQuery-like DOM selector syntax. This was my first introduction to Geb, but I’m excited to wire it in with Adobe CQ5 projects for integration testing; it’s use of Page and Module objects to drive content testing aligns perfectly with CQ5′s page/component models. Interestingly, Peter noted that Luke Daley, the creator of Geb, is a co-worker at Gradleware (and a Spock committer), which bodes well for the future of these relevantly young frameworks. Matt Stine followed with a session on using Geb with Spock to automate requirements, which helped to clarify the mapping from user stories and acceptance tests to Spock specifications. Likewise, the code and slides from these sessions have been posted to Peter and Matt’s respective GitHub pages:

https://github.com/geb/geb-uberconf-2011-example
https://github.com/mstine/exec-specs-geb-spock

A common theme across these presentations was the extensive use of Gradle. Gradle is a build automation tool that utilizes a Groovy DSL rather than XML (e.g. Maven, Ant) for configuring build files. The expressiveness and dynamic nature of the Groovy language allows for a concise syntax, while Groovy’s scripting features enable the addition of functional blocks to eliminate redundant configuration elements. For all the success I’ve had using Maven, I’ve always found it to be a necessary evil — the fragility of XML across multi-module projects causes a lot of headaches, and it’s taken numerous projects to solidify our archetypes. Gradle’s convention-over-configuration approach would be a nice first step in reducing complexity and allowing us to focus on project-specific concerns more quickly. Look for enterprise Gradle adoptions to increase as the already-comprehensive set of plugins (Java, Scala, Android, etc.) continues to expand.

Judging by the attendance of these sessions at Über Conf, there is a tremendous enthusiasm for these frameworks among the Java and Groovy communities — it’s exciting to learn about new tools that promise to make life easier and more productive for Java developers.

In related news, Groovy 1.8.1 and 1.9-beta-1 were released yesterday.

Adobe Omniture and CQ WCM

Tuesday, July 5th, 2011

Analyze your authoring, author your analytics.

I’m excited about this integration we’re doing right now, bringing Omniture analytics into their world of content management with CQ. I realize this blog gets readers of many backgrounds, so let’s clarify:

Omniture provides a rich suite of reports and analytics based on a wide spectrum of data, ranging from a simple anonymous page view to an authenticated user’s actions and page events.

CQ WCM provides a highly configurable and flexible web authoring experience for the non-tech savvy.

Integrated

When wired together, web site administrators bring CQ’s level of flexibility and control into their analytics game.  With Omniture in your CQ installation, you’re not only editing your analytics implementation on your site without seeing code, but you’re re-authoring content based on effective, custom tailored metrics about that content.

We’re doing this by building a CQ component specifically for the customer’s Omniture requirements. This component is then included on every page template the business wishes to track. Based on the reports Omniture shows them, they can immediately start making changes to their content, or even changes to their Omniture integrations itself. For very simplistic example, imagine turning tracking on and off for a given page because you feel it’s skewing your reports. You would accomplish this with the click of a button from within CQ rather than hitting source code and removing JavaScript.

We’re also building Omniture into existing components to capture events related to them. For example, we’ve got a “video” component that authors drag onto a screen, allowing users to view a video there. By wiring Omniture in, we’re now capturing data each time the user watches the video. This same concept can be built anywhere, capturing events. How many anonymous users are filling out the mailing list form each month? How many authenticated users are searching the FAQ database? What percentage are new users? It’s fun stuff to know, but also carries great utility when the Omniture integration is planned for and designed well.

Maintenance

One of the many beauties of a Web Content Management system like CQ is source code organization. I’ve worked on a lot of projects from very small to very big enterprise, and I can tell you I’ve seen some crazy spider-webs of analytics code dispersed throughout many source files. I once picked up a PHP project where the previous developer had copied and pasted analytics code onto each template in the site, and then modified each pasting slightly to fit the needs there. It got ugly over time. In CQ, componentizing and modularizing it all into one encapsulated and controlled place is a real relief and will surely be a time saver as the customer’s intentions with Omniture mature and grow.

Groovy web console for Adobe CQ5 and JCR

Monday, June 20th, 2011

I’ve been using Groovy as much as possible on CQ5 projects, mainly for building supplementary tools and running scripts against the content repository (JCR). The underlying Sling framework provides built-in Groovy support, so it’s a simple matter of uploading the latest Groovy jar to your local server (via the Felix console) to tap into the dynamic, functionally-styled, syntactically-sugary goodness of Groovy on your CQ5 instance.

Inspired by Guillaume Laforge’s Groovy web console, I thought it would be fun to integrate a similar tool with CQ5 to provide quick and easy access to the JCR. The console would provide a simple scripting interface for content manipulation, searches, recursive functions, and other common tasks that crop up during project work (and often result in tedious slogging through CRX’s Content Explorer). Sling’s existing Groovy support made this fairly simple; after adding a few CQ-specific meta-methods and shamelessly lifting Guillaume’s hard work on the UI, it was rolling.

Here are a few common scenarios where I’ve used the console:

• A template path or component resource type used on numerous pages has changed. Recursively crawl the content structure to update all instances with the new property value(s).
• Content analysis – build a mapping of all templates and page paths or find single instances of a template, component, or individual property value.
• Remove a large set of pages or nodes meeting a certain criteria (as opposed to manual deletion through the WCM Admin tool or Content Explorer).

For installation instructions (or to fork the source) and sample Groovy scripts, see the CITYTECH GitHub page here.

Alternatively, the console package can be downloaded below and installed directly without building via Maven.

groovyconsole-1.1.zip

Major Update for Amazon Route 53

Wednesday, May 25th, 2011

Great news for anyone utilizing Amazon’s Elastic Load Balancer (ELB) service to host websites. Amazon Web Services has released an update for their DNS service, Route 53, that allows clients to alias their ELB to a zone file.

A common complaint for those who currently utilize ELB’s to front a website hosted on EC2 is the inability to resolve your website in DNS without a subdomain prefix such as www.example.com. This is due to AWS ELBs not having a static IP address you can create an A-Record entry, you must use a CNAME.

Now your problems are solved! (almost.) If you are using Amazon’s Route 53 DNS service you can now create an alias entry which allows you to resolve your domain without a subdomain. If you do not use Route 53 you will need to utilize a DNS service that provides 301 redirects.

In addition to a 60 second TTL on these alias DNS entries, which provides a quick turn-around should you change your ELB, Route 53 now provides for weighted-round-robin in load-balancing. Using this you can setup for various scenarios such as one ELB with larger instances behind it handling more traffic than another ELB fronting smaller instances.

CITYTECH CQ5 Managed Services

Wednesday, May 11th, 2011

We have seen some great interest our CQ5 Managed Services offering recently. There are a number of great factors we see contributing to this increased interest including Adobe’s acquisition of the CQ5, marketing & communications divisions demanding higher degree of agility from their service providers, and our timeliness to a proven solution to market can’t be overlooked. CITYTECH has assisted [...]

Managing Network Availability in a Phonegap Application

Wednesday, May 11th, 2011

I have just completed my first distributed Android tablet application. One of the main requirements of the application was for it to run in both offline and online mode. When starting out I assumed that I would just check to see if there was network availability using the following code that I got from the Phonegap site.

function reachableCallback(reachability) {
        // There is no consistency on the format of reachability
        var networkState = reachability.code || reachability;

        var states = {};
        states[NetworkStatus.NOT_REACHABLE]                      = 'No network connection';
        states[NetworkStatus.REACHABLE_VIA_CARRIER_DATA_NETWORK] = 'Carrier data connection';
        states[NetworkStatus.REACHABLE_VIA_WIFI_NETWORK]         = 'WiFi connection';

        alert('Connection type: ' + states[networkState]);
    }

What I soon found out is that this did not cover all of the scenarios. There is a third scenario that occurs which is much harder to identify. There can be a network connection but the strength of that signal can be very low. When connecting to the rest services using JQuery we would set the time out on the connection to 20 seconds, but what we found is that if the device was getting data back at all it would continue to leave the connection open even past the 20 seconds. In order to keep the application moving I needed to identify this slow connection and run the application in offline mode.

The following code calls out to an image that is the average size of the service responses that our mobile application calls out to. I combine that with a javascript timeout that stops the processing of the success callback if the timeout occurs. Check out the code below.

function(onlineFunction,offlineFunction)
{
	var timeOutInteger = null;
	var timeOutOccured = false;

	  var net_callback = function(reachability) {

		// There is no consistency on the format of reachability
		    var networkState = reachability.code || reachability;

		    var states = {};
		    states[NetworkStatus.NOT_REACHABLE]                      = 'No network connection';
		    states[NetworkStatus.REACHABLE_VIA_CARRIER_DATA_NETWORK] = 'Carrier data connection';
		    states[NetworkStatus.REACHABLE_VIA_WIFI_NETWORK]         = 'WiFi connection';

		    if(states[networkState] == 'No network connection')
		    {
		    	if(!timeOutOccured){
		    		clearTimeout(timeOutInteger);
			    	offlineFunction();
		    	}
		    }
		    else
		    {
		    	var url = "http://yourservicehere/LeadWeight.jpg";

		    		$.ajax({ type: "GET",
		    				data: "{}",
		    				url: url,
		    				cache: false,
		    				timeout: 20 * 1000,
				    		success:function(response)
				    		{
				    			if(!timeOutOccured){
							    	clearTimeout(timeOutInteger);
						    		onlineFunction();
						    	}
				    		},
				    		error:function(xhr, textStatus, errorThrown) {
				    			if(!timeOutOccured){
				    				clearTimeout(timeOutInteger);
						    		offlineFunction();
						    	}
				    		}
		    			});
		    }
	  };

	  navigator.network.isReachable("www.google.com", net_callback);

  	  timeOutInteger = setTimeout( function() {
  		  		timeOutOccured = true;
                                offlineFunction();
                             }, 20 * 1000 );
}

The function is a little hard to read, but it takes two methods as arguments. It takes an online function and an offline function which are pretty self explanatory. The first code that runs is actually at the bottom of the function. I first make a call to the isReachable() function and assign the callback. This is an asynchronous function that waits for a callback. Immediately after kicking off the isReachable call I call the javascript setTimeout function. It takes 2 arguments. A function that fires if the timeout occurs and the actual timeout. The setTimeout function returns an integer that can be used to cancel the timeout. I store this integer in a method level variable so that we can cancel the time out in the call back. If the time out occurs I set the method level variable timeOutOccured to true. This variable is used throughout the isReachable callback to check to see if the timeout has already occurred. Since both of these functions are asynchronous the variable helps us stop processing when the time out occurs during mid processing. As we explore the isReachable callback we will see that variable being used.

Inside the isReachable callback I first check to see if there is a connection. If there is not a wifi or carrier connection I cancel the timeout and run the offline function. The next case is the more complicated case. If the isReachable callback returns with a connection, I then attempt to download an image that is located on the server where I my web services reside. I use JQuery to make the ajax call. If the call to download the image comes back successful I check to make sure that the timeout hasn’t already occurred, I cancel the timeout and then run the online function. If the ajax call comes back with an error I check to make sure the timeout hasn’t occurred, cancel the timeout and run the offline function.

This method could be susceptible to some timing issues, but for the most part has held up very well and allowed our Android + Phonegap application to run successfully in both online and offline mode. In the application I have pulled out the timeout into a configuration variable, but for the purposes of this post I have it just hard coded into the method.

Any comments, suggestions or ways to make this method even better are welcome!

Google’s App Engine Changes Pricing Model

Tuesday, May 10th, 2011

Today Google’s Platform-as-a-Service (PaaS), the Google App Engine, announced they will be taking the GAE and the GAE4B (Business-class) out of “preview.”

This is Google parlance for it’s time to start making money.

As an IT services firm we have often had to overlook the GAE for projects due to the relatively narrow-scope of software design architecture the GAE is built to accommodate. The announcement today is a welcome change for Google’s PaaS. Much of the business-class features found in the GAE4B are being rolled into GAE and enforced SLAs.

The downside to all of this is in order to provide the enhanced functionality Google is changing the pricing model of GAE dramatically making it very similar to the pay-for-what-you-use model Amazon Web Services employs. Free apps will now be more restricted in their free resources and paid apps now have a monthly fee on top of usage fees.

This change in pricing model doesn’t go into effect until later this year but it brings a warning for all companies looking to deploy applications to the cloud. Providers can change their pricing model at any time and you must be prepared for it. Unlike on-premise software where a change in pricing often results in either sticking with a current software version or hardware appliance and foregoing upgrades while alternative are considered, cloud vendors may not give you such latitude.

We have always believed strongly in having a cloud deployment strategy that takes vendor migration into consideration. If you haven’t considered a multi-vendor cloud strategy then perhaps now is the time.

Welcome to CITYTECH Blogs