Author: admin

Sencha, Architect, Package, APK

Sencha, Architect, Package, APK

By | | Comments 3 comments

First of all, can I just say AAAARRRRRGGGHHHHHH & AAAARRRRRGGGHHHHHH.
Good that’s out of the way. Now shall I state what I had to do to get a build to work from Sencha Architect to generate an APK and then to put said APK onto a Nexus 7. All of this was done on a windows 7 machine using Sencha Architect 2.1 and Sencha Cmd 3.

What versions of the software you are using is very important and there are numerous posts about this stuff and they all differ depending on what versions you are using. It would appear like the very rapid pace at which Sencha are moving is creating lots of legacy posts with outdated information. So chances are this will be outdated soon as I believe Sencha Architect 2.2 isn’t that far away. Maybe this guide will still work, maybe it won’t…

Instructions

So you’ve created an app inside Architect and you’d like to see it on your Android device. Well USB debugging isn’t possible and depending on your setup you may be able to connect to your local server using the wireless features of the Nexus to see your app inside the browser but I wanted to see it as a native app. So here goes…

      1. Download the Android SDK – http://developer.android.com/tools/index.html
      2. Once downloaded, you extract it to any folder you want and inside the extracted folders you will find the file ‘SDK Manager.exe’  This will be located in the root folder of the extracted files.
      3. Run the manager, for two main reasons.
        1 – You need to download the specific drivers for the Nexus.
        2 – You will need to download other versions of the Android SDK.  (Nexus can use up to 4.1.2, current default downloaded version is 4.2)
      4. Make sure that the drivers for the Nexus are updated – They will have been downloaded to ‘{your Android SDK directory}sdkextrasgoogleusb_driver‘.  Use the system manager if required to install them.
      5. Add the platform tools folder to your PATH inside the ‘environment variable’ section of windows control panel.  This folder can be found at ‘{your Android SDK directory}sdkplatform-tools‘. It contains the adb.exe file that you will call from the command window later to pass the APK file to your Android device.
      6. Next we need to create a key/certificate which will allow the APK to install on a device. Open a command window and paste in the following. Feel free to change the values like ‘my-release-key.keystore’ to ‘yourAppKey’ and so on, but if you just want to see something on your device it really doesn’t matter (keytool is part of the java jdk ).
        keytool -genkey -v -keystore my-release-key.keystore -alias alias_name -keyalg RSA -keysize 2048 -validity 10000
      7. Now we need to configure the Packager inside Architect.
        Hopefully I’ll not miss anything out here, but just give you the minimum amount of changes required.

        1. Update the “inputPath” to where ever the project is saved (doesn’t have to be the web app directory like a lot of examples say). Also VERY IMPORTANT – as I’m using windows when entering in the path make all slashes double. E.G. the path ‘C:myProjectsfirstTouchApp’ should be entered as ‘C:\myProjects\firstTouchApp’.
          Fail to do this and you will get the following helpful message.
          [ERR]
          JSON format error, please verify syntax
        2. Do the same with the output folder, place this anywhere other than the input directory.
        3. I changed  “configuration” to be “Production” so that I could get a better idea of how the app performed
        4. “platform” to  “Android”.
        5. “certificatePath” to where ever you saved your keystore file (give it the folder, not the file name).
        6. “sdkPath” to where ever you extracted the sdk E.G “C:\{your Android SDK directory}\sdk”.
        7. The androidAPILevel is a value that will determine what SDK the builder will use. Default value is 8 which is for Android 2.2x, so if you don’t have that SDK you will get the error
          [ERR]
          Error: Target id is not valid. Use ‘android.bat list targets’ to get the target ids.
          Check out this page for which version number you should use – http://developer.android.com/guide/topics/manifest/uses-sdk-element.html
        8. Now go hit that build button 🙂

Up pops a cmd window, with a bunch of paths and commands. Fantastic, no errors it must be all good.

Yes I go to the output folder and there is the new APK file. Great…

Now open a cmd window again and so long as you’ve set up your Nexus for development ( see here if you have issues with the following – e.g might say ‘device not found’ ) type adb install C:{myOutputFolerLocation}MyApp.apk

 

Still happy, its all installed load it up and…nothing…hmmm.  Its stuck on the blue loading screen. It works fine as a webapp from Architect, packager didn’t show any errors. Well below is a list of the issues I had. You may have been lucky and got it to work first time – but not me.

Stuck on blue loading screen?

app.json file contains the following

/**
* Build options
*/
“buildOptions”: {
“product”: “touch”,
“minVersion”: 3,
“debug”: false,
“logger”: false
},

The logger false should be a string, so “logger”: “false”

STILL getting a blue loading screen.

Have you installed Ruby & Compass?
No – well why would you, nothing specifies that you should when you installed Architect. What’s more when you package your app there will be no warnings that you don’t have Ruby or Compass.

Go to these pages and you will find a Ruby installer (do this first), then install Compass
http://rubyinstaller.org/
http://thesassway.com/beginner/getting-started-with-sass-and-compass

What’s that I hear you saying – its still not working!

Are you getting the error –  failed to find meta class definition for name.  Yes then at some point you’ve created a class that was added as a requirement, then found out that you didn’t actually need it and deleted the file.  Architect left the name inside my main application JS file (inside views: [ ] of app.js ).  I used notepad to search for all instances of class name that I had deleted, then I removed them manually from all files. (including the metadata/Application file).  There may have been a way to do this with Architect, but as I was using notepad++ to search everything in the folder structure I just used that.

Finally

Have you left in any lines of code that say debugger;
It doesn’t like those, they’re reserved words and no it will not remove them just because you tell it to build a production version of the app 🙁

Get rid of them.  Now go do another package from inside Architect, then use adb to install APK and BINGO it worked.

PHEW.

For reference:

http://developer.android.com/tools/index.html

different API levels can be found here – http://developer.android.com/guide/topics/manifest/uses-sdk-element.html

Having trouble using adb to connect to your Nexus 7 (says device not found) – then check out this helpful tutorial on that. http://zacktutorials.blogspot.ca/2012/08/nexus7-android-development.html

[ad name=”ad-1″]

Sencha – models and stores only showing one item

Sencha – models and stores only showing one item

By | | Comments 0 Comment

I’ve started to look at Sencha Ext JS and Touch and well so much to go on about but if I start on about it I’ll probably never actually get around to finishing this post so I’m going to try and keep them (my posts) short, to the point and frequent (hah I always say that to myself!) as I learn and find out more stuff about it.

So first tip – Do you only see one item in your list? If so the following may help.

Having created a model (which in Flex terms is a VO essentially – Value Object). I then created a Store. This is where you can load any data or hard code it for testing things before you create a web service or similar.

You then create a view with say a list in it. Then tell the list what Store to use by referring to its id. This will link up the store (with the data) and the store is linked to the model. You run the app and you will only see one item in the list. Which would be fine if the data only had one item, but it doesn’t.
(You’ll know what I’m meaning without going into more details if you have this problem, if not just comment)

In order to make the list show more than just the last item of data you must give your model an idProperty other than the default of ‘id’.

Very annoying and their may well be a good reason for it, I just haven’t found it yet. If you’re reading this, feel free to tell me why. As I learn Touch, I’ll hopefully be adding my experiences here.

[ad name=”ad-1″]

Sending mail with PHP, PEAR & Godaddy

Sending mail with PHP, PEAR & Godaddy

By | | Comments 4 comments

I created a very small php file to send email messages which would get called from my app. Everything worked just fine testing locally, then I deployed it to my godaddy account and it wouldn’t work. If you try to goggle specific topics for info on getting something like PEAR PHP mail to work on godaddy you’ll find it hard to come by. Hence this post.

The forum help from godaddy is OK, but more often than not they tell you why you’re having issues. So you still have to figure out how to fix it (which is good in some ways as well – don’t learn unless you figure it out yourself sometimes).

So this is the code that will work when you test locally and as it comes from my machine the mail request gets seen as a client connection (same as say outlook etc) and not as a web server. This is why you need to change the code when you deploy to a web server.

";
$to = "Mrs Jones ";
$subject = "What's up";
$body = "Hi,nnHow are you? What is happening";
 
 $host = "smtpout.secureserver.net";
 $username = "[email protected]";
 $password = '************';
 
 $headers = array ('From' => $from,
   'To' => $to,
   'Subject' => $subject);
 $smtp = Mail::factory('smtp',
   array ('host' => $host,
     'auth' => true,
     'username' => $username,
     'password' => $password));
 
 $mail = $smtp->send($to, $headers, $body);
 
 if (PEAR::isError($mail)) {
   echo("
" . $mail->getMessage() . "
");
  } else {
   echo("
Message successfully sent!
");
  }
?>

So here is the code that will work when you deploy it to your server on godaddy, this may well be the same as other server providers.

";
$to = "Mrs Jones ";
$subject = "What's up";
$body = "Hi,nnHow are you? What is happening";

$headers = array (
    'From' => $from,
    'To' => $to,
    'Subject' => $subject);

 $smtp = Mail::factory('smtp' );

 $mail = $smtp->send($to, $headers, $body);
 
 if (PEAR::isError($mail)) {
   echo("
" . $mail->getMessage() . "
");
  } else {
   echo("
Message successfully sent!
");
  }
?>

So as you can see I’ve totally removed the host, username, password. This will work providing you have the following lines inside you php.ini or php5.ini file.


SMTP = relay-hosting.secureserver.net
smtp_port = 25

If you do try and use the first piece of code on the webserver it will warn you about being unable to connect. for example,
Warning: fsockopen() [function.fsockopen]: unable to connect to {some ip address} (Connection refused) in /usr/local/lib/php/Net/Socket.php on line 108
unable to connect to smtp server.

[ad name=”ad-1″]

Stop the mobile ActionBar from transitioning

Stop the mobile ActionBar from transitioning

By | | Comments 0 Comment

I was creating a mobile AIR app and the app was to have an ActionBar at the top and depending on the view that was about to get pushed I didn’t want the ActionBar to have a transition effect. Sounds like a simple request, nope, no can do…

So after a bit of digging into the various classes ( mainly the ViewTransitionBase ) I came across what needed to be changed 🙂 but its a mx_internal so use the following fix with caution.

All of the various effects check the actionBarTransitionMode while they create the effects.  Its just that the actionBarTransitionMode is always set to ACTION_BAR_MODE_FADE_AND_SLIDE and never changes from that value. What’s more the actionBarTransitionMode is a mx_internal  variable so you can’t just call it yourself when creating a new effect.

So here is the fix.

  1. Extend whatever effect you wish to use. e.g. SlideViewTransition
  2. add the following lines to your extended class import import mx.core.mx_internal; and use namespace mx_internal;
  3. Either inside your constructor set the value (if you don’t wish to change it at runtime) or create a setter to modify the value actionBarTransitionMode
Possible values are (these can be found in the ViewTransitionBase class),

ACTION_BAR_MODE_FADE:String = “fade”;

ACTION_BAR_MODE_FADE_AND_SLIDE:String = “fadeAndSlide”;

ACTION_BAR_MODE_NONE:String = “none”;

In my case I set it to ACTION_BAR_MODE_NONE as I didn’t wish to have any transition on the ActionBar.

[ad name=”ad-1″]

Sencha touch – IDE??

Sencha touch – IDE??

By |

Being a Flex dev for a number of years and deciding that its about time I try out something new and seeing all the hype surrounding Sencha touch I spent a week too two weeks looking at it. It comes across like it is aiming at a very similar market to Flex so I was quite excited about trying it.
Version 2 was just out and it had some path issues for installing etc but the guys at Sencha appeared to be working very hard to get rid of all the little issues and these are now resolved. So I tried to find an IDE/plugin or similar that would allow me to code in the same way as I do Flex/Actionscript.

I tried Netbeans, Webstorm, Aptana, various Eclipse with javascript plugins and quite a few others that I can’t quite remember but NONE of them gave me a similar experience as Flex/Flashbuilder. As in code completion, catching errors etc. I know that javascript is really slack (in a similar way that AS2 was) but when you try something for the first time a good IDE is worth its weight in gold for helping to learn. The Sencha docs are also really good, but why should I have to keep looking at them to see what features are available for the components I want to use.

As I was a real newbie with javascript & Sencha I decided to go to a boot camp & conference on Sencha to speed up my learning, thinking that I’d see what tools they used as there must have been something out there which would make creating Sencha apps feel like programming and the answer was NO!

I did find out how much Chrome is a great tool for web programmers, but it really doesn’t cut it compared to normal development. Brackets from Adobe also sounds like its getting there for web/Javascript development, but its not aimed at Sencha.

 

SO, after the courses and testing of Sencha I decided that I’d NOT touch it again until it had a decent IDE or plugin for an IDE. Well it looks like the guys at Sencha have listened and they have a beta out for an Eclipse plugin. http://t.co/PYpC1WJf  Its a private enrolement at the moment, but fingers crossed 🙂

 

I said at the time that I didn’t think Sencha wasn’t quite ready, but with an IDE and Sencha Architect (which I really liked, its like a working version of Flashbuilder in design mode) I’m willing to give it another go. Here’s hoping they let me in to give it a test.

[ad name=”ad-1″]

Debugging facebook apps locally (web based ones)

Debugging facebook apps locally (web based ones)

By | | Comments 2 comments

If  you’re wanting to develop a facebook app then there is loads of helpful stuff out there to get you going. Specifically I’d start here if you’re interested http://www.adobe.com/devnet/facebook.html.

But what they don’t tell you is how to debug your app without you having to FTP your files each time you change something. (If your facebook app is based on AIR and not a web app, then this doesn’t matter).

  • Firstly log into facebook and go to your app settings, it will probably look like the below. What you are looking for is the ‘website with facebook login’. This is used by facebook when your app logs in ( you’d never have guess that! ). Anyway if this doesn’t match the url of where your app is deployed then you will NOT be able to log in.

    Change it to your local URL, in my case I’ve made it http://localhost/facebookLoginTest/index.html
    The important bit is the localhost as my actual app isn’t run from index.html but when I set up the app on facebook I just put that in.

  • Now that your app can login you will now be able to debug, but the default settings in Flashbuilder don’t output your files to your localhost. So this is the second part to getting everything to work.

    I’ve highlighted the two bits you need to change which is inside your projects properties (right click and select ‘Flex Build Path’).

    Change the output folder to push your output files to the folder inside your webserver. I use XAMPP to setup my webserver etc

    Also update the output folder URL, once changed when you hit debug it will load whatever URL is in that box + the html page. So as you can see I’ve changed my output folder URL to http://localhost/facebookLoginTest/ which when I run/debug my app gives me http://localhost/facebookLoginTest/FacebookTestApp.html?debug=true

That’s it.

[ad name=”ad-1″]

StateGroups – finally found a use for them

StateGroups – finally found a use for them

By | | Comments 1 comment

State groups? Ever looked at them and though they look really useful but then can’t find a good use for them!
Well last year (yes its taken a while to finish of this post – hopefully its worth it), while developing some mobile apps I came across a great use for them. At the time their were also very few examples of using stategroups on-line and none in a practical setting.
So here goes, lets see how they’re done and where would be good to use them.

  • The problem

    • Mobile apps can have 1 of 3 DPI settings and this will change how your app looks. (320 DPI, 240 DPI and 120 DPI).
    So we can think of each of these DPI’s as a state.
    Then we can have a view and like most views you will use states. For example to have “Edit mode on” and “Edit mode off”.

  • That give is 2 different groups of states

    • Group 1 is the DPI setting.
    Group 2 is the view mode.

  • Soloution

    • I always like to see working examples of something, bit like a picture & a 1000 words.
    So below is a test app to change the values of and of course it has source code to view.


Click to open state group examples

I’ve also included below what I consider to be the important bits of the code to understand.
Check out the source code of the app for more detail.

These are the various combinations of states you can use together, and the list of the actual states.
For example you can’t set text.one and text.lowDPI on the same component.

Hopefully this will give you a bit of insight into how and where to use stateGroups. Very useful tool under specific circumstances.

[ad name=”ad-1″]

Searching a string – do you need to start with a period?

Searching a string – do you need to start with a period?

By | | Comments 0 Comment

Today I had to write some code to search for text that matched various file extensions, this should have been a no brainer of a task. But like some things that sound stupidly simple it caught me out.

If you have a string and you use the search method then when it finds something it will return the position. If it doesn’t then it will return -1. So far so good.

Now I could go into huge detail (I did, but it ended up to wordy/dull, so I just deleted it!).
So if you EVER have to search for a string and your string starts with a period ‘.’ then add a double backslash ‘\’.
If you don’t then the period will match anything! e.g. you want to match ‘.ra’ and the string contains the word brain then ‘brain’.search( ‘.ra’ ) DOES NOT return -1!

use ‘\.ra’ for correct results.

Not sure why ‘.ra’ doesn’t work, maybe it’s treating the string like a regEx, I know search can take both a string and a regEx so maybe its not looking at its type and guessing that it should be a regEx?? You can’t step into the code either to see why, so just use the \

Very annoying!

Previous Tip

[ad name=”ad-1″]

Good day in the office – 1000’s of mobile apps built in a few hours!

Good day in the office – 1000’s of mobile apps built in a few hours!

By | | Comments 0 Comment

Yeah its been ages since I’ve last blogged any code articles (got a few 1/2 done – honest!). Just been very busy in the past several months working with the crew from Jampot. Anyway check out this article where we headline in Engadget. Shows off our new product which can let you build an app in minutes and get it installed on your phone.

Jampot crew

Check out the actual Engadget article here.
Check out the fab Jampot team here 🙂
And of course check out this to build an app and get it on your phone in minutes.

[ad name=”ad-1″]

App story – on BBC site. Catch it live at MAX 2011

App story – on BBC site. Catch it live at MAX 2011

By | | Comments 0 Comment

The application that I’m working on with the guys at Jampot has made the BBC news. Check out the article from the BBC.
http://www.bbc.co.uk/news/uk-northern-ireland-15075450

Also the guys are heading over to the Adobe Max 2011 conference so you’ll be able to see it live and see how easy it is to create a mobile app for all mobile platforms.

[ad name=”ad-1″]