Using Teacup to style individual UIView components

I've been doing a bunch of RubyMotion development lately and I'm continually amazed at the power of this framework. One of the many great tools available to RubyMotion developers is Teacup, a UI view layout and styling domain-specific library (DSL). I think DSLs are one of the big advantages that RubyMotion has over traditional native iOS development using Objective-C and Xcode. More information on Teacup here. There's tons of documentation around using Teacup with UIViewControllers, but scant documentation on using Teacup with custom UIView components. There are times that you cannot style a UIView or subclass when the view is initially rendered. Examples include table cells and table headers. Well, don't fear, because you can always mix-in the Teacup layout behavior into any old Ruby class and get that functionality. Below is a table view header helper class that creates new UIView objects with a UILabel subview. Notice how I mix in the Teacup::Layout behavior into the helper and then I have access to all the Teacup stylesheet and layout functionality.

 1 class TableViewHeaderHelper
 2     include Teacup::Layout
 3 
 4     stylesheet :table_view_header
 5 
 6     def create(frame, title)
 7         view = UIView.alloc.initWithFrame(frame)
 8         view.stylename = :root
 9         layout(view) do
10             label = subview(UILabel, :label)
11             label.text = title
12         end
13         view
14     end
15 
16 end

In this above example, the factory method takes a frame and a title for the header. I create the root UIView and then pass that to the Teacup layout to do the rest of the composite magic. Since the title is dynamic, I get a reference to the created UILabel and set the text of the label to the title string passed into the factory method.

Next up is the Teacup stylesheet. This sits in app/styles/styles.rb in my RubyMotion application. I defined a couple of global UIColor objects and then define the table_view_header style for use in the TableViewHeaderHelper class previously shown. The rest of this is standard Teacup functionality, so I won't repeat what they have already documented.

 1 sectionBackgroundColor = UIColor.colorWithRed(221/255.0, 
 2                                               green: 238/255.0, 
 3                                               blue: 249/255.0, 
 4                                               alpha: 1.0)
 5 headerTextColor = UIColor.colorWithRed(50/255.0, 
 6                                        green: 50/255.0, 
 7                                        blue: 50/255.0, 
 8                                        alpha: 1.0)
 9 
10 Teacup::Stylesheet.new :table_view_header do
11 
12     style :root,
13           backgroundColor: sectionBackgroundColor
14 
15     style :label,
16           top: 1, 
17           left: 15, 
18           width: 500, 
19           height: 40,
20           font: :bold.uifont(20),
21           textColor: headerTextColor
22 end

Finally are the UITableViewDelegate protocol methods that I implemented to get a custom header for my UITableView. Note that the frame height used for constructing the UIView in the TableViewHeaderHelper is ignored, and the UITableViewDelegate heightForHeaderInSection:section method is used to determine the header height instead. Kind of strange, but it works.

 1     def tableView(tableView, viewForHeaderInSection: section)
 2         frame = CGRectMake(0, 0, tableView.frame.size.width, 1)
 3         title = "#{@league.name}: My Stations by date"
 4         TableViewHeaderHelper.new.create(frame,
 5                                          title)
 6     end
 7 
 8     def tableView(tableView, heightForHeaderInSection:section)
 9         50
10     end

Rubymotion: Controlling Info.plist generation with environment variables

I've been doing a fair amount of Rubymotion development these days and one trick that I'm using in my local development is to control the generation of the Info.plist via environment variables and some Ruby coding in the Rakefile. I can't stop raving about the excellent tools and development cadence that Rubymotion affords the iOS developer. I really like that I'm working out of Rubymine and not Xcode and using standard Ruby tools like rake and Bundler.

Like I said, using rake, you have the opportunity to change your Info.plist because it's generated through the rake process. I have a login view that needs a username and password entered into the text fields. I've rigged it up that these are prepopulated when working in dev, using environment variables and adding some logic to my Rakefile and the view controller. First up are the environment variables:

export DEV_MODE="true"
export DEV_USERNAME="chris.bartling@mycompany.net"
export DEV_PASSWORD="fahj2734hfjg86776dg$48df676"

Nothing earth shattering here. Normal environment variable assignments. Next up is the Rakefile changes:

Motion::Project::App.setup do |app|
    
	...    

    if ENV['DEV_MODE']
        puts '==========================================='
        puts '===> Using DEV_MODE Info.plist values <===='
        puts '==========================================='

        app.info_plist['DEV_USERNAME'] = ENV['DEV_USERNAME']
        app.info_plist['DEV_PASSWORD'] = ENV['DEV_PASSWORD']
    end

    app.pods do
        ....
    end
end

Again, pretty simple Ruby stuff here. If the DEV_HOME environment variable is set, add the username and password to the Info.plist during generation. Now, in your app, you can reference these values in your viewDidLoad method of your view controller, prepopulating the UI elements in your views:

dev_username = NSBundle.mainBundle.objectForInfoDictionaryKey('DEV_USERNAME')
dev_password = NSBundle.mainBundle.objectForInfoDictionaryKey('DEV_PASSWORD')
@email_field.text = dev_username || ''
@password_field.text = dev_password || ''

I probably sound like a broken record, but if you haven't used Rubymotion, definitely give it a try. Much different developer experience using Rubymotion tools vs. Apple's Xcode tooling.