todaywidget-display image

Hello readers, today we’re going to see how today widget works and how to implement in our app.

1. What is an Extension and a Today Widget.

First of all what is a widget, briefly speaking a widget gives users quick access to information that’s important right now. For example, users open the today widget to check daily schedule, stock updates, or even perform a quick task such as marking an item as done. Basically users tend to open the Today view frequently, and they expect the information they’re interested in to be instantly available to them.

Now an extension is launched and controlled by a host app, lets say “safari”, or the app from which you want to display the data.

Extensions created for the today extension point, called widgets, are meant to provide simple and quick access to information which is fetched from some host app. Widgets link to the Notification Center framework. It’s important that you design your widget with a simple and focused user interface, because too much interaction can be a problem. Note one important thing that you don’t have access to a keyboard.

That’s about enough theoretical knowledge on today extensions, lets start creating one.

2. Target Setup

Step 1 : Project Setup

If you want to build this widget as an extension to an existing app, go ahead and open your Xcode project, and jump to the second step. If you’re starting from scratch just like me, then you first need to create a containing app.

Open Xcode and in the File menu select New > Project…. We will be using Objective-C as the programming language and the the Single View Application template to start with and give a name as you wish.

Screen Shot 2015-10-14 at 10.31.48 AM

Step 2 : Add New Target

Open the File menu and choose New > Target… In the Application Extension category, select the Today Extension template.

Screen Shot 2015-09-25 at 2.12.18 PM

Click next and give your widget a name based on the use it is designed for.

Now you’ll see that the Project to which the target will be added is the project we’re currently working with and the extension will be embedded in the containing application. Also note that the extension has a distinct bundle identifier based on the one of the containing application.

Screen Shot 2015-09-25 at 2.12.50 PM

Click Finish to create the new target. Xcode has created a new scheme for you and it will ask you to activate it for you. Click Activate to continue.

Screen Shot 2015-09-25 at 2.13.02 PM

You’ll see that Xcode has created a new group for the widget named multiplyTodayExample and added a number of files to it, a UIViewController subclass and a storyboard. That’s right, a widget is nothing more than a view controller and a storyboard. If you open the view controller’s header in the code editor, you’ll notice that it is indeed subclassingUIViewController. If you check the storyboard of the today widget you’ll see that a default label is already present saying “Hello World”

If you select the extension target from the list of targets, open the Build Phases tab, and expand the Link Binary With Libraries section, you’ll see that the new target is linked to the Notification Center framework.

Screen Shot 2015-10-14 at 10.50.47 AM

3. Test Run

Step 1 : Running the today widget

Just as simple as that its time to see how the widget looks. Yes its all ready, With the multiplyTodayExample scheme selected, select Run from the Product menu or hit Command-R. Reveal the notification center by swiping from the top of the screen to the bottom and tap the Edit button at the bottom of the notification center.

Screen Shot 2015-09-25 at 2.48.34 PM

Your widget should be available to add to the Today section. Add it to the Today section by tapping the add button on its left.

Screen Shot 2015-09-25 at 2.49.06 PM

This is how the widget would look in the today tab.

iOS Simulator Screen Shot Sep 25, 2015, 2.49.28 PM

4. Adding some Functionalities

Step 1 : User Interface

Now we’re going to add a text field and a button on the storyboard of the widget. Add the link the property and the action of the text field and button respectively. Add the auto layout or auto resizing to the elements on the story board.

Screen Shot 2015-10-14 at 11.29.46 AM

Step 2 : Fixing the bottom margin

Add the following code in the widget view controller.m for the realignment of the bottom margin.

- (UIEdgeInsets)widgetMarginInsetsForProposedMarginInsets:(UIEdgeInsets)margins
{
    margins.bottom = 20.0;
    return margins;
}

Step 3 : UIPasteBoard Methods and button action

As there is no access to the keyboard, I have kept some text on the app view controller which can be copied and used in this widget. For this i have used the UIPasteBoard form the UIKit, the code for this is as follows.

->In the app view vontroller.m
- (void) textPressed:(UILongPressGestureRecognizer *) gestureRecognizer {
    if (gestureRecognizer.state == UIGestureRecognizerStateRecognized &&
        [gestureRecognizer.view isKindOfClass:[UILabel class]]) {
        //UILabel *someLabel = (UILabel *)gestureRecognizer.view;
        UIPasteboard *pasteboard = [UIPasteboard generalPasteboard];
        [pasteboard setString:_txtFirst.text];
 
        //let the user know you copied the text to the pasteboard and they can no paste it somewhere else

    }
}

- (void) textTapped:(UITapGestureRecognizer *) gestureRecognizer {
    if (gestureRecognizer.state == UIGestureRecognizerStateRecognized &&
        [gestureRecognizer.view isKindOfClass:[UILabel class]]) {
        //UILabel *someLabel = (UILabel *)gestureRecognizer.view;
        UIPasteboard *pasteboard = [UIPasteboard generalPasteboard];
        [pasteboard setString:_txtSecond.text];
 
        //let the user know you copied the text to the pasteboard and they can no paste it somewhere
    }
}


-> In the widget view controller's view did load.

UIPasteboard *pasteboard = [UIPasteboard generalPasteboard];
NSString *strPaste = pasteboard.string;
if (strPaste) 
{
    self.txtfieldNum1.text = strPaste;
}

And the following code for the button action.

- (IBAction)btnAddClick:(UIButton *)sender 
{
    int x = [_txtfieldNum1.text intValue];
    int y = 2;
    sum = x * y;
    sum1 = [NSString stringWithFormat:@"%d", sum];
    [_txtfieldNum1 setText:sum1];
    //_txtfieldNum1.text = @"1234";
}

Step 4 : Build and Run

First run the widget scheme in the Today section, and then run the app scheme.

Once the app starts running, select the number from the text “0123456789”, that you wish to multiply with the help today widget.

Screen Shot 2015-10-14 at 10.11.06 AM

Now drag the top menu from where the today tab and the notifications tab are opened. You will notice that because of the use of UIPasteBoard the copied text is already in the UITextfield.

Simulator Screen Shot Oct 14, 2015, 10.11.22 AM

Then press the multiply button and the text in the textfield will get multiplied by 2.

Simulator Screen Shot Oct 14, 2015, 10.11.26 AM

Conclusion:

Although this was very easy logic implemented here in this today widget, this should give a good idea about what today widgets and extensions are and how to use them. I hope the knowledge presented here comes in useful when building your next today widget.

Creating a Today Widget

Arpit Dhamane

I am a Computer Engineer, By profession i am iOS Developer. I like to explore & learn new things, R&D in new technologies, also there is a lot of SARCASM left in me to come out...!!! Feel free to contact me for any queries, i would be more than happy to help you out. I give my job description (in Hindi) as “Han Mai Keyboard Thokta Hun”.

Category: Uncategorized
941 views