Over a million developers have joined DZone.
{{announcement.body}}
{{announcement.title}}

Getting Started with MarkupKit

DZone's Guide to

Getting Started with MarkupKit

MarkupKit will simplify writing iOS interfaces using human-readable markup language; this article will help you get started.

· Mobile Zone
Free Resource

Launching an app doesn’t need to be daunting. Whether you’re just getting started or need a refresher on mobile app testing best practices, this guide is your resource! Brought to you in partnership with Perfecto

MarkupKit is a framework for creating native iOS applications using a human-readable markup language, similar to how applications are built for Android and .NET. This tutorial introduces the MarkupKit framework by demonstrating how to construct a simple "Hello, World"-style application using markup:

Image title

Tapping the button causes a greeting to appear:

Image title

The code examples are written in Swift. Xcode 7.3 is required.

Get MarkupKit

MarkupKit is developed as a freely available open-source project on GitHub. The latest release can be downloaded here. The file named MarkupKit.framework.tar.gz contains the framework bundle, MarkupKit.framework. Download this archive and expand it somewhere on your local system.

Create the Xcode Project

In Xcode, select File | New | Project to create a new iOS project. Select the iOS/Application/Single View Application template and click the "Next" button. Name the product "HelloMarkupKit" and select Swift as the development language.

Add the MarkupKit framework to the project. Select File | Add Files to "HelloMarkupKit"... and navigate to the location where you unzipped MarkupKit.framework. This will add the framework as a linked library. However, since MarkupKit is not a core iOS framework, it needs to be embedded in the application. To add MarkupKit as an embedded binary, do the following:

  • Select the project root node in the Project Navigator view
  • Select the "HelloMarkupKit" target
  • Select the "General" tab
  • Delete MarkupKit.framework from the "Linked Frameworks and Libraries" section
  • Drag MarkupKit.framework from the Project Navigator to the "Embedded Binaries" section

MarkupKit will now be bundled with the application.

Create the View Controller

In Project Navigator, select ViewController.swift. Remove the didReceiveMemoryWarning() method that was automatically created by Xcode; it is not needed in this example.

Import the MarkupKit module by adding the following line to the import section:

import MarkupKit


Within the ViewController class, add an outlet for the label that will be used to display the "Hello, World!" greeting:

    @IBOutlet var greetingLabel: UILabel!


Next, add an action to handle taps on the "Say Hello" button:

    @IBAction func sayHello() {
        greetingLabel.text = "Hello, World!";
    }


MarkupKit can be used either with or without storyboards. If you are using storyboards, update the viewDidLoad() method as follows. This will populate the view with the contents of ViewController.xml, which will be defined later:

override func viewDidLoad() {
    super.viewDidLoad()

    LMViewBuilder.viewWithName("View", owner: self, root: view)
}


Your final view controller should look like this:

import UIKit
import MarkupKit

class ViewController: UIViewController {
    @IBOutlet var greetingLabel: UILabel!

    override func viewDidLoad() {
        super.viewDidLoad()

        LMViewBuilder.viewWithName("View", owner: self, root: view)
    }

    @IBAction func sayHello() {
        greetingLabel.text = "Hello, World!";
    }
}


If you are not using storyboards, remove the viewDidLoad() method and replace it with the following loadView() override:

override func loadView() {
    view = LMViewBuilder.viewWithName("View", owner: self, root: nil)
}


Your final view controller should look like this:

import UIKit
import MarkupKit

class ViewController: UIViewController {
    @IBOutlet var greetingLabel: UILabel!

    override func loadView() {
        view = LMViewBuilder.viewWithName("View", owner: self, root: nil)
    }

    @IBAction func sayHello() {
        greetingLabel.text = "Hello, World!";
    }
}


If you are using storyboards, you will need to perform one additional step. In the storyboard, specify the view class that will be used as the root element in the markup document. For this example, this will be an instance of LMColumnView, a MarkupKit-provided view class that uses auto layout to arrange its subviews in a vertical line:

  • Ensure that the Identity Inspector is visible
  • Select Main.storyboard in the Project Navigator view
  • Expand the "View Controller Scene" and "View Controller" nodes and select the "View" node
  • In the Identity Inspector, enter LMColumnView in the "Class" field of the "Custom Class" section

If you are not using storyboards, you will need to perform two additional steps. The first step is to remove the main application storyboard that was automatically generated by Xcode:

  • In Project Navigator, delete Main.storyboard
  • Select the project root node
  • Select the "HelloMarkupKit" target
  • Select the "General" tab
  • Under "Deployment Info", remove "Main" from the "Main Interface" field

The second step is to instantiate the view controller programmatically. Modify the automatically generated application:didFinishLaunchingWithOptions: method in AppDelegate.swift as follows:

func application(application: UIApplication, didFinishLaunchingWithOptions launchOptions: [NSObject: AnyObject]?) -> Bool {
    window = UIWindow()

    window!.rootViewController = ViewController()

    window!.backgroundColor = UIColor.whiteColor()
    window!.frame = UIScreen.mainScreen().bounds

    window!.makeKeyAndVisible()

    return true
}


This will ensure that the view controller is presented at startup.

Create the View

Select File | New | File... from the menu. In the dialog that appears, select iOS > Other > Empty. Name the file ViewController.xml, ensure that the "HelloMarkupKit" project target is selected, and click the "Create" button.

If you are using storyboards, add the following markup to ViewController.xml:

<?xml version="1.0" encoding="UTF-8"?>        

<root backgroundColor="#fff8dc">
    <LMSpacer weight="1"/>

    <UILabel id="greetingLabel" textAlignment="center"/>
    <UIButton style="systemButton" normalTitle="Say Hello" onTouchUpInside="sayHello"/>

    <LMSpacer weight="2"/>
</root>


If you are not using storyboards, add the following to ViewController.xml:

<?xml version="1.0" encoding="UTF-8"?>

<LMColumnView backgroundColor="#fff8dc">
    <LMSpacer weight="1"/>

    <UILabel id="greetingLabel" textAlignment="center"/>
    <UIButton style="systemButton" title="Say Hello" onTouchUpInside="sayHello"/>

    <LMSpacer weight="2"/>
</LMColumnView>


When using storyboards, the root element is defined by the custom class that is specified in the storyboard (in this case, LMColumnView). The <root> tag serves as a placeholder for this class in markup. The documents are otherwise identical.

Both versions declare a simple view hierarchy containing a label and a button. View properties such as backgroundColor and textAlignment are set using XML attributes. The "id" attribute creates an outlet for the label instance, which is used to associate it with the outlet defined in the controller class. The "onTouchUpInside" attribute defines an action handler for the button and associates it with the sayHello() method defined by the controller.

LMColumnView is used to automatically arrange the view elements in a vertical line. Instances of LMSpacer are used to provide flexible space at the top and bottom of the view. The spacers are weighted such that the first spacer will be allocated one-third of the empty space in the view and the second two-thirds.

Build and Run the App

The application is now ready to run. Ensure that the "HelloMarkupKit" scheme is selected in the scheme drop-down and launch the application by selecting Product | Run from the menu or clicking the Run button:

Image title

Tapping the "Say Hello" button displays the greeting "Hello, World!":

Image title

Next Steps

This document introduced the MarkupKit framework by demonstrating how to build a simple, "Hello, World"-style application using markup. For more information, please visit the MarkupKit project on GitHub.

Keep up with the latest DevTest Jargon with the latest Mobile DevTest Dictionary. Brought to you in partnership with Perfecto.

Topics:
mobile ,markupkit ,ios ,xcode ,ui programmatically

Opinions expressed by DZone contributors are their own.

THE DZONE NEWSLETTER

Dev Resources & Solutions Straight to Your Inbox

Thanks for subscribing!

Awesome! Check your inbox to verify your email so you can start receiving the latest in tech news and resources.

X

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}