Changes between Version 7 and Version 8 of Html5UI
- Timestamp:
- Apr 3, 2013, 11:54:09 PM (11 years ago)
Legend:
- Unmodified
- Added
- Removed
- Modified
-
Html5UI
v7 v8 35 35 == Proposal == 36 36 37 This is an html5 based UI which uses the wigets from geonetwork and the library ExtJS. 38 39 To load it on your local computer, download the pull request of github and execute: 40 41 mvn jetty:run -Penv-dev,html5ui 42 43 It 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 45 Tested in Chrome, Firefox and IE>8 (also works but with some penalties on IE7). 37 46 Some screenshots: 38 47 … … 42 51 [[Image(html5uimenus.png)]] 43 52 44 To load it on your local computer, download the pull request of github and execute:45 46 mvn jetty:run -Penv-dev,html5ui47 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 map51 clicking on the preview map. Both maps have synchronized layers, so if you add52 or remove (or change style) on one map layer, you will see that the other map53 also changes.54 55 Tested in Chrome, Firefox and IE>8 (also works but with some penalties on IE7).56 57 53 === Changing Style === 58 54 … … 61 57 ==== Colors ==== 62 58 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. 59 There is a file on web-client/src/main/resources/apps/html5ui/css/colors.css which contains all the colors of the app. 65 60 66 61 ==== Page design ==== 67 62 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. 63 The 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. 72 64 73 65 Don't forget that some of the elements are also placed with css. … … 90 82 </li> 91 83 92 The value of the string will be taken from the strings.xml file that 93 corresponds to the language used. 84 The value of the string will be taken from the strings.xml file that corresponds to the language used. 94 85 95 86 ==== Add a footer link ==== … … 103 94 ==== Maps and other elements: change display behaviour ==== 104 95 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. 96 Maps 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. 108 97 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: 98 To 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: 113 99 114 100 * showBrowse … … 119 105 * ... 120 106 121 If you add a new "view", you should update all this functions so the view is 122 hidden or shown when you want. 107 If you add a new "view", you should update all this functions so the view is hidden or shown when you want. 123 108 124 109 === Changing more complex features === … … 126 111 ==== Debugging ==== 127 112 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 113 To debug javascript you only have to add a "debug" or "debug=true" parameter to the url like this: http://....../srv/eng/search?debug 130 114 131 115 ==== Adding more widgets ==== 132 116 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). 117 Widgets are usually added on the file /web-client/src/main/resources/apps/html5ui/js/App.js or one of its children (see next section). 136 118 137 119 ==== 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. 120 App.js creates the *app* global variable wich has (or should have) all the information needed for the app to run. 140 121 141 122 It also initializes some secondary objects which contains information and loads more widgets: … … 162 143 ===== app.loginApp ===== 163 144 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. 145 Should contain everything related to the authentication of the user like control buttons to log in and log out and handles the cookie. 166 146 167 147 ===== app.mapApp ===== 168 148 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. 149 Should control everything related to maps. For example, if you want to add a new layer to the maps you should look here. 171 150 172 151 Also initializes the maps (preview and big). … … 174 153 ===== app.searchApp ===== 175 154 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. 155 Closely related to Catalogue.js, it launches searches and initializes the results view. To change the advanced search you have to look here too. 178 156 179 157 180 158 === Backwards Compatibility Issues === 181 159 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). 183 161 184 162 == Participants ==