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.