Archive for the ‘Uncategorized’ Category

Ryan R

Up and running iOS development

Tuesday, April 30th, 2013

Creating an iOS application can be a daunting task. From design and architecture to testing and deploying, there’s a lot to think about. Luckily, you don’t have to start from scratch, as most of the problems you’ll run into have already been solved by someone else. The internet is filled with a great selection of reusable components and libraries which can be used to jump-start your next iOS project.

 

User Interface and Architecture


Cocoa Controls (https://www.cocoacontrols.com/) is a directory of open source controls for Cocoa (OS X) and CocoaTouch (iOS) applications. A recent phenomenon you’ll discover on Cocoa Controls is that when a big app is released on the app store with a unique user interface control of some sort, there will be dozens of open source implementations within weeks. A great example of such a phenomenon is the parallax zooming effect ‘clones’, which imitate a visual effect implemented in some new apps like CNN and Tweetbot (https://www.cocoacontrols.com/search?utf8=✓&q=parallax).


One drop-in component that I want to make special mention of is InAppSettingsKit (https://github.com/futuretap/InAppSettingsKit). Many developers find the process of storing app settings in the official iOS settings app confusing, and simply implement their settings in their own application. InAppSettingsKit makes writing a settings screen *and* having those settings exposed to the iOS settings application a snap – huge time saver.

 

Networking


A great user interface is not all that important without some data. If you’re integrating with a web service, downloading images, or just making simple GET requests, you definitely need to take a look at AFNetworking. AFNetworking (the AF stands for AlamoFire, the team behind Gowalla, now a part of the Facebook) is a very mature library for making network request. Its biggest draw is its powerful block-based syntax. If you’ve used anonymous functions, and observed their closure abilities, then you understand blocks.


What if you want to build a network connected app, but don’t have your back-end figured out yet? Well there are libraries (libraries as a service?) which not only handle the networking layer of your app, but generate a backend server based on the model objects you design for your application.


Check out Parse (http://www.parse.com). Parse, which coincidentally is now also owned by Facebook, is one such service. If you don’t mind locking yourself into the Parse-o-verse, then you may find yourself very impressed with how much time Parse can save you. Parse allows you to model your data online, import values from common formats (CSV, etc.), and provides an SDK for every platform under the sun to access the data. It can also take care of push notifications, login (including with Facebook or Twitter credentials) and supports what it calls “Cloud Code”: the ability to have your own custom JavaScript server code, run on the Parse servers.

 

Testing

 

So you have your beautiful Internet-connected app, and you’re almost ready to ship. Time to test. TestFlight (http://www.testflightapp.com), is designed to make testing and, more importantly, organizing beta tests a breeze. TestFlight allows you to organize your testers, invite them to betas, inform them of new betas and even deliver beta applications over the air, completely bypassing the App Store.


While your testers are finding all the bugs in your app, Crashlytics (http://try.crashlytics.com) can be used collecting detailed crash logs. When an app normally crashes, it stores a crash log (a blackbox recording of what went wrong) in the device. On the next iTunes sync, these logs are sent to Apple. Apple will eventually let you see these logs, which have to be downloaded and interpreted by analysing the code that generated it (so it can properly report line numbers, method names, etc.). It’s quite a process. This is where Crashlytics comes in.


Crashlytics simplifies all that by having your app communicate directly with its servers on a crash. Better yet, it caches unsent crash logs to be sent on the next launch, to ensure it’s been sent. You can also inject custom Crashlytics flags, to help debug the state of an application on crash.


Production


Finally, your app is approved and in the store. You may want to make tweaks but the app update process is lengthy. GroundControl (https://github.com/mattt/GroundControl#readme) is a library that allows you to store application configurations in the Cloud. Use GroundControl to tweak default values, or maybe have dynamic themes. You can now tweak your app to fit user trends without re-submitting a new version.


Finally…


This is just a small subset of what’s available. With new developers joining the community every day, there’s an ever-changing landscape of bits and pieces to be toyed with… but don’t be afraid to create something unique, and maybe your next piece of code may the next big thing.

bslack

BlackBerry 10/Qt Libraries and Namespaces

Tuesday, April 2nd, 2013

A quick note for those developing C++ libraries with Qt (hopefully for BlackBerry 10). You should use a namespace(s) to group your library code together and to avoid conflict with other libraries and the users’ code. When working with Qt however, some extra considerations need to be taken into account if you plan on using Qt’s signal/slot mechanisms. In Qt 4.x (the latest version of Qt available for BlackBerry 10), your function signal/slot prototype declarations must match exactly. This can cause issues for users of your library if you assume that your namespace is global within your header definition. Take for instance the following code sample:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
namespace mycompany {
namespace mylibrary {

class LibData;
class LibraryManager : public QObject {
Q_OBJECT
public:
LibraryManager(QObject *parent = NULL);
virtual ~LibraryManager();

Q_SIGNAL void dataRead(LibData &d);

};

}
}

In the above sample, the ‘dataRead’ signal provides one parameter when emitted, the LibData pointer. The LibData object is part of the mycompany::mylibrary namespace. While this will work, it potentially causes an issue for a user of your library. It forces the library user to make your namespace global within their own header file (which may or may not be intended). As an example:

1
2
3
4
5
6
7
8
9
10
11
12
13
#include
#include

using namespace mycompany::mylibrary;

class MyClientClass : public QObject {
Q_OBJECT
public:
MyClientClass();
virtual ~MyClientClass();

Q_SLOT void onDataRead(LibData &d);
}

In the above case, the MyClientClass onDataRead slot must match the LibraryManager classes ‘dataRead’ signal signature, exactly. This forces the user to make the namespace global within the header file, which can somewhat defeat the purposes of namespaces. A better implementation would be to always explicitly set your namespace in your signal prototype declarations. The below snippet shows a better implementation of both the library and client code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
namespace mycompany {
namespace mylibrary {

class LibData;
class LibraryManager : public QObject {
Q_OBJECT
public:
LibraryManager(QObject *parent = NULL);
virtual ~LibraryManager();

Q_SIGNAL void dataRead(mycompany::mylibrary::LibData &d);

};

}
}
1
2
3
4
5
6
7
8
9
10
11
#include
#include

class MyClientClass : public QObject {
Q_OBJECT
public:
MyClientClass();
virtual ~MyClientClass();

Q_SLOT void onDataRead(mycompany::mylibrary::LibData &d);
}

Note how in the above example, the LibData objects namespace is explicitly declared. This eliminates the need to have the ‘using namespace mycompany::mylibrary’ definition.

Derek Santos

5 Cool Things About CoffeeScript

Monday, October 22nd, 2012

By Derek Santos – consultant

I’ve been experimenting with CoffeeScript lately and wanted to pass along some things I really like about it.

1. It writes very good JavaScript

CoffeeScript compiles to JavaScript that follows best practices and sticks to JavaScript’s good parts. For example:

  • == always turns into ===
  • Code automatically gets wrapped with a self calling function to protect its scope
  • var declarations always get moved to the top

2. It’s readable

Whitespace is meaningful in CoffeeScript (which can be hard to get used to at first), but consider the following example:

JavaScript

if (devices !== null && devices !== undefined) {
    devices.push({
	name : 'iPhone 6',
	manufacturer : 'Apple'
    });
}

CoffeeScript

if devices?
    devices.push
	name : 'iPhone 6'
	manufacturer : 'Apple'

It’s a simple example, but you can see how CoffeeScript removes the unnecessary syntax and reads more like a sentence.

3. String Interpolation

This is one thing I will admit is tedious in JavaScript (and some other languages). We’ve all had to do this before.

html = '<div>';
html += '<h2>' + title + '</h2>';
html += '<p>' + body + '</p>';
html += '<span>' + footer + '</span>';
html += '</div>';

In CoffeeScript, this would be accomplished with:

html =
"""
<div>
	<h2>#{title}</h2>
	<p>#{body}</p>
	<span>#{footer}</span>
</div>
"""

A templating engine could be used to give the same result, but that also adds extra weight to your project. This is not so in CoffeeScript since it just gets compiled into pure JavaScript and makes it much cleaner.

4. Classes and Inheritance

If you are coming from a classical programming language such as Java, CoffeeScript allows you to structure your code in a way that is familiar to you. CoffeeScript also has some helpful nuggets like using => instead of -> to bind a particular scope to your functions.

5. It’s fantastic for writing unit tests

If you are reluctant to try CoffeeScript because you are afraid of how it will affect your project, I strongly urge you to try writing your unit tests in CoffeeScript. This way, you’ll be learning it in a risk-free environment while still providing value to your projects. You’ll find that your tests will be incredibly easy to read and author using CoffeeScript.

Here is a sample Jasmine test written in CoffeeScript:

describe 'controller', ->
    target = app.mycontroller

    it 'should call a service and return a response', ->
        target.makeRequest (result) ->
            expect(result).toBe('success!')
Rod Nolan

Virtual directories with RippleSites? Sort of, sure.

Tuesday, October 16th, 2012

By Rod Nolan – consultant

I’ve always used IIS or Apache when I needed a web server in my development environment. But as a BlackBerry developer, the Ripple Mobile Environment Emulator has become a more important part of my toolkit. And the latest version includes a built in web server. So I recently put IIS on the shelf and decided to trade port 80 for port 9910.

I make regular use of virtual directories because:

  1. I don’t want to store my web sites in wwwroot/ or htdocs/ since
  2. My git repo contains EVERYTHING related to a project, not just .htm, .css and .js files and I don’t want it all accessible via http so
  3. It’s cleaner to keep the repo in one location (not wwwroot/ or htdocs/) and use virdirs to point to the “website” subsection of my  repo

But Ripple doesn’t provide any sort of standard way to configure virdirs using a GUI or config files. Fortunately, neither of these options is required when you have Windows 7, a “Run as administrator” command prompt and the mklink command.

Here’s how it works:

C:\>cd \Users\<You>\RippleSites
C:\>mklink /J siteName "C:\SomePathTo\MyRepositories\MyProject\WebRoot"

This command will create a new directory junction called

siteName

in:

C:\Users\<You>\RippleSites\

which looks and acts like a directory but is really nothing more than a pointer to the real physical location:

C:\SomePathTo\MyRepositories\MyProject\WebRoot

So that when I browse to:

http://localhost:9910/siteName/index.html

it’s this file gets served:

C:\SomePathTo\MyRepositories\MyProject\WebRoot\index.html

I can still keep everything related to the project in my repo, store that repo anywhere I choose on my local system and enable http access to only the web-related assets via Ripple’s web server. I can develop and test and emulate my mobile brains out… without using virtual directories and without manually copying files between my repo’s folder and my web server’s document root folder.

This post http://ipggi.wordpress.com/2009/09/07/windows-file-junctions-symbolic-links-and-hard-links/ helped to clarify the difference between symbolic links, hard links, soft links and junctions.

 

oliverm

Links roundup

Friday, November 4th, 2011

Here are a few unrelated links I’d like to pass on for your reading pleasure.

  1. Opportunistic Refactoring by Martin Fowler, author of the best programming book ever (Refactoring).  I’ve been preaching this one for a long time: “while you’re in there, refactor any smelly code, but don’t get caught in a death spiral”.
    http://martinfowler.com/bliki/OpportunisticRefactoring.html 

  2. jQuery4u – lots of great jQuery plug-in round-ups. I’m starting to visit this almost daily now.
    http://www.jquery4u.com/ 

  3. Finally, for you old KDE 3 fans, the beast is still alive and well. I loaded this onto a VM and started feeling very sentimental for the old days when KDE didn’t suck and I didn’t have to settle for Gnome.
    http://www.osnews.com/story/25283/KDE_3_5_Fork_Trinity_Releases_Third_Major_Update 

As usual, I look forward to your comments on any of these.

Oliver

andreiv

Flash Profiler: getting object references to fix a memory leak.

Monday, October 24th, 2011

Usually it takes some time and effort to allocate a memory leak; to be precise, to find out what exactly causes the objects to stay in memory rather than being garbage collected. As we all know, an object is not eligible to be garbage collected if this object is referenced by other objects. However, it’s not always obvious what exactly is holding the object.

With the help of the Flash Profiler, you can get the exact line of code where the reference what holds the object is created. I should mention that it doesn’t always work as expected, but  in most cases it’s pretty helpful.

1. Run Flash Profiler.
2. On the Connection Established pop up check “Generate object allocation stack traces”


3. Take a memory snapshot.
4. Double click on just created Memory Snapshot. This should open a Memory Snapshot view where
you will see all object what are currently in memory.
5. Find the object you need in the Class column
6. Double click on this object, that should open an Object References view where
you will see all the instances of the selected object. Each instance has a reference tree.
7. Expand the tree and select the lowest “leaf”, that should update the “Allocation trace:” widget with
the information about call stack for that instance.
8. Walking through the Allocation trace you can get a location and exact line of code where the reference is set.

Tip: Double clicking on the entries in the allocation trace widget opens the class and navigates you to the line of code you looked for.

oliverm

Live From Adobe MAX 2011 – Day 2

Wednesday, October 5th, 2011

Second day notes from Adobe MAX 2001 in Los Angeles. A lot of these comments are my raw reactions at the time (apologies in advance).

Sneak Peeks Session

- Rain Wilson rocked it: “What the hell is a command-line?”

- Flash Builder reverse debug stepping – kinda cool

- Flash Builder “why” command (how did a variable get set into its current state) – very cool

- Cool new image search and video manipulation prototypes

jQuery Mobile Session

- Boy, if I didn’t already know jQuery Mobile I would have been lost in the first few minutes.

- used persistence.js for db stuff – will look into this as a Web DB abstraction layer

- Hint: use file:/// to overcome Chrome not reading local data files or launch with –allow-file-access-from-files

- to put back button on right side (vs default left)

Adobe Mtg

- Group (in public space) meeting with training partners

- Lots of complaints from partners about certification exams (they do tend to suck)

- Complaints about quality of course material (Ah, those heady Macromedia days – we miss you Sue Hove!)

You Don’t Know Flex About Objective-C Session

- Wow, not a line of Objective-c code shown, just talk about some high-level diffs and similarities

- Code style similar between AS and O-c

- Classes should be used

- MVC Pattern built-in

- Types, operators, libaray usage similar

- Memory management worst part of o.c.

- allocate and deallocate

- hard to debug

- Garbage Collection in latest version but not for mobile

- No code samples or examples?!

AIR for Mobile Session

- Short preso on simple game using AIR for Android

Day 2 General Session

- Adobe buys PhoneGap!

- Check out Machinarium game

- Edge preview 3 now available

- jQuery Mobile Theme Roller from Adobe coming in next 2 weeks

- JQM theming available NOW in FireWorks via updater

- CSS Regions and CSS Exclusions – submited to W3C from Adobe- implemented in latest Chrome

- CSS Shaders – new spec/rec submitted to W3C – Wow! amazing transformations

- Flash – better GPU demod in upcoming Angry Birds for Flash – more explosive bits!

- Check out http://www.adobe.com/go/maxday2

Flash & Flex in an HTML5/Native App World Session

- EffectiveUI guy: RJ Owen; Denver, Co.

- Gin/beer >> Flash/HTML5 analogy (both survived?)

- History of Flash/Flex

- Fair appraisal of HTML5 Canvas; gaming getting better; Flash still better

- Video argument hinges on DRM; but since DRM is evil, HTML5 may be better in the end;)

- Flex web-based apps on iPads not possible, so HTML5 better option for online app.

- Speaker:

- seems unaware of UI frameworks such as jQueryUI and jQuery Mobile – claims HTML hard to read ?!.

- some misrepresentations about JS frameworks – somehow more variety is worse?

- avoids open vs closed technologies arguments

- implication that JSON, used in Sencha, as a fringe format; wow, steaming pile of BS.

- HTML5 better at accessibility, SEO and semantic description

- Flash performance getting better compared to native apps, but will never be as good.

- Flash tends to be large in file size than HTML5 or native apps.

 

oliverm

Live From Adobe MAX 2011 – Day 1

Wednesday, October 5th, 2011

Here’s a rundown of my first day at Adobe MAX 2001 in Los Angeles. A lot of these comments are my raw reactions at the time (apologies in advance).

First, the keynote, hosted by Kevin Lynch, Adobe CTO.

- [Too much crappy thumpy music for my liking (I'm officially old now)]

- Newly-announced Adobe Creative Cloud.

- 1 year free membership for me and other MAX attendees when it comes out.

- Many new tablet apps to allow creation of digital assets.

- Via Adobe Creative Cloud, can share docs with others, and open with desktop apps such as Photoshop & Illustrator.

- Proto: tablet/cloud tool for quick HTML prototyping: produces good HTML, uses touch to draw widgets!

- Adobe buys TypeKit: Cloud fonts (same as Google fonts except you get to pay!)

Community Pavilion Opens:

- Chatted with Rejeev from RIM about DevCon, NDK, video on PlayBook.

Lunch – disgusting. ‘nuf said…

Android for Flex Session

- Fun hands-on session

- Didn’t tell attendees to bring devices and USB cables – yikes…

- Led by (the adorable) Veronique Brossier – great instructor!

Video for PlayBook

- Good session from RIM

- Poorly attended (6 people), and yet my lcuk wasn’t good enough to win one of the two PlayBooks raffled off!

New in AIR 3 Session

- Christian Cantrell - A Linux apology from Adobe about cutting AIR runtime. Typical $ argument – yawn.

- Stage3D

- Native extensions – desktop & mobile, implemented in native code - similar to native process - called from AS like any other Class - use for maximum performance

- number crunching, encrypting, encoding large images - eg Android licensing

- Captive runtime bundles: bundle runtime with application; from Flash Builder – you get native installer.

- Background audio playback (added to iOS, already worked on Android)

- StageVideo (hardware accelerated (mobile, not on desktop yet) - H.264 video encoding - StageText (similar to Stage3D, StageVideo; leverages native platform):

- native text inputs in mobile apps - borderless - not on the display list, like other Stage-* components

- Front-facing camera support (Camera.position = “front” or “back”)

- Mobile encrypted local storage

- Device speaker control

- Native JSON support

- “Smarter” sockets: output progress events (rather than traditional input) – event holds bites remaining for output -

JPEG XR format – lossless, less expensive, open source

- Bitmap dimensions no longer limited

- Surround sound for TV only

- Advanced controller port – TV only

- game input API for AIR 3

- Generate random bytes

- Cubic bezier curves

- Flex 4.6 – MegaBurrito/MegaHero

- Date Spinner, other new components; performance improvements (50%?!)

Enterprise Java and Flex Session

- OK session about tying Spring into Java backends.

- not sure why a good gateway class wouldn’t accomplish the same thing without a bunch of extra config.

Rod Nolan

Debugging WebWorks applications using the PlayBook simulator and Google Chrome

Saturday, September 24th, 2011

By: Rod Nolan

I encountered an error recently while working on a WebWorks project. So I broke out the PlayBook WebInspector (aka Developer Tools in Google Chrome) and got to work… sort of.

In case you haven’t discovered this yet, to use the debugging tools in Chrome, you just launch your application in the simulator and then open Chrome and connect to the simulator over port 1337 (http://{simulator IP address}:1337).  You should see a simple page with a single link and when you click it, you’re connected to the running application.

Connecting to the PlayBook WebInspector

Connecting to the PlayBook WebInspector

This usually starts the Developer Tools in Chrome complete with Console, Script Debugger, Profiler and all the goodies you know and love. But this time around I got a nearly empty page… a blank toolbar area and the toggle buttons at the bottom of the page that didn’t work.

Where are the Chrome Developer Tools?

Where are the Chrome Developer Tools?

Hmm, this worked last week?! What changed?

I confirmed that the Chrome Developer Tools worked as expected with a regular public web site.

Then I tried a different version of the PlayBook simulator since I have two:

  • version 1.0.1 (from the BlackBerry WebWorks SDK for TabletOS 2.1.0.6)
  • version 1.0.6 (from the blackberry-tablet-sdk-1.1.0)

But both simulators produced the same result.

Maybe it was Chrome? You probably know how Google Chrome just silently updates itself without asking. (Can software be arrogant?)

The solution turned out to be this:

  1. Completely uninstall Google Chrome.
  2. Go find an installer for an older version (oldapps.com).
  3. Install it and get back to work.
PlayBook WebInspector works as expected in Chrome ver13

PlayBook WebInspector works as expected in Chrome ver13

Happy debugging. But keep that Chrome (Lucky 13) installer around and be ready to undo the auto update.

Thanks to Oliver Merk, NTG principal Consultant, for discovering this fix.

Derek Santos

Customizing Perspectives in Eclipse

Friday, August 5th, 2011

By Derek Santos – Consultant

The other day I found myself going through the annoying process of creating a class/file that was unrelated to my current eclipse perspective.   After choosing “other”, then going through various menus I thought to myself, there must be an easier way to do this.  So I dug around and noticed you can customize your perspective by including or excluding language features and creating your own custom perspective.  It’s very easy to do, and will save you a ton of time accessing features you use often but can’t find easily.

To create your own perspective, go to Window->Save Perspective As…

Custom Eclipse Perspective

 

Once you’ve saved your perspective you’ll see that it’s available in your perspective tool bar.

Custom Eclipse Perspective

To add/modify features to suit your needs,  just go to Window->Customize Perspective.

That’s it!