AribaWeb 101: Application branding 2

Last time I tried to explain little bit  how to style your AribaWeb (AW) application and today we will look at how you can create different brands. 

As I mentioned already in previous articles AW let you create different brands so you can render different UI for different situation and all this from one application. This might be ideal for those of you who are searching for something more multi tenant. 

No what is really brand?  You can understand it as something where you take your existing styles, scripts and pictures and you give it a name and then later on in the request you can refer to this name.  Take a look at this example:

In our already familiar docroot I created different sub-directories that are representing complete UI look & feel for two different companies. As you can see in the example the company1 even have 2 different versions.  

Once you create such directory structure the only thing you need to do is to prepare special URL that will be used by users from company1 and company2. This URL e.g. company1 can look something like this:

http://{host}:{port}/example/Main/aw?awbrand=company1&awbrandversion=ver2

And this is pretty much it! 

What is happening behind the scenes?

When accessing your webpage with these two extra parameters two main things happen:

• Session is created with brand name and brand version
• Brand Manager is initialized and tries to scan brand directories and register all the relevant resources.

You might extend this branding manager to put it more logic that will match your complexity. 

Other areas to explore

AWBrandManager - This is the core class that registers all branding directories into ResourceManager. 

AWSession - Session keeps information what is the current brand name and brand version we are in.

AWDirectAction - You might take a look into this class as well. This one is responsible to load correct resource based on brand. Using our Resource Manager.

AWStyleSheet - Stylesheets are loaded from here and if applicable the correct branding version is read.

AWBaseImage - The same as above if branding is on it will read the correct image from your brand folder. 

AribaWeb 101: Application branding

Based on our google group inputs I decided to put together this quick article where I will try to give you some guidelines how AribaWeb can be easily customized and I hope you will find the process easy just like anybody else. 

Before we start dig into more details I would like to highlight two kinds of customization or branding if you wish I see myself:

• CSS and components branding
• Re-branding core layout component the AribaBasicPageWrapper.htm 

CSS and components branding

If you did your little homework and checked our examples folder you have probably noticed there is some branding folder where you can put your own styles. If not please check out the GuestBook example.

Branding folder is the place where you put your special file called application.css which can let you override existing application styles. By default all application styles are loaded from file called widgets.css and when application startups it tries to check if you have this branding folder in place to replace and extends existing styles.

The same applies for images or any kinds of resources because when you do branding you want your own graphics right ? Just put new image file you want to replace in this folder and application will load it instead of existing one. For example if you check another example src/site you will see exactly what I am talking about. This site is regular MetaUI application that changed completely the application look  [you can see the result: www.aribaweb.org - yes this our regular MetaUI application - just rendered as static pages. ]

Here you can see fully loaded folder with overridden css file as well as rebranded images. 

 

So the process I would define as follow:

1. Using some inspector in your internet browser locate style you want to change
2. Look up the style in the widgets.css and see if the styles does not appear on several places in this file
3. Define your own custom version and put it into new file application.css under this branding folder
4. You can also check the specific component you want to change e.g. AWTextField.awl how are styles defined in this file instead of inspecting styles in your browser.

There is one more important thing to add to this. They are components that are completely  client side-side driven and you might want to customize them as well. Such component is Calendar.awl. 

As can can see on this picture the branding framework let you structure your client side resources also by locale. In this specific case I wanted to have different week and month names for my locale. So I extended its client side part and next en_US I have also my custom part cs.

Re-branding core layout component the AribaBasicPageWrapper.htm 

If you have higher expectation then there is a another way where you can completely change the way AribaWeb looks like besides changing its styles. 

I think I mentioned this several times. When you look at the BasicPageWrapper.awl you will notice it references the file called AribaBasicPageWrapper.htm which defines whole structure for your applications. If you want to customize it then simply copy this file into your branding folder and this file will be picked instead one that is in the core jar file. 

Other areas

If this is not enough then you can try to push the branding to its limits and you can have several brands so each user can have its own UI when she or he logs in. For this please check out code in AWSession/AWBrandManager where the brandName and brandVersion is used. Describing this in detail would be probably too much for this little blog article than I initially wanted.

AribaWeb: It’s time for productivity! II

You are probably expecting some details for each feature I was talking about in previous article but I just realized that I haven’t mentioned something really important. Initially my thoughts was to write about things that you do not see normally in other open source platforms and can really help get you up and running. I think AW Data table deserve its own place it’s a big topic because there is so much to tell but I will keep things simple and small.

One of the component you can find in AribaWeb open source stack is Data Table which can render various things starting from your data model, CSV files, XML files and other crazy formats without spending extra effort to write allot of UI code.

But the most interesting things are Pivot tables to present multi-dimensional data. You have plenty of desktop applications that can do it but maybe none free open source  for the web and enterprise ready. 

As you can see this component is really powerful. Among all the features you see on the pictures here you can:

• You can edit every single cell
• Support for outlines (section / item hierarchy)
• Scroll faulting 
• Spanning Columns
• Details and Row Attributes
• Custom Sort ordering 
• Selection 
• You can have nested column heading. Let the data to be your labels!

Some pictures from Pivot table’s overview:

Flat view table:

How about little one click away grouping with your custom pivot layout:

What if we simply change the layout?

AribaWeb: It's time for productivity!

Let’s stop for the moment being so technical and trying to explain how a particular feature is working or not working and maybe let’s examine something more abstract, to see the bigger picture why you should consider using the AribaWeb for your next assignment.

For this article you do not need any extra technical skills just your common sense! We will simply focus on the basics and how this enterprise web framework can really speed up your development when you utilize all of its features.

Productivity

What is really productivity? Well you can either start with dictionary definition or we go for little analogy that might be closer to you (shamelessly stolen, albeit modified, from a friend ;-) ) because this is exactly the point I needed for this article.

Many years ago there was a little Russian company I had an opportunity to work in, and these smart guys were developing an IDE called IntelliJ IDEA. Yes, “just another IDE.” But here it was something completely different because the whole focus was purely productivity centric.

Where competitors at that time were focusing on building extra features which did not really help you to effectively write code -- but rather – they were promoting Rapid application development (RAD) as it was called in these days. You know, drag ‘n drop here and there and code was generated ;-) IDEA went a completely different direction. The company simply focused on one thing, writing code with a good editor and build features around this. When refactoring was introduced, I think in version 2, it completely changed the way developers looked at the code. A simple refactoring feature “rename” or “move” saved literally minutes or maybe in some cases even hours of manual (error prone) process with one simple shortcut. And here is the productivity comes in:

Let’s say you pay a developer 100,000 USD per year. Which could be translated into:

• $ 8,333 USD per month,
• $ 416 USD per day,
• $ 52 USD per hour,
• $ .86 cents per minute. 

If you are developing you know the best what it takes to rename manually some classes or methods and all its usages. Let’s say even if this refactoring feature would save you 15 minutes per day and you know its bare minimum.

Time is Money - around 12 USD per day of developer time.

And now you do the math! You will realize that you can afford one extra developer for this money you save.

AribaWeb Features

After quick definition let’s focus on this AribaWeb (AW) framework. I do not want really repeat what you can read on the website rather focus on actual benefits it can bring you. The benefit is in rich feature list which are needed on any serious project.

In this part I will try to list most of the features and in the next article I will describe each in details. You need to understand that AW is not common open source framework where you get some vanilla set of features and the rest is up to you. This framework contains proven stack that was deployed and tested on mission critical applications over last 11 years for the fortune 500 companies. So it not a baby its timeless framework that most of its features you do not even see in modern web frameworks.

Definitely each of us will look for something else when developing enterprise application and based on the definition of the project you choose sometimes the right solution ;-)

Let’s start listing some of the features:

• Built-in AJAX: This server-side AJAX with rich thin client is supported for all incoming and outgoing request and is first class citizen for major part of AW components and widgets. 
• Bi-directional binding: allows you not only to read entered value but also pushes the changed state back to UI or even assigned an action.
• MetaUI – Instant App: This is something we have already covered. Where most of the developers create and maintain UI code for every screen here we define rules from which UI is automatically derived without single line of extra UI code.

Real story:

“In one international company business came out with great idea: “we need to beatify UI Fields on our existing customer portal in the way that on every single web page we want Hints. You know little cue tip that popups up when you mouse over the field ”. All this internationalized. Well it was massive re-implementation that took 3 - 4 months and for the budget you can afford new customer portal This does not happen here. You change 2 or 3 lines of your rules and you are done. More in part II.

• Advanced security Layer: leverages mainly from its commercial use. What framework features out of box rich security layer that is updated with fixes on regularly basis based on both regular penetrations testing as well as from real attacks? Not many or none?
• Built-in metrics and profiling: AW is definitely enterprise framework from its heart. It has ability to measure access time per request with number of great details and what I like the most is its per-thread performance logging so you will quickly find the weakest spot in your system.
• Maintenance and administration support: features the way you interact with the system and mainly with end user. You do not want to shutdown the application in the middle of the user’s activity. You want to e.g. initiate maintenance mode so new users will not be able to login with message that something is happening and existing users are informed that in e.g. 60 min. system will shut down. There is even more…
• Diagnostics: Sometimes if you are serious you need to have a way to interact with system differently then through your application. You need to be able to check health and other things.
• Edit & X-Ray: This pretty nice feature to quickly modify and fix in running application the way application look and UI elements are presented. Please see this for more details. 
• Flexible data rendering: If you are building a complex app its not enough to present to end-user only your internal data structure. No you want to be able in simple way render to the UI almost anything. Take your json-like configuration and let the framework render UI for you or take your incoming XML file display all this in nice data table without writing single line of extra UI code. All this using MetaUI rules and extensions.
• Complex multi-state wizards: This is always a headache if you want to build it from the scratch to have a way to break down complex process into several logical steps. AW does this all for you. You just focus on the flow AW will take care of the rest.
• Easy localization: Have you seen Craig’s video about localization no? Go check it out. Adding new locale is really easy. 
• Branding: Sometimes multi-tenant websites needs special treatment called real time branding. In AW you can create different brands that changes the look & and feel of your app, let you assign a name and even a version to this brand.
• Rapid Turnaround: A great feature for developers please read more on aribaweb.org 
• Pluginable backend layer: AW is mainly rich UI platform with strong infrastructure where you can plug-in any backend system you want. Out of box the open source stack is pushed with POJO-like layer and hibernate support. I have implemented application where I have plugged the Qi4j framework with graph and document database. It’s pretty flexible.
• Component inspector: There is nothing more so painful than tracking down some bug "how come this is rendered this way when it supposed to be presented this way. What and where this is overridden when I have this UI code here but on the webpage is something else? Hmm". With this Component Inspector is different story.
• Incremental updates: AW application is smart in the way it renders your UI elements. It can identify out of box areas that need a refresh and only specific part of your page is changed. You do not have to transfer or reload whole page every time you click on something. 
• Exception handling: In well-behaved application you need to have a way to handle unexpected situation. AW has extensions, which let you react on application problems in custom way. Or you want to send crashes to the end user? 
• Logging: You know, I know it. Every time you start a new project you either have some internal framework or you are building this from the scratch. You ask yourself the same questions again. Configuration, log4j, java logging, syntax, how I will identify and number errors and others. AW has all this out of box ready for you. You can even localize messages that are sent to your storage. And if you are multilingual company with 1st, 2nd and 3d line support in different countries you will like this feature where support guy can read it in his/her native language.
• Expression language: AW has its own expression library that let you define any kind of crazy expression. Show this UI element if this and this is bigger then this and it contains this value you can name it. You do not have to rely on your heavy application code you can do it lightway. The same applies for the system. Do you need certain part of your configuration to be applicable under certain condition? More in part II examples.

We briefly covered what you can expect from AribaWeb and it is really up to you whether you want to keep re-implementing every time again and again or you test this smart framework. At the end it can save you allot of time with this big load of feature all this proven with different large enterprise implementations.