In this example, we’re using some of the custom code features in Qwikly to
build a clone of the iOS calculator app. In particular, we’ll look at:
Using the Qwikly UI to:
Add 'Custom Action' interactions for the calculator buttons
Editing the UIViewController subclass in our generated app to:
Listen for our custom actions
Add custom code to perform the calculator’s calculations
Update the calculator display
Setting up the custom actions
Each button in the calculator will trigger a custom action. Doing this in the Qwikly
UI is easy:
Select the view
In the Interactions Inspector, click 'Add Interaction'
In the Action field, select 'Custom Action'
In the Selector field, enter a value
For our Calculator example, we’ll need the following custom actions set up:
The View Controller file
The CalculatorUiViewController class contains all of the custom code driving our calculator. Let’s
take a look at each section individually.
Next, we’ll set up some variables to keep track of our calculator’s state:
Our calculator will work by pushing float numbers and operators
onto a stack. When the user presses ‘equals’, the calculator will perform the
operations on the operands and display the result. So, we’ll need a function to
get the last operand in our stack:
Next, we’ll set up an event listener for our ‘numeral’-type custom actions. This listener
will be called whenever the user taps a numeric button:
Now it’s time to set up event listeners for 'add', 'subtract', and the other
operations at our user’s disposal. Notice that 'equals' is a special case.
When that action is received, it will call a calculateResult function
to perform the calculations before displaying the result in the UI.
Let’s look at that calculateResult method now:
Finally, we just need to handle our ‘clear’ custom action:
That’s it! After a few minutes in the Qwikly UI and just a few lines of code,
we are able to use our custom UI to build a functional Calculator!
For reference, here is the full CalculatorUiViewController file: