Prerequisite knowledge
To follow along with this tutorial you will need:
 
  • Knowledge of the Adobe Digital Publishing Suite
  • Basic HTML/CSS Knowledge
User level: Intermediate, Advanced
 
Required products Sample files
 
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
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.
 
You can use the DPS Asset Generator to create custom slots. See Working with the DPS Asset Generator.
 

 
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.)
 
<!DOCTYPE html> <html laneg="en"> <head> <title></title> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, target-densitydpi=device-dpi"/> <meta http-equiv="refresh" content="0;URL='http:// http://www.adobe.com/devnet/digitalpublishingsuite.html'" /> <meta http-equiv="Cache-control" content="no-cache"> </head> <body> </body> </html>

 
Adding the navigation toolbar icon to App Builder

To add a custom icon to the navigation toolbar:
 
  1. Click the "+" icon.
  2. 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.)
  3. In the "Type" pop-up menu, select "WebView." (Note: "Navigation" is the other option and can only be used by WoodWing customers.)
  4. Name the slot in the Label field.
  5. 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
Figure 2. Compressing the HTML file
  1. 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.
  2. Hide title bar: This option allows the web content to fully bleed at the top edge of the app.
  3. Show navigation controls: This option is helpful if you are navigating a site that has multiple links and pages.
  4. 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
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
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
Figure 5. The Twitter feed, custom-styled
 
Instagram photo feed
To load up an Instagram feed inside of my app, I repurposed the code outlined in Dan Pavitt's post on forrst.com.
 
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 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
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
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
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
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.
 
<!DOCTYPE html> <html laneg="en"> <head> <title></title> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, target-densitydpi=device-dpi"/> <meta http-equiv="refresh" content="0;URL='http://www.youtube.com/channel/HCIaoXdyy-nYg/videos' " /> <meta http-equiv="Cache-control" content="no-cache"> </head> <body> </body> </html>
Figure 11 shows the results in the app.
 
Figure 11. The Keyboard Cat Youtube channel incorporated in the app.
Figure 11. The Keyboard Cat Youtube channel incorporated in the app.
 
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.
Figure 12. Setting up a link to a navigation toolbar item from within the folio.

 
Where to go from here

For more ideas and resources, visit the Digital Publishing Suite Developer Center.
 
 
This work is licensed under a Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License. Permissions beyond the scope of this license, pertaining to the examples of code included within this work are available at Adobe.