Setting PhoneGap server in your CF Builder and Creating a Sample Mobile Application

In my previous posts we have learned how to install Splendor Beta and install Thunder Beta and the creating Cert key for Android application development.

So, now we will see how we'll set up the key in Thunder (ColdFusion Builder) and how we'll create a sample mobile application.

• Create one account in Phone Gap Server. ( https://build.phonegap.com/ )
• Go to Windows -> Preferences -> ColdFusion -> PhoneGap. You will see a screen like below:

Server URI: URL of the PhoneGap server, use what I have wrote in the screenshot.

Email Address: Email address which you have registered during account creation.

Password: PhoneGap account password.

I mainly concentrated on android build only, so we only have to provide Android key details. 

.keystore file: Browse the key store file which you have created.

Title: Title you have provided during key creation

Alias: Alias name you have provided during key creation

Key Password: Key Password you have provided during key creation

Keystore Password: Keystore Password you have provided during key creation

Then click on Apply and Ok. We added our android key and setup the builder to generate android build.

• Go to File -> New -> ColdFusion Mobile Project. Then you will see a new screen like below:

This window is for template selection, we are going to create a simple application so select blank template and click on Next. Then one new window will come like below:

 Provide the Project name and the location(Web Root) where this project will be created. Click on Next and you will get another screen.

In this window we will select server where our application will be linked, it will take default one but if you have more than one server configured in Thunder then you can select the server which you want. Then click on finish. 

Up to now we have created a project in ColdFusion Builder.

• Now, go to following URL http://ramkulkarni.com/temp/2014-02-25/ExpenseTracker_project.zip  and download the zip file and extract all the files available there. Otherwise you can go to this URL: https://drive.google.com/file/d/0B2GDR5_Jv000c3hFT1RVWDBXTk0/edit?usp=sharing  to download and extract the zip files.
• Except setting files copy and paste all other code files in your Mobile Project in Thunder and overwrite the files if it asks.

NOTE: Here my priority is to setup the mobile Application and create a build, so I'm using Ram Kulkarni's sample code. Ram is the developer who has developed this Mobile development feature in ColdFusion and it's better to refer his code. For more details you can visit his Blog: http://ramkulkarni.com/blog/creating-database-mobile-application-with-coldfusion-splendor/.

• Right click on the ColdFusion Mobile Project and then Click on Generate PhoneGap Build.
• Go to console of the ColdFusion Builder then you will see error messages for IOS build as we have not provide any key details for IOS and for android we will get a success message like below:

• Go to PhoneGap Status tab and you will see the screen like below:

For iOS we got error and for Android there is a download link. It will take 2-3 mins or less for the download link to be visible so please wait for that. Now, click on download and give the path where to download and after few mins it will show a message that download completed.

So, if you will go that location you will see a .APK file. Move that file to your android device and now you install and run the application.

This post is for the first step towards mobile development. You can refer other materials for advance concept.

Adding a CF Server into your CF Builder

I know this is a very old topic to write but many times I gets questions from our junior engineers regarding this and they makes some common mistakes while doing this. So, I'm going to share this:

Here, I am using ColdFusion Splendor Beta as my CF Server and ColdFusion Thunder Beta as the Builder.

Steps:
Open your CF builder and see the add server button present at the bottom panel of your builder as shown below. Sometimes this panel minimized with side bar please check it out.

Click on that Add Server button then it will open a new window like below:

Here in this window there are so many options but we will only consider options which are required for setting a local server.

Server Name: Any name to identify your server.
Description: Description for your server.
Application Server: Inbuilt server on which ColdFusion runs, form CF10 ColdFusion is integrated with Tomcat. So, for ColdFusion Splendor it's also Tomcat.
Host Name: Here you can provide any IP address or the host name.
Web Server Port: Port on which ColdFusion server is installed, best way to find is the port no used while accessing CF Admin Web Application in URL.

JEE Settings are not required for us.

In Other settings provide RDS user name and RDS password which you have set during ColdFusion server installation. Then Click on NEXT, you will see a new window like below:

Server Home: Browse and give your CF installation path and it will automatically take Document Root, select your ColdFusion server version then check the check box for "Use Windows Service to start/stop the server".

Click on Next, you will see a new window like below:

You don't need to change anything in this screen and click on finish and this window will be closed and you can see the server information which will be added in the bottom panel of the CF builder as shown in below image.

Here you can see the application server added into CF Builder and the status is Running. So, from here we can manage our CF server like: starting server, stopping server, search for data source present in that server and view tables in that data source..and many other things.

Hope it will save your time.

Generate Android Key using Command Line

We need Android Key while developing an Android application. Sometimes we need to set in our editor in-order to generate an android build. So, how we can generate an Android Key?

There are many ways to generate Android Key like, by using Eclipse tool and by using command line. Here we will discuss how we can generate an Android key using command line.

System Requirements: Install latest JDK in your system.

• Open command line by "Run as Administrator" option.
• Go to bin folder of JDK installation, for me it's "C:\Program Files\Java\jdk1.6.0_35\bin", for you it may be different path.
• Then type the following command:

keytool -genkey -v -keystore expensetracker.keystore -alias expensetracker -keyalg RSA -keysize 2048 -validity 10000

Here, expensetracker.keystore is the key store name and expensetracker in blue colored is the alias name.

Below is the screen shot:

Then you have to enter keystore password in the command prompt as shown below:

You can provide any key with minimum 6 length and just a note whenever you will type your password you can't see it typing in command prompt. Then it will ask other information like first name, last name, Organization Unit.., you ca provide any value as per your wish as shown below:

Then it will ask to confirm your information, type "yes" and press "Enter". Then it will ask for entering Key password, you can keep key password same as keystore or you can give a different password it's your choice then you will see a success message in the command line "Storing expensetracker.keystore" as below:

So, your key is generated and it's present in the bin folder. Go to the bin folder of the JDK and search there with file name "expensetracker.keystore". If you have provided a different keystore name then you have to search using that name. Here you will get the keystore as shown below:

We got the keystore file and can use anywhere for Android App development.

Installation of ColdFusion Builder (CF THUNDER Beta)

Installation of ColdFusion Builder (CF THUNDER): 

To download ColdFusion Thunder go to the URL "http://labs.adobe.com/technologies/coldfusion/" and login with your Adobe ID. Here are the following steps which clearly explains the installation procedure of CF Thunder

Step 1: Double click on the downloaded file, immediately a dialog box appears starting the installation process

                                

 Step 2: Click on “Next”         

             

 Step 3: Accept the license agreement and click on “Next”

 Step 4: If you want to get the ColdFusion builder plugins within eclipse go for the second option, option 1 selects standard ColdFusion builder and click on “Next”

 Step 5: A dialog box with default path set is shown .If you want you can set the path by selecting choose button and then click “Next”

 Step 6: We can also install ColdFusion server along with thunder. As we have already have installed ColdFusion Splendor first so we will uncheck that. And select the second option to associate .cfm and .cfc files with CF Builder . If you select ColdFusion installation, here you have to set the ColdFusion Administrator password and RDS password. Otherwise ignore it.          
                    

 Step 7: Once review the information and click install

  Step 8: It shows a pop up like this

 Step 9: If you see this screen, your installation process is successful

Step 10: After installation, if you receive any windows firewall messages click allow access

  Step 11: Here you have to select the default work space and then click "Ok".

Step 12: ColdFusion builder is opened

Responsive Design Issues and it's Solution in Internet Explorer( IE )

If you have worked on making an existing site to responsive then you might have faced some problems related to browser compatibility. Recently I was working on making a site responsive and I faced few challenges and I'm going to describe those below:

• My responsive design working perfectly in FF and Chrome but in any version of IE it's not working. So, what is the issue?

First go to the header of your HTML page and if you have DOCTTYPE declaration like below

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

then change it to "<!DOCTYPE html>" because this one supports HTML 5 standard and responsive design is a HTML 5 feature.

• Search for meta tag "X-UA-Compatible"

In my case my project has this meta tag with value "IE=8". So, what does it mean?? It forces the browser to load the content with IE=8 compatible mode and IE=8 doesn't support responsive, so my responsive design was not working.

What is the solution for it?? Ans: Change that meta tag value to "IE=edge". This means it sets the browser to load in latest standard. For more details about it go through this: http://www.chromium.org/developers/how-tos/chrome-frame-getting-started

• Now, my responsive design is working fine in FF, Chrome and IE9+ but what about IE8 and below version browsers?? Is there any work around for it?

Normally IE8 and below browser doesn't support responsive styles like media and all these things, to make it work in those browsers few JavaScript libraries are available and using that you can get that benefit. Following are the JavaScript libraries we can use to make it work:

- Respond

- css3-mediaqueries-js

ColdFusion Splendor Beta Installation Procedure

ColdFusion Splendor Beta Installation Procedure :

•  Open a Web browser and go to http://labs.adobe.com/technologies/coldfusion/ and login using your Adobe ID.
•  Download ColdFusion Project Splendor and ColdFusion Builder Project Thunder.
•  Save the file to your desktop.
•  Once downloaded ColdFusion Splendor and ColdFusion Builder Thunder, Double Click on ColdFusion Splendor.
• Click "Next".

•  Accept the terms and conditions and click "Next".

In the Process of Installing the ColdFusion Splendor if it asks for Microsoft Visual C++ 2012 to install. Click "Ok" and repeat the Following Procedure.

•  When you see the screen below, select "Developer Edition" and click "Next".

•  Select Server configuration and click "Next".

•  Leave the "Enable Secure Profile" check box unchecked and click "Next". As it is a development and we don't want to enable secure profile so we left it unchecked but for production server you must check it.

•  Leave all check boxes checked and click "Next". These are the services provided by ColdFusion and if in production you don't need any of the services like ".NET Integration" or "Solr Service" then you can uncheck it but in developer edition you should check all as you may need any of them in future. 

•  Leave the location at C:\ColdFusionSplendor\ and click "Next". If you want to install in a different location you can, but it is important to note that the install instructions will always reference C:\ColdFusionSplendor.

•  Select 'Enable the Built-in web server (coexist)' and click "Next".

Now the Adobe ColdFusion Splendor Beta built in web server will be configured to use port 8501. Port 8500 is already in use (ColdFusion 10)

•  Click "Next"

•  Provide a password and click "Next". Make sure you remember the password; you will need this later on in the install process.

•  Select 'Enable RDS', provide a password and click "Next". Make sure you remember the password!! In production make sure you disable RDS.

•  Leave the 'Automatically check for server updates' selected and click "Next".

•  Click "Install".

•  If you receive any Windows firewall messages, click 'Allow access'.

•  When the installation wizard is done, keep the 'Launch the Configuration Wizard in the default browser' selected and click "Done".

•  A browser window will open. Enter your ColdFusion Administrator Password and click "Login". (This is the password which we had set for CF Admin)

•  Click "Next"

• Here it's asking to migrate settings of CF Admin of other CF server present in the machine. Ex: If in your machine you have CF10 and you want to migrate data source, schedule tasks and other server related settings to migrate to CF Splendor then click next. If you don't want to migrate any settings then click "skip".

• Click "Next"

• Click "Next" 

• Once you receive the 'Setup Complete' screen, click the "OK" button.

• You will now see the ColdFusion Administrator screen.

To access this screen at a later date, you can go to: http://localhost:8501/CFIDE/administrator/index.cfm 

You have now successfully installed ColdFusion Splendor. To access the web root, you can go to: http://localhost:8501/. The web root on the file system is C:\ColdFusionSplendor\cfusion\wwwroot\.