Lately, I’ve been working a lot with people that are new to LiveCycle ES2 Mosaic. One thing always seems to come up is the question of the best way to organize Mosaic projects. There aren’t any hard and fast rules (with the exception of the Catalog folder layout), but I’ve seen enough similarities in unrelated projects to suggest that there are some unofficial conventions that are forming. I won’t go as far as to call the following “best practices”, rather consider them suggestions based on experience. When combined with standard Flex best practices, these suggestions may make developing your Mosaic applications a bit easier.
Organization will set you free – Alton Brown
Mosaic applications consist of quite a few moving parts. There are the application descriptors, tile code, services and interfaces, authentication policies, shell skins, etc. Keeping these sorted out will definitely make your life easier, especially when it comes to deploying and debugging. Whenever possible, I prefer to keep all of the files/folders for a single Mosaic undertaking under a single folder. That may mean having more than one application in the same folder, but at least the related code will be close by.
Under that parent folder I usually create one folder for each major Mosaic component. The folder names are in lower case to differentiate them from the Catalog’s folders (more on that later). For example: I have a project called the Sales Dashboard, which will contain an application, catalog, several tiles, a service, a custom style sheet, etc. To keep from going insane, I created the following folder structure:
- applications – this folder contains the application descriptor xml file(s)
- catalogs – this folder contains the deployable contents for the project’s catalog. If I was to have multiple catalogs, then they would each go in a separate subfolder. A catalog’s structure is one of the few things that must have a specific structure. This is because the catalog folder gets zipped and then deployed to the Mosaic server. For more on the catalog folder’s structure, see the section below.
- interfaces – this project uses a Mosaic Service component that is used by several tiles. Each service component consists of two parts – the interface library and the service class. This folder contains sub folders for each of the interface library projects. Those subfolders contain a Flex Builder project that includes the source code for the interface. In this example I have a single interface library called the “SalesDashboardInterfaceLibrary”, so the interface folder has a single subfolder with that name. In the subfolder is a Flex Builder project for the interface:
- policies – if you are using the Mosaic fine grained authorization, then this folder contains the XACML files that provide authorization information for the elements.
- services – this folder is related to the interfaces folder. It contains subfolders for each of the service class files. Inside those subfolders is a Flex Builder project used to develop the service code. For example, this application includes a “SalesDashboardService”. That subfolder contains a Flex Builder project for that service library:
- stylesheets – this project contains a custom skin for the Mosaic application. The Flex Builder project for this skin is in a subfolder under the stylesheets folder. If I had more than one skin, then each would get its own subfolder. For example, my skin project is called “GlobalCorpSkins”:
- tiles – this folder contains sub folders for each of the Flex Builder tile projects. Usually I try to keep related tiles in the same Flex Builder project (it makes debugging a bit easier), so a single sub folder may contain many tiles. There are some cases, however, where a particular tile needs its own project. For example, if it uses a different Flex SDK or comes from a legacy application. How fine grained you want to make the tile projects is really up to you, but keeping them all under this one tiles folder will make them easier to find. In this example I have two tile projects – Flex 4 tiles (which contains several tiles) and Map (which contains a single, very complex tile):
As I said earlier, the catalog structure is the one thing that must be in a specific format. The catalog contains the deploy objects (compiled code, resources, etc.) and it will be zipped, then sent to the Mosaic server. The server is expecting specific things to be in specific folders. And yes, those folders are case sensitive.
- descriptor.xml – this is the catalog’s definition file. It must be named descriptor.xml and it must be at the root of the catalog zip file
- Interfaces – contains the compiled swf for the interface libraries.
- Resources – this is where the miscellaneous stuff needed for tiles and services is stored. Things like images, XML files, videos, etc. are put here.
- Services – contains the compiled swf for the service classes
- Stylesheets – contains the skin classes complied into a swf
- Tiles – contains subfolders for each of the tiles in the catalog. The subfolder names is the same name as the tile, and they contain the tile swf files.
Flex Builder Linked Resources
Since tiles, services and skin projects rely on the Mosaic SDK, you’ll need to include the appropriate SDK swc in each of your projects. Rather than hard coding the path, it is a good idea to create a pointer to the SDK folder and let Flash Builder sort out the location. This makes your code more portable, if you give it to someone else, they don’t have to have the SDK in exactly the same location as you do.
To set up a linked resource to the Mosaic SDK:
- Open Flex Builder
- Choose Window –> Preferences
- Choose General –> Workspace –> Linked Resources
- Click the New button
- Give it a name of MOSAIC_SDK
- Click the Folder button and browse to your Mosaic SDK folder. Don’t go any lower than the “sdk” folder.
- Click OK to close the dialogs
When you create a new Mosaic project you can use the linked resource in your Flex Build Path. Then if someone else opens your project and has the SDK in a different location, Flash Builder will sort out the reference (assuming they have a MOSAIC_SDK resource).
It may seem that I’ve gone a little berserk with the organization of the project. I mean, how anal retentive can you get? Why not just lump everything together in one or two folders and be done with it?
The answer lies in the application deployment through ANT scripts. Having a highly organized structure like this allow you to build the deployment code as a few, small ANT files. These can be combined together to quickly deploy code changes in an efficient manner. There are few things more annoying than testing against the wrong code.
For example; At the root of the project I have an ANT script that deploys the catalog, application and policies. Before that section executes, it calls ANT scripts in the sub folders that re-compile the interface, service, style sheet and tile classes, and move them to the appropriate location in the catalog structure. Using this, I can make changes to a tile, run the root ANT script and ensure that everything is the current version.
True, it takes a bit more effort to set up, but the time and frustration savings are well worth it. Here’s what my final folder structure looks like:
Request for Comments
For what its worth, most of the above is my opinion based on my own experiences. If you have any additional suggestions, I’d love to hear them.