Difference between revisions of "Website:MobileViews"

From WormBaseWiki
Jump to navigationJump to search
Line 11: Line 11:
 
DOM element: '''#home-page'''
 
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 =
 
= 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 =  
 
= 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 ==
 
== 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 ===
 
=== Search Results Entry View ===
 +
 +
No default DOM element as it generates a list item representing itself.
  
 
= Object View =
 
= 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 ==
 
== 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 ==
 
== 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 ===
 
=== 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 =
 
= Browse Species View =
 +
  
 
= Browse Resources View =
 
= Browse Resources View =

Revision as of 17:13, 21 September 2013

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

Browse Resources View

Filtered Search View

About View