Fragment Widget

The Fragment widget is a rectangle area that is drawn. It is a container widget so that other widgets can be drawn on to it. No Button widget exists in this framework, because the Fragment widget can be used just like a Button also. It allows for a click action.

The attributes for the Fragment widget are:

Attribute	Type	Description
m	Widget	The main Widget Class.
s	WidgetStyle	The style of the widget.
clickAction	Function	This is a function that is called when a user taps on the fragment. The function signature is function(Fragment Widget, x position of user tap, y position of user tap)
selectWidget	Widget	If this widget is not null, it allows the fragment to be selected instead on selecting the whole fragment. When this is selected, this widget is not returned but the fragment.

XML Button Fragment Widget Example

This is an example of the Fragment Widget written in XML. This example shows how it is possible to use a Fragment as a button. Make a Button class in the common.xml file, so it can be reused in the application.

common.xml:

<Widget>
	<Id>Button</Id>
	<Class>Fragment</Class>
	<H>30</H>
	<W>200</W>
	<L>1</L>
	<Style>
		<Colour>#99CCFF</Colour>
		<BorderColour>#000000</BorderColour>
		<Rounded>True</Rounded>
	</Style>
	<Texts>
		<Widget>
			<Id>ButtonText</Id>
			<Class>Text</Class>
			<Style>
				<Colour>#FFFFFF</Colour>
			</Style>
			<Font>Arial</Font>
			<FontSize>14</FontSize>
			<AlignHoz>CENTER</AlignHoz>
			<AlignVert>CENTER</AlignVert>
		</Widget>
	</Texts>
</Widget>

On the mainpage.xml file add the new Button class, which in turn inherits from Fragment:

<?xml version="1.0" encoding="UTF-8"?>
<Widget> <!-- AT THIS LEVEL MUST BE WIDGET -->
    <Id>MainPage</Id>
    <Class>SwancPage</Class>
    <PreLoad>True</PreLoad>  <!-- THIS PAGE IS PRELOADED WHEN PAGE FLOW PRELOADED -->
    <Widgets>
        <Widget>
	    <Class>Button</Class> 
            <L>1</L>
            <AlignHoz>CENTER</AlignHoz>
			<AlignVert>CENTER</AlignVert>
			<Texts>
				<Widget>
					<Id>ButtonText</Id>
					<Message>MSG_PRESS_ME</Message>
				</Widget>
			</Texts>
			<Click>
                <Action>PRESS_ME_BUTTON_ACTION</Action>
            </Click>
        </Widget>
    </Widgets>
</Widget>

The action has been added called "PRESS_ME_BUTTON_ACTION", this can be implement in the JavaScript file mainview.js. The action has been implemented as:

mm.App.addFunction("PRESS_ME_BUTTON_ACTION", function(buttonIn, xIn, yIn) {
	// SIMPLE HELLO WORLD ALERT
	alert(mm.App.getMessage("MSG_HELLO_WORLD"));
});

When the user taps the Fragment an alert will be shown with the text "Hello World!". Notice in the JavaScript code how the text comes from the messages_en.xml file. The code in JavaScript to get the messages is mm.App.getMessage("MSG_HELLO_WORLD")

The message_en.xml file is defined as:

<?xml version="1.0" encoding="UTF-8"?>
<Message>
    <MessageSection>
        <Id>Main</Id>
        <Messages>
            <M id="MSG_HELLO_WORLD">Hello World!</M>
        </Messages>
    </MessageSection>
</Message>

This Fragment will be displayed on the screen as:

This example can be found here Button Example

XML Dialog Fragment Widget Example

It is possible to use a Fragment as a popup dialog. A Fragment can contain any other fragment. The next example shows a Fragment widget as a popup dialog:

<Widget>
	<Id>FragmentPopup</Id>
	<Class>Fragment</Class>
	<H>150</H>
	<W>80%</W>
	<L>1000</L>
	<AlignHoz>CENTER</AlignHoz>
	<AlignVert>CENTER</AlignVert>
	<Widgets>
		<Widget>
			<Class>Text</Class>
			<Style>
				<Colour>#000000</Colour>
			</Style>
			<Font>Arial</Font>
			<FontSize>14</FontSize>
			<Text>Popup with Message</Text>
			<AlignHoz>CENTER</AlignHoz>
			<AlignVert>CENTER</AlignVert>
		</Widget>
		<Widget>
			<Class>PageButton</Class>
			<AlignVert>BOTTOM</AlignVert>
			<AlignHoz>CENTER</AlignHoz>
			<W>100</W>
			<AlignSpacingVert>5</AlignSpacingVert>
			<Texts>
				<Widget>
					<Class>PageButtonText</Class>
					<Text>OK</Text>
				</Widget>
			</Texts>
			<Click>
				<Action>FRAGMENT_POPUP_CLOSE_ACTION</Action>
			</Click>
			<Style>
				<Colour>#000000</Colour>
				<BorderColour>#FFFFFF</BorderColour>
				<BorderW>2</BorderW>
			</Style>
		</Widget>
	</Widgets>
	<Style>
		<Colour>#EAEEF2</Colour>
		<BorderColour>#00C8FA</BorderColour>
		<BorderW>2</BorderW>
		<Rounded>True</Rounded>
	</Style>
</Widget>

The Fragment Popup is shown as: