Umur Gedik

Implementing Custom Controls With UIMenu in UIKit

2023-10-08T00:00:00+00:00

Recently I was working on a client project with a custom control in a navigation bar to show the associated menu on tap. UIKit supports this behavior out of the box with UIButton</code> when you associate an UIMenu</code> and set it’s showsMenuAsPrimaryAction</code>. </p>


let</span> button = UIButton(type: .system)
</span>button.setTitle(</span>"Menu Button"</span>, </span>for</span>: .normal)
</span>button.menu = UIMenu(
</span>    children: [
</span>        UIAction(
</span>            title: </span>"Command 1"</span>,
</span>            handler: { _ </span>in</span> }
</span>        )
</span>    ]
</span>)
</span>
</span>button.showsMenuAsPrimaryAction = </span>true
</span></code></pre>

    
    
</video>
</div>
If all you need is a simple button with a menu, use UIButton</code> by all means. If you want to have this behavior on your custom view it need to extend UIControl</code> instead of UIView</code>. Unfortunately there is no .menu</code> property on UIControl</code> class.</p>
Another way to showing menus is adding an UIContextMenuInteraction</code> to your view. But context menu interaction is triggered by long press gesture, and also it adds custom styling to your view while the long press gesture in progress. As the name suggests it is a context menu after all.</p>

let</span> label = UILabel()
</span>label.text = </span>"A Label"
</span>
</span>let</span> interaction = UIContextMenuInteraction(delegate: </span>self</span>)
</span>label.addInteraction(interaction)
</span>label.isUserInteractionEnabled = </span>true
</span>
</span>extension</span> ViewController: UIContextMenuInteractionDelegate {
</span>    </span>func </span>contextMenuInteraction(
</span>        _ interaction: UIContextMenuInteraction,
</span>        configurationForMenuAtLocation location: CGPoint
</span>    ) -> UIContextMenuConfiguration? {
</span>        UIContextMenuConfiguration(actionProvider: { suggestions </span>in
</span>            </span>let</span> actions = [
</span>                UIAction(
</span>                    title: </span>"Command 1"</span>,
</span>                    handler: { _ </span>in </span>}
</span>                )
</span>            ]
</span>
</span>            </span>return</span> UIMenu(children: actions)
</span>        })
</span>    }
</span>}
</span></code></pre>

    
    
</video>
</div>
UIControl</code> has a special treatment for UIContextMenuInteraction</code>. If we extend our custom view from UIControl</code> and enable context menu interaction via isContextMenuInteractionEnabled</code> and showsMenuAsPrimaryAction</code> we can achieve the same behavior as UIButton</code> has. </p>

class</span> CustomView: UIControl {
</span>    </span>func </span>setupViews() {
</span>        </span>let</span> label = UILabel()
</span>        label.text = </span>"A Label"
</span>        addSubview(label)
</span>
</span>        </span>// setup layout constraints...
</span>
</span>        </span>// Enable context menu interaction
</span>        isContextMenuInteractionEnabled = </span>true
</span>        showsMenuAsPrimaryAction = </span>true
</span>    }
</span>
</span>    </span>lazy var</span> menuConfig = UIContextMenuConfiguration(actionProvider: {
</span>        suggestedActions </span>in
</span>        </span>let</span> actions = [
</span>            UIAction(
</span>                title: </span>"Command 1"</span>,
</span>                handler: { _ </span>in</span> }
</span>            )
</span>        ]
</span>
</span>        </span>return</span> UIMenu(children: actions)
</span>    })
</span>
</span>    </span>override func </span>contextMenuInteraction(
</span>        _ interaction: UIContextMenuInteraction,
</span>        configurationForMenuAtLocation location: CGPoint
</span>    ) -> UIContextMenuConfiguration? {
</span>        menuConfig
</span>    }
</span>}
</span></code></pre>

    
    
</video>
</div>
Keep in mind UIControl</code> already conforms to UIContextMenuInteractionDelegate</code> protocol, and isContextMenuInteractionEnabled</code> property automatically adds UIContextMenuInteraction</code> to the control. Make sure to check the delegate protocol</a> for further customizations of the interaction.</p>



Uploading files with URLSession using multipart requests
2023-09-26T00:00:00+00:00
While working on my macOS Mastodon client Fil, I needed to upload media files to post statuses with images and videos attached. Mastodon API allows file uploads with multipart/form-data</code> encoded http request body. If you ever develop web applications with forms in it, this is what basically browsers do that when you have files in your forms by default. Encoding is pretty straight forward and a simple implementation in swift doesn’t takes more than 30 lines of code. So instead of including Alamofire in your next project just to support file uploads, you can write it yourself or copy paste the one I share in this post.</p>
Multipart/form-data requests consist of a magic boundary</strong> value and list of values (form fields) separated by that boundary in the body of the request. Boundary acts as a field separator, so that the server can understand where each field begins and ends. This is espacially important since these types of requests usually embeds binary data in the body of the request, so that simple new line characters like \r\n</code> may not be sufficient.</p>
A simple request representing two String</code> fields (title</code> and description</code>) may look like this:</p>
POST /upload/image HTTP/1.1
</span>Host: api.example.com
</span>Content-Type: multipart/form-data; charset=utf-8; boundary=__MY_MAGIC_IDENTIFIER__
</span>
</span>--__MY_MAGIC_IDENTIFIER
</span>Content-Disposition: form-data; name="title"
</span>
</span>My blog title
</span>--__MY_MAGIC_IDENTIFIER
</span>Content-Disposition: form-data; name="description"
</span>
</span>Some description about my blog
</span>--__MY_MAGIC_IDENTIFIER--
</span></code></pre>
In this example Content-Type</code> is set to multipart/form-data</code> with utf8 encoding and the boundary is defined as __MY_MAGIC_IDENTIFIER__</code>, but you can choose your own identifier. In my app this is set to __X_FIL_MULTIPART_BOUNDARY__</code>. Also the underscores are optional and stylistic in these examples.</p>
Actual httpBody</code> of the URLRequest</code> starts just after the empty line after the headers. In this example the body starts with the boundary separator</strong>. Boundary separators are the magic boundary identifier prefixed with 2 dashes “--</code>”. After the separator, we should define which field of the form data we are going to include with Content-Disposition</code> attribute. It’s format self explanatory, and arguments (just like headers) are separated with “;</code>” character. For string encoded fields this definition is sufficient, but for file fields, file name can be defined with filename="myfile.jpg"</code> argument.</p>
After all the form fields httpBody</code> should include a terminator to indicate there are no more data is provided. Terminator is the magic boundary identifier surrounded with 2 dashes “--</code>” on both sides; like “--__MY_MAGIC_IDENTIFIER__--</code>”. Make sure this terminator is only included at the end of the body, and do not put “--</code>” at the end of the field separators</strong>.</p>
We can create a swift struct to abstract these details from our networking code. To start with supporting string fields:</p>
// MultipartFormData.swift
</span>
</span>struct</span> MultipartFormData {
</span>    </span>public let</span> boundary = </span>"__MY_MAGIC_IDENTIFIER__"
</span>    </span>private var</span> data = Data()
</span>
</span>    </span>public var</span> contentType: String {
</span>        </span>"multipart/form-data; charset=utf-8; boundary=</span>\(boundary)</span>"
</span>    }
</span>
</span>    </span>mutating func </span>addString(_ value: String, forField field: String) {
</span>        </span>var</span> fieldString = </span>"--</span>\(boundary)</span>\r\n</span>"
</span>        fieldString += </span>"Content-Disposition: form-data; name=</span>\"</span>\(field)</span>\"\r\n</span>"
</span>        fieldString += </span>"Content-Type: text/plain; charset=utf-8</span>\r\n</span>"
</span>        fieldString += </span>"</span>\r\n</span>"
</span>        fieldString += </span>"</span>\(value)</span>\r\n</span>"
</span>
</span>        data.append(fieldString.data(using: .utf8)!)
</span>    }
</span>
</span>    </span>mutating func </span>makeBody() -> Data {
</span>        </span>let</span> terminator = </span>"--</span>\(boundary)</span>--"
</span>        data.append(terminator.data(using: .utf8)!)
</span>        </span>return</span> data
</span>    }
</span>}
</span></code></pre>
As you may notice, instead of “\n</code>” HTTP use “\r\n</code>” for empty lines. Every field immediately starts with the boundary separator</strong> end ends with an empty line. And the terminator</strong> in the makeBody</code> method does not includes an empty line at the end. We can use this helper with URLSession</code> as:</p>
var</span> formData = MultipartFormData()
</span>formData.addString(</span>"Umur Gedik"</span>, forField: </span>"name"</span>)
</span>formData.addString(</span>"Turkey"</span>, forField: </span>"location"</span>)
</span>
</span>var</span> req = URLRequest(url: myApiUrl)
</span>req.setValue(formData.contentType, forHTTPHeaderField: </span>"Content-Type"</span>)
</span>req.httpBody = formData.makeBody()
</span>
</span>let</span> (data, response) = </span>try</span> await URLSession.shared.data(</span>for</span>: req)
</span></code></pre>
Adding support for file uploads are not that difficult. It requires an additional Content-Type</code> attribute for the file field to let the server know what kind of file data we are sending. An example HTTP request including a file looks like this:</p>
POST /upload/image HTTP/1.1
</span>Host: api.example.com
</span>Content-Type: multipart/form-data; charset=utf-8; boundary=__MY_MAGIC_IDENTIFIER__
</span>
</span>--__MY_MAGIC_IDENTIFIER
</span>Content-Disposition: form-data; name="name"
</span>
</span>Umur Gedik
</span>--__MY_MAGIC_IDENTIFIER
</span>Content-Disposition: form-data; name="avatar"; filename="avatar.jpg"
</span>Content-Type: image/jpeg
</span>
</span><BINARY JPEG DATA IS NOT SHOWN HERE>
</span>--__MY_MAGIC_IDENTIFIER--
</span></code></pre>
Implementation in our MultipartFormData</code> should append the given Data</code> as it is to the body after the separator and the Content-Disposition</code> like:</p>
// MultipartFormData.swift
</span>
</span>struct</span> MultipartFormData {
</span>    </span>// ...
</span>    </span>mutating func </span>addFile(named name: String, data fileData: Data, mimeType: String, forField field: String) {
</span>        </span>var</span> fieldString = </span>"--</span>\(boundary)</span>\r\n</span>"
</span>
</span>        </span>// Here we add filename as well
</span>        fieldString += </span>"Content-Disposition: form-data; name=</span>\"</span>\(field)</span>\"</span>; filename=</span>\"</span>\(name)</span>\"\r\n</span>"
</span>        fieldString += </span>"Content-Type: </span>\(mimeType)</span>\r\n</span>"
</span>        fieldString += </span>"</span>\r\n</span>"
</span>
</span>        data.append(fieldString.data(using: .utf8)!)
</span>
</span>        </span>// we append the given file data as it is immediately after the details
</span>        data.append(fileData)
</span>        data.append(</span>"</span>\r\n</span>"</span>.data(using: .utf8)!)
</span>    }
</span>
</span>    </span>// ...
</span>}
</span></code></pre>
addFile</code> method introduces filename</code> and mimeType</code> to inform the server about the details of our file to upload. mimeType</code> can be found by UTType</code> in UniformTypeIdentifiers</code> module. Example usage may look like this:</p>
import </span>UniformTypeIdentifiers
</span>
</span>var</span> formData = MultipartFormData()
</span>formData.addString(</span>"Umur Gedik"</span>, forField: </span>"name"</span>)
</span>formData.addString(</span>"Turkey"</span>, forField: </span>"location"</span>)
</span>
</span>// assuming we have a file URL
</span>let</span> data = </span>try</span> Data(contentsOf: fileURL)
</span>let</span> typeIdentifier = UTType(filenameExtension: url.pathExtension)
</span>let</span> mimeType = typeIdentifier.preferredMIMEType
</span>
</span>formData.addFile(named: fileURL.lastPathComponent, data: data, mimeType: mimeType, forField: </span>"avatar"</span>)
</span>
</span>var</span> req = URLRequest(url: myApiUrl)
</span>req.setValue(formData.contentType, forHTTPHeaderField: </span>"Content-Type"</span>)
</span>req.httpBody = formData.makeBody()
</span>
</span>let</span> (data, response) = </span>try</span> await URLSession.shared.data(</span>for</span>: req)
</span></code></pre>
For the reference here is the full implementation of our MultipartFormData</code>:</p>
// MultipartFormData.swift
</span>
</span>struct</span> MultipartFormData {
</span>    </span>public let</span> boundary = </span>"__MY_MAGIC_IDENTIFIER__"
</span>    </span>private var</span> data = Data()
</span>
</span>    </span>public var</span> contentType: String {
</span>        </span>"multipart/form-data; charset=utf-8; boundary=</span>\(boundary)</span>"
</span>    }
</span>
</span>    </span>mutating func </span>addString(_ value: String, forField field: String) {
</span>        </span>var</span> fieldString = </span>"--</span>\(boundary)</span>\r\n</span>"
</span>        fieldString += </span>"Content-Disposition: form-data; name=</span>\"</span>\(field)</span>\"\r\n</span>"
</span>        fieldString += </span>"Content-Type: text/plain; charset=utf-8</span>\r\n</span>"
</span>        fieldString += </span>"</span>\r\n</span>"
</span>        fieldString += </span>"</span>\(value)</span>\r\n</span>"
</span>
</span>        data.append(fieldString.data(using: .utf8)!)
</span>    }
</span>
</span>    </span>mutating func </span>addFile(named name: String, data fileData: Data, mimeType: String, forField field: String) {
</span>        </span>var</span> fieldString = </span>"--</span>\(boundary)</span>\r\n</span>"
</span>
</span>        </span>// Here we add filename as well
</span>        fieldString += </span>"Content-Disposition: form-data; name=</span>\"</span>\(field)</span>\"</span>; filename=</span>\"</span>\(name)</span>\"\r\n</span>"
</span>        fieldString += </span>"Content-Type: </span>\(mimeType)</span>\r\n</span>"
</span>        fieldString += </span>"</span>\r\n</span>"
</span>
</span>        data.append(fieldString.data(using: .utf8)!)
</span>
</span>        </span>// we append the given file data as it is immediately after the details
</span>        data.append(fileData)
</span>        data.append(</span>"</span>\r\n</span>"</span>.data(using: .utf8)!)
</span>    }
</span>
</span>    </span>mutating func </span>makeBody() -> Data {
</span>        </span>let</span> terminator = </span>"--</span>\(boundary)</span>--"
</span>        data.append(terminator.data(using: .utf8)!)
</span>        </span>return</span> data
</span>    }
</span>}
</span></code></pre>


Distribute macOS Applications as DMG Images
2023-09-11T00:00:00+00:00
Distributing apps as  .dmg</code> files requires the developer to sign the .dmg</code> file with a Developer ID Application certificate and notarizing it.</p>
Prerequirements</h2>

A provisioning profile and certificate with type  Developer ID Application</li>
https://developer.apple.com > Account > Certificates, IDs & Profiles > Profiles</li>
Install the certificate in your Keychain (double clicking the certificate file will install)</li>
Make sure you use the correct provisioning profile to build your archive</li>
</ul>
Archiving</h2>
Archive your application in Xcode by Product > Archive. When archive build is complete Xcode will open a window called Organizer</strong> (Xcode menu Window > Organizer) where you can sign and export your  .app</code> file.</p>
Click  Distribute App and then select  Developer ID as your method of distribution. In the next screen select Export</strong> (sign without notarization) as your destination, we will notarize the .dmg</code> file not the .app</code> export.</p>
Creating DMG</h2>

You can use Disk Utilities</strong> app in your mac to create an empty  .sparsebundle</code> disk image</li>
Mount the disk image (double-click) and open the volume (should be listed at Finder’s sidebar)</li>
Configure the display options of the finder like; show as icons, icon size, snap to grid, and background.</li>
Don’t forget to create a link to  /Applications</code> directory to easy drag n drop install</li>
Close the finder window when it looks good</li>
Get back to Disk Utility</strong> app and show select Show All Devices</strong> from the sidebar icon</li>
On the sidebar find the mounted sparsebundle image</li>
Right-Click and select create image on the  container and choose compressed and save as .dmg</li>
</ol>
Signing and Notarizing</h2>
First we need to sign  .dmg</code> file just like the  .app</code>. These commands doesn’t produce any output when it is successfull.</p>
# Sign the .dmg file with the certificate mentioned in the prerequirements section
</span>$ codesign --sign "Developer ID Application: <Your Name> (Team ID)" path/to/application.dmg
</span>$ codesign --verify path/to/application.dmg
</span></code></pre>
To notarize the .dmg</code> we need to run  notarytool. notary tool requires either AppStoreConnect API Key or an application specific password. As you may guessed API key can be obtained from App Store Connect page. Application specific password can be created at Apple ID.</p>
# If you are using application specific password
</span>$ xcrun notarytool submit --wait --apple-id "<apple-id-email>" --password "<app-specific-password>" --team-id TEAM_ID MyApp.dmg
</span>
</span># If you are using API key
</span>$ xcrun notarytool submit --wait --key <path-to-key-file> --key-id <10 char key id> --issuer <issuer id UUID> MyApp.dmg
</span>> Successfully received submission info
</span>>   createdDate: 2023-09-11T19:38:24.532Z
</span>>   id: 4667a4a7-xxxx-xxxx-xxxx-d83eb3124f84
</span>>   name: MyApp.dmg
</span>>   status: Accepted
</span>
</span># If you don't want to wait until the notarization complete ommit --wait parameter
</span># In that case output will contain the submit ID you can use that ID to query
</span># the status of the notarization
</span></code></pre>
After the notarization is complete and status is Accepted</strong>, .dmg</code> file needs to be stapled. Apple notarization process creates a ticket after a successful submit. To attach that ticket to our application (in this case our .dmg file):</p>
$ xcrun stapler staple MyApp.dmg
</span>
</span># To test signing & notarization is successful
</span>$ spctl -a -t open --context context:primary-signature -v MyApp.dmg
</span>
</span>> MyApp.dmg: accepted
</span>> source=Notarized Developer ID
</span></code></pre>
If the output from  spctl</code> command is different (as in rejected) you maybe skip a step, please make sure everything is done in order.</p>
Happy deployments!</p>