the singularity of being and nothingness
JavaScript
ContentBox: Creating a CKEditor Plugin for Complex Data Types
Jan 19th
I recently developed a simple module for ContentBox called jsFiddle. Basically, it allows you to insert “fiddles” from the excellent http://jsfiddle.net into your posts and pages. In developing this module (and CKEditor plugin), I wanted to be able to insert complex data into the content editor, but then be able to re-edit that content after insertion. I’m pretty happy with how it turned out.
In the following paragraphs, I’m going to walk through the process of developing a ContentBox module that includes a CKEditor plugin which is capable of content re-editing. Hopefully this will inspire some others to develop some killer new ContentBox modules with helpful CKEditor plugins.
Some ContextNOTE: In this walkthrough, i will include snippets of code, but most of them will be severely trimmed for the purposes of this post. If you really want to follow along with the full code, please grab it from the GitHub repo. Furthermore, I’m not advocating that this is the “best” or “only” way to accomplish this. My only intention is to share some ideas about things that have worked for me. So if you have corrections or suggestions for how things can be done better, I’m always ready and willing for civil, constructive feedback
Before we More >
CKEditor and ContentBox: A Fun Editing Option
Jan 13th
Over the last two days, I’ve been playing around alot with a new plugin that I’ve been working on for inclusion in CKEditor, expressly for the purposes of creating a very handy way of inserting snippets of code, decorated by Syntax Highlighter, into ContentBox‘s content editor.
Some of the functionality I’ve been playing around with is the different ways in which you can trigger “edit” events on elements in CKEditor, primarily for the purpose of opening a modal window and allowing for editing of the element’s properties (such as href, title, class, etc.). This weekend, I brought the options in the new plugin I’m working on up to the following:
- Via link in context menu
- Double-clicking the element
- And the most interesting…using jQuery to help overlay an inline-tooltip (see below)
In my next post, i’ll describe how to do this…just wanted to put out a teaser before I sleep and prepare for the new week!
Share this: ContentBox: Editable Content Regions in CKEditor
Jan 2nd
I recently created a module for ContentBox that allows you to embed “fiddles” from the excellent http://jsfiddle.net. If you’ve not used this site before, you really should
In developing this module, I had very specific goals, particularly for the user interface in the rich HTML content editor, namely CKEditor. My goals were simple:
- Have toolbar icon for easy insert
- Allow easy insert from context menu (right-click) within the content editor area
- After content/config/whatever is inserted into content editor area, show something meaningful (other than ugly red iFrame box)
- Allow user to act on inserted content–particularly, be able to edit all the properties of the content that were configured pre-insert
The first two are really easy. If you look at the source of the PasteBin module, you’ll see really quickly how to do those, so I’m not going to dwell on that. In this post, however, I do want to show how simple it is to make inserted content regions richly editable, treating them like complex data, rather than just simply strings.
Insert Content RegionNOTE: In the following, I include code-snippets, but often omit unimportant or redundant bits. Be sure to grab the entire source to see everything in its full context
Before we look at creating the editable More >
ExtJS 4: Custom Editor for Property Grid
Dec 30th
Yesterday, I was helping someone figure out how to add a custom, complex editor for use in a ExtJS Property Grid.
The Anatomy of a Property GridFor some context, a Property Grid is like an editable grid, but instead of editing rows of data, you use a grid like interface to edit the properties of a single object. Think of it like the interface you’d use when defining database properties in SSMS…
By default, the Property Grid has several editors for simple types like strings, dates, booleans and numbers. Better yet, ExtJS will automatically try to detect the correct type, and specify the appropriate editor for you.
Out of the Box is Never EnoughBut of course, out of the box never gets you 100% of the way. Imagine that we have a cluster of properties, one property of which is a complex data type. Consider this example:
source: {
name: "My Object",
created: Ext.Date.parse('10/15/2006', 'm/d/Y'),
timeofday: "12:00 PM",
available: false,
version: 0.01,
description: Ext.encode({
product: 'Clorox',
tagline: 'The Shinyest White!'
})
}
As you can see, most of the properties are very simple. However, the last one (description) is complex: in this example, it’s a serialized object. If we More >
Virtual Directory-Driven ExtJS 4 Development – The Finale
Nov 24th
If you’ve been following along the last few posts, you’ve seen how it’s relatively simple to set up your local development environment to leverage global library assets to create ExtJS 4 applications. What you’ve probably also noticed is that there are a number of configurations (some one-time, others per-application) that need to be implemented before it will work. While these are not necessarily that big of a deal (especially in light of the benefits you gain), it’s still a lot. Here’s the full list:
- Generate application with Sencha Cmd
- Add virtual directories (ExtJS library, global plugins, and resources)
- Update ext.dir in /app/.sencha/workspace/sencha.cfg
- Add workspace.classpath in /app/.sencha/workspace/sencha.cfg
- Add full host path to /app/resources/theme/{themename}/theme.html
- Update $ext_path in /app/resources/sass/{themename}/config.rb
- Add fixes to /extroot/resources/themes/lib/Utils.rb (one time)
- Update /app/.sencha/app/build.impl.xml to copy theme images to app folder
- Develop application
- Build application and theme
So only 9 per-app steps…not too bad. But wouldn’t it be WAY better if this number could drastically reduced?
WARNING!! WARNING!! WARNING!!
What follows is a total hack. The steps outlined will show you how to modify your Sencha Cmd installation so that the configurations previously outlined will now be the “default”. These changes apply only to ExtJS 4 app creation and compile/build. I didn’t bother with the more advanced commands in Sencha Cmd, nor with anything relating More >
Virtual Directory-Driven ExtJS 4 Development – Part Second
Nov 21st
In my last post, I outlined a method that can be used to develop compilable-ExtJS 4 applications, with minimal configuration, that leverage a common, global location for shared assets and libraries. This approach works fine if you are merely “compiling” the application (e.g., only the JS part). However, if you do the full “build” you’ll quickly run into a number of issues.
The most significant of the issues is that the full build process will attempt to compile the theme for your app via the compass compile command. Since our approach decouples the app from the library, AND because we didn’t exactly deal with the SASS/theme bits whatsoever, the errors just roll and roll when building the app.
Fortunately, the fix is pretty easy. In the following, I’ll outline some necessary pre-requisites you’ll need to get setup before building, and then I’ll suggest a few options for how to do this.
Another Virtual DirectorySince we’re primarily interested in styles–particularly images–we need another virtual directory that will point to the images for our theme.
In httpd.conf, I’ve added the following:
Alias /sencha/testapp/resources/images "/Users/{username}/sencha/extjs/resources/themes/images"
NOTE: If you are developing your own custom theme that will be app-specific, you can skip this step and just put the theme images in More >
Virtual Directory-Driven ExtJS 4 Development
Nov 15th
Over the last several months, I’ve been incredibly lucky to be able to work with ExtJS 4 on a daily basis. And I’m not just talking about dabbling here and there; rather, I mean developing a full-on legit application. It’s been awesome.
As I’ve been building this application, I’ve developed a TON of custom, reusable code. Some of it is app-specific, but a lot of it is application-agnostic. For example, in my ColdFusion settings, all AJAX responses are prepended with “//”. Doesn’t sound like a big deal, but the default ExtJS 4 data readers don’t understand this…so I built a set of custom reader extensions that solve this problem.
So now that the application is more in “maintenance” mode, I’ve been taking an inventory of all the custom, globally-reusable extensions and plugins that I’ve created. And it’s got me wondering about how, exactly, one should (or could) leverage all this reusable goodness in a way that doesn’t require a clunky copy-paste for every project.
WorkspacesWith the release of Sencha Cmd 3.0, you can now leverage the concept of a “workspace” to aid in managing reusable code. I’ve not personally used this yet, but it seems like a really nice solution.
There is one serious More >
Sometimes a Forehead Smack is Warranted
Jun 23rd
Over the last several days, I’ve been trying to use Sencha Command to package a Sencha Touch 2 app as a native app. Honestly, for most of the process, everything worked perfectly…until I actually had to package the app. I ran the build command, like so:
sencha app build native
Throughout the build process, everything seemed to be going well, until the minification of the actual app.js file. Here’s the error I received:
[ERROR] Error: Command failed: [ERROR] 28305:18:missing variable name [ERROR] 28305:20:syntax error [ERROR] 28306:25:syntax error [ERROR] 28318:14:identifier is a reserved word [ERROR] 28420:21:identifier is a reserved word [ERROR] 1:0:Compilation produced 5 syntax errors. org.mozilla.javascript.EvaluatorException: Compilation produced 5 syntax errors. at com.yahoo.platform.yui.compressor.YUICompressor$1.runtimeError(YUICompressor.java:154) at org.mozilla.javascript.Parser.parse(Parser.java:392) at org.mozilla.javascript.Parser.parse(Parser.java:337) at com.yahoo.platform.yui.compressor.JavaScriptCompressor.parse(JavaScriptCompressor.java:312) at com.yahoo.platform.yui.compressor.JavaScriptCompressor.<init>(JavaScriptCompressor.java:533) at com.yahoo.platform.yui.compressor.YUICompressor.main(YUICompressor.java:131) at sun.reflect.NativeMethodAccessorImpl.invoke0(Native Method) at sun.reflect.NativeMethodAccessorImpl.invoke(NativeMethodAccessorImpl.java:39) at sun.reflect.DelegatingMethodAccessorImpl.invoke(DelegatingMethodAccessorImpl.java:25) at java.lang.reflect.Method.invoke(Method.java:597) at com.yahoo.platform.yui.compressor.Bootstrap.main(Bootstrap.java:21)
Pretty helpful, right?
Well, I *finally* figured it out. I emphasize “finally”, as the issue was actually a code error on my part. In my app, I used the word “final” as a variable in one of my controllers. Apparently, this is a reserved word (or something like that), and so the minifier blew up. Changing the variable name resolved all the issues.
So how many hours of frustration was that? I am stupid.
Share More > ExtJS 4: Applying Model Validations to Forms
Apr 23rd
One of my absolute favorite things about ExtJS’ data model is how simple it is to apply a Model instance to a form. If you’ve never done this before, consider the following data model:
Ext.define('Validations.model.Person', {
extend: 'Ext.data.Model',
fields: [
{name:"name", type:'string'},
{name:"age", type:"int"},
{name:"hobby", type:"string"}
]
})
Also, assume we have a form defined like so:
Ext.define('Validations.view.people.Form', {
extend: 'Ext.form.Panel',
alias: 'widget.peopleform',
bodyPadding: 10,
border: false,
initComponent: function() {
var me = this;
Ext.applyIf(me, {
defaults: {
width: 250,
labelWidth: 70
},
items: [
{
xtype: 'textfield',
name: 'name',
fieldLabel: 'Name'
},
{
xtype: 'numberfield',
name: 'age',
fieldLabel: 'Age',
value: 20
},
{
xtype: 'textfield',
name: 'hobby',
fieldLabel: 'Hobby'
}
]
});
me.callParent(arguments);
}
})
NOTE: Notice that the “name” properties of each form field maps 1:1 with the “name” properties in my Model.
Now, let’s say that we want to edit a Model instance. We could, of course, manually set the value of each form field to that of the corresponding field in the Model. However, this is clunky and unnecessary, given that the form itself has a method for doing this automatically. Consider the following:
// get More >
Quick Thoughts on Sencha Architect 2
Apr 21st
A few days ago, Sencha rolled out Sencha Architect 2, the major overhaul and rebranding of what was formerly Sencha Designer. You can check out the release blog post to get the low-down on all the new features.
When I saw the news about the release, I have to say I was a bit hesitant to look much further. I’ve tried Sencha Designer several times in the past, and I’ve been somewhat disappointed with it. Sure, it was great for laying out apps, but when you actually needed to *code*, it was lackluster at best. But even worse, I found it to be very buggy; it would crash at random times, and overall I found the process of trying to mockup an app to be more frustrating than anything else.
So initially, I wasn’t planning on even trying out the newest iteration. But then I noticed that one of the biggest additions to the product is support for creating a full ExtJS or Touch app–not just the UI. I felt I had to take a closer look, and I’m glad I did.
UIOut of the box, Architect 2 is worlds better than its previous iterations. The interface is slick and responsive, and the way More >
