For a long time I’ve touted the beauty of Firefox’s Firebug plug in. It was revolutionary for JavaScript developers. If you weren’t using it, you weren’t doing it right. After the last release it was time to upgrade IE to version 8, and one of the biggest things I wanted to check out were the new developer tools. I’ve spent some time using them this morning and my first impression is pure elation.

Anyone that has written JavaScript knows how difficult it can be making that code work in every browser. Debugging your code in those browsers was painful without tools like Firebug. Still, all too often you’d get everything working really well only to find that IE wasn’t happy with your work. I’d say this has caused me to go bald, but that happened way too long ago.

The new IE Developer Tools are simply amazing. They’ve incorporated nearly everything that Firebug offered (it is missing hover over variables) and I think they’ve improved on the user interface. Plus, Firebug development has slacked in keeping up with Firefox upgrades and still has some very annoying bugs. I am contemplating switching over to IE8 for my primary JavaScript development environment and I honestly am surprised I’m writing that.

I urge each of you that follow this section of the blog to try out the new tools for yourself.

Popularity: 31%

Resizing a page is a capability that so many project builders have requested. Generally, there is a better alternative, but if you feel this is the only solution we’ve built a powerful set of document actions that will handle page resizing for you.

I’ve created a demo project that allows for width and height inputs. This is just one example of the 4 types of document actions.

There are 4 different page resize document actions: ResizePage, ResizeWidth, ResizeHeight, ResizePageByPercentage. The demo focuses on the ResizePage action, but the principles are the same.

The first thing to consider is that these actions require proper measurement values. For example, you can define a page size with the following values: Width = 5in, Height = 3in. If the input is not in the proper measurement format an error will be thrown. That’s why the demo uses a dropdown selection. That makes enforcement of those measurement formats easy.

Another major factor to consider is that these actions ONLY resize the page. Not the objects on the page. If that’s an issue you will have to ensure you’ve set all your project elements to flex appropriately. In the demo each element has many flex and copy fit rules applied. It will render correctly with any dimensions that are chosen.

I’ll repeat that these actions are most likely never the best solution for your products. They have a great probability of formatting your output incorrectly and without warning. The more content on a document the more likely it is there will be problems. I almost always recommend using multiple projects and or variable documents.

I have set up a demo product named “Documents Actions ResizePage”. Go to the site to see it in action, and also download the project files I created.

Popularity: 85%

As I sit here watching out my windows and seeing snow fall, in early November, I can’t but think of the “The Ice Bowl”. This obviously lead me to think the NFL’s trademark rights and how that might need to be controlled in their marketing and branding world. I’ll use that as an example today. The basic premise is that the ™ symbol should be inserted after the letters “NFL” are printed on the page.

I’ll use a combination of 2 different document actions (ReplaceText, Superscript). The project requires only one variable: Text. Text must be set as Formatted Text kind.

First, I’ll create the ReplaceText action. This action does precisely what the name suggests. It takes a character set to find, and when found replaces that text with another set of characters. In this case I’m looking for “NFL” so that I can replace it with NFL™. Here is the document action definition:

Method: ReplaceText
Arguments:
SpecName (contstant) = Text
OldCharacter (Constant) = NFL
NewCharacters (constant) = NFL™

Secondly, I’ll demonstrate the use of the Superscript action. While it’s not necessary in this example I wanted to show how it can be used, even in conjunction with another document action. Here is the document action definition:

Method: Superscript
Arguments:
SpecName (constant) = Text
Character (constant) = ™

Pretty simple example, but one that I think translates into real world project needs. I suggest you follow this up by reading on the GetPositionIndex action as well as Suffix and Prefix. They are closely related to the actions discussed in this post.

This document action chaining example can be views and downloaded at the demo site. The product is named “Documents Actions Calculations”.

Popularity: 86%

Well, document actions have been live for over a week now. Have you examined the new capabilities? The benefits are worth the learning curve. You’ll find yourself so much more productive, creative, and responsive to your customers. I’m starting this series on document actions to help with the learning curve and hopefully open the creative process in your own world.

Today’s demo of SelectImage will combine capabilities of some spec form scripting along with the document action. I’m trying to cover a scenario I think is widely used throughout Four51.

The idea is to present a dropdown of choices to the user. Once a choice is made an in-form preview of the image will be displayed. Once the user saves the variant the SelectImage document action will retrieve the correct image for rendering. Utilizing the document action eliminates the need to create a cumbersome rule, and I’ll show you how to set the project up in a way that allows you to quickly add new options without having to edit your project and template files.

Let’s start with the template file. I’m going to keep the demo simple by only placing a new image element in the center of the template. Then, using the element properties I’m going to give it a name: Jersey. The name property is available in the “Info” tab of the properties window.

Next, I want to create two variables in the project file: ImageChoice, Images. Both variables are constant plain text types.

The last task within the project files is to create the jobs and define the document action. I’ll only cover the arguments because you should be familiar with adding a document action by now. The SelectImage action has 4 arguments: ImageElement, Case, SourceArray, ErrorMessage.

• The ImageElement is looking for the name of the element that will get the image assignment. Remember above that we named the element “Jersey”, so we’ll just keep the value type Constant and type “Jersey” into the vaue field.
• The Case argument is the value indicator. Meaning that the selection value should be applied to this argument. In our demo that value is the ImageChoice variable, so I set the Value Type to Variable and then select the variable from the list.
• The SourceArray is the array of image choices. They are essentially key value pairs. There is a key (dropdown text) and a value (image) in each pair. The keys should exist in our dropdown options and the values should match images in the project image folder. I’m going to choose Variable Value Type and select the Images variable from the list as the argument value. This is what will allow you to add new options without needing to edit your project files.

Now that our project is complete and we’ve created the product on Four51, let’s set up the spec form and script.

First, the variable import for ImageChoice will be defaulted as text, but we want to make it a selection and add our choices: Green Bay, Indianapolis, Tennessee. For ease of reading I’m setting the Image variable to have 10 lines and 5000 characters. I’m also setting the default to the SourceArray value. This is the key to the update without touching the project file.
{Green Bay=gbhome.jpg}
{Indianapolis=indyhome.jpg}
{Tennessee=tenhome.jpg}

The spec form has little change to the default. I’m basically adding an image html element (id = preview) for the in-form preview:

ImageChoice		[[ImageChoice]]
Images		[[Images]]


Lastly, we’ll write our script for previewing the image. You’ve seen this before so I won’t go into great detail:


var preview = get('preview');
var image_choice = spec['ImageChoice'];
var path = "http://www.four51.com/Themes/Custom/de891832-01b5-4c5d-84da-b4f85e394864/demo/jerseys/";

var images = {
"Green Bay": "gbhome.jpg",
"Indianapolis": "indyhome.gif",
"Tennessee": "tenhome.jpg"
}

function Display() {
preview.imgSrc(path + images[image_choice.selectedText()]);
}

image_choice.onchange = Display;
image_choice.removeOption(0);
// Normally I'd hide this variable, but I'm leaving it visible for the demo.
//spec['Images'].hide();
Display();


You can see the comment regarding leaving the Images variable visible. I wouldn’t want a customer to see this obviously, but I’m leaving it for the demo.

Now that we’re done setting up the product you can continually add new image options by simply updating the options in the two variable. Your project is equipped to handle that without intervention.

I have set up a demo product named “Documents Actions Select Image“. Go to the site to see it in action, and also download the project files I created.

Popularity: 46%

A recent forum post alerted me to the fact that I had not covered defined drop downs in the blog. I don’t know how I let that slip by. I created them to alleviate some very annoying situations that probably occur too many times to count. Basically, defined drop downs automatically populate the list with a list of companies or states so you don’t have to do it yourself.

As I said above, there are two definitions available: Countries, States. Only those two now because I reference the list we already use in the site, and I couldn’t think of any other consistent lists that are used frequently.

The defined drop downs widget is another of the type that allows you to define it in your HTML instead of scripting. It’s extremely simple to use:
Just create a span element and assign a class name corresponding to the list you want. The default usage displays the full name of the item, but records the abbreviation as the value. For example, Minnesota = MN.

Now, you know it doesn’t end there. We had to add some fanciness and flexibility. You have to use scripting to take advantage of those capabilities.
spec['States'].statedropdown({displayType: "abbr"});
spec['States'].statedropdown.onChange = function() {
alert('You chose: ' + this.selectedText() + ' and the value is: ' + this.selectedValue());
} This code example defines the drop down as a list of states, but the display is the abbreviation rather than the full name. Additionally, whenever an item in chosen in the drop down, the browser will pop up an alert showing what was chosen.

There are additional properties and events available that you can read about in the Spec Form API documentation. You can go to my demo site to find the “Spec Form API Playground.” I’ve added an example of both types of DefinedDropDowns.

Popularity: 14%