With the new FireUI Multi-Device Designer, you can easily create user interfaces across multiple devices using a master form to share all user interface code, then optimize inherited views for each target platform and device.
I have been answering questions from our customers who are using FireUI that I thought I would summarize into an FAQ to address the most common questions I have received.
Question: If I want the same UI Layout across all platforms, do I need to create a view?
![]()
Answer: No. If you desire to have the same UI across all supported target devices and platforms (with built-in support for native styling), and don’t want to tweak the UI for a specific platform or form factor, you can just work with the Master and not create any views. It is recommended to design most of your UI on the Master since it speeds up your development and app design process and then allows you to just fine tune the UI as needed. You can do all of your UI layout and design work and coding on the Master, and then just deploy to the device and platforms you like. When designing a multi-device application, it is recommended to use anchors and alignment. This ensures that your application scales properly and with the same intended layout across all target platforms. Anchors and alignment properties should be set for your UI controls on the Master (i.e. setting a TButton’s alignment property to Right), but you can change that alignment on a created view if desired. Working with the views allows you to fine tune the layout for a specific form factor or platform and execute platform or form factor specific code if desired.
Question: If I want to add iOS specific behavior, do I need to create a view for each iOS device?
Answer: No. If you create a single view for a platform, such as an iPhone 4” view, all UI and code associated with that iPhone 4” view will be shown on all iOS related target devices. That is only the case with a single view. If you want device specific behavior, then you would create a view for iPhone and one for iPad, or one for iPhone 3.5”, iPhone 4” etc. if you wanted to tweak the layout for each specific form factor. The view most closely matching the device size and resolution will automatically be selected at runtime. The same also applies to the other platforms such as Android.
For example, if you wanted your application to do something different on iOS than Android, you could create a single platform specific view. This means that as long as you create an iOS view, any iOS view specific code and UI will be executed and shown at runtime on all iOS devices. If you wanted to have different UI and behavior for iPad than iPhone, then you would need to create a separate view for each.
Question: What is the best way to make a common UI change across all created views?
Answer: If you want to make a change that applies to all created views, you should make that change on the Master. For example, if you want to change the title from ‘Label1′ to ‘App Title’ across all devices and target platforms, go to the Master and change the label text there.
If you made a change to the label text on a single view, such as an iPhone 4” view, then the text change you made on that view will persist even if you switch back to the Master view afterwards and change the text there. That is designed to allow users to fine tune the behavior for a specific view without auto-updating the view UI by changing the master once you have gone through the steps of making a change on a specific view.
Question: I want to add some common UI controls to just my tablet views. What is the best way to do that?
![]()
Answer: If you are adding UI controls (buttons, switches, lists etc.), I would recommend adding them to the Master, and toggling their Visible property to False if you don’t want them to appear on a specific view. For example, you may place 4 toolbar buttons on the Master, but only have room for 2 of them on your iPhone view, but have room for all 4 of them on your tablet views. In that case, you would go to the iPhone view and toggle the visibility to off for the other 2 controls.
When designing a multi-device application, it is recommended to use anchors and alignment. This ensures that you have the same positioning across all your views. Anchors and alignment properties should be set for your UI controls on the Master (i.e. setting a TButton’s alignment property to Right), but you can change that alignment on a created view if desired.
Question: I made a change on my Android 3.5” view that I don’t see reflected on my other views.
Answer: If you are changing the positioning of a button on a created view, such as an Android 3.5” view, you will need to make that change on the iOS view as well if you want to have the same positioning. To avoid having to make that change, it is recommended to set up your UI control alignment on the Master so that those properties are the same for all your created views.