Dynamic HTML content in iTunes LP / iTunes Extras

August 17, 2010 No Comments by Ben

Recently, I have been doing some iTunes LP projects for one of my clients. One of the things that immediately struck me as a huge potential time saver was automating the creation of HTML elements for lists of items, ie lists of song and video tracks. Often I can splice images such that their position can be controlled with a single CSS rule, and explicitly creating all the image-fader DIVs for the individual songs or videos in the HTML views is terribly redundant.

The Goal

Create HTML elements dynamically which transition appropriately when the view controller appears.

The Problem

The shipping version of TuneKit.js doesn’t give you a chance to append elements to the DOM before viewDidAppear is invoked (which is after transitionToController).

Initial Attempts

I first tried appending the child elements (using TKUtils.buildElement in a loop over appData.songs) inside the viewDidAppear callback. Obviously, the problem here is that the elements don’t exist the first time the view controller appears, so can’t nicely fade in via your defined CSS animations.

Next, I tried moving the logic that create the HTML elements into viewWillAppear. The problem here was that this method was called before the desired view controller is added to the DOM — so the element I need to append the children to doesn’t exist.

The Solution

The solution was actually pretty simple, and works like a charm; you just need to be willing to edit TuneKit.js.

Before:

// pre-transition methods
controller._viewWillAppear();
controller.viewWillAppear();

// add it to the tree
this.view.appendChild(controller.view);

// transition
if (previous_controller !== null) {
  this.transitionToController(previous_controller, controller);
}

After:

// add it to the tree
this.view.appendChild(controller.view);

// pre-transition methods
controller._viewWillAppear();
controller.viewWillAppear();

// transition
if (previous_controller !== null) {
  this.transitionToController(previous_controller, controller);
}

Conclusion

Now that TuneKit appends the view controller to the DOM before calling the viewWillAppear callback, your dynamic elements can be created before the view appears and transitionToController is invoked.

Done.

Post a Comment

Your email is never published or shared. Required fields are marked *