Watch, Follow, &
Connect with Us

Embarcadero Blogs

Latest Posts


FireMonkey Styles, Part 1: Customizing the Style Template

During my Multi-Device and FireUI CodeRage 9 session this week, I got several questions on how to create a custom FireMonkey style. I thought I would follow up with a blog series on this topic, the first one covering how to customize the style templates that we provide.

Step 1: Open the Bitmap Style Designer

The Bitmap Style Designer can be used to create your own custom FireMonkey styles with support for different resolutions, such as 1x and 2x for iOS, and 1x, 1.5x, 2x and 3x on Android. To access the Bitmap Style Designer, go to Tools->Bitmap Style Designer in the IDE.

Step 2: Create a New Style

Inside the Bitmap Style Designer, select to create a new iOS style for FireMonkey.

Step 3: Export the Style Image from the iOS Template in the Bitmap Style Designer

Step 4: Edit the Graphic in an Image Editing Program

Open the style.png file in your image editing software, such as Photoshop. After you are done making changes, save the updated file as a .png file again.

  • Option a)    Make changes to graphic and in .style text file (Step #8)

Increase the height of the selected tab graphic. You will need to make this change in both the 1x and 2x graphic. Both of them can be exported from the Bitmap Style Designer and are named ’style.png’.

By making the TRectAnimation style changes (as documented in Step #8 below), the height of the normal (inactive) tab should be the same as the height of the active tab in your updated style.png graphic.

  • Option b) Make changes to graphic and skip Step #8

Increase the height of the active tab. For the normal (inactive) tab graphic, leave empty space on top. This is reflected in the two screenshots below. Skip step #8.

Step 5: Import the Updated Graphic into the Bitmap Style Designer

In the Bitmap Style Designer, expand the Images node. Select the style.png file and click the ‘Update’ button on the toolbar. Select your updated png file.

Step 6: Map the Updated Graphic to the Controls in the Bitmap Style Designer

Set the bitmap properties for the tab graphic. To change the bitmap selection, CTRL + click to redefine the image mask.

For Option b above, set the Bitmap (normal/inactive state) and BitmapFocused (active states) properties for the tab object with equal height in the Bitmap Style Designer.

Step 7: Save your template as a .style file.

Before saving the file as the .style file, save your style changes as a .vsf file (File->Save As->VCL Style/ FMX Style Template).  .vsf is the template format for FireMonkey styles in the Bitmap Style Designer, which means that you can reopen your style in the Style Designer if you want to make changes in the future.

Next, save your style as a .style file.


Step 8: Customize Style Behavior (only needed with Option 4a)

Open the .style file in the text editor of your choice. Add TRectAnimation for the Padding property for TTabStyleObject inside all tab item sections in the style file ("tabitemstyle", "‘tabitemcustom’", "tabitemmore" and others)

object TLayout
StyleName = ‘tabitemstyle’
object TTabStyleObject
object TRectAnimation
Duration = 0.000009999999747379
PropertyName = ‘Padding’
StartValue.Left = 0
StartValue.Top = 5
StartValue.Right = 0
StartValue.Bottom = 0
StopValue.Top = 0
StopValue.Left = 0
StopValue.Right = 0
StopValue.Bottom = 0
Trigger = ‘IsSelected=True’
TriggerInverse = ‘IsSelected=False’
end
end

Step 9: Apply the Style

Drop a TTabControl onto your form and align it to the client. Right-click on the control and add several TTabItems to it. Place a TStyleBook onto your form. Load the custom .style file that you just edited to it. In the Structure pane, select your Form, then set the StyleBook property to StyleBook1 in the Object Inspector. That will apply the custom style to your application. Deploy your application to your iOS device.

Here is what the style looks like at runtime:


posted @ Fri, 31 Oct 2014 17:42:54 +0000 by sarinadupont


New series! Developer Skill Sprints for Modernizing your VCL Apps

Developer Skill Sprints for Modernizing your VCL Apps
New Developer Skill Sprints starting on November 4!
The next round of Developer Skill Sprints are here and focused on VCL application development! Join us for this 8-part series on modernizing and extending your VCL apps with RAD Studio XE7. We’ll show you how to update to a modern look and feel, utilize multiple processor cores in your app, scale your solution and extend your VCL app functionality to mobile, wearables, and gadgets.


Live sessions every Tuesday
November 4 - December 23, 2014

6AM PST / 8AM CST / 9AM EST
11AM PST / 1PM CST / 2PM EST
5PM PST / 7PM CST / 8PM EST
Sessions in this new series include:

  • Modernize your VCL Application Look and Feel with Styles
  • Be User Friendly with Taskbar Buttons, Jump Lists and More
  • Fast Code Faster with Parallel Programming Library
  • Language and the RTL to the Rescue
  • Powerful Database Access with FireDAC and InterBase
  • Build Scalable, Multitier Solutions with EMS and DataSnap
  • Web Services Integration with REST Client and More
  • Extend Your VCL Apps to Mobile, Gadgets and Wearables
Download a free RAD Studio XE7 30-day license to follow along with the sessions and work with the sample code.


Have a question?
Give us a call at 1-888-233-2224 for more information and
limited time special offers

posted @ Thu, 30 Oct 2014 08:00:00 +0000 by Tim Del Chiaro


Using Pull To Refresh with TListview in RAD Studio XE7

In RAD Studio XE7, we added built-in support for pull to refresh for TListView. On iOS, this shows the spinning indicator as you are refreshing your list, and on Android, it shows the glow effect.

I built a quick demo that populates my listview with data from the cloud. New data is added via the BaaS web interface. After new data has been added via my BaaS backend, pulling the list down results in new data being added to the list and the toolbar label listing the number of new items that have been added.

This demo consists of the following components:

User Interface:

  • TListView, aligned to the client
    • populated with data using LiveBindings Designer
  • TToolbar, aligned to the top
    • TLabel, parented to TToolbar, aligned to contents; TextSettings->HorzAlign: Center
  • TToolbar, aligned to the bottom
    • TLabel, parented to TToolbar, aligned to contents; TextSettings->HorzAlign: Center; TextSettings->FontColor: Dodgerblue;
BaaS:
  • TKinveyProvider
    • AppKey, AppSecret and MasterSecret have been set; you can also use TApp42Provider and TParseProvider
  • TBackendQuery for querying existing data that lives in the cloud and was added via the BaaS web interface
    • connected to KinveyProvider; BackendService = Storage; BackendClassName = Recipes (this was defined inside my Kinvey account))
  • TRESTResponseDataSetAdapter
    • DataSet = FDMemTable1
    • ResponseJSON = BackendQuery1
    • Active = True
  • TFDMemTable
Other:
  • TTimer
    • Enabled = True
    • Interval = 1000
  • TActionlist
    • Right-click to open ActionList Editor
    • Add a New Action
    • Create OnUpdate event
Object Pascal Code:
unit Unit3;

interface

uses
  System.SysUtils, System.Types, System.UITypes, System.Classes, System.Variants,
  FMX.Types, FMX.Controls, FMX.Forms, FMX.Graphics, FMX.Dialogs, IPPeerClient,
  REST.OpenSSL, REST.Backend.ServiceTypes, REST.Backend.MetaTypes, System.JSON,
  REST.Backend.KinveyServices, FMX.ListView.Types, FireDAC.Stan.Intf,
  FireDAC.Stan.Option, FireDAC.Stan.Param, FireDAC.Stan.Error, FireDAC.DatS,
  FireDAC.Phys.Intf, FireDAC.DApt.Intf, System.Rtti, System.Bindings.Outputs,
  Fmx.Bind.Editors, Data.Bind.EngExt, Fmx.Bind.DBEngExt, Data.Bind.Components,
  Data.Bind.DBScope, Data.DB, FireDAC.Comp.DataSet, FireDAC.Comp.Client,
  REST.Response.Adapter, FMX.ListView, Data.Bind.ObjectScope,
  REST.Backend.BindSource, REST.Backend.ServiceComponents,
  REST.Backend.KinveyProvider, System.Threading, FMX.StdCtrls, System.Actions,
  FMX.ActnList;

type
  TForm3 = class(TForm)
    KinveyProvider1: TKinveyProvider;
    BackendQuery1: TBackendQuery;
    ListView1: TListView;
    RESTResponseDataSetAdapter1: TRESTResponseDataSetAdapter;
    FDMemTable1: TFDMemTable;
    BindSourceDB1: TBindSourceDB;
    BindingsList1: TBindingsList;
    LinkFillControlToField1: TLinkFillControlToField;
    Timer1: TTimer;
    BottomToolbar: TToolBar;
    Label1: TLabel;
    ActionList1: TActionList;
    Action1: TAction;
    TopToolbar: TToolBar;
    Label2: TLabel;
    Action2: TAction;
    procedure FormCreate(Sender: TObject);
    procedure ListView1PullRefresh(Sender: TObject);
    procedure Timer1Timer(Sender: TObject);
    procedure Action1Update(Sender: TObject);
  private
    { Private declarations }
        FCount : Integer;
  public
    { Public declarations }
  end;

var
  Form3: TForm3;

implementation

{$R *.fmx}
{$R *.iPhone4in.fmx IOS}

//execute Backend Query and populate Listview with Data on Application Launch
procedure TForm3.FormCreate(Sender: TObject);
begin
  BackendQuery1.Execute;
end;

//Custom Action for updating the Toolbar Label with Record Count Data
procedure TForm3.Action1Update(Sender: TObject);
begin
  if FCount > 0 then
      TAction(Sender).Text := Format ('Total Items: %d; New Items: %d', [
      (BindSourceDB1.DataSet.RecordCount), FCount])
  else
    TAction(Sender).Text := Format ('Number of Recipes: %d', [(BindSourceDB1.DataSet.RecordCount)]);
end;

//Enables Timer when PullRefresh Event Handler is called
procedure TForm3.ListView1PullRefresh(Sender: TObject);
begin
 Timer1.Enabled := true;

end;

//OnTimer Event for getting the BaaS Data Collection Record Count and executing the Backend Query
procedure TForm3.Timer1Timer(Sender: TObject);
begin
  FCount := BindSourceDB1.DataSet.RecordCount;
  BackendQuery1.Execute;
  FCount := BindSourceDB1.DataSet.RecordCount - FCount;
  Timer1.Enabled := False;
end;
end.

29 records in Recipes data collection. 29 Recipes shown in TListView

30 Records in Recipes Data Collection (1 newly added one). TListView shows new recipe; Toolbar Label lists total number of recipes and number of newly added recipes.


posted @ Wed, 29 Oct 2014 17:38:07 +0000 by sarinadupont


Voice Enable Your Android Apps

During CodeRage 9 I revisited adding voice support to Android apps. There are some updates from my previous skill sprint coverage on the topic and my original post on launching Google Glass apps via Voice. You can download the Samples and Components …

Read more »


posted @ Tue, 28 Oct 2014 18:06:00 +0000 by Jim McKeeth


App Tethering for VCL/FMX using WiFi and Bluetooth

Join me at CodeRage 9 for my sessions on App Tethering for VCL/FMX using WiFi and Bluetooth.

This session shows how to easily extend your existing Windows VCL and FireMonkey apps to connected devices using Application Tethering.

Object Pascal Technical Session #27 on Wednesday October 29 at 5:00pm - 5:45pm PDT

C++ Technical Session #35 on Thursday October 30 at 11:00am - 11:45am PDT

CodeRage 9 - The totally technical online conference for Delphi, C++Builder and RAD Studio dedvelopers is happening now! The free online conference is October 28-30.

Join us for CodeRage® 9, the totally free, totally technical online conference for software developers. This year’s conference brings you top industry speakers and technologists presenting on a wide variety of topics, all geared toward maximizing your software development productivity.
The theme for this year’s CodeRage conference is "You are the Developers of Things, Everything!" The conference will cover development topics for the Object Pascal and C++ programming languages with Delphi, C++Builder, RAD Studio and Appmethod. The conference will have two live stream tracks – one for Object Pascal and one for C++.

posted @ Tue, 28 Oct 2014 22:01:41 +0000 by Al Mannarino


CodeRage Delphi Schedule - Day 1 October 28, 2014

CodeRage Delphi Schedule - Day 1 October 28, 2014

Here’s the Delphi/Object Pascal schedule for the first day of the CodeRage online technical conference. Hope to see you there, online.

Not registered yet?
Click here to register for CodeRage and get access to all of these sessions and more!

TUESDAY, OCTOBER 28, 2014


posted @ Tue, 28 Oct 2014 21:49:52 +0000 by Al Mannarino


My "C++ 3D FireMonkey Programming" CodeRage 9 session

The CodeRage 9 virtual conference has started and I’m now online at the C++ track watching parallel programming session by David I. This is all about the new Parallel Programming Library introduced in C++Builder XE7, Delphi XE7, RAD Studio XE7 and Appmethod 2014 September release.

My C++ "3D FireMonkey Programming" session is next and I have just uploaded my live demos source code to Code Central here: http://cc.embarcadero.com/item/30030

There are three C++ demos built with Appmethod:

  • SimpleEarth3D demonstrates basics of building a multi-device, cross-platform, interactive 3D app. It is based on the Form3D and uses a sphere component and a texture material component for loading "Earth" texture graphics. There is also "float animation" component to rotate Earth and OnClick event on the sphere that shows how to add interactivity to your 3D view.
  • SpaceDebris is a demo that shows how to use TModel3D component to load arbitrary 3D geometry. Instead of using a Form3D, this project is using a regular Form class and displays 3D inside of the Viewport3D component. It is also using explicit Camera and Light components.
  • CustomerInfo3D project shows how to add a "3D-twist" to your traditional database, enterprise applications. The project contains two Layer3D components placed inside of the Viewport3D that are used to host traditional two-dimensional controls like labels and buttons to display data coming from the "Customer" in-memory FireDAC "TFDMemTable" component using Visual LiveBindings. Initially the app looks like a regular 2D app, but when you click on the "info" button in the customer information a secondary layer displays with a 3D rotation more details about the current customer.

The source code is of this demos is available at the http://cc.embarcadero.com/item/30030


posted @ Tue, 28 Oct 2014 12:44:04 +0000 by Pawel Glowacki


Fire UI and the Multi-Device Designer

During CodeRage 8 I had a session on Fire UI and the Multi-Device Designer. You can also check out my previous post on creating a custom FireUI view for the Moto 360. Fire UI is made up of three parts: Behavior Services – Runtime …

Read more »


posted @ Tue, 28 Oct 2014 09:18:36 +0000 by Jim McKeeth


CodeRage Delphi Schedule - Day 1 October 28, 2014



Here's the Delphi/Object Pascal schedule for the first day of the CodeRage online technical conference. Hope to see you there, online.

Not registered yet?
Click here to register for CodeRage and get access to all of these sessions and more!

TUESDAY, OCTOBER 28, 2014

Technical Session #1
5:00am - 5:45am PDT
Enumerators, IEnumerable™ and the Spring Framework
The IEnumerable interface is a powerful window into the collections framework on Spring for Delphi. It can be used to easily and quickly retrieve anything from a list. In this presentation, we start by looking at the basics of enumerators and then move on to see the power and capabilities of the IEnumerable interface. After this presentation, you won't want to access your lists any other way.
Level: Advanced
Nick Hodges
5:45am - 6:00am BREAK
Technical Session #2
6:00am - 6:45am PDT
Parallel Programming Library: Create Responsive Apps with Tasks, Futures and Parallel Loops
Create responsive applications that respond immediately to any user request using tasks, futures and parallel loops. Avoid long waits and unresponsive apps with the techniques introduced in this session.
Level: Intermediate
Danny Wind - Delphi Company B.V.
6:45am - 7:00am BREAK
Technical Session #3
7:00am - 7:45am PDT
Object Pascal Opening KeynoteWith the sweeping technical changes we are witnessing, from the huge growth of mobile to the gadgets explosion, Delphi remains a centerpiece with its solid Windows and VCL roots and its unique multi-device development capabilities. Listen to the Product Manager's view of where the product is today and where it is heading in the near future.
Level: All
Marco Cantù - Embarcadero
45am - 8:00am BREAK
Technical Session #4
8:00am - 8:45am PDT
FireUI and the Multi-Device Designer
FireUI and the Multi-Device Designer revolutionize how you develop apps. This session covers Behavior Services, TMultiView, the Multi-Device Designer, and creating and using a custom view. Take your multi-platform development to the next level with FireUI.
Level: All
Jim McKeeth - Embarcadero
8:45am - 9:00am BREAK
Technical Session #5
9:00am - 9:45am PDT
Designing Multi-Device Applications with FireUI and TMultiViewIn this session, we cover how to design user interfaces for multiple platforms using the new FireUI Multi-Device Designer and TMultiView component.
Level: All
Sarina DuPont - Embarcadero
9:45am - 10:00am BREAK
Technical Session #6
10:00am - 10:45am PDT
What's New in FireMonkeyThis session will take a look at some of the new developments in the FireMonkey framework for multi-device development.
Level: All
Darren Kosinksi - Embarcadero
10:45am - 11:00am BREAK
Technical Session #7
11:00am - 11:45am PDT
Creating Highly Connected Apps with Bluetooth and Kinvey
In this session, we show how to discover and interact with a Bluetooth LE device, such as a heart rate monitor, and track and store the received data in the cloud using a backend as a service (BaaS) provider such as Kinvey, Parse or App42. You'll also learn how to query existing cloud data using BaaS components such as BackendQuery and display the data in a visual chart.
Level: All
Sarina DuPont - Embarcadero
11:45am - 12:00pm BREAK
Technical Session #8
12:00pm - 12:45pm PDT
Modernizing VCL ApplicationsForm style to task bar buttons, from parallel library integration to BDE migration, from better coding styles to RTL new features: a collection of suggestions for migrating Windows VCL applications to Windows 8 and modernizing them alongside.
Level: All
Marco Cantù - Embarcadero
12:45pm - 1:00pm BREAK
Technical Session #9
1:00pm - 1:45pm PDT
What's New in the Object Pascal Language
Better support for dynamic arrays and intrinsic type helpers are two of the most recent language features, but this session will also go back to ARC memory management and offer a roundup of past additions, offering an overview of where Object Pascal is today.
Level: All
Marco Cantù - Embarcadero
1:45pm - 2:00pm BREAK
Technical Session #10
2:00pm - 2:45pm PDT
Enterprise Mobility Services: Introduction
Enterprise Mobility Services (EMS) is a new turnkey solution for today’s interconnected, distributed apps, offering an easy to deploy middleware server that hosts loadable custom API and data access modules. It’s based on open and standard technologies, including REST HTTP calls and JSON data formats, and provides major SQL database drivers along with an encrypted embedded and server SQL database. With its user management and authentication with user and API analytics, Enterprise Mobility Services is ideal for enabling secure access from mobile apps to Enterprise Databases. In this session, JT will discuss the motivations for EMS and introduce each of these compelling features.
Level: All
Johh Thomas - Embarcadero
2:45pm - 3:00pm BREAK
Technical Session #11
3:00pm - 3:45pm PDT
Exploring the Brain Computer InterfaceLearn how to use your brain as an input device with examples in Object Pascal using the Emotiv EPOC, the EEG neuroheadset.
Level: All
Jim McKeeth - Embarcadero
3:45pm - 4:00pm BREAK
Technical Session #12
4:00pm - 4:45pm PDT
Selecting Which Data Access Components (DAC) to Use with RAD Studio XE7
FireDAC, DataSnap, dbExpress, IBX and dbGo are all options available out of the box to Delphi/C++ Buider programmers. Faced with these choices how should you make the decision on which database access layer to use in your applications. Some of the factors that may influence your decision can include: 1) Ability to connect to particular database servers, 2) Support for server side database server features, 3) Component interfaces and style of programming required and 4) Support for advanced client side features. We'll take an overview look at all the different database technologies that come with XE7 and discuss how they compare in these regards and others.
Level: Beginning
Lachlan Gemmell
4:45pm - 5:00pm BREAK
Technical Session #13
5:00pm - 5:45pm PDT
Unit Testing and Profiling RAD Studio Apps
This session presents a new toolkit, based upon the core technology of the earlier award-winning and very popular SleuthQA system, that developers can successfully use to ensure their unit test coverage is complete, and that their apps are profiled to perform efficiently.
Level: All
Eivind Bakkestuen - NexusDB Pty Ltd
5:45pm - 6:00pm BREAK
Technical Session #14
6:00pm - 6:45pm PDT
Voice-Enable Your Android Apps
Learn how to add text-to-speech and voice recognition to your Android Apps. This session also covers voice launch on Google Glass.
Level: Advanced
Jim McKeeth - Embarcadero
The schedule of sessions & speakers are subject to change without notice.


Not registered yet?

posted @ Mon, 27 Oct 2014 17:04:00 +0000 by Tim Del Chiaro


VCL and FireMonkey UI Styling - Join me at CodeRage next week

I am doing 4 sessions next week at CodeRage 9. Two on Bluetooth and BaaS (Backend-as-a-Service) and two on multi-device development using FireUI and our new MultiView component.

As part of my multi-device session, I am also going to cover application styling across both VCL and FireMonkey apps. For example, you can apply custom styles such as our premium styles that are part of our bonus pack offering to both your existing VCL apps and companion mobile apps (like in the tethered app example below). This allows you to give your VCL apps and mobile apps a matching custom look.

Style shown: Emerald Dark for VCL and FireMonkey

CodeRage 9


posted @ Thu, 23 Oct 2014 20:38:54 +0000 by sarinadupont


Server Response from: BLOGS1