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

Coldfusion : CF11 destroys charts... what is alternative

I was trying to run my charts in CF11 which I had already created in CF9 but it seems that coldfusion 11 has major changes done in chart engine and Adobe has not considered backward compatibility for charts.

Following is the simple code to generate the chart in CF9 which I have written earlier.

<cfchart style="blue">

    <cfchartseries type="pie">

        <cfchartdata item="New car sales" value="50000">

        <cfchartdata item="Used car sales" value="25000">

        <cfchartdata item="Leasing" value="30000">

        <cfchartdata item="Service" value="40000">

    </cfchartseries>

</cfchart>

Following is the output I got in CF9- 

When I tried to execute the same code in CF11, I am getting error – 

Actually right now there is no any short cut available other that building the whole charts again with the attributes provided in the CF11 or need to use zingchart engine to create chart i.e JASON based styles instead of xml file based styles.

The reason of the above error is now coldfusion 11 is using JSON file to render chart styles as follows -

<cfchart

    format="html"

    style = "JSON filename"> 

</cfchart>

  

OR

  

In build attributes will be used to render style of the chart.

<cfchart 

    alpha = "value between 0 and 1"

    arrows = "JSON string representation"

    aspect3D = "JSON string representation"

    background = "JSON string representation"

    bevel = "JSON string representation"

    border = "JSON string representation"

    backgroundColor = "hexadecimal value|web color" 

    chartHeight = "integer number of pixels" 

    chartWidth = "integer number of pixels" 

    crosshair = "JSON string representation"

    dataBackgroundColor = "hexadecimal value|web color" 

    fill = "JSON string representation"

    font = "font name" 

    fontBold = "yes|no" 

    fontItalic = "yes|no" 

    fontSize = "font size" 

    foregroundColor = "hexadecimal value|web color" 

    format = "flash|jpg|png|html" 

    gridlines = "integer number of lines" 

    height = "height in pixels"

    ID = "chart identifier"

    labels = "JSON string representation"

    legend = "JSON string representation"

    labelFormat = "number|currency|percent|date" 

    marker = "JSON string representation"

    markerSize = "integer number of pixels" 

    name = "string"

    pieSliceStyle = "solid|sliced" 

    plot = "JSON string representation"

    plotarea = "JSON string representation"

    preview = "JSON string representation"

    refresh = "canvas|flash|svg|vml"

    renderer = "canvas|flash|svg|vml"

    scales = "comma-seperated list of axes"

    scaleFrom = "integer minimum value" 

    scaleTo = "integer maximum value" 

    seriesPlacement = "default|cluster| stacked|percent" 

    show3D = "yes|no" 

    showBorder = "yes|no" 

    showLegend = "yes|no" 

    showMarkers = "yes|no" 

    showXGridlines = "yes|no" 

    showYGridlines = "yes|no" 

    sortXAxis = "yes|no" 

    tipBGColor = "hexadecimal value|web color" 

    tipStyle = "MouseDown|MouseOver|none"

    title = "title of chart"

    tooltip = "JSON string representation"

    url = "onClick destination page" 

    xAxis = "JSON string representation"

    xAxis2 = "JSON string representation"

    xAxisTitle = "title text" 

    xAxisType = "scale|category"

    xAxisValues = "Array of values"

    xOffset = "number between -1 and 1" 

    yAxis = "JSON string representation"

    yAxis2 = "JSON string representation"

    yAxisTitle = "title text" 

    yAxisType = "scale|category"

    yAxisValues = "Array of values"

    yOffset = "number between -1 and 1">

    zoom = "JSON string representation"

</cfchart>

I am part of the discussion going on the following adobe community thread but till now there is no solid fix done after few round of hotfix testing.

We are waiting for some hotfix from adobe.

https://forums.adobe.com/thread/1535441

But seems like this fix also will be major change and will come with another release, till that time hold the migration to coldfusion 11 if you have created huge amount of charts.

Update : This issue has been fixed in the Pre-release version 11.02.xxxxx.

Please check my below post -
http://dattatrayshindecoldfusion.blogspot.sg/2014/11/coldfusion-11-cfchart-issue-while-using.html