IntelliJ 2016.2 and Angular 2 Support

I realized today that the latest update (version 2016.2) for my IDE of choice - IntelliJ IDEA (Ultimate version) - includes additional support for Angular 2:

• A collection of live templates for Angular 2 files such as components and services.
• A better understanding of template syntax.
• The ability to create a new IntelliJ project via the Angular CLI tool.

So I downloaded and installed the update, but that alone wasn't sufficient to access these new features.  Turns out I had never installed the "AngularJS" plugin (I remember coming across it before, just hadn't installed it).

Once I installed that plugin and restarted IntelliJ, I could select File -> New -> Project from the menu tree, and "AngularJS" (for Angular 1 projects) and "Angular CLI" were new options listed under the "Static Web" project option.  I went ahead and chose "Angular CLI", and IntelliJ invoked the global install of Angular CLI on my laptop and executed the "ng-init" command to create the application structure and foundation files for a new Angular 2 project.

Inside the Angular project, I could create a new component using live templates by creating a new empty TypeScript file, hitting Control/Command-J to insert a live template, typing "ng2-component" until it was the selected template and hitting the Tab key.  The template then lets you tab through the update points in the template so you can enter the directive, template, and component names you want.

Very cool, but I think I would probably end up creating my components using Angular CLI from within the Terminal window in the IDE, because the CLI can generate the full set of files for a given component (the TypeScript file, the template HTML file, the CSS file, and the unit test file).  It also looks like the templates that contain code related to routing need updating.

Still, it's always nice when your IDE adds new features to making your coding a little easier.

Quick Tip: Controlling Execution Speed in CFSelenium

When you use Selenium IDE to play back the actions you've recorded on a web page (the clicks, the text input, etc.), you can control the waiting period between the execution of each command using the slider control on the left end of the tool bar:

With CFSelenium, the way that you control the time period between executions is with the setSpeed(string milliseconds) function.  Once you set the execution speed with this function, the time period between executions will remain set at that length until you use setSpeed again.  So you could set the speed once within the setUp() function of your MXUnit test case...

public void function setUp() {
    browserUrl = "http://local.test";
    selenium = new CFSelenium.selenium(browserUrl, "localhost", 4444, "*firefox");
    selenium.start();
    selenium.setTimeout(30000);
    selenium.setSpeed("1000");
}

 

...or you could alter the speed within a test case function...

public void function testFormValidation() {
    selenium.open("blah/index.cfm?event=addEditUser&userId=12");
    selenium.setSpeed("3000");
    //Now Selenium will wait 3 seconds between each of the following command statements
    selenium.type("firstName", "John");
    selenium.type("lastName", "White");
    //Setting the speed back down to 1 second
    selenium.setSpeed("1000");
    ....
}

 

Knowing how to change the speed in CFSelenium is crucial if you're testing any sort of operation that might take a second or two to update the page, like an AJAX call that populates a drop-down box:  if the next command in your test requires that drop-down box to be populated, but CFSelenium tries to run that command before the AJAX call completes, either your test will fail or you'll get an error message from Selenium.  The setSpeed function lets you slow down the execution speed so your AJAX calls have time to do their work before the next step in the test.

ColdFusion Builder 2 Extension That List Keyboard Shortcuts in an Eclipse View Panel

Last night, I posted a simple ColdFusion Builder 2 extension that, when activated, creates an Eclipse view that lists all of the defaut Builder-specific keyboard shortcuts in the current ColdFusion Builder 2 beta.  You can get it from RIAForge at http://cfbshortcutkeys.riaforge.org/.

I created this extension using Sagar Ganatra's list of CF Builder 2 keyboard shortcuts and by looking at how Ray Camden altered the VarScoper extension to display in an Eclipse view (see http://www.adobe.com/devnet/coldfusion/articles/cfb2-extensions.html).  The ability to display extension UIs in an Eclipse view (a movable windowed component, like the built-in Navigator or Outline views) rather than a modal window is a wonderful enhancement in Builder 2.

A few notes about the extension:

• When you open the extension view, you have to click on either the Windows or Mac link to display the proper shortcut list (although the only difference in the shortcuts is that you use either the Ctrl key or the Cmd key).  If there's a way to detect the user's OS automatically, I haven't found it yet (cgi.http_user_agent wasn't useful in this regard).

• It is a static list of the shortcut defaults as they are shipped in Builder 2.  If you change one of these shortcuts in your preferences, the change WILL NOT be reflected in the list.  I looked around to see if the default keyboard shorcuts were stored in a readable file somewhere that the extension could examine and parse, but it looks like that isn't the case:  user-defined and user-modified shortcuts are written to certain configuration files, but the default shortcuts are not exposed in that manner (if someone knows differently, speak up).

• However, the advantage to it being a static list is that you can go ahead and customize the list in your copy of the extension.  If you pay attention to where the extension files are copied to when you install the extension, it's easy enough to go to that location, find the extension folder, and edit the index.cfm file in the extension.  It's a simple file, so it's easy to edit.

Hopefully this extension will be useful to folks who are trying to learn the new shortcuts, as you can use it to put the list right next to your editor window as you work.

UPDATE: per Sam Farmer's suggestion in the comments (thanks, Sam!), I've updated the shortcut to do OS detection using the os.name variable value in the server scope.

Create Wireframe Site Mockups With An Eclipse Plugin (Works in CF Builder Too)

Earlier today, Dan Vega tweeted:

"this is pretty freaking cool, works in ColdFusion Builder! http://wireframesketcher.com/blog"

So I went and checked it out. WireframeSketcher is an Eclipse plug-in that lets you create wireframe page mockups, similar to Balsamiq Mockups.  I download the trial version and took it for a brief spin. You simply create a new blank Screen file and start dragging and dropping page elements from the Palette view (labels, text boxes, tabbed panes, etc.) onto the Screen, resizing and re-positioning as you go. When you're finished, you can export the file as a PNG or a PDF file.

The WireframeSketcher website mentioned that the layout information for each screen was stored as XML data, so the thought crossed my mind that maybe you could feed the XML to a parsing script that could use that data to output actual HTML/CSS. Unfortunately (as I kind of suspected), the positioning of the wireframe elements is achieved with hard-coded x and y pixel coordinates, and it would be hard to translate that into the kind of relative or "in the flow" positioning used on most web pages.

Still, if you want to add a wireframing tool to your toolset and you already use Eclipse or an Eclipse-based IDE (by the way, these guys specifically name Flash Builder and ColdFusion Builder as compatible IDEs, so props to them for being aware of the Adobe tools), this is probably worth checking out. You can try it out for free for at least a week before you get prompted to pay for a license.

Idea: Give Adobe Bolt Collaboration Features

In my last blog post, I suggested that Adobe include a list of CFML community resources in the upcoming Bolt IDE in order to promote the community to isolated developers who might otherwise be unaware of all the resources out there.

After thinking about it a bit more, it occurred to me that maybe Bolt could take it one step further. Instead of simply using Bolt to point developers to the community, have Bolt bring the community to the developer. Build in an RSS viewer that displays the latest ColdFusion posts from Adobe Feeds. Put in a communicator tool so the developer can converse with other CFML programmers via IM or Twitter. Let the developer screen-share their code with other developers both inside and outside of their organization. Integrate geolocation into Bolt and show the developer a list of other Bolt users (and maybe Adobe user groups) that are nearby. Instead of using e-mail and message boards to communicate with CFML developers, Adobe could broadcast any news announcements to all of the Bolt installs, and Bolt users could submit questions to Adobe and other users via discussion forums displayed in a window of the IDE that gets refreshed automatically.

I'll admit, it's a pretty pie-in-the-sky idea. Given that Adobe only has a finite amount of time and resources, I would certainly not want Adobe to leave out any traditional IDE features, the things that allow developers to code quickly and efficiently, in order to take the time to add all of the things I just suggested.

But if they did have a little extra time, I think adding even one or two simple collaboration/informational features would certainly enhance the product, and perhaps set a trend for other IDEs to follow.

Reaching the "Invisible" CFML Programmers

On Monday, Sean Corfield's thoughts on how Adobe MAX 2008 went were published on the Fusion Authority website. One of the events Sean cited in his article was a Birds of a Feather session moderated by Adrian Moreno about bridging the gap between expert/guru CFML developers (the ones most visible in the online CFML community) and "9 to 5" CFML developers.

I don't know the details of what was discussed in that session, but it relates to an issue that crosses my mind every once in a while: how do you reach out to developers when you don't know who or where they are? And, conversely, how do we help these "invisible" developers find (and participate in) the community?

I was a full-time ColdFusion developer for almost two years before I really became aware of the ColdFusion community. My predecessor, to my knowledge, never participated in the CFML community or went to any conferences or user groups, so it never crossed my mind that such resources existed. I don't remember how or when I realized that there was a community of folks with which I could converse about ColdFusion development (though it was probably at CFUnited '05), but the point is is that it wasn't an automatic process.

I think this is an area where Adobe needs to step up and promote the community as part of the overall "ColdFusion package". Every sale of ColdFusion should include a list of CFML community resources and a statement that encourage organizations to share that list with any ColdFusion developers they are aware of. If Adobe is skittish about including links to resources that might disappear over time, at the very least they can include Adobe-sponsored resources like Adobe Feeds or the new Adobe Groups site.

Even that kind of effort might not reach all the CFML developers out there: in some organizations (like mine) where the ColdFusion server is running in a shared environment, the organization that owns the CF license may not know who all is using the CF instance. So here's another idea: put links to community resources into the new Adobe Bolt. If Bolt is meant to be the premier IDE for CFML developers, then there's a good chance that even the "invisible" CFML developers will grab it and gain access to all the resources it provides.