Where do you need to use javascript MV* framework
I like following while I was reading an article on javascript frameworks: I thought it is worth repeating:
So, where will you likely need an MV* framework and where won’t you?
If you’re writing an application that will likely only be communicating with an API or back-end data service, where much of the heavy lifting for viewing or manipulating that data will be occurring in the browser, you may find a JavaScript MV* framework useful.
Good examples of applications that fall into this category are GMail and Google Docs. These applications typically download a single payload containing all the scripts, stylesheets and markup users need for common tasks and then perform a lot of additional behavior in the background. It’s trivial to switch between reading an email or document to writing one and you don’t need to ask the application to render the whole page again at all.
If, however, you’re building an application that still relies on the server for most of the heavy-lifting of Views/pages and you’re just using a little JavaScript or jQuery to make things a little more interactive, an MV framework may be overkill. There certainly are complex Web applications where the partial rendering of views can* be coupled with a single-page application effectively, but for everything else, you may find yourself better sticking to a simpler setup.
How to resize and crop Image Using Coldfusion script
I had requirement on my site www.eventaway.com to resize Image after uploaded by user in two sizes one for view page and one as thumbnail, I found some script on web and improved it to fit in my requirement. here it is. I expect this code will reside in a CFC function
<cfscript>
var l = {}; // local struct
/* Read file and we will resize and crop it to make 200×200 */
l.img = ImageRead(“path of the image to be resized”);
l.resizeOriginalFlag = 0;
If( l.img.height GT l.img.width )
{
If( l.img.height GT 200)
{
ImageResize( l.img,’200′,”);
l.resizeOriginalFlag = 1;
l.fromX = l.img.Height / 2 – 100;
ImageCrop(l.img,0,l.fromX,200,200);
}
}
else if( l.img.width GT l.img.height )
{
If( l.img.width GT 200 )
{
ImageResize( l.img, ”,’200′);
l.resizeOriginalFlag = 1;
l.fromY = l.img.Width / 2 – 100;
ImageCrop( l.img,l.fromY,0,200,200);
}
}
else
{
If( l.img.height GT 200)
{
ImageResize(l.img,’200′,”);
l.resizeOriginalFlag = 1;
ImageCrop(l.img,0,0,200,200);
}
}
</cfscript>
<cfif l.resizeOriginalFlag>
<cftry>
<cfimage action=”write”
source=”#l.img#”
destination=”<path with filename>”
overwrite=”yes”>
<cfcatch>
<!— <cfdump output=”/sites/resize.html” var=”#cfcatch#” format=”html”> —>
</cfcatch>
</cftry>
</cfif>
How to configure Railo – Tomcat – Apache on MAC Lion Mountain 10.8
Last week I updated my operating system from Snow Leopard to Lion Mountain 10.8, system has upgraded itself.
Only two problems I faced:
1) Little Snitch got removed (V 2.2), I had to buy Licence for upgrade of version 3.02 – Lion cost me more 😦
2) I had ColdFusion 9.01, which stopped working as Lion upgrade had reinstalled Apache removed old httpd.conf and httpd-vhost.conf files (actually renamed them as httpd.conf~previous.
I tried to move virtual sites from old to new but it didn’t work.
Web Sharing option got removed from System Preference – To get it back I found this post which provides a tool to get it in Sys Pref under Other:
Explanation, good article to read: Restore Web Sharing in Mountain Lion
Get the tool from here: WEB SHARING IN OS X MOUNTAIN LION
I made few changes to Apache config files, by default it uses web server document folder here:
/Library/WebServer/Documents
I have changed this and few other settings in httpd.conf (/private/etc/apache2/)
1) Find ServerAdmin and change email address to yours one (around line no 153)
2) Find ServerName and change it to cfdev also add following in hosts file (/private/etc/)
127.0.0.1 cfdev (now you can get to your webserver by localhoost/ cfdev/ 127.0.0.1)
Make sure you uncomment this line (at line no 481) Include /private/etc/apache2/extra/httpd-vhosts.conf
3) create a folder sites or whatever name you waant to give at root level
4) Find DocumentRoot (line no 169) and change it to “/sites”
5) Find < Directory and change it with “/sites”
6) Open file httpd-vhost.conf from /private/etc/apache2/extra/
7) Uncomment NameVirtualHost *:80 (Line no 19)
8) Add following virtual host (default) site
<VirtualHost *:80>
DocumentRoot “/sites”
ServerName cfdev
DirectoryIndex index.html
</VirtualHost>
9) Add / Create index.html in /sites folder as a place holder
10) sudo apachectl restart (to pick-up the changes
now open browser and browse http://cfdev or http://localhost and you should see your default web page
Railo Installation:
Download your railo installer from here
Scroll down and pick MacOS installer infront of Railo Server with Tomcat 7 title
Open it up and follow the default steps:
It will normally Install under this location and picks port 8080 – /Library/Railo/tomcat/
now if you browse http://localhost:8080/ you should see the tomcat page
1) Open web.xml from tomcat/conf folder
Add following at around line 422 (This will help if you use CFWheels frame-work
<servlet-mapping>
<servlet-name>GlobalCFMLServlet</servlet-name>
<url-pattern>/rewrite.cfm/*</url-pattern>
</servlet-mapping>
2) Open server.xml from tomcat/conf
3) go to line no 90 and un comment following:
<Connector port=”8009″ protocol=”AJP/1.3″ redirectPort=”8443″ />
This will help us to use apache server on port 80 to create virtual sites.
at around line 123 you will see default website for this Tomcat server
create a folder under /sites folder – which will be your first local site say – firstSite
inside the folder create index.cfm
now create a virtual site in server.xml like this: (above </Engine>)
<Host name=”dev.firstsite.com” appBase=”webapps”
unpackWARs=”true” autoDeploy=”true”
xmlValidation=”false” xmlNamespaceAware=”false”>
<Context path=”” docBase=”/sites/firstSite”/>
</Host>
save the file and restart the server (Tomcat):
4) open terminal window and go to /Library/Railo/tomcat/bin
run following command: sudo sh shutdown.sh (to shutdown the server)
Now run this command to start it: sudo sh startup.sh
5) add following in hosts file: 127.0.0.1 dev.firstsite.com
now browse http://dev.firstsite.com:8080 and you will see your first site index.cfm running
6) open httpd.conf from /private/etc/apache2/
add following (Thanks to Anuj Gakhar this post)
<Proxy *>
Allow from 127.0.0.1
</Proxy>
ProxyPreserveHost On
ProxyPassMatch ^/flex2gateway/(.*)$ ajp://localhost:8009/flex2gateway/$
ProxyPassMatch ^/messagebroker/(.*)$ ajp://localhost:8009/messagebroker/$1
ProxyPassMatch ^/(.+\.cf[cm])(/.*)?$ ajp://localhost:8009/$1$2
now open httpd-vhosts.conf from /apache2/extra/ folder and add virtual site (key to this set up is you need to add virtual site pointing to the same folder with same url under both servers)
<VirtualHost dev.firstsite.com>
DocumentRoot /sites/firstSite
DirectoryIndex index.cfm
<Directory “/sites/firstSite”>
AllowOverride All
Order allow,deny
Allow from all
Options +Indexes
</Directory>
ErrorLog firstsite.error.log
LogLevel warn
</VirtualHost>
restart your apache server and
browse http://dev.firstsite.com and you should see your site running on port 80
Flex HTML ToolTip Component
To enhance the normal tool tip functionality to have html style break/ font weight for a portion of string:
You need to create a action class like this:
package com.philip
{
import mx.containers.*;
import mx.controls.Text;
import mx.controls.ToolTip;
import mx.core.*;
public class HTMLToolTip extends ToolTip
{
public function HTMLToolTip()
{ super(); }
override protected function commitProperties():void{
super.commitProperties();
textField.htmlText = text;
}
}
}
to use this set this in your main component, call this function on creationComplete:
<![CDATA[
import com.*;
private function init():void{
ToolTipManager.toolTipClass = HTMLToolTip;
myBtn.toolTip = “<font color=’#ff00ff’ >this is <b>HTML</b>Tool<strong>Tip.</font>”
]]>
The original post has strong tag but that didn’t work for me in Flex 3.5 SDK <b> worked fine
Link to the original post
Magento Site builder and issues on Mac and PHP
I decided to use Magento (eCommerce Platform for Growth) to build an e-commerce web site as it was suggested by one of my friends and I had seen good reviews of it. I downloaded community version and wanted to play with it. There is another option which they call Magento.go
I opted for the second option to download the site (Downloader).
The first problem I hit was the problem of mcrypt module for php which wasn’t included in my default php install on my Mac 10.6.8. I looked at web and found one solution which was to build the module and recompile the php from source.
Here is the link for the solution
It was little tricky to recompile as I had php version 5.3.8 and first I tried with the same version and it didn’t work and found some where that even I have 5.3.8 on my Mac 10.6 still I need to build mcrypt module using 5.3.6 (means had to do it twice:( ).
I had to put the directive in my php.ini file like this.
extension=/SourceCache/php-5.3.6/ext/mcrypt/modules/mcrypt.so
And another thing happened to me after this was my php tags like this stopped working
<?= phpinfo(); ?> Though following were working fine
<?php phpinfo(); ?>
Later I figured out that they call it short tag and to fix it I need to add following line in php.ini.
short_open_tag = On Here is the link for details reg this
Regarding Magento solution I was expecting it to be less painful experience but it wasn’t the case. There aren’t good help/ tutorials available on web.
Hope my experience can help someone.
Write long tweets/post on Twitter or Facebook
Launched web site www.TweetFace.co
TweetFace helps you add rich content – text, photos, & videos to your tweets and facebook. It will hyperbolize your posts by adding visuals and simplifies the process by auto publishing to your account. Content limit won’t stop you from expressing yourself any more.
Maximize your marketing impact by reaching your audience on Facebook and Twitter. Save time and money by managing your strategies for both networks from one convenient platform that allows you to hyper market your product and make it viral.
Tips for Better use of JavaScript
Variables notation and initialization
Object var oObject = null;
Array var aArray = [];
Number var nNumber = -1;
String var sString = ”;
Boolean var bBoolean = false;
jQuery $object
Cache results of DOM search
Twice the same DOM request, not efficient:
document.getElementById(‘tal’).style.display = ‘block’;
document.getElementById(‘tal’).value = ‘Could be cached’;
Better, save the element into a variable:
var oTal = document.getElementById(‘tal’);
oTal.style.display = ‘block’;
oTal.value = ‘Is cached’;
Example of a commented method
/**
* This method does stuff, talk about it here.
* @author Author
* @member ClassName.prototype
* @param {type} oParam Describe the parameter.
* @returns {type} Describe the return value.
*/
ClassName.prototype.aFunction = function(oParam){}
Reference: jsdoc-toolkit
jQuery to Native snippets
jQuery | Native | |
---|---|---|
$(‘#idElement’); | document.getElementById(‘idElement’); | |
$(‘#idElement’).jQueryMethod(); | $(document.getElementById(‘idElement’)).jQueryMethod() ; | |
$(‘#idElement’).click(function(){}); | $(document.getElementById(‘idElement’)).bind(‘click’, function(){}); | |
$(‘.className’); | more than one element:var aArray = $.makeArray($(‘.className’)) // turns a jQuery collection into an array of DOM elements;only one element:
$(‘.className’)[0] // returns the DOM element only; |
|
$object.val() | oObject.value; | |
$object.attr(‘name’) | oObject.name // Works for most the attributes of an element | |
$object.css(‘styleName’, ‘value’) | oObject.style.[styleName] = ‘value’ | |
$(‘.className’).each(); | var aArray = $.makeArray($(‘.className’));var nArrayLen = aArray.length;var nCounter = 0; // Here initialized at 0 rather than -1!;
for(; nCounter < nArrayLen ; nCounter++){} |
|
$object.addClass(‘className’); | oObject.className += ‘ className’; | |
$object.removeClass(‘className’); | oObject.className = oObject.className.replace(‘className’, ”); | |
$object.html(‘tal’); | oObject.innerHTML = ‘tal’; | |
$object.append(”); | oObject.innerHTML = ”;oroObject.appendChild(oChild); | |
Add Hand Cursor to Flex Tab Navigator
In Flex Tab Navigator, you can’t have Hand Cursor when you mouse over the tab’s, I had to do little hack to achieve this.
Created two functions and linked them with mouse over and mouse out events.
Say your Tab Navigator’s id is “myTabNav”:
Here are the functions which would do the trick:
private function setHandCursor(event:MouseEvent):void
{
var classInfo:XML = describeType(event.target);
var cn:String = classInfo.@name.toString();
if(cn == “mx.controls.tabBarClasses::Tab”)
{
//this will bring the hand cursor
this.myTabNav.buttonMode = true;
this.myTabNav.useHandCursor = true;
}
}
private function removeHandCursor(event:MouseEvent):void
{
var classInfo:XML = describeType(event.target);
var cn:String = classInfo.@name.toString();
if(cn == “mx.controls.tabBarClasses::Tab”)
{
// this will remove the hand cusror
this.myTabNav.buttonMode = false;
this.myTabNav.useHandCursor = false;
}
}
you need to do as above otherwise the hand cursor will either show on complete Tab Navigator
Read an Image from Local using Flex app
I was working on one small requirement to read an image from local machine and see how it can display if you change size of canvas on fly. I found an article on this and changed the code a bit to make it work as I wanted it to work. you need to create a Flex project to run it in Flash Player 10 or above otherwise it won’t compile.
I have removed the save option in this code but you can change it back by changing visible property of the button.
Thanks to following article Load Or Modify and save local images with flash player 10
Here is the modified code:
<?xml version=”1.0″ encoding=”utf-8″?>
<mx:Application xmlns:mx=”http://www.adobe.com/2006/mxml” layout=”vertical” backgroundGradientColors=”[0xFFFFFF,0xFFFFFF]” backgroundColor=”0xFFFFFF”>
<mx:Script>
<![CDATA[
import mx.graphics.codec.JPEGEncoder;
import mx.binding.utils.BindingUtils;
import mx.core.UIComponent;
import flash.net.FileReference;
import flash.net.FileFilter;
import flash.events.IOErrorEvent;
import flash.events.Event;
import flash.utils.ByteArray;
// From http://techblog.floorplanner.com/2009/05/04/load-modify-and-save-local-images-with-flash-player-10/
private var loadFileRef:FileReference;
private static const FILE_TYPES:Array = [new FileFilter(“Image Files”, “*.jpg;*.jpeg;*.gif;*.png;*.JPG;*.JPEG;*.GIF;*.PNG”)];
private var THUMB_WIDTH:uint = 240;
private var THUMB_HEIGHT:uint = 180;
private function loadFile():void {
imageView.visible = false;
loadFileRef = new FileReference();
loadFileRef.addEventListener(Event.SELECT, onFileSelect);
loadFileRef.browse();
}
private function saveFile():void {
var bitmapData:BitmapData = new BitmapData(THUMB_WIDTH, THUMB_HEIGHT);
bitmapData.draw(imageView);
var encoder:JPEGEncoder = new JPEGEncoder();
var rawBytes:ByteArray = encoder.encode(bitmapData);
var saveFileRef:FileReference = new FileReference();
saveFileRef.save(rawBytes);
}
private function onFileSelect(e:Event):void {
loadFileRef.addEventListener(Event.COMPLETE, onFileLoadComplete);
loadFileRef.load();
}
private function onFileLoadComplete(e:Event):void {
var loader:Loader = new Loader();
loader.contentLoaderInfo.addEventListener(Event.COMPLETE, onDataLoadComplete);
loader.loadBytes(loadFileRef.data);
loadFileRef = null;
}
private function onDataLoadComplete(e:Event):void {
var bitmapData:BitmapData = Bitmap(e.target.content).bitmapData;
imageView.height = Number(heightTxt.text);
imageView.width = Number(widthTxt.text);
var matrix:Matrix = new Matrix();
matrix.scale(Number(widthTxt.text)/bitmapData.width, Number(heightTxt.text)/bitmapData.height);
imageView.graphics.clear();
imageView.graphics.beginBitmapFill(bitmapData, matrix, false);
imageView.graphics.drawRect(0, 0, Number(widthTxt.text), Number(heightTxt.text));
imageView.graphics.endFill();
imageView.visible = true;
if (saveButton.visible) saveButton.enabled = true;
}
]]>
</mx:Script>
<mx:Panel title=”Read image” paddingBottom=”5″ paddingLeft=”5″ paddingRight=”5″ paddingTop=”5″>
<mx:VBox>
<mx:HBox paddingTop=”5″ borderThickness=”1″>
<mx:Label text=”Height” width=”42″/><mx:Label text=”Width” width=”50″/>
</mx:HBox>
<mx:HBox paddingTop=”5″ borderThickness=”1″>
<mx:TextInput id=”heightTxt” width=”40″ text=”180″ restrict=”0-9″ /><mx:TextInput id=”widthTxt” text=”240″ width=”40″ restrict=”0-9″ />
<mx:Button label=”Load image” click=”loadFile()”/>
<mx:Button label=”Save image” visible=”false” click=”saveFile()” id=”saveButton” enabled=”false”/>
</mx:HBox>
</mx:VBox>
</mx:Panel>
<mx:Canvas id=”imageView” width=”240″ height=”180″ visible=”false” borderThickness=”1″ borderColor=”#CCCCCC” borderStyle=”solid”/>
</mx:Application>
Setting up Flex Project for Flash Player 10 and above
I had a requirement in my new Flex project to use flash player 10.0 or up when using SDK 3.5
I found few tips from one article (but it was based on Flash Player 10 beta).
Here are the modified steps I took to sort the issue.
1) – Modify FLEX_SDK/frameworks/flex-config.xml.
Edit , replacing 9.0.124 with 10.0.0:
2) Create new Flex Project
2) Right click on your project in Flex Builder 3 and opt for properties
click on Flex Compiler and make sure Required Flash Player version has
10.0.0
The above steps should let you create your Flex app for Flash Player 10.0 and above