App.json

by Admin 23. October 2011 01:53

The App.json file allows to configure an application. All configuration settings are optional.

{
        title: "Blog Viewer - Tangere.Net",
        theme: "boston",
        debug: true,
        layoutMode: "split",
        layoutMainMinWidth: 700,
        chrome = true,
        authentication = false,
        authenticationServer = "",
        loginApp = "",
        add2home = true,
        config: {  url : "http://tangere.net/" }
}

Title: the title for the application. Only visible in desktop browsers.

theme: allows to assign a fixed theme to the application. If no theme is provided the theme "cupertino" is used on iOS devices and the theme "boston" is used on all other device types.

debug: false|true, when set to true .js files are not compressed and diagnostic information is show in the debug console.

layoutMode: single|split, the split mode allows to show two panels side by side on tablets.

layoutMainMinWidth: in split layoutMode the side panel is automatically hidden if the display width is not sufficient to show the side panel (width 320px) and the main panel side by side. On an iPad with a 1024x768 resolution and the default layoutMainMinWidth = 720 the side panel will be hidden in portrait mode.

chrome: true|false, the App chrome consists of a title bar on top of the App as well as a toolbar at the bottom of the App. When set to false no chrome will be added to the App.

add2home: true|false, allows to disable the Add To Home tip on iOS devices

config: allows to pass arbitrary configuration settings to the App. These settings can be retrieved with the $App.config object (e.g. $App.config.url)

One month later - Tangere.Net v0.1

by Admin 20. October 2011 06:36
Just one month after the definition of the project goals a first version of Tangere.Net was just finished.
A sample email App can be accessed at http://tangere.mobi/app/email and this blog can be viewed with a blog viewer app at http://tangere.mobi
The apps are currently only working on WebKit/Safari browsers. So an iPhone or iPad or a Safari browser on Windows is required to access the samples.
Tangere.Net is based on knockout.js - so the app logic is defined in a JavaScript ViewModel and comepletely seperated from the presentation.
 
So from our initial to do list we can already remove most items:
  1. Pure HTML5/Javascript5. No need to deal with browser cruft (IE6, etc.) and dated devices.
  2. Apps should be usable on different sized screens (e.g. iPhone/iPad) with minimal device specific code/logic.
  3. Clear separation between backend logic, frontend logic and user interface. The backend provides just JSON data, the frontend controls the application flow and the user interface.
  4. The Apps are real applications and not public, mobile web sites. So SEO tactics can be completely ignored. This allows to build high performance, single page applications .
  5. The user interface should be easily customizable/brandable. A designer with just HTML/CSS knowledge should be able to change e.g. the color schema or the order of buttons.
  6. The Apps should be modular e.g. allowing to add customer specific modules or features.
  7. The Apps should be easily upgradable without breaking customizations.
  8. Unlike traditional web applications WebApps don’t need to be stateless any longer. Local storage allows to maintain local state information.
  9. The WebApps should have a default look & feel quite similar to native Apps.
  10. The Apps should be addable to the iOS home screen.
  11. The Apps need to support the limited iOS multitasking WebApp capabilities (avoid unwanted complete restarts).
But we added already a lot of items to our to do list for the next version:
  1. Add more predefined styles for lists, buttons etc.
  2. Add support for Android and Blackberry devices
  3. Add support for IE10/Win8
  4. Add permission and membership provider support
 

Tags:

Blog

Architecture Overview

by Admin 19. October 2011 08:13

The server component of Tangere.Net is essentially a ASP.NET MVC3 application. The Controller uses Models to retrieve data from data bases and backend systems. Views don’t really exist – the controller sends the “view” data in the JSON format to the Tangere.Net App.

The main logic of the client side resides in a View Model (VM). For each page of the App a View is defined in HTML5. The views are using declarative bindings using a concise, readable syntax to connect with the view model. The VM uses knockout.js to provide also templating and dependency tracking services. The VM retrieves the Model data from backend services. Dependency tracking is used to automatically update the views after any change of the model data or view model state information. So the core architecture of the client site is MVVM.

But the VM doesn’t directly show the views on the device. A “SmartPresenter” uses again dependency tracking to detect changes in the state of the VM. Anytime the state changes the screen of the device is updated to reflect the new state of the VM. The smart part of the Presenter knows if the device is a phone or a tablet and shows the views either on a single page or uses a SplitView to show two views side-by-side on a tablet. The SmartPresenter manages also animated transitions between the views and provides all device specific features  (like “Add to Home Screen”).

So what’s the name of the architecture? We have MVC + MVVM + P. But the traditional V of MVC became a MVVMP. So Tangere.Net is probably the first framework with a MCMVVMP architecture – so we desperately need some ideas for a better acronym…

SplitView on tablets

by Admin 19. October 2011 05:33

The SplitView behaves like the split view of the iOS5 mail app:

  • in landscape mode the side column is always visible
  • in portrait mode the side column can be hidden/shown by swiping left or right 

 

Tags:

Features

One App for both phones and tablets – SmartPresenter

by Admin 19. October 2011 05:28

The SmartPresenter shows the views of the App optimized for both, phones and tablets. On a phone the screen always shows only one view:

 

 

 

 

On a tablet two views can be shown side by side ("SplitView"): 

 

 

Tags:

Features

Automatic address bar hiding

by Admin 19. October 2011 05:03

On iPhones/iPods the browser address bar is automatically hidden:

 

 

Tags:

Features

Add to home screen

by Admin 19. October 2011 04:03

On iOS devices Tangere.Net Apps can be added to the Home Screen:

 

1. The App shows a bubble with instructions how to add the App to the Home Screen: 2. After the App is added an Home Screen icon allows to start the App like a native App. 3. If an App is started from the Home Screen no browser chrome is shown. So any Tangere.Net App is indistinguishable from a native App.

Tags:

Features

Header/footer size adjusted in landscape mode

by Admin 19. October 2011 03:53

On a phone the size of the content is enlarged by automatically reducing the height of the headers and footers:

 

 

 

 

 

Tags:

Features

Licensing

by Admin 18. October 2011 05:47

Tangere.Net is available with two licenses: the GNU Affero General Public License AGPL 3 and as a commercial component.

Please contact us for details about the commercial licensing.

Tags:

Legal

Copyright

by Admin 18. October 2011 05:47

Tangere.Net
Copyright (c) 2011 adenin TECHNOLOGIES Inc. http://tangere.net


Tangere.Net includes the following components:


Zepto.js, (c) 2010, 2011 Thomas Fuchs, http://zeptojs.com
License: MIT


Knockout JavaScript library
(c) Steven Sanderson - http://knockoutjs.com/
License: MIT


iScroll4, Add to Home Screen
Copyright (c) 2011 Matteo Spinelli, http://cubiq.org/
License: MIT


.less, http://www.dotlesscss.org/
License: Apache


JSON.NET
Copyright (c) 2007 James Newton-King, http://json.codeplex.com
License: MIT


YUI Compressor for .Net
Copyright (c) 2008 - 2011, Pure Krome, http://yuicompressor.codeplex.com/
License: New BSd

Tags:

Legal