From 3eddf87cb1eb8046d191c65ec69d83264a3c41c0 Mon Sep 17 00:00:00 2001 From: tcofoegbu Date: Thu, 25 Jun 2015 17:23:31 +0100 Subject: [PATCH] JAL-857 updated examples directory web pages to be dynamicaly decorated with jalview websites header and footer --- examples/appletParameters.html | 181 +----------------- examples/applets.html | 217 +++------------------ examples/embedded.html | 172 +---------------- examples/embeddedWJmol.html | 199 +------------------- examples/formComplete.html | 176 +---------------- examples/includes/footer_jv.html | 50 +++++ examples/includes/header_jv.html | 355 +++++++++++++++++++++++++++++++++++ examples/includes/nav_jv.html | 45 +++++ examples/index.html | 196 +++++++++++++++++++ examples/jalviewLiteJs.html | 174 +---------------- examples/javascript/jalview.js | 8 + examples/javascript/jvcontroller.js | 136 ++++++++++++++ examples/javascriptLaunch.html | 174 +---------------- examples/linkedapplets_ng.html | 179 +----------------- examples/u_applets.html | 337 --------------------------------- examples/u_embedded.html | 229 ---------------------- examples/u_embeddedWJmol.html | 302 ----------------------------- examples/u_formComplete.html | 251 ------------------------- examples/u_javascriptLaunch.html | 296 ----------------------------- examples/u_linkedapplets_ng.html | 297 ----------------------------- 20 files changed, 836 insertions(+), 3138 deletions(-) mode change 100755 => 100644 examples/applets.html create mode 100644 examples/includes/footer_jv.html create mode 100644 examples/includes/header_jv.html create mode 100644 examples/includes/nav_jv.html create mode 100644 examples/index.html create mode 100644 examples/javascript/jvcontroller.js delete mode 100644 examples/u_applets.html delete mode 100644 examples/u_embedded.html delete mode 100644 examples/u_embeddedWJmol.html delete mode 100644 examples/u_formComplete.html delete mode 100644 examples/u_javascriptLaunch.html delete mode 100644 examples/u_linkedapplets_ng.html diff --git a/examples/appletParameters.html b/examples/appletParameters.html index 95a4511..d6c4edd 100644 --- a/examples/appletParameters.html +++ b/examples/appletParameters.html @@ -1,4 +1,3 @@ - - - Applet Parameters - - - - - - - - - - - - - - - - - - - - - - - -
- - - -
-

JalviewLite Applet Parameter Documentation

@@ -165,9 +23,8 @@ var _gaq = _gaq || [];_gaq.push(["_setAccount", "UA-9060947-1"]);_gaq.push(["_tr The JalviewLite applet is configured through a series of applet parameters, which are described below. Once initialised, the applet can be interacted with via its -Javascript API. -

Issues arising from tightening of Java Security default settings
JalviewLite is provided as a signed applet with 'sandbox' permissions and wildcards that allow it to be run from any website. Unfortunately, earlier versions of Java are not compatible with these settings, so if you find that you cannot see any of the examples on the left, try the unsigned applet examples. -

+Javascript API. +

Issues arising from tightening of Java Security default settings
JalviewLite is provided as a signed applet with 'sandbox' permissions and wildcards that allow it to be run from any website. Unfortunately, earlier versions of Java may not be compatible with these settings.

For additional deployment notes, see below.

Applet Parameters


The applet takes the following initialisation parameters.

@@ -487,7 +344,7 @@ the applet can be interacted with via its archive="jalviewApplet.jar, mydata.zip">
  • Use Jalview for input to a HTML form. For an example of how to - code this using Javascript, click here. + code this using Javascript, click here.
  • Embed Jalview into the web page, without the "Start Jalview" @@ -495,7 +352,7 @@ the applet can be interacted with via its <param name="embedded" value="true">
    • -

    **NEW FEATURES** in Jalview 2.8

    +

    **NEW FEATURES** in Jalview 2.8

    • Normalised sequence logo display
      • @@ -517,7 +374,7 @@ the applet can be interacted with via its
    • Javascript callbacks capabilities
      • oninit parameter and methods for registering javascript handlers for selections, mouseovers and linking to Jmol applets on the page.
      • To use javascript callbacks, ensure the applet tag includes the 'mayscript' attribute - either as a parameter (<param name="mayscript" value="true"/;gt;) or as a bare attribute in the applet html tag).
      • -
    • New jalviewLite java api methods for selecting, highlighting, scrolling and reordering sequences in an alignment view. +
    • New jalviewLite java api methods for selecting, highlighting, scrolling and reordering sequences in an alignment view.

    **NEW FEATURES** in Jalview 2.6

      @@ -599,30 +456,4 @@ the applet can be interacted with via its (All the usual Jalview File formats are valid, however each new line in an alignment file must be entered as a parameter)
    - - - - - - - - - - - - + \ No newline at end of file diff --git a/examples/applets.html b/examples/applets.html old mode 100755 new mode 100644 index 0f49bbb..501dc40 --- a/examples/applets.html +++ b/examples/applets.html @@ -1,4 +1,3 @@ - - - JalviewLite Examples - - - - - - - - - - - - - - - - - - - - - - - -
    - - - -
    - -
    -
    - Examples aren't working ?
    Try the unsigned applet demos -
    -
    +

    Quick Links to jars for example:
    jalviewApplet.jar and JmolApplet.jar

    @@ -177,7 +31,7 @@ var _gaq = _gaq || [];_gaq.push(["_setAccount", "UA-9060947-1"]);_gaq.push(["_tr

    JalviewLite Button Examples

    Try out JalviewLite by pressing one of the buttons below.
    - For more information on how to use the applet in your website, see the applet parameters and other documentation in the links to the left.

    + For more information on how to use the applet in your website, see the applet parameters and other documentation in the links to the left.

     

    Ferredoxins, chloroplast precursor related UniRef50 @@ -187,26 +41,23 @@ Try out JalviewLite by pressing one of the buttons below.

    - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + User Defined Colours, loads an associated Newick format tree file which is used to sort the alignment, and @@ -318,7 +169,8 @@ Try out JalviewLite by pressing one of the buttons below.

    -
    + @@ -339,30 +191,3 @@ Try out JalviewLite by pressing one of the buttons below.
    		Displays a split window view of protein and its related cDNA
    - - - - - - - - - - - - diff --git a/examples/embedded.html b/examples/embedded.html index ce17f7d..4b0531c 100644 --- a/examples/embedded.html +++ b/examples/embedded.html @@ -1,4 +1,3 @@ - - - Embedded Alignment - - - - - - - - - - - - - - - - - - - - - - - -
    - - - -
    -
    -
    - Examples aren't working ?
    Try the unsigned applet demos -
    -
    +

    Quick Links to jars for example:
    jalviewApplet.jar and JmolApplet.jar

    @@ -203,28 +58,3 @@ var _gaq = _gaq || [];_gaq.push(["_setAccount", "UA-9060947-1"]);_gaq.push(["_tr

    - - - -
    - -
    -
    - - - diff --git a/examples/embeddedWJmol.html b/examples/embeddedWJmol.html index e8c9df3..ca5b464 100644 --- a/examples/embeddedWJmol.html +++ b/examples/embeddedWJmol.html @@ -1,85 +1,7 @@ - - + + - Jalview and Jmol - - - - - - - - - - - - - + - - + - - - - - - - - -
    - - - -
    - - - -
    -
    - Examples aren't working ?
    Try the unsigned applet demos -
    -
    +

    Quick Links to jars for example:
    jalviewApplet.jar and JmolApplet.jar

    @@ -274,29 +116,4 @@ function genHref() deployJava.runApplet(_jvA.attributes, _jvA.parameters, '1.4'); - - - - -
    - -
    -
    - - - + \ No newline at end of file diff --git a/examples/formComplete.html b/examples/formComplete.html index 36adb22..37b4450 100644 --- a/examples/formComplete.html +++ b/examples/formComplete.html @@ -1,4 +1,3 @@ - - - Access from Javascript - - - - - - - - - - - - - - - - - - - - - - - -
    - - - -
    -
    -
    - Examples aren't working ?
    Try the unsigned applet demos -
    -
    +

    Quick Links to jars for example:
    jalviewApplet.jar and JmolApplet.jar

    -

    JalviewLite API Demo

    +

    JalviewLite API Demo

    Using the Javascript API to fill out forms using data from JalviewLite
    Click the Javascript buttons below to interact with the Applet instance on the page.

    View the source in your browser to see how it has been done.
    -View the full JalviewLite API documentation. +View the full JalviewLite API documentation. @@ -224,28 +79,3 @@ View the source in your browser to see how it has been done.
    - - - - - - - - - - diff --git a/examples/includes/footer_jv.html b/examples/includes/footer_jv.html new file mode 100644 index 0000000..3459fe6 --- /dev/null +++ b/examples/includes/footer_jv.html @@ -0,0 +1,50 @@ + + + +
    +
    + + + + + diff --git a/examples/includes/header_jv.html b/examples/includes/header_jv.html new file mode 100644 index 0000000..d5af784 --- /dev/null +++ b/examples/includes/header_jv.html @@ -0,0 +1,355 @@ + + + + + +
    +
    +
    +
    +
    +
    +
    +
    +
    + +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
      +
    • +
      +
      + +
      +
      +
      • +
    • +
      +
      + +
      +
      +
      • +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    + + +
    + + +
    +
    +
    diff --git a/examples/includes/nav_jv.html b/examples/includes/nav_jv.html new file mode 100644 index 0000000..f338ccb --- /dev/null +++ b/examples/includes/nav_jv.html @@ -0,0 +1,45 @@ + + + + diff --git a/examples/index.html b/examples/index.html new file mode 100644 index 0000000..50f7cb5 --- /dev/null +++ b/examples/index.html @@ -0,0 +1,196 @@ + + + + + + + + + + +Development | jalview.org + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    +
    + +
    + + + + +
    +
    + +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    + +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    + + + + diff --git a/examples/jalviewLiteJs.html b/examples/jalviewLiteJs.html index c72e801..f91efa3 100644 --- a/examples/jalviewLiteJs.html +++ b/examples/jalviewLiteJs.html @@ -1,4 +1,3 @@ - - - Javascript API - - - - - - - - - - - - - - - - - - - - - - - -
    - - - -
    - - - -

    The jalviewLite applet's application programming interface (API) includes two components. A JalviewLite Javascript Library and the public methods on the JalviewLite applet. +

    The jalviewLite applet's application programming interface (API) includes two components. A JalviewLite Javascript Library and the public methods on the JalviewLite applet.

    Notes

      @@ -411,30 +267,4 @@ public static String getVersion() public static boolean debug - - - - - -
    - -
    -
    - - - + \ No newline at end of file diff --git a/examples/javascript/jalview.js b/examples/javascript/jalview.js index dfe8c26..a3ff56b 100644 --- a/examples/javascript/jalview.js +++ b/examples/javascript/jalview.js @@ -17,6 +17,14 @@ * The Jalview Authors are detailed in the 'AUTHORS' file. */ + + + + + + + + // default console to report messages var _console = document.getElementById("stdout"); var _jvapps = new Array(); diff --git a/examples/javascript/jvcontroller.js b/examples/javascript/jvcontroller.js new file mode 100644 index 0000000..fa33023 --- /dev/null +++ b/examples/javascript/jvcontroller.js @@ -0,0 +1,136 @@ +/** + * Jalview - A Sequence Alignment Editor and Viewer ($$Version-Rel$$) + * Copyright (C) $$Year-Rel$$ The Jalview Authors + * + * This file is part of Jalview. + * + * Jalview is free software: you can redistribute it and/or + * modify it under the terms of the GNU General Public License + * as published by the Free Software Foundation, either version 3 of the License, or (at your option) any later version. + * + * Jalview is distributed in the hope that it will be useful, but + * WITHOUT ANY WARRANTY; without even the implied warranty + * of MERCHANTABILITY or FITNESS FOR A PARTICULAR + * PURPOSE. See the GNU General Public License for more details. + * + * You should have received a copy of the GNU General Public License along with Jalview. If not, see . + * The Jalview Authors are detailed in the 'AUTHORS' file. + */ + + + var currentPage = (readCookie("current_page")) ? readCookie("current_page") : "applets"; + var signedJars = "jalviewApplet.jar,JmolApplet-12.2.4.jar,java-json.jar,json_simple-1.1.jar"; + var unsignedJars = "u_jalviewApplet.jar,u_JmolApplet-12.2.4.jar,u_java-json.jar,u_json_simple-1.1.jar"; + setOrUpdateCookie('jv_applet_mode', 'false', '1'); + var isSignedAppletMode = readCookie("jv_applet_mode"); + var appletJars = (isSignedAppletMode === 'true') ? signedJars : unsignedJars; + //alert(unsigned); + + + function createAppletTag(code, name, archive, width, height, params){ + var app = document.createElement('applet'); + app.code= code; + app.width = width; + app.height = height; + app.archive = archive; + + var arrayLength = params.length; + for (var i = 0; i < arrayLength; i++) { + //console.log('name : '+ params[i][0] + ' code : '+ params[i][1]); + var param = document.createElement('param'); + param.name = params[i][0]; + param.value = params[i][1]; + app.appendChild(param); + } + return app; + } + + function readCookie(name) { + var nameEQ = name + "="; + var ca = document.cookie.split(';'); + for(var i=0;i < ca.length;i++) { + var c = ca[i]; + while (c.charAt(0)==' ') c = c.substring(1,c.length); + if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length); + } + return null; + } + + function setOrUpdateCookie(name, value, days) { + var expires; + if (days) { + var date = new Date(); + date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000)); + expires = "; expires=" + date.toGMTString(); + } + else { + expires = ""; + } + document.cookie = name + "=" + value + expires + "; path=/"; + } + + $(function(){ + //var currentPage = (readCookie("current_page")) ? readCookie("current_page") : "applets.html"; + //alert("cur page : " + currentPage); + $('#header').load("includes/header_jv.html"); + $('#content').load(currentPage+".html"); + $('#nav').load("includes/nav_jv.html"); + $('#footer').load("includes/footer_jv.html"); + $('#'+ currentPage).addClass('active-trail active'); + }); + + $(document).ready(function(){ + //var currentPage = (readCookie("current_page")) ? readCookie("current_page") : "applets.html"; + //updateLinks(currentPage); + var params = [["file","uniref50.fa"], + ["treeFile","ferredoxin.nw"], + ["userDefinedColour","C=yellow; R,K,H=FF5555; D,E=5555F"], + ["sortByTree","True"], + ["showSequenceLogo","true"], + ["showGroupConsensus","true"], + ["showFullId","false"], + ["linkLabel_1","Uniprot"], + ["linkUrl_1","http://www.uniprot.org/uniprot/$SEQUENCE_ID$"], + ["linkLabel_2","EMBL-EBI Search"], + ["linkUrl_2","http://www.ebi.ac.uk/ebisearch/search.ebi?db=allebi&query=$SEQUENCE_ID$"], + ["APPLICATION_URL","http://www.jalview.org/services/launchApp"]]; + var app = createAppletTag('jalview.bin.JalviewLite','',appletJars,'140','35', params); + console.log('—————————> app ———————> ' + app); + //var appDiv = document.getElementById("applet_div"); + //var appDiv = document.getElementById("applet_div"); + //appDiv.appendChild(app); + $("
    I'm new box by appendTo
    ").appendTo('.applet_div'); + //$(‘.applet_div').append(app); + }); + +function doSubmit(target){ + setOrUpdateCookie('current_page', target, '1'); + //alert('current page : ' + readCookie("current_page")); + var currentPage = target+'.html'; + $('#content').load(currentPage); + updateLinks(target); +} + +function updateLinks(target) { + var ul = document.getElementById("menu"); + var items = ul.getElementsByTagName("li"); + for (var i = 0; i < items.length; ++i) { + removeClass(items[i], "active-trail active"); + } + $('#'+ target).addClass('active-trail active'); +} + +function hasClass(ele,cls) { + return !!ele.className.match(new RegExp('(\\s|^)'+cls+'(\\s|$)')); +} + +function addClass(ele,cls) { + if (!hasClass(ele,cls)) ele.className += " "+cls; +} + +function removeClass(ele,cls) { + if (hasClass(ele,cls)) { + var reg = new RegExp('(\\s|^)'+cls+'(\\s|$)'); + ele.className=ele.className.replace(reg,' '); + } +} diff --git a/examples/javascriptLaunch.html b/examples/javascriptLaunch.html index 24e4516..a7947bf 100644 --- a/examples/javascriptLaunch.html +++ b/examples/javascriptLaunch.html @@ -1,4 +1,3 @@ - - - Javascript Launch - - - - - - - - - - - - - - - - - - - - - - - -
    - - - -
    - -
    -
    - Examples aren't working ?
    Try the unsigned applet demos -
    -
    + +

    Quick Links to jars for example:
    jalviewApplet.jar and JmolApplet.jar

    @@ -269,28 +124,3 @@ archive="jalviewApplet.jar,JmolApplet-12.2.4.jar" width="0" height="0"> onClick="startJalview('plantfdx.fa','Button1.alignment','alwvar')"/> - - - -
    - -
    -
    - - - diff --git a/examples/linkedapplets_ng.html b/examples/linkedapplets_ng.html index e7e9bec..5786961 100644 --- a/examples/linkedapplets_ng.html +++ b/examples/linkedapplets_ng.html @@ -1,4 +1,3 @@ - - - Linked JalviewLites - - - - - - - - - - - - - - - - - - - - - - - - - -
    - - - -
    - -
    -
    - Examples aren't working ?
    Try the unsigned applet demos -
    -
    +

    Quick Links to jars for example:
    jalviewApplet.jar and JmolApplet.jar

    @@ -196,7 +48,7 @@ var _gaq = _gaq || [];_gaq.push(["_setAccount", "UA-9060947-1"]);_gaq.push(["_tr };

    JalviewLite Linked Applets Demo

    -

    The two applets below use JalviewLite's javascript API to exchange events about the currently selected region and mouse position in the alignment. +

    The two applets below use JalviewLite's javascript API to exchange events about the currently selected region and mouse position in the alignment.

    - - - - - - - - - - - - -
    - - - -
    - - - - -
    -
    -
    - Scary Java warnings ?
    Try the signed applet demos -
    -
    -

    Quick Links to jars for example:
    jalviewApplet.jar and JmolApplet.jar -

    -
    -
    - - - -

    -

    JalviewLite Button Examples

    -Try out JalviewLite by pressing one of the buttons below.
    - For more information on how to use the applet in your website, see the applet parameters and other documentation in the links to the left.

    -

     

    -

    -

    Ferredoxins, chloroplast precursor related UniRef50 - cluster

    -
    (15 sequences x 150 residues) -

    - - - - - - - - - - - - - - - - - -
    - - - - - - - - - - - - - - -User Defined Colours, loads an associated - Newick format tree file which is used to sort the alignment, and - group consensus and sequence logos are shown below the alignment.
    - - - - - - - - - - - - - - -Displays a features file on the alignment
    - - - - - - - - - - - - - - -Associates PDB file 1GAQ with sequence - FER1_MAIZE
    - - - - - - - - - - - - - - Displays a Multiple Sequence Alignment - Based JNet Prediction for a Sequence
    -

    -

    RF00031 RFAM Alignment with per sequence secondary - structure

    -

    - - - - - -
    - - - - - - - - -Displays an RFAM RNA fold family with - secondary structure annotation
    -
    - - - - -
    - -
    -
    - - - diff --git a/examples/u_embedded.html b/examples/u_embedded.html deleted file mode 100644 index bd42b60..0000000 --- a/examples/u_embedded.html +++ /dev/null @@ -1,229 +0,0 @@ - - - - Embedded Alignment - - - - - - - - - - - - - - - - - - - - - - - -
    - - - -
    - - - - -
    -
    -
    - Scary Java warnings ?
    Try the signed applet demos -
    -
    -

    Quick Links to jars for example:
    jalviewApplet.jar and JmolApplet.jar -

    -
    -
    - - -

    Embedded viewing of Alignments

    -

    The alignment below was generated from the following files: -

    - - - - - - - - - - - - -

    - - - - -
    - -
    -
    - - - diff --git a/examples/u_embeddedWJmol.html b/examples/u_embeddedWJmol.html deleted file mode 100644 index f744f8e..0000000 --- a/examples/u_embeddedWJmol.html +++ /dev/null @@ -1,302 +0,0 @@ - - - - Jalview and Jmol - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
    - - - -
    - - - - -
    -
    -
    - Scary Java warnings ?
    Try the signed applet demos -
    -
    -

    Quick Links to jars for example:
    jalviewApplet.jar and JmolApplet.jar -

    -
    -
    - - -

    Structure and Alignment

    -

    This demo shows how JalviewLite and Jmol can be integrated with the JalviewLite javascript library.

    -
    - - -
    - - - - -
    - -
    -
    - - - diff --git a/examples/u_formComplete.html b/examples/u_formComplete.html deleted file mode 100644 index 057156e..0000000 --- a/examples/u_formComplete.html +++ /dev/null @@ -1,251 +0,0 @@ - - - - Access from Javascript - - - - - - - - - - - - - - - - - - - - - - - -
    - - - -
    - - - - -
    -
    -
    - Scary Java warnings ?
    Try the signed applet demos -
    -
    -

    Quick Links to jars for example:
    jalviewApplet.jar and JmolApplet.jar -

    -
    -
    - - -

    JalviewLite API Demo

    -

    Using the Javascript API to fill out forms using data from JalviewLite -
    Click the Javascript buttons below to interact with the Applet -instance on the page.

    -View the source in your browser to see how it has been done.
    -View the full JalviewLite API documentation. - - - - - - - - - - - - - - - - -

    -
    -
    Using the Jalview Applet for Input - to an HTML Form
    -

    -
    -
    -
    -
    Make a new View and Get and Set - Group Display List
    -
    -

    -
    -
    -
    -
    - - - - -
    - -
    -
    - - - diff --git a/examples/u_javascriptLaunch.html b/examples/u_javascriptLaunch.html deleted file mode 100644 index ec4b077..0000000 --- a/examples/u_javascriptLaunch.html +++ /dev/null @@ -1,296 +0,0 @@ - - - - Javascript Launch - - - - - - - - - - - - - - - - - - - - - - - -
    - - - -
    - - - - -
    -
    -
    - Scary Java warnings ?
    Try the signed applet demos -
    -
    -

    Quick Links to jars for example:
    jalviewApplet.jar and JmolApplet.jar -

    -
    -
    - - - -
    - - - - - -

    Javascript Launch Button

    The button below demonstrates how JalviewLite can be launched via a javascript action.

    - - -
    - - - - -
    - -
    - - - - diff --git a/examples/u_linkedapplets_ng.html b/examples/u_linkedapplets_ng.html deleted file mode 100644 index 0ea945a..0000000 --- a/examples/u_linkedapplets_ng.html +++ /dev/null @@ -1,297 +0,0 @@ - - - - Linked JalviewLites - - - - - - - - - - - - - - - - - - - - - - - -
    - - - -
    - - - - -
    -
    -
    - Scary Java warnings ?
    Try the signed applet demos -
    -
    -

    Quick Links to jars for example:
    jalviewApplet.jar and JmolApplet.jar -

    -
    -
    - - - - - -

    JalviewLite Linked Applets Demo

    -

    The two applets below use JalviewLite's javascript API to exchange events about the currently selected region and mouse position in the alignment. -

    - - -

    - -

    -
    -
    -

    - - - - -
    - -
    - - - - -- 1.7.10.2