Welcome to Karem's Technology

How to Integrate Facebook Login in iOS App

2014-05-21T09:31:00.002-07:00

Integrating Facebook features into an app is nowadays a quite common task, and one of the most important steps in the integration process is the login functionality implementation. Logging in with Facebook not only allows you to attach a social characteristic into your app, but it can also be used as a login system instead of creating a custom one. By adding it you offer to users a familiar way to authenticate, considering that the majority of users use Facebook.

Facebook integration is natively supported since iOS 6, even though it’s still necessary to manually add the Facebook SDK into your projects. There are two ways provided by the SDK for logging in with Facebook. The first one consists of a relatively easy solution, as it uses a predefined login view which manages all the session and login related stuff. The second one is a more “heavy” approach as everything must be implemented and handled by the developer, but on the other hand the login process can be highly customized. The method that should be used into a project definitely depends on the app’s requirements. If the predefined, familiar Login with Facebook button fits to the application’s look and feel, then this should be the number #1 option. If further customization is needed, then the programmatic option is a one-way road.

In this tutorial we are going to see how to login with Facebook using the first way, so let’s talk a bit more about it. The login view, or programmatically speaking the FBLoginView class, provides a standard Facebook button to log in and log out from the app. The appearing position of the view can be specified, but neither its size or its title can be changed. Actually, the title is automatically set according to the logged in status at a given time. Behind the scenes, the class is responsible to carry out all the heavy work. It manages all the communication with Facebook, it handles the various session changes, it persistently stores the authentication token received from Facebook after a successful login, it checks for an existing token upon the application launch, and a lot more. Developers don’t have to deal with all that details, or even care about them. They are only required to add the login view to the appropriate view controller, define all the desired permissions and implement a few delegate methods to handle the login state changes.

The login with Facebook relies on the Single Sign-On (SSO) access control system, according to which users can access multiple applications having logged in just once and using the same session. If, for example, you have the Facebook app installed on your device and you have already logged in, then when you’ll use for first time another application that implements the login with Facebook feature you’ll see that you’re already connected and no credentials are required again. You’ll only need to authorize the app. The basic idea behind this, is the fact that a device (such as the iPhone) is personal, so users are not obliged to provide the login info repeatedly. There is a drawback though; when you log out from an app you actually just de-authorize its access to your account. You are not really disconnected from Facebook, so even if you expect so, no credentials will be asked the next time you’ll use the app. In that case, you have to explicitly logout using the Facebook app or through the iPhone/iPad settings.

By finishing this tutorial you’ll be able to login with Facebook and to use the method you will learn in your projects too. However, I would strongly advise you to read the official Facebook documentation regarding the login workflow and the Single Sign-On technology. Doing so will also help you to obtain a deep understanding on the current topic.

App Overview

Looking at the big picture of this tutorial, one could say that is separated in two major parts. The first one is dedicated to the preparation needed to be done both in Facebook and Xcode prior to any implementation. In this, we will see how to create an application record on Facebook, how to setup Xcode and add the Facebook SDK framework, and how to use information taken from the newly created Facebook record to the project. Once this necessary step is over, we will be devoted to the implementation. By implementing a sample project, we will see how the login view and theFBLoginClass work by logging in and out. Finally, we will implement all those needed delegate methods that will inform our app about the connection state, and we display specific user information on-screen.

The next figure gives you an idea of the final goal of this tutorial.

Notice that if you download the sample project, you must perform some preparatory steps before you run it. Specifically, you must firstly set your own Facebook app’s info in the project’s .plist file. Be sure to correctly enter your app’s FacebookAppID, FacebookDisplayName string values and the URL Types array. If you skip it, you won’t be able to try out the sample project. Also, you must necessarily to add the Facebook SDK framework to the project. To accomplish all these, follow the guidelines described in thePreparing the Environment section.

Project Creation

Let’s start working by launching Xcode and creating a new project for the sample application, as it’s shown in the next figure:

In the guide that appears, select the Single View Application in theApplication category, under the iOS section. Click on the Next button to proceed. In the second step, enter the LoginSampleFB value in the Product Name field, and make sure that in the Devices drop down menu the iPhoneoption is selected.

Click on the Next button once again, and in the last step select a directory to save the project. Once you do so, click on the Create button and you are ready.

Preparing the Environment

Before using any Facebook SDK feature, it’s necessary to perform some prerequisite tasks. These include preparation on both the Facebook platform and the Xcode project, as well as adding the Facebook SDK framework on the app. Of course, you must have a Facebook account active. In case you don’t, then create one and then return here to continue.

For starters, open Safari or any other browser you use, and go to theFacebook Developers website. Click on the Log In link at the far right side of the screen, and in the next page enter your credentials.

After you have logged in, you will be probably guided to your Facebook home page. In this case, at the top bar, click on the most-right link with a down arrow image, and from the menu that will appear select the Manage Appsoption.

Next, from the top menu again, click on the Apps and then on the Create a New App option. As I have already said, for the purpose of this tutorial we are going to create a sample application which you can delete later.

In the window that pops up, in the Display Name field enter theLoginSample value as the app’s name. Also, in the Category drop down menu select any category you want, just don’t leave it with its default value. As you see in the next figure, I set the Education value.

Click on the Create App button, and then enter the captcha code you see on your screen in the security check window. Once you’ve finished, the new app will be created and you’ll be guided to the app’s dashboard.

The next step is to enable the app login from iOS. Click on the Settingsoption in the left menu, and in the main area click on the +Add Platform big button.

In the new window, select the iOS platform. A new panel is appeared on the dashboard titled iOS. In the Bundle ID field, it’s very important to enter theexact same to the project’s Bundle Identifier value, otherwise the app users won’t be able to be authorized. So, go back to Xcode, click on the project target on the Project Navigator pane, and under the General tab copy the value of the Bundle Identifier field.

Return on the Facebook dashboard, and paste or type the Bundle Identifier in the Bundle ID field. Also, make sure to enable the Single Sign On toggle button. Finally, click on the Save Changes button and this step is ready. Don’t logout from the dashboard though, as we have not finished yet.

Next, visit this link, download the Facebook SDK for iOS and install the package following the instructions shown on-screen. By default, the package is extracted on the Documents directory of your user account on your computer. You can either leave it there, or move it to another directory. In this tutorial, I presume that the SDK resides in the ~/USER/Documents directory. Once you have finished with the package extraction, open theFacebookSDK directory, and then drag and drop the FacebookSDK.framework on Xcode, under the Frameworks group. In the modal window that Xcode presents, unselect the Copy items into destination group’s folder (if needed) checkbox, so the framework won’t be actually copied on the project, just a reference to it to be created. By doing so, when you download and extract a new version of the SDK your project will be automatically updated when you re-open it. Leave the rest of options as they are, and click on the Finish button.

There is one final step needed to be performed, and that is to add three new keys to the project’s .plist file. So, open it by clicking on the Supporting Files group in the Project Navigator and then on the FBLoginSample-Info.plist file. Add a new key named FacebookAppID, and as its value paste the App ID value which you can copy from the Facebook dashboard, at the top of it. Similarly, add the FacebookDisplayName key, and in its value paste the Display Name which you can also copy from the dashboard.

Finally, create a new key named URL Types, and set its type to array with one item only. Give it the URL Schemes title and make it an array too. In the one and only item that should be contained, set the app ID value you copied from the Facebook dashboard, prefixing it with the fb literal. The next figure illustrates all the three additions on the .plist file:

All steps described here are mandatory for every app that is supposed to integrate Facebook features.

Creating Test Users

During the development stage of an app, and especially when authentication is involved in it, it’s generally a bad habit to use your normal account to perform all the required testings. Thankfully, Facebook supports the creation and usage of fake, test users per app. These users can’t harm your account, and of course, they can be deleted at any time, usually after the app has been developed. You can create as many of them as you want, you can “baptize” them as you want or let Facebook compose random names, and you can assign to a test user other test users as friends. You can even login to a test user’s account if it was a normal user.

To create a test user (at least) for the sample app that we will implement here, go to the Facebook dashboard of the LoginSample app, and select the Rolesoption at the left menu.

In the main dashboard area, click at the Test Users link at the top of it, and then click on the Add button, as you see in this figure:

A small window is appeared, where you set the number of test users you want to add, as well as some other options. If you want to create just one user, leave everything as they are and simply click on the Create Test Usersbutton.

You could skip the creation of a new test user in case Facebook adds one by default, named Open Graph Test User. Anyway, here is the list of test users as they are shown on my dashboard, where everything has been automatically created:

At the right of the test users there are some options, which you can use to rename them, login to their fake account or add friends. Feel free to use them and see what they are for.

Later on we are going to use the e-mail address of a test user to login with Facebook. As a last word, I would recommend to edit the test user you’re about to use and set a password, so you won’t encounter any problems during the login process.

Interface Setup

All the required preparation has been done, so we are now ready to proceed to implementation. As I have already said in the introduction, we are going to add a pre-made view, existing already built in the Facebook SDK. This view is based on a class named FBLoginView, and it has two advantages:

It automatically displays the log in/log out Facebook button depending on the connection state.
It handles all the session related stuff, connection states and basic data fetching under the hood.

From the developer’s point of view, using the login view consists of a two-step process in general. The first one includes all the necessary tasks needed to be done in order to display the view, and the second involves the implementation of some delegate methods for handling all changes been made on the login and session state.

In the default view of the ViewController class we are going to add various subviews, and the most of the will be used to display the user’s information after a successful login. Specifically, the most important subview that we will add is the login view, which actually is the login button. Further than that, we will use three UILabel objects to display:

The current login status.
The user’s name.
The user’s e-mail address.

Finally, we will have one more UIView object to show the user’s profile image. When the user is logged out, the all labels and the profile picture view will be hidden, with just one exception; the login status label.

Let’s get started by opening the Main.storyboard file. Add the following subviews to the View Controller scene:

UIView

Frame: X=60, Y=430, Width=200, Height=50

UILabel

Frame: X=20, Y=32, Width=280, Height=21
Text Alignment: Center

UIView

Frame: X=85, Y=61, Width=150, Height=150

UILabel

Frame: X=20, Y=219, Width=280, Height=21
Text Alignment: Center
Font: System Bold

UILabel

Frame: X=20, Y=248, Width=280, Height=21
Text Alignment: Center
Font Size: 14.0

In order for the two UIView objects to properly work, we must modify their classes and set the Facebook-related ones. Specifically, for the UIView at the bottom of the interface (#1 in the above list), in the Class* field of theCustom Class** section in the Identity Inspector, we must set theFBLoginValue, as shown below:

For the profile image view, meaning the second UIView object (#3 in the list above), we must set the FBProfilePictureView as its class name:

Setting these custom classes to the above views is not enough to make them work as expected. One more touch is required, and that is to make a call to both of these classes in the application:didFinishLaunchingWithOptions:method of the AppDelegate class. However, we must import the Facebook SDK libraries to the class firstly, so open the AppDelegate.m file and add the next command at the top of it:

#import <FacebookSDK/FacebookSDK.h>

Now, go to the AppDelegate.m file and in theapplication:didFinishLaunchingWithOptions: delegate method add the next two lines:

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
    // Override point for customization after application launch.

    [FBLoginView class];
    [FBProfilePictureView class];

    return YES;
}

Now that the first contact with the Facebook SDK has been made, let’s create some IBOutlet properties for the subviews we added to the interface, and then we’ll make the connections. Open the ViewController.h file, and add the next property declarations:

@interface FirstViewController : UIViewController

property (weak, nonatomic) IBOutlet FBLoginView *loginButton;

@property (weak, nonatomic) IBOutlet UILabel *lblLoginStatus;

@property (weak, nonatomic) IBOutlet UILabel *lblUsername;

@property (weak, nonatomic) IBOutlet UILabel *lblEmail;

@property (weak, nonatomic) IBOutlet FBProfilePictureView *profilePicture;

@end

Of course, you should import the Facebook SDK library here as well:

#import <FacebookSDK/FacebookSDK.h>

Note: It’s possible for Xcode to issue some errors, even when you import the above file. That’s probably caused because Xcode does not correctly “see” the path to the Facebook framework. There is a workaround for that:

Go to the project target and open the Build Settings tab.
Scroll down until you find the Search Paths section
Click on the Framework Search Paths key and press the Return key on your keyboard to edit the value.
You should see something similar to this: $(inherited) /Users/gabriel/Documents/FacebookSDK. Delete the $(inherited) term, and include the remaining string value in double quotes, just like it’s shown in the next figure:

Finally, go to the Main.storyboard file and connect all IBOutlet properties to the appropriate subviews. Specifically, be sure to match:

The loginButton property to the FBLoginView view at the bottom side of the scene.
The lblLoginStatus property to the first, top-most UILabel.
The lblUsername property to the second UILabel where the logged in user’s name will appear.
The profilePicture property to the FBProfilePictureView view.
The lblEmail property to the last UILabel object.

Logging In and Out

By simply doing all the previous preparation, the login view is ready to work. When the login button will be tapped, the user credentials must be given in order to get authenticated. This can take place in two ways: Either through the Safari app, or through the Facebook app if it is installed on your device (note that the Facebook app works only on a real device, not in the Simulator). Once the login info has been provided, our app must take the control again, but besides that, the Facebook SDK must handle and determine the login process.

Therefore, before we give a try to the app, we must add the necessary code that will do the above. First of all, open the AppDelegate.m file and add the following delegate method:

-(BOOL)application:(UIApplication *)application openURL:(NSURL *)url sourceApplication:(NSString *)sourceApplication annotation:(id)annotation{

}

The iOS will call this method after the user has authorized the app through Safari of the Facebook app. In here we will add just one line to let Facebook SDK handle the login result and modify the login view accordingly. Behind the scenes, the authentication token received by Facebook will be persistently stored, and the session state will get changed.

In the next code fragment, you see the necessary code added in the above method that handles the login process:

-(BOOL)application:(UIApplication *)application openURL:(NSURL *)url sourceApplication:(NSString *)sourceApplication annotation:(id)annotation{

    return [FBAppCall handleOpenURL:url
                  sourceApplication:sourceApplication];
}

Additionally, we must take care so all subviews to be hidden until the logged in state is determined, except for the login status label. They should become visible only after a successful login and after their values have been set, otherwise they must remain hidden. We’ll create a small private method to accomplish this. Open the ViewController.m file, and in the private class section add the next declaration:

@interface ViewController ()

-(void)toggleHiddenState:(BOOL)shouldHide;

@end

Next, define that method:

-(void)toggleHiddenState:(BOOL)shouldHide{
    self.lblUsername.hidden = shouldHide;
    self.lblEmail.hidden = shouldHide;
    self.profilePicture.hidden = shouldHide;
}

It’ obvious that the shouldHide parameter value defines the hidden state of the subviews. Now, let’s call it in the viewDidLoad method, so initially the subviews are hidden. Also, along with the call to this method, we will set the empty string as the login status label text value:

- (void)viewDidLoad
{
    [super viewDidLoad];
    // Do any additional setup after loading the view, typically from a nib.

    [self toggleHiddenState:YES];
    self.lblLoginStatus.text = @"";

}

It’s always necessary to specify the read permissions you want for your app when logging in with Facebook. The Facebook SDK uses by default thepublic_profile permissions, independently on whether you specify or not any. Using it, the user’s public info (such as name, profile picture, friends, etc) is returned. However, even though the SDK uses the public_profileautomatically, it is recommended to specifically set it along with any other permissions you want to ask for. In this sample app we want to get the user’s e-mail address as well, therefore the email permission is required too.

Right next it’s shown the way you can use to specify the permissions you need. Note that you must add it to the viewDidLoad method:

self.loginButton.readPermissions = @[@"public_profile", @"email"];

As a footnote, in case you want permissions other than for the public profile, the user’s e-mail address and the friends list, or if you need post permissions, your app must be approved by Facebook before it goes live to the App Store. If it won’t be approved, the Facebook-related features won’t work when your app is live.

Build and run the app now for first time. Tap (or click) on the Login with Facebook button, and be prepared to enter your credentials. In a previous section of the tutorial we talked about test users, so I would advise you to use such an account in order to make your testings. When you’ll go back on the app, you will see that the login view title has changed to Log out. Nothing else happens yet, but that’s something we’ll fix next.

Note that if you test the app on a real device and you have the Facebook app installed, then in case you have logged in with Facebook through that app, you won’t be asked again to enter your credentials, just to authorize the app. That’s the meaning of the Single Sign-On after all.

If you try to log out, an action sheet asking for confirmation will appear, as shown below:

Handling States

If you have successfully logged in and logged out, then you see that the login view makes it really easy to get connected to Facebook. For the time being though, the only thing that gets changed is the button’s view, nothing else. In this section, we will add all those required delegate methods that will enable us to know if we are connected or not, and then display or hide the appropriate information.

There are four delegate methods that should be implemented in total. Before we add any of them, we must make our class, the ViewController, to conform to a certain protocol, the FBLoginViewDelegate. Open the ViewController.hfile, and in the header line adopt the protocol, just like it’s shown below:

@interface ViewController : UIViewController <FBLoginViewDelegate>

Now, open the ViewController.m file, and before the implementation of the delegate methods, let’s make our class the delegate of the login view. Simply go to the viewDidLoad: method and add this line:

self.loginButton.delegate = self;

Let’s focus now on the delegate methods. The first one we’ll talk about, it is called when the user is logged in. Using it, we can change the hidden state of our subviews, and set the current login status value. Right next it’s shown its implementation:

-(void)loginViewShowingLoggedInUser:(FBLoginView *)loginView{
    self.lblLoginStatus.text = @"You are logged in.";

    [self toggleHiddenState:NO];
}

Two simple tasks are performed here: The appropriate message is set as the text of the status label, and the rest of the subviews are becoming visible.

Now that both the profile picture view and the username label can be shown when we have logged in, they must be assigned with values too. This will take place to another delegate method, which provides us with the info we want. That method contains a FBGraphUser object as parameter, which actually is a NSDictionary object, and it contains all the public info of the logged in user. Here is the implementation:

-(void)loginViewFetchedUserInfo:(FBLoginView *)loginView user:(id<FBGraphUser>)user{
    NSLog(@"%@", user);
    self.profilePicture.profileID = user.id;
    self.lblUsername.text = user.name;
    self.lblEmail.text = [user objectForKey:@"email"];
}

I intentionally added a NSLog command in the above method, just to let you see the data contained in the user object. By assigning the id property as the profile ID in the profile picture view, the Facebook SDK downloads the appropriate picture and displays it. If no user picture has been specified, then the default image of the Facebook user will be used. Lastly, the user’s name and the e-mail address values are set to the appropriate labels.

With the above two delegate methods, we managed to handle case where the user has logged in. Now, we must deal with the log out. For this case, there’s another delegate method, in which we will simply change the status text on the status label and we will hide the rest of the subviews. Here it is:

-(void)loginViewShowingLoggedOutUser:(FBLoginView *)loginView{
    self.lblLoginStatus.text = @"You are logged out";

    [self toggleHiddenState:YES];
}

There is one delegate method remaining, and that is to handle any errors that may occur. In this sample, we won’t do any actual error handling, we’ll just display the error on the debugger. However, in a real application you should handle all errors according to your app’s requirements.

-(void)loginView:(FBLoginView *)loginView handleError:(NSError *)error{
    NSLog(@"%@", [error localizedDescription]);
}

With the above four methods implemented, you can test the app once again. This time, when you have logged in, you’ll see the user’s name, the profile picture and the e-mail address displayed on the view.

Summary

Login with Facebook consists of one of the best solutions when you need to add a SSO-oriented login system to your app. By performing some simple steps as described in this tutorial, you gain multiple advantages: You get rid of the hassle to create your own login and authentication mechanism, and you offer your users a familiar technology to work with. Featuring well-known experiences surely leads to more attractive apps, and more potential users. Social apps cover a big part of the available app spectrum, and knowing how to deal with Facebook login and Facebook technologies in general is almost mandatory. Closing, I hope this tutorial to be beneficial to all, and that you’ll add what you’ve learned here to your code toolbox.

For your reference, you can download the complete Xcode project from here. As always, leave me comment if you have any question or feedback.

iOS Programming : How To Send Email in Your iPhone App

2014-05-20T05:24:00.000-07:00

http://www.appcoda.com/ios-programming-101-send-email-iphone-app/

Here comes another tutorial for our iOS Programming 101 series. Last time, we show you how to hide tab bar in navigation interface. In this tutorial, we’ll show you how easy you can let user send email in your app.

The iOS SDK has made it really easy to send email using the built-in APIs. With a few line of codes, you can launch the same email interface as the stock Mail app that lets you compose an email. In this tutorial, we’ll build a very simple app to show you how to send both plain text and HTML email using the iOS SDK.

Create a Simple View App with a Button

First, create a simple app with a view controller and a button. If you have no idea how to do it, you better revisit the Hello World tutorial. Let’s name the project as SimpleEmail. If you’ve successfully created your project, add a “Contact Us” button in the view.

SimpleEmail App with Contact Us Button

What the app does is that it’ll show up the email interface when user taps the “Contact Us” button.

Connecting the Contact Us Button with Action

In the past tutorials, we used to add the action method manually in the header file of the view controller file. We then link the button and the action method in the Interface Builder.

This time, let us show you another way to add the action method (make sure you use Xcode 4.3 or up).

In the Project Navigator, select the “SimpleEmailViewController.xib” file to go to the Interface Builder. Switch to the Assistant Editor and hide the Utility area:

Show Assistant Editor and Hide Utility Area

Once you make the change, your Xcode environment should look like the below screen. The interface and its corresponding code are now shown side by side:

User Interface and Source Code Displayed Side by Side

Now we’ll add an action method for the “Contact Us” button. Press and hold the control key, click the “Contact Us” button and drag it towards the “SimpleEmailViewController.h”. As you place the pointer between the “@interface” and “@end” keywords, you should see a prompt that allows you to insert outlet and action.

Prompt to Let You Insert Outlet and Action

Release the mouse button and Xcode prompts you to add the outlet/action. As we’re going to add the action method, select “Action” for “Connection” and name the method as “showEmail”. You can keep the event as “Touch Up Inside”. The “showEmail” method will be invoked when users lift up the finger inside the button.

Add action method - showEmail

Once you confirm the change by clicking the “Connect” button, Xcode automatically adds the method declaration in the SimpleEmailViewController.h.

Xcode Automatically Inserts the showEmail Method

Implementing the Email Interface

Next, import the “MessageUI.h” and implement the “MFMailComposeViewControllerDelegate” delegate in SimpleEmailViewController.h.

#import <UIKit/UIKit.h>
#import <MessageUI/MessageUI.h> 

@interface SimpleEmailViewController : UIViewController <MFMailComposeViewControllerDelegate> // Add the delegate
- (IBAction)showEmail:(id)sender;

@end

Select the “SimpleEmailViewController.m” and we’ll implement the “showEmail” method and MFMailComposeViewControllerDelegate. Add the following code in the implementation file:

- (IBAction)showEmail:(id)sender {
    // Email Subject
    NSString *emailTitle = @"Test Email";
    // Email Content
    NSString *messageBody = @"iOS programming is so fun!";
    // To address
    NSArray *toRecipents = [NSArray arrayWithObject:@"support@appcoda.com"];
    
    MFMailComposeViewController *mc = [[MFMailComposeViewController alloc] init];
    mc.mailComposeDelegate = self;
    [mc setSubject:emailTitle];
    [mc setMessageBody:messageBody isHTML:NO];
    [mc setToRecipients:toRecipents];

    // Present mail view controller on screen
    [self presentViewController:mc animated:YES completion:NULL];

}

- (void) mailComposeController:(MFMailComposeViewController *)controller didFinishWithResult:(MFMailComposeResult)result error:(NSError *)error
{
    switch (result)
    {
        case MFMailComposeResultCancelled:
            NSLog(@"Mail cancelled");
            break;
        case MFMailComposeResultSaved:
            NSLog(@"Mail saved");
            break;
        case MFMailComposeResultSent:
            NSLog(@"Mail sent");
            break;
        case MFMailComposeResultFailed:
            NSLog(@"Mail sent failure: %@", [error localizedDescription]);
            break;
        default:
            break;
    }
    
    // Close the Mail Interface
    [self dismissViewControllerAnimated:YES completion:NULL];
}

Line 3-7 of the above code define the email subject, message content and recipients. Line 9-13 creates the built-in MFMailComposeViewController. The MFMailComposeViewController class provides a standard interface that manages the editing and sending an email message. You can use this view controller to display a standard email view inside your application. We populate the fields of that view with initial values including the recipient email, subject and body text.

Line 13 of the code invokes the presentViewController to display the mail interface on screen.

The “didFinishWithResult:” is a method of the MFMailComposeViewControllerDelegate protocol. This method will be automatically called when the mail interface is closed (e.g. user cancels the operation). The result parameter tells you the result code when the mail composition interface is dismissed. For the sake of simplicity, we simply log the status in this example. In real world application, you should provide special handling for the result code (e.g. display an alert when the app fails to send the email).

Finally, line 41 dismisses the mail composition interface.

Adding the MessageUI Framework

However, this is not done yet. If you try to compile the app, you’ll end up with the below compilation error:

SimpleEmail App Compilation Error

The problem is that Xcode has no idea about what the “MFMailComposeViewController” is. Though “MFMailComposeViewController” is a built-in controller in iOS SDK, it’s developers’ responsibility to embed the necessary framework in your project. When the Xcode project is first created, it only comes with three core frameworks including UIKit, Foundation and CoreGraphics. The “MFMailComposeViewController” class is included in the MessageUI framework that you have to add manually.

To fix the error, we have to embed the framework in the project. In the Project Navigator, select “SimpleEmail” project and then select the “SimpleEmail” target under “Targets”. Click “Build Phases” at the top of the project editor. Then open the Link Binary With Libraries section.

Add Framework in Build Phases

Next, click the “+” button and select the “MessageUI.framework”. After you click the “Add” button, Xcode will include the MessageUI framework in the project.

Add MessageUI Framework in Your Xcode Project

Now the error should have been fixed. Run your app and see how it works. Tapping the “Contact Us” button will show you the “Compose Email” interface with pre-populated content.

SimpleEmail App

Composing HTML Email

The SimpleEmail app now only supports plain text email. You can easily enable the support of HTML email by changing the “isHTML” parameter in “setMessageBody” method from “N” to “Y”. Try to change the code in “showEmail” method to the following:

- (IBAction)showEmail:(id)sender {
    // Email Subject
    NSString *emailTitle = @"Test Email";
    // Email Content
    NSString *messageBody = @"<h1>Learning iOS Programming!</h1>"; // Change the message body to HTML
    // To address
    NSArray *toRecipents = [NSArray arrayWithObject:@"support@appcoda.com"];
    
    MFMailComposeViewController *mc = [[MFMailComposeViewController alloc] init];
    mc.mailComposeDelegate = self;
    [mc setSubject:emailTitle];
    [mc setMessageBody:messageBody isHTML:YES];
    [mc setToRecipients:toRecipents];

    // Present mail view controller on screen
    [self presentViewController:mc animated:YES completion:NULL];

}

Compile and run your app again. With just a simple change, the SimpleEmail app now offers HTML support!

SimpleEmail App with HTML Support

As always, leave us comment and share your thought about the tutorial. If you have any suggestion for the iOS Programming 101 series, feel free to let us know.

Threading Programming

2014-04-27T21:49:00.002-07:00

Threading Programming

Thread is a combination of the kernel-level and application-level data structures needed to manage the execution of code. The kernel-level structures coordinate the dispatching of events to the thread and the preemptive scheduling of the thread on one of the available cores. The application-level structures include the call stack for storing function calls and the structures the application needs to manage and manipulate the thread’s attributes and state.

Threads are a relatively lightweight way to implement multiple paths of execution inside of an application. At the system level, programs run side by side, with the system doling out execution time to each program based on its needs and the needs of other program.

Ref:
https://developer.apple.com/library/mac/documentation/Cocoa/Conceptual/Multithreading/AboutThreads/AboutThreads.html#//apple_ref/doc/uid/10000057i-CH6-SW2

NSNotification - iOS

2014-04-02T03:42:00.001-07:00

WordPress and MultiSite Enabling

2014-04-02T03:41:00.004-07:00

MultiSite in WordPress

how to use wordpress site?

MultiSite

Stored Procedure - Asp.net MVC

2014-04-02T03:35:00.002-07:00

http://www.entityframeworktutorial.net/data-read-using-stored-procedure.aspx

SQL Server Insert, Retrieve, Update, Delete Operations using Stored Procedures

2014-04-02T03:34:00.002-07:00

http://www.dotnet-tricks.com/Tutorial/sqlserver/I3W8010412-SQL-Server-Insert,-Retrieve,-Update,-Delete-Operations-using-Stored-Procedures.html

iOS App iCon Information

2014-04-02T03:33:00.003-07:00

iOS iCon Information
RUL:https://developer.apple.com/library/ios/documentation/userexperience/conceptual/mobilehig/IconMatrix.html

Google Analytics Tutorial Step-By-Step

2014-03-05T03:15:00.001-08:00

How Google Analytics works | lynda.com overview

2014-03-05T03:13:00.007-08:00

How to add Google Analytics Ecommerce tracking to OpenCart

2014-03-05T03:12:00.001-08:00

Hibrise Family Photo Gallery

2013-12-29T08:50:00.001-08:00

Hibrise Got Talent

2013-12-29T08:45:00.003-08:00

Hibrise Got Talent

2013-12-29T08:45:00.001-08:00

Hibrise GOT Talent

2013-12-29T08:43:00.001-08:00

ASP.NET MVC 4

2013-11-27T23:35:00.000-08:00

ASP.NET MVC

The ASP.NET MVC framework provides an alternative to the ASP.NET Web Forms pattern for creating MVC-based Web applications. The MVC framework is defined in theSystem.Web.Mvc namespace and is a fundamental, supported part of the System.Web namespace. It is integrated with existing ASP.NET features, such as master pages and membership-based authentication.

The MVC framework includes the following components:

## ASP.NET MVC is open source !-##

In March 2012, Scott Guthrie announced on his blog that Microsoft had released part of their web stack (including ASP.NET MVC, Razor and Web API) under an open source license (Apache License 2.0).

-Download from Codeplex.com

## ASP.NET MVC is a web application development framework built on top of Microsoft’s .NET Framework. ASP.NET Web Form was a replacement for Microsoft’s Active Server Pages (ASP) but ASP.NET MVC is not a replacement for ASP.NET Web Forms and it’s just an alternate way of making an ASP.NET website.

The MVC pattern helps you create applications that separate the different aspects of the application (input logic, business logic, and UI logic), while providing a loose coupling between these elements. The pattern specifies where each kind of logic should be located in the application. The UI logic belongs in the view. Input logic belongs in the controller. Business logic belongs in the model. This separation helps you manage complexity when you build an application, because it enables you to focus on one aspect of the implementation at a time. For example, you can focus on the view without depending on the business logic.

Advantages of an MVC-Based Web Application

The ASP.NET MVC framework offers the following advantages:

· It makes it easier to manage complexity by dividing an application into the model, the view, and the controller.

· It does not use view state or server-based forms. This makes the MVC framework ideal for developers who want full control over the behavior of an application.

· It uses a Front Controller pattern that processes Web application requests through a single controller. This enables you to design an application that supports a rich routing infrastructure. For more information, seeFront Controller on the MSDN Web site.

· It provides better support for test-driven development (TDD).

· It works well for Web applications that are supported by large teams of developers and Web designers who need a high degree of control over the application behavior.

Advantages of a Web Forms-Based Web Application

The Web Forms-based framework offers the following advantages:

· It supports an event model that preserves state over HTTP, which benefits line-of-business Web application development. The Web Forms-based application provides dozens of events that are supported in hundreds of server controls.

· It uses a Page Controller pattern that adds functionality to individual pages. For more information, see Page Controller on the MSDN Web site.

· It uses view state or server-based forms, which can make managing state information easier.

· It works well for small teams of Web developers and designers who want to take advantage of the large number of components available for rapid application development.

· In general, it is less complex for application development, because the components (the Page class, controls, and so on) are tightly integrated and usually require less code than the MVC model.

Front Controller:

http://msdn.microsoft.com/en-us/library/ms978723.aspx

Context:

You have decided to use the Model-View-Controller(MVC) pattern to separate the user interface logic from the business logic of your dynamic Web application. You have reviewed the Page Controller pattern, but your page controller classes have complicated logic, are part of a deep inheritance hierarchy, or your application determines the navigation between pages dynamically based on configurable rules.

Problem :

How do you best structure the controller for very complex Web applications so that you can achieve reuse and flexibility while avoiding code duplication?.

Page Controller

http://msdn.microsoft.com/en-us/library/ms978764.aspx

Context

You decided to use the Model-View-Controller (MVC) pattern to separate the user interface components of your dynamic Web application from the business logic. The application you are building constructs the Web pages dynamically, but the navigation between the pages is mostly static.

Problem

How do you best structure the controller for moderately complex Web applications so that you can achieve reuse and flexibility while avoiding code duplication?

Solution

Front Controller solves the decentralization problem present in Page Controller by channeling all requests through a single controller. The controller itself is usually implemented in two parts: a handler and a hierarchy of commands (see Figure 1).

Figure 1: Front Controller structure

The handler has two responsibilities:
· Retrieve parameters. The handler receives the HTTP Post or Get request from the Web server and retrieves relevant parameters from the request.
· Select commands. The handler uses the parameters from the request first to choose the correct command and then to transfers control to the command for processing.
Figure 2 shows these two responsibilities.

Figure 2: Front Controller, typical scenario
The commands themselves are also part of the controller. The commands represent the specific actions as described in the Command pattern [Gamma95]. Representing commands as individual objects allows the controller to interact with all commands in a generic way, as opposed to invoking specific methods on a common command class. After the command object completes the action, the command chooses which view to use to render the page.

XMPP functionality in the App Delegate for Instant chat service in xocde(iOS)

2013-11-27T23:27:00.003-08:00

inserting the XMPP functionality in the App Delegate is a great way to make the functionality easily available throughout the app.

1	[[UIApplication sharedApplication] delegate]

The XMPP class will dispatch events by means of protocols which we will define below. This is the list of events handled by this class:

· The client connected with the server

· The client authenticated with the server

· The client received a notification of presence (e.g. a user logged in)

· The client received a message

XMPPStream will be the barebone of our client-server communication system and all messages will be exchanged through it. We will also define the methods to manage connection and disconnection.

@interface JabberClientAppDelegate()

- (void)setupStream;

- (void)goOnline;

- (void)goOffline;

@end

@implementation JabberClientAppDelegate

@end

Here, the most important is setupStream, which creates the channel to manage the exchange of messages.

- (void)setupStream {

xmppStream = [[XMPPStream alloc] init];

[xmppStream addDelegate:self delegateQueue:dispatch_get_main_queue()];

}

Just two lines of code, but behind that many things happen. The dispatch_get_main_queue() is a function which returns a reference
to the system level asynchronous execution mechanism, to which we can sumbit tasks and receive notifications.

Offline and Online functions are able to notify other users when we are connected or not. They are defined by sending an XMPPPresence object through the socket. The server will dispatch the notification accordingly.

- (void)goOnline {

XMPPPresence *presence = [XMPPPresence presence];

[[self xmppStream] sendElement:presence];

}

- (void)goOffline {

XMPPPresence *presence = [XMPPPresence presenceWithType:@"unavailable"];

[[self xmppStream] sendElement:presence];

}

The connect method is the most important, for it manages the login operation. It returns a boolean representing whether the connection was successful or not. At first it sets up the stream, then it uses data stored in NSUserDefaults to decorate the stream and call a connect message. An alert view is displayed if the connection is not successful.

- (BOOL)connect {

[self setupStream];

NSString *jabberID = [[NSUserDefaults standardUserDefaults] stringForKey:@"userID"];

NSString *myPassword = [[NSUserDefaults standardUserDefaults] stringForKey:@"userPassword"];

if (![xmppStream isDisconnected]) {

return YES;

}

if (jabberID == nil || myPassword == nil) {

return NO;

}

[xmppStream setMyJID:[XMPPJID jidWithString:jabberID]];

password = myPassword;

NSError *error = nil;

if (![xmppStream connect:&error])

{

UIAlertView *alertView = [[UIAlertView alloc] initWithTitle:@"Error"

message:[NSString stringWithFormat:@"Can't connect to server %@", [error localizedDescription]]

delegate:nil

cancelButtonTitle:@"Ok"

otherButtonTitles:nil];

[alertView show];

[alertView release];

return NO;

}

return YES;

}

For sake of completeness, we also implement the disconnect method which is defined as follows:

- (void)disconnect {

[self goOffline];

[xmppStream disconnect];

}

Now that we have some of the basic functions we can use them in specific cases, for example, when the application becomes active or inactive.

- (void)applicationWillResignActive:(UIApplication *)application {

[self disconnect];

}

- (void)applicationDidBecomeActive:(UIApplication *)application {

[self connect];

}

We are left with the core of the system, the notifications of events and related behaviors, which we implement by means of protocols.

What is jabber ?

2013-11-27T23:25:00.002-08:00

What is jabber ?

XMPP stands for eXtensible Messaging and Presence Protocol. Such a protocol is open-standard and oriented to message exchange. The original name of the protocol was Jabber.

how message would send ?

The XMPP protocol is based on XML (Extensible Markup Language) so each type of message (e.g. login, message send, etc.) is encoded in this format. For example, let’s suppose President Obama sends a message to Hillary. The format of the message would be something like this:

<body>Hi there</body>

</message>

how does it work?

XMPP is a decentralized service, much like email. This means that the Hillary and Obama accounts might be on different servers (i.e. obama@server.com and hillary@otherserver.com). The message is delivered anyway because XMPP enables server-to-server communication.

Example: In case Hillary is offline, the message is cached on the server and delivered when she goes online. To keep things simple and focus on the client side, in this tutorial we will consider a scenario with just one server.

List of jabber server :

http://xmpp.org/xmpp-software/servers/

Jeabbered (easy install and configure ):

http://www.process-one.net/en/ejabberd/

Mac Version Ejabbered Download link:

http://www.process-one.net/en/ejabberd/downloads

After installation is completed. We needed to to following steps:

The most important commands are ‘start’ and ‘stop’. In case they are not executable you can make them so by issuing the following shell command:

chmod 755 stop
chmod 755 start

The folder contains also a ‘postinstall.sh’ script, which has to be run right after the installation to create the admin user. The script expects three parameters: user, domain and password. So we can run it like this:

./postinstall.sh cesare jerry.local password

We have chosen jerry.local, the name of the local machine, as domain but ‘localhost’ would work as well. This starts the server and adds this user as administrator. To double check if the configuration is correct we can open the ‘ejabberd.cfg’ file in the ‘con’ folder. In the Access Control List section it should contain the following
statement

1	`{acl, admin, {user, "cesare", "jerry.local"}}.`

Now you should be able to start the jabber server by typing

./start

This will open by default a web page which notifies you that the server has been started.

iPhone/iPad Tutorial & Lesson 29: SQLite in iPhone Part 1/2

2013-11-27T23:21:00.001-08:00

The Quran on Human Embryonic Development:

2012-08-01T10:38:00.001-07:00

The Quran on Human Embryonic Development

In the Holy Quran, God speaks about the stages of man’s embryonic development:

We created man from an extract of clay. Then We made him as a drop in a place of settlement, firmly fixed. Then We made the drop into an alaqah (leech, suspended thing, and blood clot), then We made the alaqah into a mudghah (chewed substance)... ¹ (Quran, 23:12-14)

----------------------------------------------------------------------------------------------------

Literally, the Arabic word alaqah has three meanings: (1) leech, (2) suspended thing, and (3) blood clot.

In comparing a leech to an embryo in the alaqah stage, we find similarity between the two² as we can see in figure 1. Also, the embryo at this stage obtains nourishment from the blood of the mother, similar to the leech, which feeds on the blood of others.³

Figure 1: Drawings illustrating the similarities in appearance between a leech and a human embryo at the alaqah stage. (Leech drawing from Human Development as Described in the Quran and Sunnah, Moore and others, p. 37, modified from Integrated Principles of Zoology, Hickman and others. Embryo drawing from The Developing Human, Moore and Persaud, 5th ed., p. 73.)

The second meaning of the word alaqah is “suspended thing.” This is what we can see in figures 2 and 3, the suspension of the embryo, during the alaqah stage, in the womb of the mother.

Figure 2: We can see in this diagram the suspension of an embryo during the alaqah stage in the womb (uterus) of the mother. (The Developing Human, Moore and Persaud, 5th ed., p. 66.) (Click on the image to enlarge it.)

Figure 3: In this photomicrograph, we can see the suspension of an embryo (marked B) during the alaqah stage (about 15 days old) in the womb of the mother. The actual size of the embryo is about 0.6 mm. (The Developing Human, Moore, 3rd ed., p. 66, from Histology, Leeson and Leeson.)

The third meaning of the word alaqah is “blood clot.” We find that the external appearance of the embryo and its sacs during the alaqah stage is similar to that of a blood clot. This is due to the presence of relatively large amounts of blood present in the embryo during this stage⁴ (see figure 4). Also during this stage, the blood in the embryo does not circulate until the end of the third week.⁵ Thus, the embryo at this stage is like a clot of blood.

Figure 4: Diagram of the primitive cardiovascular system in an embryo during the alaqah stage. The external appearance of the embryo and its sacs is similar to that of a blood clot, due to the presence of relatively large amounts of blood present in the embryo. (The Developing Human, Moore, 5th ed., p. 65.) (Click on the image to enlarge it.)

So the three meanings of the word alaqah correspond accurately to the descriptions of the embryo at the alaqah stage.

The next stage mentioned in the verse is the mudghah stage. The Arabic word mudghah means “chewed substance.” If one were to take a piece of gum and chew it in his or her mouth and then compare it with an embryo at the mudghah stage, we would conclude that the embryo at the mudghah stage acquires the appearance of a chewed substance. This is because of the somites at the back of the embryo that “somewhat resemble teethmarks in a chewed substance.”⁶ (see figures 5 and 6).

Figure 5: Photograph of an embryo at the mudghah stage (28 days old). The embryo at this stage acquires the appearance of a chewed substance, because the somites at the back of the embryo somewhat resemble teeth marks in a chewed substance. The actual size of the embryo is 4 mm. (The Developing Human, Moore and Persaud, 5th ed., p. 82, from Professor Hideo Nishimura, Kyoto University, Kyoto, Japan.)

Figure 6: When comparing the appearance of an embryo at the mudghah stage with a piece of gum that has been chewed, we find similarity between the two. A) Drawing of an embryo at the mudghah stage. We can see here the somites at the back of the embryo that look like teeth marks. (The Developing Human, Moore and Persaud, 5th ed., p. 79.) B) Photograph of a piece of gum that has been chewed. (Click on the image to enlarge it.)

How could Muhammad have possibly known all this 1400 years ago, when scientists have only recently discovered this using advanced equipment and powerful microscopes which did not exist at that time? Hamm and Leeuwenhoek were the first scientists to observe human sperm cells (spermatozoa) using an improved microscope in 1677 (more than 1000 years after Muhammad ). They mistakenly thought that the sperm cell contained a miniature preformed human being that grew when it was deposited in the female genital tract.⁷

Professor Emeritus Keith L. Moore⁸ is one of the world’s most prominent scientists in the fields of anatomy and embryology and is the author of the book entitled The Developing Human, which has been translated into eight languages. This book is a scientific reference work and was chosen by a special committee in the United States as the best book authored by one person. Dr. Keith Moore is Professor Emeritus of Anatomy and Cell Biology at the University of Toronto, Toronto, Canada. There, he was Associate Dean of Basic Sciences at the Faculty of Medicine and for 8 years was the Chairman of the Department of Anatomy. In 1984, he received the most distinguished award presented in the field of anatomy in Canada, the J.C.B. Grant Award from the Canadian Association of Anatomists. He has directed many international associations, such as the Canadian and American Association of Anatomists and the Council of the Union of Biological Sciences.

In 1981, during the Seventh Medical Conference in Dammam, Saudi Arabia, Professor Moore said: “It has been a great pleasure for me to help clarify statements in the Quran about human development. It is clear to me that these statements must have come to Muhammad from God, because almost all of this knowledge was not discovered until many centuries later. This proves to me that Muhammad must have been a messenger of God.”⁹ (To view the RealPlayer video of this comment click here ).

Consequently, Professor Moore was asked the following question: “Does this mean that you believe that the Quran is the word of God?” He replied: “I find no difficulty in accepting this.”¹⁰

During one conference, Professor Moore stated: “....Because the staging of human embryos is complex, owing to the continuous process of change during development, it is proposed that a new system of classification could be developed using the terms mentioned in the Quran and Sunnah (what Muhammad said, did, or approved of). The proposed system is simple, comprehensive, and conforms with present embryological knowledge. The intensive studies of the Quran and hadeeth (reliably transmitted reports by the Prophet Muhammad’s companions of what he said, did, or approved of) in the last four years have revealed a system for classifying human embryos that is amazing since it was recorded in the seventh century A.D. Although Aristotle, the founder of the science of embryology, realized that chick embryos developed in stages from his studies of hen’s eggs in the fourth century B.C., he did not give any details about these stages. As far as it is known from the history of embryology, little was known about the staging and classification of human embryos until the twentieth century. For this reason, the descriptions of the human embryo in the Quran cannot be based on scientific knowledge in the seventh century. The only reasonable conclusion is: these descriptions were revealed to Muhammad from God. He could not have known such details because he was an illiterate man with absolutely no scientific training.”¹¹ (View the RealPlayer video of this comment ).

Next: The Quran on Mountains

_____________________________

Footnotes:

(1) Please note that what is between these special brackets ... in this web site is only a translation of the meaning of the Quran. It is not the Quran itself, which is in Arabic.

(2) The Developing Human, Moore and Persaud, 5th ed., p. 8.

(3) Human Development as Described in the Quran and Sunnah, Moore and others, p. 36.

(4) Human Development as Described in the Quran and Sunnah, Moore and others, pp. 37-38.

(5) The Developing Human, Moore and Persaud, 5th ed., p. 65.

(6) The Developing Human, Moore and Persaud, 5th ed., p. 8.

(7) The Developing Human, Moore and Persaud, 5th ed., p. 9.

(8) Note: The occupations of all the scientists mentioned in this web site were last updated in 1997.

(9) The reference for this saying is This is the Truth (videotape). For a copy of this videotape, please visit this page.

(10) This is the Truth (videotape).

(11) This is the Truth (videotape). For a copy, see footnote no. 9.

Videos

2012-06-10T10:15:00.000-07:00

BSA UNIVERSITY DATA CENTER UTILIZATION ,CONTENT UPLOADING AND DOWNLOADING.. WEB APPLICATION

MCA ENTRANCE EXAMINATION , BSA UNIVERSITY 2K12..

MCA ENTRANCE EXAMINATION , BSA UNIVERSITY 2K12.. VIDEO

Kareems First Day Ninjak Practice trained by friend..

ANIMOTO VIDEO ..

Create your own video slideshow at animoto.com.
SEE

BSAUEE 2012 Application

2012-06-10T09:21:00.000-07:00

2012-06-07T03:18:00.002-07:00

B S Abdur Rahman University,MCA Entrance Examination 2012
Web Application : ASP.NET and MS-SQL

kareems.in MY New Domain

2012-03-24T21:07:00.001-07:00

Attendance System

2012-01-01T09:37:00.000-08:00