-
Notifications
You must be signed in to change notification settings - Fork 8
My First Example
This is the first example of a simple Swanc application. In programming tradition this will just display "Hello World!" in a Text widget.
This example is available in the directory "/examples/first_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 "Hello World!" 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 - First 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() {
// INIT SWANC AND APPLICATION
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_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.
<?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>
</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 "Hello World!" Text 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>
<Widget>
<Class>Text</Class> <!-- THIS IS THE TYPE, CAN BE LINKED TO ABOVE TYPE -->
<L>1</L>
<Style>
<Colour>#000000</Colour>
</Style>
<Font>Arial</Font>
<FontSize>14</FontSize>
<AlignHoz>CENTER</AlignHoz>
<AlignVert>CENTER</AlignVert>
<Message>MSG_HELLO_WORLD</Message>
</Widget>
</Widgets>
</Widget>