Simple Fragment Example
This is a simple example of a Fragment widget within a Swanc application.
The Fragment is a rectangular UI widget that can have an action assigned to it. It is a container widget, so it can contain other widgets. Different styles can be applied to it. The Fragment widget is extremely versatile and can be used in many different ways.
In this example we will use a Fragment widget as a header box for the page. A Fragment widget will also be used for a dialog box and the "yes" and "no" buttons.
The page will be displayed as:
The "Header" and the "Button" Fragment will be defined in the common.xml file so that they can be reused through out the whole application.
This example is available in the directory "/examples/simple_fragment_example".
Just open the index.html file in an internet browser such as Safari, FireFox or Intenet Explorer.
Chrome: Please note, due to security within Chrome it is not possible to run this example locally from your file system. However, if it is installed into a server it will run on Chrome.
This is a simple fragment example, this is a good baseline for a skeleton project. To set things up as a skeleton project this example includes a Page and PageFlow widget.
XML configuration is used as much as possible in this example for the UI and UX. However, it is possible to do develop this example completely just using JavaScript and no XML.
The file structure of this example is:
- index.html
- js
- mm
- mm.js
- mm_web_browser.js
- views
- mainview.js
- mm
- css
- mm.css
- config
- app
- common.xml
- pageflow.xml
- mainpage.xml
- messages
- messages_en.xml
- app
Note: The files highlighted in bold, are the application files. The files not highlighted in bold are part of the Swanc API.
The index.html file is the main entry point into the application and it contains the actual HTML5 canvas tag that is used.
<!DOCTYPE html>
<html>
<head>
<title>Swanc - Simple Fragment Example</title>
<meta charset="utf-8">
<style type="text/css">
body { padding: 0; margin: 0; background-color: #FFFFFF; color: #FFFFFF; }
</style>
<link rel="StyleSheet" type="text/css" href="../../css/mm.css" />
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script type="text/javascript" src="../../Swanc/js/mm/mm.js"></script>
<script type="text/javascript" src="../../Swanc/js/mm/mm_web_browser.js"></script>
<script type="text/javascript" src="js/views/mainview.js"></script>
</head>
<body id='SwancBody'>
<canvas id='canvasSwanc' width='320px' height='480px'></canvas>
<div id="main" style="top: 0px, left: 0px"></div>
<div id="dpi"></div>
</body>
</html>
This is the starting JavaScript file. In this file the Swanc framework is initalised, and the application is started.
main = (function() {
var module = {
App: (function() {
return {
init: function() {
mm.App.initMessages("config/messages/messages_en.xml", "Main", function() {
mm.App.initCanvasXML("canvasSwanc", "config/app/common.xml", "config/app/pageflow.xml", function() {
// START THE APP
mm.App.start();
});
});
}
};
})()
};
return module;
})();
$(document).ready(function() {
main.App.init();
});
The Swanc framework is referenced with the "mm" package name.
The messages_en.xml contains all the messages in English. It is possible to hard code the messages into the application but this is not recommended. It is possible to add other languages such as Portuguese by created a messages_pt.xml etc.
<?xml version="1.0" encoding="UTF-8"?>
<Message>
<MessageSection>
<Id>Main</Id>
<Messages>
<M id="MSG_SWANC_HEADER">Swanc Fragment</M>
<M id="MSG_YES">Yes</M>
<M id="MSG_NO">No</M>
<M id="MSG_DO_YOU_LIKE_THIS_COLOUR">Do you like this colour?</M>
</Messages>
</MessageSection>
</Message>
The common.xml contains the configuration of the widgets that will be reused throughout the application. In this example the widget "SwancPage" inherited from the Page and the widget "SwancPageFlow" inherited from the PageFlow widget have been defined. These two widgets can then be reused through out the whole application.
In this example a new Button widget has been created, and it has been assigned a Text widget that will be displayed in the center of the widget. The x and y positions and the action has not be defined here, that will be defined for each Button widget instance on the page. This widget inherits from the Fragment widget. The specific code to define the Button widget is:
<Widget>
<Id>Button</Id>
<Class>Fragment</Class>
<H>30</H>
<W>50%</W>
<L>1</L>
<Style>
<Colour>#99CCFF</Colour>
<BorderColour>#000000</BorderColour>
<Rounded>False</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>
In this example a new Header widget has been created, and it has been assigned a Text widget that will be displayed in the center of the widget. The Header widget has been positioned to the top of the page. This widget inherits from the Fragment widget. The specific code to define the Header widget is:
<Widget>
<Id>Header</Id>
<Class>Fragment</Class>
<X>0</X>
<AlignVert>TOP</AlignVert>
<H>50</H>
<W>100%</W>
<L>1000</L>
<Style>
<Colour>#EAEEF2</Colour>
<Rounded>False</Rounded>
</Style>
<Widgets>
<Widget>
<Id>HeaderText</Id>
<Class>Text</Class>
<L>100</L>
<Style>
<Colour>#000000</Colour>
</Style>
<Font>Arial</Font>
<FontSize>14</FontSize>
<AlignHoz>CENTER</AlignHoz>
<AlignVert>BOTTOM</AlignVert>
<AlignSpacingVert>10</AlignSpacingVert>
</Widget>
</Widgets>
</Widget>
The whole common.xml file:
<?xml version="1.0" encoding="UTF-8"?>
<CommonWidgets>
<WidgetSection>
<Id>Main</Id>
<PreLoad>True</PreLoad>
<SectionWidgets>
<!-- SWANC PAGE FLOW -->
<Widget>
<Id>SwancPageFlow</Id>
<Class>PageFlow</Class>
<X>0</X>
<Y>0</Y>
<H>100%</H>
<W>100%</W>
</Widget>
<!-- SWANC PAGE -->
<Widget>
<Id>SwancPage</Id>
<Class>Page</Class>
<X>0</X>
<Y>0</Y>
<H>100%</H>
<W>100%</W>
<Style>
<Colour>#FFFFFF</Colour>
</Style>
<Font>Arial</Font>
<FontSize>14</FontSize>
<AlignHoz>CENTER</AlignHoz>
<AlignVert>CENTER</AlignVert>
<Message>SWANC</Message>
</Widget>
<!-- HEADER FRAGMENT -->
<Widget>
<Id>Header</Id>
<Class>Fragment</Class>
<X>0</X>
<AlignVert>TOP</AlignVert>
<H>50</H>
<W>100%</W>
<L>1000</L>
<Style>
<Colour>#EAEEF2</Colour>
<Rounded>False</Rounded>
</Style>
<Widgets>
<Widget>
<Id>HeaderText</Id>
<Class>Text</Class>
<L>100</L>
<Style>
<Colour>#000000</Colour>
</Style>
<Font>Arial</Font>
<FontSize>14</FontSize>
<AlignHoz>CENTER</AlignHoz>
<AlignVert>BOTTOM</AlignVert>
<AlignSpacingVert>10</AlignSpacingVert>
</Widget>
</Widgets>
</Widget>
<!-- BUTTON WIDGET - WITH TEXT CENTERED -->
<Widget>
<Id>Button</Id>
<Class>Fragment</Class>
<H>30</H>
<W>50%</W>
<L>1</L>
<Style>
<Colour>#99CCFF</Colour>
<BorderColour>#000000</BorderColour>
<Rounded>False</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>
</SectionWidgets>
</WidgetSection>
</CommonWidgets>
The pageflow.xml file contains the page flow for this application. A page flow defines the number of pages for an application and the flow between them. In more complex application more than one page flow can be defined.
This example just contains one page and this is included in the pageflow.xml.
<?xml version="1.0" encoding="UTF-8"?>
<PageFlows>
<PageFlow>
<PreLoad>True</PreLoad>
<Class>SwancPageFlow</Class>
<StartPage>MainPage</StartPage>
<Widgets>
<Widget>
<Include>config/app/mainpage.xml</Include>
</Widget>
</Widgets>
</PageFlow>
</PageFlows>
The <StartPage> tag contains the id of the page, that will be the first page shown in the page flow.
This is the main page of this application. This page uses the Header and Button widgets that are defined in the common.xml file. It also creates a dialog from the Fragment widget.
<?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>
<!-- FRAGMENT BEING USED AS A HEADER -->
<Widget>
<Class>Header</Class>
<Widgets>
<Widget>
<Id>HeaderText</Id>
<Message>MSG_SWANC_HEADER</Message>
</Widget>
</Widgets>
</Widget>
<!-- FRAGMENT BEING USED AS A DIALOG -->
<Widget>
<Class>Fragment</Class>
<AlignVert>CENTER</AlignVert>
<AlignHoz>CENTER</AlignHoz>
<W>80%</W>
<H>30%</H>
<Style>
<Colour>#000000</Colour>
<Transparency>100</Transparency>
<Gradient>
<Colours>
<Colour pos="0">#DF01D7</Colour>
<Colour pos="1">#F7FE2E</Colour>
</Colours>
<StartX>2</StartX>
<StartY>2</StartY>
<EndX>200</EndX>
<EndY>200</EndY>
</Gradient>
</Style>
<Widgets>
<!-- YES BUTTON FRAGMENT -->
<Widget>
<Class>Button</Class>
<AlignVert>BOTTOM</AlignVert>
<AlignHoz>RIGHT</AlignHoz>
<Texts>
<Widget>
<Id>ButtonText</Id>
<Message>MSG_YES</Message>
</Widget>
</Texts>
</Widget>
<!-- NO BUTTON FRAGMENT -->
<Widget>
<Class>Button</Class>
<AlignVert>BOTTOM</AlignVert>
<AlignHoz>LEFT</AlignHoz>
<Texts>
<Widget>
<Id>ButtonText</Id>
<Message>MSG_NO</Message>
</Widget>
</Texts>
<Style>
<Colour>#EAEEF2</Colour>
</Style>
</Widget>
</Widgets>
<!-- SHOW A MESSAGE IN THE CENTER OF THE FRAGMENT -->
<Texts>
<Widget>
<Class>Text</Class>
<Style>
<Colour>#FFFFFF</Colour>
</Style>
<Font>Arial</Font>
<FontSize>16</FontSize>
<AlignHoz>CENTER</AlignHoz>
<AlignVert>CENTER</AlignVert>
<Message>MSG_DO_YOU_LIKE_THIS_COLOUR</Message>
</Widget>
</Texts>
</Widget>
</Widgets>
</Widget>