Preorder Estimated Availability Date. Your credit card will not be charged until the product is shipped. Estimated availability date is subject to change.Preorder Estimated Availability Date. Your credit card will not be charged until the product is ready to download. Estimated availability date is subject to change.

One advantage of the Adobe Digital Publishing Suite Enterprise license is the ability to add up to six custom navigation toolbar items (the Library and Viewer icons take up the remaining two slots). Many publishers use the custom navigation slots to bring readers to custom HTML storefronts, account settings pages, and FAQ content.

What is interesting is that other publishers have started to take advantage of the navigation toolbar as a means to engage with their readers beyond DPS publications. A great example of this is Source Interlink's Motor Trend. Motor Trend has a very active community of driving enthusiasts that love to discuss and comment on the latest car news. Motor Trend also produces a large quantity of high-quality YouTube episodes. Rather than have readers jumping in and out of different apps to view their content, Motor Trend recognized that they could use custom navigation slots in their DPS app to give their users a centralized experience that promotes further exploration and participation (see Figure 1).

Figure 1. The navigation toolbar for Motor Trend's DPS app

Creating a navigation toolbar icon

Start out by creating a high-resolution icon, which can then be saved down to the standard definition size. The HD retina icon size is 60x60 pixels. The standard definition icon is 30x30 pixels. Create images with a transparent background, and use any color for the foreground. iOS applies a system color (usually light blue) to to any non-transparent pixel and changes the appearance of the icon to indicate whether it's selected.

Creating a simple HTML redirect

If you would like to bring readers to an online website using the custom toolbar, the easiest way to achieve this would be to create a HTML page that contains a re-direct action. In the script tag you will see a URL listed. (Paste the text below into a document named index.html.)

Adding the navigation toolbar icon to App Builder

Add the UP, DOWN, and DISABLED icons for both SD and HD versions of the app. (Note: disabled icons can be the same as the UP icon, as WebViews will always load.)

In the "Type" pop-up menu, select "WebView." (Note: "Navigation" is the other option and can only be used by WoodWing customers.)

Name the slot in the Label field.

Browse to the ZIP file that contains your HTML file with the redirect defined. (Note: Do not Zip the folder that contains the HTML files; instead, select the content in the folder and then compress. See Figure 2.)

Figure 2. Compressing the HTML file

Lock orientation: Select this option if the content that is to be loaded will only look right in Portrait or Landscape modes; otherwise, keep orientation lock set to NONE.

Hide title bar: This option allows the web content to fully bleed at the top edge of the app.

Show navigation controls: This option is helpful if you are navigating a site that has multiple links and pages.

Auto-launch: This option will make sure that the toolbar item is selected and opened immediately when a user launches the app.

These options are shown in Figure 3.

Figure 3. Selecting navigation options for your DPS app

Creative uses of the navigation toolbar

Twitter feed

To add a Twitter feed button to my app, I downloaded some sample code from TutorialZine, jQuery Twitter Ticker.

To get started, download the sample code attached to this article. Open the Script.js file in a text or code editor, and on the first line, enter the username for the Twitter user from which you want to pull tweets (see Figure 4).

Figure 4. Inserting the Twitter account for the Twitter feed in your app

In my example, I removed the Twitter bird graphic and the jScrollPane, as I felt the tablet's native scroll bar would function better (see Figure 5). Changing the look of the Twitter feed requires editing the demo.css file.

You can find additional tips on working with the Twitter Ticker on the TutorialZine site.

Figure 5. The Twitter feed, custom-styled

Instagram photo feed

I took the RAW code copied from the top of the post and pasted it into an HTML template. To grab your own Instagram feed, you need to make sure that you have your user ID and access token defined. The post on Forrst walks you through the process of obtaining your user ID and access token by working with the Instagram Developer page.

To work with the example file, open up the instagramfeed.html file in a text- or code-editing application (see Figure 6). On line 62, change the eight-digit user ID to match your own, and change the access token below that to match your account.

Figure 6. Inserting your ID and access token in the HTML file

Figure 7 shows the results. The stylesheet for this content is very simple, with only five styles defined.

Figure 7. The Instagram feed in the DPS app

Tapping on any image will window-shade up the individual image page from Instagram (see Figure 8).

Figure 8. Viewing an individual photo from the Instagram feed

RSS feed

To create an RSS Feed button in my app, I took the easy way out and used a free RSS2HTML service. The RSS2HTML site lets you paste in a link to a particular RSS feed and then configure how many items you want to display, offering you the ability to truncate a portion of the RSS title or link. Before submitting the form, make sure to select "more options" and check the JavaScript option, as this output will work best with the example files (see Figure 9).

Figure 9. Inserting the JavaScript for the RSS feed into the HTML file

In my HTML template, I simply pasted the code that was generated by the RSS2HTML site. Although no stylesheets are explicitly called out in the HTML file, I was able to determine a few styles used by the code generator; Figure 10 shows the results. Feel free to modify the styles.css file included with the sample to suit your own needs.

Figure 10. The RSS feed shown in the DPS app

YouTube video channel

Adding a YouTube video channel is incredibly easy. If you have created your own YouTube page, copy the URL and use the same method as the redirect example from the beginning of this article. In the example below, I have the YouTube Keyboard Cat channel loaded in the viewer.

R25 bonus

With the release of R25, it is now possible to link to navigation toolbar items from within a folio. Create a button or a hyperlink in InDesign with a URL defined as: "goto://ApplicationViewState/[Label]" where the label is equal to the name of the toolbar button specified in DPS App Builder (see Figure 12).

Figure 12. Setting up a link to a navigation toolbar item from within the folio.