Tag Archives: Sencha Touch

Sencha Architect 3 – Beta Available Today

19 Sep 2013

Sencha held a webinar today on Architect 3 – the next version of its gui-based mobile app development tool. Many exciting new features which points to Architect being the go-to for mobile app development.

Below are the highlights from the webinar:

Templates

Architect 3 introduces Templates such as Master/Detail views, Maps, Search, etc., to help get a jump start on common tasks.

a3b_templates

While choosing your Template you have the opportunity to select your theme (another new feature).

a3b_template_choose_theme

Extension Support

Some Architect users may have noticed that adding an extension/plugin resulted in Architect’s canvas (Architect’s WYSIWYG view) disappearing – with official Extension support that is no longer the case for extensions that adhere to the new Architect User Extensions format (.aux). You will now see your extension within your layout.

This new addition includes the ability to install extensions via Architect’s GUI as well as see the Extensions in the Toolbox and be able to drag/drop them onto the canvas.

a3b_extensions

Code Completion

This is a welcomed addition – the previous version’s code editor was functional but lacked many features found in mature IDE’s – today they announced Code Completion. You can see the methods that apply to a given object with in-line help:

a3b_code_complete

And, as you enter your code you will also get argument hints:

a3b_code_param_hint

For code coloring there are two options – “light” and “dark” themes. Customization beyond these two are not on their radar at the moment.

Theming

Theming now exposes the SASS-based themes within the Architect GUI.

a3b_theme_1a

a3b_theme_2

Edit a theme by, for example, changing a color:

a3b_theme_3

…and the SASS compiles behind the scenes.

a3b_theme_4

Two new themes add native look and feel to your apps: “Mountain View” and “Cupertino” – Android and iOS themes respectively. Oddly during the preview of the beta these two themes were absent which the presenter recognized as an issue to be resolved by the product’s release. However, you can catch a glimpse of them in this Sencha blog post (which also mentions Sencha Touch 2.3’s closer integration with PhoneGap which apparently is already present to some extent according to Sencha forum posts).

Testing

Sencha has partnered with an outfit called appurify – Architect will hook into appurify’s system to show developers how their apps will look on specific mobile oprating systems and devices, including OS revisions. Remote inspection will also be provided. Appurify integration is not yet available for the beta but should be up and running within a couple of weeks.

Sencha CMD Support

Sencha says that Architect 3 has tighter integration with Sencha CMD with additional work to be done before the public release.

Availability

Architect 3 is in public beta starting today. Release is slated for the end of October.

http://jo.my/sa3

Architect 2 and 3 can run side by side, just install to a different directory.

Pricing

Sencha Architect 3 – $399, For Architect 2 users that drops down to $259 or for Touch Bundle owners its free – the discounts will be for a limited time.

Video Training

Not part of the announcement but a reminder of this great resource: www.vimeo.com/sencha

Creating Global Variables / Objects in Sencha Architect

14 Aug 2013

There will be many instances where you don’t want to use the Sencha data model just to store some variables – there are a couple of ways to do so within Sencha Architect that are easy to do.

The first one is simply to add an external javascript file to the project’s Resources. Anything in your JS will be available to the entire app. While this works it has the potential to get messy so you’ll want to namespace everything in your custom.js document to prevent cluttering up the global namespace.

Sure that works in a pinch but lets try to add the desired global variable to the app’s namespace instead. This is essentially just like adding a custom property to any component but in this case you’re going to add it to the application itself. The app is represented by the “Application” root node in the Project Inspector. Once added the only issue then is to discover how to reference the “variable” (in quotes because what we’re really doing is adding a custom property to our Ext.application config object). Its not really an issue since as you’ll see its quite simple to determine.

To demonstrate, I have a simple app that will display a single button. When that button is pressed it will display our new property and then increment it. So then, our app looks like this:

architect_global_variables_01

To begin lets create a new Ext.application property that we’ll call “myNumber”. Locate the Application node in the Project Inspector and select it. The config panel updates to reveal the application’s config options. Enter the text “myNumber” in the filter field as illustrated below:

architect_global_variables_02

Next, click the “Add” button to the right of the filter text field. You will see this:

architect_global_variables_03

You’ve just created a custom property called “myNumber”. Now lets give it a value, in its default state the type of the property is a string as indicated by the icon to the left of the property (a circle with three horizontal dots). We want to change this to a number. Click the icon and select the “number” data type. The type icon should now contain a hash (#).

architect_global_variables_04

Next, set the value of the “myNumber” property to 0 (zero).

You may have noticed the other data types that were available for you to choose from – you can set the value to be an array of strings or objects or whatever may be necessary to meet your particular needs. For now, we just want our “myNumber” property to hold the number 0.

Ok, lets start wiring things up. Lets add a simple event to our button. Select the button from the Project Inspector. Its config will appear – click the “plus icon” found to the right of “Event Bindings”.

architect_global_variables_05

Select “Basic Event Binding” from the options that appear. You will be asked to “Choose an event by name” – type the word “tap”, then click the finish button. You now have this:

architect_global_variables_06

You have bound a tap event to the button. The next step is to add the logic which includes referencing our myNumber “Global variable”. Double-click the tap event beneath the button in the Project Inspector. The code view for the event appears.

architect_global_variables_07

Add this code (note the comments):

// this is the reference to your global variable:
var myGlobal = MyApp.app.myNumber;

// next lets populate the text field with the value of myNumber:
Ext.getCmp('myvalue').setValue(myGlobal);

// finally, we increment our global variable:
MyApp.app.myNumber++;

You should have the following:

architect_global_variables_08

Ok, so this is how we figure out how to reference our custom property – the name of your app can be found in the Application config – click the Application node in the Project Inspector panel and then scroll through the Application Configs until you find the “Name” property – in this case it’s value is “MyApp”. So then, any properties that you add in this fashion can be access via this syntax [ApplicationName].app.[variableName]. In this case it is MyApp.app.myNumber.

Note that the new property won’t actually be added unless you give it a default value so be sure to do so to save yourself some frustration.

All done, each time the button is tapped we update the text field with the current myNumber value as well as increment the myNumber property’s value.

Using the SliderFill Sencha Touch Plugin in Sencha Architect

08 Aug 2013

Sliders are pretty cool in Sencha Touch – what makes them cooler is the SliderFill plugin by Thomas Alexander. The plugin can be downloaded here: https://market.sencha.com/extensions/sliderfill.

Before SliderFill the sliders are minimalist – functional yet a tad bland:

sliderfill_before

After SliderFill – one small addition makes them much more appealing:

sliderfill_after

Adding the plugin to your Sencha Architect project is simple – there was one caveat that I encountered – an error within the plugin but it was easy to sort out. Lets walk through the various steps needed to add and use the plugin within Sencha Touch via Sencha Architect.

Create a Sample Architect Project

First thing is first – open Sencha Architect, create a new project and add a slider to your default view. I won’t walk you through that part but if you are lazy here’s a link to a sample project before the plugin was added. What we want is something simple so my example looks like this:

sliderfill_01

Download and Install the SliderFill plugin

Next, download the plugin (link is in first para above) and extract the contents. The archive has the following structure:

  • sliderfill
    • img/
    • src/
    • index.html
    • README

Curiously the README is empty – no worries – within the “src” folder are two files, what you want is the plugin itself which is called “SliderFill.js”. Copy that file and place it within the root of your project, or, if you like, create a plugins folder in your project root and place the file there. For this demonstration I’m just placing it in the project root.

Next you need to add the plugin to your project. Within architect look for the Project Inspector panel – in the screen caps provided here it is on the right. Scroll down to the bottom and look for the “Library” node. Once the plugin is added to the project it will appear as a child of that node.

sliderfill_02

To add the plugin, click the “plus” (+) icon as shown below and choose Resource > JS Resource:

sliderfill_03

You now have a new JS resource added to your project’s library. You can see a red exclamation indicator nexct to it indicating that it needs to be configured.

sliderfill_04

Select the JS library resource and its config will appear. All you need to do is to enter the path to the SliderFill.js file. As I just placed it in the project root all I need to do here is to add the file name.

sliderfill_05

Add SliderFill to a Slider

Now that the plugin is installed lets add the plugin to a slider. Select your slider from the Project Inspector. Its config options will appear.

sliderfill_06

The plugin property doesn’t exist in the config but we can add and configure it by typing the word “plugins” into the config search field and then clicking the “Add” button to create it.

sliderfill_07

We now have a new custom property within the slider’s config.

sliderfill_08

Lets set the property’s type by clicking the “type” button (to the left of the property identified by a circle icon with three dots) and choosing “Array”:

sliderfill_09

We now need to configure the plugin. The plugin will accept a configuration object which is comprised of two things: 1)The xclass that specifies the plugin, and 2) an array of class names to apply to each SliderFill background. I have a single slider handle so I’m only going to have a single class.

To add the config object click the “Edit” button that appeared to the right of the plugins property when you selected “Array” as the property type.

sliderfill_10

The editor appears:

sliderfill_11

I’ll add this object wrapped in an array literal:

[
  {
    xclass : 'Ext.plugin.SliderFill',
    fillCls : ['my_custom_slider_bg']
  }
]

sliderfill_12

Done!

…but one last thing – SliderFill Ver 1 currently generates an error:

sliderfill_13

Ok then, lets go fix it – look in your Project Inspector under the Library node where you added SliderFill.js. Double-click it to open the file as we’ve got a single line to add to fix the error:

sliderfill_14

As the error indicated lets go down to line 46. We want to go back up a couple of lines and add the following line *after* line 44 – but first we need to unlock the file – click the “Unlock” button:

sliderfill_15

Again, create new line after line 44, we will add the following code:

slider = Ext.getCmp('slider.id');

The code should look like this:

sliderfill_16

Save your project.

Style the SliderFill background

Almost done – we just need to setup some defaults and we need to specify a color for the SliderFill background. An easy way to do this is to attach a new style sheet to the project via the Library. So create a new css file, save it in the root fo your project as we did with SliderFill.js (or create a new folder for it if you like) and populate it with the following:

.x-slider-fill{
    margin:0.925em;
    position:absolute;
    height:0.8em;
    -webkit-border-radius:0.4em;
    border-radius:0.4em;
    margin-top:0.75em !important;
    background-image:-webkit-gradient(linear, left top ,left bottom, from(#0A3A86), color-stop(.5, #4C8DE7), color-stop(.95, #6BABF5), to(#0A3A86));
    z-index:1 ;
}

.x-draggable {
    z-index:2;
}

.my_custom_slider_bg{
    background-image:-webkit-gradient(linear, left top ,left bottom, from(#8b1a05), color-stop(.5, #e35e4f), color-stop(.95, #e18080), to(#6f2c22));
}

Note that last style – my_custom_slider_bg thats the class name we specified in SliderFill’s configuration object.

All that is left is to attach the style sheet. The process is the same as what we did to add SliderFill.js, except this time we will add a Style Sheet instead (note that this is a quick and dirty way of doing things – perfectly functional though if you’re familiar with SASS then you’d likely prefer to do it that way).

sliderfill_17

Select the CSS node underneath the Library and enter the path to your CSS – in my case my CSS file is called SliderFill.css.

Save your project and preview – you should see this:

sliderfill_after

Has your design view in Architect gone blank?

Sencha Architect V2.2.2 has a bug where if you add the plugin attribute to the view config the WYSIWG Design View will become completely blank as you can see in one of the above screen captures.

There are a couple of ways around this – the one I think I prefer is to create an onSliderfieldInitialize event in the controller which will apply the plugin to every slider that is initialized within your app.

To do this follow these steps:

  1. Click on your Controller node within the Project Inspector
  2. Next, Locate “Actions” and click the “Plus” button to the right
  3. Select “Controller Action” from the pop-up
  4. Next choose “Ext.field.Slider” as the target type
  5. Then select “initialize” as the event name

Architect will create the new event and display the editor for it – paste in the following code:

component.setPlugins({
    xclass : 'Ext.plugin.SliderFill',
    fillCls : ['my_custom_slider_bg']
});

That’s it, now **every** slider that you add will have SliderFill applied to it and Architect’s 2’s Design View won’t go completely blank on you.

Sencha Touch on Tizen!

14 Jun 2013

I just learned that Sencha Touch is coming to Tizen and is being made possible by a partnership between Sencha, Intel, and Samsung. This is super interesting considering a few things, the main one is that Intel had acquired App Mobi presumably for the same purpose – to provide developer tools for the fledgling operating system. While AppMobi is available today Sencha has not released a timeline for official Tizen support opting instead to mention that the feature will be coming to their toolset at a later date.

One of the features that makes Sencha a competitive toolkit for developing web apps is that you no longer need to leave the Sencha environment to package an app as they offer a native wrapper of their own via Sencha Cmd. Granted, it is young and may not have the breadth of features that PhoneGap has but the lure of not having to find the right mix of PhoneGap builds and PhoneGap plugins for a project, and discovering what is broken and the work-arounds, if any, is pretty compelling in my book.

While the open-source world can likely move faster to squash bugs than a for-profit entity I do like the implied support that comes with using the “all-in-one” development toolsets. Afterall, you’ve just bought their software so they have to offer support. Not so with the free open-sourced PhoneGap plugins. I should say though that you can get support for PhoneGap itself via a paid subscription program (Sencha has a similar support mechanism), otherwise you’re at the mercy of the open-source community for plugin support. True, they seem like a competent bunch but its still a risk and one that needs to be considered given Apple’s proclivity for changing their OS at whim. When that happens there is a cascade of issues and activity that ripples through the entire PhoneGap community. Its not fun being the end user (or customer) waiting for the kinks in that sometimes long chain to get fixed.

While Sencha Architect is a desktop app AppMobi’s approach foregoes that approach in favor of the cloud. The dev environment runs in the browser (Java) and they compile in the cloud, sort of like PhoneGap’s cloud compilation service (which, btw, has at last count 3 plugins supported which severely limits its use). Together both AppMobi and Sencha are offering solutions that are integrated and turn-key – no other software is needed and there are no other environments to learn/sign up for/install/troubleshoot, etc. Having created PhoneGap-based applications for the past two years I’m finding that such advantages are pretty attractive and I’m currently looking for a framework that has them.

As with anything in tech, the promise is one thing, actually delivering is another. PhoneGap is well entrenched and has the widest list of features (via plugins). The first Tizen device is hitting this year (said to be in Q3) and when it happens part of the announcement will undoubtedly be the developer options available. I for one will be reading forums and blogs for developer reactions to the those tools.

HTML5 is the way of the mobile future and has been for a while. Other HTML5-centric mobile OS’s are coming but none have a hardware backer on the scale of Samsung and Intel. Time will tell if Tizen will take off but its exciting to see the acquisitions and partnerships being made toward the initial product launch.

As for Intel’s involvement it is a forgone conclusion that the first Tizen device will have an Intel mobile chip in it (the revamped Atom?). Beyond the hardware and AppMobi tools they also seem to be offering a UI layer for Tizen currently known as “Obsidian”. The assumption here is that by offering a UI that would likely be optimized for the Intel silicon experience that they will be able to incentivize adoption of their chips into future Tizen devices.

It is interesting to note however that Samsung is also a chip manufacturer. As much as Intel would like to get into the phone/tablet market one can’t help but notice potential conflicts of interest in their partnership.

Formatting Credit Card Numbers – Dealing with Webkit Text Input Oddity

27 Apr 2012

Another day, another script added to my library…. I had a credit card text field in one of my Sencha Touch projects that needed to be “dash separated” while the person is typing. Below is my solution to this particular minor challenge. Please remove any other validation in your project as this already features:

  • Removal of all undesired alpha characters and symbols
  • Limited to a maximum of 16 numbers
  • Plays nice when you backspace from the end

Note that you shouldn’t try to correct a number in the middle of the string – if you delete a number the entire string gets re-written for the current string of numbers. Also, the first thing that may come to mind is the HTML 5 “pattern” attribute which accepts a regular expression with which to validate the text field value, however, that would validate as you type, not format the string in the desired manner while the typing is happening. Sencha has its own way of validating text fields which is essentially the same thing but the issue is that it also doesn’t do on-the-fly string formatting.

So here is the function itself, which works perfectly in a normal web-browser (yes, a caveat for android webkit follows):

...
    function do_ccFormat(str){
	var nums = str.substr(0,19).replace(/[^\d]/gi,'');
	var r = nums.match(/(\d){4}/g);
	if (r){	
	    var i=0, nStr = '';
	    for (;i

However, in Android 2.3.6's webkit there is some odd behavior that is a pattern that I'm sure others somewhere have come up against. So the pattern is this: first assume that you are doing some string manipulation on the keyup event, waiting for some criteria to be met at every key stroke before manipulating the string. In the case of my CC formatter its the 5th character that triggers the string re-write. So lets say you type 5 characters such as "12345". When "5" is typed the entire string is replaced with a new one that contains a new character/delimiter - like so: "1234-5". The very next character that you type will not go at the end where the cursor is but before the last character that was entered. So if we enter "6" the string ends up like this: "1234-65". Further, if you hit the backspace key you backup not from the cursor position (which is at the end of the string) but from where the last character was erroneously entered! Weird stuff! This gets worse with every new delimiter that is added to the string.

Upon inspection and some thought, I realize that replacing the value with a formatted value as you type is something that the Android 2.x webkit can't handle when it has to then figure out where the cursor should go. It seems that programatically setting the value does not update the cursor position for the field - it stays where it is. If you pay close attention when all this happens you'll notice that the cursor will quickly jump around.

I then hit upon the idea of blurring the field (thinking to therefore dump whatever erroneous machinations may be at play) and then quickly give focus back to it knowing that the act of giving focus to a field sets the cursor to the end. This works as long as you space out the blur/focus methods with a setTimeout. I spaced them out by 100 milliseconds hoping that the soft keyboard wouldn't flash. This appeared to work well Android 2.3.6 (a Samsung Galaxy S2). The keyboard would just sit there apparently none-the-wiser.

While this did seem to work it turned out to be unpredictable. In Android 2.2 the keyboard would go away and not reappear, sometimes that would happen in 2.3.6, and it does go away in Android 3.

Its unfortunate that this doesn't work in pre-ICS Android - it is what it is. Below is how I implemented it in Sencha Touch 1 - as you can see I apply it on keyup for iOS and ICS for as-you-type formatting. For pre-ICS Android I limit the keyed cc number length to a max of 16 characters and apply CC formater when the CC field is blurred (a length of 19 is needed otherwise since we are adding 3 additional characters in the form of the "-" delimiter).

I should end by saying that this obviously does not include a MOD10 check. I'll toss in my MOD10 checker at a later date as a separate article - it will include the ability to check not only entire cc numbers - which all of the readily available MOD10 checkers do - but it will also allow you to check a CC number for its **type** based on the first four digits. Until then, here's Credit Card String Formatter sample implementation:

...
items:[
  {
    xtype:'textfield',
    name:'cardNumber',
    inputType:'tel',
    maxLength:'19',//allow the 3 dashes needed to format the string to be included
    listeners:{
	keyup:function(o,e){
            if (Ext.is.iOS || (Ext.is.Android && Ext.is.AndroidVersion > 3)){
	        o.setValue(do_ccFormat(o.getValue()));
            } else { // assume old android
                o.setValue(o.setValue().substr(0,16));
            }
	},
        blur:function(o,e){
            if (Ext.is.Android && Ext.is.AndroidVersion < 3){
               o.setValue(o.setValue().substr(0,16));
               o.setValue(do_ccFormat(o.getValue()));
            }
        }
    }
  }
]
...