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&#8221; 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