Speaking at cfCamp

Pleased to say I’ll be speaking on CFWheels 2.x and the new CLI at CFCamp, 20-21 October 2016. Would be great to catch up with people – do come and say hello (and indeed, come to my session!)

Session Details:

CFWheels 2.x and the new CLI

CFWheels is an open source CFML framework inspired by Ruby on Rails that provides fast application development, a great organisation system for your code, and is just plain fun to use. One of our biggest goals is for you to be able to get up and running with CFWheels quickly.

We want for you to be able to learn it as rapidly as it is to write applications with it. CFWheels has a long history, with the first commit over 10 years ago. Over 3000 commits later, this talk will take a look at what’s new in CFWheels 2.x, which brings huge leaps forward with tonnes of new features integrated into the core.

Along with 2.x comes the new CLI commands for CommandBox, which allow real “rails-style” scaffolding, complete with database migrations, controller, model and view templating, ability to run test suites from the command line, and much, much more.

Even if you’re not familiar with CFWheels, this talk will aim to give you enough to get going on your first app at breakneck speed!

OxAlto Roombooking System 1.2 Released!

Firstly, there’s now some pretty comprehensive documentation at http://roombooking.readme.io/ – This was a bit of blood, sweat and tears, but the system at readme.io makes this relatively painless, and it’s free for open source projects – hurrah!

This is a pretty big release this one – LOTS of new features and tweaks. Don’t forget to read the Upgrade notes for this one…

Here’s the feature list, but the highlights probably are simple concurrency warnings when booking, event moderation, custom fields and templating from within the application, support for running in a subdirectory and a better list view.

Download 1.2 now

Features:

  • New and comprehensive documentation
  • Creating a new booking now does a simple concurrency check
  • Bookings can now have basic event moderation
  • Moderator permissions can be assigned by role
  • Booking can exist in three states – approved, pending & denied
  • Locations can now have custom layouts
  • Locations can now belong to ‘buildings’
  • Locations now have a basic information page
  • Calendar view shows pending/denied events with different colours/opacity
  • Calendar view location filter now supports buildings and hover filter states
  • Events & Locations can now have Custom Fields added (and stored in the database)
  • Events & Locations can now use Custom Templating for both input + output
  • Added New Custom Template drag and drop creator (from gridmanger.js) for building forms and outputs
  • Installer simplified
  • URL rewriting now off by default to help support sub directory installations more seamlessly
  • Can now run in a subdirectory
  • Roles are now dynamic
  • List View now supports date ranges, multiple locations and filtering by status.
  • Notification emails updated to support mobile/responsive clients
  • Not deleting the /install/ folder now shows a nag message rather than throwing a full error
  • Footer now displays current code + database schema version
  • [Removed] Day view is now deprecated in its current form

JS/CSS:

  • Upgraded to fullcalendar.js 2.3.2
  • Improved datepickers again
  • More JS moved to external js file rather than being embedded in page

Serverside:

  • Moved to cfwheels 1.4.1.

Data:

Tables:

  • Added: customfields,customfieldjoins,customfieldvalues,templates
  • Events – added status column
  • locations – added building /layouts columns

Settings:

  • Added: approveBooking,bccAllEmailTo,bccAllEmail
  • Changed: – siteEmailAddress changed category to Email, version number updated.

Permissions:

  • Added: accessCustomFields,allowApproveBooking,bypassApproveBooking

Roombooking System 1.2 Development Preview

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/)

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.

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

 

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

Introducing gridmanager.js

A way of building rows and grids with built in editable regions; requires jQuery, jQueryUI, Bootstrap 3.x, TinyMCE. 

So over the weekend I was becoming annoyed with the lack of layout tools which you could use with a Rich Text Editor. Specifically, users would get bewildered by divs everywhere with Bootstrap. Let’s face it, if you’re not a coder, adding a row or clearfix class, then specifying divs with col-md-6 etc isn’t exactly straight forward.

This is designed to work in conjuction with TinyMCE (and others to follow hopefully); it uses HTML5’s contentEditable attribute to hook in -inline- instances of TinyMCE. Rows are sortable on the y axis, and you can add or destroy new rows easily.

It identifies all your col-md-* divs – so anything with class=”col-md-6″ (or any other number), changes the contentEditable to true, which in turn loads in TinyMCE. When you’re done manipulating the DOM, previewing strips out and destroys all the TinyMCE instances, removes any additional markup, strips out inline styles on columns and lets you see the markup you’ve just created in the page, as actually will be!

Saving posts the contents of the main div to a URL via ajax as specified by you in the configuration. You can customise the column layout buttons by passing in an array of widths, i.e, [8,2,2] will create col-md-8 and then two col-md-2’s. Handy if your bootstrap grid actually uses 24 columns rather than 12.

So what started as a simple jQuery script seemed to merge into (my first) jQuery plugin. There’s probably a tonne of improvements to be made, i.e, no support for multiple instances or nested columns, but that might be an interesting challenge in the future.

Try it and let me know your thoughts:

Demo | Docs | GitHub Repo