delphilittlethings-blog

[delphilittlethings-blog]

Sencha e Delphi

Recente fa la notizia che IDERA ha acquisito Sencha, leader nello sviluppo di framework per Web application. Sencha andrà quindi ad affiancare Embarcadero come provider di strumenti di sviluppo. Dalle parole di Atanas Popov, General Manager di Embarcadero, Sencha condivide la mission del gruppo IDERA di consegnare degli agili strumenti di sviluppo alla crescente comunità di programmatori. Questo, oltre ad ampliare i linguaggi supportati aggiungendovi JavaScript, farà nascere delle nuove sinergie con il portfolio dei prodotti già esistenti. Per esempio, proprio Sencha Ext JS, fornirà un potente Web Framework per RAD Studio a completamento dei framework nativi, compresi VCL per Windows e FMX per il Mobile. La notizia è dunque sicuramente positiva visto che entra in Embarcadero una fortissima competenza di sviluppo frontend web. In più la libreria JavaScript Ext JS, molto usata in ambito business, potrebbe costituire la controparte di Delphi per quanto riguarda lo sviluppo web. Esistono infatti già alcuni framework Delphi che usano Ext JS come frontend, il più famoso dei quali è la libreria UniGUI che consente di sviluppare applicazioni web usando l'approccio RAD tipico di Delphi. Per correttezza bisogna dire che la prima libreria Delphi ad utilizzare Ext JS come frontend era stata ExtPascal progetto ora abbandonato (autore Wanderlan Santos dos Anjos) ma ancora interessante (contiene anche un'implementazione di FastCGI). Personalmente, per lo sviluppo di applicazioni web, uso Ext JS fin dalla versione 3 e penso ancora che per costruire complesse app web sia lo strumento in assoluto più versatile e potente! La domanda sorge quindi spontanea, a quando l'integrazione di Ext JS con Delphi?? 😀

[delphilittlethings-blog]

Delphi Tokyo 10.2 has an awesome feature: Linux support! From now we are able to deploy our applications into a linux server. A very nice set-up guide for the linux environment can he found here; instead if you want to be able to use firemonkey and target a linux dekstop client (Ubuntu 16.04 LTS for example) check the FmxLinux project. With Delphi 10.2 we can create a REST Server (or simply a WebServer based on Indy) and export it as stand-alone console app or as apache module. For example, let's create a basic webserver:

Go on File > New > Other > WebBroker > WebBroker Application. Select Linux and then Apache module. In the last page we are asked to input the module name, which is very important.

We want to keep things very easy, so I won't focus on the WebModule (with Actions) and other things, you can find a lot of information on the doc. First of all start your linux server (hosted on Ubunutu, Virtualbox or whatever) and run the PAServer. Select Linux as target platform, give a build and then Deploy the project to the server.

Now move on linux (I assume that you already have Apache installed). Using cd go to the PAServer folder and reach the library; in my case I am going to /home/albertodev/PAServer/scratch-dir/{yourname}/projname/myDelphiApacheLib.so . Of course replace {yourname} with what you have on your machine :)

Now use cd /etc/apache2/mods-available and create 2 new files that will load our module into apache. The command touch creates new files on Linux so type touch myfirstmodule.load and touch myfirstmodule.conf. Now if you type ls you will see that those 2 file have been added in the folder!

Now type sudo nano myfirstmodule.load and you'll open a text editor. I really like this but you can use whatever you want. Now let's type this:

LoadModule moduleName /home/albertodev/PAServer/scratch-dir/albertodev-linux_server/projname/myDelphiApacheLib.so

Instead moduleName you have to type the name of your module. How to do it? Simple!

Double click the .so file in the project manager, right click, click on "View source" and copy the string value next to GModuleData name 'webbroker_module';. In my case the full path is:

LoadModule webbroker_module /home/albertodev/PAServer/scratch-dir/albdev-linux_server/projname/myDelphiApacheLib.so

Save all and close.

Now type sudo nano myfirstmodule.conf

and save the file with the following content:

&ltLocation /delphi/great/test/&gt SetHandler myDelphiApacheLib-handler &lt/Location&gt

The /delphi/great/test/ means that we will be able to reach our project at www.ip_address.com/delphi/great/test/. Then after the SetHandler type the library name and append the -handler. Save all and close.

We have almost finished! You just have to type on linux sudo a2enmod myfirstmodule (same name as myfirstmodule.conf), then sudo apache2ctl stop and finally sudo apache2ctl stop. My linux server is running on http://192.168.0.15/ so when I type http://192.168.0.15/delphi/great/test/ I can see this:

Really awesome!

[delphilittlethings-blog]

Delphi fullscreen splash android

Making Delphi apps with firemonkey is really awesome. I am going to show you a little step-by-step guide that will explain you how to create a fullscreen splash intro on Firemonkey. Please note that splash screens are supported only on Android, iOS doesn't need them. Let's get started!

Create a new Firemonkey application (File > New > Multi-Device App) or load a project that you already have.

Select Andorid as Target Platform

Go under Project > Options and then Application and you are going to see this:

Using Gimp, Photoshop, Paint or whatever you need to create some png icons with the given sizes or, if you don't care, just leave the default ones. The splash screen is a different story.

Create a new file with 2 pixel less than the needed one. For example you won't have to create a 426x320 but a 424x318 and then open this file with draw9patch. It is located at {delphi_install_folder}\Embarcadero\Studio\19.0\PlatformSDKs\android-sdk-windows\tools\lib. A 9patch file is a special resizeable image. Open with the draw9patch tool and draw the black lines like this:

I have added 2 long lines below and on the right (I have defined a stretchable ares) and small lines on the top and left. On the program you will be able to see a preview on the right of how your splash screen will look! :) Change only the lines on the top and on the left; the lines below and on the right must cover the entire margin.

Do the same procedure for each splash image. Once you are done go to Project > Deployment and uncheck this:

Now the last step! Rename every image Remote Name to splash_image_def.9.png as you can see here. You have to do this only for the splash screen images.

Click the Deploy

button and enjoy your full screen app!

[delphilittlethings-blog]

Delphi - How to plot a math function (step by step)

I have seen many times people asking for a working solution about the function plot and now I am showing you a very easy step-by-step guide! :) First of all I need to say that this method is able to plot any kind of function f(x) for example f(x) = x^2 - 2x - 1. Let's see what we need:

Create a new project and drop a container. It can be what you prefer, for example a TPanel or a TRectangle. I am going to use the latter but it's your choice, the important thing is that you can use the OnPaint event.

It is optional that you have a function parser (Parser10 or tbcParser) to parse a function. It is not needed but without this you'll have to hard code the function every time. Later we'll discuss about this.

I'll create an example with a new Firemonkey HD From (File > New > Multi-Device Application). Drop a TRectangle and align it to client; in the object inspector on the left expand the Fill property and change the Color to white. Add the following code above the declaration of your form.

type TDoubleVector = record x, y: double; end;

This will be te container of our functions. Now add these procedures to the private part of your form and press CTRL + Shift + C to enable the code completion. br>

private xmin, xmax, ymin, ymax: integer; h, w: single; procedure DrawAxes(aCanvas: TCanvas); function LogToScreen(LogPoint: TRealVector): TPoint; function ScreenToLog(ScreenPoint: TPoint): TRealVector;

Let's code! The first procedure will be used to draw the x/y axes and the other 2 functions will convert the function to a line in the TRectangle so that we can see the plot. Click on the Form in the Structure view and add a OnCreate event. Let's start with the first piece of code:

procedure TForm1.FormCreate(Sender: TObject); begin xmin := -5; xmax := 5; ymin := -5; ymax := 5; end; procedure TForm1.DrawAxes(aCanvas: TCanvas); var i: integer; pw, ph, w, h: single; begin //draw intermediate lines aCanvas.Stroke.Color := TAlphaColorRec.Silver; w := (Rectangle1.Width / (xmax*2)); h := (Rectangle1.Height / (ymax*2)); pw := w; ph := h; for i := 0 to (xmax*2)-1 do begin aCanvas.DrawLine(TPointF.Create(pw, 0), TPointF.Create(pw, Rectangle1.Height), 1); aCanvas.DrawLine(TPointF.Create(0, ph), TPointF.Create(Rectangle1.Width, ph), 1); pw := w + pw; ph := h + ph; end; //draw x and y axes aCanvas.Stroke.Color := TAlphaColorRec.Black; aCanvas.Stroke.Thickness := 2; w := Rectangle1.Width; h := Rectangle1.Height; aCanvas.DrawLine(TPointF.Create((w/2), 0), TPointF.Create((w/2), h), 1); aCanvas.DrawLine(TPointF.Create(0, (h/2)), TPointF.Create(w, (h/2)), 1); end; procedure TForm1.Rectangle1Paint(Sender: TObject; Canvas: TCanvas; const ARect: TRectF); begin DrawAxes(Canvas); end;

The procedure DrawAxes is very important; just click on the Rectangle1 and put the procedure inside its OnPaint event. In the first part we calculate the space between the lines of the grid [ Rectangle1.Width / (xmax*2) ] and the in a for loop I draw the lines. The second part is the same but note that I am using a dark thick stroke. The result should be this:

Now we have to create the 2 most important function of the program: they will convert the points of a given function into a line in our chart! Let's use this code. Note that this has a scaling feature that allows a nice view of our function in the chart.

function TForm1.ScreenToLog(ScreenPoint: TPoint): TDoubleVector; begin result.X := xmin + (ScreenPoint.X / Rectangle1.Width) * (xmax - xmin); result.Y := ymin + (ymax - ymin) * (Rectangle1.Height - ScreenPoint.Y) / Rectangle1.Height; end; function TForm1.LogToScreen(LogPoint: TDoubleVector): TPoint; begin result.X := round(Rectangle1.Width * (LogPoint.X - xmin) / (xmax - xmin)); result.Y := Rectangle1.Height - round(Rectangle1.Height * (LogPoint.Y - ymin) / (ymax - ymin)); end;

We have almost finished! Now we have to draw the equation f(x) = x^2 - 2x - 1 we mentioned above and this is the code. Please note that it is inside the OnPaint event of the Rectangle. If you need to change the equation of the function at some point (for example when you click a button) don't forget to call the Rectangle1.Repaint procedure! Let's see the code:

procedure TForm1.Rectangle1Paint(Sender: TObject; Canvas: TCanvas; const ARect: TRectF); var PrevPoint, CurrPoint: TPointF; x: integer; logx: double; logy: double; y: integer; punti: TDoubleVector; begin DrawAxes(Canvas); Canvas.Stroke.Color := TAlphaColorRec.Cadetblue; PrevPoint := Point(0,0); for x := 0 to (round(Rectangle1.Width) - 1) do begin punti.X := logx; punti.Y := logy; logx := ScreenToLog(Point(x, 0)).X; logy := logx*logx - 2*logx - 1; // f(x) = x^2 - 2*x - 1 punti.X := logx; punti.Y := logy; y := LogToScreen(punti).Y; CurrPoint := Point(x, y); Canvas.DrawLine(CurrPoint, PrevPoint, 1); PrevPoint := CurrPoint; end; end;

Ta daa! Now we have written a code that can plot any kind of function :) Please note that the important line is when I give logy a value which is the value of the function. Let's see the result of our work: below we will discuss it.

Use the logy to define your function and use logx as variable. For example: we wanted to plot x^2 - 2*x - 1 and so we have written logx*logx - 2*logx - 1. What if we want to plot x^2 - 2? Very easy! Just use the code above and replace this line: logy := logx*logx - 2 (x*x - 2 <=> x^2 - 2).

The code has logx and logy that allow us to do a scaling and plot the function. The "problem" is that we have to hard-code the function and assing a value to logy at compile time. What if we want this to be more flexible? For example: get the function x^2 - 2x + 3 from a TEdit and click a button to show the function. Well, we need a parser to parse the function. A very good one is Parser10 which is free (even if a bit old it's very good in our case) or tbcParser.

We can improve our work even more! :) Let's add the possibility to resize the plot. Add 2 buttons on the bottom on the form and give them the Text + (Name = ButtonZoomIn) and - (Name = ButtonZoomOut). Double click both and add the following code:

procedure TForm1.ButtonZoomInClick(Sender: TObject); begin //don't get negative numbers from the zoom + !! if ((xmax - 5) > 0) then begin xmax := xmax - 5; ymax := ymax - 5; xmin := xmin + 5; ymin := ymin + 5; Rectangle1.Repaint; end; end; procedure TForm1.ButtonZoomOutClick(Sender: TObject); begin xmax := xmax + 5; ymax := ymax + 5; xmin := xmin - 5; ymin := ymin - 5; Rectangle1.Repaint; end;

Now we have really finished! With this code we are able to zoom in and zoom out our function :D The important part is Rectangle.Repaint which is refreshing the content of our container (the Rectangle) with the new code. The 5 is the "scaling factor". You could declare at the beginning of the unit something like const scFactor = 5; (or whatever, it can be 10, 15... but I suggest you to keep the 5) and put scFactor instead of all those 5. Here's the final result:

This is an example of the great things you can do with Delphi! Imagine having this in your Andorid/iOS app, that would be great! You can addd Gestires to zoom in/zoom out with your fingers or support multiple functions in a single Rectangle (just draw and call Repaint). Stay tuned for more! Article by Alberto Miola.

[delphilittlethings-blog]

Combinatorics for Delphi!

[delphilittlethings-blog]

How to plot a math function in Delphi!

[delphilittlethings-blog]

Delphi is a great friend when you have to develop an Android/iOS app easily and quickly; once you have created an application you can distribute it using the Play Store (Android) or the Play Store (iOS). A very efficient tactic to gain money using your application is placing it in the stores at a low price or, better, place your app for free and put advertisement on it. Of course we can do it easily with Delphi. Let's do it step by step!

AdMob (by Google) is a mobile advertising company that works for Android and iOS apps; we are going to use this. First of all visit the official website and click Sign up on the top. You need to have a valid gmail account. AdMob requires:

AdWords: if you already have an account you're fine, otherwise a new one will be created for you.

AdSense: this is used to show advertisements (ads) on websites (Google ad banners come from here) and on mobile devices. You need an active account.

If you don't already have an AdSense account don't worry, there is a trick! In order to obtain an active AdSense account we need to sign up and put the URL of a website or blog that we own and wait that google approves it. What if our account doesn't get approved? Don't worry! AdMob requires an active AdSense account, so once you've signed up and put the URL of a website, you'll see in the home page that google is verifying your website. That is enough, now you can proceed and sign up to AdMob! :) You won't be able to use AdSense banners or get money from it until it's approved, but you will be able to get money from AdMob!

Log in in AdMob using your account and it will guide you with the "first installation" process. You will be asked to search your application (App Store or Play Store) and then you'll have to generate an ad unit. Once you've finished go in the home page, click Apps, selecy your app and copy this ID:

This is in italian but of course you'll see something like this in a different language! :) The Ad Unit Id is the most important code you have to copy/paste in the Delphi app. My application is called "Calcolo Combinatorio" and it the ad banner is linked to my app with that ID.

Now open Delphi! You have to select Android as Target Platform, drop a TBannerAd component and align it to Top or Bottom. Now we have to consider something REALLY important:

Do NOT click on your own ads in your app or you'll get banned from AdMob!

Once you've created the ad unit it needs some "activation time"; this means that you don't have to panic if you don't see your ads immediatly. Just wait a few time! The first time for example I had to wait for almost 20/30 minutes.

Do NOT give to the TBannerAd component a fixed width or height. If the component is too small (too small width for example), it won't appear and you'll get an error. Always set it to Top or Bottom (or Client or whatever) and set the AdSize as you prefer (I always do small). Never hard-code the size but let it be always aligned to something so you won't have problems

We are ready! We have our great Delphi app and the Ad Unit id. Let's go in the Structure view of the IDE, click on the Form, add an OnShow event and put the following code:

if (BannerAd.AdUnitID = '') then BannerAd.AdUnitID := 'ca-app-pub-7xxxxxxxxxxxxxxx/9xxxxxxxxx'; BannerAd.LoadAd;

Now we have to go on Project > Options > Entitlement List and check the AdMob Service so that it becomes True. To be sure that our ad works, set the TestMode of the BannerAd1 component to True. Now when you run yout app (be sure that you have an active internet connection) you should see the AdMob test banner. For example, if you set the size to Small should look like this:

If you can see the test banner, congratulations! You have just added an ad banner to your app :) Now to show the real ad banners that give you money, uncheck the TestMode property so that it's set to False. Click Project > Build and the Project > Deploy. You will be able to see the ads on your app! Here's an example with mine :)

I'll say it again: do NOT click of your own ads or you'll get banned from admob! If you click on them once (by mistake) don't worry but don't do it 2/3 times in a row or you'll risk.

Should I put ads in my app?

It depends! Consider the day (24 hours). If you have 20 active users that visit your app and click on the banner every time you'll gain X euro/dollars. If you have 100 not active users that use your app sometime and don't always (or never) click on the banner you'll get Y euro/dollars. In this case the value of X will be bigger than Y by a lot, so you are going to gain more money from the first scenario (only 20 users, but active). What I wanted to tell you above is that you don't have to care about the number of downloads of your app. Google AdSense cares about the active users that you have (= who views the ads or, better, who clicks on it)! If an user views your ad banner you are getting basically nothing but if he clicks on the banner you'll get some money. Basically: you don't gain money when the user views your ads (in some cases you do, but it's a veeery tiny amount) but you get money when they click on them. If you have an app that is used daily by a lot of users, that you have a big chance of clicks and then go for AdMob! Good luck and happy Delphi coding!

[delphilittlethings-blog]

Try out this Delphi component! More info in the video description.