AribaWeb 101: The Basic (File Types)

Welcome to one of the first but I hope not the last AribaWeb 101 session where I will show you all the necessary details you need in order to build and run an AribaWeb application. This article assumes that you have already read all AribaWeb documentation and watched all related screencasts.

When I asked myself what is the most important thing to start with, I went through a few different rather complex scenarios in my mind in order to show you the power of AribaWeb; but, every time I ended up concluding: “We are missing the basics!” Plus when reading our Google discussion group I can see the concept is clear for most of us but there are still some elementary details that we can’t simply connect together. 

File Types

When building an AribaWeb application you come across several file extensions which all together form the application and here I will guide you quickly through the most important ones: 

*.awl (AribaWeb Language )

This is the most important file that you will use when building your UI application layer. Inside this file you see HTML - like syntax to define your user interface. Usually this file is used for templating as well as component definition.  

           

Templating can be used directly from the .awl file or in more advanced usage from .oss files (but we will get to that in a second). On the picture bellow you can see two components <a:IncludeComponent> tags -- HeaderPage and FooterPage -- which are just additional .awl pages that you can add to your existing page. 

You can also define new component like in this case where we created a component for rendering captcha code. You can then attach it in your page (please see java file type section):

Defining new component that renders captcha code

Defining new component that renders captcha code

Each .awl component can have its own java class with the same name, which can hold the state and can act as a controller.

Location of files:

Probably the most important locations to remember while discovering details of this framework are these 3 directories:

1.       ariba core: src/aribaweb: 

◦          Here are core components and every time you see something prefixed with the <a:* name space you know it’s from this source path 

2.       ariba widgets: src/widgets: 

◦         This directory contains widgets that you are using when building your UI. 

◦          The <w:* namespace means widgets and it’s from this source path 

3.       ariba MetaUI: src/metaui:

◦          This directory contains everything related to meta context. 

◦          When you see the <m:* name space you know it’s from this directory

Hint: If you are not sure or you get stuck, always remember that you can search these directories for possible examples or usages. There are plenty of examples.

For more information please see: AribaWeb Documentation 

*.awz, *.afr (Wizard files)

Each well behaved application that requires some flow usually use wizards. And to accomplish this in AribaWeb you use followings:

*.awz (Wizard definition)

This is the main wizard definition file where you describe the flow. Developers do not have to worry about too many details and can focus on the logic. 

As you can see in the example above we define what action we support in the wizard navigation bar, number of steps and exit frame. 
The source of each step refers to the wizard frame (the *.afr file) which provides the content for the step. And the content for each wizard frame is specified by the source of the content tag in that frame (please see the afr section).

Each step can have number of sub-steps:

*.afr (Wizard frame)
This file defines the wizard frame for actual content, which is then defined by awl file.

In this example we are referring to the Information.awl in the package wizard.

Location of files:

The first location you should look for is the directory where the Wizard.dtd and Frame.dtd are located. Once you look inside here, you will learn how your .awz and .afr files should look like:

• Frame.dtd:
•   $AW_HOME/src/widgets/resource/global/dtd/Wizard.dtd
• Wizard.dtd:
•  $AW_HOME/src/widgets/resource/global/dtd/Frame.dtd

When you deploy your application these files are located inside the ariba.widgets.jar under ${ariba.widgets.jar}/ariba/resource/global/dtd/

Wizard Extension:

When you check these directories you will find something else besides files above:

• WizardExtension.dtd
•  FrameExtension.dtd

These files you probably want to use if you are developing enterprise-like applications and you know your Customer would like to extend it. They can change the flow, modify what frame to show or maybe add extra frames, etc. 

You might ask why not to use Wizard.dtd and Frame.dtd directly? Well you could but usually you have a core product and you do not want the Customer to modify your core code, rather only extending it. 

This is something like your config directory in the docroot where you can override CSS styles, images and other resource. Or another example we have BrandingComponents. This is all made and prepared for extending or branding an application. 

As you can see AribaWeb is a brandable platform from its heart and you as a developer do not have to think how to hack this when something small needs to tweaked. In other words, all this makes AribaWeb a really killer platform for the enterprise.


For more information please see: Wizard documentation

*.java 

I do not have to tell you what java files are for but I just wanted to mention that besides the obvious, you use java files to define your component and to give it some behavior.

For example you can have the file AWCaptcha.awl from above example that defines the actual component and then AWCaptcha.java for holding a state and handling all the events.

Your java file must be inherited from the AWComponent:

Rendered control might look like this:

And used like this: 

*.groovy 

AribaWeb supports the groovy language and basically it has the same purpose as the above java file.

*.oss ( object style sheet)

Probably the most interesting part you will work with when developing an AribaWeb application. The .oss file is a key element in the rule-driven UI. The UI is generated based on this rules file. 

This will require an additional article because this is a pretty complex topic. The only thing you need to know for now is the .oss files contain rules in the CSS like syntax and based on them you can declaratively create your UI. 

Location of files:

As a good start and a way to try to learn more about .oss files, it’s probably best to look directly into core files defined by AribaWeb.

• WidgetsRules.oss
• Main MetaUI definition where you can find all out of box rules
• $AW_HOME/src/metaui/ariba/ui/meta/layouts/WidgetsRules.oss
• PersistenceRules.oss
• MetaUI definition for the persistence layer. Here you find all the definition for rendering data in the table, search details and others.
• $AW_HOME/src/metaui/ariba/ui/meta/persistence/PersistenceRules.oss
• Application.oss
• This is your main application MetaUI rules definition. Here you usually put details about modules, defining main layout of your application, maybe extending out of box rules (WidgetsRules, PersistentRules). 
• $AW_HOME/examples/**/Application.oss
• rules.oss
• In this rules files you usually declare rules related to your domain model. For every package in which is your POJO class you put one rules.oss file.
• Again to find out more please have a look at: $AW_HOME/examples/**/Application.oss

For more information please see: MetaUI Documentation 

 So that's about it for now, the next time you see another 101 article we will focus on the setting up of a project, build script and getting AribaWeb under control.  Until then!