how to style table cell data

[gjlloyd]

can someone point me to an example of putting several pieces of data on one table cell?

i'm trying to do something like this:

---

product 1------------$99.00

product 2------------$48.00

etc.. with one string left aligned, one right aligned (ignore dashes in center).. i have looked at lots of examples would appreciate the help.

[jamonholmgren]

Are you using RedPotion, @gjlloyd ?

[gjlloyd]

no, just straight ProMotion, although not opposed if RedPotion is the way to go.

[squidpunch]

@gjlloyd easier to accomplish using redpotion for sure, because you can rely on RMQ's styling. Then its as simple as creating a custom cell with the labels you need on it, and provide proper styles for them - etc.

[jamonholmgren]

Yeah, ProMotion doesn't really provide a view layer, which RedPotion does (with RMQ). I'd recommend you go that route, if you're willing!

[jbender]

I'm actually trying to do exactly this (with RedPotion), and have a stylesheet and custom class set up, but the styles aren't being applied as I would have expected, any insights on what I'm doing wrong? See the link for the relevant classes. For what it's worth the styles are correctly applied if I run rmq.find(FollowupPromptCell).reapply_styles from the REPL.

https://gist.github.com/jbender/7b874fa9c20199dc2b75

[squidpunch]

so I'm guessing that before the restyle things aren't far enough to the right on larger devices

This is a common issue that comes up, TableViewCell objects are initialized with 320 points wide on all devices, and resized when rendered to the view - so the way I work around this is apply the proper width to the cell on creation, based on your gist, I think I'd change this

  def rmq_build
    content.append!(UILabel, :followup_prompt_cell_label)
    apply_style :followup_prompt_cell
  end

def rmq_build
  rmq(self).layout(w: screen_width)

  content
    .apply_style(:followup_prompt_cell)
    .append!(UILabel, :followup_prompt_cell_label)
  end

this then makes the cell be the width of the screen even before rendering. Then when you use from_right and the other styles on the contentView the superview is the right size to be able to style these as you want.

Hopefully that helps or puts you in the right direction

[jbender]

Sorry, I should have clarified, none of the frame styles are being applied, even with the updated function. (FYI screen_width was also undefined).

[squidpunch]

oh, yeah sorry, I thought I was in a stylesheet context there... its stylesheet.screen_width

do you have a repo I could clone, or a screenshot showing the layout before resytle?

[jbender]

(main)> rmq.find(FollowupPromptCell).first.frame.log

 *****************---*******---**************************
 *                 |         |                          *    window
 *              0 top        |                          *    {w: 375, h: 667}
 *                 |         |                          *
 *                ---        |                          *    superview
 *            ***************|*****   ---               *    {w: 375, h: 603}
 *            *              |    *    |                *
 *            *              |    *    |                *
 *            *        44 bottom  *    |                *    view
 *    0       *              |    *    |                *    {l: 0, t: 0,
 *|-- left --|*              |    *    |                *     w: 375, h: 44}
 *            *              |    * height 44           *
 *            *              |    *    |                *    z_order: 0
 *            *       375    |    *    |                *    z_position: 0.0
 *|------------------ right -+---|*    |                *
 *            *              |    *    |    0           *    Location in root view
 *            *              |    * |--+--from_right---|*    {l: 0, t: 0,
 *            *             ---   *    |                *     w: 375, h: 44}
 *            ***************---***   ---               *
 *                            |                         *
 *            |------ width - + --|                     *
 *                    375     |                         *
 *                            |                         *
 *                            |                         *
 *                    559 from_bottom                   *
 *                            |                         *
 *                           ---                        *
 ********************************************************

[squidpunch]

so FollowupPromptCell is your cell - we're looking for the children styling here, I think.

I can see the cell is 375 wide, and 44 high - which means the width got set properly, and I would bet the 44 is the default height - you need to either set rowHeight on the table, or the delegate method for a table cell height 'tableView:heightForRowAtIndexPath:' if you want to set a height on a cell, the stylesheet cant do it sadly. In the gist it looks like you want the cell to be 200 high? seems like a large cell for two labels, but perhaps there is more to the full app.

Looking at the gist more, i see that you are definining followup_prompt_cell_label with a left, and a from_right st.frame = { top: 16, left: 16, from_right: 16, height: 20 } this is going to make the label the full width of the view with 16 padding on the left and right and since the text is aligned left by default - its going to be to the left of the screen there

then you have followup_prompt_cell_title defined in a similar way
st.frame = { top: 20, centered: :horizontal, left: 16, from_right: 16, height: 40 }

this is going to make a view that is screen_width - 32 wide, set a left of 16, and center it (but you're already centered with the size you made. However - again the text alignment is going to be left by default.

so I think the problem is, you either want a smaller area for your labels (not so wide) or you want to align the text right on one of them - but run the risk over overlap

for example you could do something like

def left_text(st)
  st.frame = { w: :half, t: 16, l: 16, h: 20 }
end

def right_text(st)
  st.frame = { w: :half, t: 16, fr: 16, h: 20 }
  st.text_alignment = :right
end

[jeffcarbs]

I've run into a similar issue (NOTE: Fix/workaround below). It appears both the custom PM::TableViewCell and the UITableViewCellContent default to 320x44, so any relative styles applied (e.g. fr or fb) are relative to those rather than the "real" dimensions. However, if reapply_styles is called relative styles adjust to be correct. Here's a video of the defaults and then the styles being reapplied (I have it call reapply_styles on refresh): http://screencast.com/t/cj9qrZ3oSZR

Relevant code:

module BarCellStylesheet
  def bar_cell_height
    140
  end

  def bar_cell_title(st)
    st.frame = {l: 10, fr: 10, t: 10, fb: 10}
    st.font = font.medium
    st.color = color.black
    st.background_color = color.blue
  end
end

class FooScreen < PM::TableScreen
  title "Your title here"
  stylesheet FooScreenStylesheet

  refreshable callback: :on_refresh,
    pull_message: 'Pull to refresh',
    refreshing: 'Refreshing data…',
    updated_format: "Last updated at %s",
    updated_time_format: "%l:%M %p"

  def on_refresh
    end_refreshing
    update_table_data
    reapply_styles
  end

  def on_load
    update_table_data
    reapply_styles
  end

  def table_data
    [
      {
        title: "Section",
        cells: [
          { cell_class: BarCell, height: stylesheet.bar_cell_height, title: "Foo"},
          { cell_class: BarCell, height: stylesheet.bar_cell_height, title: "Bar"}
        ]
      }
    ]
  end
end

class BarCell < PM::TableViewCell
  def on_load
    # NOTE: This line is the fix.
    rmq(self, self.contentView).layout(h: stylesheet.bar_cell_height, w: stylesheet.screen_width)

    apply_style :bar_cell

    content = find(self.contentView)
    @title = content.append! UILabel, :bar_cell_title
  end

  def title=(value)
    @title.text = value
  end

  def title
    @title
  end
end

My workaround is included in the snippet above (using layout to adjust the height and width of both the PM::TableViewCell and the UITableViewCellContent). Could/should this be something that RQM or PM handles?

[jamonholmgren]

Yeah, that makes a lot of sense, @jcarbo . I'd say it would be a RedPotion fix, since we generally put RMQ/ProMotion glue code in there. Want to look into submitting a patch to RP?