I had a great skill sprint on FireUI and designing apps for iPhone 6/6 Plus today. Lots of good questions from the audience. The webinar replay is available here. Below is a comprehensive list of FireUI resources to help you get started building your first multi-device application.
FireUI and the Multi-Device Designer
- RAD in Action Webinar - January 28th, 2015. Register here.
- Form Designer - Quick Overview
- FireUI - Frequently Asked Questions
- Designing Multi-Device Applications with FireUI and TMultiView - CodeRage 9 Recording
- The FireUI Multi-Device Designer in RAD Studio XE7 - Skill Sprint Recording
- FireUI and Behavior Services - CodeRage 9 Recording
- Guided Tour - Click the banner on the Start Here page in the IDE
TMultiView
- RAD Studio XE7 - the new TMultiView FireMonkey component
- Mobile Tutorial: Using a MultiView Component to Display Alternate Views of Information (iOS and Android)
- Mobile Product Samples that use TMultiView:
Custom Views
- Creating your own custom phone form factor view (Nexus 5)
- Creating a smartwatch view (Moto 360)
- Developing on the Samsung Gear Live Smart Watch
- Custom Views - Packages and Sample Projects from Jim McKeeth
- Using FireMonkey Views - Docwiki Article
iPhone 6/6 Plus
- Support for 2x and 3x styling - RAD Studio XE7 Update 1
- 3x (iPhone 6 Plus) styling for native and custom styles
- iPhone 6 Plus - how to add support for docked layout in landscape mode on a 5.5" device; Using this code, the TMultiView component will be shown as a docked panel in landscape mode on iPhone 6 Plus.
- Option 1:
- Open FMX.MultiView.pas and change
Result := Min(ThisDevice.MinLogicalScreenSize.Width, ThisDevice.MinLogicalScreenSize.Height) >= MinLogicaSizeForLargePhone
to
Result := Max(ThisDevice.MinLogicalScreenSize.Width, ThisDevice.MinLogicalScreenSize.Height) >= MinLogicaSizeForLargePhone // change Min to Max
Then add FMX.MultiView.pas to your project and rebuild your project
- Open FMX.MultiView.pas and change
- Option 2:
- Set up a TMultiView.OnPresenterChanging event for selecting a custom TMultiView mode:
procedure TForm8.MultiView1PresenterChanging(Sender: TObject; var PresenterClass: TMultiViewPresentationClass); var ScreenService: IFMXScreenService; begin if (MultiView1.Mode = TMultiViewMode.PlatformBehaviour) and (TDeviceInfo.ThisDevice.ID = 'iPhone55in') and TPlatformServices.Current.SupportsPlatformService(IFMXScreenService, ScreenService) and (ScreenService.GetScreenOrientation in [TScreenOrientation.Landscape, TScreenOrientation.InvertedLandscape]) then PresenterClass := TMultiViewDockedPanelPresentation; end;
- Set up a TMultiView.OnPresenterChanging event for selecting a custom TMultiView mode:
- Option 1:
Custom Styling
- How to apply a custom style to your multi-device application with Delphi, C++Builder and RAD Studio XE7:1. With the Master view selected, add a TStyleBook component to your form
2. On the Master view, select a Master style from the toolbar drop-down menu and then load the associated premium style from the style pack. For example, if you selected ëAndroidí as the Master style, load and assign the AndroidCoralCrystal.style file to your StyleBook on the Master view. When working with custom styles, each view must have a style, including the Master view.
3. Switch to each of your created views, select the TStyleBook component on that view and load the custom style related to that platform (Windows style for "Windows Desktop" view, Android style for "Android…" view, Mac style for "OS X Desktop" view, iOS style for "iPad" and for "iPhone" views). Note: If you have different views for iPad and iPhone, you need to load the same iOS style for each view.
4. If your application consists of multiple forms, you can set TStyleBook.UseStyleManager = True in each view in order to use the same custom styles for all other forms at runtime. If TStyleBook.UseStyleManager = True is set, then custom styles fully override system styles in all other forms (Form2, Form3etc.) that are part of your application for that particular platform. If TStyleBook.UseStyleManager = False is set, then new forms (Form2, Form3 etc.) will use the default platform style and for customization, you must add TStyleBook to Form2’s "Master" view and load each custom style again for all created views of the additional forms that are part of your application.
- FireMonkey Styles, Part 1: Customizing the style template
- FireMonkey Styles, Part 2: Creating a custom style for TSwitch
- Premium Style Pack (XE7 Bonus Item - see download page for details)