Simple Circle Example
This is a simple example of a Circle widget within a Swanc application.
The Circle is a circular 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 Circle widget is extremely versatile and can be used in many different ways.
In this example we will use a Circle widget as a dialog circle and the "yes" and "no" buttons.
The Circle will be displayed as:
The "Button" Circle will be defined in the common.xml file so that they can be reused through out the whole application.
If the user presses the "Yes" or "No" button an alert will be displayed with the id of the Button.
This example is available in the directory "/examples/simple_circle_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 circle 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 Circle 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.
This file also contains the action that the button will be assigned to. A name needs to be assigned to each action, the name is used in the XML configuration for the button so that it can reference the action in the JavaScript code. Each name must be unique for each action.
In the JavaScript to create a click action and assign it a name the mm.App.addFunction is used. The first parameter is the name, and the second parameter is the callback click action. For this example, the action code is:
mm.App.addFunction("BUTTON_ACTION", function(buttonIn, xIn, yIn) {
// SHOW ID OF BUTTON
alert(buttonIn.m.id);
});
The whole mainview.js file:
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() {
main.App.initButtonAction();
// START THE APP
mm.App.start();
});
});
},
initButtonAction: function() {
// ADD BUTTON ACTION
mm.App.addFunction("BUTTON_ACTION", function(buttonIn, xIn, yIn) {
// SHOW ID OF BUTTON
alert(buttonIn.m.id);
});
}
};
})()
};
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 Button widget has an action defined for it. The x and y positions are not defined here, they will be defined for each Button widget instance on the page. This widget inherits from the Circle widget. The specific code to define the Button widget is:
<Widget>
<Id>Button</Id>
<Class>Circle</Class>
<Radius>25</Radius>
<L>1</L>
<Style>
<Colour>#99CCFF</Colour>
</Style>
<Texts>
<Widget>
<Id>ButtonText</Id>
<Class>Text</Class>
<Style>
<Colour>#000000</Colour>
</Style>
<Font>Arial</Font>
<FontSize>14</FontSize>
<AlignHoz>CENTER</AlignHoz>
<AlignVert>CENTER</AlignVert>
</Widget>
</Texts>
<Click>
<Action>BUTTON_ACTION</Action>
</Click>
</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>
</Widget>
<!-- BUTTON WIDGET - WITH TEXT CENTERED -->
<Widget>
<Id>Button</Id>
<Class>Circle</Class>
<Radius>25</Radius>
<L>1</L>
<Style>
<Colour>#99CCFF</Colour>
</Style>
<Texts>
<Widget>
<Id>ButtonText</Id>
<Class>Text</Class>
<Style>
<Colour>#000000</Colour>
</Style>
<Font>Arial</Font>
<FontSize>14</FontSize>
<AlignHoz>CENTER</AlignHoz>
<AlignVert>CENTER</AlignVert>
</Widget>
</Texts>
<Click>
<Action>BUTTON_ACTION</Action>
</Click>
</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 Button widget that is defined in the common.xml file. It also creates a dialog from the Circle 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>
<!-- CIRCLE BEING USED AS A DIALOG -->
<Widget>
<Class>Circle</Class>
<AlignVert>CENTER</AlignVert>
<AlignHoz>CENTER</AlignHoz>
<Radius>150</Radius>
<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>100</EndX>
<EndY>100</EndY>
</Gradient>
</Style>
<Widgets>
<!-- YES BUTTON FRAGMENT -->
<Widget>
<Id>Yes</Id>
<Class>Button</Class>
<AlignVert>BOTTOM</AlignVert>
<AlignSpacingVert>60</AlignSpacingVert>
<AlignHoz>RIGHT</AlignHoz>
<AlignSpacingHoz>60</AlignSpacingHoz>
<Texts>
<Widget>
<Id>ButtonText</Id>
<Message>MSG_YES</Message>
</Widget>
</Texts>
</Widget>
<!-- NO BUTTON FRAGMENT -->
<Widget>
<Id>No</Id>
<Class>Button</Class>
<AlignVert>BOTTOM</AlignVert>
<AlignSpacingVert>60</AlignSpacingVert>
<AlignHoz>LEFT</AlignHoz>
<AlignSpacingHoz>60</AlignSpacingHoz>
<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>#000000</Colour>
</Style>
<Font>Arial</Font>
<FontSize>14</FontSize>
<AlignHoz>CENTER</AlignHoz>
<AlignVert>CENTER</AlignVert>
<Message>MSG_DO_YOU_LIKE_THIS_COLOUR</Message>
</Widget>
</Texts>
</Widget>
</Widgets>
</Widget>