Merge pull request #2419 from NativeScript/hdeshev/doc-snippets-fixes

Fix unclosed snippet tags and duplicate snippets.

tests/app/application-settings.md

@@ -7,32 +7,32 @@ previous_url: /ApiReference/application-settings/HOW-TO
 ---
 # Application Settings
 Using application settings methods requires to load "application settings" module.
-<snippet id='application-settings-require'/>
+{%snippet application-settings-require%}
 
 ## Working with string, number and boolean values
 ### Set and get boolean value and provide default value in case it is not set
-<snippet id='application-settings-boolean'/>
+{%snippet application-settings-boolean%}
 
 ### Set and get string value
-<snippet id='application-settings-string'/>
+{%snippet application-settings-string%}
 
 ### Set and get numeric value.
 We use `toFixed()` here in order to avoid floating point errors - ex: `54.321` becoming `54.320999999537`.
 Beware the result of `toFixed()` is a string not a number therefore you cannot use `===` or `!==` when comparing with a number.
-<snippet id='application-settings-number'/>
+{%snippet application-settings-number%}
 
 ### Reading values that are not set before while providing default value
-<snippet id='application-settings-notset'/>
+{%snippet application-settings-notset%}
 
 ### Reading values that are not set before not providing default value
-<snippet id='application-settings-nodefault'/>
+{%snippet application-settings-nodefault%}
 
 ## Other functions
 ### Checking for existence of value for key
-<snippet id='application-settings-haskey'/>
+{%snippet application-settings-haskey%}
 
 ### Removing value for key
-<snippet id='application-settings-removekey'/>
+{%snippet application-settings-removekey%}
 
 ### Removing all values
-<snippet id='application-settings-clear'/>
+{%snippet application-settings-clear%}

tests/app/application.md

@@ -9,26 +9,26 @@ previous_url: /ApiReference/application/HOW-TO
 The Application module provides abstraction over the platform-specific Application implementations.
 It is the main BCL module and is required for other BCL modules to work properly.
 The default bootstrap.js implementation for each platform loads and initializes this module.
-<snippet id='application-require'/>
+{%snippet application-require%}
 
 The pre-required `app` module is used throughout the following code snippets.
 ### Checking the target platform
 Use the following code in case you need to check somewhere in your code the platform you are running against:
-<snippet id='application-app-check'/>
+{%snippet application-app-check%}
 
 ### Using the Android-specific implementation
 Accessing the Android-specific object instance (will be undefined if running on iOS)
 
-<snippet id='application-app-android'/>
+{%snippet application-app-android%}
 
 ### Using the Android Application context
-<snippet id='application-app-android-context'/>
+{%snippet application-app-android-context%}
 
 ### Tracking the current Activity
-<snippet id='application-app-android-current'/>
+{%snippet application-app-android-current%}
 
 ### Registering a Broadcast Receiver (Android)
-<snippet id='application-app-android-broadcast'/>
+{%snippet application-app-android-broadcast%}
 
 ### Adding a Notification Observer (iOS)
-<snippet id='application-ios-observer'/>
+{%snippet application-ios-observer%}

tests/app/camera.md

@@ -7,10 +7,10 @@ previous_url: /ApiReference/camera/HOW-TO
 ---
 # Camera module
 Using a camera requires the camera module.
-<snippet id='camera-require'/>
+{%snippet camera-require%}
 
 ### Taking a picture.
-<snippet id='camera-take-picture'/>
+{%snippet camera-take-picture%}
 
 ### Check for availability
-<snippet id='camera-is-availabile'/>
+{%snippet camera-is-availabile%}

tests/app/color.md

@@ -7,16 +7,16 @@ previous_url: /ApiReference/color/HOW-TO
 ---
 # Color
 Using Colors requires the "color" module.
-<snippet id='color-require'/>
+{%snippet color-require%}
 
 ### Creating a Color from a hex value.
-<snippet id='color-hex'/>
+{%snippet color-hex%}
 
 ### Creating a Color from a short hex value.
-<snippet id='color-hex-short'/>
+{%snippet color-hex-short%}
 
 ### Creating a Color from four ARGB values
-<snippet id='color-rgb'/>
+{%snippet color-rgb%}
 
 ### Creating a Color from a single ARGB value
-<snippet id='color-rgb-single'/>
+{%snippet color-rgb-single%}

tests/app/connectivity.md

@@ -7,10 +7,10 @@ previous_url: /ApiReference/connectivity/HOW-TO
 ---
 # Connectivity
 Obtaining connectivity information requires the "connectivity" module.
-<snippet id='connectivity-require'/>
+{%snippet connectivity-require%}
 
 ### Getting connection type
-<snippet id='connectivity-type'/>
+{%snippet connectivity-type%}
 
 ### Monitoring connection type.
-<snippet id='connectivity-monitoring'/>
+{%snippet connectivity-monitoring%}

tests/app/console.md

@@ -9,27 +9,27 @@ previous_url: /ApiReference/console/HOW-TO
 ### Logging
 Logging to the console does not require the "console" module since the console variable is global. It can be used anywhere within your code.
 You can log your message in several different categories.
-<snippet id='console-log'/>
+{%snippet console-log%}
 
 ### Time
 Begins counting a time span for a given name (key).
-<snippet id='console-time'/>
+{%snippet console-time%}
 
 Ends a previously started time span through the time method.
-<snippet id='console-timeend'/>
+{%snippet console-timeend%}
 
 ### Assert
 Asserts a boolean condition and prints a message in case the assert fails.
-<snippet id='console-assert'/>
+{%snippet console-assert%}
 
 ### Dir
 Prints the state of the specified object to the console.
-<snippet id='console-dir'/>
+{%snippet console-dir%}
 
 ### Dump
 Prints the state of the specified object to the console.
-<snippet id='console-dump'/>
+{%snippet console-dump%}
 
 ### Trace
 Prints the current stack trace in the console.
-<snippet id='console-trace'/>
+{%snippet console-trace%}

tests/app/data/observable-array-tests.ts

@@ -98,7 +98,7 @@ export var test_ObservableArray_joinShouldReturnStringWithAllItemsSeparatedWithC
     // >> observable-array-join
     var array = new observableArrayModule.ObservableArray([1, 2, 3]);
     var result = array.join();
-    // >> observable-array-join
+    // << observable-array-join
     TKUnit.assert(result === "1,2,3", "ObservableArray join() should return string with all items separated with comma!");
 };
 

tests/app/data/observable-array.md

@@ -6,109 +6,109 @@ description: "Examples for using observable-array"
 previous_url: /ApiReference/data/observable-array/HOW-TO
 ---
 # Observable Array module
-<snippet id='observable-array-require'/>
+{%snippet observable-array-require%}
 
 ### Create ObservableArray from array.
-<snippet id='observable-array-create'/>
+{%snippet observable-array-create%}
 
 ### Create ObservableArray from arguments.
-<snippet id='observable-array-arguments'/>
+{%snippet observable-array-arguments%}
 
 ### Create ObservableArray with specific length.
-<snippet id='observable-array-length'/>
+{%snippet observable-array-length%}
 
 ### Set ObservableArray length to new value.
-<snippet id='observable-array-newvalue'/>
+{%snippet observable-array-newvalue%}
 
 ### Get item at specified index using getItem(index) method.
-<snippet id='observable-array-getitem'/>
+{%snippet observable-array-getitem%}
 
 ### Set item at specified index using setItem(index, item) method.
-<snippet id='observable-array-setitem'/>
+{%snippet observable-array-setitem%}
 
 ### Set item at specified index using setItem(index, item) method and observe change event data.
-<snippet id='observable-array-eventdata'/>
+{%snippet observable-array-eventdata%}
 
 ### Use concat() method to combine ObservableArray with array.
-<snippet id='observable-array-combine'/>
+{%snippet observable-array-combine%}
 
 ### Use join() method to convert ObservableArray to comma separated string.
-<snippet id='observable-array-join'/>
+{%snippet observable-array-join%}
 
 ### Use join(separator) method to convert ObservableArray to string separated with specified separator.
-<snippet id='observable-array-join-separator'/>
+{%snippet observable-array-join-separator%}
 
 ### Use pop() method to remove the last element.
-<snippet id='observable-array-join-pop'/>
+{%snippet observable-array-join-pop%}
 
 ### Handle "change" event to know more info about the change after calling pop() method.
-<snippet id='observable-array-join-change'/>
+{%snippet observable-array-join-change%}
 
 ### Use push() method to add single element to the array.
-<snippet id='observable-array-push'/>
+{%snippet observable-array-push%}
 
 ### Handle "change" event to know more info about the change after calling push() method with single element.
-<snippet id='observable-array-change-push'/>
+{%snippet observable-array-change-push%}
 
 ### Use push() method to add multiple elements to the array.
-<snippet id='observable-array-push-multiple'/>
+{%snippet observable-array-push-multiple%}
 
 ### Handle "change" event to know more info about the change after calling push() method with multiple elements.
-<snippet id='observable-array-push-multiple-info'/>
+{%snippet observable-array-push-multiple-info%}
 
 ### Use push() method to add multiple elements from source array to the ObservableArray.
-<snippet id='observable-array-push-source'/>
+{%snippet observable-array-push-source%}
 
 ### Handle "change" event to know more info about the change after calling push() method with multiple elements from source array.
-<snippet id='observable-array-push-source-info'/>
+{%snippet observable-array-push-source-info%}
 
 ### Use reverse() method to reverse the elements order of the ObservableArray.
-<snippet id='observable-array-reverse'/>
+{%snippet observable-array-reverse%}
 
 ### Use shift() method to remove the first element of the array.
-<snippet id='observable-array-shift'/>
+{%snippet observable-array-shift%}
 
 ### Handle "change" event to know more info about the change after calling shift() method.
-<snippet id='observable-array-shift-change'/>
+{%snippet observable-array-shift-change%}
 
 ### Use slice() method to return array with all ObservableArray elements. 
-<snippet id='observable-array-slice'/>
+{%snippet observable-array-slice%}
 
 ### Use slice(star, end) method to return section of the array. 
-<snippet id='observable-array-slice-args'/>
+{%snippet observable-array-slice-args%}
 
 ### Use sort() method to sort the array. 
-<snippet id='observable-array-sort'/>
+{%snippet observable-array-sort%}
 
 ### Use sort(compareFunction) method to sort the array with your own comparing logic. 
-<snippet id='observable-array-sort-comparer'/>
+{%snippet observable-array-sort-comparer%}
 
 ### Use splice(start, deleteCount) method to delete elements in the array. 
-<snippet id='observable-array-splice'/>
+{%snippet observable-array-splice%}
 
 ### Handle "change" event to know more info about the change after calling splice(start, deleteCount) method.
-<snippet id='observable-array-splice-change'/>
+{%snippet observable-array-splice-change%}
 
 ### Use splice(start, deleteCount, ...arguments) method to remove and insert elements in the array. 
-<snippet id='observable-array-splice-args'/>
+{%snippet observable-array-splice-args%}
 
 ### Handle "change" event to know more info about the change after calling splice(start, deleteCount, ...arguments) method.
-<snippet id='observable-array-splice-args-change'/>
+{%snippet observable-array-splice-args-change%}
 
 ### Use unshift(item1, item2... itemN) method to insert elements from the start of the array.
-<snippet id='observable-array-unshift'/>
+{%snippet observable-array-unshift%}
 
 ### Handle "change" event to know more info about the change after calling unshift(item1, item2... itemN) method.
-<snippet id='observable-array-unshift-change'/>
+{%snippet observable-array-unshift-change%}
 
 ### Use indexOf(item) method to get the index of the desired item in the array.
-<snippet id='observable-array-indexof'/>
+{%snippet observable-array-indexof%}
 
 ### Use indexOf(item, fromIndex) method to get the index of the desired item in the array starting from specified index.
-<snippet id='observable-array-indexof-args'/>
+{%snippet observable-array-indexof-args%}
 
 ### Use lastIndexOf(item) method to get the last index of the desired item in the array.
-<snippet id='observable-array-lastindexof'/>
+{%snippet observable-array-lastindexof%}
 
 ### Use lastIndexOf(item, fromIndex) method to get the last index of the desired item in the array starting from specified index.
-<snippet id='observable-array-lastindexof-args'/>
+{%snippet observable-array-lastindexof-args%}

tests/app/data/observable.md

@@ -7,10 +7,10 @@ previous_url: /ApiReference/data/observable/HOW-TO
 ---
 # Observable
 Using Observable objects requires the "data/observable" module.
-<snippet id='observable-require'/>
+{%snippet observable-require%}
 
 ### Creating an Observable
-<snippet id='observable-creating'/>
+{%snippet observable-creating%}
 
 ### Responding to property changes
-<snippet id='observable-property-change'/>
+{%snippet observable-property-change%}

tests/app/data/virtual-array.md

@@ -6,7 +6,7 @@ description: "Examples for using virtual-array"
 previous_url: /ApiReference/data/virtual-array/HOW-TO
 ---
 # Virtual Array module
-<snippet id='virtual-array-require'/>
+{%snippet virtual-array-require%}
 
 ### Handle "itemsLoading" event to load items on demand using load() method.
 Use "length" property set via VirtualArray constructor to specify total number of items, 
@@ -14,11 +14,11 @@ Use "length" property set via VirtualArray constructor to specify total number o
 "itemsLoading" event to handle items request and "load()" method to copy items into the array.
 All already loaded items are cached in -memory and when "getItem()" method is called
 the array will raise "itemsLoading" event for still not loaded items.
-<snippet id='virtual-array-itemsloading'/>
+{%snippet virtual-array-itemsloading%}
 
 ### Handle "change" event when you load items using load() method.
-<snippet id='virtual-array-change'/>
+{%snippet virtual-array-change%}
 
 ### Handle "change" event when you increase "length" property.
-<snippet id='virtual-array-lenght'/>
+{%snippet virtual-array-lenght%}
 

tests/app/fetch.md

@@ -6,22 +6,22 @@ description: "Examples for using fetch"
 previous_url: /ApiReference/fetch/HOW-TO
 ---
 ### Get Response from URL
-<snippet id='fetch-response'/>
+{%snippet fetch-response%}
 
 ### Get string from URL
-<snippet id='fetch-string'/>
+{%snippet fetch-string%}
 
 ### Get JSON from URL
-<snippet id='fetch-json'/>
+{%snippet fetch-json%}
 
 ### Get FormData from URL
-<snippet id='fetch-formdata'/>
+{%snippet fetch-formdata%}
 
 ### Get Response status
-<snippet id='fetch-status-response'/>
+{%snippet fetch-status-response%}
 
 ### Get response headers
-<snippet id='fetch-headers-response'/>
+{%snippet fetch-headers-response%}
 
 ### Post JSON
-<snippet id='fetch-post-json'/>
+{%snippet fetch-post-json%}

tests/app/file-system.md

@@ -7,87 +7,87 @@ previous_url: /ApiReference/file-system/HOW-TO
 ---
 # File System
 Using the file system requires the FileSystem module.
-<snippet id='file-system-require'/>
+{%snippet file-system-require%}
 The pre-required `fs` module is used throughout the following code snippets.
 ## Path
 ### Normalize a Path
-<snippet id='file-system-normalize'/>
+{%snippet file-system-normalize%}
 
 ### Path Join
 Concatenate a path to a file by providing multiple path arguments.
-<snippet id='file-system-multiple-args'/>
+{%snippet file-system-multiple-args%}
 
 ### Get the Path Separator
-<snippet id='file-system-separator'/>
+{%snippet file-system-separator%}
 
 ### Get or Create a File With Path
 The following example writes some text to a file created for path.
 It will create a new file or overwrite an existing file.
-<snippet id='file-system-create'/>
+{%snippet file-system-create%}
 
 ### Get or Create a Folder With Path
-<snippet id='file-system-create-folder'/>
+{%snippet file-system-create-folder%}
 
 ## Create
 ### Writing a string to a File
 The following example writes some text to a file.
 It will create a new file or overwrite an existing file.
-<snippet id='file-system-write-string'/>
+{%snippet file-system-write-string%}
 
 ### Get or Create a File
-<snippet id='file-system-create-file'/>
+{%snippet file-system-create-file%}
 
 ### Get or Create a Folder
-<snippet id='file-system-get-folder'/>
+{%snippet file-system-get-folder%}
 
 ## Read
 ### Reading from a File
 The following example writes some text to a file and then reads it back.
-<snippet id='file-system-example-text'/>
+{%snippet file-system-example-text%}
 
 ### Reading/writing binary data from/to a File
-<snippet id='file-system-read-binary'/>
+{%snippet file-system-read-binary%}
 
 ### Getting the Known Folders
 Each app has several well known folders. This is how to access them:
-<snippet id='file-system-known-folders'/>
+{%snippet file-system-known-folders%}
 
 ### Getting Folder Contents
 Getting all files and folders within a folder:
-<snippet id='file-system-folders-content'/>
+{%snippet file-system-folders-content%}
 
 ### Enumerating Folder Contents
 Getting all folder entities in array may be slow with large number of files.
 Enumerating the folder entities would iterate the files one by one without blocking the UI.
-<snippet id='file-system-enum-content'/>
+{%snippet file-system-enum-content%}
 
 ### Getting Parent Folder
-<snippet id='file-system-parent'/>
+{%snippet file-system-parent%}
 
 ### Getting File Name and Extension
-<snippet id='file-system-extension'/>
+{%snippet file-system-extension%}
 
 ### Checking if a File Exists
-<snippet id='file-system-fileexists'/>
+{%snippet file-system-fileexists%}
 
 ### Checking if a Folder Exists
-<snippet id='file-system-folderexists'/>
+{%snippet file-system-folderexists%}
 
 ## Update
 ### Renaming a File
-<snippet id='file-system-renaming'/>
+{%snippet file-system-renaming%}
 
 ### Renaming a Folder
-<snippet id='file-system-renaming-folder'/>
+{%snippet file-system-renaming-folder%}
 
 ## Delete
 ### Removing a File
 To 'delete', 'remove' or 'unlink' a file use the file's remove method:
-<snippet id='file-system-remove-file'/>
+{%snippet file-system-remove-file%}
 
 ### Removing a Folder
-<snippet id='file-system-remove-folder'/>
+{%snippet file-system-remove-folder%}
 
 ### Clearing the Contents of a Folder
 The clear method removes all files within a folder.
-<snippet id='file-system-clear-folder'/>
+{%snippet file-system-clear-folder%}

tests/app/fps-meter.md

@@ -7,7 +7,7 @@ previous_url: /ApiReference/fps-meter/HOW-TO
 ---
 # Frames-per-second meter
 Logging frames-per-second statistics for your app requires the "fps-meter" module.
-<snippet id='fps-meter-require'/>
+{%snippet fps-meter-require%}
 
 ### Start and stop logging
-<snippet id='fps-meter-logging'/>
+{%snippet fps-meter-logging%}

tests/app/http.md

@@ -7,31 +7,31 @@ previous_url: /ApiReference/http/HOW-TO
 ---
 # Http module
 Using http methods requires to load "http" module.
-<snippet id='http-require'/>
+{%snippet http-require%}
 
 ### Get string from URL
-<snippet id='http-get-string'/>
+{%snippet http-get-string%}
 
 ### Get JSON from URL
-<snippet id='http-get-json'/>
+{%snippet http-get-json%}
 
 ### Get Image from URL
-<snippet id='http-get-image'/>
+{%snippet http-get-image%}
 
 ### Get File from URL. By default the file will be saved in Documents folder.
-<snippet id='http-get-urlfile'/>
+{%snippet http-get-urlfile%}
 
 ### Get content as File from URL. You can specify where the file should be saved.
-<snippet id='http-get-urlfile-content'/>
+{%snippet http-get-urlfile-content%}
 
 ### Get response status code
-<snippet id='http-get-response'/>
+{%snippet http-get-response%}
 
 ### Get response headers
-<snippet id='http-get-response-headers'/>
+{%snippet http-get-response-headers%}
 
 ### Get response content
-<snippet id='http-get-response-content'/>
+{%snippet http-get-response-content%}
 
 ### Post JSON
-<snippet id='http-post-json'/>
+{%snippet http-post-json%}

tests/app/image-source.md

@@ -7,21 +7,21 @@ previous_url: /ApiReference/image-source/HOW-TO
 ---
 # Image source
 Using the image source requires the image-source module.
-<snippet id='imagesource-require'/>
+{%snippet imagesource-require%}
 The pre-required `imageSource` module is used throughout the following code snippets.
 We also use fs module defined as follows:
-<snippet id='imagesource-require-alt'/>
+{%snippet imagesource-require-alt%}
 
 ## Loading and saving images
 ### Load image using resource name
 This is similar to loading Bitmap from `R.drawable.logo` on Android or calling `[UIImage imageNamed@"logo"]` on iOS
-<snippet id='imagesource-resname'/>
+{%snippet imagesource-resname%}
 
 ### Load image from URL
-<snippet id='imagesource-load-url'/>
+{%snippet imagesource-load-url%}
 
 ### Save image source to PNG or JPG file
-<snippet id='imagesource-save-to'/>
+{%snippet imagesource-save-to%}
 
 ### Load image from a local file
-<snippet id='imagesource-load-local'/>
+{%snippet imagesource-load-local%}

tests/app/location.md

@@ -7,23 +7,23 @@ previous_url: /ApiReference/location/HOW-TO
 ---
 # Location
 Using the location requires the Location module.
-<snippet id='location-require'/>
+{%snippet location-require%}
 
 ## Other functions
 ### Test are location services available for this device
-<snippet id='location-funcs'/>
+{%snippet location-funcs%}
 
 ### Get distance between two locations
-<snippet id='location-distance'/>
+{%snippet location-distance%}
 
 ## Getting location
 ### Receive continuous location updates
-<snippet id='location-updates'/>
+{%snippet location-updates%}
 
 ### Get last known location
-<snippet id='location-last-known'/>
+{%snippet location-last-known%}
 
 ### Get location once
 if there is `options.timeout` you will receive error on timeout. If `options.timeout` is 0 then the result is the same as the result from `LocationManager.lastKnownLocation`
 and there will be no wait. You can use `options.maximumAge` to specify you don't want to receive locations older than specified time in ms.
-<snippet id='location-timeour'/>
+{%snippet location-timeour%}

tests/app/platform.md

@@ -8,7 +8,7 @@ previous_url: /ApiReference/platform/HOW-TO
 # Platform
 Information about the current device and screen are defined in the platform module
 ### Declaring platform module to be available for further usage.
-<snippet id='platform-require'/>
+{%snippet platform-require%}
 
 ### Getting information about the current device:
-<snippet id='platform-current'/>
+{%snippet platform-current%}

tests/app/text/formatted-string.md

@@ -7,7 +7,7 @@ previous_url: /ApiReference/text/formatted-string/HOW-TO
 ---
 # Formatted String
 Using a formatted string requires loading formatted-string and span module.
-<snippet id='formatted-string-require'/>
+{%snippet formatted-string-require%}
 
 ### How to set formatted text content for a label
-<snippet id='formatted-string-set'/>
+{%snippet formatted-string-set%}

tests/app/timer.md

@@ -7,19 +7,19 @@ previous_url: /ApiReference/timer/HOW-TO
 ---
 # Timer module
 ### How to require timer module
-<snippet id='timer-require'/>
+{%snippet timer-require%}
 
 ### Evaluates an expression after 0 milliseconds.
-<snippet id='timer-set-zero'/>
+{%snippet timer-set-zero%}
 
 ### Evaluates an expression after a specified number of milliseconds.
-<snippet id='timer-set-fivehundred'/>
+{%snippet timer-set-fivehundred%}
 
 ### Cancels the evaluation with the clearTimeout method.
-<snippet id='timer-set-twothousands'/>
+{%snippet timer-set-twothousands%}
 
 ### Evaluates an expression each time a specified number of milliseconds has elapsed.
-<snippet id='timer-set-expression'/>
+{%snippet timer-set-expression%}
 
 ### Cancel the interval previously started using the setInterval method.
-<snippet id='timer-set-interval'/>
+{%snippet timer-set-interval%}

tests/app/trace.md

@@ -7,13 +7,13 @@ previous_url: /ApiReference/trace/HOW-TO
 ---
 # Trace
 Tracing information about your app requires the "trace" module.
-<snippet id='trace-require'/>
+{%snippet trace-require%}
 
 ### Tracing all categories of events.
-<snippet id='trace-all-categories'/>
+{%snippet trace-all-categories%}
 
 ### Tracing specific categories of events.
-<snippet id='trace-specific-categories'/>
+{%snippet trace-specific-categories%}
 
 ### Write your own trace message.
-<snippet id='trace-message'/>
+{%snippet trace-message%}

tests/app/ui/action-bar/action-bar.md

@@ -7,7 +7,7 @@ previous_url: /ApiReference/ui/action-bar/HOW-TO
 ---
 # ActionBar
 Using a ActionBar requires the action-bar module.
-<snippet id='actionbar-common-require'/>
+{%snippet actionbar-common-require%}
 
 
 ## Setting Title and Icon

tests/app/ui/activity-indicator/activity-indicator.md

@@ -7,7 +7,7 @@ previous_url: /ApiReference/ui/activity-indicator/HOW-TO
 ---
 # ActivityIndicator
 Using the activity indicator requires the ActivityIndicator module.
-<snippet id='activity-indicator-require'/>
+{%snippet activity-indicator-require%}
 
 ### Binding the activity indicator busy property to a view-model property.
 ``` XML
@@ -16,7 +16,7 @@ Using the activity indicator requires the ActivityIndicator module.
 </Page>
 ```
 ### Creating an activity indicator
-<snippet id='activity-indicator-create'/>
+{%snippet activity-indicator-create%}
 
 ### Showing activity indicator while image is loading
-<snippet id='activity-indicator-loading'/>
+{%snippet activity-indicator-loading%}

tests/app/ui/animation/animation.md

@@ -7,19 +7,19 @@ previous_url: /ApiReference/ui/animation/HOW-TO
 ---
 # Animation
 Animating view properties requires the "ui/animation" module.
-<snippet id='animation-require'/>
+{%snippet animation-require%}
 
 # Animating properties
-<snippet id='animation-properties'/>
+{%snippet animation-properties%}
 
 # Cancelling animation
-<snippet id='animation-cancel'/>
+{%snippet animation-cancel%}
 
 # Chaining animations
-<snippet id='animation-chaining'/>
+{%snippet animation-chaining%}
 
 # Reusing animations
-<snippet id='animation-reusing'/>
+{%snippet animation-reusing%}
 
 # Animating multiple views simultaneously
-<snippet id='animation-multiple-views'/>
+{%snippet animation-multiple-views%}

tests/app/ui/border/border.md

@@ -7,7 +7,7 @@ previous_url: /ApiReference/ui/border/HOW-TO
 ---
 # Border
 Using borders requires the Border module.
-<snippet id='border-require'/>
+{%snippet border-require%}
 
 ### Declaring a Border.
 ``` XML

tests/app/ui/button/button.md

@@ -8,10 +8,10 @@ previous_url: /ApiReference/ui/button/HOW-TO
 # Button
 ### Declaring button module
 Button module is required to use any button feature.
-<snippet id='button-require'/>
+{%snippet button-require%}
 
 Other frequently used modules when working with buttons include:
-<snippet id='button-require-others'/>
+{%snippet button-require-others%}
 
 ### Attaching event handler for the button tap event.
 ``` XML
@@ -20,13 +20,13 @@ Other frequently used modules when working with buttons include:
 </Page>
 ```
 ### Creating a button
-<snippet id='button-create'/>
+{%snippet button-create%}
 
 ### Setting the text of a button
-<snippet id='button-settext'/>
+{%snippet button-settext%}
 
 ### Responding to the tap event
-<snippet id='button-tap'/>
+{%snippet button-tap%}
 
 ### Binding text property directly to model
-<snippet id='button-bind'/>
+{%snippet button-bind%}

tests/app/ui/date-picker/date-picker.md

@@ -7,7 +7,7 @@ previous_url: /ApiReference/ui/date-picker/HOW-TO
 ---
 # DatePicker
 Using a DatePicker requires the "ui/date-picker" module.
-<snippet id='date-picker-require'/>
+{%snippet date-picker-require%}
 
 ## Configuring a DatePicker
-<snippet id='date-picker-configure'/>
+{%snippet date-picker-configure%}

tests/app/ui/dialogs/dialogs.md

@@ -7,19 +7,19 @@ previous_url: /ApiReference/ui/dialogs/HOW-TO
 ---
 # Dialogs
 Displaying dialogs requires the "ui/dialogs" module.
-<snippet id='dialog-require'/>
+{%snippet dialog-require%}
 
 ### Action
-<snippet id='dialog-action'/>
+{%snippet dialog-action%}
 
 ### Confirm
-<snippet id='dialog-confirm'/>
+{%snippet dialog-confirm%}
 
 ### Alert
-<snippet id='dialog-alert'/>
+{%snippet dialog-alert%}
 
 ### Login
-<snippet id='dialog-login'/>
+{%snippet dialog-login%}
 
 ### Prompt
-<snippet id='dialog-prompt'/>
+{%snippet dialog-prompt%}

tests/app/ui/frame/frame.md

@@ -7,16 +7,16 @@ previous_url: /ApiReference/ui/frame/HOW-TO
 ---
 # Frame
 To perform navigation, you will need a reference to the topmost frame of the application.
-<snippet id='frame-require'/>
+{%snippet frame-require%}
 
 ### Navigating to a Module
-<snippet id='frame-navigating'/>
+{%snippet frame-navigating%}
 
 ### Navigating with a Factory Function
-<snippet id='frame-factory-func'/>
+{%snippet frame-factory-func%}
 
 ### Navigating with NavigationEntry
-<snippet id='frame-naventry'/>
+{%snippet frame-naventry%}
 
 ### Navigating Back
-<snippet id='frame-back'/>
+{%snippet frame-back%}

tests/app/ui/gestures/gestures.md

@@ -7,58 +7,58 @@ previous_url: /ApiReference/ui/gestures/HOW-TO
 ---
 # Gestures
 Detecting user gestures requires the "ui/gestures" module.
-<snippet id='gestures-require'/>
+{%snippet gestures-require%}
 
 ### Double Tap
-<snippet id='gestures-double-tap'/>
+{%snippet gestures-double-tap%}
 
 ### Double Tap
-<snippet id='gestures-double-tap-alt'/>
+{%snippet gestures-double-tap-alt%}
 
 ### Long Press
-<snippet id='gestures-long-press'/>
+{%snippet gestures-long-press%}
 
 ### Long Press
-<snippet id='gestures-long-press-alt'/>
+{%snippet gestures-long-press-alt%}
 
 ### Pan
-<snippet id='gestures-pan'/>
+{%snippet gestures-pan%}
 
 ### Pan
-<snippet id='gestures-pan-alt'/>
+{%snippet gestures-pan-alt%}
 
 ### Pinch
-<snippet id='gestures-pan-pinch'/>
+{%snippet gestures-pan-pinch%}
 
 ### Pinch
-<snippet id='gestures-pan-pinch-alt'/>
+{%snippet gestures-pan-pinch-alt%}
 
 ### Rotation
-<snippet id='gestures-rotation'/>
+{%snippet gestures-rotation%}
 
 ### Rotation
-<snippet id='gestures-rotation-alt'/>
+{%snippet gestures-rotation-alt%}
 
 ### Swipe
-<snippet id='gestures-swipe'/>
+{%snippet gestures-swipe%}
 
 ### Swipe
-<snippet id='gestures-swipe-alt'/>
+{%snippet gestures-swipe-alt%}
 
 ### Tap
-<snippet id='gestures-tap'/>
+{%snippet gestures-tap%}
 
 ### Tap
-<snippet id='gestures-tap-alt'/>
+{%snippet gestures-tap-alt%}
 
 ### Stop observing
-<snippet id='gestures-stop-observe'/>
+{%snippet gestures-stop-observe%}
 
 ### Multiple gestures
-<snippet id='gestures-multiple'/>
+{%snippet gestures-multiple%}
 
 ### Multiple gestures as comma separated string
-<snippet id='gestures-string'/>
+{%snippet gestures-string%}
 
 ### Events combined with gestures as comma separated string
-<snippet id='gestures-events-string'/>
+{%snippet gestures-events-string%}

tests/app/ui/html-view/htm-view.md

@@ -7,7 +7,7 @@ previous_url: /ApiReference/ui/html-view/HOW-TO
 ---
 # HtmlView
 Using a HtmlView requires the html-view module.
-<snippet id='htmlview-require'/>
+{%snippet htmlview-require%}
 
 ### Declaring a HtmlView.
 ``` XML
@@ -16,7 +16,7 @@ Using a HtmlView requires the html-view module.
  </Page>
 ```
 ### Creating a HtmlView
-<snippet id='htmlview-create'/>
+{%snippet htmlview-create%}
 
 ### Using HtmlView
-<snippet id='htmlview-using'/>
+{%snippet htmlview-using%}

tests/app/ui/image-cache/image-cache.md

@@ -7,7 +7,7 @@ previous_url: /ApiReference/ui/image-cache/HOW-TO
 ---
 # ImageCache
 Using the ImageCache requires the "ui/image-cache" module.
-<snippet id='image-cache-require'/>
+{%snippet image-cache-require%}
 
 ### Requesting Images
-<snippet id='image-cache-request-images'/>
+{%snippet image-cache-request-images%}

tests/app/ui/image/image.md

@@ -7,7 +7,7 @@ previous_url: /ApiReference/ui/image/HOW-TO
 ---
 # Image
 Using an image requires the Image module to be loaded.
-<snippet id='img-require'/>
+{%snippet img-require%}
 
 Binding the image source property to a view-model property.
 ``` XML
@@ -25,16 +25,16 @@ Binding the image source property to a view-model property.
 </Page>
 ```
 ### Creating an image and setting its source
-<snippet id='img-create'/>
+{%snippet img-create%}
 
 ### Creating an image and setting its src
-<snippet id='img-create-src'/>
+{%snippet img-create-src%}
 
 ### Creating an image and setting its src to a file within the application
-<snippet id='img-create-local'/>
+{%snippet img-create-local%}
 
 ### Creating an image and setting its src to Data URI
-<snippet id='img-create-datauri'/>
+{%snippet img-create-datauri%}
 
 ### Setting image stretching
-<snippet id='img-set-stretch'/>
+{%snippet img-set-stretch%}

tests/app/ui/label/label.md

@@ -7,7 +7,7 @@ previous_url: /ApiReference/ui/label/HOW-TO
 ---
 # Label
 Using a label requires the Label module.
-<snippet id='label-require'/>
+{%snippet label-require%}
 
 ### Binding the Label text property to a view-model property.
 ``` XML
@@ -16,19 +16,19 @@ Using a label requires the Label module.
 </Page>
 ```
 ### Setting the  label text content
-<snippet id='label-settext'/>
+{%snippet label-settext%}
 
 ### Turning on text wrapping for a label
-<snippet id='label-textwrap'/>
+{%snippet label-textwrap%}
 
 ### Styling a label via css class
-<snippet id='label-cssclass'/>
+{%snippet label-cssclass%}
 
 ### Styling a label via css type
-<snippet id='label-cssclass-type'/>
+{%snippet label-cssclass-type%}
 
 ### Styling a label via css control identifier
-<snippet id='label-css-identifier'/>
+{%snippet label-css-identifier%}
 
 ### Binding text property of a label to an observable model
-<snippet id='label-observable'/>
+{%snippet label-observable%}

tests/app/ui/layouts/absolute-layout.md

@@ -7,7 +7,7 @@ previous_url: /ApiReference/ui/layouts/absolute-layout/HOW-TO
 ---
 # AbsoluteLayout
 Using an AbsoluteLayout requires the AbsoluteLayout module.
-<snippet id='absolute-layout-require'/>
+{%snippet absolute-layout-require%}
 
 ### Declaring an AbsoluteLayout
 ``` XML
@@ -19,4 +19,4 @@ Using an AbsoluteLayout requires the AbsoluteLayout module.
 ```
 
 ## Creating and populating a AbsoluteLayout with children
-<snippet id='absolute-layout-populating'/>
+{%snippet absolute-layout-populating%}

tests/app/ui/layouts/dock-layout-tests.ts

@@ -6,9 +6,9 @@ import testModule = require("../../ui-test");
 import layoutHelper = require("./layout-helper");
 import commonTests = require("./common-layout-tests");
 
-// >> <snippet id='dock-layout-require'/>
+// >> dock-layout-require
 import dockModule = require("ui/layouts/dock-layout");
-// << <snippet id='dock-layout-require'/>
+// << dock-layout-require
 
 // >> dock-layout-others
 import enums = require("ui/enums");

tests/app/ui/layouts/dock-layout.md

@@ -7,7 +7,7 @@ previous_url: /ApiReference/ui/layouts/dock-layout/HOW-TO
 ---
 # DockLayout
 Using a DockLayout requires the DockLayout module.
-<snippet id='dock-layout-require'/>
+{%snippet dock-layout-require%}
 
 ### Declaring a DockLayout
 ``` XML
@@ -23,16 +23,16 @@ Using a DockLayout requires the DockLayout module.
 ```
 
 Other frequently used modules when working with a DockLayout include:
-<snippet id='dock-layout-others'/>
+{%snippet dock-layout-others%}
 
 ## Create DockLayout
-<snippet id='dock-layout-create'/>
+{%snippet dock-layout-create%}
 
 ## Add child view to layout
-<snippet id='dock-layout-addchild'/>
+{%snippet dock-layout-addchild%}
 
 ## Remove child view from layout
-<snippet id='dock-layout-removechild'/>
+{%snippet dock-layout-removechild%}
 
 ## Setting the dock roperty
-<snippet id='dock-layout-setdocl'/>
+{%snippet dock-layout-setdocl%}

tests/app/ui/layouts/grid-layout.md

@@ -7,7 +7,7 @@ previous_url: /ApiReference/ui/layouts/grid-layout/HOW-TO
 ---
 # GridLayout
 Using a GridLayout requires the GridLayout module.
-<snippet id='grid-layout-require'/>
+{%snippet grid-layout-require%}
 
 ### Declaring a GridLayout
 ``` XML
@@ -21,19 +21,19 @@ Using a GridLayout requires the GridLayout module.
 ```
 
 ## Add views to grid layout
-<snippet id='grid-layout-addviews'/>
+{%snippet grid-layout-addviews%}
 
 ## Set column property on views - btn1 in first column, btn2 is second and btn3 in third
-<snippet id='grid-layout-setcolumn'/>
+{%snippet grid-layout-setcolumn%}
 
 ## Set row property on btn4.
-<snippet id='grid-layout-setrow'/>
+{%snippet grid-layout-setrow%}
 
 ## Set columnSpan property on btn4 to stretch into all columns
-<snippet id='grid-layout-columnspan'/>
+{%snippet grid-layout-columnspan%}
 
 ## Create ItemSpec for columns and rows 3 columns - 80px, *, auto size and 2 rows - 100px and auto size
-<snippet id='grid-layout-itemspec'/>
+{%snippet grid-layout-itemspec%}
 
 ## Add columns and rows to GridLayout
-<snippet id='grid-layout-add-rowscols'/>
+{%snippet grid-layout-add-rowscols%}

tests/app/ui/layouts/stack-layout.md

@@ -7,7 +7,7 @@ previous_url: /ApiReference/ui/layouts/stack-layout/HOW-TO
 ---
 # StackLayout
 Using a StackLayout requires the StackLayout module.
-<snippet id='stack-layout-require'/>
+{%snippet stack-layout-require%}
 
 ### Declaring a StackLayout.
 ``` XML
@@ -19,14 +19,14 @@ Using a StackLayout requires the StackLayout module.
 ```
 
 ## Create StackLayout
-<snippet id='stack-layout-new'/>
+{%snippet stack-layout-new%}
  
 ## Add child view to layout
-<snippet id='stack-layout-addchild'/>
+{%snippet stack-layout-addchild%}
 
 ## Remove child view from layout
-<snippet id='stack-layout-remove'/>
+{%snippet stack-layout-remove%}
 
 ## Change layout orientation to Horizontal
-<snippet id='stack-layout-horizontal'/>
+{%snippet stack-layout-horizontal%}
 

tests/app/ui/layouts/wrap-layout.md

@@ -7,7 +7,7 @@ previous_url: /ApiReference/ui/layouts/wrap-layout/HOW-TO
 ---
 # WrapLayout
 Using a WrapLayout requires the WrapLayout module.
-<snippet id='wrap-layout-require'/>
+{%snippet wrap-layout-require%}
 
 ### Declaring a WrapLayout.
 ``` XML
@@ -22,10 +22,10 @@ Using a WrapLayout requires the WrapLayout module.
 ```
 
 Other frequently used modules when working with a WrapLayout include:
-<snippet id='wrap-layout-others'/>
+{%snippet wrap-layout-others%}
 
 ## Creating a WrapLayout
-<snippet id='wrap-layout-new'/>
+{%snippet wrap-layout-new%}
 
 ## Setting the orientation of a wrap-layout.
-<snippet id='wrap-layout-orientation'/>
+{%snippet wrap-layout-orientation%}

tests/app/ui/list-picker/list-picker.md

@@ -7,10 +7,10 @@ previous_url: /ApiReference/ui/list-picker/HOW-TO
 ---
 # ListPicker
 Using a ListPicker requires the "ui/list-picker" module.
-<snippet id='article-require-listpicker-module'/>
+{%snippet article-require-listpicker-module%}
 ## Creating a ListPicker
-<snippet id='article-create-listpicker'/>
+{%snippet article-create-listpicker%}
 ## Binding listPicker.items
-<snippet id='article-binding-listpickeritems'/>
+{%snippet article-binding-listpickeritems%}
 ## Selecting an item programmatically
-<snippet id='article-selecting-item'/>
+{%snippet article-selecting-item%}

tests/app/ui/list-view/list-view-tests.ts

@@ -13,10 +13,10 @@ import { Page } from "ui/page";
 import listViewModule = require("ui/list-view");
 // << article-require-listview-module
 
-// >> article-require-modules
+// >> article-require-modules-listview
 import observableArray = require("data/observable-array");
 import labelModule = require("ui/label");
-// << article-require-modules
+// << article-require-modules-listview
 
 // >> article-item-tap
 function listViewItemTap(args) {

tests/app/ui/list-view/list-view.md

@@ -7,9 +7,9 @@ previous_url: /ApiReference/ui/list-view/HOW-TO
 ---
 # ListView
 Using a ListView requires the ListView module.
-<snippet id='article-require-listview-module'/>
+{%snippet article-require-listview-module%}
 Other modules which will be used in the code samples in this article:
-<snippet id='article-require-modules'/>
+{%snippet article-require-modules-listview%}
 ### Binding the ListView items property to collection in the view-model.
 ``` XML
 <Page>
@@ -22,14 +22,14 @@ Other modules which will be used in the code samples in this article:
   {%raw%}<ListView items="{{ myItems }}" itemTap="listViewItemTap" />{%endraw%}
 </Page>
 ```
-<snippet id='article-item-tap'/>
+{%snippet article-item-tap%}
 ### Attaching event handler for the ListView loadMoreItems event.
 ``` XML
 <Page>
  {%raw%}<ListView items="{{ myItems }}" loadMoreItems="listViewLoadMoreItems" />{%endraw%}
 </Page>
 ```
-<snippet id='article-load-items'>
+{%snippet article-load-items%}
 ### Define the ListView itemTemplate property.
 ``` XML
 <Page>
@@ -41,26 +41,26 @@ Other modules which will be used in the code samples in this article:
 </Page>
 ```
 ### Creating a ListView
-<snippet id='article-create-listview'/>
+{%snippet article-create-listview%}
 ### Using ListView with Array
 The itemLoading event is used to create the UI for each item that is shown in the ListView.
-<snippet id='article-listview-array'/>
+{%snippet article-listview-array%}
 
 > Note, that changing the array after the list view is shown will not update the UI.
 You can force-update the UI using the refresh() method.
-<snippet id='article-change-refresh-listview'/>
+{%snippet article-change-refresh-listview%}
 
 ### Using ListView with ObservableArray
-<snippet id='article-listview-observablearray'/>
+{%snippet article-listview-observablearray%}
 
 > When using ObservableArray the list view will be automatically updated when items are added or removed form the array.
-<snippet id='article-push-in-observablearray'/>
+{%snippet article-push-in-observablearray%}
 
 ## Responding to other events
 ### ItemTap event
 The event will be raise when an item inside the ListView is tapped.
-<snippet id='article-itemtap-event'/>
+{%snippet article-itemtap-event%}
 ### LoadMoreItems event
 The event will be raised when the ListView is scrolled so that the last item is visible.
 This even is intended to be used to add additional data in the ListView.
-<snippet id='article-loadmoreitems-event'/>
+{%snippet article-loadmoreitems-event%}

tests/app/ui/page/page.md

@@ -7,17 +7,17 @@ previous_url: /ApiReference/ui/page/HOW-TO
 ---
 # Page
 Using a page requires the Page module.
-<snippet id='article-require-page/module'/>
+{%snippet article-require-page/module%}
 ### Attaching event handler for the Page loaded event to set bindingContext.
 ``` XML
 <Page loaded="pageLoaded">
   {%raw%}<Label text="{{ name }}" />{%endraw%}
 </Page>
 ```
-<snippet id='article-set-bindingcontext'/>
+{%snippet article-set-bindingcontext%}
 ### Creating and navigating to the created page.
-<snippet id='artivle-create-navigate-to-page'/>
+{%snippet artivle-create-navigate-to-page%}
 ### Navigating backward is as simple as calling a single method.
-<snippet id='article-navigating-backward'/>
+{%snippet article-navigating-backward%}
 ### Pass data to the new page.
-<snippet id='article-pass-data'/>
+{%snippet article-pass-data%}

tests/app/ui/placeholder/placeholder.md

@@ -7,11 +7,11 @@ previous_url: /ApiReference/ui/placeholder/HOW-TO
 ---
 # Placeholder
 Using the placeholder requires the Placeholder module.
-<snippet id='article-require-placeholder-module'/>
+{%snippet article-require-placeholder-module%}
 Creating native view for the Placeholder using creatingView event.
 ``` XML
 <Page>
   {%raw%}<Placeholder creatingView="creatingView" />{%endraw%}
 </Page>
 ```
-<snippet id='article-creating-view'/>
+{%snippet article-creating-view%}

tests/app/ui/progress/progress.md

@@ -7,7 +7,7 @@ previous_url: /ApiReference/ui/progress/HOW-TO
 ---
 # Progress
 Using the progress view requires the Progress module.
-<snippet id='article-require-progress-module'/>
+{%snippet article-require-progress-module%}
 Binding the Progress value property to a view-model property.
 ``` XML
 <Page loaded="pageLoaded">
@@ -22,6 +22,6 @@ function pageLoaded(args) {
 exports.pageLoaded = pageLoaded;
 ```
 ### Creating a progress view
-<snippet id='article-create-progress-view'>
+{%snippet article-create-progress-view%}
 ### Setting up the progress view
-<snippet id='article-set-value'/>
+{%snippet article-set-value%}

tests/app/ui/repeater/repeater-tests.ts

@@ -14,10 +14,10 @@ import { Label } from "ui/label";
 import repeaterModule = require("ui/repeater");
 // << article-require-repeater-module
 
-// >> article-require-modules
+// >> article-require-modules-repeater
 import observableArray = require("data/observable-array");
 import labelModule = require("ui/label");
-// << article-require-modules
+// << article-require-modules-repeater
 
 var ASYNC = 0.2;
 var FEW_ITEMS = [0, 1, 2];

tests/app/ui/repeater/repeater.md

@@ -7,9 +7,9 @@ previous_url: /ApiReference/ui/repeater/HOW-TO
 ---
 # Repeater
 Using a Repeater requires the repeater module.
-<snippet id='article-require-repeater-module'/>
+{%snippet article-require-repeater-module%}
 Other modules which will be used in the code samples in this article:
-<snippet id='article-require-modules'/>
+{%snippet article-require-modules-repeater%}
 ### Binding the Repeater items property to collection in the view-model.
 ``` XML
 <Page>
@@ -52,13 +52,13 @@ Other modules which will be used in the code samples in this article:
 </Page>
 ```
 ### Using Repeater with Array
-<snippet id='article-repeater-with-array'/>
+{%snippet article-repeater-with-array%}
 > Note, that changing the array after the repeater is shown will not update the UI.
 You can force-update the UI using the refresh() method.
-<snippet id='artcle-array-push-element'/>
+{%snippet artcle-array-push-element%}
 ### Using Repeater with different layout.
-<snippet id='article-repeater-layout'/>
+{%snippet article-repeater-layout%}
 ### Using Repeater with ObservableArray
-<snippet id='article-repeater-observablearray'/>
+{%snippet article-repeater-observablearray%}
 > When using ObservableArray the repeater will be automatically updated when items are added or removed form the array.
-<snippet id='article-push-to-observablearray'/>
+{%snippet article-push-to-observablearray%}

tests/app/ui/scroll-view/scroll-view.md

@@ -7,7 +7,7 @@ previous_url: /ApiReference/ui/scroll-view/HOW-TO
 ---
 # ScrollView
 Using a ScrollView requires the ScrollView module.
-<snippet id='article-require-scrollview-module'/>
+{%snippet article-require-scrollview-module%}
 ### Declaring the ScrollView
 ``` XML
 <Page>
@@ -17,4 +17,4 @@ Using a ScrollView requires the ScrollView module.
 </Page>
 ```
 ### Creating a ScrollView
-<snippet id='article-creating-scrollview'/>
+{%snippet article-creating-scrollview%}

tests/app/ui/search-bar/search-bar.md

@@ -7,8 +7,8 @@ previous_url: /ApiReference/ui/search-bar/HOW-TO
 ---
 # SearchBar
 Using the SearchBar requires the "ui/search-bar" module.
-<snippet id='article-require-searchbar-module'/>
+{%snippet article-require-searchbar-module%}
 ### Creating a SearchBar
-<snippet id='article-creating-searchbar'/>
+{%snippet article-creating-searchbar%}
 ### Searching
-<snippet id='article-searching' />
+{%snippet article-searching%}

tests/app/ui/segmented-bar/segmented-bar.md

@@ -7,9 +7,9 @@ previous_url: /ApiReference/ui/segmented-bar/HOW-TO
 ---
 # SegmentedBar
 Using a SegmentedBar requires the "ui/segmented-bar" module.
-<snippet id='article-require-segmentedbar-module'/>
+{%snippet article-require-segmentedbar-module%}
 ## Creating a SegmentedBar
-<snippet id='article-create-segmentedbar'/>
+{%snippet article-create-segmentedbar%}
 ``` XML
 <SegmentedBar>
   <SegmentedBar.items>
@@ -22,6 +22,6 @@ Using a SegmentedBar requires the "ui/segmented-bar" module.
 ### Creating segmentedBar.items
 It is important that an items array gets created and filled with
 items first and then assigned to the segmented bar.
-<snippet id='article-creating-segmentedbar-items'/>
+{%snippet article-creating-segmentedbar-items%}
 ### Selecting an item programmatically
-<snippet id='artcile-selecting-item'/>
+{%snippet artcile-selecting-item%}

tests/app/ui/slider/slider.md

@@ -7,7 +7,7 @@ previous_url: /ApiReference/ui/slider/HOW-TO
 ---
 # Slider
 Using a slider requires the Slider module.
-<snippet id='article-require-slider'/>
+{%snippet article-require-slider%}
 ### Binding the Progress and Slider value properties to a observable view-model property.
 ``` XML
 <Page loaded="pageLoaded">
@@ -17,10 +17,10 @@ Using a slider requires the Slider module.
  </StackLayout>
 </Page>
 ```
-<snippet id='article-binding-slider-properties'/>
+{%snippet article-binding-slider-properties%}
 ### Creating a slider
-<snippet id='article-creating-slider'/>
+{%snippet article-creating-slider%}
 ### Setting the slider value and bounds
-<snippet id='article-setting-slider-values'/>
+{%snippet article-setting-slider-values%}
 ### Binding value property to a model
-<snippet id='article-binding-value-property'/>
+{%snippet article-binding-value-property%}

tests/app/ui/styling/styling.md

@@ -7,14 +7,14 @@ previous_url: ApiReference/ui/styling/HOW-TO
 ---
 # Styling
 ### Setting CSS to a page
-<snippet id='article-setting-css-page'/>
+{%snippet article-setting-css-page%}
 ## Using CSS selectors
 ### Using type selector
-<snippet id='article-using-type-selector'/>
+{%snippet article-using-type-selector%}
 ### Using class selector
-<snippet id='article-using-class-selector' />
+{%snippet article-using-class-selector%}
 ### Using id selector
-<snippet id='article-using-id-selector'/>
+{%snippet article-using-id-selector%}
 ### Using state selector
-<snippet id='article-using-state-selector'/>
+{%snippet article-using-state-selector%}
 For information and example how to use style properties please refer to special [**Styling**](../../../styling.md) topic. 

tests/app/ui/switch/switch.md

@@ -7,7 +7,7 @@ previous_url: /ApiReference/ui/switch/HOW-TO
 ---
 # Switch
 Using a switch requires the Switch module.
-<snippet id='article-require-switch'/>
+{%snippet article-require-switch%}
 ### Binding the Switch checked property and Button isEnabled property to a observable view-model property.
 ``` XML
 <Page loaded="pageLoaded">
@@ -17,10 +17,10 @@ Using a switch requires the Switch module.
  </StackLayout>
 </Page>
 ```
-<snippet id='article-binding-switch-property'/>
+{%snippet article-binding-switch-property%}
 ### Creating a switch
-<snippet id='article-create-switch'/>
+{%snippet article-create-switch%}
 ### Setting the checked property of a switch
-<snippet id='article-setting-checked-property'/>
+{%snippet article-setting-checked-property%}
 ### Binding checked property to a model
-<snippet id='aricle-binding-checked-property'/>
+{%snippet aricle-binding-checked-property%}

tests/app/ui/tab-view/tab-view.md

@@ -26,10 +26,10 @@ previous_url: /ApiReference/ui/tab-view/HOW-TO
 </Page>
 ```
 Using a TabView requires the "ui/tab-view" module.
-<snippet id='article-require-tabview-module'/>
+{%snippet article-require-tabview-module%}
 ### Binding TabView.items
-<snippet id='article-binding-tabview-items'/>
+{%snippet article-binding-tabview-items%}
 ### Selecting a tab programmatically
-<snippet id='article-select-tab'/>
+{%snippet article-select-tab%}
 ## Creating a TabView
-<snippet id='article-create-tabview'/>
+{%snippet article-create-tabview%}

tests/app/ui/text-field/text-field-tests.ts

@@ -15,12 +15,12 @@ import textFieldModule = require("ui/text-field");
 // Other frequently used modules when working with buttons include:
 
 import bindable = require("ui/core/bindable");
-// >> require-observable
+// >> require-observable-textfield
 import observable = require("data/observable");
-// << require-observable
+// << require-observable-textfield
 
 // ### Binding two TextFields text property to observable view-model property.
-// >> binding-text-property
+// >> binding-text-property-textfield
 function pageLoaded(args) {
   var page = args.object;
   var obj = new observable.Observable();
@@ -28,7 +28,7 @@ function pageLoaded(args) {
   page.bindingContext = obj;
 }
 exports.pageLoaded = pageLoaded;
-// << binding-text-property
+// << binding-text-property-textfield
 
 var _createTextFieldFunc = function (): textFieldModule.TextField {
     // >> creating-textfield
@@ -252,7 +252,7 @@ export var testBindHintDirectlyToModel = function () {
     helper.buildUIAndRunTest(_createTextFieldFunc(), function (views: Array<viewModule.View>) {
         var textField = <textFieldModule.TextField>views[0];
 
-        // >> binding-hint-property
+        // >> binding-hint-property-textfield
         var model = new observable.Observable();
         model.set("hint", "type your username here");
         var options: bindable.BindingOptions = {
@@ -271,7 +271,7 @@ export var testBindHintDirectlyToModel = function () {
         TKUnit.assert(textField.hint === "type your password here", "Actual: " + textField.text + "; Expected: " + "type your password here");
         TKUnit.assert(textFieldTestsNative.getNativeHint(textField) === "type your password here", "Actual: " + textFieldTestsNative.getNativeHint(textField) + "; Expected: " + "type your password here");
         // << (hide)
-        // << binding-hint-property
+        // << binding-hint-property-textfield
     });
 }
 
@@ -534,4 +534,4 @@ export var test_WhenFormattedTextPropertyChanges_TextIsUpdated_TextBase = functi
         view.formattedText = null;
         TKUnit.assertEqual(view.text, "");
     });
-}
+}

tests/app/ui/text-field/text-field.md

@@ -7,8 +7,8 @@ previous_url: /ApiReference/ui/text-field/HOW-TO
 ---
 # TextField
 Using a TextField requires the text-field module.
-<snippet id='require-textfield'/>
-<snippet id='require-observable'/>
+{%snippet require-textfield%}
+{%snippet require-observable-textfield%}
 ### Binding two TextFields text property to observable view-model property.
 ```XML
  <Page loaded="pageLoaded">
@@ -18,20 +18,20 @@ Using a TextField requires the text-field module.
   </StackLayout>
  </Page>
 ```
-<snippet id='binding-text-property'/>
+{%snippet binding-text-property-textfield%}
 ## Creating a TextField
-<snippet id='creating-textfield'/>
+{%snippet creating-textfield%}
 ### Setting the text of a TextField
-<snippet id='setting-text-property'/>
+{%snippet setting-text-property%}
 ### Setting the text of a TextField
-<snippet id='setting-hint-property'/>
+{%snippet setting-hint-property%}
 ### Binding text property directly to model
-<snippet id='binding-text-property-second'/>
+{%snippet binding-text-property-second%}
 ### Setting the hint of a TextField
-<snippet id='setting-hint-text'/>
+{%snippet setting-hint-text%}
 ### Binding hint property directly to model
-<snippet id='binding-hint-property'/>
+{%snippet binding-hint-property-textfield%}
 ### Setting the secure property of a TextField
-<snippet id='setting-secure-property'/>
+{%snippet setting-secure-property%}
 ### Binding secure property directly to model
-<snippet id='binding-secure-property'/>
+{%snippet binding-secure-property%}

tests/app/ui/text-view/text-view-tests.ts

@@ -13,9 +13,9 @@ import textViewModule = require("ui/text-view");
 
 // Other frequently used modules when working with buttons include:
 import bindable = require("ui/core/bindable");
-// >> require-observable
+// >> require-observable-textview
 import observable = require("data/observable");
-// << require-observable
+// << require-observable-textview
 
 // >> text-view-xml
 // <Page loaded="pageLoaded">
@@ -96,7 +96,7 @@ export var testBindTextDirectlyToModel = function () {
     helper.buildUIAndRunTest(_createTextViewFunc(), function (views: Array<viewModule.View>) {
         var textView = <textViewModule.TextView>views[0];
 
-        // >> binding-text-property
+        // >> binding-text-property-textview
         var model = new observable.Observable();
         model.set("username", "john");
         var options: bindable.BindingOptions = {
@@ -115,7 +115,7 @@ export var testBindTextDirectlyToModel = function () {
         TKUnit.assert(textView.text === "mary", "Actual: " + textView.text + "; Expected: " + "mary");
         TKUnit.assert(textViewTestsNative.getNativeText(textView) === "mary", "Actual: " + textViewTestsNative.getNativeText(textView) + "; Expected: " + "mary");
         // << (hide)
-        // >> binding-text-property
+        // << binding-text-property-textview
     });
 }
 
@@ -176,7 +176,7 @@ export var testBindHintDirectlyToModel = function () {
         var textView = <textViewModule.TextView>views[0];
         textView.text = "";
 
-        // >> binding-hint-property
+        // >> binding-hint-property-textview
         var model = new observable.Observable();
         model.set("hint", "type your username here");
         var options: bindable.BindingOptions = {
@@ -195,7 +195,7 @@ export var testBindHintDirectlyToModel = function () {
         TKUnit.assert(textView.hint === "type your password here", "Actual: " + textView.hint + "; Expected: " + "type your password here");
         TKUnit.assert(textViewTestsNative.getNativeHint(textView) === "type your password here", "Actual: " + textViewTestsNative.getNativeHint(textView) + "; Expected: " + "type your password here");
         // << (hide)
-        // << binding-hint-property
+        // << binding-hint-property-textview
     });
 }
 
@@ -493,4 +493,4 @@ export function test_watch_listerer_is_removed_at_onDetach() {
             editText.setText("FAIL");
         });
     }
-}
+}

tests/app/ui/text-view/text-view.md

@@ -7,22 +7,22 @@ previous_url: /ApiReference/ui/text-view/HOW-TO
 ---
 # TextView
 Using a TextView requires the text-view module.
-<snippet id='require-textmodules'/>
-<snippet id='require-observable'/>
+{%snippet require-textmodules%}
+{%snippet require-observable-textview%}
 ### Binding two TextViews text property to observable view-model property.
-<snippet id='text-view-xml'/>
-<snippet id='observable-declare'/>
+{%snippet text-view-xml%}
+{%snippet observable-declare%}
 ### Creating a TextView
-<snippet id='text-view-create'/>
+{%snippet text-view-create%}
 ### Setting the text of a TextView
-<snippet id='set-text-value'/>
+{%snippet set-text-value%}
 ### Binding text property directly to model
-<snippet id='binding-text-property'/>
+{%snippet binding-text-property-textview%}
 ### Setting the hint of a TextView
-<snippet id='set-textview-hint'/>
+{%snippet set-textview-hint%}
 ### Binding hint property directly to model
-<snippet id='binding-hint-property'/>
+{%snippet binding-hint-property-textview%}
 ### Setting the editable property of a TextView
-<snippet id='setting-editable-property'/>
+{%snippet setting-editable-property%}
 ### Binding editable property directly to model
-<snippet id='binding-editable-property'/>
+{%snippet binding-editable-property%}

tests/app/ui/time-picker/time-picker.md

@@ -7,6 +7,6 @@ previous_url: /ApiReference/ui/time-picker/HOW-TO
 ---
 # TimePicker
 Using a TimePicker requires the "ui/time-picker" module.
-<snippet id='require-time-picker'/>
+{%snippet require-time-picker%}
 ## Configuring a TimePicker
-<snippet id='declare-time-picker'/>
+{%snippet declare-time-picker%}

tests/app/ui/web-view/web-view.md

@@ -7,14 +7,14 @@ previous_url: /ApiReference/ui/web-view/HOW-TO
 ---
 # WebView
 Using a WebView requires the web-view module.
-<snippet id='webview-require'/>
+{%snippet webview-require%}
 ### Declaring a WebView.
-<snippet id='declare-webview-xml'/>
+{%snippet declare-webview-xml%}
 ### Creating a WebView
-<snippet id='declare-webview'/>
+{%snippet declare-webview%}
 ### Using WebView
-<snippet id='webview-url'/>
+{%snippet webview-url%}
 ### Using WebView
-<snippet id='webview-localfile'/>
+{%snippet webview-localfile%}
 ### Using WebView
-<snippet id='webview-string'/>
+{%snippet webview-string%}

tests/app/xml-parser-tests/xml-parser.md

@@ -7,7 +7,7 @@ previous_url: /ApiReference/xml/HOW-TO
 ---
 # Xml module
 Using xml requires the Xml module.
-<snippet id='xml-module-snippet'/>
+{%snippet xml-module-snippet%}
 ### Parse XML
-<snippet id='xml-parser-snippet'/>
+{%snippet xml-parser-snippet%}