VCS Blog

jQuery mobile's ListViews are very nice but the framework provides no methods for changing the theme (either of the entire list or an individual element) at run time.

Quite often I need to change the appearance of an element based on state. For example I use a listview on the left hand side of the page and change the content on the right hand side when the user clicks on a category. I, of course, want the selected category to be a different color than the rest of the list.

One would think you could just change the "data-theme" attribute of the element you click on and refresh the list view. This doesn't work because the element you click on doesn't even have a data-theme attribute (even though you specified it in the original markup).

This is because the framework places a lot of wrappers around the element(an href) but doesn't attach the data-theme attribute to it.

In order to change the theme there are a few steps:

1. Determine the current theme
2. Remove classes associated with the theme on the ancestors of the element
3. Add classes on those elements corresponding to the new theme
4. Change the data-theme attribute on the appropriate ancestor
5. Refresh the listview

I have written a simple function to accomplish this:

Notice that the classes you need to change are ui-btn-up-x and ui-btn-down-x, where x is the theme (a,b,c,d,e). These classes and the theme exist on the great grandparent of the href element. The listview is the great great grandparent.

You can play with the concept here

This entry was posted on May 13, 2012 at 4:48 PM and has received 227 views. There are currently 0 comments. Print this entry.

One annoying aspect of using a weakly typed language like ColdFusion is that sometimes you really need the type. If you ever have fields which are numeric strings (e.g. phone numbers, ssn, or your database uses varchar for ids which consist only of digits) you have probably had issues if you serialize the data using serializeJSON and send it to the client. SSN's likely will be expressed in scientific notation and leading zeros will be lost in your id's and international phone numbers.

You can always work around this by prepending a "~" to the variable and then stripping it off in javascript but that is kludgy at best.

I have written a parser which preserves appropriate variables as strings when serialized. Since this only works if you can identify the appropriate fields the parser only preserves numerical strings that are part of a struct. If that is too limiting you can always modify the parser to treat all simple values as strings but that means some javascript conversions are necessary on the client to converts strings back to numbers.

The concept is to pass a mapping struct to the parser telling it which elements to preserve as strings. If you pass an empty mapping struct you get the normal CF serialization.

Creating a JSON string for a struct or array is straightforward. The parser I have built id not designed to process multi-dimensional arrays. You just start at the root and recursively call a conversion function until you have processed the entire input.

[More]

This entry was posted on April 15, 2012 at 4:21 PM and has received 239 views. There are currently 0 comments. Print this entry.

I have a app where the "words" are actually divs and I would like them to flow as if they were words. That is pretty easy to do, just make the word container float left. The problem comes when the page reflows because the user changes the text size or resizes the browser. The browser reflows perfectly except that sometimes the "spacer div" then becomes the first element on a new line which looks bad.

The question was how to eliminate that? After a bit of head scratching I found a very simple solution.

All the spacer divs have a class "wordspace". I just iterate over that class and determine its position compared to the previous word. If the top of the spacer is greater than that of the previous word then it must be on a new line so I just hide it. I already eliminate adjacent spaces so the previous word is always either a real word or punctuation. I have to use the parent container because the wordspace element is wrapped by another container.

Ya gotta love jQuery

This entry was posted on March 18, 2012 at 1:00 PM and has received 446 views. There are currently 2 comments. Print this entry.

In order to make an application available offline one has to create a manifest file telling the browser which files it can cache and which files require connectivity. Unfortunately, as far as I know, the browser cannot use wildcards for this so we need to list files explicitly.

I, for one, certainly have no interest in hardcoding that list and trying to keep it up to date.

The manifest file format:

CACHE MANIFEST
#Thu Mar 15 16:13:49 MDT 2012
#Total Files: 54
#Explicitly cached files
css/icryptogramplay.css
css/images/ui-icons_ffffff_256x240.png
js/cachelogging.js
...
NETWORK:
#files which require connectivity
setting_debug.cfm
cfcProxy.cfc
Application.cfc
...
OFFLINE:
    
....

# are comments which are ignored by the browser

Because I am too lazy to maintain a hardcoded file I have written a bash script to generate it for me. The idea is to get a list of files in the web root, get a list of required files, eliminate the required files from the first list and generate the file.

Here is the script

[More]

This entry was posted on March 16, 2012 at 1:00 PM and has received 523 views. There are currently 0 comments. Print this entry.

I have worked on a jQuery plugin to allow a user to pan over a low res image and zoom in on the same position in a hi res image. The code is entirely client-side and depends on both low and high res images being available. There is no resampling of the image.The plugin may be applied to multiple images on a page. Before delving into the code let's take a look at an example. (The video seems to hang at a couple of points. Toggling the pause button will allow the video to continue.)

Let's look at the code in the rendering page.

[More]

This entry was posted on March 2, 2012 at 1:00 PM and has received 815 views. There are currently 0 comments. Print this entry. Download attachment.

Here is a simple plugin to filter a result set using jQuery

You "attach" the plugin to a text field and then as you type in that field only the matching records are shown

[More]

This entry was posted on February 28, 2012 at 1:00 PM and has received 1949 views. There are currently 0 comments. Print this entry. Download attachment.

On a daily basis I have my websites backed up and send the tarball via ftp to my local machine. I was interested in automatically copying those files to an external hard drive. I found a simple way to do this using an instance of ColdFusion Directory Watcher Gateway. One could write a component that scans the directory and looks for differences between that and the archive directory on the external drive and copy any changed or added files and run that as a scheduled task. It is far easier to use a gateway instance rather than reinvent the wheel.

[More]

This entry was posted on February 12, 2012 at 3:31 PM and has received 562 views. There are currently 0 comments. Print this entry.

Quite often I find it useful to have a ColdFusion object which reflects the data in the row of a query or database table.

I have a written a generator to accomplish this. Please note that this is CF 9 specific. But wait, you say, CF 9 has ORM built in why not just use that. There are two limitations of Hibernate as implemented in CF 9 which rule it out for my use. 1)It is limited to a single datasource and 2) it will not work on an arbitrary query.

We have an application for which different clients have different datasources. The database schema is the same for each client but the database instance, and hence datasource is different.

Also, we often move data returned by a query around the application and to the client side to be used by jQuery. It is much easier to use an object for this than using queries directly.

[More]

This entry was posted on February 12, 2012 at 1:00 PM and has received 803 views. There are currently 5 comments. Print this entry.

I have recently been tasked with unifying the look and feel of a large application. The application makes use of the jQuery dialog for notifications as ajax operations process but there are a large number of places where the application uses OS alerts and confirms.

You cannot just replace these calls with a dialog because displaying the dialog does not stop downstream processing like alerts and confirms do. In the alert case this is usually not important unless you have code like:

alert("Sending you to google");
location.href="http://www.google.com";

In the above case you will go toodling off to google before the replacement for the alert has been dismissed. Fortunately in our application this use case doesn't occur so replacing the alert with a dialog works fine.

[More]

This entry was posted on November 16, 2011 at 1:00 PM and has received 3084 views. There are currently 1 comments. Print this entry.

I decided to try something different and make soup but roast the cauliflower first.

Ingredients:

2 slices bacon
1 onion diced
1 cauliflower cut into individual florets.
olive oil
1 potato diced
1 head garlic
2 qts chicken stock
salt and pepper

[More]

This entry was posted on May 16, 2010 at 1:00 PM and has received 1532 views. There are currently 0 comments. Print this entry.