09Oct
Apache Cordova vulnerabilities explained

Apache Cordova vulnerabilities explained

We recently received an e-mail from Google regarding some of our apps on the Google Play Store. Unfortunately, these e-mails weren’t congratulating us on making such amazing apps. Instead, they were warning us about security issues that have made some apps vulnerable to attack. The title of the e-mail read, “Security Alert: Apache Cordova vulnerabilities in your Google Play apps”. There has been a lot of talk about these vulnerabilities online. This is our attempt to explain them in as clear and brief a fashion as possible.

Read More & Comment

13Jun
Creating a Sencha Touch Helper Class for the TestFlight SDK

Creating a Sencha Touch Helper Class for the TestFlight SDK

Our final post in this mini-series on the TestFlight SDK and PhoneGap will look at integrating it with a Sencha Touch application.

 

As you will probably be thinking we can quite easily add the JavaScript code from the first post into our Sencha Touch application and it would work fine. That’s correct, but we’re going to look at wrapping it up nicely in Sencha Touch class for easy integration.

Read More & Comment

21May
PhoneGap and the TestFlight SDK – Taking it Further!

PhoneGap and the TestFlight SDK – Taking it Further!

In our last post on TestFlight and PhoneGap we talked about how to integrate the TestFlight SDK into a PhoneGap project using the TestFlight Plugin. In this article we are going to show you how to take advantage of more of the SDK’s features including logging, collecting feedback, asking questions and customising the environment data saved.

Read More & Comment

20May
Integrating the TestFlight SDK into your PhoneGap Application

Integrating the TestFlight SDK into your PhoneGap Application

This tutorial covers how we go about integrating TestFlight’s (www.testflightapp.com) SDK into your PhoneGap (aka Cordova) iOS application. If you don’t know about TestFlight yet I suggest you head over there right now and sign up – it is an invaluable way of distributing and managing your iOS (and soon Android!) applications and builds. And did I mention it’s completely free? You will need an account to complete this tutorial so get down there now!

Read More & Comment

20May

Retrieving References to Internal View Components

The Problem

When adding logic to Sencha Touch views we often need to grab references to internal Components to manipulate them.

We find ourselves having to either cache a reference to items by creating them individually or adding getter methods that performed a ComponentQuery or that delved into the items collection.

Read More & Comment

28Feb
Documenting your Sencha apps with JSDuck

Documenting your Sencha apps with JSDuck

strong>JSDuck is an API Documentation generator created to make documenting Ext JS, Sencha Touch and any other JavaScript applications a walk in the park. JSDuck was originally created by Rene Saarsoo but is now maintained by SenchaLabs and is available on GitHub.

Read More & Comment

19Feb
Localising Sencha Touch and Ext JS applications with Ux.locale.Manager

Localising Sencha Touch and Ext JS applications with Ux.locale.Manager

Using the Ux.locale.Manager extension

This blog post is going to discuss how to use the excellent Ux.locale.Manager extension (created by Sencha’s Mitchell Simoens) which allows us to easily integrate localisation into our Sencha Touch and Ext JS applications.

We will focus primarily on Sencha Touch in this tutorial but the principles and techniques can equally be applied to Ext JS 4 projects without too many tweaks.

By the end of the article we should have achieved the following:

  • Integrated the extension with a blank Sencha Touch project.
  • Explained the configuration options available.
  • Demonstrated its use with an example
  • Created our own overrides to customise it further
  • Dealt with more complex situations such as DataViews

Read More & Comment

10Dec
Constructing a complex form layout with Ext JS 4

Constructing a complex form layout with Ext JS 4

In previous releases of Ext JS complicated form layouts were quite difficult to achieve. This was due to the nature of the FormLayout, which was required to display labels and error messages correctly, and how it had to be combined with other nested layouts.

 

This article is an adapted excerpt of the Ext JS 4 Web Application Development Cookbook.

Read More & Comment

20Nov
Ext.ux.TouchCalendar – A Sencha Touch Calendar component

Ext.ux.TouchCalendar – A Sencha Touch Calendar component

Overview

Ext.ux.TouchCalendar is an extension and series of related plugins that allow a calendar component to be integrated into Sencha Touch 1 and 2 applications.

Links to the repository, documentation and demos (along with some inline demos) can be found further down this post.

Read More & Comment

30May
Dynamic Sencha Touch Forms : Part 3 : Adding form fields on the fly

Dynamic Sencha Touch Forms : Part 3 : Adding form fields on the fly

After a comment from Brandon looking for advice on adding form fields on the fly, I thought it would be worth a mini blog article to explain it.

 

What we want to do is add a button to our form that, when tapped, will add a new field to the form. By adding this functionality we can allow users to enter arbitrary amounts of data. This can be applied to situations such as, when entering ingredients for a recipe (we don’t want to restrict them to a set number, nor do we want to prepopulate the form with too many fields); adding qualifications to your CV (not everyone has the same number of qualifications so how do we allow them to enter the right number?).

Read More & Comment

06May

Dynamic Sencha Touch Forms : Part 2 : Dynamically loading Select Fields based on previously selected values

Firstly, apologies for the lateness of this follow up post!

 

The aim of this post is to describe how we can use Select Fields (combo-boxes) to create a form whose options change based on the previous selections made by the user. So basically when a user makes a selection from the first Select Field we want the next one’s possible values to change, reflecting the choice made.

The scenario we will use is a simple form where the User can choose a Country and then a City from two Select Fields which could be used in a form where a User completes their Address.

Read More & Comment

04May

20 Things To Avoid/Do When Getting Started With Ext JS & Sencha Touch

When learning a new topic people often make the same mistakes and follow the same bad practices as each other. It usually follows by them realising that what they’ve been doing for a few days/weeks/months is a bad way of doing it and wondering how they didn’t realise earlier.

 

In this article we’ve put together a (non-exhausted!) list of a few of the things we’ve picked up and things we recommend you do when starting out with Ext JS (hey, even you veteran developers might learn something new!). These things have come up through our own experience; through seeing and replying to the same issues on the forums again and again; and just general good programming practices.

Hopefully this will jump you a few rungs up the ladder of learning Ext JS and help you avoid falling into the usual traps!

Read More & Comment

08Mar

Ext.ux.touch.ListOptions : Add a Twitter style menu to your List Items

Overview

This plugin duplicates the functionality found in Twitter’s mobile apps where an options menu is exposed after swiping over an item in a list. The plugin was created as an ‘I wonder if that’s possible’ type project and serves to prove once again that anything native apps can do Sencha Touch can do too.

Read More & Comment

08Mar

Ext.ux.touch.ListOptions : Demo

Downloadable demo of Ext.ux.touch.ListOptions.

Read More & Comment

07Mar

10 Reasons Why Ext JS 4′s Charts Are Awesome

The new Charting package that is shipping with the latest Ext JS 4 Preview is fantastic and really does dwarf the previous releases offering (which was also very good). I’m going to outline a few of the key features that make it so good.

Read More & Comment

03Mar

HOW TO: Dynamically Change Layout Based on the User’s Device with Sencha Touch

Occasionally we will want to tailor the layout of our app to suit the device that the User is viewing it on. Generally we want to do this to take advantage of the increased screen real estate made available by devices such as tablets compared to the usual phone or iPod. For example, showing a list of search results alongside a map rather than having them one behind the other in a card layout.

Read More & Comment

22Feb

How To: Integrate JS Builder 3 with Eclipse or Aptana on Windows

Overview

Integrating JS Builder 3 with Eclipse or Aptana may save you some time building your Javascript application for a testing or production environment.

The aim of JS Builder is, ultimately, to make your website or application load quicker. It does this by combining your Javascript and CSS files, minifying them and outputting them to fewer files. You may, for example, opt to have one CSS file, and two Javascript files (Ext-all.js and app.js). This results in far fewer requests to your server which, although the individual file sizes are larger, boosts performance.

Read More & Comment

31Jan

Ext.ux.touch.MapLoader : Dynamically load map points as you pan around a map

This plugin allows you to have your map dynamically load points of interest as the user pans around the map allowing you to minimize the amount of data you have to fetch from the server and minimize the number of markers on the map speeding up performance by only dealing with points that are within the map’s visible area.

This demo loads randomly generated points onto the map as you pan and zoom. The markers are numbered based on the batch that they were loaded in to give an idea of the plugin working.

Read More & Comment

23Jan

Dynamic Sencha Touch Forms – Part 1 – Enabling/Disabling Fields based on form selections

This tutorial is going to form a small series about creating dynamic forms that react to previous user input so you can keep your forms tidy and simple without the bloat of extra fields and so you can populate fields dynamically based on other selections.

 

In this tutorial we will start with the simple case of only wanting to show/enable fields when users have selected a specific value from, for example, a dropdown list.

Read More & Comment

20Jan

Slow ASP.NET Development Server (Windows 7)

I recently upgraded to Windows 7 and found that running a website using the ASP.NET Development Server on Visual Studio 2008 is really slow!

 

An Ext JS web application I’m working on at the moment was sometimes taking up to a minute to load as I don’t build the javascript files every time I edit the code. I was even finding that images were taking between 2 and 3 seconds to load.

Having tried altering a few settings and playing with my anit-virus I turned to search and it lead me to reading this:

Read More & Comment

19Jan

HOW TO: Create a Sencha Touch Plugin – Part 2 – making Ext.ux.PanelAction

If you haven’t already read Part 1of this mini blog series then I recommend you do before reading any further, but if you’re fairly confident with the basics of plugins then you can probably manage alright!

 

Quick Recap

In the first post we learnt the basic structure of a plugin is that it extends the basic JavaScript Object class and must at least contain a single function called “init” which takes one parameter that is a reference to the parent component that the plugin is used in. We also learnt that the init method is called when the parent component is initialised but before it is rendered.

You can read the full HOW TO: Create a Sencha Touch Plugin – Part 1 post here.

Read More & Comment

18Jan

Ext.ux.PanelAction: Add action buttons to floating Sencha Touch panels

Plugin Overview

This plugin can be applied to panels to give a simple and flexible way of adding action buttons to a panel. It could be used as a simple close button or as the submit button on a form.

Although very simple we hope it might be of use to someone else who is looking for an alternative way of performing actions on floating panels.

Read More & Comment

18Jan

HOW TO: Create a Sencha Touch Plugin – Part 1

What is a Plugin and why create one?

A plugin is a class that adds functionality/features to a parent component by adding or modifying its behaviour and/or look after its instatiation. By creating a plugin you can reuse it and apply its behaviour to any number of components without duplicating code and effort. To use a plugin in a component you simple instantiate it in the component’s ‘plugin‘ config option. An example of a plugin might be one which adds a help icon after each form field providing the user with help text on how to fill it in. If you didn’t create a plugin for it you would be required to manually code it for each form field which would be cumbersome and time consuming. So, hopefully I’ve convinced you of the merits of creating plugins to allow maximum code reuse and to make your lift a whole lot easier! Now how do we actually create one…?

Read More & Comment