How to post a form (from parent window) to window popup (child window)

I was just trying to open a new window popup and condition was to send parametes to the child window (popup having some fixed width and height) by posting a form.

While searching on google, I found few suggestions like -
put target="_blank" in form but this will open a new tab

Finally, I have written following code which serves the purpose.

Below code is submitting form to popup window "Details" after clicking on link.

show_details() is function which is opening windwo with same name that we have specified form attribute "target" i.e. "details_popup" which has fixed height and width as per our requirement.

Code :

<a name="submit_form_link" href="javascript:show_details()">

<form name="frmTempSearchResult" id="frmTempSearchResult" action="Details.cfm#" method="post" target="details_popup">

                <input type="hidden" name="frmId" value="">

                <input type="hidden" name="frmUsername" value="ds">

                <input type="hidden" name="frmPassword" value="ds">

</form>

<script type="text/javascript">

                function show_details()

                {                                             

                                window.open('', 'details_popup', 'toolbar=no, location=no, directories=no, status=no, menubar=no, scrollbars=yes, resizable=no, copyhistory=no, width=1100, height=700, top='+((screen.width/2)-(1000/2))+', left='+((screen.height/2)-(900/2)));

                                document.frmTempSearchResult.submit();

                }

</script>

CF - Application.cfc/Application.cfm lookup order

Before writing this post, I was thinking that when coldfusion server get the request for page, It will search Application.cfm/Application.cfc in current directory until webroot by default and that is final.

But I was wrong.

By default coldfusion will search until system directory i.e. if we installed coldfusion on C:/ it will serach until C:/.

We can change this setting though coldfusion administrator.We can set the order in which ColdFusion searches for Application.cfm or Application.cfc if it is not found in the current project folder. We can set ColdFusion to search as follows:

§  default search order: ColdFusion looks for an Application.cfc/Application.cfm file from the current folder until the system root directory. On Windows, this could be C:\ and on UNIX, /opt.

§  till web root: ColdFusion looks for an Application.cfc/Application.cfm file from the current folder till web root.

§  in web root: ColdFusion looks for an Application.cfc/Application.cfm file in the current folder or web root.

We can change this settings  though coldfusion administrator.

Go to Server Settings à Server in CF admin.



Reference :
http://help.adobe.com/en_US/ColdFusion/9.0/Admin/WSc3ff6d0ea77859461172e0811cbf3638e6-7ffc.html

CF9: ORM (Object Relational Mapping)

Relational databases are the core of most enterprise applications. However, when you map a relational database to objects, it becomes a challenge. Object relational mapping (ORM) is a programming framework that allows you to define a mapping between application object model and the relational database.

In an object model, the application objects are not aware of the database structure. Objects have properties and references to other objects. Databases consist of tables with columns that maybe related to other tables. ORM provides a bridge between the relational database and the object model.

By using ORM, you can access and update data entirely using the object model of an application. ORM provides features such as:

§  Database vendor independence

§  Caching

§  Concurrency

§  Performance optimization

Before ORM release in coldfusion 9, database access was achieved by:

§  Managing relational data using tags such as cfquery, cfinsert, and cfupdate, which handle SQL statements.

§  Managing objects using ColdFusion components (CFCs), and object lifecycle using the application itself

§  Writing SQL queries for each CFC, even for basic CRUD (Create, Retrieve, Update, and Delete) operations.

The complexity of managing these tasks increases as your application grows.

ColdFusion ORM automates most of these tasks, which:

§  Makes application code cleaner and more manageable

§  Enhances your productivity and lets you develop database applications faster

§  Creates applications that can run faster because of built-in ORM optimizations

§  Minimizes the amount of code you write

Apart from providing a framework for mapping the object model with the relational database, ColdFusionORM provides data query and retrieval facilities.

Go through the following code files which will give idea about how CRUD (Create, Retrieve,Update,Delete) actions can be performed using ORM -

Application.cfm

<cfcomponent displayname="Application" output="true">

<cfset This.name = "ORMApplication">

<cfset This.Sessionmanagement=true>

<cfset This.Sessiontimeout="#createtimespan(0,1,0,0)#">

<cfset This.applicationtimeout="#createtimespan(5,0,0,0)#">

<cfset this.ormenabled = "true">

</cfcomponent>

Artists.cfm

<cfcomponent persistent="true">

    <cfproperty name="id" column = "ARTISTID" generator="increment">

    <cfproperty name="FIRSTNAME">

    <cfproperty name="LASTNAME">

    <cfproperty name="ADDRESS">

    <cfproperty name="CITY">

    <cfproperty name="STATE">

    <cfproperty name="POSTALCODE">

    <cfproperty name="EMAIL">

    <cfproperty name="PHONE">

    <cfproperty name="FAX">

    <cfproperty name="thepassword">

</cfcomponent>

     

Index.cfm

<!--- <cfdbinfo

          datasource="cfartgallery"

          name="res"

          type="columns"

            table="ARTISTS">

<cfdump var="#res#"> --->

<!--- CRUD OPERATIONS -  By Using ORM--->

<!--- 2. Retrieve --->

<cfset result = EntityLoad("ARTISTS")>

<!--- 1. Create --->

<cfscript>

try {

    newArtistObj = EntityNew("artists");

   

    newArtistObj.setfirstname("dattatray");

    newArtistObj.setlastname("Smith");

    newArtistObj.setaddress("5 Newport lane");

    newArtistObj.setcity("San Francisco");

    newArtistObj.setstate("CA");

    newArtistObj.setPostalCode("90012");

    newArtistObj.setphone("612-832-2343");

    newArtistObj.setfax("612-832-2344");

    newArtistObj.setemail("jsmith@company.com");

    newArtistObj.setThePassword("jsmith");

   

    EntitySave(newartistobj);

    ormflush();

} catch(Exception ex) {

    WriteOutput("<p>#ex.message#</p>");

}

</cfscript>

<!--- 3. Update --->

<cfset newArtistObj.setphone("612-832-1311")>

<cfset ormflush()>

<!--- 4. Delete --->

<cfset EntityDelete(newArtistObj)>

<cfset ormflush()>

ColdFusion 11: My First Mobile Application (Hello World)

I have created a simple Mobile Application with help of ColdFusion 11.Here I will focus on the steps in which we will create the mobile application instead of creating a complex application. After understanding of basics, we can create complex one.I am going to explain setup we require to develop a ColdFusion mobile application and how we can test it and finally how we can package it to create .apk file.CF builder 3 has in built ColdFusion server and will get automatically configured when we install it.

Step 1 - Create a mobile project and write a Code inside CF builder 3

1.       Right click on the navigator & create a new ColdFusion mobile project. Click Next.

2.       Choose blank template. Click Next.

3.       Provide name to project and check the check box ‘Use default location’. Click Next.

4.       Select ‘defaultLocal’ as server. Click Next.

5.       Check the checkbox – Create default link folder and click finish.

After this you can see the following folder structure will be created inside navigator area –

YYou can see some code comments inside cfclient tag.  This is a new tag introduced in ColdFusion 11 to support mobile development..Whatever CF code we write inside this tag, it will get converted to the HTML and Javascript. Only few tags are supported inside CFCLIENT.

Index file, by default create inside the folder when we create mobile application 

Write the following code inside index file.

<cfclient>

  Hello World !!!

</cfclient>

If you will run the above code as a normal coldfusion application then you will see the output as “Hello World !!!” but if you check the source code then you realize theat CFCLIENT is actually doing conversion of  code to the HTML and Javascript.

Step 2 – Run the code and test on simulator      

We need to use the PhoneGap Shell Application while developing your ColdFusion Mobile project to quickly test the application.

Download the one from below link -      

http://www.adobe.com/devnet/coldfusion/articles/build-your-first-mobile-app.html

To run the .apk file on desktop download bluestacks App player

http://www.bluestacks.com/

And run the above downloaded. apk file for shell application it will open the phonegap shell application -                     

        

After providing the url as shown, it will display the output –

Step 3 – Create .apk file and run the application on the mobile

PhoneGap is the adobe ‘s product which is used to create package and to create. apk file.

Before we package the application, we need to configure a few parameters in ColdFusion Builder Related to PhoneGap Build server. If you do not have an account with PhoneGap, you need to create one now. Go to build.phonegap.com to create an account.

Remember that phone gap will allow to create only one private app. To create more than 1 apps you need to purchase license for some period and that is also limited. We can create multiple public app.

There are two different ways to create package

I. Using coldfusion Builder 3

To create the package by using CF builder, we have to do some configurations. If you have adobe id then you can directely login to build.phonegap.com or if you don’t have Id then create the new account.

Before starting to create build go to the window à preferences à coldfusion à phonegap

Provide the username and password.That’s it . You are now ready to create a build. 

Steps to create a build –

1.       Right click on the mobile project and click “Generate Phonegap Build”

2.       After that build processing will get started.

If you have already create a private app in phone gap while using free trial of Phonegap and try to build second one you will get following error message.

If no error then you can see down load button as shown below.By which you can download .apk file.

II.  By using Phonegap

Instead of creating a build in CF builder you can create it using phonegap.Log in to PhoneGap with the adobe Id .After that you can choose private app or public app. 

In our case we will choose public app. In this case we need git hub path of our project. We can directly link our git hub account with Phone gap.

After successful browsing the project phoneGap will build the project and you can download .apk file.

If you want to make more advanced application with ColdFusion then check the below blog. How to create expense tracker application with coldfusion -

http://www.adobe.com/devnet/coldfusion/articles/build-your-first-mobile-app.html


Please donate if you like my work!

Donate if you like my work

Coldfusion 11 – CFCHART issue while using xml styles fixed in CF 11 update 3 hotfix

In my earlier post regarding cfchart I had stated about the problems of CFCHART in CF11.

Please go through –

http://dattatrayshindecoldfusion.blogspot.sg/2014/11/coldfusion-cf11-destroys-charts-what-is.html

OR

Check the bug no –  ColdFusion 11.0 - Bug 3756738 (cfchart style value works not as before and documented)

https://bugbase.adobe.com/index.cfm?event=bug&id=3756738

How to Install hotfix?

After installing coldfusion 11, install update 2 and after that -

Download and install prerelease hotfix for coldfusion 11 update 3  -

http://helpx.adobe.com/coldfusion/kb/coldfusion-11-updates.html

After installing the hotfix, check the version of the coldfusion administrator -

After installing hotfix, I have checked the cfm page having chart with xml styles. Following is the output-

Output in ColdFusion 9 – 

Output in ColdFusion 11 –

After looking at the result of CF9 and CF11, I think most of the problems have been fixed but still there is scope for improvements.

Javascript – Get the size of the Unicode characters

Recently I have to submit the input fields containing the 2 byte or 3 byte characters like Chinese, Japanese or Korean which was causing database error as double byte characters were increasing the length of the string.

So, it was required to check the size of string in JavaScript before submitting the form.

Use below function to get the character count by providing input string.

function countUtf8Bytes(str)

{

  var count = 0,decimal_code_point;

  for(i=0;i<str.length;i++)

  {

    decimal_code_point = str.charCodeAt(i);

    count= count + (1)+(decimal_code_point>127)+(decimal_code_point>2047);

  }

  return count;

}

You can test your code here.

Calculate Length

How it works?

Before trying anything, I think, we should know how it works. So, that we can fix any exceptional case found in the future.

If you wanted to know how this function work then please go ahead and read the below explanations.

We should know what Unicode characters are first are.

Unicode was a brave effort to create a single character set that included every reasonable writing system on the planet.

UTF-8 (U from Universal Character Set + Transformation Format) is a character encoding capable of encoding all possible characters which is called code points  in Unicode.

Every character in unicode is assigned a magic number by the Unicode consortium which is written like this: U+0639. U+0639 is the Arabic letter Ain. The English letter A would be U+0041. U+0041 is called as code point.

UTF-8 is system for storing string of Unicode code points, those magic U+ numbers, in memory using 8 bit bytes. In UTF-8, every code point from 0-127 is stored in a single byte. Only code points 128 and above are stored using 2, 3, in fact, up to 6 bytes.

Take a look at following table to understand how the code points will be stored in memory.

Table 1

From the above table, if we convert binary code hex code point to decimal, we can find decimal code points range as follows–

Bits of code point	First Code point	Last code point	Bytes in Sequence	First Decimal code point	Last Decimal code point
7	U+0000	U+007F	1	0	127
11	U+0080	U+07FF	2	128	2047
16	U+0800	U+FFFF	3	2047	65535
21	U+10000	U+1FFFFF	4	65536	2097115

So, From above table we conclude that if decimal code point any character is in range of -

•   0 - 127 then it is 1 byte character.
•  128 - 2047 then it is 2 byte character.
•  2048 - 65535 then it is 3 byte character.
•  65536 - 2097115 then it is 4 byte character.

Table 2

As given in above table, Unicode code point for character $ is U+0024 which has binary code point is 0100100 and decimal code point will be 36 (Just convert hex 0024 to decimal).So, it is 1 byte character.

Similar way, in fourth row there is Chinese character having code point as U+24B62 and decimal code point will be 150370.As it is coming in the range of 65536 – 2097115, it is 4 byte character.

Now, you might have question in your mind that why we are calculating decimal code point and checking its range.Check the javascript function that alrady written, we have used charCodeAt() javascript function to get code points. Actually this function charCodeAt() is returning decimal code points of the character.

So, In below line of our javascript function we are checking the range and adding a byte if a character is exceeding a range.

count= count + (1)+(decimal_code_point>127)+(decimal_code_point>2047);

This code will consider only till 3 byte characters.

Calculating size of the 4 byte and 5 byte characters is not possible by this method because of working of charCodeAt() function.

The charCodeAt() method returns the numeric Unicode value of the character at the given index (except for unicode codepoints > 0x10000).Unicode code points range from 0 to 1114111 (0x10FFFF).

Note that charCodeAt() will always return a value that is less than 65536. This is because the higher code points are represented by a pair of (lower valued) "surrogate" pseudo-characters which are used to comprise the real character. Because of this, in order to examine or reproduce the full character for individual characters of value 65536 and above, for such characters, it is necessary to retrieve not only charCodeAt(i), but also charCodeAt(i+1) (as if examining/reproducing a string with two letters.

  

So, if we will check the character size of 4 and 5 byte characters by using charCodeAt() then it is wrong because for characters greater than code point 65536, this function will return two point codes  and addition of their size depending on code points returned by charCodeAt()  will be wrong.

For example –

For Simplified Chinese characters, 𤭢 (U+24B62) charCodeAt() will return two code points 55378 and 57186. Each of these two characters is of size 3 byte and if we add the size then total will be 6 which will be wrong as we know by the table 1 above that 𤭢 (U+24B62) is 4 byte character.

So, here I am leaving it up to you to modified above code to consider 4 and 5 byte characters in calculation.

Best of Luck !!!

Following are the sites I have referred to come to this conclusion.

http://stackoverflow.com/questions/25994001/how-to-calculate-byte-length-containing-utf8-characters-using-javascript

https://gist.github.com/mathiasbynens/1010324

http://www.joelonsoftware.com/articles/Unicode.html

http://stackoverflow.com/questions/5290182/how-many-bytes-takes-one-unicode-character

http://en.wikipedia.org/wiki/UTF-8

http://www.unicode.org/faq/utf_bom.html