Archive

Archive for April 11, 2015

Creating CSS animations at runtime

April 11, 2015 2 comments

Smart Mobile Studio has a lot of cool features. For instance, did you know that SMS automatically maps your pascal class-names to your css class-names? It quite clever and very effective.

In the example above we animate a glowing, red 12px cloud around the button. It slowly fades into full red, then it fades back out into nothingness.

But despite all the tricks and power in Smart Mobile Studio, a programming system is only as good as its biggest weakness. And while it sounds like a paradox, CSS is Smart’s weakness and strength.

Power to CSS

CSS is fantastic once you really understand what it can do. It can take a while before you fully understand just how awesome the modern browser has become; there is a reason we decided to target the browser like we do – because it’s practically an operative system in its own right.

Tasty but simple effects can play a major role when done right

Tasty but simple effects can play a major role when done right

But while Smart creates HTML elements by code, relieving you of the ultimate boring task of writing HTML structures and tinkering with inconsistencies between browsers — our CSS styles are still a 100% manual affair.

A new take on CSS

The problem with generating CSS from code has been twofold:

  • Injecting CSS rules into an existing stylesheet is very tricky
  • The ability to edit and ship an application with “a theme” trumps any notion of auto generated CSS

Well for the past two versions of Smart we have shipped the product with a stylesheet class. This class basically creates a fresh new style-sheet, and allows you to register rules, effects, backgrounds and whatever you need – at runtime.

I decided to give this class a make-over, basically re-writing it from scratch to take height for Internet Explorer. I also started to tinker with something very exciting, namely an easier way of generating CSS effects in your code.

Generating cool effects is now super easy

Generating cool effects is now super easy

And this is the important part. You don’t want to create ordinary styles by code, that belongs in the standard CSS stylesheet; What you want to control by code is effects programming and custom CSS tailored for controls “on demand” and executed immediately.

First, let us take a look at the CSS generation code:

class function  TSuperStyle.AnimGlow(aFrom,aTo:TColor):String;
var
  mStyles:  TDarthStyleSheet;
  mWriter:  TCSS;
begin
  mStyles:=getStyleSheet;
  if mStyles<>NIL then
  Begin
    result:=w3_GetUniqueObjId;

    mWriter:=TCSS.Create;
    try
      mWriter
        .KeyFrames.inc(result + " ")
        .Enter
          .from
          .enter.BoxShadow(0,0,0,0).leave.CRLF

          .PercentOf(50)
          .Enter.boxShadow(0,0,12,0,aTo).leave.CRLF

          .to
          .enter.BoxShadow(0,0,0,0).leave.CRLF
        .Leave .CRLF;

        mStyles.Add(mWriter.Text);
        mWriter.text:="";

        mWriter
          .inc("." + result + "_player ")
          .enter
            .AnimationName(result)
            .AnimationDuration(2,0)
            .AnimationInfinite
          .leave;
        mStyles.add(mWriter.text);
    finally
      mWriter.free;
    end;
    result:=result + "_player";
  end;
end;

Looks messy right? Well you should see what the code really looks like. You can imagine having to do string-replacement on names, colors and various parameters. The above code is infinitely more flexible than a fixed string. Well, let’s have a look at the CSS rules generated by our code:

@-webkit-keyframes OBJ16 {
  from {
    -webkit-box-shadow: 0px 0px 0px 0px;}
  50% {
    -webkit-box-shadow: 0px 0px 12px 0px #ff0000; }
  to {
    -webkit-box-shadow: 0px 0px 0px 0px;
  }
}

.OBJ16_player {
  -webkit-animation-name: OBJ16;
  -webkit-animation-duration: 2.0s;
  -webkit-animation-iteration-count: infinite;
}

What does this function do? It’s actually very sexy! The original routine registers both the animation – and then a style with the animation active. It also generates a name for the animation automatically (so no conflicts) – and the routine returns the name of the finished style.

With the name in hand, all you have to do to activate the style on an element is:

  w3button1.CSSClasses.Add(mName);

In the example above we animate a glowing, red 12px cloud around the button. It slowly fades into full red, then it fades back out into nothingness. It’s set to repeat forever, so for as long as the style is assigned to the control it remains visually active.

To remove the animation from our button, all we have to do is this:

  w3button1.CSSClasses.Remove(mName);

How cool is that! I’m really looking forward to more complex CSS animations. Perhaps have your forms curl across into view following a super-smooth beziercurve?

Needless to say I am secretly working on the Smart Mobile Studio presentation framework. It will give you complete control over CSS3, from GPU activation to the most complex animations and effects available.

So stay tuned..

Smart clouds, the big picture

April 11, 2015 Leave a comment

When people hear about cloud services, they tend to jusr think storage space and reduce the cloud phenomenon to a huge diskdrive in the sky. Perhaps it was unfortunate that storage was the first service to emerge from the cloud concept since so many people are reducing it’s potential to mere storage, but thankfully there are developers in the world who understand these things more in depth. And development is what I want to write about in this post.

The old way of doing things

If you work for a small or medium company chances are you have a web-server in your offices, perhaps in good company with an email server and a database server. This way of doing things has been the norm for many, many years now.

Cloud based software is setting the norm, are you ready for it?

Cloud based software is setting the norm, are you ready for it?

Whenever a new software product came out, we had to install the RPC stack (remote procedure call libraries) on the web-server and give it access to the database server. Then and only then could our native Dephi client connect via the internet to get the data.

The Delphi client application would make use of a RPC framework and call the procedures on the server just like they were local to the application.

Many companies are actually founded around delivering components and frameworks which makes this type of programming easier. The most notable company for Delphi programmers is no doubt Remobjects and the RemObjects SDK. This framework makes it very easy to write custom servers which communicates through industry standard message formats (JSON, XML, BINARY).

Another such framework which is open-source and free is the mORMot framework. Mormot is known for achieving great speed. The framework is built from the ground up and does not rely to much on third party code (Remobjects requires Indy for many of it’s server components).

Benefits of the RPC model

This way of writing programs, where the majority of operations reside on the server – while a client only connects and make the server functionality available locally for a customer, have plenty of benefits. Which is why it’s so popular and fun to build.

With the internet of things (IOT) you need a language which reaches all platforms

With the internet of things (IOT) you need a language which reaches all platforms

The first benefit is that you have full control over both the internal mechanics of the service and it’s data. You dont deliver code which is cracked and abused by pirates and hackers; Your code resides safely on your personal servers and only valid accounts can access it. Your total control over the database means means that working generating in-house statistics is a snap. You will not be affected by server traffic to the extent that your customers are.

But those are only minor perks, the really huge advantage is that you are able to consolidate all your clients towards a single RPC standard. In other words: you implement the application framework once on the server, and all your clients connect and make use of the same RPC service. Your iPhone, Android and win32 desktop clients all connect and use the same server. The same goes for your Linux and OS X desktop applications, and (drumroll) also your ISAPI web application.

The new model

There is nothing wrong with the old model. The way you would organize such a distributed application is logical and more or less the way it has to be. It allows you to de-couple your database from your service (the remote procedure call API you are exposing) and your service from the platform dependent clients.

How flexible is your service? Can it move around?

How flexible is your service? Can it move around?

It gives you plenty of options as well. Since the database is typically on a separate machine running mySQL, MariaDB or MSSQL, it makes it easier to hot-swap the location of the database should you decide to move it. Maybe you found a DB host in Germany at an affordable price, meaning that you can move your data there with no more work involved than changing IP and login credentials.

But all of this so far, is the way we used to do things (or are still doing things). With the cloud we are able to work with the infrastructure at a higher level. We no longer scale up simply coding a proxy and setting up another service or physical machine — no we clone the whole machine virtual image (vmware image for instance) which runs the service with the click of a button.

The same goes for the database needs. We dont just setup a proxy and X number of physical machines mirroring the same data (although we can do that as well), no – we clone the entire machine instance and chain the data into one huge, massive datacenter.

Building applications the smart way

Imagine you could do all of the above, but using a language which doesn’t require physical machines, a virtual server instance or a full vmware image. What if you could work exactly like before, using the same language even, but target a server platform which allows you to scale both horizontally and vertically? (read: both in number of services and their capacity).

Your services must grow in scale with your business

Your services must grow in scale with your business

But it doesn’t stop there; what if you could also run your services on any platform you want, be it Linux, OS X, Unix or Linux. What if you could just forget about platform and runtime all together and focus completely on what your services should do?

In other words

  • You author the service(s) in object pascal
  • You compile and target a universal platform
  • You can move your services between platforms
  • You have full access to databases
  • Your code is de-coupled from the database driver (portable)
  • Your service framework uses industry standard message formats
  • Your service framework uses ordinary REST protocols
  • Your service can be called and utilized from all your clients

What does this mean? It means that you author your service in Smart Pascal, which compiled to nodeJS compatible JavaScript. NodeJS can be hosted affordably on a minimal cloud instance (as opposed to a full virtual server instance which native Delphi services require). Your service can be cloned and scaled to handle increasing payload as your customer-base grows.

You will be able to move your entire service and online presence between providers without change in code. Tired of Amazon? Simply copy your files to Azure or another provider which supports nodeJS. Or why not make use of a normal website hosting service which is often fast, affordable and widespread?

This is the Smart Mobile Studio model. Giving you the power and tools to truly tap into and deliver killer cloud applications.

Combined with the fact that Smart Mobile Studio was designed for mobile applications you will be able to target iOS, Android, Microsoft Phone, Blackberry and HTML5 from the exact same codebase (!)

Leverage existing services

Smart Mobile Studio and our focus on platform independent nodeJS code is not out to eradicate existing technology, far from it. While we believe Smart Pascal is by far the best and outright smartest choice for modern distributed application programming – we recognize that a single product cant deliver everything.

We regard our product as one utility in a toolbox of many. As a developer it’s important to be versatile and flexible, adapting to customer need and technical excellence. And as such

As such we support frameworks like RemObjects SDK directly in our IDE. This means that your HTML5 and mobile applications can now talk directly to existing native Remobjects services. We also support Embarcadero Datasnap which gives your smart app’s the ability to connect, authenticate and consume your existing data services out of the box.

 

Get Smart Mobile Studio for 1 year

April 11, 2015 2 comments
Know Delphi or FPC? Then sign up now!

Know Delphi or FPC? Then sign up now!

The Smart Competition has been extended by 1 month, which means that you have ample time to join and code some interesting stuff with Smart Mobile Studio.

But ! I have decided to make the prices more interesting by adding a full 1 year subscription to Smart Mobile Studio pro (!) as the first price, and the Raspberry PI 2B as the second price and a Raspberry PI model 1 (the original RPI) as our third place price.

So we now have 3 prices which are as follows:

  1. Smart Mobile Studio Pro (1 yr subsc.)
  2. Raspberry PI model 2 B (Windows 10)
  3. Raspberry PI model 1 A (Linux only)

Wow! what is this competition about?

Simple. The winners will be picked from the entries and the 3 best components or packages will receive the prices.

Note: Please ship the components as a smart mobile studio package. Creating a SMS package is very easy, see the packages menu. This is not a must, but by far the easiest way for us to test the components and see them in action (demo program + package = good experience).

Writing slick HTML5 components is easy, fun and rewarding!

Smart needs stuff like this – are you up for the challenge?

What should I write components with?

Simply go to www.smartmobilestudio.com and download the trial. Remember to request a trial key (!) before you begin or you wont get access to the IDE.

With SMS installed, play around with it and get to know how it works. Especially SmartCL.Components is of interest for this competition – and then code a kick ass component or package which is noteworthy, unique and helpful.

Keep in mind that Smart Mobile Studio has few components, so controls which are old classics for Lazarus and Delphi – are completely new and valid here!

You can read the original competition post here!