ProMotion Styling Table Cells with Teacup

Question

I've looked all over for the Google answer to this, but no joy. What I'd like to do is mix and match Teacup and ProMotion for tables. The overall table is pretty easy. Just add this to the hash for the data element in the table_data method.

stylename: :leg_cell

-and-

Teacup::Stylesheet.new :main_screen do
  style :leg_cell,
    backgroundColor: UIColor.colorWithRed(238, green:238, blue:238, alpha: 1),
    textColor: UIColor.greenColor
  style UITableViewLabel,
    textColor: UIColor.greenColor
end

for the stylesheet. But... UITableViewLabel is being ignored and there's this:

enter image description here

Symbiote tells me this is a UITableViewLabel, but I'm not seeing a way to style it. Also, Teacup offers these neat:

layout do
  # things here to add styled subviews

things that are very similar to the subview adding thingies in ProMotion. How (well) do these coexist?

Any hints on how to get that tableview label styled green? And perhaps even use TeaCup to add some custom UILabels?

Note: I know the green is awful, but I'm using it just to demonstrate that I've got the right element styled. I'll pick something more tasteful once I'm getting the styling correct.

Thanks!

Jamon Holmgren · Accepted Answer · 2015-12-14T22:17:13.827

2

I would recommend subclassing PM::TableViewCell (which is a subclass of UITableViewCell) and applying your Teacup styling in there.

class MyTableViewCell < PM::TableViewCell
  attr_accessor :mileage_label

  stylesheet :main_screen
  def layoutSubviews
    layout do
      # Subviews
      # Apply `self.mileage_label` to your UILabel here.
    end
    restyle! # May be necessary?
  end
end

class MyScreen < PM::TableScreen
  def table_data
    [{
      cells: [{
        cell_class: MyTableViewCell,
        title: "whatever",
        properties: {
          mileage_label: "My mileage label",
        }
      }]
    }]
  end
end

edited Dec 14 '15 at 22:17

answered Nov 19 '13 at 00:39

Jamon Holmgren

23,738
6
59
75

So in this context, say my `PM::TableViewCell` has a `UILabel` subview called `mileage_label`. How do I specify the text for `mileage_label` in my `table_data` hash? – Steve Ross Nov 28 '13 at 18:12
Updated my code example to show how. You add an `attr_accessor` and then can refer to that in your table_data hash. – Jamon Holmgren Nov 29 '13 at 23:30
I'm trying something similar but getting this error ```"In NavigationScreen#table_data, you should set :event_name, :today in a `properties:` hash. See TableScreen documentation."```. I'm using event_name and today instead of milage_label but otherwise it's mostly the same. – Dan Dec 02 '15 at 16:19
Also, when I try to add a stylesheet line it fails on compile with this error ```Terminating app due to uncaught exception 'NoMethodError', reason: 'undefined method `stylesheet' for EventCell:Class (NoMethodError)```. This is my class declaration line: ```class EventCell < PM::TableViewCell```. – Dan Dec 02 '15 at 16:21
1

@Dan - I updated the example. You want to use the `properties` hash now in newer versions of ProMotion. Not sure what the second error is -- please file an issue! – Jamon Holmgren Dec 14 '15 at 22:18

ProMotion Styling Table Cells with Teacup

1 Answers1