Develop with LUX
In this tutorial we will learn how to integrate Maxwell app with Xcode.
Lets start by creating a new project with xcode and then heading to the Maxwell design repo in github, from here you can find the instructions to install the lux dependency as an SMP library or Cocoapod.
Install the Maxwell App for free at http://maxwell.design
In this example we have configured cocoapods, but we recommend to use SPM dependency as these are officially supported by apple.
Once ready let’s head to the content view and import the lux framework.
We’ll be looking to the sample sample app present in some promotional materials. This simple app allows us to display the active Look in the application. It also display a basic bottom bar with three options to demo the bar surface.
So now let’s see how we can customize it.
Lets go back to the Maxwell app and select one look.
- Open the editor.
- From the editor start on the paper plane icon, this will open the publishing and sharing options.
- From here tap Xcode options and then Xcode init.
- This will copy the required configuration!
Now we can go back to the Xcode and select the scene delegate.
Right after configuring the main window, lets create a new setup look function, This will contain a simple do catch statement.
Inside it lets paste new code coming from the Maxwell app,
( If you are using the Simulator, you may need to select “get paste board” )
- Just paste it inside the try closure and we are ready!
Now we need to recompile the application. As you can see, the application is opened and it’s showing the look that we have just configured!
This is super cool, but this entire process might be a bit convoluted, especially when you are iterating through many UI changes.
For this we imagined a better way: Introducing LUX Streams.
Lux Streams
To access the LUX Streams simply tap on the antenna icon then from the Maxwell app,
- Then select stream,
- When ready select play.
If you are using the simulator, your might see an authorization dialog, accept it.
- The play button indicator will change to green once our connection is established!
From the demo app, we just need to add a configuration line to any lux file application to receive connections from any nearby Maxwell application.
Let’s go back to Xcode, from the scene delegate return to the setup look function and right after the try/catch block add the following command:
Look.tunning()
And that’s it, the next time the application launches it will automatically receive any LUX Stream from a nearby Maxwell App.
Now back to the Maxwell App, let’s hit play again. This time we get the registration dialog, let’s allow it.
When we see a green next to the play button, it means the connection is fully established, from here on any changes performed in the Maxwell will reflect live in the demo app. Let’s try it!
For example let’s select a different Look. Voila, it changed!
Now let make a changes to this Look specification: Notice how all changes are reflecting immediately in the demo application.
Lux Streams are far superior to Xcode canvas previews. The Canvas preview only work with individual and specialized Views during development, while the Maxwell+LUX SDK will update your entire application at any moment even after launch.
Further more, you can enable this functionality to your end users, so they can create their own looks from the Maxwell app or import it from your social channels, you can also allow users to import lux from the files app or from the photo library.
It’s very easy to change the Application Look at any moment. When required just call again the “look set data” function.
In order to receive updates for Look changes in any view, It’s enough to observe the changes in the Look state. Just by implementing this line, any View will be will recreated on every look update.
And that’s it.
This is how easy is to integrate Maxwell LUX in your coming application!
Continue here:
