Changes between Version 7 and Version 8 of Html5UI


Ignore:
Timestamp:
Apr 3, 2013, 11:54:09 PM (11 years ago)
Author:
delawen
Comment:

--

Legend:

Unmodified
Added
Removed
Modified
  • Html5UI

    v7 v8  
    3535== Proposal ==
    3636
     37This is an html5 based UI which uses the wigets from geonetwork and the library ExtJS.
     38
     39To load it on your local computer, download the pull request of github and execute:
     40
     41mvn jetty:run -Penv-dev,html5ui
     42
     43It contains two maps: preview map and big map. You can access the big map clicking on the preview map. Both maps have synchronized layers, so if you add or remove (or change style) on one map layer, you will see that the other map also changes.
     44
     45Tested in Chrome, Firefox and IE>8 (also works but with some penalties on IE7).
    3746Some screenshots:
    3847
     
    4251[[Image(html5uimenus.png)]]
    4352
    44 To load it on your local computer, download the pull request of github and execute:
    45 
    46 mvn jetty:run -Penv-dev,html5ui
    47 
    48 This is an html5 based UI which uses the wigets from geonetwork and the library ExtJS.
    49 
    50 It contains two maps: preview map and big map. You can access the big map
    51 clicking on the preview map. Both maps have synchronized layers, so if you add
    52 or remove (or change style) on one map layer, you will see that the other map
    53 also changes.
    54 
    55 Tested in Chrome, Firefox and IE>8 (also works but with some penalties on IE7).
    56 
    5753=== Changing Style ===
    5854
     
    6157==== Colors ====
    6258 
    63 There is a file on web-client/src/main/resources/apps/html5ui/css/colors.css
    64 which contains all the colors of the app.
     59There is a file on web-client/src/main/resources/apps/html5ui/css/colors.css which contains all the colors of the app.
    6560
    6661==== Page design ====
    6762
    68 The html is loaded from web/src/main/webapp/xsl/search.xsl This xsl is
    69 interpreted by jeeves and transformed to show the basic page. The page scheme is
    70 basically the same on all links, so if you change the position of some html
    71 elements, they will be changed on all views.
     63The html is loaded from web/src/main/webapp/xsl/search.xsl This xsl is interpreted by jeeves and transformed to show the basic page. The page scheme is basically the same on all links, so if you change the position of some html elements, they will be changed on all views.
    7264
    7365Don't forget that some of the elements are also placed with css.
     
    9082        </li>
    9183
    92 The value of the string will be taken from the strings.xml file that
    93 corresponds to the language used.
     84The value of the string will be taken from the strings.xml file that corresponds to the language used.
    9485
    9586==== Add a footer link ====
     
    10394==== Maps and other elements: change display behaviour  ====
    10495
    105 Maps are always loaded even if they are not displayed. You can change this
    106 behaviour and allow (for example) the big map to be shown at all times. This is
    107 the same for all elements you see that disappear.
     96Maps are always loaded even if they are not displayed. You can change this behaviour and allow (for example) the big map to be shown at all times. This is the same for all elements you see that disappear.
    10897
    109 To change this behaviour you should take a look at GlobalFunctions.js file. For
    110 each "view" you have one function that shows it and hides it. You can change
    111 them to allow, for example, that the big map is not hidden when results are
    112 shown:
     98To change this behaviour you should take a look at GlobalFunctions.js file. For each "view" you have one function that shows it and hides it. You can change them to allow, for example, that the big map is not hidden when results are shown:
    11399
    114100 * showBrowse
     
    119105 * ...
    120106 
    121 If you add a new "view", you should update all this functions so the view is
    122  hidden or shown when you want.
     107If you add a new "view", you should update all this functions so the view is  hidden or shown when you want.
    123108
    124109=== Changing more complex features ===
     
    126111==== Debugging ====
    127112
    128 To debug javascript you only have to add a "debug" or "debug=true" parameter to
    129 the url like this: http://....../srv/eng/search?debug
     113To debug javascript you only have to add a "debug" or "debug=true" parameter to the url like this: http://....../srv/eng/search?debug
    130114
    131115==== Adding more widgets ====
    132116
    133 Widgets are usually added on the file
    134 /web-client/src/main/resources/apps/html5ui/js/App.js or one of its children
    135 (see next section).
     117Widgets are usually added on the file /web-client/src/main/resources/apps/html5ui/js/App.js or one of its children (see next section).
    136118
    137119==== Global variable app
    138 App.js creates the *app* global variable wich has (or should have) all the
    139 information needed for the app to run.
     120App.js creates the *app* global variable wich has (or should have) all the information needed for the app to run.
    140121
    141122It also initializes some secondary objects which contains information and loads more widgets:
     
    162143===== app.loginApp =====
    163144
    164 Should contain everything related to the authentication of the user like
    165 control buttons to log in and log out and handles the cookie.
     145Should contain everything related to the authentication of the user like control buttons to log in and log out and handles the cookie.
    166146
    167147===== app.mapApp =====
    168148
    169 Should control everything related to maps. For example, if you want to add a new layer to
    170 the maps you should look here.
     149Should control everything related to maps. For example, if you want to add a new layer to the maps you should look here.
    171150
    172151Also initializes the maps (preview and big).
     
    174153===== app.searchApp =====
    175154
    176 Closely related to Catalogue.js, it launches searches and initializes the
    177 results view. To change the advanced search you have to look here too.
     155Closely related to Catalogue.js, it launches searches and initializes the results view. To change the advanced search you have to look here too.
    178156
    179157
    180158=== Backwards Compatibility Issues ===
    181159
    182 None, as the UI is an entirely new UI using its own code.
     160'''None''', as the UI is an entirely new UI using its own code and the jeeves part only runs when customized headers are added (which, right now, is not being used as it is not allowed).
    183161
    184162== Participants ==