Merge pull request #1955 from facebook/websiteNodeSubclassing

update node containers and node subclasses pages

_docs/containers-overview.md

@@ -7,16 +7,35 @@ nextPage: node-overview.html
 ---
 
 ### Use Nodes in Node Containers
-It is highly recommended that you use AsyncDisplayKit's nodes within a node container. AsyncDisplayKit offers the following node containers
+It is highly recommended that you use AsyncDisplayKit's nodes within a node container. AsyncDisplayKit offers the following node containers.
 
-- `ASViewController` in place of UIKit's `UIViewController`
-- `ASCollectionNode` in place of UIKit's `UICollectionView`
-- `ASPagerNode` in place of UIKit's `UIPageViewController`
-- `ASTableNode` in place of UIKit's `UITableView`
- 
+<table style="width:100%" class = "paddingBetweenCols">
+  <tr>
+    <th>ASDK Node Container</th>
+    <th>UIKit Equivalent</th> 
+  </tr>
+  <tr>
+    <td><a href = "containers-asviewcontroller.html"><code>ASViewController</code></a></td>
+    <td>in place of UIKit's <code>UIViewController</code></td>
+  </tr>
+  <tr>
+    <td><a href = "containers-ascollectionnode.html"><code>ASCollectionNode</code></a></td>
+    <td>in place of UIKit's <code>UICollectionView</code></td>
+  </tr>
+  <tr>
+    <td><a href = "containers-aspagernode.html"><code>ASPagerNode</code></a></td>
+    <td>in place of UIKit's <code>UIPageViewController</code></td>
+  </tr>
+  <tr>
+    <td><a href = "containers-astablenode.html"><code>ASTableNode</code></a></td>
+    <td>in place of UIKit's <code>UITableView</code></td>
+  </tr>
+</table>
+
+<br>
 Example code and specific sample projects are highlighted in the documentation for each node container. 
 
-For a detailed description on porting an existing UIKit app to AsyncDisplayKit, read the <a href = "porting-guide.html">porting guide</a>.
+<!-- For a detailed description on porting an existing UIKit app to AsyncDisplayKit, read the <a href = "porting-guide.html">porting guide</a>. -->
 
 ### What do I Gain by Using a Node Container?
 

_docs/node-overview.md

@@ -6,36 +6,63 @@ prevPage: containers-overview.html
 nextPage: subclassing.html
 ---
 
-AsyncDisplayKit offers the following nodes.  A key advantage of using nodes over UIKit components is that **all nodes preform layout and display off of the main thread**, so that the main thread is available to immediately respond to user interaction events.  
+AsyncDisplayKit offers the following nodes.  
 
-The most common nodes include:
+A key advantage of using nodes over UIKit components is that **all nodes preform layout and display off of the main thread**, so that the main thread is available to immediately respond to user interaction events.  
 
-- <a href = "display-node.html">`ASDisplayNode`</a> in place of UIKit's `UIView`.  ASDisplayNode is the root AsyncDisplayKit node, from which all other nodes inherit.
-
-- <a href = "cell-node.html">`ASCellNode`</a> (and the lighter-weight <a href = "text-cell-node.html">`ASTextCellNode`</a>) in place of UIKit's `UITableViewCell` and `UICollectionViewCell`.  ASCellNodes are used in `ASTableNode`, `ASCollectionNode` and `ASPagerNode`.
-
-- <a href = "">`ASScrollNode`</a> in place of UIKit's `UIScrollView`.  This node is useful for creating a customized scrollable region that contains other nodes.
-
-- <a href = "editable-text-node.html">`ASEditableTextNode`</a> in place of UIKit's `UITextView`
-
-- <a href = "control-node.html">`ASControlNode`</a> in place of UIKit's `UIControl`
-
-- <a href = "text-node.html">`ASTextNode`</a> in place of UIKit's `UILabel`
-
-- <a href = "map-node.html">`ASMapNode`</a> in place of UIKit's `MKMapView`
-
-- <a href = "button-node.html">`ASButtonNode`</a> in place of UIKit's `UIButton`
-
-- <a href = "image-node.html">`ASImageNode`</a> in place of UIKit's `UIImageView`
-
-- <a href = "video-node.html">`ASVideoNode`</a> in place of UIKit's `AVPlayerLayer`
-
-- <a href = "">`ASVideoNodePlayer`</a> in place of UIKit's `UIMoviePlayer`
-
-- <a href = "network-image-node.html">`ASNetworkImageNode`</a> 
-
-- <a href = "multiplex-image-node.html">`ASMultiplexImageNode`</a> 
+<table style="width:100%" class = "paddingBetweenCols">
+  <tr>
+    <th>ASDK Node</th>
+    <th>UIKit Equivalent</th> 
+  </tr>
+  <tr>
+    <td><a href = "display-node.html"><code>ASDisplayNode</code></a></td>
+    <td>in place of UIKit's <code>UIView</code><br> 
+        <i>The root AsyncDisplayKit node, from which all other nodes inherit.</i></td> 
+  </tr>
+  <tr>
+    <td><a href = "cell-node.html"><code>ASCellNode</code></a></td>
+    <td>in place of UIKit's <code>UITableViewCell</code> & <code>UICollectionViewCell</code><br>
+        <i><code>ASCellNode</code>s are used in <code>ASTableNode</code>, <code>ASCollectionNode</code> and <code>ASPagerNode</code>.</i></td> 
+  </tr>
+  <tr>
+    <td><a href = "scroll-node.html"><code>ASScrollNode</code></a></td>
+    <td>in place of UIKit's <code>UIScrollView</code>
+        <p><i>This node is useful for creating a customized scrollable region that contains other nodes.</i></p></td> 
+  </tr>
+  <tr>
+    <td><a href = "editable-text-node.html"><code>ASEditableTextNode</code></a><br>
+        <a href = "text-node.html"><code>ASTextNode</code></a></td>
+    <td>in place of UIKit's <code>UITextView</code><br>
+        in place of UIKit's <code>UILabel</code></td> 
+  </tr>
+  <tr>
+    <td><a href = "image-node.html"><code>ASImageNode</code></a><br>
+        <a href = "network-image-node.html"><code>ASNetworkImageNode</code></a><br>
+        <a href = "multiplex-image-node.html"><code>ASMultiplexImageNode</code></a></td>
+    <td>in place of UIKit's <code>UIImage</code></td> 
+  </tr>
+  <tr>
+    <td><a href = "video-node.html"><code>ASVideoNode</code></a><br>
+        <code>ASVideoPlayerNode</code></a></td>
+    <td>in place of UIKit's <code>AVPlayerLayer</code><br>
+        in place of UIKit's <code>UIMoviePlayer</code></td> 
+  </tr>
+  <tr>
+    <td><a href = "control-node.html"><code>ASControlNode</code></a></td>
+    <td>in place of UIKit's <code>UIControl</code></td>
+  </tr>
+  <tr>
+    <td><a href = "button-node.html"><code>ASButtonNode</code></a></td>
+    <td>in place of UIKit's <code>UIButton</code></td>
+  </tr>
+  <tr>
+    <td><a href = "map-node.html"><code>ASMapNode</code></a></td>
+    <td>in place of UIKit's <code>MKMapView</code></td>
+  </tr>
+</table>
 
+<br>
 Despite having rough equivalencies to UIKit components, in general, AsyncDisplayKit nodes offer more advanced features and conveniences. For example, an ASNetworkImageNode does automatic loading and cache management, and even supports progressive jpeg and animated gifs. 
 
 The <a href = "https://github.com/facebook/AsyncDisplayKit/tree/master/examples/AsyncDisplayKitOverview">`AsyncDisplayKitOverview`</a> example app gives basic implementations of each of the nodes listed above. 
@@ -43,17 +70,11 @@ The <a href = "https://github.com/facebook/AsyncDisplayKit/tree/master/examples/
 
 # Node Inheritance Hierarchy 
 
-All AsyncDisplayKit nodes inherit from `ASDisplayNode`.
+All AsyncDisplayKit nodes inherit from `ASDisplayNode`. 
 
-Updates to the framework (not reflected in the chart below): 
-<ul>
-  <li>`ASVideoNode` now inherits from `ASNetworkImageNode`.</li>
-  <li>`ASScrollNode` is now available. It inherits from `ASDisplayNode`.</li>
-  <li>`ASCellNode` used by `ASTableNode`, `ASCollectionNode` and `ASPagerNode` inherits from `ASDisplayNode`.
-</ul>
 <img src="/static/images/node-hierarchy.png" alt="node inheritance flowchart">
 
-The blue and green colored nodes are synchronous wrappers of UIKit elements.  For example, ASScrollNode wraps a UIScrollView and ASCollectionNode wraps a UICollectionView.  An ASMapNode in liveMapMode is a synchronous wrapper of UIMapView.
+The nodes highlighted in blue are synchronous wrappers of UIKit elements.  For example, ASScrollNode wraps a UIScrollView, and ASCollectionNode wraps a UICollectionView.  An ASMapNode in liveMapMode is a synchronous wrapper of UIMapView.