iOSTableView Web Control Redux – Part 2

Welcome to part two of our three part series on building an iOSTableView control for use in Xojo web projects using the WebSDK.

In part 1 of this series we walked through the process of pulling apart an iOSTableView control into the structure of an HTML unordered list and created the classes necessary to render our control in a web project. Now, in part 2, I’ll show you how to get the control to look right…and we’ll be doing that with a lot of CSS.

The first thing we need to do is to go back to each of the Render methods and add a CSS class to each level so we can apply targeted styles on them.

iOSTableViewItem

Function Render() As String
dim sa() as string
sa.Append "<li class=""iOSTableViewRow"">"
sa.Append self.Caption
sa.Append "</li>"
return join(sa, EndOfLine)
End Function

iOSTableViewGroup

Function Render() As String
dim sa() as string
sa.Append "<div class=""iOSTableView_header"">" + self.Caption + "</div>"
sa.Append "<ul>"
  for i as integer = 0 to UBound(items)
  sa.Append items(i).Render()
next
sa.Append "</ul>"
return join(sa, EndOfLine)
End Function

iOSTableView

Function SetupHTML() As String
dim sa() as string
sa.Append "<div id=""" + self.ControlID + """ class=""iOSTableView"">"
for i as integer = 0 to UBound(groups)
  sa.Append groups(i).Render()
next
sa.Append "</div>"
return join(sa, EndOfLine)
End Function

Now that we have the CSS class attributes in place, we can start giving this control some style.

Let’s start by getting the headers drawing correctly. We want the headers to have a gray background, with a little bit of padding around them and for them to be located at the top of the containing element. In iOSTableView.SetupCSS, add the following code:

// Headers
dim st as new WebControlCSS
st.Selector = ".iOSTableView_header"
st.Value("background-color") = "rgba(240,240,240,0.9)"
st.Value("padding") = "5px"
st.Value("top") = "0px"
styles.Append st

We also need the individual items to be flush left. We’re going to adjust any <ul> elements within our table view:

// Adjust list padding and margin of the list
st = new WebControlCSS
st.Selector = ".iOSTableView ul"
st.Value("padding-left") = "0"
st.Value("margin") = "0px"
styles.Append st

If you run the project now, you’ll see something like this:

Now lets add some style to the rows. In the iOSTableView.SetupCSS event, add the following:

// Add iOS appearance to rows li tags
st = new WebControlCSS
st.Selector = ".iOSTableView ul li.iOSTableViewRow"
st.Value("background-color") = "#FFFFFF"
st.Value("border-bottom") = "1px solid #D4D2D6"
st.Value("display") = "block"
st.Value("font-size") = "17px"
st.Value("font-weight") = "bold"
st.Value("padding") = "12px 10px"
st.Value("text-decoration") = "none"
st.Value("color") = "#000"
styles.Append st

Wow! We’re making real progress here! If you run the project, you’ve got something that actually looks like an iOSTableView now.

We’ve gone from design to something that looks right, but it still doesn’t do anything. Next time we’ll add kinetic scrolling and respond to events!

Read: iOSTableView Web Control Redux – Part 3