You may have noticed a month lag between posts, or more likely you didn’t and I was just giving myself more credit than was due. I have spent the past month enjoying Thanksgiving, Christmas, and coding an update to the TakeStock app that I originally released in response to the first Sencha contest. I wanted to use the command line tools, see if there were any improvements in local storage, as last time around I had to fall back on SqlLite to get the data stored locally on the client machine. I also wanted to take a small stab at skinning an app using SASS and SCSS. Of course, I am now nearing the end of this experiment and have had some time to gather everything together in a presentation designed to give you all the resources you will need to build your first Sencha Touch app in one place. Here’s the post:
I built a client side javascript SVG to PNG converter that works on *modern* browsers, however, depending on your target audience the browsers that frequent your site may be less than modern – i.e. IE. In this situation you only have one option, convert the image on the server side and then render it using the good old image tag.
First, cold fusion ships with some outdated batik files (which handle the cfimage tag) , so you will need to update those first, and add the missing files that will add your svg to -> image processing ability. I used the steps found in this post to accomplish the task; I’ll list them here in short format so you can get into the ext chart part of this project.
Rename the jar files in /wwwroot/WEB-INF/cfform/jars/ that start with batik by adding the extension .old
Copy the batik jar files into /wwwroot/WEB-INF/lib
Restart Cold Fusion
Next, let’s assume that we have two files, one called convertImage.cfm and one called convertImage.cfc, of course, we want to pass the svg markup to the cfm which will pass the data to the cfc for processing.
What and Why
I wanted to take advantage of Senchas touch 2 and update the Take Stock app I built way back when touch was being released using version 0.97. Over the summer I went to the Touch training that Sencha provided in Manhattan and got really excited about the prospects of the sencha command line tools that allow you to build a streamlined (compressed) version of your app and deploy it across multiple platforms with a few easy commands. To do this, the builder will take just the classes that you need opposed to the entire javascript library and combine them with your code then minimize the code using the YUI compressor.
Using Sencha without the command line tools is like driving an 18 wheeler to deliver the neighborhood mail when a small jeep will do just fine – so I guess what I want to say is yes, if you want responsive apps you will have to learn to love the command line tools or deal with the fact that your app will be burdened with extra weight and needless requests.
In order for all of this to work, your app needs to adhere to the Sencha MVC structure, and your code has to be tight – how tight? In the DateFilter there is a trailing comma which ships with Sencha and was throwing off my build process while the app worked fine.
How
Remember reading ‘in the summer’ a few paragraphs back? It looks like Sencha has been very busy over the past few months releasing beta version after beta version, what hasn’t been too clear is the documentation or the naming conventions of the old Cmd vs Command vs the Command Line tools in the SDK. The names are so similar the chances of you finding and trying to use the wrong documentation for the version you are using is damn near 100%, however, the improvements are worth all of the time invested, and I cannot imagine starting another project without using Sencha Command!
Easy Steps to a perfect install
1. For Windows users make sure that you are installing everything from your profile otherwise chances are Ruby and Compass will give you errors, and Sencha Command uses both to create the CSS files for your new app during the build process.
2. Install RUBY by visiting http://www.ruby-lang.org/en/downloads/ and following the instructions for your operating system. If you are developing on a Mac Ruby is installed by default, however, you will need to follow the next few steps.
3. Install Compass (http://compass-style.org/install/ ). This can be done from the command line / or terminal by typing the following commands:
5.) Now download Sencha Touch 2.1 or Extjs 4.1a. These are the only versions that will work with the new Sencha Command tools!
6.) Unzip your Sencha Touch or Extjs file to the root of your web directory. At this point you can safely refer to the Touch/Extjs files as your ‘SDK’.
Congratulations, you just installed the command line and set up your web folder, now let’s start a quick Sencha Touch app using the command line tools.
1.) Open the cmd window in Windows or terminal in everything else and change your directory to the ‘SDK’ otherwise known as the Extjs or Touch folder in your web root.
2) Now you will need to generate the basic MVC framework for your new Sencha Touch application, this can be done right from the command line by typing in the following command:
$ sencha generate app /path/to/your/app
3) You should now have a ‘starter’ application in the folder that you specified above (/path/to/your/app). The folder structure should look like this:
Notice that there is a .sencha folder which contains an app and workspace folder, inside the app folder there is a file named sencha.cfg, if you open this file you will see your app name, framework, and directory settings. This is where, you guessed it, you can change the name of your application.
Great, now you have the application set up, let’s look at the steps required to deploy the application to a production environment.
First let’s discuss what ‘builing’ an app does. If you take a look in your ‘SDK’ folder aka Sencha-Touch or extjs notice that there is a file named ext-all.js (around 1.2MB) or sencha-touch-all.js (around 900KB). The file name alludes to the fact that they contain all of the classes in ext or touch minus the UX classes. Chances are good that you don’t actually use all of the classes that are provided by sencha, so why force your users to download all the classes on top of your app.js and MVC javascript files? If you open up the folder src in your extjs or sencha touch folder you can get a look at the sizes of the individual classes that make up ext-all or sencha-touch-all.
The builder will search your code for class dependencies and compile all of the classes that you need to run your application, next the builder will compile all of your views, models, stores, and controllers into one nice file. Finally, the builder takes the extjs javascript as well as your application javascript and merges the two into one single javascript file. After this is done, the builder then ‘minifies’ your javascript which saves additional space. You gain a few clear advantages:
To build your new app just type the following command in the terminal:
$ sencha app build
The first time you issue this command the builder will create a folder named ‘build’ in which will be a folder with your app name. This folder contains your different ‘builds’. The folder named production contains the – you guessed it – production version of your application. Inside you will find the all-classes.js file which is your code plus the extjs code minimized, an ext folder which contains the CSS and any UX files that you may need in addition to any themes, and finally, your resources. It’s the files in this folder that you should push to your production server, they are all that is needed to run your new faster, sleeker, sencha application.
This is just the beginning of what can be accomplished using the new command tools, I’ll try and post some instructions on creating models, alternate versions, and so forth in the future.
One of the great things about extjs and all third party javascript libraries is the ease at which you can add the html file upload control to your page, and make it look professional. One of the things that almost every file upload application that I seen in use is a client side validation that is based on file extension, think about it would you like any file type making it to your server, including executables? The following code will add the file extension check to the upload on the client side. All you have to do is use the xtype ‘restfileupload’, and pass the extensions in an array without the period before the letters. Have Fun!
/***********************************************
Adds extension validation at the client side
for the extjs File Upload field. You must
set the extension in an array of strings.
**********************************************/
Ext.define('Ext.ux.restrictiveFileUpload', {
extend : 'Ext.form.field.File',
alias : 'widget.restfileupload',
// Array of acceptable file extensions
// overridden when decalred with a string
// of extensions minus the period.
accept : [],
listeners : {
validitychange : function(me) {
// This gets the part of the file name after the last period
var indexofPeriod = me.getValue().lastIndexOf("."),
uploadedExtension = me.getValue().substr(indexofPeriod + 1, me.getValue().length - indexofPeriod);
// See if the extension is in the
//array of acceptable file extensions
if (!Ext.Array.contains(this.accept, uploadedExtension)){
// Add the tooltip below to
// the red exclamation point on the form field
me.setActiveError('Please upload files with an extension of : ' + this.accept.join() + ' only!');
// Let the user know why the field is red and blank!
Ext.MessageBox.show({
title : 'File Type Error',
msg : 'Please upload files with an extension of : ' + this.accept.join() + ' only!',
buttons : Ext.Msg.OK,
icon : Ext.Msg.ERROR
});
// Set the raw value to null so that the extjs form submit
// isValid() method will stop submission.
me.setRawValue(null);
}
}
}
});
Yesterday I got up at 4:30 AM nervous and unprepared for what I was about to take on, I drove the 45 minute drive to Baltimore faster than usual – I remember passing the sign on I 70 that read 25 miles to Baltimore and thinking, “What did I get myself into!”. The night before my daughter had some wise words of advice,Rule 1- “Don’t collapse in the street, walk if you have to.”
See, I spent the past three months deliberately not training as I overtrained for a 2010 marathon and had to sit out New York, yes that’s right I got into NY and missed it! Now I was second guessing my lack of training — but what the hell, I could run half and walk the rest if need be. This brings me to rule number 2, if this is your first marathon, finishing is a PR!
Anyway, by now It’s about 6ish in the morning and I made it to the ravens parking lot without any problems and pulled up right next to the finish line in front of the stadium. Rule number 3 – Parking matters – free and close beats the metro any day! You’ve heard the commercial on the radio with the guy that complains about walking too far to the car after finishing a marathon, there’s truth in it! At this point I’m nervous and excited at the same time. I spend the next hour drinking coffee and waiting until a fair amount of people start showing up in front of the stadium, time to walk. The last quarter mile of the race to the start which is right around the corner from the O’s stadium, which was bittersweet knowing that the night before they were taken out of the running by the Yankees. The night before the race I drove around the stadium when there was still hope in the air and people were gathered around a few taxicabs that had their radios on and tuned into the game.
I found the 4:30 pacer group and settled in, the crowd for the marathon was large but not overwhelming like some of the races down the road in DC. The mayor, and CEO of Under Armour spoke followed by the race princess, a six year young lady who has undergone nine major surgeries before the age of 5, then it was time to go. The confetti lasted so long that even after three minutes it was still raining down across the start.
The first three or so miles were all uphill until we reached Druid Hills Park and the Baltimore Zoo, someone on the side of the course was holding a sign that read, “Lion on the loose, casualty count 1,2,3,4, …..”. This scared me a bit being a fan of National Geographic i knew that he animals in the back of the pack were the first ones to go.
I turned the corner and made my way down to the zoo when I noticed a sign that said Marry Me, pretty cool, but I was wondering, couldn’t he place it on say an uphill section where you would want a break?
Through the gates and into the zoo where the zoo staff lined the next half mile or so all holding exotic birds, so I can say I ran past penguins, ravens, and owls while listening to elephants in the background. Next it was all downhill towards the inner harbor where we would meet up with the half marathon crew of like a million runners, of course with that many people you have a lot of spectators (like another million) lining the streets, some of the more memorable signs at this point were:
Chafe today brag forever ….
26.2 miles because 26.3 would be crazy, right?
It’s called a marathon, if it were easy it would be called your mom! (it took me half a mile to get that one)
Run bitches run ..
Back to the race, I was mentally prepared for a flat run around the inner harbor- why? – because this was the flat part of the course in the small elevation map on the website, so all I have to say is Federal Hill, really?
After the hill we ran under the Domino Sugar sign and around the Under Armor headquarters. The race had a contest where the loudest school on the course would get a cash prize, sorry, Federal Prep this one goes to Thomas Johnson. The course wound it’s way back through the inner harbor and we ran under the half marathon arch that was set up at the start …… Only 13.1 miles left! Next we were set to run through little Italy and the east side of Baltimore.
Favorite T-shirt on a runner, “Running Sucks”, around mile 15.
A few miles later we came over a ridge and all we could see was the wall of runners that had started the half marathon, and of course, hundreds of spectators lining the sides of the street, this was it – where the full marathon mixed with the half and we would all run, walk, or crawl together until the end.
The crowd slowed the pace considerably, and at some points I was walking faster than the crowds running pace. I made it to mile 20 in 3 hours and 20 minutes! Turns out that the next six would be the hardest six miles I have ever run, and take almost twice as long as my usual lunchtime run which is six miles long as well. I can remember looking at my Garmin around mile 24 thinking I didn’t know someone could move that slow!
The east side of Baltimore consisted of running uphill forever, but mile twenty marked the ring around lake Montebello like the Italian detective show on MHZ. Before hitting the lake I kept hoping that we would run by a gas station or something that was close to the street so I could get a coke or candy bar, however, the stores were few and far between. The lake would open into residential neighborhoods and a cold drink (other than gatorade or water) was out of the question! The ring around the lake made up a flat mile 21 and 22, at this point I was walking then running and walking, then running … I recall a band set up along the end of the lake but I can’t remember the web address they wrote down right now.
The next few miles were a series of small inclines, but after 20+ miles anything seemed like a mountain, then the hands down most motivating marathon ‘fans’ appeared on top of a Toyota dancing, check out the video below:
This kept me laughing until a few blocks away you turned the corner and could see the finish line below, even tough it’s still a half mile or more out. It’s all downhill through camden yards to the finish!
I never paid much attention to the medal before the race, but if you look real close at the bottom it’s inscribed with the sentence, “what hills don’t kill you make you stronger”, excellent slogan for an excellent race.
Thanks Baltimore! The run couldn’t have been better!
Yesterday I got up at 4:30 AM nervous and unprepared for what I was about to take on, I drove the 45 minute drive to Baltimore faster than usual – I remember passing the sign on I 70 that read 25 miles to Baltimore and thinking, “What did I get myself into!”. The night before my daughter had some wise words of advice,Rule 1- “Don’t collapse in the street, walk if you have to.”