Difference between revisions of "Website:MobileViews"
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
Contents
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.