finish the first draft of UI chapter

7.md

@@ -966,42 +966,210 @@ Here is the screenshot:
 
 
 ### ListView
+A ListView is a widget which show items in horizontal or vertical. ListView is inherited from ScrollView, but it only supports horizontal and vertical scrolling.
+
 #### Architecture
+Here is the figure to show you the class hierarchy of ListView:
 
 ![ui-listview](7/ui-listview.png ) 
 
-
 #### Example
 
+Here is a code snippet to show you how to create a ListView with few buttons. In the following code, we also enable bouncing and touch along side with a background image.
+
+```cpp
+        // Create the list view ex
+        ListView* listView = ListView::create();
+        // set list view ex direction
+        listView->setDirection(ui::ScrollView::Direction::HORIZONTAL);
+        listView->setTouchEnabled(true);
+        listView->setBounceEnabled(true);
+        listView->setBackGroundImage("cocosui/green_edit.png");
+        listView->setBackGroundImageScale9Enabled(true);
+        listView->setContentSize(Size(240, 130));
+        listView->setPosition(Vec2(240,160));
+        listView->addEventListener((ui::ListView::ccListViewCallback)CC_CALLBACK_2(UIListViewTest_Horizontal::selectedItemEvent, this));
+        this->addChild(listView);
+        //add listview items into the ListView
+
+        // add custom item
+        for (int i = 0; i < count / 4; ++i)
+        {
+            Button* custom_button = Button::create("cocosui/button.png", "cocosui/buttonHighlighted.png");
+            custom_button->setName("Title Button");
+            custom_button->setScale9Enabled(true);
+            custom_button->setContentSize(default_button->getContentSize());
+
+            Layout* custom_item = Layout::create();
+            custom_item->setContentSize(custom_button->getContentSize());
+            custom_button->setPosition(Vec2(custom_item->getContentSize().width / 2.0f, custom_item->getContentSize().height / 2.0f));
+            custom_item->addChild(custom_button);
+
+            listView->pushBackCustomItem(custom_item);
+        }
+        // insert custom item
+
+```
+
 ### PageView
+A PageView is used as a container to display contents which we could view them as tuning book pages. 
 #### Architecture
+The PageView is inherited from Layout and it contains a vector of Layout as its pages.
 
 ![ui-pageview](7/ui-pageview.png ) 
 
 #### Example
+Here is the code to create a PageView with three pages:
+
+```cpp
+        // Create the page view
+        PageView* pageView = PageView::create();
+        pageView->setContentSize(Size(240.0f, 130.0f));
+        Size backgroundSize = background->getContentSize();
+        pageView->setPosition(Vec2(100,100));
+        
+        int pageCount = 3;
+        for (int i = 0; i < pageCount; ++i)
+        {
+            Layout* layout = Layout::create();
+            layout->setContentSize(Size(240.0f, 130.0f));
+            
+            ImageView* imageView = ImageView::create("cocosui/scrollviewbg.png");
+            imageView->setScale9Enabled(true);
+            imageView->setContentSize(Size(240, 130));
+            imageView->setPosition(Vec2(layout->getContentSize().width / 2.0f, layout->getContentSize().height / 2.0f));
+            layout->addChild(imageView);
+            
+            pageView->insertPage(layout,i);
+        }
+        
+        pageView->addEventListener(CC_CALLBACK_2(UIPageViewTest::pageViewEvent, this));
+        
+        _uiLayer->addChild(pageView);
+```
 
 ### Layout
+The Layout class exists mainly for three reasons: as a Layout container, as a clipping layer and as a focus helper class. In this section, we will mainly talk about the container and clipping part. The Focus functionality will be talked in a separated section.
+
+In order to understand the Layout feature of Layout class, we should first take a loot at the LayoutParameter and LayoutManager class.
+
 #### LayoutParameter
+Every Widget class could have a LayoutParameter property. There are two types of LayoutParameter:
+LinearLayoutParameter and RelativeLayoutParameter, they are used for horizontal/vertical layout and Relative layout.
+
 #### LayoutManger
-#### Example
+LayoutManager is the class which takes care of the actually layout operation. There are `LiearVerticalLayoutManager`, `LinearHorizontalLayoutManager` and `RelativeLayoutManger` which are used for vertical, horizontal and relative layout respectively.
+
+#### HBOX , VBox & RelativeBox
+The HBox is just a Layout with layout type equal `Layout::Type::HORIZONTAL`, the VBox is also a layout with layout type equals `Layout::Type::VERTICAL` and  the RelativeLayout is just a Layout with layout type equals `Layout::Type::Relative`.
+
+There are all handy class for layout elements.  And we also use HBox & VBox to manage the focus of our UI interface. 
 
-### HBOX & VBox
-#### Example
 
-### Relative Layout
 #### Example
+Here is a code snippet to create a linear vertical layout.
+
+```cpp
+        // Create the layout
+        Layout* layout = Layout::create();
+        layout->setLayoutType(LayoutType::VERTICAL);
+        layout->setContentSize(Size(280, 150));
+        Size backgroundSize = background->getContentSize();
+        layout->setPosition(Vec2(200,150));
+        _uiLayer->addChild(layout);
+
+
+        Button* button = Button::create("cocosui/animationbuttonnormal.png", "cocosui/animationbuttonpressed.png");
+        layout->addChild(button);
+
+        LinearLayoutParameter* lp1 = LinearLayoutParameter::create();
+        button->setLayoutParameter(lp1);
+        lp1->setGravity(LinearLayoutParameter::LinearGravity::CENTER_HORIZONTAL);
+        lp1->setMargin(Margin(0.0f, 5.0f, 0.0f, 10.0f));
+
+
+        Button* titleButton = Button::create("cocosui/backtotopnormal.png", "cocosui/backtotoppressed.png");
+        titleButton->setTitleText("Title Button");
+        layout->addChild(titleButton);
+
+        LinearLayoutParameter* lp2 = LinearLayoutParameter::create();
+        titleButton->setLayoutParameter(lp2);
+        lp2->setGravity(LinearLayoutParameter::LinearGravity::CENTER_HORIZONTAL);
+        lp2->setMargin(Margin(0.0f, 10.0f, 0.0f, 10.0f));
+
+
+        Button* button_scale9 = Button::create("cocosui/button.png", "cocosui/buttonHighlighted.png");
+        button_scale9->setScale9Enabled(true);
+        button_scale9->setContentSize(Size(100.0f, button_scale9->getVirtualRendererSize().height));
+        layout->addChild(button_scale9);
+
+        LinearLayoutParameter* lp3 = LinearLayoutParameter::create();
+        button_scale9->setLayoutParameter(lp3);
+        lp3->setGravity(LinearLayoutParameter::LinearGravity::CENTER_HORIZONTAL);
+        lp3->setMargin(Margin(0.0f, 10.0f, 0.0f, 10.0f));
+```
+
+For more usage of Layout class, please refer to [UILayoutTest](https://github.com/cocos2d/cocos2d-x/blob/v3/tests/cpp-tests/Classes/UITest/CocoStudioGUITest/UILayoutTest/UILayoutTest.cpp) for more information.
 
 ### EditBox
-#### Example
+EditBox is a widget for text input, the main difference between EditBox and TextField is EditBox calls system control to handle input task. We call the platform dependent API to rendering the DeitBox and do text input.
 
-### UIHelper
-#### Example
+Here is the sample usage:
+
+```cpp
+        _editName = ui::EditBox::create(editBoxSize, ui::Scale9Sprite::create(pNormalSprite));
+        _editName->setPosition(Vec2(visibleOrigin.x+visibleSize.width/2, visibleOrigin.y+visibleSize.height*3/4));
+        _editName->setFontName("Paint Boy");
+        _editName->setFontSize(25);
+        _editName->setFontColor(Color3B::RED);
+        _editName->setPlaceHolder("Name:");
+        _editName->setPlaceholderFontColor(Color3B::WHITE);
+        _editName->setMaxLength(8);
+        _editName->setReturnType(ui::EditBox::KeyboardReturnType::DONE);
+        _editName->setDelegate(this);
+        addChild(_editName);
+```
+
+For more usage of EditBox, please refer to [UIEditBoxTest](https://github.com/cocos2d/cocos2d-x/blob/v3/tests/cpp-tests/Classes/UITest/CocoStudioGUITest/UIEditBoxTest.cpp).
 
 ### VideoPlyaer
+ViedoPlayer is a widget to play videos inside your game.
+
+*Note*: Currently it only supports iOS and Android, so we put it under the ui::experimental namespace which is not mean the feature we provided is not mature but only due to the lack of full cross platform support.
+
+Here is the sample code to create a VideoPlayer control:
+
+```cpp
+    _videoPlayer = VideoPlayer::create();
+    _videoPlayer->setPosition(centerPos);
+    _videoPlayer->setAnchorPoint(Vec2::ANCHOR_MIDDLE);
+    _videoPlayer->setContentSize(Size(widgetSize.width * 0.4f,widgetSize.height * 0.4f));
+    _uiLayer->addChild(_videoPlayer);
+
+    _videoPlayer->addEventListener(CC_CALLBACK_2(VideoPlayerTest::videoEventCallback, this));
+```
+
+To play a local video file, you could call `setFileName`,. To play a video from a remote machine, you could call `setURL`. 
+
+For more usage of VideoPlayer, please refer to [ UIVideoPlayerTest ](https://github.com/cocos2d/cocos2d-x/blob/v3/tests/cpp-tests/Classes/UITest/CocoStudioGUITest/UIVideoPlayerTest/UIVideoPlayerTest.cpp).
 
 ### WebView
+WebView is a widget to display web pages inside your game.
+
+*Note*: Currently it only supports iOS and Android, so we put it under the ui::experimental namespace which is not mean the feature we provided is not mature but only due to the lack of full cross platform support.
+
+Here is the sample code to create a WebView control, it will visit google after scene enters.
+
+```cpp
+        _webView = cocos2d::experimental::ui::WebView::create();
+        _webView->setPosition(winSize/2);
+        _webView->setContentSize(winSize * 0.5);
+        _webView->loadUrl("http://www.google.com");
+        _webView->setScalesPageToFit(true);
+```
 
 
+For more usage of WebView, please refer to [UIWebViewTest](https://github.com/cocos2d/cocos2d-x/blob/v3/tests/cpp-tests/Classes/UITest/CocoStudioGUITest/UIWebViewTest/UIWebViewTest.cpp)
 
 
 ### Limitation