Author: maxfranz
Date: 2010-08-05 07:36:13 -0700 (Thu, 05 Aug 2010)
New Revision: 21214
Added:
cytoscapeweb/trunk/website/src/css/content/tutorial.css
cytoscapeweb/trunk/website/src/php/content/tutorial.declaration.php
cytoscapeweb/trunk/website/src/php/content/tutorial.php
Removed:
cytoscapeweb/trunk/website/src/php/content/documentation/tutorial.declaration.php
cytoscapeweb/trunk/website/src/php/content/documentation/tutorial.php
Modified:
cytoscapeweb/trunk/website/build.xml
cytoscapeweb/trunk/website/src/php/content/documentation.declaration.php
cytoscapeweb/trunk/website/src/php/layout/declaration.php
Log:
revising menu for documentation and tutorial
Modified: cytoscapeweb/trunk/website/build.xml
===================================================================
--- cytoscapeweb/trunk/website/build.xml 2010-08-05 13:54:24 UTC (rev
21213)
+++ cytoscapeweb/trunk/website/build.xml 2010-08-05 14:36:13 UTC (rev
21214)
@@ -95,10 +95,10 @@
<fileset dir="${temp.dir}/symbols" includes="**.Layout.php"/>
</copy>
- <mkdir dir="${api.dir}/cytoscape_web"/>
- <copy todir="${api.dir}/cytoscape_web"
file="${jsdoc.dir}/metadata/empty.txt" />
- <move file="${api.dir}/cytoscape_web/empty.txt"
toFile="${api.dir}/cytoscape_web/.real_class"/>
- <copy todir="${api.dir}/cytoscape_web" overwrite="true">
+ <mkdir dir="${api.dir}/visualization"/>
+ <copy todir="${api.dir}/visualization"
file="${jsdoc.dir}/metadata/empty.txt" />
+ <move file="${api.dir}/visualization/empty.txt"
toFile="${api.dir}/visualization/.real_class"/>
+ <copy todir="${api.dir}/visualization" overwrite="true">
<fileset dir="${temp.dir}/symbols"
includes="**.Visualization.php"/>
</copy>
Added: cytoscapeweb/trunk/website/src/css/content/tutorial.css
===================================================================
--- cytoscapeweb/trunk/website/src/css/content/tutorial.css
(rev 0)
+++ cytoscapeweb/trunk/website/src/css/content/tutorial.css 2010-08-05
14:36:13 UTC (rev 21214)
@@ -0,0 +1 @@
+.left iframe { width: 100%; height: 300px; border-radius: 4px;
-moz-border-radius: 4px; -webkit-border-radius: 4px; border: 1px solid #cfcfcf;
}
\ No newline at end of file
Property changes on: cytoscapeweb/trunk/website/src/css/content/tutorial.css
___________________________________________________________________
Name: svn:mime-type
+ text/plain
Deleted:
cytoscapeweb/trunk/website/src/php/content/documentation/tutorial.declaration.php
===================================================================
---
cytoscapeweb/trunk/website/src/php/content/documentation/tutorial.declaration.php
2010-08-05 13:54:24 UTC (rev 21213)
+++
cytoscapeweb/trunk/website/src/php/content/documentation/tutorial.declaration.php
2010-08-05 14:36:13 UTC (rev 21214)
@@ -1,31 +0,0 @@
-<?php
-
- $content_style="side";
-
- function escape_html($str){
- $without_lt = preg_replace( '/</', '<', $str );
- $without_gt = preg_replace( '/>/', '>', $without_lt );
-
- return $without_gt;
- }
-
- function print_code($file){
- echo '<div class="code"><pre class="ln-"><code class="html">';
-
- $fh = fopen($file, "r");
-
- if( $fh ){
- while( $line = fgets($fh) ){
- echo escape_html($line);
- }
- fclose($fh);
- }
-
- echo '</code></pre></div>';
- }
-
- function embed_code($file){
- echo '<iframe src=/' . $file . '></iframe>';
- }
-
-?>
\ No newline at end of file
Deleted: cytoscapeweb/trunk/website/src/php/content/documentation/tutorial.php
===================================================================
--- cytoscapeweb/trunk/website/src/php/content/documentation/tutorial.php
2010-08-05 13:54:24 UTC (rev 21213)
+++ cytoscapeweb/trunk/website/src/php/content/documentation/tutorial.php
2010-08-05 14:36:13 UTC (rev 21214)
@@ -1,119 +0,0 @@
-<div class="left">
-
- <h1>Introduction</h1>
-
- <p>This tutorial guides you through the process of getting Cytoscape Web
up and running within
- a HTML page. Once you have Cytoscape Web working, you can continue on in
the tutorial to see
- how to interact with Cytoscape Web. Additionally, visual styles are
presented as a more
- complex example of how to interact with Cytoscape Web.</p>
-
-
-
-
- <h1>Getting started</h1>
-
-
- <h2>What you need</h2>
-
- <p>All the files you need are in the latest version of the Cytoscape Web
distribution archive.
- <a href="/download#now">Get the latest version of the archive</a>, and
extract the files.</p>
-
- <p>When opening the examples as a local files in your browser, you may not
be able to see
- Cytoscape Web. This is due to Flash security settings. Make sure to
allow Flash to run
- from the local filesystem (<code>file://*</code>) in the
- <a
href="http://www.macromedia.com/support/documentation/en/flashplayer/help/settings_manager04.html";>security
settings panel</a>.
- You do not need to change the security settings if you deploy Cytoscape
Web on a web server,
- such as Apache.</p>
-
- <img src="/img/content/tutorial/flash_security.png" />
-
- <h2>What to do</h2>
-
- <p>The best way to familiarise yourself with setting up Cytoscape Web is
to go through an
- example.</p>
-
- <p>It is important to note that Cytoscape Web does not load remote files
for you. So if you
- have a graph file you want to load from a server, you must load the file
into a
- <code>string</code>, either by hardcoding the graph into your code or
loading the graph file via
- AJAX first. We recommend you take a look at <a href="http://jquery.com";
rel="external">jQuery</a>.
- It makes Javascript <em>really</em> easy, especially
- <a href="http://docs.jquery.com/Ajax"; rel="external">AJAX</a>.</p>
-
- <p>Now, take a look at this example. It has everything needed to get
Cytoscape Web up and
- running.</p>
-
- <?php print_code("file/example_code/getting_started.html"); ?>
-
- <p>The code above is embedded below. If you are following along, you can
copy and paste the
- code above and adjust the <code>script</code> tag references to the path
where you extracted
- Cytoscape Web. When loaded in your browser, the file you would have made
would look just
- like the embedded code below.</p>
-
- <?php embed_code("file/example_code/getting_started.html"); ?>
-
-
-
-
-
- <h1>Interacting with Cytoscape Web</h1>
-
- <p>Now that you are able to embed Cytoscape Web into a page, you can use
the Javascript API to
- interact with it. You have already used the class representing the
- <a href="/documentation/cytoscape_web">embedded visualisation</a> in the
- first example. What remains is to interact with the visualisation once it
has been drawn.</p>
-
- <p>The main thing to keep in mind is that you can not interact with most
of Cytoscape Web
- until the graph is drawn. Thus, you can interact with Cytoscape Web by
using the
- <a href="/documentation/cytoscape_web#ready">ready</a> callback function,
which is called
- when Cytoscape Web is finished drawing the graph.</p>
-
- <p>This example interacts with Cytoscape Web by getting attributes values
that were set for the
- nodes and edges in the graph. This is achieved by registering with the
- <a href="/documentation/cytoscape_web#addListener">addListener</a>
function for click events.</p>
-
- <?php print_code("file/example_code/interacting.html"); ?>
-
- <?php embed_code("file/example_code/interacting.html"); ?>
-
- <p>Now that you know how to initialise and interact with Cytoscape Web,
you can look to the
- <a href="/documentation/cytoscape_web">API reference</a> to customise
- Cytoscape Web exactly to your liking. Have fun!</p>
-
- <p>If you would like a bit more in the way of instruction, see the next
section on how to
- set the visual style. The example there is a bit more complex, but it
should give you the
- opportunity to become more familiar with the Cytoscape Web API.</p>
-
-
- <h1>Visual styles</h1>
-
- <p>Visual styles configure the way that the graph is visually displayed.
You can create a
- visual style statically or programattically, by setting the visual style
at initialisation or
- by using the <a
href="/documention/cytoscape_web#visualStyle">visualStyle</a> function.</p>
-
- <p>This example changes the visual style of the graph from the previous
examples.</p>
-
- <?php print_code("file/example_code/style.html"); ?>
-
- <p>The style is set at initialisation. Additionally, clicking the link
changes the visual
- style programattically by changing the background color to a randomly
selected color for
- each click.</p>
-
- <?php embed_code("file/example_code/style.html"); ?>
-
- <p>This example has used only a few visual properties for the sake of
simplicity. However,
- there are many visual properties that exist in Cytoscape Web that can be
used to control
- exactly how things are visually displayed. Take a look at the
- <a href="/documentation/cytoscape_web#visualStyle">visualStyle</a>
- function for more information.</p>
-
-
-
-
- <h1>Conclusion</h1>
-
- <p>This tutorial should allow you to have Cytoscape Web up and running and
interacting with
- other components in your page. You should now be sufficiently capable of
using the
- <a href="/documentation/cytoscape_web">API reference</a> to customise
Cytoscape Web to your
- specific needs.</p>
-
-</div>
\ No newline at end of file
Modified:
cytoscapeweb/trunk/website/src/php/content/documentation.declaration.php
===================================================================
--- cytoscapeweb/trunk/website/src/php/content/documentation.declaration.php
2010-08-05 13:54:24 UTC (rev 21213)
+++ cytoscapeweb/trunk/website/src/php/content/documentation.declaration.php
2010-08-05 14:36:13 UTC (rev 21214)
@@ -8,9 +8,14 @@
}
$page_links = array(
- "tutorial" => "Tutorial"
+ //"tutorial" => "Tutorial" // uncomment and move tutorial.php files to
put back in documentation section
);
+ // make visualization the default page but with unaltered order in
$page_links
+ if( $page_link == "" ){
+ $page_link = "visualization";
+ }
+
if($page_link != "tutorial" && $page_link != "") {
$include = "php/content/documentation/list_functions.php";
//include_js("/js/content/api.js");
Added: cytoscapeweb/trunk/website/src/php/content/tutorial.declaration.php
===================================================================
--- cytoscapeweb/trunk/website/src/php/content/tutorial.declaration.php
(rev 0)
+++ cytoscapeweb/trunk/website/src/php/content/tutorial.declaration.php
2010-08-05 14:36:13 UTC (rev 21214)
@@ -0,0 +1,31 @@
+<?php
+
+ $content_style="side";
+
+ function escape_html($str){
+ $without_lt = preg_replace( '/</', '<', $str );
+ $without_gt = preg_replace( '/>/', '>', $without_lt );
+
+ return $without_gt;
+ }
+
+ function print_code($file){
+ echo '<div class="code"><pre class="ln-"><code class="html">';
+
+ $fh = fopen($file, "r");
+
+ if( $fh ){
+ while( $line = fgets($fh) ){
+ echo escape_html($line);
+ }
+ fclose($fh);
+ }
+
+ echo '</code></pre></div>';
+ }
+
+ function embed_code($file){
+ echo '<iframe src=/' . $file . '></iframe>';
+ }
+
+?>
\ No newline at end of file
Property changes on:
cytoscapeweb/trunk/website/src/php/content/tutorial.declaration.php
___________________________________________________________________
Name: svn:executable
+ *
Added: cytoscapeweb/trunk/website/src/php/content/tutorial.php
===================================================================
--- cytoscapeweb/trunk/website/src/php/content/tutorial.php
(rev 0)
+++ cytoscapeweb/trunk/website/src/php/content/tutorial.php 2010-08-05
14:36:13 UTC (rev 21214)
@@ -0,0 +1,119 @@
+<div class="left">
+
+ <h1>Introduction</h1>
+
+ <p>This tutorial guides you through the process of getting Cytoscape Web
up and running within
+ a HTML page. Once you have Cytoscape Web working, you can continue on in
the tutorial to see
+ how to interact with Cytoscape Web. Additionally, visual styles are
presented as a more
+ complex example of how to interact with Cytoscape Web.</p>
+
+
+
+
+ <h1>Getting started</h1>
+
+
+ <h2>What you need</h2>
+
+ <p>All the files you need are in the latest version of the Cytoscape Web
distribution archive.
+ <a href="/download#now">Get the latest version of the archive</a>, and
extract the files.</p>
+
+ <p>When opening the examples as a local files in your browser, you may not
be able to see
+ Cytoscape Web. This is due to Flash security settings. Make sure to
allow Flash to run
+ from the local filesystem (<code>file://*</code>) in the
+ <a
href="http://www.macromedia.com/support/documentation/en/flashplayer/help/settings_manager04.html";>security
settings panel</a>.
+ You do not need to change the security settings if you deploy Cytoscape
Web on a web server,
+ such as Apache.</p>
+
+ <img src="/img/content/tutorial/flash_security.png" />
+
+ <h2>What to do</h2>
+
+ <p>The best way to familiarise yourself with setting up Cytoscape Web is
to go through an
+ example.</p>
+
+ <p>It is important to note that Cytoscape Web does not load remote files
for you. So if you
+ have a graph file you want to load from a server, you must load the file
into a
+ <code>string</code>, either by hardcoding the graph into your code or
loading the graph file via
+ AJAX first. We recommend you take a look at <a href="http://jquery.com";
rel="external">jQuery</a>.
+ It makes Javascript <em>really</em> easy, especially
+ <a href="http://docs.jquery.com/Ajax"; rel="external">AJAX</a>.</p>
+
+ <p>Now, take a look at this example. It has everything needed to get
Cytoscape Web up and
+ running.</p>
+
+ <?php print_code("file/example_code/getting_started.html"); ?>
+
+ <p>The code above is embedded below. If you are following along, you can
copy and paste the
+ code above and adjust the <code>script</code> tag references to the path
where you extracted
+ Cytoscape Web. When loaded in your browser, the file you would have made
would look just
+ like the embedded code below.</p>
+
+ <?php embed_code("file/example_code/getting_started.html"); ?>
+
+
+
+
+
+ <h1>Interacting with Cytoscape Web</h1>
+
+ <p>Now that you are able to embed Cytoscape Web into a page, you can use
the Javascript API to
+ interact with it. You have already used the class representing the
+ <a href="/documentation/cytoscape_web">embedded visualisation</a> in the
+ first example. What remains is to interact with the visualisation once it
has been drawn.</p>
+
+ <p>The main thing to keep in mind is that you can not interact with most
of Cytoscape Web
+ until the graph is drawn. Thus, you can interact with Cytoscape Web by
using the
+ <a href="/documentation/cytoscape_web#ready">ready</a> callback function,
which is called
+ when Cytoscape Web is finished drawing the graph.</p>
+
+ <p>This example interacts with Cytoscape Web by getting attributes values
that were set for the
+ nodes and edges in the graph. This is achieved by registering with the
+ <a href="/documentation/cytoscape_web#addListener">addListener</a>
function for click events.</p>
+
+ <?php print_code("file/example_code/interacting.html"); ?>
+
+ <?php embed_code("file/example_code/interacting.html"); ?>
+
+ <p>Now that you know how to initialise and interact with Cytoscape Web,
you can look to the
+ <a href="/documentation/cytoscape_web">API reference</a> to customise
+ Cytoscape Web exactly to your liking. Have fun!</p>
+
+ <p>If you would like a bit more in the way of instruction, see the next
section on how to
+ set the visual style. The example there is a bit more complex, but it
should give you the
+ opportunity to become more familiar with the Cytoscape Web API.</p>
+
+
+ <h1>Visual styles</h1>
+
+ <p>Visual styles configure the way that the graph is visually displayed.
You can create a
+ visual style statically or programattically, by setting the visual style
at initialisation or
+ by using the <a
href="/documention/cytoscape_web#visualStyle">visualStyle</a> function.</p>
+
+ <p>This example changes the visual style of the graph from the previous
examples.</p>
+
+ <?php print_code("file/example_code/style.html"); ?>
+
+ <p>The style is set at initialisation. Additionally, clicking the link
changes the visual
+ style programattically by changing the background color to a randomly
selected color for
+ each click.</p>
+
+ <?php embed_code("file/example_code/style.html"); ?>
+
+ <p>This example has used only a few visual properties for the sake of
simplicity. However,
+ there are many visual properties that exist in Cytoscape Web that can be
used to control
+ exactly how things are visually displayed. Take a look at the
+ <a href="/documentation/cytoscape_web#visualStyle">visualStyle</a>
+ function for more information.</p>
+
+
+
+
+ <h1>Conclusion</h1>
+
+ <p>This tutorial should allow you to have Cytoscape Web up and running and
interacting with
+ other components in your page. You should now be sufficiently capable of
using the
+ <a href="/documentation/cytoscape_web">API reference</a> to customise
Cytoscape Web to your
+ specific needs.</p>
+
+</div>
\ No newline at end of file
Property changes on: cytoscapeweb/trunk/website/src/php/content/tutorial.php
___________________________________________________________________
Name: svn:executable
+ *
Modified: cytoscapeweb/trunk/website/src/php/layout/declaration.php
===================================================================
--- cytoscapeweb/trunk/website/src/php/layout/declaration.php 2010-08-05
13:54:24 UTC (rev 21213)
+++ cytoscapeweb/trunk/website/src/php/layout/declaration.php 2010-08-05
14:36:13 UTC (rev 21214)
@@ -21,6 +21,7 @@
$navigation_link = ($_GET["id"] == "") ? ("home") : ($_GET["id"]);
$navigation_links = array(
"download" => "Download",
+ "tutorial" => "Tutorial",
"documentation" => "Documentation",
"demo" => "Demo",
"news" => "News",
--
You received this message because you are subscribed to the Google Groups
"cytoscape-cvs" group.
To post to this group, send email to [email protected].
To unsubscribe from this group, send email to
[email protected].
For more options, visit this group at
http://groups.google.com/group/cytoscape-cvs?hl=en.
