Simple Button Example
This is a simple example of a standard button within a Swanc application. In this example a button is shown to the page, the user can press the button and a simple action is performed. The action just performs a simple alert to the screen.
The button will be displayed as:
Swanc does not contain a Button widget. Instead of using a Button widget it is possible to use the Fragment widget.
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.
In a normal application it is possible to design your button in the common.xml file. It's size, style etc can be defined here and then reused across the whole application making the button consistent. In the future if you want for example to change the colour of the button, that can be performed once in the common.xml file and it will be implemented across the whole application.
For this example we create a new Button widget in the common.xml file.
This example is available in the directory "/examples/simple_button_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 button 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 Button 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("PRESS_ME_BUTTON_ACTION", function(buttonIn, xIn, yIn) {
// SIMPLE HELLO WORLD ALERT
alert(mm.App.getMessage("MSG_HELLO_WORLD"));
});
Within the JavaScript code instead of hard coding the messages, it is possible to get the messages from the XML messages file using this function mm.App.getMessage("MSG_HELLO_WORLD")
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.initPressMeButtonAction();
// START THE APP
mm.App.start();
});
});
},
initPressMeButtonAction: function() {
// ADD PRESS ME BUTTON ACTION
mm.App.addFunction("PRESS_ME_BUTTON_ACTION", function(buttonIn, xIn, yIn) {
// SIMPLE HELLO WORLD ALERT
alert(mm.App.getMessage("MSG_HELLO_WORLD"));
});
}
};
})()
};
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_PRESS_ME">Press Me</M>
<M id="MSG_HELLO_WORLD">Hello World!</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>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>
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>
<!-- BUTTON WIDGET - WITH TEXT CENTERED -->
<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>
</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 will contain the Button widget, it defines the text to be displayed in the button and assigns its action.
<?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>