From 682182573a9be04ce7258ae6802a5d9341c0acf7 Mon Sep 17 00:00:00 2001
From: - R U T H - <ruthlhanan@gmail.com>
Date: Wed, 20 Dec 2023 14:21:48 -0800
Subject: [PATCH] Create 24-pulltorefresh.md

responding to #47
---
 actions/24-pulltorefresh.md | 46 +++++++++++++++++++++++++++++++++++++
 1 file changed, 46 insertions(+)
 create mode 100644 actions/24-pulltorefresh.md

diff --git a/actions/24-pulltorefresh.md b/actions/24-pulltorefresh.md
new file mode 100644
index 0000000..54879b6
--- /dev/null
+++ b/actions/24-pulltorefresh.md
@@ -0,0 +1,46 @@
+# Pull To Refresh
+
+Pull to Refresh is a common interaction pattern in mobile app development, allowing users to refresh the content of a view by pulling it down. In Ensemble, you can implement Pull to Refresh using the `onPullToRefresh` event and update the content dynamically. Let's break down the example:
+
+```yaml
+ Column:
+    styles:
+        scrollable: true
+        padding: 20 20 200
+        gap: 8
+    onPullToRefresh: |-
+        generateRandomNumber();
+    item-template:
+        data: ${ensemble.storage.RandomNumbers}
+        name: number
+        template:
+        Text:
+            text: ${number}
+            styles:
+            backgroundColor: cyan
+            textAlign: center
+Global: |-
+  //@code
+  ensemble.storage.RandomNumbers = [8, 3, 5];
+
+  function generateRandomNumber() {
+    //.....
+    }
+```
+
+onPullToRefresh Event:
+`onPullToRefresh`: |- 
+    generateRandomNumber();: 
+Specifies the callback function (`generateRandomNumber`) to be executed when the user pulls to refresh. This ensures that new random numbers are generated and the list is updated when the user performs a pull-to-refresh gesture.
+
+Item Template:
+`data`: ${ensemble.storage.RandomNumbers}: 
+Binds the list of random numbers (stored in ensemble.storage.RandomNumbers) to the item template. This data will be used to populate the list.
+`name: number`: Sets a reference name for each item in the list.
+`text: ${number}`: Binds each Text widget to a specific number in the list, ensuring that the correct data is displayed for each item.
+
+Global Section (Initialization):
+`ensemble.storage.RandomNumbers = [8, 3, 5];`: 
+Initializes the RandomNumbers array with some initial values.
+`generateRandomNumber` function: 
+Generates new random numbers when called. This function is triggered on pull-to-refresh.
\ No newline at end of file