Smartphone applications are predicted to overtake the desktop software market. So who will win the multi-billion-pound [dollar] application economy, and what are the new rules?

In January 2010, Apple announced to great fanfare that they had recently sold their 3 billionth iPhone application. Of course not all these applications are paid-for, but with a 30% levy taken on each and every paid-for application, Apple are taking a significant share of the revenue from the application pie. However, as a distribution channel, the AppStore is second to none, whilst the iPhone uptake is staggering, with a majority share of the smartphone market in many regions of the world. There is a significant opportunity for any developer to make a huge return on investment, assuming the idea is a winning one.

iPhone, Android, Windows Mobile, Blackberry, Nokia and now the larger form factor iPad and Kindle support the idea of applications, or will do in the near future. So what do you need to do to design and build your first application?

  1. Familiarise yourself with the rules
    Whether you’re going to build applications for the iPhone OS, Android OS or any other of the mobile platforms, you will need to familiarise yourself with how each operating system does things. Smartphone development is different from the development we are accustomed with on the Web. Reading the user interface guidelines for each platform will go a long way to developing your first application. Smartphones are personal devices and know where you are almost all the time through GPS. They have rotation detectors, compasses and multitouch screens with gestural interfaces. Only once you know what is possible with each smartphone platform can you begin to design your application.
  2. Brainstorm the issues
    This is the creative part of your application development process. You have a basic idea, but you need to take it forward into something that has features and benefits. Will the application be paid-for or free? Will it provide a service or be a marketing channel? Will it be standalone or link closely with other online presences and networks? Smartphone applications, unlike ordinary websites, invariably need to actually do something. There is an element of artificial intelligence at play, whereby the phone can actually know where it is in the world and it’s orientation, whilst the user interface is remarkably different from that of simply a mouse and keyboard. Smartphone applications can’t simply be flat catalogues, they need to do something and do it well. Whether this is booking and accessing a car as with StreetCar, buying something from eBay, paying with PayPal, creating music with RjDj, drawing pictures with Brushes, price comparison with RedLaser, reading the latest news from the Guardian, video casting with Qik or planning your journey with Tube Deluxe your app needs to be compelling.
  3. Create a prototype
    You have your compelling idea; create a proof-of-concept prototype. This prototype is used to test some or many aspects of the intended design without attempting to exactly simulate the visual appearance, content or intended interactions. Such prototypes can be used to “prove” out a potential design approach such as range of motion, mechanics, sensors, architecture, etc. Making paper prototypes, for example, is a great way to test the application rather than creating low or high fidelity wireframes and hoping for the best. Doing this also provides a perfect opportunity for people around you — friends, colleagues and family members — to try out the prototype with little fuss. Only once you’re happy with the design should you begin any form of coding.
  4. Submit early
    You have your application working. You have conducted a number of usability tests and all is looking great. It’s time to submit it to the appropriate application store. Apple has its AppStore, Android its Market Place, Nokia its Ovi Store and so on. Each store has its own nuiances, but if you’re considering an iPhone application, Apple has been know to drag its feet when approving applications for release. Apple has a much discussed approval process, with the possibility of rejection commonplace. Don’t make plans that depend on Apple. It is better to silently release the application, rather than creating a huge fanfare.
  5. Iterate often
    Once your application has been launched your work is nowhere near over, indeed it has just begun! As you gain more and more users, improvements will suggest themselves not only from within your team, but more often, from your users. Here is where you go back to stage two and start brainstorming again. Version 2 may include bug fixes, but also major feature updates. For the latter, your brainstorming will decide what is most important for the next iteration. When your next iteration is complete, the AppStore, for example, makes upgrades far easier to achieve than for normal desktop software.

If you’re planning an application that could disrupt one of the smartphones capabilities, such as Google Voice for the iPhone, it may be worth considering whether building an application specifically for that particular operating system is worthwhile. Google Voice was neither approved nor rejected by Apple for the iPhone, but has now been replaced by a fully featured HTML5 web-based application; circumventing the Apple approval process. Of course this now means that the same web-based application can be used for not just the iPhone, but other smartphones.

Now go forth and build it!

Resources

Smartphone User Interface Guidelines:

Application Development Frameworks:

  • PhoneGap an open source development tool for building iPhone, Android, Blackberry and other mobile apps with JavaScript
  • Appcelerator a mobile development platform for javascript developers

Mobile Web Application Frameworks:

  • jQTouch a jQuery plugin for mobile development
  • iUI an iPhone/iPod Touch user interface framework

Other:

Compressing your Web components will help speed up your Website. The majority of your visitors will benefit as most all Web browsers support GZip compression. You’ll want to compress all text, which includes HTML, CSS, JavaScript, XML, JSON, etc.

Apache 2.x uses mod_deflate. Much like setting expires headers, this will save you bandwidth and server load, because it allows output from your server to be compressed before being sent to the client over the network.

The deflate module is not compiled by default and must be enabled in the Apache httpd.conf file. Make sure the following is present and uncommented (remove preceding the #):

LoadModule deflate_module modules/mod_deflate.so

To set GZip compression, simply add the following to the section of your Apache vhost configuration:

AddOutputFilterByType DEFLATE text/html text/plain text/xml text/css text/javascript application/javascript application/x-javascript
BrowserMatch ^Mozilla/4 gzip-only-text/html
BrowserMatch ^Mozilla/4\.0[678] no-gzip
BrowserMatch \bMSIE !no-gzip !gzip-only-text/html

Alternatively you can add it to your htaccess file in an <IfModule mod_deflate.c></IfModule> block.

All you really need is the first line. The BrowserMatch lines are there to handle issues with older browsers such as Internet Explorer 5.

You can read all about GZip by reading Yahoo!’s Best Practices for Speeding Up Your Web Site guide.

Alternatively, read the Apache mod_deflate documentation.

Apache Ant Best Practices

Before Ant, building and deploying web applications required a series of scripts or manual processes, which often led to mistakes.

Apache Ant is a software tool for automating software build processes. It is similar to Make but is implemented using the Java language, requires the Java platform, and is best suited to building Java projects. However, that doesn’t mean it is restricted to Java projects. I use Ant increasingly for all my web development projects as it is an integral part of Eclipse, my IDE of choice. It makes building applications and releasing them across different servers far more efficient and less problematic.

When I start a new project, after creating the folder structure, I create the Ant build file. Ant defines the build process and must be used by every developer working on the project. All of the tips in this article assume that the Ant build file is extremely important, must be written with care, and maintained in version control and re-factored periodically, when the project dependencies change.

Ant uses XML to describe the build process and its dependencies. By default the XML file is named build.xml. This makes it really simple for you setup and edit different build processes. However, since Ant is relatively simple to set up, you need to follow a common set of best practices. Some of these best practices were inspired by mistakes made on previous projects, or ideas passed on to me by other developers.

Automate absolutely everything

Ant is a powerful tool. If you choose to use it, get it to do absolutely everything. Ant can integrate with your source control databases such as Subversion (SVN), run SQL scripts, change file permissions, send files across FTP, zip and un-zip files, and many more tasks besides these.

If you use Ant, only use Ant

Use Ant as a common baseline. Regardless of what IDE you use to develop your applications, set up an Ant build file that all team members use. The build.xml file is the one true build script. Make a rule that everyone should perform a successful Ant build before code is checked into version control. This will ensure that code will always build from the same build file.

Follow consistent conventions

Ant expects your build file to be called build.xml and the build’s properties file build.properties. These files should also be in the root directory of your project. Other than an insane desire to change convention and confuse other team members, don’t change this convention. Another less-well-known convention is to prefix all internal commands with a hyphen (-). It has the advantage that it is not possible to invoke targets that follow this naming convention, from the command line.

Spend time formatting the build file. Since XML is quite verbose, use tabs and line breaks to make the file readable to the human eye. Ant itself doesn’t care if the file looks pretty, but you can bet that you and your team will.

Pick meaningful, human-readable names for targets and properties. For example dir.reports is better than simple rpt. The specific naming convention is not important, beyond being meaningful to your organisation. For example, I use the following:

deploy.local
deploy.dev
deploy.test
deploy.live
-build
-clean
-concatenate
-minify
-prepare

The -concatenate and -minify commands are specific to web projects, the later using the Yahoo compressor library to minify CSS and JavaScript files.

Provide a clean target

Every build file should include a target that removes all generated files and directories, bringing everything back to its original pristine state. All files remaining after the clean should be those found in version control.

An example clean command could be as follows:

<target name="clean" description="Deletes all generated files and directories">
	<delete dir="${dir.build}" />
	<delete dir="${dir.dist}" />
</target>

Use build files for all stages of the development process (development, staging and production)

Ant standardises your build and release cycle. Therefore use it for all stages of the development process. Use it for releasing code to your local development server, your staging or user acceptance testing server and your production server. The different deployments can obviously differ slightly based upon the needs, i.e. your production build need not include the creation of dummy data, but may include a call to source control.

Make build files self-contained

A build file that relies on external dependencies is one that will be difficult to configure or has the potential to cause problems. If your build depends on additional tools, put them in your source control repository. I generally include a lib for all dependencies in my project root. This folder includes such files as the Yahoo Compressor or JSLint.

Prefer a single build file

It is possible to split the build up into several small build files, each of which is responsible for a small proportion of the overall build. This isn’t always the best idea! Breaking the build often makes it harder to comprehend the whole process. It is better not to over-engineer the project and keep to a single, well formatted build file.

If your project is split into different build files, there should always be a master build file, found in the root directory of the project, even if it only delegates actual work to subordinate builds.

Put the build.xml file in the project’s root directory

The Ant build file can reside anywhere in the project tree, but conceptually it makes sense to put the file in the project root. This keeps things clean, simple and somewhat obvious to new members to the project. Having a build file in the top-level directory also makes it conceptually easy to see how relative paths point to different directories in the project tree.

When the build.xml file is in the top-level directory, you can compile code from the command line without the need to change the working directory.

Modularise your project

Arrange your project into coherent self-contain modules.

The following shows how I typically arrange my project files.

[root directory]
	/docs
	/lib
	/src
build.properties
build.xml
task.properties

The docs folder contains project documentation, the lib folder contains libraries specific to the project and required by Ant (generally this is a link to repository containing a number of utility JAR files, such as those for SVN and FTP). Finally, the src folder contains the actual project files.

Use version control

It is important to use version control for your entire project. The build file is an important artefact that needs to be versioned along with the source code of the project. When you tag a build for release, the build file should also be included. If you then need to roll back to a previous release, you will be able to build the code based upon the build file used for that particular release (after all, build files develop along with changes to the source code).

Third-party JAR and executable files should also be maintained in your local version control. This makes it possible to recreate previous releases, after all third-party libraries are likely to develop and change as frequently as your own code. If you want or need to take advantage of these changes, it is necessary to version control the older versions.

Avoid including build output in version control. Provided that you use version control correctly, you will be able to recreate these files at a later date.

Include comments in the build file (self-documenting)

Make the build file self-documenting. Adding target descriptions is one way to achieve this. For example:

<target name="clean" description="Deletes all generated files and directories">

Internal targets should not include description attributes. Internal targets may include targets that perform immediate processing, such as file concatenation or minifying.

Another way to include help in the build file is the echo tag. You can put any amount of comment between these tags and the information is printed to screen. For example:

<target name="clean" description="Deletes all generated files and directories">
	<echo>Cleaning project...</echo>
	<echo>Deleting build directory...</echo>
	<delete dir="${dir.build}" />
	<echo>Deleting dist directory...</echo>
	<delete dir="${dir.dist}" />
</target>

Summary

By using Ant and creating and maintaining build scripts for a project, the reliance on ad-hoc manual procedures for compiling and creating websites is removed. Using a defined process with Ant, or similar build tool, removes errors across the entire project, whilst allowing teams to develop code more efficiently.

References

Holzner, Steve (2005). Ant: The Definitive Guide, 2nd Edition, O’Reilly, ISBN 978-0-596-00609-9.

Apache Ant – http://ant.apache.org

Some time ago, well almost a year ago actually, I posted an article called Parsing Twitter Usernames, Hashtags and URLs with JavaScript. From that article, it became immediately apparent that this was an issue many people were confronting and one that required an answer. Now, belatedly, it is the turn of ColdFusion to get the Twitter love.

Compared to JavaScript it is far easier to parse the URLs, Usernames and Hashtags in a tweet using ColdFusion and minor amendments to the regular expressions used in the JavaScript code.

Below is an example tweet that I’ll use for this post.

<cfset myTweet = "Woot! I've just taken receipt of my Holux M-241 GPS logger. Good call @fordie. http://bit.ly/2RsAu ##holux ##ipslogger" />

NB. For the purpose of this test, I need to double-hash the hashtags to prevent ColdFusion throwing an error.

Parsing URLs as Links to the resource

We can simply demonstrate the parsing of the link with the following code in the body of the page:

<cfset myTweet = REReplace(myTweet,'([A-Za-z]+:\/\/[A-Za-z0-9-_]+\.[A-Za-z0-9-_:%&amp;\?\/.=]+)','<a href="\1">\1</a>','ALL') />

NB. The \1 is a back reference to part of the regular expression match. A backreference stores the part of the string matched by the part of the regular expression inside the parentheses. This means you can reuse it inside the regular expression, or afterwards as I am doing in each of these examples.

The resultant HTML generated is the following:

Woot! I've just taken receipt of my Holux M-241 GPS logger. Good call @fordie. <a href="http://bit.ly/2RsAu">http://bit.ly/2RsAu</a> #holux #ipslogger

Parsing Usernames as Links to Twitter

Following on from the URL example above, we can apply a similar methodology to Twitter usernames since they can also be URLs to their associated Twitter page.

We can simply demonstrate this with the following code:

<cfset myTweet = REReplace(myTweet,'[@]+([A-Za-z0-9-_]+)','<a href="http://twitter.com/\1" rel="nofollow">@\1</a>','ALL') />

The regular expression in this case finds all instances of @username. The Twitter URL is then applied to the username.

The resultant HTML generated is the following:

Woot! I've just taken receipt of my Holux M-241 GPS logger. Good call <a href="http://twitter.com/fordie" rel="nofollow">@fordie</a>. http://bit.ly/2RsAu #holux #ipslogger

Parsing Hashtags as Links to Twitter’s Search

Finally, Twitter also allows user’s to create Hastags within their posts. Hashtags are a community-driven convention for adding additional context and metadata to your tweets. Like regular URLs and usernames, Hastags can been parsed as a URL to an online resource, in this case, Twitter’s search.

We can simply demonstrate this with the following code:

<cfset myTweet = REReplace(myTweet,'[##]+([A-Za-z0-9-_]+)','<a href="http://search.twitter.com/search?q=%23\1" rel="nofollow">##\1</a>','ALL') />

The regular expression in this case finds all instances of #hashtag. The Twitter Search URL is then applied to the hashtag.

The resultant HTML generated is the following:

Woot! I've just taken receipt of my Holux M-241 GPS logger. Good call @fordie. http://bit.ly/2RsAu <a href="http://search.twitter.com/search?q=%23holux" rel="nofollow">#holux</a> <a href="http://search.twitter.com/search?q=%23ipslogger" rel="nofollow">#ipslogger</a>

All in one

So, putting all the regular expressions together, you would end up with the following:

Woot! I've just taken receipt of my Holux M-241 GPS logger. Good call <a href="http://twitter.com/fordie" rel="nofollow">@fordie</a>. <a href="http://bit.ly/2RsAu">http://bit.ly/2RsAu</a> <a href="http://search.twitter.com/search?q=%23holux" rel="nofollow">#holux</a> <a href="http://search.twitter.com/search?q=%23ipslogger" rel="nofollow">#ipslogger</a>

Which translates as the more useful tweet:

Woot! I’ve just taken receipt of my Holux M-241 GPS logger. Good call @fordie. http://bit.ly/2RsAu #holux #ipslogger

Where to take it next

Wrap these code snippets up into a simple twitterise function could be a good starter for ten. Following that, we could also create a simple Twitter feed reader, but I’ll leave that up to you to develop.

My Work Philosophy

Okay, so many of the points below aren’t purely my philosophy, but ideas and principles I have picked up along the way throughout my [development] career. Some relate to the UNIX philosophy, or even the Zen of Python, but wherever they’re from, they can be applied to many other domains.

  • Don’t reinvent the wheel unless you really have to. Borrow code and ideas from elsewhere whenever it makes sense. The web community it great at sharing, just look at the various JavaScript libraries, the huge quantities of APIs or indeed the major players’ developer areas: Google Code, Yahoo! Developer Network, Mozilla Developer Center, Adobe Developer Connection and Dev Opera to name five I regularly refer to.
  • Things should be as simple as possible, but no simpler (Einstein). This idea is really born out of and emphasised by 37Signals’ Getting Real book. Commonly, 90% of people using an application only use 10% of it’s functionality. The key therefore is to find what people use most often and only build that functionality. If there is a requirement to add more, then sobeit. This can also apply to the code-level, the essence here being a balance between over- and under-engineering something.
  • Do one thing well (The UNIX philosophy). It is better to do one thing well, than several second-rate. This could be at the code level — think encapsulation, coupling and cohesion — or indeed at the application level — you’re never going to beat Microsoft Word, but Google and Zoho have developed compelling alternatives, but with far less features.
  • Don’t fret too much about performance — understand how to write efficient code and plan to optimise later if or when needed.
  • Don’t try for perfection because good enough is often just that. This of course is a matter for conjecture. If I were working on a personal project, I may be more stringent on perfection than say, for a client’s application. This doesn’t mean to say the client’s application would be any worse, but rather it is a question of dotting-the-is and crossing-the-ts. It also depends on your perspective and what gains can be made by aiming for perfection.
  • (Hence) it’s okay to cut corners sometimes, only if you can do it right later. I rarely adhere to this! It makes sense to do it right the first time, since bodge-jobs often come back to haunt you and result in double the effort!
  • Don’t fight it; go with the flow. This is somewhat clichéd, but the essence behind this is try to avoid getting stressed out. This isn’t always easy to achieve, but taking a step back from a situation and avoiding politics is important.

I often strive for perfection, which isn’t an entirely clever pursuit since it is almost impossible to achieve. However, in a realm of imperfection, the principles above have helped me to achieve a modicum of decent code throughout the years. They may also resonate and provide inspiration for you.

Take control of your code with these programming best practices from Kevlin Henney. At JAOO Aarhus 2008 Kevlin used a trash can, vampires, a train wreck, whiskey and much more to make you understand and remember his 13 constructive points (a programmer’s dozen) about programming and code smells.

The 13 points made by Kevlin were:

  • 0. Prefer code to comments.
  • 1. Follow a consistent form.
  • 2. Employ the contract metaphor.
  • 3. Express independent ideas independently.
  • 4. Encapsulate.
  • 5. Parameterize from above.
  • 6. Restrict mutability of state.
  • 7. Favor symmetry over asymmetry.
  • 8. Sharpen fuzzy logic.
  • 9. Go with the flow.
  • 10. Let code decide.
  • 11. Omit needless code.
  • 12. Unify duplicate code.

You can see a video of Kevlin’s presentation on the JAOO website.

ColdFusion is 13 years old. That make makes it the daddy of the web world! It does not make it any less hip or useful than the relatively new kids on the block.

Take this scenario. A company I once worked for had what can be described as a business directory built upon a licensed, yet bastardised, version of a popular ColdFusion-based CMS. It didn’t work that well! The decision was made to redevelop the application in Java. It took two years to reach the same level of functionality! What happened next? Ruby-on-Rails is what! The rest is history and beyond the topic of this post.

So, in effect, the application almost went full-circle in its development paradigm — both ColdFusion and Ruby-on-Rails can be considered Rapid Application Development environments, Java, certainly not. Why did the decision makers not stick with ColdFusion and put time aside to actually build it properly in the first place? To put it simply, they lost faith in ColdFusion; it was largely mis-understood.

The weakness of every programming language does not lie with the language itself per se — albeit it can have an important influencing factor — but rather with the ability, or indeed inability, of the developer to leverage the language in the most efficient and optimal way.

ColdFusion, like every other programming language has had and I’m sure still does have its fair share of poor developers; those people simply working with it as a means-to-an-end, rather than those passionate about the language, those people programming without understanding the fundamentals of programming or the implications of their poorly written code. This is apparent from .NET to Java, ColdFusion to Ruby, JavaScript to ActionScript.

Let’s not dilly-dally, bicker or insult one another about which is best, which one is dying and which one is not worth the computer it is compiled on. What is important is to understand the merits of each language and decide which one best suits the application, not only in technical terms, but also in terms of time-to-market, cost of development, availability of a skilled workforce etc.

ColdFusion, whether rightly or wrongly in some people’s opinion, can sit proudly amongst its peers and provide a truly compelling alternative.

Here’s how (in no particular order):

  1. Low Total Cost of Ownership – frequently, ColdFusion is described as expensive, it simply isn’t especially if you consider the natively supported functions. But to put it bluntly, if your company cannot afford the cost of ColdFusion standard, or indeed ColdFusion hosting, you have bigger things to worry about regarding the profitability of the company; you won’t be able to afford much of anything! The problem becomes not the product. ColdFusion applications are quicker to develop and developers are vastly cheaper to employ than their peers in Java or Ruby, just look at ITJobsWatch for examples.
  2. Rapid Application Development – ColdFusion vastly simplifies tasks. What would take other languages numerous lines of code to produce is efficiently encapsulated either in a tag or function or as a setting in the administrator. This is a simplistic yet indicative example: where else can you connected to a database simply with one line of code or indeed simply by name? ColdFusion changed the idea of specifying development time in terms of months and years to weeks and months or small features a matter of hours and days. Simplicity is not the mother or all evil. To be pragmatic, simplification reduces costs.
  3. Rich Internet Applications – ColdFusion may or may not have pioneered the RIA paradigm, but it has played a significant supporting role to Flash and now Flex. ColdFusion natively supports Flash remoting, providing the all important data access tier.
  4. Platform Maturity – ColdFusion 8 is built upon the latest version of Java (1.6). Along with internal improvements to the ColdFusion application, this has afforded ColdFusion unprecedented speed improvements and stability.
  5. Language Maturity – with each major release of ColdFusion comes many language enhancements added to the core. This means that previous addons, for example image manipulation, which came at a premium are now standard. Adobe and other companies that produce CFML engines are now participating in a CFML advisory committee, which aims to set standards for the core language. This is not only a sign of maturity but a letter of intent by the industry that will mean your application will work on any engine, assuming no proprietary functionality is used.
  6. The Ultimate Middleware – ColdFusion sits comfortably between any backend and front end system. Be it interfacing with a host of databases, Java, .NET, COM, Corba or connecting to classic HTML or rich Flash, Flex and AJAX frontends with little or no configuration.
  7. Feature Rich – what other web technology natively supports PDF generation, charting, enterprise-level search, AJAX, image manipulation, Atom and RSS creation, Zip and JAR file manipulation, a server monitor, Flex integration, encryption libraries, all important database connectors, webservice creation, XML manipulation, inbuilt reporting application (similar to Crystal Reports), email, FTP to name but a few? I hazard a guess at none, unless you’re happy to pay a premium.
  8. Platform Independent – since ColdFusion 6, when Macromedia redeveloped the entire application in Java, ColdFusion has been platform independent. You can install it on practically any machine.
  9. OpenSource Alternatives – BlueDragon and Railo are both significant alternatives to Adobe ColdFusion and both have opensource alternatives, the latter of the two having recently joined the JBoss community. Adobe are also considering providing a free edition to academic institutions.
  10. The Future – many commentators have mentioned Hibernate as a significant addition to the next release of ColdFusion, version 9. But having seen the prerelease notes, that is not all that will be added. Alas I’m under NDA, but rest assured, there is going to be a significant intake of breath when developers get hold of the next release. ColdFusion 8 was firmly geared towards middle management with fuzzy additions, ColdFusion 9 is set to re-address the balance with compelling language and functionality enhancements.

ColdFusion evangelism needs to step up a gear! Adobe certainly doesn’t afford much marketing budget to the product, prefering The Community do the hard work. It is not always easy convincing the decision makers that ColdFusion is a good product of choice, without Adobe’s unnerving support, but we have to work hard, break down those barriers, encroach on events outside the comfortable sphere of the ColdFusion world and demonstrate ColdFusion’s match-winning ability.

ColdFusion isn’t dying, it’s simply niche. Every niche has its place.

UPDATE: If you would like to view the ensuing debate regarding ColdFusion prompted by Aral Balkan, feel free to do so. This post should serve as a positive reminder of ColdFusion’s virtues, alongside the need for a balanced and polite debate.

On 1st 2nd September 2008 Google launched a new opensource browser project named Chrome.

UPDATE: You can download the beta project from the Google Chrome website.

Instead of me talking you through the project, Google and Scott McCloud have put together a cool little cartoon.

However, as a brief summary:

  • Google Chrome is Google’s open source browser project.
  • The browser will use the popular Webkit HTML rendering engine used in Safari and Adobe AIR.
  • The browser will include a brand new JavaScript Virtual Machine called V8.
  • The browser will include Gears to allow developers to enhance the user experience.
  • Google Chrome will use special tabs, like more traditional browsers, but set above the address and menu bar.
  • Each browser tab will run on its own process. If one tab fails for some reason, the whole browser will not need to be restarted, losing valuable work or tabs. This is similar to functionality found in Internet Explorer 8.
  • The browser has an address bar which includes a more intuitive auto-completion feature called ‘omnibox’. It is said to be less ‘irritating’ than current auto-complete/suggest functionality common to Firefox 3 or Google Suggest.
  • As a default homepage Chrome presents you with a kind of speed dial feature, similar to the one found in Opera.
  • Chrome has a privacy mode, which allows you to create an incognito window and nothing that occurs in that window is ever logged on your computer. Again, this is similar to functionality found in Internet Explorer 8.
  • Web apps can be launched in their own browser window without address bar and toolbar, much like Mozilla’s Prism project.
  • To fight malware and phishing attempts, Chrome constantly downloads lists of harmful sites.

(Click on the images to see a larger view)

Google Chrome - Opensource Browser ProjectGoogle Chrome - Opensource Browser ProjectGoogle Chrome - Opensource Browser ProjectGoogle Chrome - Opensource Browser ProjectGoogle Chrome - Opensource Browser ProjectGoogle Chrome - Opensource Browser ProjectGoogle Chrome - Opensource Browser ProjectGoogle Chrome - Opensource Browser ProjectGoogle Chrome - Opensource Browser ProjectGoogle Chrome - Opensource Browser ProjectGoogle Chrome - Opensource Browser ProjectGoogle Chrome - Opensource Browser ProjectGoogle Chrome - Opensource Browser ProjectGoogle Chrome - Opensource Browser ProjectGoogle Chrome - Opensource Browser ProjectGoogle Chrome - Opensource Browser ProjectGoogle Chrome - Opensource Browser ProjectGoogle Chrome - Opensource Browser ProjectGoogle Chrome - Opensource Browser ProjectGoogle Chrome - Opensource Browser ProjectGoogle Chrome - Opensource Browser ProjectGoogle Chrome - Opensource Browser ProjectGoogle Chrome - Opensource Browser ProjectGoogle Chrome - Opensource Browser ProjectGoogle Chrome - Opensource Browser ProjectGoogle Chrome - Opensource Browser ProjectGoogle Chrome - Opensource Browser ProjectGoogle Chrome - Opensource Browser ProjectGoogle Chrome - Opensource Browser ProjectGoogle Chrome - Opensource Browser ProjectGoogle Chrome - Opensource Browser ProjectGoogle Chrome - Opensource Browser ProjectGoogle Chrome - Opensource Browser ProjectGoogle Chrome - Opensource Browser ProjectGoogle Chrome - Opensource Browser ProjectGoogle Chrome - Opensource Browser ProjectGoogle Chrome - Opensource Browser ProjectGoogle Chrome - Opensource Browser ProjectGoogle Chrome - Opensource Browser Project


You can find out more information from Google’s blog post on the subject.

SQLite is a mostly ACID-compliant relational database management system contained in a relatively small (~500kB) C programming library. The Adobe AIR runtime includes the SQLite embedded database for use by Adobe AIR applications. This allows applications to run and store data locally and or synchronise the datastore with online repositories.

Applications that depend on user input to create a SQL statement — concatenating the user input to the SQL query — can become vulnerable to SQL Injection attacks, much like those common to web applications.

SQL Injection is a technique that exploits a security vulnerability occurring in the database layer of an application. The vulnerability is present when user input is either incorrectly filtered for string literal escape characters embedded in SQL statements or user input is not strongly typed and thereby unexpectedly executed.

Fortunately, there is a simple solution to the problem: use parameterised SQL Statements. Parameterised statements not only make your applications more secure and run more efficiently, but they also enable you to use objects, rather than literal values, in your queries. SQL injection can’t happen because the parameter values are treated explicitly as substituted values, rather than becoming part of the literal statement text.

Parameters in a SQL statement can be either named or unnamed. Below are examples of both types of statement in ActionScript and JavaScript.

Named Parameters

A named parameter has a specific name that is used to match the parameter value to its placeholder location in the SQL statement text. A parameter name consists of the colon (:) or an at (@) character followed by the variable’s name:

ActionScript 3

var conn:SQLConnection = new SQLConnection();
var stmt:SQLStatement = new SQLStatement();
stmt.sqlConnection = conn;
stmt.text = "INSERT INTO user VALUES(@title, @firstname, @lastname)";
stmt.parameters["@title"] = "Mr";
stmt.parameters["@firstname"] = "Simon";
stmt.parameters["@lastname"] = "Whatley";
stmt.execute()

JavaScript

var conn = new air.SQLConnection();
var stmt = new air.SQLStatement();
stmt.sqlConnection = conn;
stmt.text = "INSERT INTO user VALUES(@title, @firstname, @lastname)";
stmt.parameters["@title"] = "Mr";
stmt.parameters["@firstname"] = "Simon";
stmt.parameters["@lastname"] = "Whatley";
stmt.execute()

Unnamed Parameters

As an alternative to using explicit named parameters, you can also use implicit unnamed parameters. To use an unnamed parameter you simply designate a parameter in the SQL statement using a question mark (?) character. Each parameter is assigned a numeric index, according to the order in which the parameters appear in the SQL statement, starting with index 0 (zero) for the first parameter.

ActionScript 3

var conn:SQLConnection = new SQLConnection();
var stmt:SQLStatement = new SQLStatement();
stmt.sqlConnection = conn;
stmt.text = "INSERT INTO address VALUES(?, ?, ?, ?)";
stmt.parameters[0] = "123 Main Street";
stmt.parameters[1] = "Sometown";
stmt.parameters[2] = "12345";
stmt.parameters[3] = "USA";
stmt.execute()

JavaScript

var conn = new air.SQLConnection();
var stmt = new air.SQLStatement();
stmt.sqlConnection = conn;
stmt.text = "INSERT INTO address VALUES(?, ?, ?, ?)";
stmt.parameters[0] = "123 Main Street";
stmt.parameters[1] = "Sometown";
stmt.parameters[2] = "12345";
stmt.parameters[3] = "USA";
stmt.execute()

Note: Use clearParameters() to empty the statement parameters array; e.g. stmt.clearParameters().

Advantages

  1. Performance – A SQL statement that uses parameters can execute more efficiently compared to one that dynamically creates the SQL text each time it executes. The performance improvement is because the statement is prepared once and then executed multiple times using different parameter values, without needing to recompile the SQL statement. A comparison can be draw with database stored procedures.
  2. Data Typing – Parameters are used to allow for typed-substitution of values that are unknown at the time the SQL statement is constructed. The use of parameters is the only way to guarantee the type (storage class) for a value passed to the database. Using paramters therefore, implies better performance and security. When parameters are not used, the runtime attempts to convert all values from their text representation to a type based on the associated column’s type.
  3. Security – The AIR application is not vulnerable to SQL injections so common to web applications.

In a previous post, I demonstrated how to implement Dylan Verheul’s jQuery Autocomplete plugin. Not content with demonstrating one library’s plugin, it is now the turn of MooTools.

MooTools is a compact, modular, Object-Oriented JavaScript framework designed for the intermediate to advanced JavaScript developer. It allows you to write powerful, flexible, and cross-browser code with its elegant, well documented, and coherent API.

In this post I will show you how to implement the AutoCompleter plugin by Harald Kirschner. Kirschner’s AutoCompleter plugin script for MooTools provides the functionality for text suggestion and completion. It features different data-sources (local, JSON or XML), a variety of user interactions, custom formatting, multiple selection, animations and much more.

The Goal

The goal of this post will be the same as the jQuery autocomplete post: Allow the user to type a few characters into a standard form text input field and to automatically provide suggestions from which the user can select.

Prerequisites

  1. The latest copy of MooTools
  2. A basic understanding of JavaScript and JSON
  3. A server-side script that can respond to the AJAX request, in our case ColdFusion

Demo

The demo below will show how to interact with a simple ColdFusion script, but I’ll also provide more (advanced) examples in the download.

How It Works

Once the user begins to type into the form text input field, the MooTools auto-complete is activated. After a set character length and time interval (both optional), a list of items is displayed below the input field. The user can select an item with either the arrow keys or mouse.

NB. Clicking back in the input field will repopulate the auto-complete list, if options are available, so that the user can change the selection. Deleting part of the chosen item will also trigger a new selection list.

The Code

There are three parts to this demo:

  1. The page’s HTML.
  2. The server-side code to produce the dynamic page (i.e. to load the autocomplete div when the user types something into the input field).
  3. The MooTools JavaScript.

HTML Form

<h1>Example: Country Lookup</h1>
<p>Using <abbr title="Asynchronous JavaScript and XML">AJAX</abbr> to interrogate the database.</p>
<p>Example data: Australia, Bulgaria, United Kingdom</p>
<form name="frmAutoCompleteCountry" id="frmAutoCompleteCountry" action="#" method="post">
<p>
<label for="country">Country</label>
<input type="text" name="country" id="country" />
</p>
</form>

ColdFusion

Below is a simple ColdFusion component that takes a string as an argument. This string is part or all of the country name. The query results are parsed as an array and returned from the function, as JSON, to the MooTools auto-complete function.

<cfcomponent output="false">
 
	<cffunction name="getCountry" access="remote" output="false" returntype="array" returnformat="json">
		<cfargument name="country" type="string" required="true" />
 
		<cfset var qryCountry = queryNew('country') />
		<cfset var arrCountry = arrayNew(1) />
 
		<cfquery name="qryCountry" datasource="test">
		SELECT countryName
		FROM country
		WHERE countryName LIKE <cfqueryparam value="%#ARGUMENTS.country#%" cfsqltype="cf_sql_varchar" />
		</cfquery>
 
		<cfloop query="qryData">
			<cfset arrCountry[currentRow] = qryCountry.countryName[currentRow] />
		</cfloop>
 
		<cfreturn arrCountry />
	</cffunction>
 
</cfcomponent>

JavaScript

The JavaScript will attach itself after the DOM is ready — this more or less relates to when the page has loaded in the browser. Each time the text input field, with the ID of country, is changed, the Autocompleter.Ajax.Json event is fired. This makes a call to the ColdFusion component, which returns a JSON object of matched items. This JSON object is interpreted by the plugin and rendered as an HTML un-ordered list.

<script type="text/javascript" src="mootools.js"></script>
<script type="text/javascript" src="Observer.js"></script>
<script type="text/javascript" src="Autocompleter.js"></script>
<link rel="stylesheet" href="Autocompleter.css" type="text/css" media="screen" />
<script type="text/javascript">
window.addEvent('domready', function() {
	new Autocompleter.Ajax.Json(
		'country',
		'data/Country.cfc?method=getCountry&returnformat=json&country=' + $('country').getProperty('value')
		, {
			'minLength': 1, // We wait for at least one character
			'overflow': true // Overflow for more entries'
	});
});
</script>

Where to Take it Next

Unobtrusive JavaScript

As with any page that is loaded with JavaScript and AJAX functionality, it should work without JavaScript.

To achieve this with the above tutorial, you will need to replace the MooTools autocomplete functionality with an ‘interim’ page that allows a user to select from a list of items, effectively turning the input field into a simple search interface. Of course, all other form field information would need to be retained between pages.

Download the Code

The example code can be downloaded from the demo page. Included are ColdFusion and PHP examples.

« Older entries