Tutorial 2 - Widgets

Scroll down for detailed text description.
Back to Overview
Download video file for offline viewing

00:00Welcome to Antetype Tutorial 2. In this tutorial we will create a widget and reuse the widget within the design created in Tutorial 1.

00:10You can begin this tutorial either from the Start of Tutorial 2 screen in the Tutorial 2 template or continue using the screen you have already created in Tutorial 1.

00:28If you want to start from the tutorial file - please open the template “Tutorial 2 - Widgets” from the Getting Started section of the Template Chooser. Then Select the screen Start of Tutorial 2.

00:36We are going to update our design by adding 3 content items to the content area of the screen we have created in Tutorial 1. This is what the finished screen will look like. Each of these content items will be an instance of a content item widget that we will create in the process of modifying our screen.

00:56To start creating our content we first need to select the “Content” element.

01:04This time instead of using alt to nest the new rectangle within the content element just click on the Rectangle button on the toolbar. This will create a rectangle below the content area and then we can manually nest the new rectangle into the content area by dragging it. When nesting with the mouse you need to wait until the target container has flashed blue so that you know that the dragged element will be nested within the correct container.

01:35In Tutorial 1 we have done most of the editing of properties by clicking on the Style Bar. In this tutorial we will mostly be using keyboard shortcuts to open the various property editors. We highlight on screen exactly which shortcut was used at each point, but if you want to discover the shortcuts you can find them by right-clicking on any element.

02:00Let’s start by pressing S to open the Size Editor and change the width of the new Rectangle to Stretch mode and the height to 90px. Our Rectangle would look better with a small margin so press M to open the Margin Editor and add margins of 10px to the left and right and 5px to the top and bottom of the element.

02:25Now we will add a border - press B and set all border widths to 5px and the color of all the borders to white.

02:37Finally lets set the background as a gradient to do this press F to get the Fill Editor and change to a Gradient background. We can use the default settings for the gradient.

02:50This rectangle is now the basis of our content items so let’s replicate it as a widget. To create a widget press Create Widget on the Toolbar, this will reveal an action sheet to set the name of the widget and any tags. Set the name of the widget to “Content Item” and for now we won’t worry about applying tags to the widget and press “Create”.

03:17If you look in the screen inspector you will now notice that the Rectangle has also been renamed to Content Item and it no longer has a blue icon but a the icon is that of a widget.

03:28Let’s have a look in the Widget Inspector and see if we can find our new widget there. The widget inspector shows two types of widgets project widgets and those in the widget library that can be used across different antetype files. Our new widget will be in the list of project widgets so make sure this list is shown and then try to find our new widget.

03:52Once you have found our Content Item widget drag it from the widget inspector into the content area of our design (remember to wait for the blue flash) repeat this so that we have 3 instances of the widget.

04:06The layout of the 3 widgets looks a little strange now as they have organised themselves in a horizontal row and we would prefer them in a vertical column.

04:16The way Antetype elements are automatically laid out is controlled by the container element and in this case we need to select the “Content” area and change the layout mode from Horizontal to Vertical.

04:32Let’s enhance our content items now by adding some more details. First we need to select our first content item and nest a new rectangle inside by alt clicking on the toolbar.

04:48Set the width and height of this new Rectangle to 60px and rename the Rectangle to “Thumbnail”.

05:09The Thumbnail is not laid out as we would like so we need to select the container element in this case the Content Item.

05:15We can add some padding to the Content Item to push the Thumbnail away from the border by pressing G (yes G for Padding - don’t ask please!). We can use the Padding Editor to add a padding of 10px to all sides.

05:31Let’s add some text to our content item, with a headline and description. To do this select the Thumbnail and then click text on the toolbar, this will create a text element next to the thumbnail.

  • Type “Widget 1” and press CMD+ENTER to finish editing the text.
  • Set the font size to 18 and the color to white.
  • Rename the new Rectangle element to “Headline”.

06:03Repeat this process to add another text element

  • this time with the text “This is a description”
  • with a font size of 14
  • and rename the element to “description”.

06:33Our two pieces of text are laid out horizontally because the Content Item uses a horizontal layout, but we want them to be vertically aligned on top of each other.

06:43To do this we need to introduce a new container element that uses vertical layout and place both pieces of text inside the new container. This process can be done quickly by using the group button on the toolbar.

06:57First we select both text elements and then press the group menu on the toolbar and then choose a Vertical Flow Layout. This automatically creates a new container called “Vertical Flow Group” that is set to vertical layout mode and places our selected elements into this container.

07:19Let’s rename the group to “Content Text” and set a left margin of 15px.

07:35The ordering of items in the group is based on the order that they are selected before grouping, if you select the items in the wrong order and need to re-order them you can do this easily using drag and drop.

07:50Let’s just adjust our layout a bit more by selecting the Headline and adding a bottom margin of 5px.

07:57Our widget layout looks good but we need our other widget instances to match the first widget.

08:04When you have the modified Content Item selected you should notice on the right side of the style bar there are two new circular buttons, One Green and one Grey.

08:14These buttons appear on the style bar to indicate that the selected widget instance is different to the master widget definition. In this case the master definition of our Content Item widget has the values from when we originally pressed the Create Widget button and as we have modified this instance the two buttons have appeared.

08:34In addition to being change indicators each button offers a quick way to resolve the differences.

08:41The green button if pressed sends all the changes from the current widget instance to the widget master and then subsequently on to all the other instances of the widget.

08:52They grey button resets the selected widget instance back to same values as master widget definition.

09:06In this case we want to send our changes to the master so let’s press the green button and BANG! now our two other instances match the content of the first widget.

09:18The green and grey buttons only track differences of certain style properties. By default differences in the text inside a widget are not tracked so we can change the text labels of our Content Item without causing the green and grey buttons to appear.

09:36Configuring which properties are tracked is beyond the scope of this tutorial but you can find out more in the help pages for Antetype - just search for shared and individual properties.

09:50Let’s change the text of the other Content Items to make them Widget 2 and Widget 3 respectively and set some alternate descriptions.

10:15That’s it - we have now created a custom widget and reused that widget within our design. It should hopefully be clear that use of widgets in an Antetype document can significantly speed up the time needed to apply changes to a document, but widgets have other benefits too.

In the next tutorial you will find out more about adding interactions to antetype documents.

We hope you have enjoyed this tutorial, please visit antetype.com/learn for more tutorials.