Customize your alerts with NoticeView library

Error notice view
Cool Error notice view

I came across a lot of useful libraries hosted in Github, one of them is called NoticeView.

This is a lightweight library which gives a cool style for success and error alerts. Finally, i get rid of UIAlertView for just displaying “Network error” messages.

This tutorial is to introduce you with this intuitive library through a practical example: Trying to load a URL in webview, if any error occured (example: Internet connection down), a NoticeView will be displayed instead of the UIAlertView 🙂 

Let’s get started, open up Xcode, File menuNewProject, choose Single View Application template, give it a name NoticeViewAlert, check ‘Use Storyboards’ and ‘Use Automatic Reference Counting’ opitons. Choose a place to save your project and click Create.

Click on MainStoryboard.storyboard file to open it in the editor. Now from the Object Library, drag a UIWebView object and drop it in the view.

Add UIWebView object to the view

That’s all for the UI. Now time to include the NoticeView library into your Xcode project. To do so, you have two options: The first is to download the library from github (or clone its repository to your local repository) and then grab WBNoticeView folder in your Xcode project. The second option (and the recommended one) is to install the library within a cocoapods file.

P.S: I strongly recommand the latter option (cocoapods) because it will handle all the dependencies of your library, you just type the Library name (pod ‘NoticeView’), and cocoapods will do all the rest for you. If you don’t know about cocoapods and the dependency management tools, this is a good start.

Once the library is included into Xcode, select ViewController.h and make the following change:

[sourcecode lang=”objc”]
@interface ViewController : UIViewController<UIWebViewDelegate>
[/sourcecode]

You just indicated that the class ViewController will implement the UIWebViewDelegate methods.

Now switch to ViewController.m file, import WBErrorNoticeView class which you will need to display the error notice, and declare the IBOutlet property for the webview:

[sourcecode lang=”objc”]
#import "WBErrorNoticeView.h"

@interface ViewController ()

@property(assign)IBOutlet UIWebView *webView;

@end
[/sourcecode]

And make these changes to viewDidLoad method:

[sourcecode lang=”objc”]
– (void)viewDidLoad
{
[super viewDidLoad];
// Do any additional setup after loading the view, typically from a nib.
self.webView.delegate=self;

NSURL *url=[NSURL URLWithString:@"http://www.google.com"];
NSURLRequest *request=[NSURLRequest requestWithURL:url];
[self.webView loadRequest:request];
}
[/sourcecode]

P.S: Don’t forget to bind the outlet to its UIWebView object from the connection inspector as shown below.

Bind the outlet to its property in the connections inspector

The last method to implement is one of UIWebView delegate method, go ahead and add this in ViewController.m file:

[sourcecode lang=”objc”]
#pragma mark – WebView delegate method

– (void)webView:(UIWebView *)webView didFailLoadWithError:(NSError *)error{

WBErrorNoticeView *errorNotice=[WBErrorNoticeView errorNoticeInView:self.view title:@"Network Error" message:@"Please check your internet connection"];
errorNotice.sticky=YES;
[errorNotice show];
}
[/sourcecode]

As you may guess, didFailLoadWithError delegate method gets called if the url request fail to load, due to many reasons, internet connection issue or requested server down, etc.

Here, you declare an WBErrorNoticeView with a title and a message, set its sticky property to YES in order to keep it visible until you click on it. And finally, show the view.

That’s it, build and run your project, oh, before that, make sure to turn off the wifi connection to make sure we’ll get a network error to see that cool error notice view 🙂

Run your project, now you will see a nice red error view. That’s cooler than the UIAlertView one, isn’t?

error notice view

If you got any question, improvement, or any other cool library, don’t hesitate to leave your comment, i would love to hear from you!