Create a Singleton class in objective-C

Overview

Singleton implementation is basically creating a single object for access throughout the application. It works on the global access principle. Singleton pattern is implemented by creating a class method that generates an instance of the class only if the one doesnot exists in the memory.

Just keep a note of that singleton instance should always be created carefully in a Multithreaded environment. So just be sure while creating a class that its method is accessible by one thread at a time otherwise there might be condition raised which can crashes your application during runtime. Moreover these bugs are very hard to find in the environment for iOS development.

Like other languages, we can create a singleton class in Objective-C which is pretty much required when you want to share the resources among different classes in the application.

The biggest example of the Singleton is APPDELEGATE of an iOS app which is shared globally across the application.

How to implement ?

Create a class. It might extend NSObject or any other class which can particularly provide the additional methods required as per your implementation.

 #import <foundation/Foundation.h>

@interface MyManager : NSObject {

NSString *someProperty;

}

@property (nonatomic, retain) NSString *someProperty;

+ (id)sharedManager;

@end

You create an a static method that return <id> back to the caller. <id> is the default datatype for all the objects in Objective C.

Now switch to your implementation file.

The Singleton can be implemented using a couple of ways.

One is the use of the GCD to create one and other is using the normal Objective-C syntax.

Using GCD:

#import "MyManager.h"

@implementation MyManager

@synthesize someProperty;

#pragma mark Singleton Methods

+ (id)sharedManager { static MyManager *sharedMyManager = nil;

static dispatch_once_t onceToken;

dispatch_once(&onceToken, ^{

sharedMyManager = [[self alloc] init];

});

return sharedMyManager;

}

- (id)init {

if (self = [super init]) {

someProperty = [[NSString alloc] initWithString:@"Default Property Value"];

}

return self;

}

@end

Using Objective C Syntax:

+ (id)sharedManager {
static MyManager *sharedMyManager = nil;
@synchronized(self) {
if (sharedMyManager == nil)
sharedMyManager = [[self alloc] init];
}
return sharedMyManager;
}

Here the @synchronized is used to allow the code to be accessed by a single thread only. Else you can create a property with the atomic attribute to make it Thread Safe.

How to access the instance ?

You can access the static components using the class name.

MyManager *sharedInstance = [MyManager sharedManager];
Posted in iOS

Sencha Touch 2 – Create a new application using terminal

This post allows you to understand that how to create your first application for the sencha touch 2.

Here are the steps that allows you to create a new application using the terminal/command line:

Pr-requisites:

  • Sencha touch 2 downloaded.
  • Sencha Cmd installed.
  • MAMP already installed on the system.

Steps:

  1. Navigate to the directory where you have extracted the contents of the package downloaded from the website. In case you are in a wrong directory and you try to create a new application, the script will be at halt and will show an error.
  2. Once navigated, type the following
    sencha -sdk /path/to/sencha-touch-sdk generate app MyApp /path/to/www/myapp
  3. On the completion of the script, the location specified in the above command will have the content as follows:

.sencha/                # Sencha-specific files (for example configuration)
    app/                # Application-specific content
        sencha.cfg      # Configuration file for Sencha Cmd
        plugin.xml      # Plugin for Sencha Cmd
    workspace/          # Workspace-specific content (see below)
        sencha.cfg      # Configuration file for Sencha Cmd
        plugin.xml      # Plugin for Sencha Cmd</code></strong></pre>
touch/ # A copy of the Sencha Touch SDK
 cmd/ # Sencha Touch-specific content for Sencha Cmd
 sencha.cfg # Configuration file for Sencha Cmd
 plugin.xml # Plugin for Sencha Cmd
 src/ # The Sench Touch source
 sencha-touch-*.js # Pre-compiled and bootstrap files
 ...

app # Your application's source code in MVC structure
 controller
 model
 profile
 store
 view
 Main.js # The main view of the application

resources
 css
 app.css # The main stylesheet, compiled from app.scss

sass
 app.scss # The Sass file which compiles to app.css above,
 # includes Sencha Touch theme by default

icons # Application icons for all mobile devices
 # When replacing these default images with your own,
 # make sure the file name and the dimension stays exactly the same
 ...
 loading # Application start-up screens for iOS devices
 # Similarly to icons, make sure the file names and
 # dimension stays the same
 ...
 images # Put other images used by your application here

index.html
 app.js # Contains application's initialization logics
 app.json # Configuration for deployment
 packager.json # Configuration for native packaging

Getting started with Sencha Touch 2 on your MAC

As the fresh developers to the sencha touch development, one of the challenges is to configure sencha touch 2 on the machine. This is a small post the defines the steps to install and configure the Sencha Touch 2 on the system.

Please Note: This installation steps are specifically for the Mac Machines.

Pr-requisites: You will require a local server to run the applications built on the Sencha Touch Platform such as MAMP.

1. Download the Sencha touch package from the website. Click Here to download the package.

2. Unzip the package and extract the contents to a destination.

3. Download the Sencha Command Tool from the sencha touch website. Click here to download the installation setup.

4. Run the installation file that is downloaded from the website.

5. To check whether the Sencha Command is installed properly or not, Open Terminal and type “sencha” to it. The output similar to the one specified in the image below will be displayed to you in case the installation is done successfully.

Sencha Cmd

Sencha Command helps you to compile, run and create the applications using the command line.

The installation and configuration of the sencha on the machine is done successfully.

You can use any type of editor to manage the files for the sencha touch application. The recommended are Sencha Touch 2 Architect, Aptana Studio, Xcode, Dashcode.

To view how to create an application using the sencha cmd please look into the next post of the series.

Introduce HMVC into Codeigniter Application

As the market for the reusable components increases, the use of the HMVC(Hierarichal Model View Controller) has pushed up the stacks geometrically with the frameworks.

By default, the Codeigniter framework follows the Model-View-Controller approach. The ease of use and lightning speed of the framework has gained the framework a lot of importance in comparison to other frameworks such as Zend, CakePhp etc. The frameworks enable to users to use the core features of the language with the extended features that are available in the framework to ease the road to development.

One of the feature which the framework lacks is the reuse of the components to extensive level. You can create custom components in the MVC based codeigniter but the re-usability is available to a limited extent.
HMVC extensions enables the developers to extend and reuse the functionality to an extensive level with minimal modification to the underlying code. Use of the HMVC provides the following benefits to the developers:

  • Modularization: Reduction of dependencies between the disparate parts of the application.
  • Organization: Having a folder for each of the relevant triads makes for a lighter work load.
  • Reusability: By nature of the design it is easy to reuse nearly every piece of code.
  • Extendibility: Makes the application more extensible without sacrificing ease of maintenance.

This enables the developers to maintain the code to a better level with more focus on the business logic of the application.

This post will help you to successfully configure codeiginiter with the HMVC extensions.

Steps:

CodeIgniter WebSite

  • Once downloaded, extract the content to htdocs/www folder of the local server. For eg. for MAMP: Goto Application->MAMP->htdocs. Your folder should be similar to the one displayed in the image below:

Screen Shot 2013-09-03 at 7.57.44 PM

  • Now download the HMVC extensions for the following location: HMVC Extensions
  • Extract the content of the compressed file. The contents of the folder will be similar to the one displayed below:

Screen Shot 2013-09-03 at 7.55.42 PM

  • In your CI installation add a folder named modules to it. Your CI application folder will look similar to this. The configuration of the Codeigniter on the local server is not specified in this post, It is assumed that you know how to configure the other properties in the CI config directory. You can also use some other name for your modules folder if you wish to, but in such a case you will be required to specify the path to folder in the config file. This can be done in a following way:

$config['modules_locations'] = array(APPPATH.'modules/' => '../modules/');

Screen Shot 2013-09-03 at 7.59.36 PM

  • Now copy the “core” and “third party” folder from your HMVC extension folder and copy it to the applications folder.
  • Your installation is ready to use the HMVC architecture.
  • Now create the module with a specified name, In this case the name of the module is core_main.
  • Create the folder for controllers,models and views respectively into the core_main folder. In HMVC, each module has their own respective controller,model and view folders.
  • Please note the name of the module should match the controller name else in such a case if you are using the routing feature in codeigniter then you have to specify the folder name along with the name of the controller.

Screen Shot 2013-09-03 at 8.03.02 PM

  • Defining a Controller – Normally we extend the CI_Controller class to extend the functionality of our classes but when using HMVC we will extend our controller class with MX_Controller. So now we define the controller in the following way:


class Core_main extends MX_Controller

Your system is now ready to use the HMVC extension.

Overscroll Problem Phonegap iOS Jquery Mobile

Hi All,

I was working over the project and came across a problem while using the jquerymobile and phonegap for a Hybrid Application.
Whenever the keyboard/picker is displayed on the screen there was a problem of the scroll which made my app look pathetic. So tried to find out the solution which can work over the other platforms also without changing the native code.

By default, the iOS webview have a elastic configuration which means if you drag the screen down, the whole content in the application seems to scroll.
Using phonegap you can either use a plugin like iScroll to overcome the problem or make changes to the custom code to make this work. This goes good for the iOS but what about the other platforms. When we are targeting a Hybrid App it means that the application tends work appropriately on every platform without much of the changes to the native code.

I tried to find out the solution to the problem and ended up finally getting some info from the PHONEGAP site.
I changed the configuration settings of the Phonegap specified in the config.xml which controls the in and out of the application. This can be done by changing the KEYBOARDSHRINKSVIEW property to TRUE.

Config.xml

But using this property has a drawback. Huh! I was stuck again into the problem. This setting goes true for all the screens in the application due to which when my content size tends to increase and keyboard/picker is displayed, my content tends to be hidden below it and i was not able to view it at all.

I started over all again and then came across a solution that helped me solve the problem i was facing.
I used the javascript and some css to make this work. Here is how i did it.

Put this piece of code into the application deviceready function so that it binds the event to every page in the application.


document.body.addEventListener('touchmove',function(e){
if(!$(e.target).hasClass("scrollable")) {
e.preventDefault();
}
else
{
console.log("Scroll");
}
});

Here is the CSS Code that i used:

.scrollable {
overflow: auto;
overflow-x: hidden;
-webkit-overflow-scrolling: touch;
border:1px solid;
}
.scrollable * {
-webkit-transform: translate3d(0,0,0);
}

Also provide the scrollable class to the content which is required to be scroll in the application.
For example, if you want your content container to scroll then provide the scrollable class to the root element of the application.