Wiki source code of Mobile Client
Last modified by Vincent Massol on 2024/11/19 16:12
Show last authors
| author | version | line-number | content |
|---|---|---|---|
| 1 | {{include document="XWiki.DesignClassSheet"/}} | ||
| 2 | |||
| 3 | There are multiple possible objectives to a mobile XWiki solution: | ||
| 4 | |||
| 5 | * Enhance XWiki's solutions with Mobile Access for XE/XEM | ||
| 6 | * Provide the foundation for Custom Developed Mobile Specific Applications based on XWiki as the backend | ||
| 7 | |||
| 8 | In the first phase we will focus on providing a Mobile Skin provided by a Generic Cross device Mobile App allowing to access and XE/XEM instance. | ||
| 9 | |||
| 10 | == Features == | ||
| 11 | |||
| 12 | Features of the mobile applications have been grouped in 3 tier based on user needs and development complexity | ||
| 13 | |||
| 14 | === Tier 1 === | ||
| 15 | |||
| 16 | * --Working for latest iOS (iOS6) and Android devices (4.2+)-- | ||
| 17 | * --Enhance the XWiki REST API to support quality features in XWiki 4.3.-- (At least partially in 4.5) | ||
| 18 | * --Allow to configure which wiki to access, provide a username and password-- | ||
| 19 | * --Allow to download the Mobile configuration from the wiki itself-- | ||
| 20 | * --Basic UI/Design-- | ||
| 21 | * XE View: --recent documents--, --space view--, --apps view--, --search--, query, users, --open web view in Safari--, --navigation between pages-- | ||
| 22 | * XEM View: --view list of subwikis, search and query global wiki-- | ||
| 23 | * Page View: --view page in plain HTML with images--, --list of attachments--, --view in Safari--, --support basic zooming/scrolling (iOS)--, support basic zooming/scrolling (Android) | ||
| 24 | * Pagination (access more than the initial set of documents) | ||
| 25 | * --Nice page list view-- | ||
| 26 | * --Support additional views provided by the Wiki instance-- | ||
| 27 | * --Detect connection URLs from wiki url-- | ||
| 28 | |||
| 29 | === Tier 2 === | ||
| 30 | |||
| 31 | * More devices compatibility | ||
| 32 | * --Support advanced configuration provided by the Wiki itself-- | ||
| 33 | * Invite User | ||
| 34 | * Basic Notifications (recent documents, configurable in watch list ?) | ||
| 35 | * Basic Offline Storage | ||
| 36 | * Bookmarks | ||
| 37 | * Improved UI/Design | ||
| 38 | * Advanced Navigation in XWiki AWM Apps | ||
| 39 | * --Page View: use external web view-- | ||
| 40 | * Page View: comments, information, backlinks, etc.. | ||
| 41 | |||
| 42 | === Tier 3 === | ||
| 43 | |||
| 44 | * Advanced Notifications based on Rules, Bookmarks | ||
| 45 | * Advanced Offline including Bookmarking, Editing | ||
| 46 | * XWiki Basic Administration UI (install Extensions) ? | ||
| 47 | |||
| 48 | == Source code == | ||
| 49 | |||
| 50 | Source code of the XWiki Mobile application is available at: | ||
| 51 | |||
| 52 | https://github.com/xwiki-contrib/mobile-standardxwikiclient/ | ||
| 53 | |||
| 54 | == Prototypes == | ||
| 55 | |||
| 56 | === v2 Beta/Alpha release === | ||
| 57 | |||
| 58 | Development of v2 is using jqMobi and Cordova on iOS (https://github.com/xwiki-contrib/mobile-standardxwikiclient/) | ||
| 59 | |||
| 60 | This version has much better performance and reliability. A JS mobile to handle network connections has been developed allowing to queue requests. | ||
| 61 | |||
| 62 | You can download the current release from the [[XWiki Extension Repository>>extensions:Extension.XWikiMobile]]. | ||
| 63 | |||
| 64 | === v1 Prototype === | ||
| 65 | |||
| 66 | A v1 prototype has been published using JQuery Mobile and Cordova on iOS: | ||
| 67 | |||
| 68 | http://www.github.com/xwiki-contrib/mobile-xwikistandardclient/tree/v1 | ||
| 69 | |||
| 70 | Some screenshots are available [[here>>MobileClientPrototypeV1]] | ||
| 71 | |||
| 72 | == Design Studies == | ||
| 73 | |||
| 74 | In order to get out a first version of the XWiki Mobile application with the Tier 1 feature set, we need to make some simple UI/Design proposal to improve the v1 Prototype. | ||
| 75 | |||
| 76 | The objective is to try to stay in the limits of what the application and the JQuery Mobile framework can currently do, so the UI needs to be acceptable and valuable to user without needing a lot of work. However, getting a long term view is also interesting analyzing which features would be the most important in a mobile use case (notifications, how should they work, mobile capturing of data). Any good ideas that are simple to implement but bring a lot of value in a mobile use case scenario are welcomed. | ||
| 77 | |||
| 78 | The proposals should focus on the following features in priority: | ||
| 79 | |||
| 80 | * Home Page listing available Wikis | ||
| 81 | * Configuration Screen to add a Wiki (URL, username, password, test configuration, advanced configuration) | ||
| 82 | * XEM Screen for multiple sub wikis (list of sub-wikis + action items maybe merged with latest documents or wiki summary) | ||
| 83 | * XE Screen (list of action items maybe merged with latest documents or wiki summary) | ||
| 84 | * Recent Documents | ||
| 85 | * Search | ||
| 86 | * Attachment View | ||
| 87 | |||
| 88 | In a second phase the following features will be important: | ||
| 89 | |||
| 90 | * Navigation into Application documents (mobile livetable) | ||
| 91 | * Bookmarking of Pages/Spaces and Offline usage | ||
| 92 | * Social Features (comments, etc..) | ||
| 93 | |||
| 94 | The Design proposal has been [[published on the incubator>>http://incubator.myxwiki.org/xwiki/bin/view/Improvements/MobileApp]]. | ||
| 95 | |||
| 96 | == Technical Architecture == | ||
| 97 | |||
| 98 | There are some technical challenges when it comes to the technology used which could be: | ||
| 99 | |||
| 100 | * pure native development | ||
| 101 | * html5 with native packaging with a JS framework | ||
| 102 | ** JQuery Mobile | ||
| 103 | ** jQmobi | ||
| 104 | ** Sensa Touch | ||
| 105 | ** etc.. | ||
| 106 | |||
| 107 | Additionally there are architectural challenges: | ||
| 108 | |||
| 109 | * How to handle the network queues for maximum performance and reliability as well as login management | ||
| 110 | * How to achieve performance using local caches and Offline usage | ||
| 111 | * How to provide a modular architecture allowing to add features through plugins as well as customize the application without a full rewrite | ||
| 112 | |||
| 113 | The first prototype uses Cordova with JQuery Mobile and this has shown some performance issue both in the HTML displaying as well as reliability issues when transferring data from the servers. | ||
| 114 | We will study a bit further the approach of network queues to retrieve data and keep a local cache of them as well as the jQmobi framework which seems to be leaner and have better performance on mobile devices. | ||
| 115 | |||
| 116 | We will also look into building a modular approach allowing to activate/deactive screens as well as provide screens that are defined in the Wiki that you access. | ||
| 117 | |||
| 118 | === iOS and Android Page Browser === | ||
| 119 | |||
| 120 | In order to support touch scaling of the view of an XWiki page, we are using a native browser to display the XWiki page content when a page is shown in the web application. | ||
| 121 | This requires a specific implementation for each platform. Here is how it works: | ||
| 122 | |||
| 123 | |[[[[image:IMG_7939.jpg||width="400"]]>>attach:IMG_7939.jpg]] |[[[[image:IMG_7940.jpg||width="400"]]>>attach:IMG_7940.jpg]] | ||
| 124 | |[[[[image:IMG_7942.jpg||width="400"]]>>attach:IMG_7942.jpg]] |[[[[image:IMG_7941.jpg||width="400"]]>>attach:IMG_7941.jpg]] | ||
| 125 | |||
| 126 | When a button in the top toolbar is clicked, some call might be made to the page browser native component. Also when a link is clicked in the page browser component a callback is made to the Cordova application which decides what to do with it. If you click on an external link the page browser will handle it himself. While data is loaded a message is shown in the bottom left (we could try to replace this in the future by activating our own loading icon already there in the UI) | ||
| 127 | |||
| 128 | When you navigate away from the page, the page browser is hidden (not killed) and will be reused the next time a page is shown. It is important to reset the content properly and to resize the page browser. | ||
| 129 | |||
| 130 | === Mobile Client Screen === | ||
| 131 | |||
| 132 | Here are some notes about how to develop a screen for the Mobile Client v2. This code is a screen that can be added to the home screen for a wiki and allowing to access a list of projects stored in XWiki Classes. Such a module can be loaded dynamically by the XWiki Mobile application just after login in to the wiki. | ||
| 133 | |||
| 134 | * [[MobileClientHowToWriteDynamicMenu]] |
