add more documents

7.md

@@ -812,23 +812,172 @@ Here is a code snippet to create a TextAtlas from a atlas font file:
 ```
 
 ### RichText
+A RichText widget is used for displaying text, image and custom node.  It is inherited from Widget class, so it supports touch event, focus, percent positioning and percent content size. Note: the touch event is received by the whole RichText not the individual RichElement. The clickable RichElement will be supported in the future.
+
 #### Architecture
+RichText holds a vector of RichElement as its inner rendering components:
+
+![ui-richtext](7/ui-richtext.png ) 
+
+
 #### Example
+Here is a quick sample code to create the RichText:
+
+```cpp
+        _richText = RichText::create();
+        _richText->ignoreContentAdaptWithSize(false);
+        _richText->setContentSize(Size(100, 100));
+        
+        RichElementText* re1 = RichElementText::create(1, Color3B::WHITE, 255, str1, "Marker Felt", 10);
+        RichElementText* re2 = RichElementText::create(2, Color3B::YELLOW, 255, "And this is yellow. ", "Helvetica", 10);
+        RichElementText* re3 = RichElementText::create(3, Color3B::GRAY, 255, str2, "Helvetica", 10);
+        RichElementText* re4 = RichElementText::create(4, Color3B::GREEN, 255, "And green with TTF support. ", "fonts/Marker Felt.ttf", 10);
+        RichElementText* re5 = RichElementText::create(5, Color3B::RED, 255, "Last one is red ", "Helvetica", 10);
+        
+        RichElementImage* reimg = RichElementImage::create(6, Color3B::WHITE, 255, "cocosui/sliderballnormal.png");
+        
+        cocostudio::ArmatureDataManager::getInstance()->addArmatureFileInfo("cocosui/100/100.ExportJson");
+        cocostudio::Armature *pAr = cocostudio::Armature::create("100");
+        pAr->getAnimation()->play("Animation1");
+        
+        RichElementCustomNode* recustom = RichElementCustomNode::create(1, Color3B::WHITE, 255, pAr);
+        RichElementText* re6 = RichElementText::create(7, Color3B::ORANGE, 255, "Have fun!! ", "Helvetica", 10);
+        _richText->pushBackElement(re1);
+        _richText->insertElement(re2, 1);
+        _richText->pushBackElement(re3);
+        _richText->pushBackElement(re4);
+        _richText->pushBackElement(re5);
+        _richText->insertElement(reimg, 2);
+        _richText->pushBackElement(recustom);
+        _richText->pushBackElement(re6);
+        
+        _richText->setPosition(Vec2(widgetSize.width / 2, widgetSize.height / 2));
+        _richText->setLocalZOrder(10);
+        
+        _widget->addChild(_richText);
+```
+
+Here is the screenshot:
+
+![sample](7/ui-richtext-sample.png ) 
+
+
+#### Limitations
+- It only supports manually RichElement arrangement now, the HTML tag based creation will be added in the future.
+- Various text effects are also not supported.
+- The clickable RichElement is also absent at the moment.
 
 ### TextField
+A TextField Widget is used for inputting text. It is inherited from Widget class, so it supports touch event, focus, percent positioning and percent content size.
+
 #### Architecture
+The TextField class contains a UICCTextFieldTTF as its inner rendering component, the UICCTextFieldTTF is inherited from TextFieldTTF and implements the `TextFieldDelegate`.
+
+
+![ui-textfiled](7/ui-textfield.png ) 
+
+
 #### Example
+Here is the code snippet to create a TextField:
+
+```cpp
+        TextField* textField = TextField::create("input words here","Arial",30);
+        textField->setPosition(Vec2(widgetSize.width / 2.0f, widgetSize.height / 2.0f));
+        textField->addEventListener(CC_CALLBACK_2(UITextFieldTest::textFieldEvent, this));
+        _uiLayer->addChild(textField);
+
+        void UITextFieldTest::textFieldEvent(Ref *pSender, TextField::EventType type)
+        {
+            switch (type)
+            {
+                case TextField::EventType::ATTACH_WITH_IME:
+                {
+                     //do something
+                }
+                    break;
+
+                case TextField::EventType::DETACH_WITH_IME:
+                {
+                }
+                    break;
+
+                case TextField::EventType::INSERT_TEXT:
+                    break;
+
+                case TextField::EventType::DELETE_BACKWARD:
+                    break;
+
+                default:
+                    break;
+            }
+        }
+```
 
 ### ScrollView
+A ScrollView widget is a container which could hold many child widget, the display area is usually smaller than its inner container. So it is a good option to display large portion of elements within a small screen size.
+
 #### Architecture
+A ScrollView is a Layout with clipping enabled, it contains another Layout as its inner container. All the elements will be added into the inner container instead of the ScrollView itself.
+
+![ui-scrollview](7/ui-scrollview.png ) 
+
+
 #### Example
 
+```cpp
+        // Create the scrollview by vertical
+        ui::ScrollView* scrollView = ui::ScrollView::create();
+        scrollView->setContentSize(Size(280.0f, 150.0f));
+        Size backgroundSize = background->getContentSize();
+        scrollView->setPosition(Vec2((widgetSize.width - backgroundSize.width) / 2.0f +
+                               (backgroundSize.width - scrollView->getContentSize().width) / 2.0f,
+                               (widgetSize.height - backgroundSize.height) / 2.0f +
+                               (backgroundSize.height - scrollView->getContentSize().height) / 2.0f));
+        _uiLayer->addChild(scrollView);
+        
+        ImageView* imageView = ImageView::create("cocosui/ccicon.png");
+        
+        float innerWidth = scrollView->getContentSize().width;
+        float innerHeight = scrollView->getContentSize().height + imageView->getContentSize().height;
+        
+        scrollView->setInnerContainerSize(Size(innerWidth, innerHeight));                
+        
+        Button* button = Button::create("cocosui/animationbuttonnormal.png", "cocosui/animationbuttonpressed.png");
+        button->setPosition(Vec2(innerWidth / 2.0f, scrollView->getInnerContainerSize().height - button->getContentSize().height / 2.0f));
+        scrollView->addChild(button);
+        
+        Button* titleButton = Button::create("cocosui/backtotopnormal.png", "cocosui/backtotoppressed.png");
+        titleButton->setTitleText("Title Button");
+        titleButton->setPosition(Vec2(innerWidth / 2.0f, button->getBottomBoundary() - button->getContentSize().height));
+        scrollView->addChild(titleButton);
+        
+        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));
+        button_scale9->setPosition(Vec2(innerWidth / 2.0f, titleButton->getBottomBoundary() - titleButton->getContentSize().height));
+        scrollView->addChild(button_scale9);
+        
+        imageView->setPosition(Vec2(innerWidth / 2.0f, imageView->getContentSize().height / 2.0f));
+        scrollView->addChild(imageView);            
+```
+
+Here is the screenshot:
+
+
+
 ### ListView
 #### Architecture
+
+![ui-listview](7/ui-listview.png ) 
+
+
 #### Example
 
 ### PageView
 #### Architecture
+
+![ui-pageview](7/ui-pageview.png ) 
+
 #### Example
 
 ### Layout