قالب وردپرس درنا توس
Home / IOS Development / Build a form library

Build a form library



Over the past few weeks, we have conducted a series of ten Swift Talk episodes following the process of building a declarative form library.

For those who have not followed, we would like to take the opportunity to review our original design goals and give you an idea of ​​what this library is already capable of.

When we started building the library, we had two major design goals in mind:

  • Forms must be written with a fully declarative syntax.
  • The library should automatically synchronize the underlying data with the form's user interface – a difficult task!

When using forms, we often need to update multiple interface elements in response to a change in underlying data.

Switching hotspot on or off has a number of effects:

  1. Changes the Personal Hotspot Status Tag on the main settings screen.
  2. It shows or hides the section that contains the "Network Name" and "Password" fields.

Writing this logic by hand quickly becomes cluttered and risks introducing errors.

To create this form with our library, we begin by defining the underlying data structures:

  struct Settings {
Var hotspot = Hotspot ()

was hotspotEnabled: String {
return hotspot.isEnabled? "On off"
}
}

struct hotspot {
was erEnabled: Bool = true
was password: string = "password"
was networkName: String = "My Network"
}

Now we enter the form's user interface using a declarative API that uses Swift key paths to bind the user interface to the data. Hotspot screen is defined as follows:

  la hotspotForm: Form  =
sections ([
        section([
            controlCell(title: "Personal Hotspot", control: uiSwitch(keyPath: .isEnabled))
        ] footer:  .enabledSectionTitle),
section ([
            nestedTextField(title: "Password", keyPath: .password),
            nestedTextField(title: "Network Name", keyPath: .networkName)
        ] erVisible:  .isEnabled)
])

The switch is bound to the feature isEnabled and the subfoot below the switch is bound to the calculated enabledSectionTitle property, which allows us to make the footer dependent on the hotspot enabled state. Furthermore, the entire second part is shown or hidden by tying its visibility to the property isEnabled .

The main setting form sets the hotspot settings as follows:

  la settingsForm: Form  =
sections ([
        section([
            detailTextCell(title: "Personal Hotspot", keyPath: .hotspotEnabled, form: bind(form: hotspotForm, to: .hotspot))
        ])
])

The additional label on the right side is linked to the calculated hotspotEnabled property that signals the hotspot's current state on the main screen without having to navigate to the hotspot setting screen.

If you'd like to learn more about this approach, check out the Swift Talk series for a form of library, the first three and the last two episodes are publicly available.

The complete series is available to subscribers.


Source link