For pretty some time now, we’ve been working on a banking iOS utility project. We’d been the usage of an historical framework for Forms written in Objective-C, so we started out to appear into more recent and greater bendy alternatives. We determined that Eureka solves our trouble very well, however we additionally wished to create plenty of customized elements. In this article, I’d like to share our ride by way of outlining how we located Eureka, and how we wrote the customized elements.
What can we do with the assist of this structure framework? Eureka’s best strength lies in the many rows that are already section of the framework. You can use them straight out of the box, and you have a very vast choice.
To point out a few, there are: TextRow, DateRow, CheckRow, a range of formatted rows for numbers, listing rows, etc.
Installation
CocoaPods is a dependency manager for Cocoa projects.
Specify Eureka into your project's Podfile
:
Then run the following command:
Swift Package Manager
Swift Package Manager is a device for managing the distribution of Swift code.
After you set up your Package.swift show up file, you can add Eureka as a dependency by way of including it to the dependencies price of your Package.swift.
dependencies: [ .package(url: "https://github.com/xmartlabs/Eureka.git", from: "5.2.1") ]
Manually as Embedded Framework
Clone Eureka as a git submodule through walking the following command from your venture root git folder.
Open Eureka folder that was once created by means of the preceding git submodule command and drag the Eureka.xcodeproj into the Project Navigator of your application's Xcode project.
Select the Eureka.xcodeproj in the Project Navigator and affirm the deployment goal fits with your software deployment target.
Select your undertaking in the Xcode Navigation and then pick your utility goal from the sidebar. Next pick out the "General" tab and click on on the + button beneath the "Embedded Binaries" section.
Select Eureka.framework and we are done!
How it works
The fundamental constructing blocks are sections, rows and cells. They assist construct varieties logically and summary the complexity of UITableViews, which Eureka is needless to say constructed upon. These constructing blocks preserve you centered on the structure itself and no longer the implementation important points of the UITableViewDataSource and Delegate.
Sections
Sections are equal to UITableView sections. They crew logical components of shape factors underneath a frequent headline. They have a one of a kind that means in selectable sections, which we’ll cowl later.
Rows and Cells
Rows can be interpreted as the thing of the form, keeping the fee and the semantics of the item. They can preserve a typesafe value, can be disabled or be hidden. They can additionally have described customized properties.
Cells are the implementation of what the rows represent. They keep the UI. Many cells are described through the Eureka framework, however you can outline your own. Cells react to modifications in the row’s properties.
Each Row has its corresponding Cell, which has described its kind via generics. Generics are truly an necessary section of the framework. You can see them if you appear into the supply code.
For our very fundamental example, we will be imposing a easy shape with name, birthday and a boolean if one likes Eureka. We will additionally use a button row, which will pre-fill the first three fields. This sounds handy — and in truth it is, however offers us a exact introduction into writing Eureka Forms.
To get a higher notion of this, I made a screenshot of the app we’re building.
The code
The very fundamental code to construct the first area is as follows:
Firstly, be aware the type we’re inheriting from: FormViewController. It’s a subclass of UIViewController, no longer a UITableViewController. Don’t attempt to use the later one, it won’t work. Eureka will create a UITableView for you, or if you choose it now not to amplify to the complete view, you can add it yourself, and join the outlet to the FormViewController class’ tableView property.
Form objects (rows) are referred to with the aid of their tag names, which are strings. It’s accurate exercise to create a struct with constants for them, as they’re then simpler to reference them. That’s what the struct FormItems is for in my example.
The sections and rows are introduced to the structure via +++ and <<< respectively. It can be puzzling at first sight, however you in the end get used to it — and if you’re like me, you’ll like it how smooth it is.
Rows can have their initializer block, the place you can set a number of properties, like, for instance the title, placeholder textual content and value.
Button row and gaining access to the rows after they’re created
To reveal this, I’ll add a part with a button that units the three rows’ values to healthy Yoda :) and disable itself whilst his title is filled.
As we can see, the row has described a block of what to do when the phone is selected, by way of calling the approach onCellSelection. Two arguments are handed to this block — the phone and the row.
Inside the block, we reference the top three rows through their tags (look how the constants struct comes available this time). They’re optionals, so we want to unwrap them. Notice, that we are casting them as? RowOf<type>. That’s due to the fact we don’t simply care how they are applied inside, we simply want to comprehend (and operate) on them by means of their kind they’re holding.
Once we set the values, we want to name updateCell() on every row, to replace their look. Another component we do is to set the button phone disabled, whilst the identify holds the price “freeiOSCode”.
Notice, that we don’t specify it as a easy boolean, however alternatively we skip a block which evaluates if the row is disabled or not. The first parameter is an array that specifies which rows the cost is based on (by tags). The 2nd is a block which receives the shape as a parameter, so that we can function with it. evaluateDisabled() has to be referred to as to replace the button, however this is the solely region the place we have to do it, due to the fact after that it listens to the adjustments of the cells that the fee relies upon on.
Selection rows
We frequently want to allow the person to pick out from more than one values that are provided to them. Three approaches to do this, consist of imparting them as enter pickers, push row or to let them select from a so-called selectable section. We’ll exhibit their primary usage, however as with almost the whole lot in Eureka, you can personalize them. There are plenty greater of them, seem to be for them in the Eureka Example app — hyperlink at the end.
Input Pickers
Input pickers enable the person to choose an reply through supplying a picker that suggests up in the keyboard area. The code is easy if you desire to use the default telephone supplied by means of Eureka.
Push rows
Push rows are imparting the person a new ViewController to choose their preference from. Very appropriate for lengthy lists with greater than textual information.
Selectable sections
Selectable sections are different, in a way that rather of supplying the selections to the consumer in a separate view or viewcontroller, selectable area gives itself interior the form.
0 Comments