Overview

EmaginFX concept is to generate view from XML or JSON configuration file, improving maintainability, visibility, reusability of components.

EmaginFX uses the same codebase for mobile, desktop and embedded environments.

In addition, generated views are responsive and highly customizable.

Creating a View consist of:

1. Declaring a root view, The root structure
2. Declaring a structure content, The root structure content
3. Declaring a the initial standard view displayed inside the root structure content, The view.

The root structure content can manage many views, giving us ability to navigate though them with back button.

Creating Root structure

Root structure is the entry point a root view. We will create a view composed by fiollowing elements:

• by a component named PrimaryHeaderToolbarView on top position
• by a primary menu defined by a component named PrimaryMenuView
• a central component defined in component named GetStartedRSContentView

<view id="Root" combine.keys="id">
	<component id="Content" combine.keys="id">
		<properties combine.keys="name">
			<property name="headerView" value="PrimaryHeaderToolbarView" />
			<property name="primaryMenuView" value="PrimaryMenuView" />
			<property name="contentRootStructure" value="GetStartedRSContentView" />
		</properties>
	</component>
</view> 

Header toolbar (PrimaryHeaderToolbarView)

The primary header toolbar is defined as bellow:

<view id="Root" combine.keys="id">
	<component id="Content" combine.keys="id">
		<properties combine.keys="name">
			<property name="toolbarImpl" value="BasicToolbar"/>
			<property name="styleClass" value="ep-header-all-container"/>
		</properties>

		<component id="LeftComponents" combine.keys="ref">
			<properties combine.keys="name">
				<property name="contentImpl" value="NoLocationPrimaryMenuWithNavigationBar"/>
			</properties>

			<component ref="RootMenuButton"/>
		</component>
		
		<component id="CenterComponents">
		</component>

		<component id="RightComponents" combine.keys="ref">
			<properties combine.keys="name">
				<property name="styleClass" value="ep-header-right-area-container"/>
				<property name="ellipsysStyleClass" value="white-icon,transparent-focus"/>
			</properties>

			<component ref="CoreLogoutButton"/>
			<component ref="AddElementButton"/>
			<component ref="AdministrationButton"/>
			<component ref="PreferencesButton" />
		</component>
	</component>

	<component id="CoreLogoutButton" criteria="isNotAnonymous">
		<properties>
			<property name="label" value="LOGOUT_LABEL"/>
			<property name="tooltip" value="LOGOUT_LABEL"/>
			<property name="ikonli" value="gmi-exit-to-app:24"/>
			<property name="iconStyleClass" value="header-icon"/>
			<property name="styleClass" value="app-header-button"/>
			<property name="displayMode" value="GRAPHIC_ONLY"/>
			<property name="type" value="SimpleButton"/>
		</properties>
	</component>
	
	<component id="AddElementButton">
		<properties>
			<property name="label" value="ADD_ELEMENT_LABEL"/>
			<property name="tooltip" value="ADD_ELEMENT_LABEL"/>
			<property name="ikonli" value="fa-plus:18"/>
			<property name="iconStyleClass" value="header-icon"/>
			<property name="styleClass" value="app-header-button"/>
			<property name="upperCase" value="true"/>
			<property name="type" value="SimpleButton"/>
		</properties>
	</component>
	
	<component id="PreferencesButton">
		<properties>
			<property name="label" value="PREFERENCES_LABEL"/>
			<property name="tooltip" value="PREFERENCES_LABEL"/>
			<property name="ikonli" value="mdi-settings:18"/>
			<property name="iconStyleClass" value="header-icon"/>
			<property name="styleClass" value="app-header-button"/>
			<property name="upperCase" value="true"/>
			<property name="type" value="SimpleButton"/>
		</properties>
	</component>
	<component id="AdministrationButton">
		<properties>
			<property name="label" value="ADMINISTRATION_LABEL"/>
			<property name="tooltip" value="ADMINISTRATION_LABEL"/>
			<property name="ikonli" value="mdi-wrench:18"/>
			<property name="iconStyleClass" value="header-icon"/>
			<property name="styleClass" value="app-header-button"/>
			<property name="upperCase" value="true"/>
			<property name="type" value="SimpleButton"/>
		</properties>
	</component>
</view>

Primary menu (PrimaryMenuView)

The primary menu is defined as follow:

<view id="Root" combine.keys="id">
	<menuGroup id="Maximized">
		<properties>
			<property name="collapsible" value="false" />
			<property name="menuWrapperStyleClass" value="ep-primary-menu-wrapper" />
			<property name="menuStyleClass" value="ep-primary-menu-container" />
			<property name="menuRowsStyleClass" value="ep-menu-row" />
			<property name="menuLabelStyleClass" value="menu-row-label" />
		</properties>
	</menuGroup>

	<menuRows>
		<menuRow id="GetStartedMenuRow">
			<properties>
				<property name="label" value="HELLO_LABEL" />
				<property name="tooltip" value="HELLO_LABEL" />
				<property name="icon" value="mdi-view-dashboard:24" />
				<property name="separator-after" value="true" />
			</properties>
		</menuRow>
	</menuRows>
</view>

The Root Structure content (GetStartedRSContentView)

The Structure content is used to define common content configuration. Main job of this configuration is to declare the initial component display on the center of the view GetStartedWelcomeView.

<view id="Root" combine.keys="id">
	<component id="Content" combine.keys="id">
		<properties>
			<property name="initialView" value="GetStartedWelcomeView" />
		</properties>
	</component>
</view> 

The central view GetStartedWelcomeView

<view id="Root" combine.keys="id">
	<component id="Content" combine.keys="id" processor="NoContentPaneProcessor">
		<component id="NoContentPane">
			<properties>
				<property name="styleClass" value="white-background" />
				<property name="contentImpl" value="GroupedActionsContentPane" />
			</properties>

			<component id="ActionGroup1">
				<properties>
					<property name="ikonli" value="fa-check:40" />
					<property name="message" value="WELCOME_LABEL" />
				</properties>
			</component>
		</component>
	</component>
</view>

Final result