Skip to content

RAD Studio XE6 has been released!

I’m so excited with the release of the latest version of RAD Studio, Delphi and C++Builder!

RAD Studio XE6 contains Delphi XE6 and C++Builder XE6 and marks the completion of the vision to support building apps for all major desktop (Windows, Mac) and mobile (Android, iOS) operating systems from the same codebase: C++ and Object Pascal!

The new IDE has a new look-and-feel, it is a lot faster and has tons of new and improved features for both desktop VCL Windows and multi-platform FireMonkey programmers!

Today at 3PM CET (and two other time slots for other timezones) there will be special "RAD Studio XE6: First Look webinar" and you can register here.

If you cannot make it for today for the online webinar, make sure to register for bi-weekly Developer Direct webinars where we are going to explore new XE6 features in depth or come to one of the many live events across the globe to see the new RAD Studio XE6 in action LIVE!


Register for the RAD Studio XE6, C++Builder XE6 and Delphi XE6 First Look Webinar

Developer Direct ONLINE "FireDAC" demos available

I have promised to make the source code of FireDAC demos presented during the first Developer Direct ONLINE Season 4 session available.

FireDAC is the best database access framework for all major RDBMS systems for your DelphiC++Builderand Appmethod applications!

There are six projects in the download:

  • FireDAC Demo 101
  • FireDAC Monitoring
  • FireDAC Cached Updated
  • FireDAC Array DML
  • FireDAC Batch Commands
  • FireDAC Connection Recovery

The replay of the session is available at streaming.embarcadero.com server.

Source code for all demos is available for download from Code Central at http://cc.embarcadero.com/item/29832

Enjoy!

appmethod at MDevCon on Tour - Amsterdam, Tuesday, April 15th, 18:30

I’m very excited to invite you to my "True Native, Multi-Device Development from the Same Codebase" live session, which is part of the "MDevCon on Tour" series of live events across The Netherlands.

  • When? 15/04/2014 from 18:30 to 21:00 hours
  • Where? Trifork, Rijnsburgstraat 9-11, Amsterdam
  • Entrance? Free
  • For? Developers

The session is one of the many events organized as part of "appril festival 2014".

The equation is easy: apps + april = appril:-)

This is going to be my first time to show our new product for developing apps: appmethod

Appmethod is an ideal solution for efficiently developing for Android and iOS at the same time. You just use visual designer for designing the graphical user interface of your app, add some C++ or Object Pascal code and compile natively to iOS and Android from the very same project! That’s huge as you do not need to maintain two different versions of your app in different languages and environments!

It is going to be fun developing "fast apps fast"!

Bi-weekly EMEA Developer Direct! webinars start again!

"Developer Direct" live webinars start again. It is already the fourth season. We had a few months break and now we are coming again with slightly changed formula. 30 minutes live, demo oriented, hands-on session about coding every second Friday, starting this coming Friday, on April 11th, at 11am CET (Amsterdam time).

The agenda and registration links are available online at http://embt.co/embtdd4

We have six sessions planned for season 4:

  • 11 April 2014 - FireDAC
  • 25 April 2014 - Visual Live Bindings
  • 09 May 2014 - Language Features
  • 23 May 2014 - Cloud Clients (BaaS)
  • 06 June 2014 - App Tethering
  • 20 June 2014 - Going Mobile

I’m just preparing for the very first session next week about FireDAC - the database access framework in C++ and Object Pascal.

Please join me, Stephen Ball, Jon Harrison and other guest presenters next Friday online!

My C++ CodeRage 8 "Secure DataSnap Development" links and source code

During my recent CodeRage 8 "Secure DataSnap Development" session, I have promised to make the source code of both demos available for download. I have just uploaded them to Embarcadero CodeCentral!

This is a very simple demo that shows basic security in DataSnap, including secure communication with HTTPS protocol, encryption transport filters plus authentication and authorisation in code.

This demo builds on top of the first demo and shows using SSL, encryption and authentication/authorization in the context of the multitier database system with InterBase database at the server, accessed via FireDAC and server methods for retrieving data and applying updates back to the database. The client is a mobile app that is using FireDAC in-memory database tables and Visual LiveBindings for binding data to visual controls.

Marco Cantu, Delphi Product Manager, has blogged about this new approach to building multitier database apps here: http://blog.marcocantu.com/blog/delphi_xe5_update2_datasnap_firedac.html

During the session I have been also using OpenSSL for generating test security certificates. All relevant links to OpenSSL and custom batch file you can find in my blog post about my earlier Delphi CodeRage 8 "Secure DataSnap Development" session here: http://blogs.embarcadero.com/pawelglowacki/2013/10/16/40089

I would like to thank Jim Tierney, Embarcadero R&D Engineer, for providing me with the initial version of the second demo and Vsevolod Leonov, Embarcadero Technical Evangelist, for helping with C++ coding:-)

Lazy Form Creation Design Pattern

One of the most important things about any application, and especially mobile apps, is short start-up time. End user does not like to wait for too long for an app to start. In some cases, if the start-up time is excessively long a mobile app may not be accepted into an app store.

I have been building a lot of mobile apps recently for both Android and iOS in Delphi and found myself reusing the same "lazy form creation" design pattern, that I would like to share with you.

The idea is not new. Basically when your application starts, you only create the first form that is displayed, and all other forms are created when they are needed. Not earlier. This is especially important if your app is made of big number of different forms. Sometimes the app will be launched, forms created and never displayed.

The initial form ("splash screen") should be as light as possible. It could for example contain a big logo and and a caption to "tap the screen to begin".

In a simple case our mobile cross-platform Delphi project could contain just two forms: splash screen and the main screen. Start RAD Studio XE5 (or Delphi XE5) and create a new "FireMonkey Mobile Application - Delphi". Save All. Save the form as "uFormSplash" and project as "LazyApp". Click on the form and change its "Name" property in the Object Inspector to "FormSplash". Now we are going to add to the project the second form, the main app screen, that is going to be created in a "lazy" fashion. Click on the "File" menu, "New" and "FireMonkey Mobile Form - Delphi". This will add the second form to the project. Save All. Save the form as "uFormMain" and change its "Name" in the Object Inspector to "FormMain". We have the starting point ready.

Let’s add code to display the second form. We can just drop the button on the splash screen, set its alignment property to "alClient", change its "Text" property to "Welcome! Touch to begin!".

Click on "File", "Use Unit", select "uFormMain" and "OK" in order to add "uFormMain" unit to "uses" clause of the "uFormSplash" unit.

Now double-click on the button on the form and in the generated "OnClick" event write a line of code to show the other form.

uses uFormMain;

procedure TFormSplash.Button1Click(Sender: TObject);
begin
  FormMain.Show;
end;

Our application is now ready. We can click on "Run" green triangle button, in order build, deploy and launch the application on a mobile device of our choice: Android or iOS.

That’s a great start!

Click on the "Project" menu and select "View Source". You should see the main program file of the app. This is the place where the execution of the app begins.


program LazyApp;

uses
  System.StartUpCopy,
  FMX.MobilePreview,
  FMX.Forms,
  uFormSplash in 'uFormSplash.pas' {FormSplash},
  uFormMain in 'uFormMain.pas' {FormMain};

{$R *.res}

begin
  Application.Initialize;
  Application.CreateForm(TFormSplash, FormSplash);
  Application.CreateForm(TFormMain, FormMain);
  Application.Run;
end

Notice that before the "Application.Run" method is called, which basically starts the main application event loop - and the app starts to wait for user input - both forms of our application are created first. It would be faster to create just the splash form, that is going to be displayed first, and to create the second - main - form when it is needed. If we would have a big number of forms in our project that could significantly slow down our app start up time.

We can either just delete the line of code where "FormMain" is created or more elegantly we can go to the "Project" menu, select "Options" and then select "Forms" in the tree at the left side of the dialog. There are two lists of forms: those that are "auto created" and those that are just "available". Click on the "FormMain" and move it to the list of available forms. Click on "OK".

If we would run our application "as is" right now, we would get an error when trying to call the "Show" method on the "FormMain" object, because it does yet exist. Before we can call any of its methods, we need to create it and we just deleted the line of code that did this.

In most cases at this moment we would just write a line of code, just before the "FormMain.Show" method call, that creates the main form first. Our application would run again correctly. But this is not elegant approach.

Here comes the "Lazy Form Creation Design Pattern"!

Open the "uFormMain" unit in the editor . Move the global variable "var FormMain: TFormMain;" to the beginning of the "implementation" section of the unit. Change "FormMain" to "AFormMain". Now we are going to define in the same place where our global variable was, a global function "function FormMain: TFormMain" that returns an instance of the TFormMain class. In this way we do not need to modify the code in any other unit that accesses any of the methods of the TFormMain class because the name of the function is the same as the name of the global variable was. The last task is to implement the function so it checks if the "AFormMain" variable is not "nil", if it is "nil", creates the form, and returns the resulting form.


unit uFormMain;

interface

uses
  System.SysUtils, System.Types, System.UITypes, System.Classes, System.Variants,
  FMX.Types, FMX.Controls, FMX.Forms, FMX.Graphics, FMX.Dialogs;

type
  TFormMain = class(TForm)
  private
    { Private declarations }
  public
    { Public declarations }
  end;

function FormMain: TFormMain;

implementation

{$R *.fmx}

var
  AFormMain: TFormMain;

function FormMain: TFormMain;
begin
  if AFormMain = nil then
    AFormMain := TFormMain.Create(Application);

  Result := AFormMain;
end;

end.

I think this approach is elegant and I use it a lot in my projects. All forms are created in a lazy fashion and I do not need to worry in different places of my application logic if the form was already created or not.

I hope that you find this little thing useful!

Happy coding!

Fun with FireMonkey Gradients

Everybody loves colours. Great apps should use colours in clever and original ways. I have been recently spending a lot of time using Delphi XE5 for designing screens for mobile apps and must admit that I really like the way how iOS 7 is using colours and gradients. There is a lot of interesting information about iOS user interface design best practices at "iOS 7 Design Resources - iOS Human Interface Guidelines".

Gradients look especially cool. It is so easy to use C++ or Object Pascal with FireMonkey framework to build great apps that are using gradients. Before going into the details let’s get started with something super simple.

  • Start Delphi XE5. File, New, "FireMonkey Mobile Application - Delphi". Select "Blank Application" template. Click OK and then "Save All".
  • Drop "TRectangle" on the form and align it to occupy the whole screen by setting its "Align" property in the Object Inspector to "alClient".
  • Expand "Fill" property of the rectangle and change its "Kind" subproperty to "bkGradient".

Here we are! We have a nice grey gradient in our mobile Delphi FireMonkey app!

That was easy. Let’s have a look under the hood of the FireMonkey graphics architecture, before doing more fun with gradients.

"FireMonkey" - or more formally "FM Component Framework" - has been introduced to Delphi and C++Builder back in the XE2 version and it happily coexists with the VCL framework that was there since Delphi 1. Both share the same foundation and derive from the same base classes like "TComponent". The difference is that with the VCL you can only create applications for Windows and with the FireMonkey you can create apps not only for Windows, but also for Mac, iOS and Android.

FireMonkey framework hides the complexity of the underlying graphics APIs and provides an elegant object model to work with different 3D APIs on different platforms in the same way.

The main FireMonkey abstraction for graphics programming is "TCanvas" class (defined in the "FMX.Graphics" unit) that provides many virtual abstract methods for common painting operations like drawing different geometries, for example "DrawLine" or "FillRect". Another important abstraction is "TBrush" that is passed as a parameter to drawing methods of a canvas. "Fill" property of the rectangle component used in the first demo is of type "TBrush" and could be of different kinds: "bitmap", "gradient", "none", "resource" or "solid".

After changing the kind of a brush to "gradient" we can modify it interactively using the "Brush Designer". Clicking on the dropdown button next to "Gradient" property gives us a possibility to either define gradient animation or just edit the gradient.

For now let’s click on the "Edit" option. This will open "Brush Designer".

Select "Gradient" tab and we can customise the gradient further. Let’s keep the gradient type to "Linear" and play with colours and orientation. By default the gradient has the orientation "90" degrees, which means that colours are changing vertically from top to the bottom. In the simplest scenario gradient is defined by two colours. In the designer you can change both colours by clicking on one of the two dots at the bottom of the dialog. Moving these dots horizontally changes the offset of each colour, so we can adjust the gradient in a more precise way.

Here is my first attempt at creating iOS 7-like gradient:-)

"Brush Designer" did a great job in letting me to change the gradient in an interactive way, with no coding.

The next step will be to add a gradient animation. We could go to the Tool Palette and drop "TGradientAnimation" component onto the form, but it is faster and easier to create it from inside of the Object Manager.

Click on the "Gradient" drop down again and this time select "Create New TGradientAnimation…". This will add a gradient animation to rectangle component and the "PropertyName" of the animation will be already set to "Fill.Gradient".

Now we need to specify two gradients for "StartValue" and "StopValue" properties of the animation. As the "StartValue" I have used exactly the same value as in the "Fill.Gradient" property a moment ago and the "StopValue" has been made as the combination of some blue and yellow colors, so the start and stop gradients differ significantly, so it is easy to observe that the animation actually works.

Now we need to decide when do we want the animation to be displayed. The first and simple scenario I can think of is the situation when the gradient animation is displayed when user touches the screen. For this we need just one line of code. Double-click on the rectangle and in the generated "OnClick" event type in the following code:

GradientAnimation1.Start;

We also need to set "AutoReverse" property of the animation to "True", so the value of the gradient goes back to the start value, so we could display the animation again and again every time the end user touches the screen.

That’s it for now. I think I’m going to have some more fun with FireMonkey gradients in the future! Stay tuned!

The source code of this simple demo can be downloaded from the Code Central.

[Delphi Tuts] DataSnap "Hello World"

Welcome to "Delphi Tuts"! Your Delphi step-by-step tutorials!

In this tutorial we are going to use Delphi XE5 to build the simplest possible DataSnap client/server system. The difficulty level of this lab is “Hello World”.

This step-by-step tutorial is intentionally very simple, so even not experienced Delphi programmers should be able to build projects described here. The objective of this lab exercise is to get familiar with basic steps needed for building DataSnap servers and clients.

Our system will consist of a server and a client applications. They will use TCP/IP as the communication protocol. The server will be implemented as Delphi VCL Forms application and the client will be FireMonkey Desktop Application. The server will provide two methods that a client can invoke: “EchoString” and “ReverseString”. In this demo we are going to build a very simple client with just an edit and a button. When a user clicks on the button, the contents of the edit box will be sent to the server, reversed and the result will be displayed in the edit.

Delphi Tuts: DataSnap "Hello World"

Welcome to DELPHI TUTS!

I’m happy to announce that I’m starting a new series of step-by-step tutorials about Delphi programming: DELPHI TUTS!

Programming in Delphi is fun and I really love writing Delphi code. I think I’m addicted to Delphi. I have been passionate Delphi programmer since Delphi 1 and I’m only more and more enthusiastic about Delphi with every new release. There is no other tool on the market today like Delphi. With the latest release - Delphi XE5 - using one programming language, one framework, you can create native, compiled apps for the most important desktop (Windows, OS X) and mobile (iOS, Android) platforms on the market today. All from the same source code!

Every DELPHI TUTS episode will consist of a white paper, source code, video and a "Do-Say-See" presentation script. I will try to publish new episodes as frequently as I can. Sometimes I’m on the road presenting Delphi to programmers in different countries, sometimes very busy working with Embarcadero customers, but there are also times when I can do what I like the most: Delphi Programming! At these times there will be new DELPHI TUTS episodes created.

You might be wondering what are these "Do-Say-See presentation scripts". Do-Say-See is a document organized as a table with three columns. In the first cell of a row there is description of what you need to do, in the second - what you say in the meantime, and in the third - what you see on the screen. We are using similar scripts internally at Embarcadero and I find them very useful at life events. I hope that you will find them useful as well, when presenting Delphi live to other programmers!

Two years ago I have put together a similar series of Delphi programming tutorials called "Delphi Labs". I got a lot of positive feedback and it was great experience. It is really a lot of work to do, but it is rewarding. The original "Delphi Labs" were about using DataSnap architecture for creating scalable, multitier systems and I though that I need to start DELPHI TUTS from revisiting Delphi Labs and DataSnap technology. Many things have changed since Delphi XE. There is new FireMonkey framework for creating apps for different operating systems, there is new FireDAC database access technology, there are new Visual LiveBindings for building data-driven user interfaces, new REST client components and also a lot of improvements to DataSnap itself!

Let’s start! The first "Delphi Tuts" tutorial is "DataSnap Hello World". The simplest possible DataSnap client/server system!

Changing FireMonkey style at runtime

Last month Sarina DuPont blogged about loading custom FireMonkey styles on a mobile device at runtime ("How to load custom styles at runtime"). That’s a very interesting approach to compile a custom style as a resource into the mobile app.

This week there was another blog post by David I about the availability of the new great looking mobile FireMonkey InfoPower grid component for registered Delphi XE5 users and also a demo app available at Google Play Store. I have immediately installed this demo app on my Nexus 7 Android device to show it to programmers in Bratislava. A very nice option in the demo is a possibility to switch between FireMonkey styles at runtime.

I just could not resist building a quick demo app that would mimic the style switching behaviour of the InfoPower demo app:-)

When you install RAD Studio XE5 or Delphi XE5 there are also installed custom styles that you can use in your projects. By default you can find custom style files in C:\Users\Public\Documents\RAD Studio\12.0\Styles\ folder. There is "Dark" custom style for Android and "Black" and "Transparent" custom styles for iOS. Beyond these styles registered Delphi XE5 users can also download and use "premium" styles that are available as a separate download ("FireMonkey XE5 Premium Style Pack Is Now Available"). This will add "Jet" and "Diamond" styles for both Android and iOS to the mix. To make my life easier I have copied these premium style files to same folders as pre-installed styles.

Now I need to give a try. Instead of starting from scratch it is easier to adapt and extend an existing app that already has different types of mobile controls to see custom styling in action! The best demo for this is "MobileControls" project that is installed as part of Delphi XE5 install. In default installation you can find it in C:\Users\Public\Documents\RAD Studio\12.0\Samples\FireMonkeyMobile\Controls\ folder.

The first thing to do is to add all custom styles to this project as resources.

I have added all available styles to the project. The very important step here is to make sure that the "Resource Identifier" of every style matches exactly the filename of the style, because in code I’m going to refer to resources through their identifiers.

The "MobileControls" demo project contains main TabControl component with a number of tabs that showcase different types of mobile FireMonkey controls. Just right-click on the "TabControl1" and select to add a new "TTabItem". I have the "Text" property of this new tab item to "Styles" and added a TComboBox component that I have named "ComboBoxStyles".

In the form’s "OnCreate" event I need to add code to populate this combo box with different styles depending on the platform for which this project will be compiled. There are different styles for Android and different for iOS!

I also need a event handler of the "OnChange" event for the combo box to load a different style from a resource. You also need to make sure to add "FMX.Styles" unit to the "uses" clause of the form.  I have ignored iOS 7 styles for time being. There is also a small helper function "AddComboItem" that adds an item to combo box with a given text.

uses FMX.Styles;

procedure TForm1.AddComboItem(AText: string);
var lbi: TListBoxItem;
begin
  lbi := TListBoxItem.Create(ComboBoxStyle);
  lbi.Parent := ComboBoxStyle;
  lbi.Text := AText;
  ComboBoxStyle.AddObject(lbi);
end;

procedure TForm1.FormCreate(Sender: TObject);
begin
  AddComboItem('Default');

  if TOSVersion.Platform = pfAndroid then
  begin
    AddComboItem('Diamond');
    AddComboItem('Jet');
    AddComboItem('Dark');
  end
  else if TOSVersion.Platform = pfiOS then
  begin
    AddComboItem('Diamond');
    AddComboItem('Jet');
    AddComboItem('Black');
    AddComboItem('Transparent');
  end;

  ComboBoxStyle.ItemIndex := 0; // make sure "default" style is selected at start-up
end;

procedure TForm1.ComboBoxStyleChange(Sender: TObject);
var resname: string; style: TFMXObject;
begin
  if ComboBoxStyle.ItemIndex > 0 then  // first item is "default" style
  begin
    if TOSVersion.Platform = pfAndroid then
      resname := 'Android'
    else if TOSVersion.Platform = pfiOS then
      resname := 'iOS';

    resname := resname + ComboBoxStyle.Selected.Text;

    style := TStyleManager.LoadFromResource(HInstance, resname, RT_RCDATA);

    if style <> nil then
      TStyleManager.SetStyle(style);
  end
  else
    TStyleManager.SetStyle(nil);  // set the "default" style
end;

Save All. Now we can run this project on Android and on iOS to see the styles in action!

Let’s start from Android. This is how my demo looks on Android. Select the style first.

Android Default style:

Android Diamond style:

Android Jet style:

Android Dark style:

Now let’s try with iOS! This is how our app looks in the iOS Simulator. Select style first!

iOS Default style:

iOS Diamond style:

iOS Jet style:

iOS Black style:

iOS Transparent style:

That’s really powerful! Building mobile apps with Delphi XE5 is pure fun.

Bad Behavior has blocked 2 access attempts in the last 7 days.

Close