Intive Blog

How to use Widgets

Widgets, in iOS, are a type of extension referred to as a “today” extension. Similarly to Android, they work as a tool to expand the functionalities of your app and provide the user with quick actions and/or immediate data at any given moment. The functionalities of an app must often be straightforward and its information quickly available. For example, it could be a tool that displays stock market numbers, the score of a game or provides an interactive checklist that the user can explore and cross out. Complex operations and actions that take time and intense resources are not appropriate in this context.

 

Getting started

Every type of extension is part of a regular app, in this case, the container app. A container app can hold multiple extensions (thus you can have multiple widgets for the same app). These are the steps to add one:

  1. Click on the project file.
  2. Add a new target.
  3. Go to “Application extensions”.
  4. Select “Today Extension”.

wid1

After doing that, a new target and a new storyboard will appear on your project.

wid2

Now, let’s take a look at the widget storyboard.

wid3
The view looks and behaves very much like a regular view of the app. One can use Labels, Images, Buttons and Table Views in the same normal manner. However, there are a few limitations to keep in mind. The storyboard should implement auto layout correctly, otherwise it might be displayed with the incorrect height. Also, components like the keyboard, the camera or the microphone are not available for usage on this environment. Any API, framework or property marked with NS_EXTENSION_UNAVAILABLE will not be available either.

 

Communication with main app

The widget is able to open the main app and simultaneously to pass parameter with the same method used for deep linking. This is useful if we wish to implement shortcuts or launch a specific action at any time from the widget. For example, if your app is a messaging one, the widget could have a “Compose” button, so you can open it and start writing a message right away:

Another way to communicate data between a widget and a container app is the use of NSUserDefaults. This can be use to keep the data between both parties synchronized. In order to use this feature, you’ll need to create and configure your development certificates and provisioning profiles.

Then, your main target must have “App Groups” enabled. When doing so, it will ask you for a unique name group (ex: group.yourcompany.TodayExtensionSharingDefaults).

wid4

After this, if the app is alive, the widget can detect changes in the NSUserDefaults thought this code:

This can be used to update information live on the Widget from changes made in the container app.

 

Tips and good practices

  • A widget should be focused on very specific tasks. It is meant to be a way for the user to get quick access to punctual information and/or to perform punctual actions.
  • Aesthetically, it should look like it belongs to the “Today Section”. It should blend in along the native Today Extensions.
  • Unlike the main app, it will be much more limited in memory usage. If the widget uses too much, it will be closed by the device.
  • Ideally, a widget should not have loading times. If you have to display information, make use of the NSUserDefaults to keep data cached and ready to be used. This is particularly important because of the fact that the widget will not be updated until the next time the user views it. Occasionally, the system will take snapshots of the widget. When the widget becomes visible again, the most recent snapshot is displayed until the system replaces it with a live version of the view.
  • Unlike other features of iOS, this one must be activated manually by the user. At some point, the container app must inform the user about the Widget and give him specific instruction on how to activate it.

We hope this article has been helpful to you all. Happy coding! 🙂

Ezequiel González

Ezequiel Gonzalez is IOS developer at intive since August 2011. Videogame developer graduated from Escuela de Arte Multimedial Da Vinci, he worked two years as a QA tester and one year as a prototype developer for Flash games. Ezequiel´s hobbies are drawing, reading and playing videogames. He also goes to yoga once a week and excercices at home.

Add comment