Release Notice Release Notice
Total Page:16
File Type:pdf, Size:1020Kb
WOPE 6.0.30 Release Notice Release Notice WOPE 6.0.30 Release Notice Copyright Backelite 2012 1. Introduction 1 2. Delivery description 3 3. New features and improvements 5 4. Upgrading guide from WOPE 5.x 7 5. History 13 iii iv Chapter 1. Introduction We are happy to announce the release of the HTML5-based framework WOPE 6.0.30. Read the release notes below to find out about all enhancements. 1 2 Chapter 2. Delivery description This delivery includes: • This document Release_Notice-6.0.30-en-US.pdf • The complete WOPE Web application wope-6.0.30.war • A Java based sample HTML5 application wope-demo-6.0.30.war • Resources used to customize UI widgets ResourcesClient-6.0.30.zip • Examples of customizable error pages wope-errors-6.0.30.zip • The english version of the Developer Handbook Developer_Handbook-6.0.30-en-US.pdf • The english version of the Operating Handbook Operating_Handbook-6.0.30-en-US.pdf • The Javascript framework class index jsdoc.zip 3 4 Chapter 3. New features and improvements 3.1. All HTML5 markup is now accepted by default WOPE will no longer rewrite some HTML5 tags into HTML4 equivalences. This also means that WOPE can now be installed in front of an already existing web site without markup modifications. Please note that invalid markup (example: unclosed <div> tags) will now be automatically repaired, ex- cept self-closing <script> tags (see Chapter 4, Upgrading guide from WOPE 5.x below for them) 3.2. Integration of a custom responsive grid system from Bootstrap framework WOPE now includes a custom responsive grid from Bootstrap to ease layout building on mobiles, ph- ablets, tablets and desktops. It replaces the previous grid system : please refer to the migration guide Chapter 4, Upgrading guide from WOPE 5.x below for more information. 3.3. AJAX navigation using an animated loader has been disabled on desktop browsers Because desktop browsers have a wider screen than mobile devices, the default animated-loader based AJAX navigation has been disabled on desktop browsers. 3.4. New Google Maps widget A Google Maps widget has been added. It will output either JavaScript based maps on smartphones or static maps on feature phones. 3.5. New scrollable Off-canvas menu widget The new <nav data-bk-role="off-canvas"> element now has independent scroll when using the data-bk-scrollable attribute. 3.6. Huge performance improvements when delivering bk.js and bk.css resources These two WOPE resources are now packaged at build time instead of generated at runtime. This had led to a big performance leap in resource delivery time, improved up to 1000%. 3.7. Improved image resizing mechanisms JPEG and WEBP compression has been improved, leading up to 50% image weight loss on high den- sity screen devices. Images with absolute source URLs can now be resized whenever their URL matches either the ad- dress bar in the browser (this is the default setting) or the address of the target.host INI configuration property. 5 Chapter 3. New features and improvements To resize absolute source URLs based on the address of the target.host INI configuration property, use the following configuration option : target.resizeAbsoluteImgUrlsGiven=targetHost 3.8. Added the ability to disable client-side Framework component The Framework component (UI widgets and animations) can now be disabled. This can be useful when you only want to use WOPE Accelerator features (images resizing, compression and minification of resources and ability to filter HTML5 content per device capabilities). To disable the Framework component, use the following .INI configuration property : target.frameworkEnabled=false 6 Chapter 4. Upgrading guide from WOPE 5.x 4.1. HTML5 changes 4.1.1. The Do-It-Yourself (DIY) mode has been removed Since all HTML5 elements are now allowed, the DIY templates are no longer necessary. If you need to serve a different content given device capabilities, either use extended media queries or device capabilities in HTTP request headers : see "Extended media queries" and "Using device capa- bilities" in the WOPE Developer Handbook. 4.1.2. A self-closing <script/> tag is now invalid, it will break the DOM tree, just like under a standard browser. You MUST properly close your <script> tags using <script></script> 4.1.3. The <aside> UI widget has been renamed to <nav data-bk- role="off-canvas">. Do a search and replace within your code if you were using the previous widget name. For semantic reasons, the aside element is now referred as an off-canvas navigation element. You MUST do a search of all "bk-aside-" occurrences in your CSS/JS files and replace it with "bk-off- canvas-". You MUST do a search of all "asidewrapper" occurrences in your CSS/JS files and replace it with "off- canvas-wrapper". 4.1.4. <section>, <header> and <footer> tags are not rewritten as <div> tags anymore WOPE version 5.x was rewriting header and footer tags as div elements. This is no more needed as the smartphone base has evolved and more browsers are supporting these HTML5 tags. Note that the id attributes haven't been changed, which means you are still able to grab the header with a Bk("#bk- header") CSS selector for example. 4.1.5. <script> elements are not injected into <head> anymore They will now stay where you placed them in the original markup. 4.2. CSS and layout changes 4.2.1. Responsive grid layout system has been upgraded to the Bootstrap 3 grid system Read the full grid system documentation available here1 1 http://getbootstrap.com/css/#grid 7 Chapter 4. Upgrading guide from WOPE 5.x The data-bk-responsive-breakpoint attribute has been removed, because the Bootstrap grid replaces it. If you were using the data-bk-responsive-breakpoint attribute, you must change your markup by using the new Bootstrap responsive classes: col-xs-1 … col-xs-12, col-sm-1 … col- sm-12, col-md-1 … col-md-12, col-lg-1 … col-lg-12 as well as the ".row" and the ".container" classes. 4.2.2. No automatic loading of the wope.css resource The wope.css style sheet has been merged with the default WOPE style sheet (/widgets/bk.css) If you have previously edited the wope.css stylesheet, it will not be automatically loaded anymore. You MUST manually load this resource by adding the reference below in the head of your pages : <link rel="stylesheet" href="/css/wope.css" /> 4.2.3. @bk-media and data-bk-media syntax is now following CSS Media Queries standard syntax You MUST now use the standard CSS syntax for logical ORs, ANDs or negations Example 4.1. This old syntax is no more valid: (mobile_browser: WebKit/iPhone) or (mobile_browser: WebKit/Android) Example 4.2. Instead, it should now be: (mobile_browser: WebKit/iPhone), (mobile_browser: WebKit/Android) Example 4.3. This old syntax is no more valid: (mobile_browser: WebKit/iPhone, WebKit/Android, WebKit/webOS) Example 4.4. Instead, it should now be: (mobile_browser: WebKit/iPhone), (mobile_browser: WebKit/Android), (mobile_browser: We\ bKit/webOS) Example 4.5. For a negation, this old syntax is no more valid: (mobile_browser: not WebKit/iPhone) Example 4.6. Instead, it should now be: not (mobile_browser: WebKit/iPhone) 4.2.4. Two columns layout The Two columns layout styles have been removed from the default WOPE style sheet (/wid- gets/bk.css) 8 Two columns layout When updating from previous WOPE major releases you can use the following markup and css to ren- der a two columns layout: Example 4.7. Two columns layout markup <form action="form.jsp" method="get" class="bk-two-columns"> <div class="bk-fieldset"> <label for="inputo1" class="bk-cell">Text:</label> <span class="bk-cell"> <input id="inputo1" type="text" name="text" class="bk-fill-parent"/> <input type="hidden" name="hidden_field" value="toto"/> </span> </div> <div class="bk-fieldset> <label class="bk-cell">Number:</label> <span class="bk-cell"> <input type="number" name="number" class="bk-fill-parent"/> </span> </div> <div class="bk-fieldset> <label class="bk-cell">Small input</label> <span class="bk-cell"> <input type="number" name="num01" maxlength="2" size="3"/> </span> </div> <div class="bk-fieldset> <label class="bk-cell">Date:</label> <span class="bk-cell"> <input type="date" data-bk-datepicker="date" name="date" class="bk-fill-par\ ent" data-bk-title="Calendrier"/> </span> </div> <div class="bk-fieldset> <label class="bk-cell">Checkbox:</label> <span class="bk-cell"> <input type="checkbox" id="checkbox3" name="checkbox1" value="value1" /> <label for="checkbox3">Checkbox 1</label> <br/> <input type="checkbox" id="checkbox4" name="checkbox2" value="value2" checked="checked"/> <label for="checkbox4">Checkbox 2</label> </span> </div> <div class="bk-fieldset> <label class="bk-cell">Radio:</label> <span class="bk-cell"> <input type="radio" id="radio3" name="choice" value="value1" /> <label for="radio3">Radio 1</label> <br/> <input type="radio" id="radio4" name="choice" value="value2" checked="checked"/> <label for="radio4"><span>Radio 2</span></label> </span> </div> <div class="bk-fieldset> <label class="bk-cell">Select:</label> <span class="bk-cell"> <select name="select" class="bk-fill-parent"> <option value="option1">Option 1</option> <option value="option1">Option 2</option> </select> </span> </div> <div class="bk-fieldset> <label class="bk-cell" for="placeholder" data-bk-role="placeholder">I am a forced placeholder<br/></label> 9 Chapter 4. Upgrading guide from WOPE 5.x <span class="bk-cell"> <input id="placeholder" type="text" name="text" class="bk-fill-parent"/> </span> </div> <div class="bk-fieldset> <label class="bk-cell">Textarea:</label> <span class="bk-cell"> <textarea name="textarea" class="bk-fill-parent" disabled="disabled">A textarea</textarea> </span> </div> <div class="bk-fieldset style="text-align: right;"> <label class="bk-cell"> Submit: </label> <span class="bk-cell"> <input type="submit" name="Valider" value="valider"/> </span> </div> </form> Example 4.8.