Skip to content
This repository has been archived by the owner on Jan 31, 2023. It is now read-only.

Application Design

Nikhil Peter Raj edited this page Aug 14, 2014 · 2 revisions

The Android Application provides an easy means to run,share and save a user's calculations.

The app has been overhauled to be more modular as part of GSoC 2014. All calculations and UI have been moved to fragments to better support tablets & the new designe pattern . In addition, the JSON is parsed using gson, which allows us to avoid using hardcoded strings everywhere and gives us nice POJOs.

Calculations

All calculations are handled by AsyncTaskFragment, which retains its instance across orientation changes. The SageActivity implements the AsyncTaskFragment callbacks, and sends the relevant data to OutputViewFragment for display.

Initially the user enters an input into the WebView which hosts a modified version of CodeMirror. On pressing the run button, we create a new Request object, which gives us a POJO corresponding to the data the Sage Server expects. This data is sent to the Sage Server, which responds with the appropriate Permalink and Websocket URLs(More can be read about this here and here).

We cache the permalink URLs in case the user requires them after the calculation.

On receiving the websocket URLs, we open a connection to the same and start listening for replies on the appropriate sockets. Each reply is parsed using gson to the BaseReply class, which performs some additional processing on the received JSON to determine the message type. Depending on this message type, we typecast our BaseReply object to the appropriate type and send it to SageActivity via AsyncTaskFragment's callbacks.

SageActivity then sends these objects to the OutputView in OutputViewFragment, which handles all the processing, which mainly involves constructing the requisite HTML from the objects. We do not load the WebView until we receive an idle/dead message from the server, to improve overall performance. Additionally, we also insert the scripts to load MathJax from CDN on receiving a reply which contains latex output. Assuming a moderately fast internet connection, it makes sense to load it from a CDN, since the (minimized) MathJax script alone is ~2Mb. Additionally, since the scripts are cached, any subsequent calculations should be significantly faster.

Interact replies are handled in the same manner, except for loading the appropriate controls in the OutputView.

Due to the significant decoupling of all the components(and lack of suitably viable interface names) between all the Fragments, (most) inter-component communication is handled using Otto.

UI & UX

The UI & UX have been redone to adhere to the latest design patterns and offer the user greater ease in finding their stored calculations. A new Search widget, alphabetically sectioned lists,animations and a separate section for favorites are some of the new improvements.

Additionally, there are new options to delete,edit and add new cells and groups. The latest versions of Android also support multiple selection by using the Contextual Action Bar.

The layouts have also been modified with tablet use in mind. On larger tablets(in landscape mode), we take advantage of the extra screen space by using alternate, side-by-side layouts for the Fragments.

The Share options have been improved to now allow direct saving of the output in the form of an image, along with the old options to share on Google+ and open the calculation in a Web Browser.

Storage

Instead of using files, which are cumbersome and prone to errors, the app now uses a SQL database to save the cells and groups. Since actually writing the SQL statements(and the requisite interconversion to and from Java Objects) is quite verbose, we use Cupboard to handle storing the objects for us.

The App stores two kinds of objects, Cell and Group, which correspond to their respective counterparts in the UI. The groups are stored as a separate objects so we can create empty groups not associated with any cells.

Initial loading of the example cells is done by using an XML Parser to parse cell_collection.xml

Inserts

User defined code snippets can now be added directly to the input editor by using the Inserts menu option in SageActivity.

Clone this wiki locally