 Hello, my name is Gustavo Sosa and welcome to another video from ST Microelectronics. This is the first video of three. We will show how to use the scroll list widget. We'll create two screens. First screen will have the scroll list and we'll show the selected element from the scroll list. To know how to pass information of the scroll list selected element, at the screen two we'll show the selected item at the screen one. In this video, we'll create a user interface for screen one. We will use TouchFX Designer 4.17 and STM32QID 1.7 with STM32 H735G discovery key. Open TouchFX. Go to create and find the H735 discovery board TVS. Use the latest version. Name the project and hit create. The first step is to create a container that will be used as base by the scroll list. At the top, click at container. With the plus, add a new container. Resize the container, in this case, to 210 by 40. Now, as background for the container, add a white box. In the list, we like to have images, so let's add an image. Go to know image. First, we'll add all the images we'll be using the project. Click at the plus sign to add images. Namegate to the folder where images are. Select all the images and hit open. Go again to know image. Now, select alert image. It's the first one. Place it at around coordinates 26. Now, add a text and place it at coordinates 84 and 6. Text alignment select center. On check auto size. Resize a text to a width of 120. We'll add a divider between items at the scroll list. Add new image. At the style, select divider, and reshort. Place it at the bottom of the container. We have finished the container. Click at screen to go back and so can start creating the screen. As background, we'll add an image. At the style, select main bg texture 480 by 272. It is time to add the scroll list. At item template from the scroll list, select the container we had created. Resize another scroll list. We'll end around coordinates 180 and 17 and with a height of 238. Now, we'll add an image and a text to show the items selected from the scroll list. First, add an image and we'll select image alert 48. Place it around coordinates 70 and 135. Now, add a text and place it around coordinates 50 and 70. Change that text to selected. Add a second text. Place it around coordinates 33 and 205. Text alignment select center on checks auto size. Resize that text to a width of 120. Now, we'll add dst and touch effects logos. First, at the top left will be the touch effects logo. At the top right, dst logo. For the real text that will be at the scroll list, we need to add them as text resources and in that code, we will assign them to its position in the list. Something similar happened with the images. At the code, it will be assigned to its position. At the left, go to text, then to resources. We'll add a resource for each text for that scroll list. In this example will be 11. We will add error, calendar, messages, com, sys info, locations, start, power, config, tools and users. Let's return to the canvas view by selecting it at the left. At the scroll list, we need to change the number of the items to 11. We forgot to do it before. Finally, let's generate a code by the icon at the bottom left. We have created the user interface. At the second part, we will add a code to interact with the scroll list. Thank you for watching.