According to Wikipedia, “Rich Internet Applications are web applications that have most of the characteristics of desktop applications, typically delivered by way of standards based web browser plug-ins or independently via sandboxes or virtual machines”. I don’t think that this definition does do it any justice – I think that RIA’s are:

• Applications that offer a visually rich and engaging user interface
• Applications that offer content richness and useful and diverse functionalities

In other words it has to deliver functionality and it has to do so in an engaging UI – the argument being that such applications will deliver a greater employee productivity and/or customer loyalty. I would certainly vouch for that – go see a demo of SAP Business Explorer to see what I mean (you can even
upload your own data and play around with that).

As a continuation to my experiments in marrying technologies such as Php, Pear & Ajax to query a SAP database and expose the data to a user in a visually appealing form, it seemed only fitting that I would give this RIA thing a shot too. You only need to google terms such as “SAP FLEX” to see that there is
a wealth of information out there on that topic showcasing these two platforms with plenty of whoa factor. Being from a logistics background I thought it would be appropriate to use logistics functions in my examples.

So in this post I’ll be looking at the following scenarios:

• A sales application using SAP, Flex and Php (http service call method)
• A production order application using SAP, Flex and Php (http service call method)
• A sample sales application using SAP and Flex (web service call method)

The tools of choice for my experiments today are:

• Adobe Flex (which is built on top of Eclipse – the same tool used to build the SAP Developer Studio). Adobe is very generously offering you the chance to download a try-before-you-buy fully functional demo version for 60 days (if you have already have Eclipse or SAP developer Studio you may elect to download the plug-in instead – although I have not tried that).
• Easyphp which is a nice WAMP (Windows Apache Mysql Php) package that I have been using for years – php in version 5.2.8
• The SAPrfc extension module for Php
• Of course SAP. The SAP backend system I’ll be using is a SAP ECC 6.0 system.

In the first two scenarios, I’ll be using php as the go between Flex and SAP.

Essentially the Flex application will call an http service that is a php script to which we’ll be posting some variables. Php will then wrap those variables in an RF call to the SAP backend system. Assuming all goes well, SAP will send a response that needs to be formatted in a xml like structure so that that it can be properly interpreted by the Flex application – again php will take care of that.

echo "<CUSTRECS>\n";
		for($i=1; $i<=$ADDRESSDATA ; $i++){
			$DATA = saprfc_table_read ($fce,"ADDRESSDATA",$i);
			echo "<CUSTREC>\n<CUSTNUMB>" . $DATA["CUSTOMER"] . "</CUSTNUMB>\n";
			echo "<CUSTADR>" . $DATA["STREET"] . "</CUSTADR>\n";
			echo "<CUSTCOUNT>" . $DATA["COUNTRY"] . "</CUSTCOUNT>\n";
			echo "<CUSTCITY>" . $DATA["CITY"] . "</CUSTCITY>\n";
			echo "<CUSTNAME>" . $DATA["NAME"] . "</CUSTNAME>\n</CUSTREC>\n";
		}
echo "</CUSTRECS>";

will yield an xml response to the Flex application as below,

<CUSTRECS>
	<CUSTREC>
		<CUSTNUMB>0000100000</CUSTNUMB>
		<CUSTADR>800 Gardiner Street</CUSTADR>
		<CUSTCOUNT>AU</CUSTCOUNT>
		<CUSTCITY>Darwin</CUSTCITY>
		<CUSTNAME>Customer domestic 00</CUSTNAME>
	</CUSTREC>
</CUSTRECS>

and in the Flex script below, on lines 5 and 6, you can see how I’ll be retrieving the customer number (CUSTNUMB) and customer name (CUSTNAME) in my Flex datagrid.

<mx:DataGrid dataProvider="{srv3.lastResult.CUSTRECS.CUSTREC}"
width="368" height="119" y="10" x="10" id="dg1"
change="dgChangeHandler()" dropShadowEnabled="true">
	<mx:columns>
		<mx:DataGridColumn dataField="CUSTNUMB" headerText="Customer Number"/>
		<mx:DataGridColumn dataField="CUSTNAME" headerText="Customer Name" textAlign="left"/>
	</mx:columns>
</mx:DataGrid>

So, without further adue, below are explanations and swf animations for each process.

A simple sales order application

This application uses multiple http service calls and its key elements are:

• An http service calling BAPI_CUSTOMER_GETLIST is used to populate one datagrid
• An http service calling BAPI_MATERIAL_GETLIST is used to populate another datagrid. The product pictures are stored locally on the web server, and the picture filename corresponds to the material number in SAP (eg if the material is called Y126, we have a picture file called Y126.jpg)
• The user will then pick the customer expected delivery date, the required quantity and indicate a selling price
• The Order button will then post the data to another http service in order to create the sales order (by calling the FM CREATE_SD_ORDERDAT1) in SAP. If all goes well a response with the sales order number will be issued to the user.

* Note that some values have been hard-coded in the php files (but they could just as well have come from posted variables). Also, the user will be required to type in his SAP credentials (the SAP server information has been hardcoded in the php file, but we are passing the SAP username and password to the script).

Here is a swf example of this application.

A simple production order application

This application uses multiple http service calls and its key elements are:

• There are two tabs in this application. One tab will show the data in a tabular form whilst the other tab is geared toward delivering the information graphically.
• An initial http service calling BAPI_PRODORD_GET_LIST is used to populate a datagrid containing production order header details. The response provided by SAP is first interpreted and transformed into xml by Php.
• The same http service above will not only deliver production order header data, but also aggregated data that will be used to drive some of the charts in the graphical dashboards. All this data is delivered in one xml formatted stream.
• Whenever a line is selected in the production order header datagrid, it will trigger for another service call to be executed and this time call BAPI_PRODORD_GET_DETAIL in order to retrieve the production order component and operation details.

Here is a swf example of this application.

A very simple production order header report

In this last example, similar to the one above we will consume a web service calling BAPI_PRODORD_GET_LIST and populate the retrieved data in a Flex datagrid – nothing more here – if just to show another method to get the production order header information.

The corresponding Flex Project can be downloaded here. Remember to change your server name and port before using it.

Here is a swf example of this application.

Recommended readings

Rich Internet Application Development on SDN

PHP Development on SDN

Engaging User Interfaces with Adobe Flex
Consuming ABAP Web Services using Flex a hands-on tutorial given by Matthias Zeller, Ed Herrmann, and Dan McWeeney

I hope you find these examples interesting and if you do find them useful and if there is anything you’d like to share, then please do leave a comment.

c3Jj

’ and ‘

bGli

’ directories into your working directory.

The main points of this version are:
- The solution has been AJAXified. The content of the tabs (except for tab 1 which is loaded with the page) is only fetched if a visitor clicks on the appropriate tab. The main advantages I see here, are that content is only loaded if the visitor wants to see it and the content of each tab is maintained in its own separate file (easier to maintain).
- The ‘back’ button issue. That is partially fixed. If you navigate through several tabs, you still have to click the ‘back’ button twice (maximum) in order to really step back a page (funnily enough, in Internet Explorer one click suffices no matter how many tabs you go through!). If anyone out there can fix it…I’m all ears.

So let’s look at the code :

This will correspond to the tabs:

PHVsIGlkPSJtYWlubmF2Ij4=

CTxsaT48YSBocmVmPSIjIiBuYW1lPSIjdGFiMSIgIG9uY2xpY2s9InNob3codGhpcyk7Ij5UYWIgMTwvYT48L2xpPg==

CTxsaT48YSBocmVmPSIjIiBuYW1lPSIjdGFiMiIgIG9uY2xpY2s9InNob3codGhpcyk7Ij5UYWIgMjwvYT48L2xpPg==

CTxsaT48YSBocmVmPSIjIiBuYW1lPSIjdGFiMyIgIG9uY2xpY2s9InNob3codGhpcyk7Ij5UYWIgMzwvYT48L2xpPg==

CTxsaT48YSBocmVmPSIjIiBuYW1lPSIjdGFiNCIgIG9uY2xpY2s9InNob3codGhpcyk7Ij5UYWIgNDwvYT48L2xpPg==

PC91bD4=

As opposed to the previous version, the

YSBocmVm

link is now

PSIjIg==

. However I have added a

bmFtZQ==

tag attribute. Each tab has its own name (#tab1, #tab2, etc…). We can also this see that every time I click on a tab I will execute the

c2hvdyh0aGlzKQ==

function.

The following will correspond to the part where the contents of each tab will be loaded:

PGRpdiBpZD0idGFiMSIgY2xhc3M9InRhYm94IiBzdHlsZT0iZGlzcGxheTogbm9uZTsiPjxpbWcgc3JjPSIuL3NwaW5uZXIuZ2lmIiAvPjwvZGl2Pg==

PGRpdiBpZD0idGFiMiIgY2xhc3M9InRhYm94IiBzdHlsZT0iZGlzcGxheTogbm9uZTsiPjxpbWcgc3JjPSIuL3NwaW5uZXIuZ2lmIiAvPjwvZGl2Pg==

PGRpdiBpZD0idGFiMyIgY2xhc3M9InRhYm94IiBzdHlsZT0iZGlzcGxheTogbm9uZTsiPjxpbWcgc3JjPSIuL3NwaW5uZXIuZ2lmIiAvPjwvZGl2Pg==

PGRpdiBpZD0idGFiNCIgY2xhc3M9InRhYm94IiBzdHlsZT0iZGlzcGxheTogbm9uZTsiPjxpbWcgc3JjPSIuL3NwaW5uZXIuZ2lmIiAvPjwvZGl2Pg==

In other words, if I click on TabX, then the contents of it will be loaded in

ZGl2IGlkPSJ0YWJYIg==

.

All the tabs need to be hidden when I load the page. Remember, we only want to show them if the visitor wants to see them. To do so, each

ZGl2

has a

c3R5bGU9ImRpc3BsYXk6IG5vbmU7Ig==

attribute. Also, note that the content of each

ZGl2

is an image (to show whilst the page loads). I could just as easily have put nothing.

So now that I have my tabs and my

ZGl2

‘s we need some magic to make it all happen.

The first thing we want (and this is optional) is to load and show the content of tab1 (you’ll remember that tab1, along with all the other tabs has been hidden). So what we need to do, is add an

b25sb2Fk

command to the

PGJvZHk+

tag of the page. It should look something like this.

PGJvZHkgb25sb2FkPSJzdGFydCgpIj4=

Basically we’re saying, when you load the

PGJvZHk+

, execute the function

c3RhcnQoKQ==

.
This is what the

c3RhcnQoKQ==

function looks like.

ZnVuY3Rpb24gc3RhcnQoKQ==

CQl7

CQkJbmV3IEFqYXguVXBkYXRlcigndGFiMScsICd0YWIxLnBocCcsIHthc3luY2hyb25vdXM6dHJ1ZX0pOw==

CQkJbmV3IEVmZmVjdC5CbGluZERvd24oJ3RhYjEnICx7ZHVyYXRpb246MS4wfSk7

CQl9

In the first line
We are saying that we want to update the content of

ZGl2IGlkPSJ0YWIxIg==

with the contents of a file called

dGFiMS5waHA=

.

In the second line
We are just revealing

ZGl2IGlkPSJ0YWIxIg==

by using a BlindDown effect. Now we need a function that will do the same thing for all the other tabs.

Earlier on we saw that every tab is declared like so:

PGxpPjxhIGhyZWY9IiMiIG5hbWU9IiN0YWJYIiAgb25jbGljaz0ic2hvdyh0aGlzKTsiPlRhYiBYPC9hPjwvbGk+

I’m referencing a

c2hvdyh0aGlzKQ==

function. This is what that function looks like.

ZnVuY3Rpb24gc2hvdyhsKQ==

CQl7

CQkJaGlkZW0oKTs=

CQkJdmFyIGlkPWwubmFtZS5tYXRjaCgvIyhcdy4rKS8pWzFdOw==

CQkgICAgbmV3IEVmZmVjdC5CbGluZERvd24oaWQgLHtkdXJhdGlvbjoxLjB9KTs=

CQkgICAgbmV3IEFqYXguVXBkYXRlcihpZCwgaWQrJy5waHAnLCB7YXN5bmNocm9ub3VzOnRydWV9KTs=

CQl9

The first line:
The function

aGlkZW0oKQ==

was already explained in my previous post. All it does, is hide all the

ZGl2

‘s that have a

ZGl2IGlkPSJ0YWIuLiI=

1 to 4.

The second line:
Each tab has a name attribute (

bmFtZT0iI3RhYlgi

). In that line I’m getting rid of the

Iw==

character. In other words I have

I3RhYlg=

coming in and

dGFiWA==

coming out. The variable

aWQ=

will now have that value assigned to it.

The last two lines are identical to those found in the function

c3RhcnQoKQ==

, except that here we are using the variable

aWQ=

(because

aWQ=

could be tab1, tab2, tab3 or tab4).

aWQ=

will be replaced by the value tabX when the function is called. You’ll also notice that to keep things simple the scripts I call up are named

dGFiMS5waHA=

,

dGFiMi5waHA=

(

aWQrJ3BocCc=

).

This link will bring you to a page where you can test the new and old version.

That’s it. As usual, your comments and suggestions.

That said, with time I became more and more demanding in terms of what functionalities I wanted it to have and in terms of integration with the general layout of my site. With no ongoing development I had no choice but to add those functionalities myself.

Amongst the various enhancements that I added to it was the ability to generate square thumbnails and I guess you could say that it was a two step process.

• 1 – Generate square thumbnails
• 2 – Get rid of the ‘jags’ in the pictures

In this post I’ll discuss how you can generate square thumbnails using php.

The first reason for which I wanted to generate square thumbnails is because I used to post digital pictures that were both in landscape and portrait mode. The thumbnails generated were just resized versions of the larger pictures – so I ended up with landscape and portrait mode thumbnails. This causes some issues in terms of layout because the width of a portrait mode picture is obviously less than that of landscape mode pictures. This means that your page could have thumbnails arranged as below:

That does not look very nice. With a bit of simple code you could have your page look something like that shown below. I.e you could centre align all you thumbnails. It’s better, but it is not good enough. Also you could have a mix of portrait and landscape mode thumbnails on a line. You layout could look like this.

Everything is nicely centered, but it is not visually appealing. So in came the idea of square thumbnails. What I find great with square thumbnails is that you do not use the complete picture to generate the thumbnails, i.e you call on your visitors’ curiosity to show them part of the picture. Another great advantage of square thumbnails is control: If you generate thumbnails that are 100*100 pixels you know exactly how much space you are going to need if you put 5 of them on a line.

Now to be clear I’m not talking about taking 640*480 picture and resizing it to 100*100 either – we respect the original height to width ratio of the subject.

So here it goes. We’ll start with the picture shown below. The original is a 640*480 picture.

The first step consists of reading the dimensions of the picture and figure out which of the height or width is the smallest dimension.

Depending on which of the two is the smallest dimension I make them both equal and from then on we can work out the square are we’re going to be be working with.

This generates thumbnails that have the same width and height and allows for a layout to look like so:

And here is the code that I use to generate those thumbnails. Basically I use a function because the thumbnail creation process can happen in numerous places, but it’s only coded once. Hope it helps someone out there!

The $ImageTool used is ‘GD’.

function CreateSquareThumb($source,$dest,$border=0) {

    $new_width = 100; //
    $new_height = 100; //
    $sourcedate = 0;
    $destdate = 0;
    global $convert;
    if (file_exists($dest)) {
       clearstatcache();
       $sourceinfo = stat($source);
       $destinfo = stat($dest);
       $sourcedate = $sourceinfo[10];
       $destdate = $destinfo[10];
    }
    if (!file_exists("$dest") or ($sourcedate > $destdate)) {
       global $ImageTool;
       $imgsize = GetImageSize($source);
       $width = $imgsize[0];
       $height = $imgsize[1];

      if ($width > $height) { // If the width is greater than the height it's a horizontal picture
        $xoord = ceil(($width - $height) / 2 );
        $width = $height;      // Then we read a square frame that  equals the width
      } else {
        $yoord = ceil(($height - $width) / 2);
        $height = $width;
      }
         $new_im = ImageCreatetruecolor($new_width,$new_height);
         $im = ImageCreateFromJPEG($source);
         imagecopyresampled($new_im,$im,0,0,$xoord,$yoord,$new_width,$new_height,$width,$height);
         ImageJPEG($new_im,$dest,90);

    }
}