Concept

I'm not going to cover the concept of PhoneGap/Cordova here as this would exceed the scope. If you're interested in that (and you should be interested) please take a look at their documentations to understand their underlaying architecture.

Even though ch.schwingenonline.app isn't that complex, I'd like to try to explain it's core concept. This includes some basic knowledge about the used resources, the workflow of it and how content is received and shown to the user.

Core

The app's base is nothing other than an Ajax powered website - that simple. There's a base layout (index.html) which holds the base UI/layout and loads/links/references all external libraries, stylesheets ans JS files.

Now, whenever a link/button is clicked (and on app startup) the app analyzed the clicked button, receives some information from it (e.g. which tab should be active, what's the data source for the content to show) and proceeds the click. This is done in app.js which holds the app logic.

Since we got the data source (this normally points to a remote server/path responding with a JSON), the app fetches this JSON and renders the view (done with Mustache.js). Et voilà.

This is a very abstracted view on how things work and you should find deeper explanations in the wiki (I hope so).

Workflow

Somehow a more detailed/visualized explanation of the Core Concept is shown below:

- User starts the application
- Splashscreen is shown
- Static resources (routing table, templates) are loaded
- Check/apply preferences and validate cache
- Click on the home button
  -> triggers the normal processClick workflow
- clicked button get's analyzed
  -> fetch tab, template, source, associated sidepanel and puller information
- update the UI to represent the new state (active tab etc.)
- check routing table for remote source and fetch the JSON
- render the JSON with Mustache and display the result
- if sidepanel is defined, do the same for it
- if puller (pull-to-refresh) is needed, activate him
- the click has been proceeded
  -> when a new button gets clicked, start over