Tag Archives: Sencha Touch 2

Simple Android Back Buttons in Sencha Architect 2 & Phonegap

15 Oct 2013

As you may know Android has a back button – present as a software back button or in older devices as a capacitive button on the device itself. The question is how to hook into it and get your views to change in Sencha Touch. Sure, Sencha walks you through Routes and such, but all I want is something simple, and this technique is just that, simple and easy to understand.

This approach uses the browser’s history object and updates it with a hash comprised of the current panel’s id. As you navigate about your app the hash is updated as desired. When the user taps Android’s back button the history object’s back() method is fired. Hash changes don’t cause a page reload so your app doesn’t reload either. After firing the back() method we wait a few milliseconds and then fire our own function to update the view based on the current hash.

This works great for an app that is comprised of a single container whose children are the panels that you want to view. More complex structures would require that you get into Sencha Touch’s Routing mechanism (and to be honest, you *should* be using routes).

One Level of Navigation within a single container

Lets review a scenario that is conducive to implementing simple back button functionality – an app built with the following structure:

back_history_structure_1

As you can see this is a very simple app – a single container with one level of children.

To begin lets add 2 custom methods to our application. Start Architect, and click on the “launch” node within the Project inspector and paste the following into the code view:

Ext.define('MyApp.appHistory', {
    statics: {
        goBack: function(){
            if (location.hash.length != 0){
                var hash = location.hash.substring(1);
	            Ext.getCmp('initialView').setActiveItem(Ext.getCmp(hash));
            } else {
                MyApp.Utilities.addHashToUrl();                                      
            }
        },
        addHashToUrl: function(){
            var id = Ext.getCmp('initialView').getActiveItem().id;
            var loc = location.href;
            var hash = location.hash.substring(1);
            var root = null;

            if (loc.indexOf('#') != -1){
                root = loc.split('#');
                location.href = root[0] + '#' + id;
            } else if (id != hash){
                location.href = loc + '#' + id;
            }
        }
    }
});


Ext.define('MyApp.MyView', {
    extends: 'Ext.panel.Panel',
    requires: ['MyApp.appHistory'],
    initComponent: function() {
        MyApp.appHistory.goBack();
    }
});

Ext.define('MyApp.MyView', {
    extends: 'Ext.panel.Panel',
    requires: ['MyApp.appHistory'],
    initComponent: function() {
        MyApp.appHistory.addHashToUrl();
    }
});

What we’ve done here is add an “appHistory” object to our “MyApp” app (“MyApp” is the default namespace that Architect gives your app) and exposed two methods:

  • MyApp.appHistory.goBack() – this handles the back functionality for the app.
  • MyApp.appHistory.addHashToUrl() – this updates the location hash.

Finally we need to hook into PhoneGap’s “backbutton” event. We do so by adding an event listener within our index.html. You’ll notice the typical “deviceready” event listener wrapped by the document’s “load” listener which ensures that our code runs only when the DOM has been loaded and the device is ready:

window.addEventListener('load',function(){
	document.addEventListener('deviceready',function(e){
		// setup the back button
		document.addEventListener('backbutton', function(e){
			history.back() // go back in the browser's history
			setTimeout(function(){
				MyApp.appHistory.goBack(); // update the view against the current hash
			},100);
			return false;
		}, false);
	});
});

Looking at the above we can see that when the “backbutton” event fires we go back in the browser history then we wait a short bit of time to ensure that the location has been updated before following with the call to navigate back within the app.

The last thing to do is to update the hash from within your Sencha application. I’ve placed the ” MyApp.Utilities.addHashToUrl();” method call within my controller’s onButtonTap event which is sufficient for this example.

This is a good starting point – you’ll of course need to modify per your specific needs, have fun!

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.