In this section, we will import our .xib file into our RubyMotion project. Open the folder of the Xcode project and locate ViewController.xib. It's inside a folder named en.lproj; copy it into the resources folder of your Restro application, which we created in the last chapter.

Update the about_controller.rb file in the restro app, which we created in the last chapter, with the following code:

def setupNavigationBar
  back= UIBarButtonItem.alloc.initWithTitle("Back", style:UIBarButtonItemStylePlain,target:nil ,action:nil)
  self.navigationItem.backBarButtonItem = back;
  contact_us_button = UIBarButtonItem.alloc.initWithTitle("Contact Us", style:UIBarButtonItemStylePlain ,target:self, action:"contact_us")
  self.navigationItem.rightBarButtonItem = contact_us_button
end
def contact_us
  contact_us_controller = ContactUsController.alloc.initWithNibName("ViewController", bundle:nil)
  presentModalViewController(contact_us_controller, animated:true)
end

As we have imported the .xib file from Xcode to the RubyMotion project, RubyMotion creates a .nib file automatically when we build the code with the Rake command. Here, we are creating a View Controller variable with an initializer initWithNibName that receives a parameter, which will be the name of the .nib file. This initializer has the responsibility of instantiating the .nib file and wiring the View declared in the view property of the View Controller variable.

Create a file contact_us_controller.rb inside the app folder as follows:

class ContactUsController < UIViewController
end

Let's fire up the terminal and run the application with the following command:

$rake

The following screenshot shows the output of the preceding command:

Next, let's update contact_us_controller.rb with the following code:

class ContactUsController < UIViewController
  HEADER_TAG = 1
  EMAIL_BOX_TAG = 2
  INFORMATION_BOX_TAG = 3
  SUBMIT_BUTTON_TAG = 4
  def viewDidLoad
    @header = self.view.viewWithTag(HEADER_TAG)
    @email_box = self.view.viewWithTag(EMAIL_BOX_TAG)
    @information_box = self.view.viewWithTag(INFORMATION_BOX_TAG)
    @submit_button = self.view.viewWithTag(SUBMIT_BUTTON_TAG)
    @submit_button.addTarget(self,
            action:"send_message", forControlEvents:UIControlEventTouchUpInside) 
    tapGesture = UITapGestureRecognizer.alloc.initWithTarget(self,
action:"hideKeyboard")
    tapGesture.cancelsTouchesInView = false
    view.addGestureRecognizer(tapGesture)
  end 
  
  def send_message
    if form_valid?
      puts "Submitted the button with correct values"
      close
    else
      puts "Invalid Values"
    end
  end
  def close
    dismissModalViewControllerAnimated true
  end 

  #method to hide keyboard when user taps on a scrollview
def hideKeyboard
    @information_box.resignFirstResponder
end

def form_valid?
  not @email_box.text.empty? and not @information_box.text.empty? and not @email_box.text.match(/A([^@s]+)@((?:[-a-z0-9]+.)+[a-z]{2,})/i).nil?
end
end

Let's start the application by using the following command:

$rake

Enter a few incorrect values in the form and you will get Invalid value printed on the terminal. Once you enter the values correctly in the form and submit it, it will be pulled down.

Now let's understand the code. First we have assigned the tags to the attributes that we had created in Interface Builder. And then we have used these tags to wire our variables to those components.

self.view.viewWithTag(HEADER_TAG)

The preceding command will retrieve a subview of self.view based on its tag.

We have also created an action item for the Submit button. That means when we click on the Submit button, it will call the action send_message.

    @submit_button.addTarget(self,
      action:"send_message", forControlEvents:UIControlEventTouchUpInside)

In the send_message action, we are checking whether the form is valid or not.

Some developers like to design the user interface using Interface Builder; others prefer to work entirely with code. One of the reasons is that when connecting Interface Builder outlets and actions to your code, it is easy to make a mistake. This often results in an error that is more difficult to debug than if you had simply written the entire code, as you have to debug in two places (Interface Builder and your code) instead of just one (the code).