-
Notifications
You must be signed in to change notification settings - Fork 6
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #61 from EnsembleUI/ruthUpdates
Edits and New Files
- Loading branch information
Showing
12 changed files
with
256 additions
and
17 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
File renamed without changes.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,15 @@ | ||
| # Calling an API and Using It's Response to Fill an Array | ||
|
|
||
| **Objective** | ||
| To retrieve the API response, modify an array containing user details through a designated function each time the API is called, and subsequently update this array whenever the API is invoked using a code block triggered by the onTap event on an Icon. Finally, to visualize these user details by generating icons from the updated array using an item template. | ||
|
|
||
| To achieve this, consider the following steps: | ||
|
|
||
| 1. Storage Handling: | ||
| Store the user details array as a variable in ensemble.storage. | ||
| 2. Binding with Item Template: | ||
| Bind your item template to the stored array. This ensures that any manipulation of the array automatically triggers changes in the associated widget. | ||
| 3. Array Update Mechanism: | ||
| After modifying the array values, make sure to set the array again. This step is crucial for triggering the binding mechanism and updating the widget accordingly. | ||
|
|
||
| By following this approach, you can integrate API responses, array manipulation, and visual representation using Ensemble, creating a dynamic and responsive user interface. |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,30 @@ | ||
| # Customizable Card Component | ||
|
|
||
| **Objective** | ||
|
|
||
| To construct a card component with individualized backgroundGradient or backgroundImage for each instance. | ||
|
|
||
| To achieve this, consider the following steps: | ||
|
|
||
| 1. Define View Structure: | ||
| Begin by setting up the View component to establish a flexible layout that accommodates multiple card instances. | ||
|
|
||
| 2. Create Test Widget: | ||
| Develop the Test component to serve as the card. Ensure it has the necessary structure to receive customizable inputs. | ||
|
|
||
| 3. Pass Colors as Input: | ||
| Within the instantiation of the Test component in the View, employ the inputs attribute to provide an array of colors: | ||
| ```yaml | ||
| - Test: | ||
| inputs: | ||
| colors: [0xFFFF0000, 0xFFFF00FF] | ||
| ``` | ||
| 4. Apply BackgroundGradient Styles: | ||
| Inside the Test component's implementation, utilize the passed colors to define the backgroundGradient styles for the relevant container, e.g., a Row: | ||
| ```yaml | ||
| Row: | ||
| styles: | ||
| backgroundGradient: | ||
| colors: ${colors} | ||
| ``` |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,25 @@ | ||
| # Dynamic Color Modification in JavaScript | ||
|
|
||
| **Objective** | ||
|
|
||
| To dynamically change the color of a Text widget based on a JavaScript variable. The goal is to customize the color property of the Text widget's style. | ||
|
|
||
| To achieve this, consider the following steps: | ||
|
|
||
| 1. Access Text Widget: | ||
| Obtain a reference to the Text widget that you want to modify. In the provided example, it can be accessed using the identifier (id). | ||
| ```yaml | ||
| - Text: | ||
| text: Hi there! | ||
| styles: | ||
| textStyle: | ||
| fontSize: 24 | ||
| color: blue | ||
| id: helloUser | ||
| ``` | ||
| 2. Modify Color Property: | ||
| Directly modify the color property of the Text widget's style using the assigned identifier. | ||
| ```javascript | ||
| helloUser.color = 'red'; | ||
| ``` |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,31 @@ | ||
| # HTML Widget with maxLines Support and Enhanced Styling | ||
|
|
||
| The HTML widget allows you to apply CSS-like styles to specific elements within the HTML content. Customize text color, font size, and font weight effortlessly using both CSS tags and the box wrapper, providing increased styling flexibility. | ||
|
|
||
| The <div> with an id of "hello" and the <p> with an id of "tag2" are styled with various properties such as border, borderRadius, padding, color, fontWeight, backgroundColor, maxLines, and textOverflow. | ||
|
|
||
| - Html: | ||
| id: myHtml | ||
| cssStyles: | ||
| - selector: "#hello" | ||
| properties: | ||
| border: 10px solid red | ||
| borderRadius: 10px | ||
| padding: 20px | ||
| - selector: "#tag2" | ||
| properties: | ||
| color: white | ||
| fontWeight: "900" | ||
| backgroundColor: red | ||
| maxLines: 2 | ||
| textOverflow: ellipsis | ||
| text: | | ||
| <div id="hello"> | ||
| <p id="tag2">Until recently, the prevailing view assumed lorem ipsum was born as a nonsense text. “It's not Latin, though it looks like it, and it actually says nothing,” Before & After magazine answered a curious reader, “Its ‘words’ loosely approximate the frequency with which letters occur in English, which is why at a glance it looks pretty real.”</p> | ||
|
|
||
| As Cicero would put it, “Um, not so fast.” | ||
|
|
||
| The placeholder text, beginning with the line “Lorem ipsum dolor sit amet, consectetur adipiscing elit”, looks like Latin because in its youth, centuries ago, it was Latin. | ||
|
|
||
| Richard McClintock, a Latin scholar from Hampden-Sydney College, is credited with discovering the source behind the ubiquitous filler text. In seeing a sample of lorem ipsum, his interest was piqued by consectetur—a genuine, albeit rare, Latin word. Consulting a Latin dictionary led McClintock to a passage from De Finibus Bonorum et Malorum (“On the Extremes of Good and Evil”), a first-century B.C. text from the Roman philosopher Cicero. | ||
| </div> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,34 @@ | ||
| # Configuring BottomNavBar Icons | ||
|
|
||
| **Objective** | ||
| To add a heart icon to a BottomNavBar item, ensuring correct rendering. If using a default icon, no additional library specification is needed; however, for non-default icons like Font Awesome, it's crucial to specify the library. | ||
|
|
||
| To achieve this, consider the following steps: | ||
|
|
||
| 1. Default Icons: | ||
| If using default icons (e.g., "home," "search," "shopping_cart"), no library specification is required. Simply provide the icon name. | ||
| ```yaml | ||
| BottomNavBar: | ||
| styles: | ||
| backgroundColor: 0xFF1F2128 | ||
| items: | ||
| - label: Home | ||
| icon: search | ||
| screen: Home | ||
| ``` | ||
| 2. fontAwesome Icons: | ||
| For non-default icons, particularly those from Font Awesome, ensure to specify the library using the iconLibrary attribute. | ||
| ```yaml | ||
| BottomNavBar: | ||
| styles: | ||
| backgroundColor: 0xFF1F2128 | ||
| items: | ||
| - label: Favourite | ||
| icon: heart | ||
| screen: Home | ||
| iconLibrary: fontAwesome | ||
| ``` | ||
| 3. Active Icons: | ||
| If an active state icon is needed (e.g., a different icon when the item is selected), use the activeIcon attribute. |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,37 @@ | ||
| # Invoke Haptics | ||
|
|
||
| We can use the invokeHaptic action to provide haptic feedback in your app. This feature enhances the user experience by providing tactile responses for different interactions. | ||
|
|
||
| The invokeHaptic action is utilized to trigger haptic feedback, and it supports various types such as heavyImpact, mediumImpact, lightImpact, and vibrate. | ||
| Buttons are used to demonstrate different haptic types, and the last button showcases using JavaScript code to invoke the lightImpact haptic. | ||
|
|
||
| Please note that haptics will only work on native apps. | ||
|
|
||
| invokeHaptic action is utilized to trigger haptic feedback, and it supports various types. | ||
| - Button: | ||
| label: Heavy Impact | ||
| onTap: | ||
| invokeHaptic: | ||
| type: heavyImpact | ||
|
|
||
| Additionally "Vibrate" button demonstrates chaining actions by using the onComplete property to execute additional JavaScript code after the haptic feedback is played. | ||
| - Button: | ||
| label: Vibrate (Using onComplete action to chain) | ||
| onTap: | ||
| invokeHaptic: | ||
| type: vibrate | ||
| onComplete: | ||
| executeCode: | ||
| body: | | ||
| //@code | ||
| console.log("Vibrate Haptic played") | ||
|
|
||
| Furthermore, the onTapHaptic property is used for the "Selection Click" button, demonstrating an alternative way to trigger haptic feedback. | ||
| - Button: | ||
| label: Selection Click (Using onTapHaptic property) | ||
| onTapHaptic: selectionClick | ||
| onTap: | ||
| executeCode: | ||
| body: | | ||
| //@code | ||
| console.log("Button Pressed") |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,39 @@ | ||
| # Custom Lottie Animations with Events and Controls | ||
|
|
||
| With features like onStart, onPause, onComplete, and control buttons, you can create interactive animations tailored to your application. | ||
|
|
||
| The Lottie animations have events such as onForward, onReverse, onPause, and onComplete. Control buttons are provided to trigger these events dynamically. | ||
| - Lottie: | ||
| id: MyLottie | ||
| autoPlay: false | ||
| repeat: false | ||
| onForward: | | ||
| //@code | ||
| console.log("Forward"); | ||
| onReverse: | | ||
| //@code | ||
| console.log("Reverse"); | ||
| onPause: | | ||
| //@code | ||
| console.log("Pause"); | ||
| onComplete: | | ||
| //@code | ||
| console.log("Completed"); | ||
| source: https://assets6.lottiefiles.com/private_files/lf30_rnpgzd17.json | ||
| styles: | ||
| width: 400 | ||
| height: 200 | ||
|
|
||
| - Button: | ||
| styles: | ||
| outline: true | ||
| borderColor: 0xffed5742 | ||
| borderRadius: 20 | ||
| backgroundColor: 0xffaad6de | ||
| labelStyle: | ||
| color: 0xffed5742 | ||
| label: Forward | ||
| onTap: | | ||
| //@code | ||
| console.log("Forward"); | ||
| MyLottie.forward(); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,22 @@ | ||
| # Specify library icons for start and end | ||
|
|
||
| **Objective** | ||
| To specify library icons for startingIcon and endingIcon on a Button | ||
|
|
||
| To achieve this, consider the following steps: | ||
|
|
||
| 1. To specify library icons in shorthand notation for startingIcon and endingIcon on a Button, you can use the following syntax: | ||
| ```yaml | ||
| Button: | ||
| startingIcon: wifi | ||
| endingIcon: addressBook fontAwesome | ||
| ``` | ||
| 2. Icons can be represented with a more verbose syntax on a Button using the following structure: | ||
| ```yaml | ||
| Button: | ||
| endingIcon: | ||
| name: addressBook | ||
| library: fontAwesome | ||
| size: 50 | ||
| color: red | ||
| ``` |