Quick Tip: PhoneGap and WebSQL – Return the ID of the Last Inserted Record
I’ve been doing some work with PhoneGap and WebSQL for a proof of concept at work and I thought I would share this code snippet about how to return the ID of the last record inserted into the WebSQL database.
function addCompany(company, onInsert)
{
db.transaction(function(tx) {
tx.executeSQL('INSERT INTO tbl_company(companyName) VALUES(?)',
[company.companyName],onInsert,onError);
}
}
function onInsert(tx,result)
{
alert(result.insertId);
}
Calling a LiveCycle Process from a PhoneGap Application
Calling a LiveCycle process from a PhoneGap application sounds complicated but in reality it couldn’t get much easier. Since LiveCycle ES 2.5 every LiveCycle process that is created automatically has a REST endpoint added. The REST endpoint will accept both GET and POST requests. By default the REST endpoint requires authentication but this can modified to allow anonymous access in the LiveCycle Administrator. (Modifying security settings for a service)
The REST endpoint makes invoking the LiveCycle Process a simple ajax call. The JavaScript code below is utilizing the jQuery ajax library (jQuery.ajax()) to invoke the LiveCycle Process and pass in the required input variable, inputXML, to the process.
var params = new Object();
params.inputXML = xml;
$.ajax({
type: "GET",
data: params,
url:"http://www.yourlivecycleserver.com/rest/async_invoke
/Digital Citizen/process/ScreeningApplicationProcess:1.0",
success: function(data){
//execute on success;
},
error: function(data){
//execute on error;
}
});
In this particular case the LiveCycle process is a long lived process and returns the process ID as the result of the ajax call. As I noted at the onset, calling a LiveCycle process from PhoneGap sounds way more complicated than it actually is!
A quick PhoneGap Build tip: Including phonegap.js
When it is the simplest things that trip me up I like to do a quick post, just in case anyone else has this problem in the future. I have been doing a lot with PhoneGap and PhoneGap Build lately and up until this point I had only deployed an app to Android. All was working well until I deployed to iPad and then I got numerous errors.
- gap:["Network Status","getConnectionInfo","Network Status0",true]
- gap_callbackServer
- gap_poll:
This was caused by including a specific version of the PhoneGap javascript library. Along with PhoneGap Build creating all the necessary native wrappers it also will include the correct version of the PhoneGap javascript library if you simply add the script tag with the source set to phonegap.js.
<script source="phonegap.js"></script>
If you haven’t checked out PhoneGap or PhoneGap build, I highly encourage you to!
DiceJS – A Javascript Dice Roller
I have been taking an interest in gaming in my spare time and in particlar HTML5 gaming for mobile. My HTML and Javascript chops were in mothballs over the past few years as I was focused on Adobe Flex and Adobe AIR development so I decided I’d dust them off and see what I could do.
I like simple games and a lot of times those games involve rolling dice. I decided to put together a simple piece of Javascript code to do just that. DiceJS allows for inputting the number of dice to be rolled and the number of sides on each dice. The default is for a 6 sided die to be rolled once. It’s pretty simple and straight forward.
Here’s a sample: Dice JS Sample
Here’s the source: diceJS.zip
I welcome any feedback or comments!
Enjoy!
State of California (CA.gov) CQ Templates
I’ve spent the last few months really digging into Adobe CQ. I’ve listed several resources in the Adobe CQ – Resources for Learning entry and that’s still the best place to start. However, I also know that sometimes it helps to learn by looking at how things are built. I developed a set of Adobe CQ templates for the State of California (CA.gov) based on their templates that are available publicly at: http://www.webtools.ca.gov/Downloads/
I’ve created an Adobe CQ package for easy download and installation into any Adobe CQ instance.
State of California (CA.gov) Package: CA.gov-Templates-1.0.zip
The package contains 3 different templates: basic, basicTwoColumnLayout and ribbon
The structure of the package:
CA.gov-Templates-1.0:
- /apps/ca/components – This is the directory where the components that are used for the templates are.
- /apps/ca/templates – This is the directory where the templates are.
- /etc/designs/ca – This is the directory where all the images for the templates are stored.
If you have any questions, feel free to post them in the comments and I will answer them as quickly as possible.
Creating a Custom Form Constraint in Adobe CQ
One of the out of the box features that comes with Adobe CQ is CQ Forms. ( Documentation ) CQ Forms allows end users to build forms using the same drag and drop interface they use to author content.
CQ Forms comes with several out of the box constraints, or validation patterns that form data must match, including constraints for date, email and numeric.
The constraints use a regular expression to handle the validation. Creating a new constraint is a simple as copying and pasting an existing constraint, updating a few properties of the new constraint in the JCR and supplying a valid regular expression.
The following example will illustrate how to create a constraint for a Social Security Number (SSN).
Using CRXDE the constraints can be found stored with the rest of the foundation form classes at /libs/foundation/form/constraints.
With CRXDE it is easy to create a new constraint from an existing constraint. To accomplish this, right-click on an existing constraint folder, in this case “numeric” was selected, and choose “Copy.” Next, select the root constraints folder, right-click and choose “Paste.” CRXDE will then prompt that there is name conflict and ask for a new name. For this example, “ssn” will be used.
Once the new constraint has been created the properties for the constraint will need to be updated in the JCR. In order to handle this, the “ssn” constraint folder must be selected. The Properties panel will display the current properties of the constraint which were copied over. Three properties, constraintMessage, hint and jcr:title will need to updated to fit the new SSN constraint.
Once this is completed, all that is left to do is update the two files that make up the constraint: (they are pretty straight forward)
- clientvalidation.jsp – This handles the validation client side.
- servervalidation.jsp – This handles the validation server side
For the clientvalidation.jsp the following line of code needs to be updated with the new regex: (This is the regex I am using for SSN validation)
final String regexp = "/^\\d{3}[- ]?\\d{2}[- ]?\\d{4}$/";
For the servervalidation.jps the following line of code needs to be updated with the new regex:
final Pattern p = Pattern.compile("^\\d{3}[- ]?\\d{2}[- ]?\\d{4}$");
Once the files are updated, the new constraint will be ready to use and appear in the constraint dropdown list. The value of the jcr:title property will be used to display the constraint in the dropdown list.
If the user enters a value in the field with the SSN constraint and the pattern does not match regex the user will get a prompt to enter a valid SSN.
This technique can be used over and over again to create any number of different form constraints needed. Please feel free to post comments or questions.
Adobe CQ – Resources for Learning
First of all, what is Adobe CQ? Rather than reinvent the wheel, I’m going to send you here: http://www.day.com/day/en/products.html. This provides the entire overview of the Adobe Web Experience Management Platform. There are also some very informative screencasts here: http://www.day.com/discover Finally, there is a Deep Dive Webinar available here: http://seminars.adobe.acrobat.com/p3jzi4dypsq/
I’ve spent the last several months learning Adobe CQ and am going to provide you the links to what I found the most beneficial in getting started.
The Documentation:
http://dev.day.com/docs/en.html
Download and Installation:
http://dev.day.com/docs/en/cq/current/deploying/installing_cq.html
Just do the Quickstart installation. It doesn’t get much easier.
The Basics:
http://dev.day.com/docs/en/cq/current/developing/the_basics.html
First Steps for Developers:
http://dev.day.com/content/docs/en/cq/current/getting_started/first_steps_for_developers.html
Developing Components:
http://dev.day.com/content/docs/en/cq/current/howto/components_develop.html
How to Create a Fully Featured Internet Website:
http://dev.day.com/content/docs/en/cq/current/howto/website.html
If you read these articles and work with CQ to do the samples, you should have a basic knowledge of what CQ is and how powerful it can be. If you
Creating a Custom Pod for Adobe Connect with Adobe Flex
Adobe Connect is an online collaboration tool that facilitates online meetings as well as training. More information about Connect can be found here: http://www.adobe.com/products/adobeconnect.html. Connect uses individual pods to compose the application as a whole. There are pods for chat, rosters, video sharing, screen sharing, etc. The host of the meeting is able to choose what pods make up the collaboration space.
Using Adobe Flex, developers are able to create custom pods! For Connect 8, the current version, only Flash Player 9 is supported thus making Flex 3.5 the latest version of Flex that can be used. The next version of Connect, currently in development, will upgrade the Flash Player to the latest version.
For my first custom pod I decided to build something simple, yet useful, and chose to develop a RSS reader. The RSS reader would allow users to add feeds to the Room Feeds for everyone to see as well as keep track of the feeds that the user had added in My Feeds. Users would also be able to visit the sites of entries from the feed as well as share a specific entry with the room in a Shared RSS Entries list. These sections of the pod were all put together quickly with Flex using Adobe Flash Builder.
Connections:
Because the feeds needed to be saved, a database (MySQL) and a little Adobe ColdFusion were necessary to store the RSS feeds as the Connect SDK doesn’t provide a mechanism to store data between Connect sessions. Here is where I ran into my first issue. I was using Flash Remoting to call my ColdFusion components and because Connect only supports Flash Player 9 there is a security bug that causes an error to be thrown when calls are made. (This is rectified in the next version of Connect) I had already written all my ColdFusion components with Flash Remoting in mind so I ended up writing a ColdFusion layer on top of the components that supported the HTTPService in Flex which is unaffected by the security issue.
The Shared RSS Entries list was the only other piece of the puzzle that wasn’t straight forward. A users normal interaction with the RSS reader will not effect any other users interaction with the application. In the case of the Shared RSS Entries list the Adobe Connect SDK supports syncing of the application data and state between users. Every custom Adobe Connect pod must have a SyncConnector object. The SyncConnector is provided as part of the Adobe Connect SDK. In order for the Shared RSS Entries list to work, a SyncSwfEvent must be listened for and dispatched. This event will be caught by any version of the RSS reader custom pod and handled. In the case of the Shared RSS Entries list, an ArrayCollection that is bound to a list is updated with the the URL and title of the RSS entry to be shared.
There are a lot of possibilites for Connect custom pods and I am sure this will not be the last one that I develop. If you have any questions please feel free to comment on this post or send me an email. All of the code for this project and links to the documentation for the Connect SDK are below! I did have to remove my ColdFusion server information from the code, so if you want to run this yourself you will need to provide a ColdFusion server and a database to house the saved RSS URLs.
Files and Documentation:
ConnectRSSReader.fxp.zip
http://www.underprise.com/wp-content/uploads/2011/11/ConnectRSSReader.fxp_1.zip
This the Flash Builder project that has all the MXML and ColdFusion code.
Connect SDK
http://www.adobe.com/devnet/adobeconnect/sdk-eula.html
Donwload the SDK and ASDocs as well as sample applications
Adobe Connect 8 Collaboration Builder Toolkit SDK
http://help.adobe.com/en_US/connect/8.0/collaborationbuildersdk/connect_8_collaboration.pdf
Getting started with the Connect SDK
Adobe Connect Exchange
http://www.adobe.com/cfusion/exchange/index.cfm?from=1&o=desc&event=productHome&s=5&exc=14
Download other Connect custom pods and applications as well as upload your own.
The Future of Adobe LiveCycle
With all the Adobe news lately, I wanted to make sure everyone knew the future of Adobe LiveCycle. Here is the statement from Arun Anantharaman, vice president and general manager, LiveCycle and Adobe Connect.
“Since Adobe’s entry into the Enterprise market in 2002 with the acquisition of Ottawa-based Accelio, we have built a large portfolio of LiveCycle customers. We will continue to sell and support our LiveCycle products in the government and financial services markets, two areas where the LiveCycle value proposition remains especially strong. Outside of those markets, we are now planning to focus our Enterprise efforts on products targeting the digital marketer, including the Digital Marketing Suite and Web Experience Management solution. In addition, Adobe is fully committed to the success and satisfaction of our customers and we intend to build long term strategic relationships with them. We will continue to support all existing and future customers of our solutions.”
So, there you have it, feel free to ask any questions in the comments and I will do my best to get them answered for you.
Programming with LiveCycle ES2.5 in PDF!
I had a customer who requested that we create the Programming with LiveCycle ES2.5 in PDF as it was only available in HTML here: http://help.adobe.com/en_US/livecycle/9.0/programLC/help/index.html.
It would be a waste not to share this with the rest of the LiveCycle community! Here is it is! Feel free to download it and share with others. It’s not a perfect document, but it certainly helps!
Programming with LiveCycle ES2.5: (PDF)
Follow me on Twitter!
