Difference between revisions of "OX6:OX Mobile Web Interface"

(Running the OX Mobile Web App on your smartphone)
 
(118 intermediate revisions by 11 users not shown)
Line 1: Line 1:
= Information and Installation of Open-Xchange Mobile Web App (Preview)=
+
= Information and Installation of Open-Xchange Mobile Web Interface (Only for OX 6) =
  
 
== Description ==
 
== Description ==
 
+
The Open-Xchange Mobile Web Interface provides you access to your data from the Open-Xchange Server 6 via your smartphone. The Open-Xchange Mobile Web Interface offers online and offline access to appointments, contacts and mails on the road using your smartphone's browser. Optimized for low bandwiths the Open-Xchange Mobile Web Interface offers instant and fast over the air access to your data, which are at the same time safely stored on Open-Xchange Server. The following modules are supported:
Later this year, Open-Xchange will release Open-Xchange Mobile Web App, which lets you access data from Open-Xchange Server 6 with your smartphone running a webkit based browser like the iPhone or Android devices.
 
Open-Xchange Mobile Web App offers online and offline access to appointments, contacts and mails on the road using your smartphone. Optimized for low bandwiths Open-Xchange Mobile Web App offers instant and fast over the air access to your data, which are at the same time safely stored on Open-Xchange Server. The following modules are supported:
 
  
 
*E-Mail
 
*E-Mail
Line 10: Line 8:
 
*Contacts
 
*Contacts
  
Moreover the app offers seamless integration to use your phones basic functions like phone calls. You can easily start calls from your Open-Xchange contacts on your smartphone or directly send E-Mails.
+
Moreover the web interface offers seamless integration to use your phones basic functions like phone calls. You can easily start calls from your Open-Xchange contacts on your smartphone or directly send E-Mails.
  
== Features and Functions ==
 
 
=== Mail Module ===
 
*Access to all Open-Xchange standard folder: Inbox, Sent, Trash, Spam and Drafts
 
*Creation of new e-mails
 
*Answer, forward and delete e-mails
 
*Mail attachments (Attachment handling/support is defined by mobile device)
 
 
=== Contact Module ===
 
*Access to all Open-Xchange contact folder and contacts with details
 
*Creation of e-mail directly from contact module
 
*Start call directly from contact module
 
 
=== Calendar Module ===
 
* Access to all Open-Xchange calendar folder and appointments with details
 
* Accept/Decline of appointments
 
* Participants and resources list from all appointments
 
* Planned: Additional notes for Accept/Decline function, creation of new appointments
 
 
=== Persistence of the Mobile Web App ===
 
*Offline capability
 
*All contacts are available offline
 
*All appointments are available offline
 
*All mail header are available offline
 
*All mails which are opened once are available offline
 
 
===Configuration===
 
*Number of e-mails retrieved (25,50,75,100)
 
*Number of days which will be checked for appointments (5,10,20,30)
 
*Animation for iOS devices (on/off)
 
*Subscription of contact folders
 
*Autologin
 
  
 
===Themeability, branding and i18n ===
 
===Themeability, branding and i18n ===
  
* i18n for DE and EN, other languages can be added.
+
* i18n for DE, EN, ES, FR, NL, PL and JP. Other languages can be added.
* Branding options: App name  and app icon
 
 
* Themeability by CSS
 
* Themeability by CSS
 +
* JavaScript plugins for branding and custom functions.
 +
  
 
== Supported devices ==
 
== Supported devices ==
  
The OX Mobile Web App should work on devices running a Webkit based browser. These are mainly the devices running iOS, Android and newest generation of BlackBerrys. For devices running Symbian we recommend to use Opera Mobile Browser.
+
The Open-Xchange Mobile Web Interface is designed to run on modern devices running Android or iOS. It can also used with modern desktop browsers.
  
 
{|border="2" rules="all" align="left">
 
{|border="2" rules="all" align="left">
Line 61: Line 28:
 
   | 
 
   | 
 
|-
 
|-
   |Apple iPhone
+
   |Apple iOS
   |yes (iPhone running iOS 2.0, 2.1, 3.0, 4.0, 4.2.1, 4.3)
+
   |iOS 3 - 5.1
   |Official Supported by OX: 2G, 3G, 3GS, 4 and iPod-Touch 3.1.3
+
   |
 
  |-
 
  |-
 
   |Android
 
   |Android
   |yes
+
   |yes, Android 2.2 - 4.0
   |Official Supported by OX: Google Nexus One (Android 2.3.3), HTC Desire (Sense Android 2.1)
+
   |Official Supported by OX: Google Nexus One (Android 2.3.3), Samsung Galaxy Nexus (Android 4.0.3). The web interface is optimized for a display size of 320 x 480 pixels. Smaller resolutions may result displaying issues of some UI elements
|-
 
  |Nokia/Symbian S60 5th Edition
 
  |via Opera Mini
 
  |i.e Nokia N97 (Although there is a built-in Webkit browser running on this device a Symbian bug in the cookie-handling which prevents login to the OX-Server)
 
|-
 
  |Windows Mobile running Internet Explorer
 
  |no
 
  |
 
|-
 
|Windows Phone 7
 
|not yet
 
|
 
 
|-
 
|-
 
|}
 
|}
  
 
== Technical overview ==
 
== Technical overview ==
* Based on HTML5, CSS, Javascript (Frameworks jQuery and jQTouch)
+
* Based on HTML5, CSS, Javascript (jQuery Mobile)
 
* Optimized for Webkit browsers like Mobile Safari and Chrome. Will also work with restrictions on Firefox and Opera Mobile
 
* Optimized for Webkit browsers like Mobile Safari and Chrome. Will also work with restrictions on Firefox and Opera Mobile
 
* Complete offline capability
 
* Complete offline capability
 +
 +
 +
'''Updates with version 1.1.0 rev 8'''
 +
 +
* True fixed toolbars:
 +
Version 1.1.0 rev 6 of the Mobile Web Interface used dynamic recalcualtion to re-position footer and header bars on the fly after scrolling the document. The new version of jQuery Mobile (1.1) now uses CSS based positioning which is truly native on supported platforms.
 +
 +
Some platforms like iOS 4 will now fall back to static positioning where the toolbars simply scroll with the page.
 +
 +
Platforms which support fixed toolbars:
 +
 +
* iOS5 – iPhone and iPad
 +
* Android 2.2 and 2.3
 +
* Android 3.x tablets (Honeycomb)
 +
* Android 4.x (ICS)
 +
* Chrome for Android (beta)
 +
* BB Playbook 1-2
 +
* All modern desktop browsers (IE, Firefox, Safari, Chrome, etc.)
 +
  
 
===Offline Mode details===
 
===Offline Mode details===
  
The OX Mobile Web App uses HTML5 to provide an offline mode for the user. To do this, there are two different kinds of storage mechanisms.
+
The Open-Xchange Mobile Web Interface uses HTML5 to provide an offline mode for the user. To do this, there are two different kinds of storage mechanisms.
  
* The whole application will be cached using the "HTML5 application cache". This will be done on the first visit/start of the app. After this initial download, all graphics, language files, js-files and everything else which is needed to run the app is stored locally on your phone in a storage managed by the browser.
+
* The whole web interface uses caching by incorporating the "HTML5 application cache". This will be done on the first visit/start of the web interface. After this initial download, all graphics, language files, js-files and everything else which is needed to run the web interface is stored locally on your phone in a storage managed by the browser.
  
 
* The data from the OX server will be stored using the HTML5 storage mechanism which will be supportet by the users device. These can be a HTML5 local storage, session storage or an SQLite database. For the user there's no difference between these different storage modes.
 
* The data from the OX server will be stored using the HTML5 storage mechanism which will be supportet by the users device. These can be a HTML5 local storage, session storage or an SQLite database. For the user there's no difference between these different storage modes.
  
Note: In case your device has no storage support (like the Nokia N97), a log message will inform you about this. The log can be found under the settings page, hitting the button in the upper right corner showing the exclamation mark symbol.
 
  
 
== Requirements ==
 
== Requirements ==
  
* Open-Xchange Server >= v.6.20
+
* Open-Xchange Server >= v.6.20 rev 21
* 1GB RAM
+
 
 +
== Installation on Open-Xchange v6.22.x ==
 +
 
 +
=== Debian GNU/Linux 6.0 ===
 +
 
 +
Add the following entry to /etc/apt/sources.list if not already present:
 +
 
 +
deb http://LDBACCOUNT:LDBPASSWD@software.open-xchange.com/OX6/6.22/OXtender-stable/MobileWebInterface/DebianSqueeze/ /
 +
 
 +
and run
 +
 
 +
$ apt-get update
 +
$ apt-get install open-xchange-mobile open-xchange-mobile-theme-default open-xchange-mobile-config
 +
 
 +
=== SUSE Linux Enterprise Server 11===
 +
 
 +
Add the package repository using zypper if not already present:
 +
 
 +
$ zypper ar http://LDBACCOUNT:LDBPASSWD@software.open-xchange.com/OX6/6.22/OXtender-stable/MobileWebInterface/SLES11 MobileWebInterface
  
== Download & Documentation==
+
and run
  
Please note that everything from this page and beyond is in Preview: This means nothing is final, changes will be made before final release, stability is not guaranteed and nothing from this site should be used in production.
+
$ zypper ref
 +
$ zypper in open-xchange-mobile open-xchange-mobile-theme-default open-xchange-mobile-config
  
Follow this [http://software.open-xchange.com/OX6/OXtender-unstable/MobileApp/ link] to download the installation package, Release Notes and documentation.
+
=== RedHat Enterprise Linux 6 ===
  
{{InstallPlugin|pluginname=open-xchange-gui-mobile-v2-gui open-xchange-gui-mobile-v2|sopath=OXtender-unstable/MobileApp|reponame=mobilewebapp}}
+
Start a console and create a software repository file if not already present:
  
== Configuration ==
+
$ vim /etc/yum.repos.d/MobileWebInterface.repo
  
Installation on the Apache or another webserver:
+
[MobileWebInterface]
* After installation locate the installed files in your webroot directory, i.e. <code>/var/www/ox6-mobile-v2/</code> on Debian
+
name=Open-Xchange
* Edit the file <code>"ox-access.conf"</code> in directory ox6-mobile-v2
+
baseurl=http://LDBACCOUNT:LDBPASSWD@software.open-xchange.com/OX6/6.22/OXtender-stable/MobileWebInterface/RHEL6/
* If your open-xchange server is running on a different host, change localhost to your OX server address, i.e. "<code>https://example.com/ajax</code>". '''Note''': We strongly recommend the usage of https, otherwise data will be transmitted unencrypted via client and server
+
gpgkey=http://software.open-xchange.com/oxbuildkey.pub
* run the command (adopt webserver path on SLES/RHEL).
+
enabled=1
  $ /opt/open-xchange/sbin/update-cache.manifest /var/www/ox6-mobile-v2/cache.manifest.in /var/www/ox6-mobile-v2/cache.manifest /var/www/ox6-mobile-v2/ox-access.conf
+
gpgcheck=1
* You also need to add a new mimetype to your webserver configuration to make sure the caching (offline mode) works.  
+
metadata_expire=0m
 +
 
 +
and run
 +
 
 +
$ yum update
 +
$ yum install open-xchange-mobile open-xchange-mobile-theme-default open-xchange-mobile-config
 +
 
 +
=== CentOS 6===
 +
 
 +
Start a console and create a software repository file if not already present:
 +
 
 +
$ vim /etc/yum.repos.d/MobileWebInterface.repo
 +
 
 +
[MobileWebInterface]
 +
name=Open-Xchange
 +
baseurl=http://LDBACCOUNT:LDBPASSWD@software.open-xchange.com/OX6/6.22/OXtender-stable/MobileWebInterface/RHEL6/
 +
gpgkey=http://software.open-xchange.com/oxbuildkey.pub
 +
enabled=1
 +
gpgcheck=1
 +
metadata_expire=0m
 +
 
 +
and run
 +
 
 +
$ yum update
 +
$ yum install open-xchange-mobile open-xchange-mobile-theme-default open-xchange-mobile-config
 +
 
 +
== Optional link to Mobile Web Interface in OX6 login mask (since 6.20.3) ==
 +
There is an optional plugin available which adds a link to the Mobile Web Interface to the common OX6 login screen.
 +
 
 +
=== Debian ===
 +
$ apt-get install open-xchange-gui-mobile-redirect-plugin
 +
 
 +
 
 +
=== SUSE Linux Enterprise Server ===
 +
$ zypper install open-xchange-gui-mobile-redirect-plugin
 +
 
 +
 
 +
=== RedHat Enterprise Linux ===
 +
$ yum install open-xchange-gui-mobile-redirect-plugin
 +
 
 +
 
 +
The plugin needs to be configured in ${DOCROOT}/ox6/plugins/com.openexchange.mobile.redirect/config/config.js
 +
 
 +
data = {
 +
    url: "https://m.example.com//",
 +
    isEnabled: function() {
 +
        return true;
 +
        //----- example to add a device check instead of always returning true -----//
 +
        // return (/iphone|ipod|android|/i.test(navigator.userAgent.toLowerCase()));
 +
    },
 +
    getText: function() {
 +
        return _("Switch to mobile version");
 +
    }
 +
};
 +
 
 +
 
 +
 
 +
 
 +
 
 +
== Upgrading from previous versions ==
 +
If you have the previous version of the Mobile Web Interface installed (1.0), you can not upgrade to version 1.1 or later directly. Due to a package rename you have to remove the old packages before installing the new ones. The packages for version 1.0 are prefixed with "open-xchange-gui-mobile-v2", the new ones are prefixed with "open-xchange-mobile*".
 +
 
 +
 
 +
=== Debian ===
 +
  $ apt-get purge open-xchange-gui-mobile-v2
 +
$ apt-get purge open-xchange-gui-mobile-v2-gui open-xchange-gui-mobile-v2-theme-default
 +
 
 +
 
 +
=== SUSE Linux Enterprise Server ===
 +
$ zypper remove open-xchange-gui-mobile-v2
 +
$ zypper remove open-xchange-gui-mobile-v2-gui open-xchange-gui-mobile-v2-theme-default
 +
 
 +
 
 +
=== RedHat Enterprise Linux ===
 +
$ yum remove open-xchange-gui-mobile-v2
 +
$ yum remove open-xchange-gui-mobile-v2-gui open-xchange-gui-mobile-v2-theme-default
 +
 
 +
Please note, the package open-xchange-gui-mobile-v2 is located on your ox backend system, open-xchange-gui-mobile-v2-gui and open-xchange-gui-mobile-v2-theme-default are installed on your webserver machine. If both systems are the same you have to remove all packes on the same system.
 +
 
 +
After removing the old packages proceed with the installation of the new version 1.1 or later
 +
 
 +
== Installation on OX App Suite ==
 +
The download and installation information for Open-Xchange App Suite product family (Open-Xchange Server Edition and Hosting Edition) is available at: http://oxpedia.org/wiki/index.php?title=AppSuite:OX_Mobile_Web_Interface
 +
 
 +
 
 +
= Configuration =
 +
Installation on the Apache 2 webserver:
 +
 
 +
'''Important note for upgraders:'''
 +
In previous versions (lower 1.1) a server address had to be entered in the cache.manifest file to grant access to the OX6 backend. This not needed anymore. The new version of the mobile web grants per default access to all uncached ressources. Don't edit the cache.manifest manually.
 +
 
 +
* You need to add a new mimetype to your webserver configuration to make sure the caching (offline mode) works.  
 
** On Apache servers you can add the mimetype either global or via "<code>.htaccess</code>" file.
 
** On Apache servers you can add the mimetype either global or via "<code>.htaccess</code>" file.
 
** For global configuration edit the file <code>mime.conf</code> under  <code>/etc/apache2/mods-enabled/</code>
 
** For global configuration edit the file <code>mime.conf</code> under  <code>/etc/apache2/mods-enabled/</code>
Line 125: Line 208:
 
** For configuration via <code>.htaccess</code> file just add a .htaccess file to the install directory. This should include the line  "<code>AddType text/cache-manifest .manifest'</code>". '''Note''': Either the global configuration or the .htaccess file should be used. (.htaccess files will only work if your Apache settings contain <code>AllowOverride</code>. For further information on mime types, please refer to your webservers user manual)
 
** For configuration via <code>.htaccess</code> file just add a .htaccess file to the install directory. This should include the line  "<code>AddType text/cache-manifest .manifest'</code>". '''Note''': Either the global configuration or the .htaccess file should be used. (.htaccess files will only work if your Apache settings contain <code>AllowOverride</code>. For further information on mime types, please refer to your webservers user manual)
  
* For more details and README see the systems documentation directory (/usr/share/doc).
+
* To direct to the correct host another site in apache is needed. Create a file named "mobile" in /etc/apache2/sites-available (and enable it by linking to it from sites-enabled, of course):
  
==Running the OX Mobile Web App on your smartphone==
+
<VirtualHost *:80>
 +
    ServerAdmin webmaster@localhost
 +
    ServerName mobile.YOUR_DOMAINAME.TLD
 +
    ServerAlias m.YOUR_DOMAINAME.TLD
 +
    DocumentRoot /var/www/mobile
 +
    <Directory />
 +
        Options FollowSymLinks
 +
        AllowOverride None
 +
    </Directory>
 +
    <Directory /var/www/mobile>
 +
        Options Indexes FollowSymLinks MultiViews
 +
        AllowOverride None
 +
        Order allow,deny
 +
        allow from all
 +
    </Directory>
 +
    ErrorLog /var/log/apache2/error.log
 +
    # Possible values include: debug, info, notice, warn, error, crit,
 +
    # alert, emerg.
 +
    LogLevel warn
 +
    CustomLog /var/log/apache2/access.log combined
 +
</VirtualHost>
  
After installation of the App on your webserver, a client can easily access the app via his phone's browser. We recommend to add a new subdomain to your web address to make access for clients easy. A short subdomain like <code>https://m.example.com</code> which points to your installation will save users from entering a long URL on their devices.
+
* For more details and README see the systems documentation directory (/usr/share/doc).
  
Like mentioned before, the OX Mobile Web App is a pure web application. Due to this fact there is no installation or download needed to use this app on a smartphone. Just add a bookmark in your browser to access the app again later.
 
  
Especially on iOS devices there's a seamless integration within the native apps installed via the AppStore®. Just add a new bookmark to the OX Mobile Web App and choose "Add to homescreen". After this, the OX Mobile Web App will place a new app icon on the homescreen.
+
=Running the Open-Xchange Mobile Web Interface on your smartphone=
  
===Common mistakes===
+
After installation of the web interface on your webserver, a client can easily access the web interface via his phone's browser. We recommend to add a new subdomain to your web address to make access for clients easy. A short subdomain like <code>https://m.example.com</code> which points to your installation will save users from entering a long URL on their devices.
Problem: After login a page is shown showing "An Arror occured, Error 0". After closing this, main menu is shown but no data is listed for each module
 
  
Resolution: Your ox-access.conf is not configured correctlly. You must enter you server address on which the mobile app can get access to the OX backend.  
+
Like mentioned before, the Open-Xchange Mobile Web Interface is a pure web application. Due to this fact there is no installation or download needed to use this web interface on a smartphone. Just add a bookmark in your browser to access the web interface again later.  
  
===Using the offline mode===
+
Especially on iOS devices there's a seamless integration within the native apps installed via the AppStore®. Just add a new bookmark to the Open-Xchange Mobile Web Interface and choose "Add to homescreen". After this, the Open-Xchange Mobile Web Interface will place a new app icon on the homescreen.
  
During the first run, the app is stored localy on your smartphone. These caching mechanism makes a later access to the app very fast and gives you the possibility to run the app even if there's no internet connection available.
 
  
The OX Mobile Web App detects on startup whether there's an internet connection available or not. If not, the App will start in offline mode. In this case a plane icon is shown in the upper left corner of the main menu. In offline mode you can access all your subscribed contacts and all of your appointments. Also all your mail headlines are available. Furthermore each email which was opened earlier is available in offline mode.
+
==Using the offline mode==
  
'''Note:''' At the moment the OX Mobile Web App will not detect if internet connection reappears during a run in offline mode. To re-enter online mode just restart the app.
+
During the first run, the web interface is stored localy on your smartphone. These caching mechanism makes a later access to the web interface very fast and gives you the possibility to run the web interface even if there's no internet connection available.  
  
===Known Problems===
+
The Open-Xchange Mobile Web Interface detects on startup whether there's an internet connection available or not. If not, the web interface will start in offline mode. In this case most features which need a internet connection are disabled. In offline mode you can access all your subscribed contacts and all of your appointments. Also all your mail headlines are available. Furthermore each email which was opened earlier is available in offline mode.
  
* The OX Mobile Web App uses a custom, built-in navigation and history. To navigate back you will have to use the  "back" buttons located on the top-left of the page. Do not use browser's back button. This causes the app to jump to the login screen and you will have to reload the app.
 
  
* If you want to use the App in airplane mode or no network connection is availabe, the android browser will show up a message like "page could not be loaded due to missing network connection". Just ignore this alert and press "OK". The app will work in offline mode even android shows up this message.
+
=Known Issues=
  
* If you clean the browser cache on your device or reset it to defaults, all local stored data will be flushed.
 
  
== Deployment as native app ==
+
==Client==
  
The OX Mobile Web App can also be deployed as a native smartphone app. This option is available for Android Systems and later for iOS, too. As Android allows installation of apps from every location you can place an *.apk file on a webserver or in your own Android App-Store. The OX Mobile Web App will act like any other app on the device and offers the same functionality as the web hosted variant.
+
* The Open-Xchange Mobile Web Interface uses a custom, built-in navigation and history. To navigate back you will have to use the "back" buttons located on the top-left of the page. Using the browser's back button will sometimes not bring you back to the right page.
  
Deploying a native iOS App can only be done via the Apple AppStore®. To do so you need to submit your special branded version of the app to Apple. Only Apple decides if the app will be listed in the AppStore or not. These option will not be available for the Preview version of the app.
+
* If you clean the browser cache on your device or reset it to defaults, all local stored data will be flushed.
  
For more information on native app deployment please contact us directly.
 
  
== Branding options ==
+
==Server==
=== Application name===
+
* The Open-Xchange backend uses a security mechanism called "IP check". This feature is enabled by default for a OX Server. This feature will have an impact on the usage of the Open-Xchange Mobile Web Interface, especially the option "Stay logged in". This feature will only work if your IP address does not change between the restarts of the web interface. If you are changing your network connection often when you travel around (different GSM spots, WIFI connections), your phone will get new IP addresses to access the internet. This will cause the OX backend to refuse your auto-login attempt (which is performed on every start of the web interface) because your IP address has changed. To avoid this you can either turn off the IP check feature on the OX backend or add the Open-Xchange Mobile Web Interface to the client whitelist table for IP-check. This will disable the IP check just for the web interface.
The OX Mobile Web App comes with the standard name set "OX Mobile Web App". This title is saved in a png file under "/lib/jqtouch/themes/cupertino/external/brand.png". To brand the app with you custom title just replace this file in the standard theme or you own theme. To configure the page title (in html title tag) please use the i18n module:
 
  
# Locate your installstion directory (i.e. /var/www/ox6-mobile-v2)
 
# Change to "lang" folder
 
# The folder contains all available language files (*.po)
 
# Open one of the files and locate the line containing msgid "OX Mobile"
 
# Change the corresponding msgstr to your title of the app, i.e. "My App".
 
# Do this for all language files
 
* Note: Do not change the '''msgid''', this must be "OX Mobile". Only change the '''msgstr''' value.
 
  
This title will also be the "App title" for the iPhone when the function "Add to homescreen" is used.
+
= Theming =
  
== Theming ==
+
The Open-Xchange Mobile Web Interface is themed via CSS and HTML. To create your own theme you will have to create new graphics and edit the css file in the theme path. To do so follow the steps below:
  
The OX Mobile Web App is themed via CSS and HTML. To create your own theme you will have to create new graphics and edit the css files in the theme path. To do so follow the steps below:
+
# Locate the theme path under "path to your webroot/mobile/theme"
 +
# To create your own theme make a copy of this folder and backup the original one
 +
# The folder contains a css file which holds all editable values for the web interface. To change values edit the original file or create a new one which overwrites some of the old styles. Use Firebug or the Chrome/Safari developer tools to locate css classes and styles you want to edit.
 +
# The folders "img" holds all graphics which are used in the web interface.
 +
# Always remember: Your are designing for mobile. This means: Keep fonts clear and easy to read. Keep file sizes small due to small bandwiths. Keep buttons big enought the user can touch them easily.
  
# Locate the theme path under "path to your webroot/ox6-mobile-v2/lib/jqtouch/themes"
 
# The default theme is named "cupertino". To create your own theme make a copy of this folder and backup the original one
 
# The folder contains two css files and two folders with images. The file jqt_theme.css contains all styles which belong to the "overall" look of the app. These are styles for lists, buttons, background, toolbars and so on. The file ox_theme.css contains more high level theming styles such as module icons, progress bars, infobox and the way the details in lists are shown (like the appointment lists or mail list). To change the whole look of the app (like colors) you will mainly edit the file jqt_theme.css
 
# The folders "img" and "external" hold all graphics which are used in the app. To change them, just edit and save them under the same name. Don't change filenames or the theme will be broken. Also keep all file dimensions and file types (*.png, *.jpg). Changing files dimensions will corrupt the theme and layout will be broken.
 
# Always remember: Your are designing for mobile. This means: Keep fonts clear and easy to read. Keep file sizes small due to small bandwiths. Keep buttons big enought the user can touch them easily.
 
  
==Reporting==
+
=Reporting Bugs=
  
 
Open-Xchange is interested in learning about bugs, specifically in your runtime environment. If you experience any misbehaviors, please report bugs via our public bugzilla:
 
Open-Xchange is interested in learning about bugs, specifically in your runtime environment. If you experience any misbehaviors, please report bugs via our public bugzilla:
[https://bugzilla.open-xchange.com/enter_bug.cgi?product=OX%20Mobile%20App Open-Xchange Bugzilla]<br>
+
[https://bugs.open-xchange.com/ Open-Xchange Bugzilla]<br>
Product: OX Mobile App
+
Product: Mobile Web Interface
 
 
The OX Mobile Web App logs all errors to a logfile which can be found under settings -> log.
 
 
 
== Please note ==
 
  
There may be some issues with checkboxes on Android devices. Sometimes checkboxes and listboxes do not respond to tap actions. If so, please rotate your phone to landscape mode and back. Then, the checkboxes should response again
+
The Open-Xchange Mobile Web Interface logs all errors to a logfile which can be found under Settings -> System Messages
  
Please read the SDB article to inform you about the reasons and solution.
 
  
 
[[Category: OX6]]
 
[[Category: OX6]]

Latest revision as of 09:44, 6 April 2017

Information and Installation of Open-Xchange Mobile Web Interface (Only for OX 6)

Description

The Open-Xchange Mobile Web Interface provides you access to your data from the Open-Xchange Server 6 via your smartphone. The Open-Xchange Mobile Web Interface offers online and offline access to appointments, contacts and mails on the road using your smartphone's browser. Optimized for low bandwiths the Open-Xchange Mobile Web Interface offers instant and fast over the air access to your data, which are at the same time safely stored on Open-Xchange Server. The following modules are supported:

  • E-Mail
  • Calendar
  • Contacts

Moreover the web interface offers seamless integration to use your phones basic functions like phone calls. You can easily start calls from your Open-Xchange contacts on your smartphone or directly send E-Mails.


Themeability, branding and i18n

  • i18n for DE, EN, ES, FR, NL, PL and JP. Other languages can be added.
  • Themeability by CSS
  • JavaScript plugins for branding and custom functions.


Supported devices

The Open-Xchange Mobile Web Interface is designed to run on modern devices running Android or iOS. It can also used with modern desktop browsers.

Device Support    
Apple iOS iOS 3 - 5.1
Android yes, Android 2.2 - 4.0 Official Supported by OX: Google Nexus One (Android 2.3.3), Samsung Galaxy Nexus (Android 4.0.3). The web interface is optimized for a display size of 320 x 480 pixels. Smaller resolutions may result displaying issues of some UI elements

Technical overview

  • Based on HTML5, CSS, Javascript (jQuery Mobile)
  • Optimized for Webkit browsers like Mobile Safari and Chrome. Will also work with restrictions on Firefox and Opera Mobile
  • Complete offline capability


Updates with version 1.1.0 rev 8

  • True fixed toolbars:

Version 1.1.0 rev 6 of the Mobile Web Interface used dynamic recalcualtion to re-position footer and header bars on the fly after scrolling the document. The new version of jQuery Mobile (1.1) now uses CSS based positioning which is truly native on supported platforms.

Some platforms like iOS 4 will now fall back to static positioning where the toolbars simply scroll with the page.

Platforms which support fixed toolbars:

  • iOS5 – iPhone and iPad
  • Android 2.2 and 2.3
  • Android 3.x tablets (Honeycomb)
  • Android 4.x (ICS)
  • Chrome for Android (beta)
  • BB Playbook 1-2
  • All modern desktop browsers (IE, Firefox, Safari, Chrome, etc.)


Offline Mode details

The Open-Xchange Mobile Web Interface uses HTML5 to provide an offline mode for the user. To do this, there are two different kinds of storage mechanisms.

  • The whole web interface uses caching by incorporating the "HTML5 application cache". This will be done on the first visit/start of the web interface. After this initial download, all graphics, language files, js-files and everything else which is needed to run the web interface is stored locally on your phone in a storage managed by the browser.
  • The data from the OX server will be stored using the HTML5 storage mechanism which will be supportet by the users device. These can be a HTML5 local storage, session storage or an SQLite database. For the user there's no difference between these different storage modes.


Requirements

  • Open-Xchange Server >= v.6.20 rev 21

Installation on Open-Xchange v6.22.x

Debian GNU/Linux 6.0

Add the following entry to /etc/apt/sources.list if not already present:

deb http://LDBACCOUNT:LDBPASSWD@software.open-xchange.com/OX6/6.22/OXtender-stable/MobileWebInterface/DebianSqueeze/ /

and run

$ apt-get update
$ apt-get install open-xchange-mobile open-xchange-mobile-theme-default open-xchange-mobile-config

SUSE Linux Enterprise Server 11

Add the package repository using zypper if not already present:

$ zypper ar http://LDBACCOUNT:LDBPASSWD@software.open-xchange.com/OX6/6.22/OXtender-stable/MobileWebInterface/SLES11 MobileWebInterface

and run

$ zypper ref
$ zypper in open-xchange-mobile open-xchange-mobile-theme-default open-xchange-mobile-config

RedHat Enterprise Linux 6

Start a console and create a software repository file if not already present:

$ vim /etc/yum.repos.d/MobileWebInterface.repo
[MobileWebInterface]
name=Open-Xchange
baseurl=http://LDBACCOUNT:LDBPASSWD@software.open-xchange.com/OX6/6.22/OXtender-stable/MobileWebInterface/RHEL6/
gpgkey=http://software.open-xchange.com/oxbuildkey.pub
enabled=1
gpgcheck=1
metadata_expire=0m

and run

$ yum update
$ yum install open-xchange-mobile open-xchange-mobile-theme-default open-xchange-mobile-config

CentOS 6

Start a console and create a software repository file if not already present:

$ vim /etc/yum.repos.d/MobileWebInterface.repo
[MobileWebInterface]
name=Open-Xchange
baseurl=http://LDBACCOUNT:LDBPASSWD@software.open-xchange.com/OX6/6.22/OXtender-stable/MobileWebInterface/RHEL6/
gpgkey=http://software.open-xchange.com/oxbuildkey.pub
enabled=1
gpgcheck=1
metadata_expire=0m

and run

$ yum update
$ yum install open-xchange-mobile open-xchange-mobile-theme-default open-xchange-mobile-config

Optional link to Mobile Web Interface in OX6 login mask (since 6.20.3)

There is an optional plugin available which adds a link to the Mobile Web Interface to the common OX6 login screen.

Debian

$ apt-get install open-xchange-gui-mobile-redirect-plugin


SUSE Linux Enterprise Server

$ zypper install open-xchange-gui-mobile-redirect-plugin


RedHat Enterprise Linux

$ yum install open-xchange-gui-mobile-redirect-plugin


The plugin needs to be configured in ${DOCROOT}/ox6/plugins/com.openexchange.mobile.redirect/config/config.js

data = {
    url: "https://m.example.com//",
    isEnabled: function() {
        return true;
        //----- example to add a device check instead of always returning true -----//
        // return (/iphone|ipod|android|/i.test(navigator.userAgent.toLowerCase()));
    },
    getText: function() {
        return _("Switch to mobile version");
    }
};



Upgrading from previous versions

If you have the previous version of the Mobile Web Interface installed (1.0), you can not upgrade to version 1.1 or later directly. Due to a package rename you have to remove the old packages before installing the new ones. The packages for version 1.0 are prefixed with "open-xchange-gui-mobile-v2", the new ones are prefixed with "open-xchange-mobile*".


Debian

$ apt-get purge open-xchange-gui-mobile-v2
$ apt-get purge open-xchange-gui-mobile-v2-gui open-xchange-gui-mobile-v2-theme-default


SUSE Linux Enterprise Server

$ zypper remove open-xchange-gui-mobile-v2
$ zypper remove open-xchange-gui-mobile-v2-gui open-xchange-gui-mobile-v2-theme-default


RedHat Enterprise Linux

$ yum remove open-xchange-gui-mobile-v2
$ yum remove open-xchange-gui-mobile-v2-gui open-xchange-gui-mobile-v2-theme-default

Please note, the package open-xchange-gui-mobile-v2 is located on your ox backend system, open-xchange-gui-mobile-v2-gui and open-xchange-gui-mobile-v2-theme-default are installed on your webserver machine. If both systems are the same you have to remove all packes on the same system.

After removing the old packages proceed with the installation of the new version 1.1 or later

Installation on OX App Suite

The download and installation information for Open-Xchange App Suite product family (Open-Xchange Server Edition and Hosting Edition) is available at: http://oxpedia.org/wiki/index.php?title=AppSuite:OX_Mobile_Web_Interface


Configuration

Installation on the Apache 2 webserver:

Important note for upgraders: In previous versions (lower 1.1) a server address had to be entered in the cache.manifest file to grant access to the OX6 backend. This not needed anymore. The new version of the mobile web grants per default access to all uncached ressources. Don't edit the cache.manifest manually.

  • You need to add a new mimetype to your webserver configuration to make sure the caching (offline mode) works.
    • On Apache servers you can add the mimetype either global or via ".htaccess" file.
    • For global configuration edit the file mime.conf under /etc/apache2/mods-enabled/
    • Add the line "AddType text/cache-manifest .manifest" to the file, save and restart apache
    • For configuration via .htaccess file just add a .htaccess file to the install directory. This should include the line "AddType text/cache-manifest .manifest'". Note: Either the global configuration or the .htaccess file should be used. (.htaccess files will only work if your Apache settings contain AllowOverride. For further information on mime types, please refer to your webservers user manual)
  • To direct to the correct host another site in apache is needed. Create a file named "mobile" in /etc/apache2/sites-available (and enable it by linking to it from sites-enabled, of course):
<VirtualHost *:80>
   ServerAdmin webmaster@localhost
   ServerName mobile.YOUR_DOMAINAME.TLD
   ServerAlias m.YOUR_DOMAINAME.TLD
   DocumentRoot /var/www/mobile
   <Directory />
       Options FollowSymLinks
       AllowOverride None
   </Directory>
   <Directory /var/www/mobile>
       Options Indexes FollowSymLinks MultiViews
       AllowOverride None
       Order allow,deny
       allow from all
   </Directory>
   ErrorLog /var/log/apache2/error.log
   # Possible values include: debug, info, notice, warn, error, crit,
   # alert, emerg.
   LogLevel warn
   CustomLog /var/log/apache2/access.log combined
</VirtualHost>
  • For more details and README see the systems documentation directory (/usr/share/doc).


Running the Open-Xchange Mobile Web Interface on your smartphone

After installation of the web interface on your webserver, a client can easily access the web interface via his phone's browser. We recommend to add a new subdomain to your web address to make access for clients easy. A short subdomain like https://m.example.com which points to your installation will save users from entering a long URL on their devices.

Like mentioned before, the Open-Xchange Mobile Web Interface is a pure web application. Due to this fact there is no installation or download needed to use this web interface on a smartphone. Just add a bookmark in your browser to access the web interface again later.

Especially on iOS devices there's a seamless integration within the native apps installed via the AppStore®. Just add a new bookmark to the Open-Xchange Mobile Web Interface and choose "Add to homescreen". After this, the Open-Xchange Mobile Web Interface will place a new app icon on the homescreen.


Using the offline mode

During the first run, the web interface is stored localy on your smartphone. These caching mechanism makes a later access to the web interface very fast and gives you the possibility to run the web interface even if there's no internet connection available.

The Open-Xchange Mobile Web Interface detects on startup whether there's an internet connection available or not. If not, the web interface will start in offline mode. In this case most features which need a internet connection are disabled. In offline mode you can access all your subscribed contacts and all of your appointments. Also all your mail headlines are available. Furthermore each email which was opened earlier is available in offline mode.


Known Issues

Client

  • The Open-Xchange Mobile Web Interface uses a custom, built-in navigation and history. To navigate back you will have to use the "back" buttons located on the top-left of the page. Using the browser's back button will sometimes not bring you back to the right page.
  • If you clean the browser cache on your device or reset it to defaults, all local stored data will be flushed.


Server

  • The Open-Xchange backend uses a security mechanism called "IP check". This feature is enabled by default for a OX Server. This feature will have an impact on the usage of the Open-Xchange Mobile Web Interface, especially the option "Stay logged in". This feature will only work if your IP address does not change between the restarts of the web interface. If you are changing your network connection often when you travel around (different GSM spots, WIFI connections), your phone will get new IP addresses to access the internet. This will cause the OX backend to refuse your auto-login attempt (which is performed on every start of the web interface) because your IP address has changed. To avoid this you can either turn off the IP check feature on the OX backend or add the Open-Xchange Mobile Web Interface to the client whitelist table for IP-check. This will disable the IP check just for the web interface.


Theming

The Open-Xchange Mobile Web Interface is themed via CSS and HTML. To create your own theme you will have to create new graphics and edit the css file in the theme path. To do so follow the steps below:

  1. Locate the theme path under "path to your webroot/mobile/theme"
  2. To create your own theme make a copy of this folder and backup the original one
  3. The folder contains a css file which holds all editable values for the web interface. To change values edit the original file or create a new one which overwrites some of the old styles. Use Firebug or the Chrome/Safari developer tools to locate css classes and styles you want to edit.
  4. The folders "img" holds all graphics which are used in the web interface.
  5. Always remember: Your are designing for mobile. This means: Keep fonts clear and easy to read. Keep file sizes small due to small bandwiths. Keep buttons big enought the user can touch them easily.


Reporting Bugs

Open-Xchange is interested in learning about bugs, specifically in your runtime environment. If you experience any misbehaviors, please report bugs via our public bugzilla: Open-Xchange Bugzilla
Product: Mobile Web Interface

The Open-Xchange Mobile Web Interface logs all errors to a logfile which can be found under Settings -> System Messages