The first thing to do is set up a suitable folder structure to hold our app and images in the correct relation to each other. Create a new folder called LCBnB. Inside this folder, create another folder named images. Add these images to your images folder.

Create a new stack from the File menu, and drag out a PolyGrid widget  from your toolbar. If you haven't yet installed this widget, see this lesson for instructions on doing so. Resize your stack to 1200x800 and name it lcbnb.livecode. Save the stack in the folder you created, next to the images folder (not inside it).

Double click the widget to bring up the Property Inspector.

The polygrid widget by default has three prestyled objects in it. This is handy as an example when you are getting started, but we don't want any of it, so we'll start by deleting it all to give us a blank PolyList object. Double click on the widget to bring up the Property Inspector. Go to the second tab (1) and delete each item (2) by clicking the bin icon next to it (3). This appears when you hover over the item. Click ok to delete (4).

You should now have a blank grey box, looking like this:

Next we'll delete the default data items. Go to the third tab (1), select an item (2) and delete it (3). Repeat until you have an empty box here too.

Go to the home tab (1), and set it up as shown in the screenshot below. This will give us a suitable template to work with for an Airbnb style list.

1. We want the widget to be visible
2. We'd like to see a vertical scrollbar to show there is more content
3. For use on mobile devices, we want touch scrolling on
4. We set a slightly rounded radius so the listings are not sharp squares, but have rounded corners
5. The border width is zero - no line round the listing
6. The item height is 360, to give us enough space to play with
7. We've set the number of columns to 4.  Now my listings are distributed across the top of the widget, horizontally, instead of vertically below each other. If I have 8 listings, these would now appear in 2 rows of four.
8. Finally, increase the padding around the listings by dragging the Margin slider out a bit.

Ok great. This is starting to look a little bit like an Airbnb listing. Now we'll do some styling of the elements of each listing.

lets list all the things we need to achieve the AirBnB style list.

• Our image, we will call this image and it will have a content type of image-file
• Our heart icon, we will call this heart and it will have a content type of icon
• Our title, we will call this title and it will have a content type of text
• Our host description, we will call this host and it will have a content type of text
• Our price, we will call this price and it will have a content type of text
• Our star icon, we will call it star and it will have a content type of icon
• Our rating, we will call it rating and it will have a content type of text

Note: the key we give must match the name and the value must be what is expected for that content-type. For example image-file will expect a path to the image location and icon will expect the name of the SVG icon.

Lets go through how we add these to the Data Content, step by step.

The Polylist widget recognises the built in SVG icons shipped with LiveCode, by name. The easiest way to discover the name of the icon we want to use is to go and look. We can use one of the built in LiveCode SVG objects for this. To find out what to call the icon, drag out an SVG object (1) from the Tools Palette. Click on "Preset" (2). Search for heart (3). We want an empty heart, and the name is "heart empty" (4).

To use this for our icon, go back to the Property inspector for the PolyList Widget. On the third tab (1), press the + (2) and choose "icon" in the content type dropdown (3). Enter "heart" as the name (4), set the width and height to 20 px (5) (check its not % unless you want your heart to resize when the page stretches). Set the position of the heart to 5% from the top right (6). Set Margin and Padding to zero (7). Finally, set the color to white (8) using the color picker.

To complete the parameters for the heart, switch to the Data Content tab (1). In the Data content area (2), expand the first item. Click the + to add a new key pair (3). In the Key box, enter "heart"(4), and in the "Value" box enter "heart empty" (5). PolyList automatically knows you are referring to a built in SVG object with that name. If you want to use an SVG that isn't in LiveCode's default set, you can pass it the SVG path at this point. Note: you can just delete the SVG object you dragged out at this point, it was only there to find the name of the SVG. It is not needed.

Lets add the image next. On the Data layout tab, click the + again (1) and select image-file (2) as the content type. For content fit, select cover (3) - we want this image to be our background and resize with the listing. Set the name to image (4) and the width and height to 100% and 270px (5). Finally, relayer the image. We want it to be the first object drawn, behind all the rest, so click the up arrow (6) to move it behind the heart.

Now add the key pair for your image. On the Data content tab, click the + (1) to add a new key pair. I've circled where you will find it, it is not visible in the screenshot. Enter image for the key name, and the path to the image for the value, which should be images/1.jpg. This will look for the images folder in the structure next to your app which we created at the start of the lesson. You can now see we're starting to get something visible in the listing, with the heart showing on top of your image.

Now lets see how we can style the heading to match with a typical Airbnb heading. On the data layout tab, click the + and name this "Title" (1). We want this to display at the bottom of the listing, and left aligned. Set the width to 100% and the height to 40px (2). Set the Top to 75% - so the title will always be in the bottom quarter of the layout(3).  Increase the text size a little to 16 (4). The text color for this is set to #222222 in the color picker (5). Set the text align to left and weight to bold (6).

I'm not going to go through in detail every setting for the rest of the required parameters. Below are the screenshots showing what your settings should be.

Note the color of the text for the "host" heading is set to #717171, making it a bit paler than the heading.

The text color for the price is #222222.

Once you have all the elements ready, go to the Data content tab, and enter all the key pairs. It should look like this when you have finished:

Of course, entering key pairs manually like this is not practical in most situations, but entering a single set allows you to see what it will all look like in action and make any corrections necessary. We will address getting your data into the list in a moment. First we need a couple of tweaks to make this visually correct. The background colour is not correct and it looks a little squished.

In the Property Inspector for the PolyList widget go to the 5th tab which is the colors tab (1). In here change the background color (2) to #ffffff (3).

It also looks like the position of the price isn't quite right. Changing the % from the top to 92% makes that work better.

The squished issue. This is an issue we will actually address in another lesson with a bit of responsive code, but for the moment the reason it looks like this is because that is the space it has to play with, if you want to show 4 columns in the width that it has to work with. In reality at this width you would probably want to display 3 columns wide. You can go ahead and do that now in the first tab of the Property Inspector, or just hang tight for the responsive code coming up.

For this example the data is in a Google Sheet which you can view here. Export this as a TSV file then open it in a text editor. On your stack, drag out a field and a button. Name the field "tsv". Right click on the button and open the Script Editor, then add this script:

on mouseup      

set the tsvData of widget "PolyList" to field "tsv"

end mouseup

Select the field and go to the second tab, "contents" and paste in the contents of your tsv file, including the headers.

Now switch to "Run" mode in the Tools Palette and click the button. You should see your list populate with data. You can now either make the field and the button invisible, by unchecking the "visible" box on the home screen of the Property Inspector, or just delete them.

And that's it! You now have an Airbnb style list. There are one or two other little tweaks we can make to this, and we can apply Responsive Layout, so that it scales appropriately when the window is resized. We will address this in another lesson.