Added more shared C++/JavaScript documentation

TextLabel, script-hello, dali-fundamentals converted to markdown and
shared with JavaScript.
Removed all references to TextActor
Added JavaScript examples to JSON specification and moved to shared C++/
Javascript folder

Replaced main DALi screenshot image with screen grabs from current dali-demo

Change-Id: Iaf4b56c6a0e34356e8891e1b4cb3fbc1fdef0587

diff --git a/docs/content/images/example-documentation/example-code.png b/docs/content/images/example-documentation/example-code.png
index 881dc8f..7d9cab6 100644 (file)
Binary files a/docs/content/images/example-documentation/example-code.png and b/docs/content/images/example-documentation/example-code.png differ

diff --git a/docs/content/images/screen-shot.png b/docs/content/images/screen-shot.png
index 913d9f0..25659d9 100644 (file)
Binary files a/docs/content/images/screen-shot.png and b/docs/content/images/screen-shot.png differ

diff --git a/docs/content/main.md b/docs/content/main.md
index 54bff7c..e76d89e 100644 (file)
--- a/docs/content/main.md
+++ b/docs/content/main.md
@@ -32,7 +32,7 @@ the OpenGL API from developers and provides a clean cross-platform C++ & JavaScr
 - \link handle-body-idiom Handle – body idiom \endlink
 
 ## Actors
- - \link image-mesh-actor Image, Text and Mesh actors \endlink
+ - \link image-mesh-actor Image and Mesh actors \endlink
  - \link event-system Event Handling \endlink
  - \link custom-actor Custom Actor \endlink
 
@@ -52,6 +52,7 @@ the OpenGL API from developers and provides a clean cross-platform C++ & JavaScr
  - \link size-negotiation Size Negotiation \endlink
 
  ## UI Controls
+ - \link text-label Text Label\endlink
  - \link scroll-view Scroll View \endlink
  - \link size-negotiation-controls Size Negotiation for Controls \endlink
  - \link type-registration Type Registration \endlink
@@ -66,28 +67,28 @@ the OpenGL API from developers and provides a clean cross-platform C++ & JavaScr
  - \link dynamics-collisions Collision Detection and Filtering\endlink
 
  ## Scripting
- - \link scriptoverview.html JSON and JavaScript Overview \endlink
- - \link javascriptwrapping.html JavaScript Wrapping Guide for DALi developers\endlink
- - \link script-hello Hello World in script \endlink
+ - \link scriptoverview JSON and JavaScript Overview \endlink
  - \link script-json-specification JSON Specification\endlink
+ - \link script-hello Hello World in script \endlink
+ - \link javascriptwrapping JavaScript Wrapping Guide for DALi developers\endlink
 
  ## Rendering
  - \link viewing-modes Viewing modes \endlink
 
  ## Profiling
- - \link performanceprofiling.html Performance Profiling \endlink
- - \link resourcetracking.html Resource Tracking \endlink
+ - \link performanceprofiling Performance Profiling \endlink
+ - \link resourcetracking Resource Tracking \endlink
 
  ## Performance
- - \link performancetips.html Performance Tips \endlink
- - \link textureatlases.html Texture Atlases  \endlink
- - \link texturecompression.html Compressing Textures \endlink
+ - \link performancetips Performance Tips \endlink
+ - \link textureatlases Texture Atlases  \endlink
+ - \link texturecompression Compressing Textures \endlink
 
 ## Testing
  See [Automated Tests](@ref auto_testing) for instructions.
 
 
 ## Modifying this documentation
-- \link documentationguide.html Modifying this documentation \endlink
+- \link documentationguide Modifying this documentation \endlink
 
 

diff --git a/docs/content/programming-guide/script-hello.h b/docs/content/programming-guide/script-hello.h
deleted file mode 100644 (file)
index 3bb5ece..0000000
--- a/docs/content/programming-guide/script-hello.h
+++ /dev/null
@@ -1,58 +0,0 @@
-/*! \page script-hello Scripting Hello World
- *
- * <h2 class="pg">Hello World - JSON layout</h2>
- *
- * The following JSON code is the minimum required to put the sentence "Hello World" on the screen.
- *
- * @code
- * {
- *  // a tree of actors
- *  "stage": [{
- *    "name": "text-label",
- *    "type": "TextLabel",
- *    "text": "Hello World",
- *    "parent-origin": "CENTER"
- *  }]
- * }
- * @endcode
- *
- * The following c++ code loads the JSON file
- *
- * @code
- * Builder builder = Builder::New();
- *
- * std::string json_data(ReadFile("layout.json"));
- *
- * builder.LoadFromString(json_data);
- *
- * Actor actor = builder.GetActor("text-label");
- *
- * Stage::GetCurrent().Add(actor);
- * @endcode
- *
- * <h2 class="pg">Hello World - Javascript</h2>
- *
- * Hello world can also be executed via Javascript.
- *
- * The Dali script application is needed to run the Javascript which provides a Javascript runtime and an interface to Dali.
- *
- * @code
- * daliscript hello-world.js
- * @endcode
- *
- * The TextLabel control to display Hello World can be constructed using Javascript dot notation accessing Dali Actor Properties.
- *
- * @code
- * var textLabel = Dali.TextLabel();
- *
- * textLabel.text          = "Hello World";
- * textLabel.font-family   = "FreeSans";
- * textLabel.font-style    = "Regular";
- * textLabel.parent-origin = "CENTER";
- *
- * Dali.Run();
- * @endcode
- *
- */
-
-

diff --git a/docs/content/programming-guide/texture-compression.h b/docs/content/programming-guide/texture-compression.h
deleted file mode 100644 (file)
index 62f4577..0000000
--- a/docs/content/programming-guide/texture-compression.h
+++ /dev/null
@@ -1,64 +0,0 @@
-
-/*! \page Texture_Compression Texture Compression
-
-
-Using compressing the textures will:
-<ul>
-<li> Speed up rendering in time the GPU == less power used due to less texture data being transferred.
-<li> Reduce texture memory usage.
-<li> Speed up load times. Smaller files mean quicker load times.
-</ul>
-<br><br>
-DALi supports the KTX file format.
-You just load the compressed texture like you would any other image.
-\code
-Image::New("my_compressed_file.ktx");
-\endcode
-<br>
-ARMS texture compression tool<br>
-http://malideveloper.arm.com/develop-for-mali/tools/asset-creation/mali-gpu-texture-compression-tool/  <br>
-
-Here is an example of using the ARM compression tool.
-\image html compression-options.jpg
-
-<br><br>
-
-\image html compression-example.jpg
-<br>
-<br>
-As shown above the ETC-1 compression format does not support alpha.<br> As a work around the tool will export
-the alpha as a seperate compressed image.<br>
-In order to combine both the images you need to use a custom shader.<br>
-Here is an example shader:<br>
-\code
-  const char* const COMPRESSED_RGB_PLUS_SEPARATE_ALPHA_FRAGMENT_SOURCE =
-    "\n"
-    "void main()\n"
-    "{\n"
-    "    vec4 v4Color  = (texture2D(sTexture, vTexCoord) * uColor);\n"
-    "    v4Color.a =  texture2D(sEffect, vTexCoord ).r;\n"
-    "   gl_FragColor = v4Color;"
-    "}\n";
-
-
-  mShaderEffect = ShaderEffect::New( "", COMPRESSED_RGB_PLUS_SEPARATE_ALPHA_FRAGMENT_SOURCE);
-
-  mAtlasImageRGB = Image::New( ATLAS_RGB_FILENAME.KTX);
-
-  mAtlasImageAlpha = Image::New( ATLAS_ALPHA_FILENAME.KTX );
-
-  mShaderEffect.SetEffectImage( mAtlasImageAlpha );
-
-
-
-  // to create Image Actor
-  ImageActor  imageActor = ImageActor::New( mAtlasImageRGB, GetImagePosition( info) );
-
-  imageActor.SetShaderEffect( mShaderEffect );
-
-  imageActor.SetBlendMode(BlendingMode::ON);
-
-\endcode
-
-
- */

diff --git a/docs/content/programming-guide/fundamentals.h b/docs/content/shared-javascript-and-cpp-documentation/fundamentals.md
similarity index 87%
rename from docs/content/programming-guide/fundamentals.h
rename to docs/content/shared-javascript-and-cpp-documentation/fundamentals.md
index 506934e..115001b 100644 (file)
--- a/docs/content/programming-guide/fundamentals.h
+++ b/docs/content/shared-javascript-and-cpp-documentation/fundamentals.md
@@ -1,44 +1,54 @@
-/*! \page fundamentals Dali Fundamentals
+/**
  *
-<h2 class="pg">Actors and the Stage</h2>
+# Dali Fundamentals  {#fundamentals}
 
-A Dali application uses a hierachy of Dali::Actor objects to position visible content.  An actor inherits a position relative to its parent, and can be moved relative to this point.  UI controls can be built by combining multiple actors.
+## Actors and the Stage
 
+A Dali application uses a hierachy of Dali::Actor objects to position visible content.  An actor inherits a position relative to its parent, and can be moved relative to this point.  UI controls can be built by combining multiple actors.
+  
 To display the contents of an actor, it must be connected to the Dali::Stage.  This provides an invisible root (top-level) actor, to which all other actors are added.  A direct or indirect child of the root actor is considered "on-stage".  Multi-touch events are received through signals emitted by on-stage actors.
-
+  
 The following example shows how to connect a new actor to the stage:
 
-@code
+~~~{.cpp}
 Actor actor = Actor::New();
 Stage::GetCurrent().Add(actor);
-@endcode
+~~~
 
-<h2 class="pg">The Coordinate System</h2>
+~~~{.js}
+var actor = new dali.Actor();
+dali.stage.add( actor );
+~~~
+
+## The Coordinate System
 
 The Stage has a 2D size, which matches the size of the application window.  The default coordinate system in Dali has the origin at the top-left corner, with positive X to right, and position Y going
 downwards.  This is intended to be convenient when laying-out 2D views.
 
 ![ ](../assets/img/coordinate-system-and-stage.png)
+![ ](coordinate-system-and-stage.png)
 
-<h2 class="pg">Positioning Actors</h2>
+## Positioning Actors
 
 An actor inherits its parent's position.  The relative position between the actor & parent is determined by 3 properties:
-
 1) ParentOrigin.  This Vector3 property defines a point within the parent actor's area.
 
 ![ ](../assets/img/parent-origin.png)
+![ ](parent-origin.png)
 
 The default is "top-left", which can be visualized in 2D as (0, 0), but is actually Vector3(0, 0, 0.5) in the 3D Dali world.  The actor's position is relative to this point.
 
 2) AnchorPoint.  This Vector3 property defines a point within the child actor's area.
 
 ![ ](../assets/img/anchor-point.png)
+![ ](anchor-point.png)
 
 The default is "center", which can be visualized in 2D as (0.5, 0.5), but is actually Vector3(0.5, 0.5, 0.5) in the 3D Dali world.  The actor's position is also relative to this point.
 
 3) Position.  This is the position vector between the parent-origin and anchor-point.
 
 ![ ](../assets/img/actor-position.png)
+![ ](actor-position.png)
 
 Therefore by default, an actors position is the distance between its center and the top-left corner of its parent.
 
@@ -46,5 +56,6 @@ An actor added directly to the stage with position (X = stageWidth*0.5, Y = stag
 
 Note that since Dali is a 3D toolkit, this behaviour is the result of a default perspective camera setup.
 
-*
+@class _Guide_DALi_Fundamentals
+
 */

diff --git a/docs/content/shared-javascript-and-cpp-documentation/javascript-wrapping-guide.md b/docs/content/shared-javascript-and-cpp-documentation/javascript-wrapping-guide.md
index 50dd022..287c8cf 100644 (file)
--- a/docs/content/shared-javascript-and-cpp-documentation/javascript-wrapping-guide.md
+++ b/docs/content/shared-javascript-and-cpp-documentation/javascript-wrapping-guide.md
@@ -109,5 +109,5 @@ to get access to the Dali object.
 Each wrapped object registers with Dali garbage collector so they can be deleted
 when Dali shuts down
 
-@class _Guide_JavaScript_Wrapping`
+@class _Guide_JavaScript_Wrapping
 */
\ No newline at end of file

diff --git a/docs/content/shared-javascript-and-cpp-documentation/performance-tips.md b/docs/content/shared-javascript-and-cpp-documentation/performance-tips.md
index e96ae4d..c8662aa 100644 (file)
--- a/docs/content/shared-javascript-and-cpp-documentation/performance-tips.md
+++ b/docs/content/shared-javascript-and-cpp-documentation/performance-tips.md
@@ -1,7 +1,7 @@
 /**
  *
 
-# Performance Tips  {#performancetips}
+# Performance Tips {#performancetips}
 
 ## High CPU occupancy
 
@@ -14,14 +14,21 @@
 
   - Reduce visible actor count ( == less draw calls)
   - For 2D UI graphics which require no z sorting you can use
+
 ~~~{.cpp}
-  // In this mode depth testing is turned off and order is determined by the hierachy (depth-first search order).
-  // Not always recommended if there is going to be a lot of overdraw ( if lots of actors are on top of each other)
+// C++
+// In this mode depth testing is turned off and order is determined by the hierachy (depth-first search order).
+// Not always recommended if there is going to be a lot of overdraw ( if lots of actors are on top of each other)
+
+Actor::SetDrawMode( DrawMode::OVERLAY ); // C++
+~~~
 
-  Actor::SetDrawMode( DrawMode::OVERLAY ); // C++
-~~~~
 ~~~{.js}
-  actor.drawMode = dali.DRAW_MODE_OVERLAY; // JavaScript
+// JavaScript
+// In this mode depth testing is turned off and order is determined by the hierachy (depth-first search order).
+// Not always recommended if there is going to be a lot of overdraw ( if lots of actors are on top of each other)
+
+actor.drawMode = dali.DRAW_MODE_OVERLAY;
 ~~~
   - Use TextureAtlases ( reduces state changes in the GPU)
   - Use compressed textures
@@ -33,6 +40,7 @@
 
 
 @class _Guide_Performance_Tips
+
 */
 
 

diff --git a/docs/content/shared-javascript-and-cpp-documentation/script-hello.md b/docs/content/shared-javascript-and-cpp-documentation/script-hello.md
new file mode 100644 (file)
index 0000000..488cb8b
--- /dev/null
+++ b/docs/content/shared-javascript-and-cpp-documentation/script-hello.md
@@ -0,0 +1,67 @@
+/**
+ *
+ # Hello World - JSON layout{#script-hello}
+
+ The following JSON code is the minimum required to put the sentence "Hello World" on the screen.
+
+~~~{.json}
+{
+ // a tree of actors
+ "stage": [{
+   "name": "text-label",
+   "type": "TextLabel",
+   "text": "Hello World",
+   "parent-origin": "CENTER"
+ }]
+}
+~~~
+
+ The following code loads the JSON file
+
+~~~{.cpp}
+ // C++
+ Builder builder = Builder::New();
+
+ std::string json_data(ReadFile("layout.json"));
+
+ builder.LoadFromString(json_data);
+
+ builder.AddActors( Stage::GetCurrent().GetRootLayer() );
+
+ ~~~
+
+ ~~~{.js}
+ // JavaScript
+
+ var builder = new dali.Builder();
+
+ builder.loadFromFile("layout.json");
+
+ builder.addActors( dali.stage.getRootLayer )
+
+~~~
+ ## Hello World - Javascript
+
+ The Dali script application is needed to run the Javascript which provides a Javascript runtime and an interface to Dali.
+
+~~~
+ scripting.example hello-world.js
+~~~
+
+ The TextLabel control to display Hello World can be constructed using Javascript dot notation accessing Dali Actor Properties.
+
+~~~{.js}
+// JavaScript
+
+ var textLabel = new dali.TextLabel();
+
+ textLabel.text         = "Hello World";
+ textLabel.fontFamily   = "FreeSans";
+ textLabel.fontStyle    = "Regular";
+ textLabel.parentOrigin = dali.CENTER;
+
+ dali.stage.add( textLabel );
+~~~
+
+@class _Guide_Script_Hello_World
+ */
\ No newline at end of file

diff --git a/docs/content/programming-guide/script-json-specification.md b/docs/content/shared-javascript-and-cpp-documentation/script-json-specification.md
similarity index 97%
rename from docs/content/programming-guide/script-json-specification.md
rename to docs/content/shared-javascript-and-cpp-documentation/script-json-specification.md
index abcbd55..002eac7 100644 (file)
--- a/docs/content/programming-guide/script-json-specification.md
+++ b/docs/content/shared-javascript-and-cpp-documentation/script-json-specification.md
@@ -143,14 +143,28 @@ where the first and last positions are braces.
 The template section supports the creation of actor instances. The
 template name can be used in code to create an actor tree.
 
+~~~{.js}
+// JavaScript
+
+var builder = new dali.Builder();
+builder.loadFromFile( "my-app.json");
+var userActorTree = builder.create( { template:"basic-text"} );
 ~~~
+
+~~~{.cpp}
+// C++
+
+Builder builder = Builder::New();
+std::string jsonData = loadFile("my-app.json");
+builder.LoadFromString( jsonData );
+
 actorTree = builder.Create("basic-text");
 ~~~
 
 Templates consist of a name, multiple property-value configurations and
 an optional actor sub hierarchy.
 
-~~~
+~~~{.json}
    {                                    //
    "templates":                         //  Template library section
    {                                    //
@@ -189,16 +203,27 @@ styles to apply when creating using the template.
 The styles section supports a named set of properties that can be
 applied to an actor or actor tree.
 
-~~~
+~~~{.cpp}
+// C++
+
 Builder.ApplyStyle("light-theme", myActor);
 ~~~
 
-The styles can also be applied as an animation.
+~~~{.js}
+// JavaScript
 
+builder.applyStyle("light-theme", myActor);
 ~~~
+
+
+The styles can also be applied as an animation.
+
+~~~{.cpp}
 Builder.AnimateTo("light-theme", myActor, TimePeriod(0, 10));
 ~~~
 
+
+
 ~~~
    {                                   //
    "styles":                           // Style set section
@@ -285,7 +310,7 @@ instead of a single final value.
 Paths are defined in a top level path section and referenced by the
 animation property.
 
-~~~~
+~~~
     {                                    //
     "paths":                             // Path library
      {                                   //
@@ -329,7 +354,7 @@ animation property.
                                          // animation.
     },                                   //
     }                                    //
-~~~~
+~~~
 
 ## Shaders {#shaders}
 
@@ -345,7 +370,7 @@ instance.
 Similarly one named shader instance can be set to several actors and can
 be animated by one animation.
 
-~~~~
+~~~
     {                                             //
     "shader-effects":                             // Shader Effect section
     {                                             //
@@ -375,7 +400,7 @@ be animated by one animation.
      ...
     }]
     }
-~~~~
+~~~
 
 At least one of the vertex or fragment fields is mandatory. All
 other fields are optional will use internal defaults.
@@ -395,7 +420,7 @@ The actor property names and shader uniform names must not clash for the
 uniform to animate correctly. The convention in DALi is to prepend
 uniforms with 'u'.
 
-~~~~
+~~~
     {                                    \\
     "animations":                        \\ Animation library
     {                                    \\
@@ -431,7 +456,7 @@ uniforms with 'u'.
      }
      ]
     },
-~~~~
+~~~
 
 ## Stage {#stage}
 
@@ -441,6 +466,7 @@ the JSON is loaded.
 The stage is a tree of actors that can be added to Dali's stage object.
 
 ~~~
+// C++
 builder = Dali.Builder();
 json_text = load("layout.json");
 builder.Load(json\_text);
@@ -448,6 +474,12 @@ stage = Dali.Stage.GetCurrent();
 builder.AddActors( stage.GetRootLayer()); // Add actors to the stage root layer
 ~~~
 
+~~~{.js}
+// JavaScript
+
+builder.addActors( dali.stage.getRootLayer() );
+~~~
+
 ~~~
     {                                    \\
     "stage":                             \\  Stage Section Number
@@ -480,5 +512,5 @@ UI Control Specification".
 Please refer to the above document for further information about specific
 controls.
 
-@class ScriptJsonSpecification
+@class _Guide_JSON_Specification
 */

diff --git a/docs/content/shared-javascript-and-cpp-documentation/script-overview.md b/docs/content/shared-javascript-and-cpp-documentation/script-overview.md
index bb7bb5d..311ad9f 100644 (file)
--- a/docs/content/shared-javascript-and-cpp-documentation/script-overview.md
+++ b/docs/content/shared-javascript-and-cpp-documentation/script-overview.md
@@ -138,7 +138,7 @@ Actor userActorTree = builder.Create("users");
 #### JavaScript example
 
 ~~~{.js}
-builder.applyStyle = builder.create( "live-tv-focus", tvIcon );
+builder.applyStyle( "live-tv-focus", tvIcon );
 ~~~
 
 #### C++ example
@@ -184,12 +184,14 @@ builder.ApplyStyle( "live-tv-focus", tvIcon );
 #### JavaScript example
 
 ~~~{.js}
+// JavaScript
+
 var anim = builder.createAnimation( { animation:"animate-show", actor: myActor } );
 ~~~
 
-#### C++ example
-
 ~~~{.cpp}
+// C+++
+
 Animation anim = builder.createAnimation( "animate-show", propertyMap );
 ~~~
 

diff --git a/docs/content/programming-guide/text-label.h b/docs/content/shared-javascript-and-cpp-documentation/text-label.md
similarity index 51%
rename from docs/content/programming-guide/text-label.h
rename to docs/content/shared-javascript-and-cpp-documentation/text-label.md
index 24f8b1b..908fedd 100644 (file)
--- a/docs/content/programming-guide/text-label.h
+++ b/docs/content/shared-javascript-and-cpp-documentation/text-label.md
@@ -1,63 +1,84 @@
-/*! \page text-label Text Label
+/**
  *
-\section overview Overview
-The Dali::Toolkit::TextLabel is a Dali::Toolkit::Control which renders a short text string.\n
+
+# Text Label {#text-label}
+
+## Overview
+
+The Dali::Toolkit::TextLabel is a Dali::Toolkit::Control which renders a short text string.  
 Text labels are lightweight, non-editable and do not respond to user input.
 
-\subsection basictextlabelusage Basic usage
+### Basic usage
 
 To display a TextLabel the TEXT property must be set using a UTF-8 string.
 
-\code
+~~~{.cpp}
+// C++
+
 TextLabel label = TextLabel::New();
 label.SetProperty( TextLabel::Property::TEXT, "Hello World" );
 label.SetAnchorPoint( AnchorPoint::TOP_LEFT );
 Stage::GetCurrent().Add( label );
-\endcode
-
-The label must also be added to the stage, or to an actor which is on the stage.\n
-The position of the label on-screen is dependent on the parent-origin and anchor-point properties.\n
-
-<table border=0 cellpadding=10>
-<tr>
-  <td>
-  \image html TextLabelTopLeft.png
-  </td>
-</tr>
-<tr>
-  <td>
-  (ParentOrigin::TOP_LEFT, AnchorPoint::TOP_LEFT)
-  </td>
-</tr>
-</table>
-
-\subsection fontSelection Font Selection
-
-By default TextLabel will automatically select a suitable font from the platform.\n
-Typically fonts do not support all scripts, for example Latin fonts often do not provide Arabic glyphs.\n
+~~~
+
+~~~{.js}
+// JavaScript
+
+var label = new dali.TextLabel();
+
+label.text = "Hello World";
+label.anchorPoint = dali.TOP_LEFT;
+
+dali.stage.add( label );
+~~~
+
+The label must also be added to the stage, or to an actor which is on the stage.  
+The position of the label on-screen is dependent on the parent-origin and anchor-point properties.  
+
+|  |  |
+|--|--|
+| (ParentOrigin::TOP_LEFT, AnchorPoint::TOP_LEFT) | ![ ](../assets/img/text-controls/TextLabelTopLeft.png) ![ ](TextLabelTopLeft.png)   |
+
+### Font Selection
+
+By default TextLabel will automatically select a suitable font from the platform.  
+Typically fonts do not support all scripts, for example Latin fonts often do not provide Arabic glyphs.  
 Therefore you should expect TextLabel to select different fonts for each script.
 
 Alternatively a font may be requested using either or all of FONT_FAMILY, FONT_STYLE, and POINT_SIZE properties:
-\code
+
+~~~{.cpp}
+// C++
+
 label.SetProperty( TextLabel::Property::FONT_FAMILY, "HelveticaNue" );
 label.SetProperty( TextLabel::Property::FONT_STYLE,  "Regular" );
 label.SetProperty( TextLabel::Property::POINT_SIZE,  12.0f );
-\endcode
+~~~
+
+~~~{.js}
+// JavaScript
+
+label.fontFamily = "HelveticaNue";
+label.fontStyle = "Regular";
+label.pointSize = 12;
+~~~
+
 However the TextLabel will fall-back to using the default font, if the requested font does not support the required scripts.
 
-\subsection fontStyles Font Styles
+### Font Styles
 
-Setting a font size programmatically is not ideal for applications which support multiple screen resolutions etc.\n
-A more flexible approach is to prepare various JSON stylesheets, and request a different style for each platform:\n
+Setting a font size programmatically is not ideal for applications which support multiple screen resolutions etc.  
+A more flexible approach is to prepare various JSON stylesheets, and request a different style for each platform:  
 
-\code
+~~~{.cpp}
+// C++
 StyleManager styleManager = StyleManager::Get();
 styleManager.RequestThemeChange( "example-path/example.json" );
-\endcode
+~~~
 
 To change the font for standard text labels, this JSON syntax can be used:
 
-\code
+~~~{.json}
 {
   "styles":
   {
@@ -69,16 +90,23 @@ To change the font for standard text labels, this JSON syntax can be used:
     }
   }
 }
-\endcode
+~~~
 
-However the same point-size is unlikely to be suitable for all labels in an application.\n
+However the same point-size is unlikely to be suitable for all labels in an application.  
 To set custom sizes simply set a "style name" for each case, and then provide a style override in JSON:
 
-\code
+~~~{.cpp}
+  // C++
+
   label.SetProperty( Control::Property::STYLE_NAME, "custom" );
-\endcode
+~~~
+~~~{.js}
+  // JavaScript
+
+  label.styleName = "custom"';
+~~~
 
-\code
+~~~{.json}
 {
   "styles":
   {
@@ -95,101 +123,104 @@ To set custom sizes simply set a "style name" for each case, and then provide a
     }
   }
 }
-\endcode
+~~~
 
-In the example above, standard text labels will have point-size 8, and "custom" labels will have point-size 10.\n
+In the example above, standard text labels will have point-size 8, and "custom" labels will have point-size 10.  
 
-\subsection textAlignment Text Alignment
+### Text Alignment
+
+Wrapping can be enabled using the MULTI_LINE property:
+
+~~~{.cpp}
+// C++
 
-Wrapping can be enabled using the MULTI_LINE property:\n
-\code
 label.SetProperty( TextLabel::Property::MULTI_LINE, true );
-\endcode
+~~~
+
+~~~{.js}
+// JavaScript
+
+label.mutliLine = true;
+~~~
 
 The text can be either aligned horizontally to the beginning, end, or center of the available area:
-\code
+
+~~~{.cpp}
+// C++
+
 label.SetProperty( TextLabel::Property::HORIZONTAL_ALIGNMENT, "BEGIN" ); // "CENTER" or "END"
-\endcode
-
-<table border=0 cellpadding=10>
-<tr>
-  <td>
-  Here is the "BEGIN" alignment shown for left-to-right (Latin) and right-to-left (Arabic) scripts:
-  </td>
-</tr>
-<tr>
-  <td>
-  \image html LatinBegin.png
-  </td>
-  <td>
-  \image html ArabicBegin.png
-  </td>
-</tr>
-<tr>
-  <td>
-  Here is the "CENTER" alignment shown for left-to-right (Latin) and right-to-left (Arabic) scripts:
-  </td>
-</tr>
-<tr>
-  <td>
-  \image html LatinCenter.png
-  </td>
-  <td>
-  \image html ArabicCenter.png
-  </td>
-</tr>
-<tr>
-  <td>
-  Here is the "END" alignment shown for left-to-right (Latin) and right-to-left (Arabic) scripts:
-  </td>
-</tr>
-<tr>
-  <td>
-  \image html LatinEnd.png
-  </td>
-  <td>
-  \image html ArabicEnd.png
-  </td>
-</tr>
-</table>
-
-The examples above assume that the TextLabel size greater than the minimum required.\n
+~~~
+
+~~~{.js}
+// JavaScript
+
+label.HorizontalAlignment = "BEGIN"; // "CENTER" or "END"
+~~~
+
+|  |  |
+|--|--|
+| Here is the "BEGIN" alignment shown for left-to-right (Latin)   |  right-to-left (Arabic) scripts |
+| ![ ](../assets/img/text-controls/LatinBegin.png) ![ ](LatinBegin.png) | ![ ](../assets/img/text-controls/ArabicBegin.png) ![ ](ArabicBegin.png) |
+| Here is the "CENTER" alignment shown for left-to-right (Latin)  | right-to-left (Arabic) scripts:|
+| ![ ](../assets/img/text-controls/LatinCenter.png) ![ ](LatinCenter.png) | ![ ](../assets/img/text-controls/ArabicCenter.png) ![ ](ArabicCenter.png) |
+| Here is the "END" alignment shown for left-to-right (Latin)  | right-to-left (Arabic) scripts:|
+| ![ ](../assets/img/text-controls/LatinEnd.png) ![ ](LatinEnd.png) | ![ ](../assets/img/text-controls/ArabicEnd.png) ![ ](ArabicEnd.png) |
+
+
+The examples above assume that the TextLabel size greater than the minimum required.  
 The next section provides details about the other size related options.
 
-\subsection negotiatingSize Negotiating size
+## Negotiating size
+
+\link size-negotiation Size negotiation \endlink is a layouting feature supported by UI controls such as TextLabel.
+  
+There are several resize policies which are commonly used with TextLabels.
+  
+The following examples show TextLabels actual size by setting a colored background, whilst the black area represents the size of the parent control:  
 
-\link size-negotiation Size negotiation \endlink is a layouting feature supported by UI controls such as TextLabel.\n
-There are several resize policies which are commonly used with TextLabels.\n
-The following examples show TextLabels actual size by setting a colored background, whilst the black area represents the size of the parent control:\n
+### Using natural size
 
-<h3>Using natural size</h3>
+With a "natural" size TextLabel will be large enough to display the text without wrapping, and will not have extra space to align the text within.  
+Therefore in this example the same result would be displayed, regardless of the alignment or multi-line properties.  
 
-With a "natural" size TextLabel will be large enough to display the text without wrapping, and will not have extra space to align the text within.\n
-Therefore in this example the same result would be displayed, regardless of the alignment or multi-line properties.\n
+~~~{.cpp}
+// C++
 
-\code
 TextLabel label = TextLabel::New( "Hello World" );
 label.SetAnchorPoint( AnchorPoint::TOP_LEFT );
 label.SetResizePolicy( ResizePolicy::USE_NATURAL_SIZE, Dimension::ALL_DIMENSIONS );
 label.SetBackgroundColor( Color::BLUE );
 Stage::GetCurrent().Add( label );
-\endcode
+~~~
+
+~~~{.js}
+// JavaScript
+
+var label = new dali.Textlabel;
+label.text = "Hello World";
+label.anchorPoint = dali.TOP_LEFT;
+
+label.widthResizePolicy = "USE_NATURAL_SIZE";
+label.heightResizePolicy = "USE_NATURAL_SIZE";
+
+label.textColor = dali.COLOR_WHITE;
+// background color not available as it's currently not a property of control
+dali.stage.add( label );
+~~~
+
+
+ ![ ](../assets/img/text-controls/HelloWorld-NaturalSize.png)
+ ![ ](HelloWorld-NaturalSize.png)
 
-<table border=0 cellpadding=10>
-<tr>
-  <td>
-  \image html HelloWorld-NaturalSize.png
-  </td>
-</tr>
-</table>
 
-<h3>Height-for-width negotiation</h3>
+### Height-for-width negotiation
 
-To layout text labels vertically, a fixed (maximum) width should be provided by the parent control.\n
-Each TextLabel will then report a desired height for the given width.\n
+To layout text labels vertically, a fixed (maximum) width should be provided by the parent control.  
+Each TextLabel will then report a desired height for the given width.  
 Here is an example of this behavior using TableView as the parent:
 
-\code
+~~~{.cpp}
+// C++
 TableView parent = TableView::New( 3, 1 );
 parent.SetResizePolicy( ResizePolicy::FILL_TO_PARENT, Dimension::WIDTH );
 parent.SetResizePolicy( ResizePolicy::USE_NATURAL_SIZE, Dimension::HEIGHT );
@@ -221,123 +252,169 @@ label.SetBackgroundColor( Color::BLUE );
 label.SetProperty( TextLabel::Property::MULTI_LINE, true );
 parent.AddChild( label, TableView::CellPosition( 2, 0 ) );
 parent.SetFitHeight( 2 );
-\endcode
+~~~
+
+ ![ ](../assets/img/text-controls/HelloWorld-HeightForWidth.png)
+ ![ ](HelloWorld-HeightForWidth.png)
 
-<table border=0 cellpadding=10>
-<tr>
-  <td>
-  \image html HelloWorld-HeightForWidth.png
-  </td>
-</tr>
-</table>
 
 Note that the "Hello World" text label (above) has been given the full width, not the natural width.
 
-\subsection textLabelDecorations TextLabel Decorations
+### TextLabel Decorations
 
-<h3>Color</h3>
+#### Color
 
-To change the color of the text, the recommended way is to use the TEXT_COLOR property.\n
-Note that unlike the Actor::COLOR property, this will not affect child Actors added to the TextLabel.\n
+To change the color of the text, the recommended way is to use the TEXT_COLOR property.  
+Note that unlike the Actor::COLOR property, this will not affect child Actors added to the TextLabel.  
 
-\code
+~~~{.cpp}
+// C++
 label.SetProperty( TextLabel::Property::TEXT, "Red Text" );
 label.SetProperty( TextLabel::Property::TEXT_COLOR, Color::RED );
-\endcode
+~~~
+
+~~~{.js}
+// JavaScript
+
+label.text = "Red Text";
+label.textColor = dali.COLOR_RED;
+~~~
 
-<table border=0 cellpadding=10>
-<tr>
-  <td>
-  \image html RedText.png
-  </td>
-</tr>
-</table>
+ ![ ](../assets/img/text-controls/RedText.png)
+ ![ ](RedText.png)
 
-<h3>Drop Shadow</h3>
+#### Drop Shadow
 
-To add a drop-shadow to the text, simply set the SHADOW_OFFSET property with non-zero values.\n
-The color can also be selected using the SHADOW_COLOR property.\n
+To add a drop-shadow to the text, simply set the SHADOW_OFFSET property with non-zero values.  
+The color can also be selected using the SHADOW_COLOR property.  
+
+~~~{.cpp}
+ // C++
 
-\code
 stage.SetBackgroundColor( Color::BLUE );
 
 label1.SetProperty( TextLabel::Property::TEXT, "Plain Text" );
 
 label2.SetProperty( TextLabel::Property::TEXT, "Text with Shadow" );
 label2.SetProperty( TextLabel::Property::SHADOW_OFFSET, Vector2( 1.0f, 1.0f ) );
-label4.SetProperty( TextLabel::Property::SHADOW_COLOR, Color::BLACK );
+label2.SetProperty( TextLabel::Property::SHADOW_COLOR, Color::BLACK );
 
 label3.SetProperty( TextLabel::Property::TEXT, "Text with Bigger Shadow" );
 label3.SetProperty( TextLabel::Property::SHADOW_OFFSET, Vector2( 2.0f, 2.0f ) );
-label4.SetProperty( TextLabel::Property::SHADOW_COLOR, Color::BLACK );
+label3.SetProperty( TextLabel::Property::SHADOW_COLOR, Color::BLACK );
 
 label4.SetProperty( TextLabel::Property::TEXT, "Text with Color Shadow" );
 label4.SetProperty( TextLabel::Property::SHADOW_OFFSET, Vector2( 1.0f, 1.0f ) );
 label4.SetProperty( TextLabel::Property::SHADOW_COLOR, Color::RED );
-\endcode
-
-<table border=0 cellpadding=10>
-<tr>
-  <td>
-  \image html PlainText.png
-  </td>
-</tr>
-<tr>
-  <td>
-  \image html TextWithShadow.png
-  </td>
-</tr>
-<tr>
-  <td>
-  \image html TextWithBiggerShadow.png
-  </td>
-</tr>
-<tr>
-  <td>
-  \image html TextWithColorShadow.png
-  </td>
-</tr>
-</table>
-
-<h3>Underline</h3>
-
-The text can be underlined by setting UNDERLINE_ENABLED.\n
-The color can also be selected using the UNDERLINE_COLOR property.\n
-
-\code
+~~~
+
+~~~{.js}
+// JavaScript
+
+dali.stage.setBackgroundColor( dali.COLOR_BLUE );
+
+label1.text = "Plain Text";
+
+
+label2.text = "Text with Shadow";
+label2.shadowOffset = [1, 1];
+label2.shadowColor = dali.COLOR_BLACK;
+
+label3.text = "Text with Bigger Shadow";
+label3.shadowOffset = [2, 2];
+label3.shadowColor = dali.COLOR_BLACK;
+
+label4.SetProperty( TextLabel::Property::TEXT, "Text with Color Shadow" );
+label3.shadowOffset = [1, 1];
+label3.shadowColor = dali.COLOR_RED;
+~~~
+
+
+![ ](../assets/img/text-controls/PlainText.png)
+![ ](PlainText.png)
+
+
+![ ](../assets/img/text-controls/TextWithShadow.png)
+![ ](TextWithShadow.png)
+
+![ ](../assets/img/text-controls/TextWithBiggerShadow.png)
+![ ](TextWithBiggerShadow.png)
+
+
+![ ](../assets/img/text-controls/TextWithColorShadow.png)
+![ ](TextWithColorShadow.png)
+
+
+#### Underline
+
+The text can be underlined by setting UNDERLINE_ENABLED.  
+The color can also be selected using the UNDERLINE_COLOR property.  
+
+~~~{.cpp}
+// C++
 label1.SetProperty( TextLabel::Property::TEXT, "Text with Underline" );
 label1.SetProperty( TextLabel::Property::UNDERLINE_ENABLED, true );
 
 label2.SetProperty( TextLabel::Property::TEXT, "Text with Color Underline" );
 label2.SetProperty( TextLabel::Property::UNDERLINE_ENABLED, true );
 label2.SetProperty( TextLabel::Property::UNDERLINE_COLOR, Color::GREEN );
-\endcode
-
-<table border=0 cellpadding=10>
-<tr>
-  <td>
-  \image html TextWithUnderline.png
-  </td>
-</tr>
-<tr>
-  <td>
-  \image html TextWithColorUnderline.png
-  </td>
-</tr>
-</table>
+~~~
+~~~{.js}
+// JavaScript
+label1.Text = "Text with Underline";
+label1.underlineEnabled = true;
+
+label2.Text = "Text with Color Underline";
+label2.underlineEnabled = true;
+label2.underlineColor = dali.COLOR_GREEN;
+~~~
+
+
+![ ](../assets/img/text-controls/TextWithUnderline.png)
+![ ](TextWithUnderline.png)
+
+
+![ ](../assets/img/text-controls/TextWithColorUnderline.png)
+![ ](TextWithColorUnderline.png)
 
 By default the underline height will be taken from the font metrics, however this can be overridden using the UNDERLINE_HEIGHT property:
 
-\code
+~~~{.cpp}
+// C++
+
 label1.SetProperty( TextLabel::Property::UNDERLINE_HEIGHT, 1.0f );
-\endcode
-
-<table border=0 cellpadding=10>
-<tr>
-  <td>
-  \image html TextWith1pxUnderline.png
-  </td>
-</tr>
-</table>
+~~~
+
+~~~{.js}
+// JavaScript
+
+label1.underlineHeight = 1;
+~~~
+
+![ ](../assets/img/text-controls/TextWith1pxUnderline.png)
+![ ](TextWith1pxUnderline.png)
+
+### Text Label Properties
+
+ Name (JavaScript)   |  Name (C++)         |  Type        | Writable     | Animatable
+---------------------|---------------------|--------------|--------------|-----------
+ renderingBackend    | RENDERING_BACKEND   |  INTEGER     | &#10004;     | &#10008;
+ text                | TEXT                |  STRING      | &#10004;     | &#10008;
+ fontFamily          | FONT_FAMILY         |  STRING      | &#10004;     | &#10008;
+ fontStyle           | FONT_STYLE          |  STRING      | &#10004;     | &#10008;
+ pointSize           | POINT_SIZE          |  FLOAT       | &#10004;     | &#10008;
+ multiLine           | MULTI_LINE          |  BOOLEAN     | &#10004;     | &#10008;
+ horizontalAlignment | HORIZONTAL_ALIGNMENT|  STRING      | &#10004;     | &#10008;
+ verticalAlignment   | VERTICAL_ALIGNMENT  |  STRING      | &#10004;     | &#10008;
+ textColor           | TEXT_COLOR          |  VECTOR4     | &#10004;     | &#10008;
+ shadowOffset        | SHADOW_OFFSET       |  VECTOR2     | &#10004;     | &#10008;
+ shadowColor         | SHADOW_COLOR        |  VECTOR4     | &#10004;     | &#10008;
+ underlineEnabled    | UNDERLINE_ENABLED   |  BOOLEAN     | &#10004;     | &#10008;
+ underlineColor      | UNDERLINE_COLOR     |  VECTOR4     | &#10004;     | &#10008;
+ underlineHeight     | UNDERLINE_HEIGHT    |  FLOAT       | &#10004;     | &#10008;
+
+
+
+@class TextLabel
 
 */

diff --git a/docs/content/shared-javascript-and-cpp-documentation/texture-atlas.md b/docs/content/shared-javascript-and-cpp-documentation/texture-atlas.md
index 23f414a..94c0141 100644 (file)
--- a/docs/content/shared-javascript-and-cpp-documentation/texture-atlas.md
+++ b/docs/content/shared-javascript-and-cpp-documentation/texture-atlas.md
@@ -229,7 +229,7 @@ void LoadAtlasImages()
 
 ## Atlas creation tips
 
-- Compress the atlas  - \link Texture_Compression Compressing Textures \endlink
+- Compress the atlas  - \link texturecompression Compressing Textures \endlink
 - Avoid adding large images to the Atlas.
 - E.g. don't add background images to it. Medium to large images should be kept seperate.
   

diff --git a/plugins/dali-script-v8/docs/content/text-actor.js b/plugins/dali-script-v8/docs/content/text-actor.js
deleted file mode 100644 (file)
index 7aa2b04..0000000
--- a/plugins/dali-script-v8/docs/content/text-actor.js
+++ /dev/null
@@ -1,79 +0,0 @@
-/**
-## Text Actor API
-TextActor is a basic actor for displaying a text label
-
-By default the text actor always uses the natural size of the text, when the text property is set,
-unless SetSize is called to override the size or size is animated to some other size.
-
-Natural size for TextActor is the same as the size returned by dali.font.MeasureText( string )
-using the font that the TextActor is using.
-
-By default {{#crossLink "RenderableActor/setCullFace:method"}}CullFaceMode{{/crossLink}} is set to CullNone to enable the TextActor to be viewed from all angles.
-
-### Simple example
-```
-var textActor = new dali.TextActor( "Hello world" );
-  
-// by default an actor is anchored to the top-left of it's parent actor
-// change it to the middle
-textActor.parentOrigin = [0.5,0.5,0.5];
-  
-// scale it up by 4 times  in x,y
-textActor.scale = [ 4, 4, 1  ];
-  
-// add to the stage
-dali.stage.add( textActor );
-```
-
-### Example using a font and text options ###
-```
-var fontInfo =
-{
-  family : "Arial",
-  style :"Bold",
-  pointSize:20
-}
-  
-var arialFont = new dali.Font( fontInfo );
-var textOptions =
-{
-  font: arialFont,
-  isRightToLeft: true,
-  fontDetection: true       // default is true
-}
-  
-var textActor1 = new dali.TextActor( "Hello-world" , textOptions );
-  
-// this will automatically chose a different font that can display the text
-var textActor2 = new dali.TextActor( "繁體中文" , textOptions );
-```
-
-| Name                   |    Type    | Writable     | Animatable|
-|------------------------|------------|--------------|-----------|
-| text                   |  STRING    | ✔     |✘   |
-| font                   |  STRING    | ✔     |✘   |
-| font-style             |  STRING    | ✔     |✘   |
-| outline-enable         |  BOOLEAN   | ✔     |✘   |
-| outline-color          |  VECTOR4   | ✔     |✘   |
-| outline-thickness-width| VECTOR2    | ✔     |✘   |
-| smooth-edge            | FLOAT      | ✔     |✘   |
-| glow-enable            | BOOLEAN    | ✔     |✘   |
-| glow-color             | VECTOR4    | ✔     |✘   |
-| glow-intensity         | FLOAT      | ✔     |✘   |
-| shadow-enable          | BOOLEAN    | ✔     |✘   |
-| shadow-color           | VECTOR4    | ✔     |✘   |
-| shadow-offset          | VECTOR2    | ✔     |✘   |
-| italics-angle          | FLOAT      | ✔     |✘   |
-| underline              | BOOLEAN    | ✔     |✘   |
-| weight                 | INTEGER    | ✔     |✘   |
-| font-detection-automati| BOOLEAN    | ✔     |✘   |
-| gradient-color         | VECTOR4    | ✔     |✘   |
-| gradient-start-point   | VECTOR2    | ✔     |✘   |
-| gradient-end-point     | VECTOR2    | ✔     |✘   |
-| shadow-size            |  FLOAT     | ✔     |✘   |
-| text-color             |  VECTOR4   | ✔     |✘   |
-
-@class TextActor
-@extends RenderableActor
- */
-