Errata

I believe the sentence

"There?s one other place where a new feed list entry is created; in the checkOk method of addDialog-assistant.js:"

should read like this:

"There?s one other place where a new feed list entry is created; in the checkSuccess method of AddDialogAssistant object in the feedList-assistant.js:"

Note from the Author or Editor:
On page 133, the 3rd paragraph reads:
There?s one other place where a new feed list entry is created; in the checkOk method of addDialog-assistant.js:

It should read:
There?s one other place where a new feed list entry is created; in the checkSuccess method of addDialog-assistant.js:

I believe the correct filename is feeds.js not stage-assistant.js

"The feedList default data is defined at the beginning of the stage-assistant.js." should say "The feedList default data is defined in the feeds.js"

Note from the Author or Editor:
On page 133, the second paragraph begins:
The feedList default data is defined at the beginning of the stage-assistant.js.

It should read:
The feedList default data is defined at the beginning of the feeds.js.

"Add the Text Field declarations within a styled palm-group into the
feedList-scene.html file."

Perhaps the class was supposed to be palm-list instead of palm-group.
The palm-group doesn't appear in the feedList-scene.html file.

Note from the Author or Editor:
On page 88, the fourth paragraph begins:
Add the Text Field declarations within a styled palm-group into the feedList-scene.html file.

it should read:
Add the Text Field declarations within a styled palm-list class in the feedList-scene.html file.

In order to see the unread count (shown in the white badge on
each feed) change to reflect the number of stories read in each feed,
open the feeds.js , find all unreadStyle and replace with unReadStyle string, especially inside the processFeed() method.

Note from the Author or Editor:
On page 45, replace four lines that read:
unReadStyle: "unReadStyle",

with:
unreadStyle: "unReadStyle"

You should advise a user to update the news.css file and include the following:

.palm-row-wrapper > .unReadStyle {
font-weight: bold;
}

Note from the Author or Editor:
On page 69, add this code snippet to the end of the last code snippet:

.palm-row-wrapper > .unReadStyle {
font-weight: bold;
}

I believe the function name in the 2nd paragraph in the text should read getElementById() instead of getElement()

Note from the Author or Editor:
On PDF and Book, page 38, 2nd paragraph:

Replace:
getElement()

With:
getElementById()

The "multiline" attribute is omitted from the list of available attributes. (From the official SDK, the Type is Boolean and the Description is "Auto line wrapping to field width".)

Note from the Author or Editor:
Appendix B, page 294 (PDF/Book):

Insert new row between inputName and charsAllow row for the multiLine property:

inputName String If supplied, the textarea will have this DOM name, so that when it is serialized, the property can be easily pulled out
multiline Boolean Auto line wrapping to field width
charsAllow Function Function must return 'true' to allow input character, or 'false' if not allowed;

It is important for users to be able to make the changes as suggested in the book & see them run before tackling the next addition.

With that in mind, while the author mentions that "The
storeCookie() method is called anytime the preferences change." and proceeds to give one example, it would be nice to just list all the places the changes are required.

In this case it is only 1 additional location so it should be acceptable to do so.

What should happen:

Also add the following right below the code sample for PreferencesAssistant.prototype.deactivate:

feed-list-assistant.js: add News.Cookie.storeCookie(); to the last line of the toggleFeatureDrawer method

Note from the Author or Editor:
Chapter 6, Section: 'Back to the News: Adding a Cookie', page 166 (book).

Amend the copy shown as:
The storeCookie() method is called anytime the preferences change. For example, the deactivate() method in preferences-assistant.js will update the cookie when the Preferences scene is popped:
// Deactivate - save News preferences and globals
PreferencesAssistant.prototype.deactivate = function() {
News.Cookie.storeCookie();
};

The only other time you will need to update the cookie is in feedList-assistant.js at the end of the toggleFeatureDrawer() method, following the call to modeChanged():
this.controller.modelChanged(this.featureFeedDrawer);
News.Cookie.storeCookie(); // Save featureFeedEnable state

The author is talking about the use of WebView widget.
He then instructs the users to create a new scene called webView as such:

Create a new scene, called webView, using
palm-generate, then declare the widget in
your scene view and configure it in your scene assistant before calling
setupWidget().
The storyWeb-scene.html is just one line:
<div id="storyWeb" x-mojo-element="WebView"></div>

However, all the following references are for 'storyWeb'.

What should happen:

Change the text in the paragraph to say "Create a new scene called storyWeb, using palm-generate ....

Note from the Author or Editor:
Chapter 5, section 'WebView', page 156 (book), replace:
Create a new scene, called webView, using palm-generate, ...

With
Create a new scene, called storyWeb, using palm-generate, ...

The following block of code gets a handle to featureStoryTitleElement but in the next line the innerHTML is attempted to be set on featureStoryElement. This hasn't been created until the line after that.

var featureStoryTitleElement = this.controller.get("featureStoryTitle");
// ** These next two lines are wrapped for book formatting only **
featureStoryElement.innerHTML =
unescape(this.feeds.list[this.featureIndexFeed].stories[
this.featureIndexStory].title);
var featureStoryElement = this.controller.get("featureStory");
featureStoryElement.innerHTML = summary;


What should happen:

change the first reference of featureStoryElement.innerHTML from featureStoryElement to featureStoryTitleElement

var featureStoryTitleElement = this.controller.get("featureStoryTitle");
// ** These next two lines are wrapped for book formatting only **
featureStoryTitleElement.innerHTML =
unescape(this.feeds.list[this.featureIndexFeed].stories[
this.featureIndexStory].title);
var featureStoryElement = this.controller.get("featureStory");
featureStoryElement.innerHTML = summary;

Note from the Author or Editor:
Chapter 5, Back to the News: Adding a featured feed Scroller, page 143 (pdf):

Replace:
// ** These next two lines are wrapped for book formatting only **
featureStoryElement.innerHTML =
unescape(this.feeds.list[this.featureIndexFeed].stories[
this.featureIndexStory].title);

With:
// ** These next two lines are wrapped for book formatting only **
featureStoryTitleElement.innerHTML =
unescape(this.feeds.list[this.featureIndexFeed].stories[
this.featureIndexStory].title);

FeedListAssistant.prototype.showFeatureStory has references to News.featureStoryTime such as:

if (News.featureStoryTimer === null)

The user was never instructed to add that to the stage-assistant.
As a result, the above code is actually checking News.featureStoryTimer for null when its currently 'undefined'.

What should happen:

User should be instructed to add

News.featureStoryTimer = null;

to the stage-assistant globals.

Note from the Author or Editor:
Chapter 5, Section "Back to the News: adding a featured feed Scroller", page 142 (book). Replace:
We set the timer default to 5 seconds (5000 milliseconds) in News.featureStoryInterval, another new global variable, added to stage-assistant.js.

With:
We set the timer default to 5 seconds (5000 milliseconds) in
News.featureStoryInterval, another new global variable, added to stage-assistant.js along with News.featureStoryTimer, which should be initialized to null.

The first line of the paragraph states:

Create the
showFeed() method to present the feature story and set up the timer for the
next story.


What I should see:

Create the
showFeatureStory() method to present the feature story and set up the timer for the
next story.

Note from the Author or Editor:
Chapter 5, section "Back to the News: Adding a feature feed Scroller", page 142 (book). Replace the sentence:
Create the showFeed() method to present the feature story and set up the timer for the next story.

With:
Create the showFeatureStory() method to present the feature story and set up the timer for the next story.

The toggleFeatureDrawer, showFeatureStory and readFeatureStory all refer to this.featureIndexFeed and featureIndexStory.

The user is never instructed to create them.



What should happen:

User should be instructed to add the following code to the bottom of the FeedListAssistant.prototype.setup.


this.featureIndexFeed = 0;
this.featureIndexStory = 0;

Note from the Author or Editor:
Chapter 5, Section "Back to the News: Adding a featured feed Scroller", page 140 (book). Replace:

Set up the Drawer and the Scroller in the feedList-assistant.js. Set up a listener for taps
to the new tap target in the header and then the Drawer widget with the state defined
by a new global, News.featureFeedEnable. In Chapter 6, we?ll add saved preferences
and we will retain the drawer?s state at that time.

With:

Set up the Drawer and the Scroller in the feedList-assistant.js. Set up a listener for taps
to the new tap target in the header and then the Drawer widget with the state defined
by a new global, News.featureFeedEnable. Initialize this.featureIndexFeed and featureIndexStory to zero in the setup method. These are used by the feature feed methods to reference the currently displayed story:

// Setup up feature story index to first story
this.featureIndexFeed = 0;
this.featureIndexStory = 0;

In Chapter 6, we?ll add saved preferences and we will retain the drawer?s state at that time.

What I see:

The user is instructed to add a viewMenu, which in itself has the title of the feed.

When it is run, both the view menu and the feedTitle divs are shown, overlayed.


What should happen:
The user should be instructed to remove the existing Feed Title from the story list scene.

<div id="feedTitle" class="palm-header center">
Feed Title
</div>

Note from the Author or Editor:
Chapter 4, Section 'View menu', page 119 (book), add the following comment at the very end of the section, just before the sentence containing "Figure 4-8 shows the News application's storyList..." :

You'll need to remove the div with the id feedTitle from storyList-scene.html to avoid having the old HTML title collide with our new view menu title.

What I see:

On page 87 of the v1final PDF the code shows an index being passed in.

updateFeedList: function(index) {

That index is never used.


What should happen:

The function should be updated to remove the index argument.

updateFeedList: function() {

Note from the Author or Editor:
Chapter 3, section "Back to the News: Adding a feed list', page 75 (book), and Appendix D, News/app/models/feeds.js, page 401. Remove unused argument in updateFeedList function definition.

Replace:
// updateFeedList(index) - called to cycle through feeds. This is called
// once per update cycle.
updateFeedList: function(index) {
News.feedListUpdateInProgress = true;

// request fresh copies of all stories
this.currentFeed = this.list[this.feedIndex];
this.updateFeedRequest(this.currentFeed);
},

With:
// updateFeedList() - called to cycle through feeds. This is called
// once per update cycle.
updateFeedList: function() {
News.feedListUpdateInProgress = true;

// request fresh copies of all stories
this.currentFeed = this.list[this.feedIndex];
this.updateFeedRequest(this.currentFeed);
},

There is no mention of simpleGet() as a function of the Depot, only get(). Which one is correct?

Note from the Author or Editor:
The simpleGet() and simpleAdd() are deprecated Depot methods, which appear in the sample code on pages 168, 397 and 401, and should be replaced with the get() and add() methods.

Specific changes are:

On pages 168 & 397, replace:
this.db.simpleGet("feedList", this.loadFeedDbGetSuccess.bind(this),
this.loadFeedDbUseDefault.bind(this));

with:
this.db.get("feedList", this.loadFeedDbGetSuccess.bind(this),
this.loadFeedDbUseDefault.bind(this));

On page 401, replace:
this.db.simpleAdd("feedList", this.list,
function() {Mojo.Log.info("FeedList saved OK");},
this.storeFeedDBFailure);

with:
this.db.add("feedList", this.list,
function() {Mojo.Log.info("FeedList saved OK");},
this.storeFeedDBFailure);

In the chapter prior to this Figure you never tell us to put the CSS in place for the storyRowTemplate. You are calling the class news-subtitle on the last line of page 75. Without the style in place the outcome does not look like your image in Figure 3-7.

Note from the Author or Editor:
On page 69, at the end of the 'Back to the News: Adding a Story List' section, just before the next section, add the following:

To get the proper styling for the list entry, you'll need to add some styling to your CSS for the news-subtitle selector:

.news-subtitle {
padding: 0px 14px 10px 14px;
font-size: 14px;
margin-top: -12px;
line-height: 16px;
}