Website:MobileViews

From WormBaseWiki
Revision as of 13:45, 22 September 2013 by Antoniom (talk | contribs)
Jump to navigationJump to search

App View

DOM element: body

The App View is a global view that has the main function of handling the requests for the router, it initializes other views (those representing pages) and triggers the jQueryMobile's change page action.

Home View

DOM element: #home-page

Represents the home page of the mobile website. Given the simplicity of the home page, it just initializes the side global app menu

History View

DOM element: #history-page

It represents the history page, which contains the list of recently viewed elements. It's 'render' method takes care of displaying the list of recently viewed elements from localStorage in descending order by last access date.

Search Page View

DOM element: #search-page

It's main function is to render the search page by populating the search by class dropdown menu. It also listen to input changes on the search form and reacts by updating the results list, represented by a Search Results View.

Search Results View

DOM element: #search-result-list

Paired with a Search Results Collection, it handles fetching and rendering of the search results list, including pagination support.

Search Results Entry View

No default DOM element as it generates a list item representing itself.

Object View

DOM element: #object-page

It represents the object/element page composed by a Widgets Area View and the Widgets Panel View. Object View listens to the changes in the Widgets Panel and reacts by changing the visibility of the Widgets.

Widgets Panel View

DOM element: #widgets-panel

The purpose of this view is to render the widgets panel based on the class of the current element.

Widgets Area View

DOM element: #widgets-area

It represents the area of the object page on which the widgets are displayed. This area is prepared by adding placeholders for widgets so that, on visibility changes, they always get displayed in the same order.

Widget View

DOM element: dynamically assigned, it's the placeholder for the widget (usually identified by #WidgetName)

Paired with a Widget Model, when the visibility attributes gets set to 'true', it renders the widget frame and adds the content to it by:

  • checking if a template for the widget exist, if it does, the widget's content gets fetched from the server in JSON and used to render the template
  • if it doesn't, the widget's content gets fetched in HTML format and adjusted using the 'processWidget' and 'fixLinks' methods of the Widget View class.

Browse Species View

DOM element: #browsing-page

It handles the rendering of the pages under the Browse Species item of the menu. It renders the Genus list, the Specie list for a genus and it's available classes list. A particular thing about this view is that, in order to display different lists, it overrides the 'parse' method of its associated Species Collection.

Browse Resources View

DOM element: #browsing-page

It renders the list of all classes of resources, fetched by a Resource Types Collection, into the "Browse Resources" page.

Filtered Search View

DOM element: #filter-page

The filtered search page is used to look up for elements after having been through the browse species/resources pages.

It makes use of a Search Results View, described above.

About View

DOM element: #about-page

Just like the Home View, Due to the static nature of the content in the About page, it only initializes the side menu.