v1.1 RoomBooking system released

This is a rather large update, bringing with it some nice new features such as resource booking, some basic digital signage facilities, and an almost complete rewrite under the hood.

Demo | Github

What’s new in 1.1?

Features:

– New static ‘Day’ view (in additional to all the fullcalendar.js views)
– New display board view (for digital signage)
– New Resource management feature: add resources (i.e, laptops) to be bookable alongside an event (#23)
– Support for ‘unique’ resource booking: i.e, will check certain devices for concurrent use
– Support for limiting a resource to a specific location
– Resources can be grouped i.e, Computers,Audio Visual,Furniture
– Clone event functionality
– Calendar “MaxTime” added
– All Day events now set time to 0 – 23:59 to help with alt displays

JS/CSS:
– Upgraded to Bootstrap 3.3.1
– Upgraded to fullcalendar.js 2.x
– Improved datepickers/colourpickers
– All JS/CSS now generated via grunt
– Frontend package managment now from bower
– Added bootstrap form validation
– jQueryUI no longer required
– [removed]: Bootstrap Theme Support
– [removed]: Bootstrap CDN support

Serverside:
– Moved from cfwheels 1.2 -> 1.3.2
– Large underlying codebase rewrite.
– All controllers, models and most helper functions now in cfscript rather than tags: note this may cause issues if you’re on CF9.
– Support for servers with prefix json
– Various options removed/changed to support moment.js
– Improved form validation
– Most JS moved to a single JS file generated via grunt
– Extraneous folders/files removed (i.e /files/)

cf10/ MAMP & OSX Yosemite

Just a reminder, installing OSX Yosemite will nuke your java install.

Re-download from here.

You’ll probably need to restart coldfusion from terminal when in /Applications/coldfusion10/cfusion/bin using

 ./coldfusion start

Also, if you’re running it through MAMP, then you’ll need to do this silly workaround if apache doesn’t start: rename “envars” to “_envars” in /Applications/MAMP/Library/bin.

Then restart everything. Worked for me!

cfWheels shortcode plugin

This is a port of Barney’s shortcodes implementation for CFML (itself a port of the wordpress shortcodes concept). He wrote all the tricky stuff, I’ve just refactored into cfscript, stripped out all the CFC aspects and made into a cfWheels plugin. Note, I haven’t bothered with the full cfc implementation with execute, as we’re doing this within a cfwheels app.

See https://github.com/neokoenig/cfwheels-shortcodes

Please note nested shortcodes aren’t currently supported.

Usage

// Add a shortcode
addShortcode("code", callback);

// Process content with shortcodes in
processShortcodes(content);

// Quick dump to view existing shortcodes
returnShortcodes();

Example, adding a shortcode for [test]

To add a shortcode, such as [test], first, you should register the code in /events/onapplicationstart.cfm

addShortcode("test", test_shortcode_callback);

This basically registers [test] as a trigger for test_shortcode_callback(). So next, we need to create that function.

In /events/functions.cfm, add your callback:

// Test Shortcode
function test_shortcode_callback(attr) {
    return "foo";
}

Lastly, wrap any content which you want to parse for shortcodes to with sc_process()

    <cfsavecontent variable="mycontent">
      <p>I am [test], fear me.</p>
    </cfsavecontent>
    <cfoutput>
      #processShortcodes(mycontent)#
    </cfoutput> 

Using passed tag attributes

You can use any data passed by tag attributes via the “attr” struct.

[test foo="bar"]

Will allow you to reference #attr.foo# in your shortcode function.

Wrapping content with tags

To enable a tag to ‘wrap’ about content, you need to make sure the callback function has the content argument

// Example shortcode to wrap content in a div
function test_shortcode_callback(attr, content) {
    var result="";
    result="<div class='test'>" & content & "</div>";
    return result;
}

// Usage:
[test]My Stuff[/test]

More advanced example:

This example renders the markup needed for a bootstrap 3.x panel via including a partial

// addShortcode("panel", panel_callback);

/**
 * @hint Renders a bootstrap panel: usage [panel title="My Title"]Content[/panel]
 **/
function panel_callback(attr, content) {
       param name="attr.title" default="";
       var result="";
       savecontent variable="result" {
         includePartial(partial="/common/widgets/panel", title=attr.title, content=content);
       }
       return result;
   }

Panel partial: (/common/widgets/_panel.cfm)

    <cfoutput>
      <div class='panel panel-default clearfix'>
        <div class='panel-heading'>
          <h3 class='panel-title'>#arguments.title#</h3>
        </div>
      <div class='panel-body'>#arguments.content#</div>
    </div>
    </cfoutput>

The nice part about having this within wheels itself is that you can access any of the wheels functions and helpers, including the params struct (i.e, useful for paging numbers etc), whereas using Barney’s cfc in the /miscellaneous/ folder (and then extending controller.cfc) caused various issues.

Simple Ajax requests with cfWheels and jQuery

Someone asked me via email today – I would like to know how to include a Partial dynamically based on a link/button click;

Well, I thought I’d rustle up the simplest way of doing this I could think of.

This example has three parts to it: an Ajax.cfc controller, an index.cfm file and a _time.cfm partial. I’m assuming you’ve got the index.cfm and _time.cfm files in /views/ajax/ and the controller file will live in /controllers/Ajax.cfc

I’ve included two ways of essentially doing the same thing: one renders the partial (which is what the emailer asked for), but depending on what you want to get back, renderWith() can be really useful too, and saves you having to create a partial just to return something simple like a string.

So what’s going on is:

  1. jQuery looks for the class “callremotedata” and takes over its “click” event
  2. It stops the a tag from firing as a normal request
  3. It takes the href value from the a tag
  4. Then fires an ajax request and replaces the HTML in #result with the html returned from the Ajax.cfc controller

Gridmanager.js 0.3.1 released

Another huge set of changes, mainly the introduction of stackable & sortable editable regions, and  full LESS themeing support.
Give it a go here: http://neokoenig.github.io/jQuery-gridmanager/demo/

Changelog:

New style of editable regions which are stackable/editable/deletable
Added: default editable region button
Added: Theming using LESS
Default, light & dark themes now available
Large visual cleanup
Fixed: remoteURL now posts as proper key/value pair
Added: initMarkup() to autowrap non commented markup
Added: editableRegionEnabled & autoEdit options
Added: additional filterCallback option which runs on init();

Gridmanager.js 0.3.0 released

A pretty big set of changes in this one.

A massive thanks to Percy Brea for his input in moving Gridmanager.js forward, and thanks to all those who have got in touch with bug fixes and ideas!

What’s new?

  • Nested row & column support & new add nested row button
  • Added ability to add custom controls on rows & columns (with your own callbacks)
  • Added Custom column classes in addition to row classes
  • RTE’s are now attached to their own editable regions within columns
  • Responsive class support added
  • Responsive class layout mode added
  • Font Awesome now the icon default
  • Documentation now available at http://neokoenig.github.io/jQuery-gridmanager/docs

 

Installing Jekyll on OSX Mavericks

Came across a bizarre error which I thought I’d share the fix for in case anyone else comes across it: whilst trying to do a bundle install as per the gitHub pages guide, I hit this when trying to do:

tom$ bundle install

An error occurred while installing nokogiri (1.6.2.1), and Bundler cannot continue. Make sure that `gem install nokogiri -v ‘1.6.2.1’` succeeds before bundling.

Turns out you need xcode command line packages updated: check you’ve got xcode:

tom$ xcode-select –version

xcode-select version 2333.

tom$ xcode-select –install

xcode-select: note: install requested for command line developer tools

After which all plays nicely.

Quick report from SOTR2014

A quick report from SOTR2014:

A massive thanks to Fuzzy Orange for putting on a fantastic conference; the food, organisation, timings, coffee etc were perfect. Special hats off to Andy Allan for taking quite so much general abuse over the last two days.

Some great talks from Matt Gifford (on Grunt & Gulp), Kitt Hodsdsen (automation in front-end development), David Boyer (NodeJS), Rob Dudley (Bower, Grunt, Yeoman), Mark Drew (Deploying to the Cloud), Anna Shipman (Automating government), Simon Wood (Static Site generation).

There was a noticeable move towards ‘tools’ as opposed to just programming. Automation in the front end is basically essential (or at least, that’s how I’m feeling immediately post conference). As I was already using Grunt, Bower & Yeoman, there was a fair bit of repetition, but each speaker had their own techniques, explanations and way of doing things which was enlightening. Kitt’s automation talk covered a vast number of tools (something like 350+ slides in under 2 hours), so that’s a whole area I need to go and revisit – live reload etc, ‘live’ style guides – some useful bits.

I still must confess, that even with the enthusiastic words of David Boyer, I don’t have a use-case scenario for using node.js in my head yet – on a dev server, sure, essential – but haven’t got a project where it would work on a production server yet. One to keep in mind though.

As always, Mark Drew shows he’s much cleverer than the rest of us, with demonstrating rapid AWS & Cloudbees deployments – I really must checkout Cloudbees. “cloudbees deploy” may just be my new favourite command line command.

Simon Wood spoke passionately about static site generation – Jekyll/Markdown etc – I use this to a degree already, but it’s prompted me to revisit how I do it, and look for improvements. It’s not going to replace 90% of my sites though. Sorry Simon.

The real plus of the conference was meeting a tonne of interesting people, many I’ve had on twitter for ages, but never met IRL. Being able to talk about pretty complex technical things with others who have the same (or greater!) enthusiasm is refreshing. And hearing about how some people are using the existing tech out there in terrifyingly clever and large setups is pretty inspiring sometimes.

Great stuff!

#sotr14

GridManager.js 0.2.1 released

Yes, yes, I know, rather quick after the last one. But this has some much cooler features which I didn’t want to hold back!
Now with resizeable columns, better sorting, fluid row support, better source code view, better RTE handling and some GUI improvements.

Demo | Docs | GitHub Repo

GridManager.js 0.2.0 released

Now with CKEditor support, moveable columns etc..

Try it and let me know your thoughts:

Demos | Docs | GitHub Repo