[Thyapi-cvs] thyapi/tutorial examples.html,NONE,1.1 tutorial.css,1.1,1.2 tutorial.html,1.1,1.2

[Thyamad c. <th...@us...>]

Update of /cvsroot/thyapi/thyapi/tutorial
In directory sc8-pr-cvs1.sourceforge.net:/tmp/cvs-serv24664/tutorial

Modified Files:
	tutorial.css tutorial.html 
Added Files:
	examples.html 
Log Message:
Commiting file additions and modification from SVN revision 1946 to 1947...
Changes made by vinicius on 2005-09-15 10:18:39 +0200 (Thu, 15 Sep 2005) corresponding to SVN revision 1947 with message:

ThyAPI Tutorial - changes





Index: tutorial.css
===================================================================
RCS file: /cvsroot/thyapi/thyapi/tutorial/tutorial.css,v
retrieving revision 1.1
retrieving revision 1.2
diff -C2 -d -r1.1 -r1.2
*** tutorial.css	15 Sep 2005 04:48:28 -0000	1.1
--- tutorial.css	15 Sep 2005 08:01:27 -0000	1.2
***************
*** 30,33 ****
--- 30,36 ----
  	vertical-align: top;
  	padding: 15px;
+ 	font-size: small;
+ 	width: 600px;
+ 	text-align: justify;
  }
  
***************
*** 36,40 ****
  {
  	text-decoration: none;
! 	color: black;
  }
  
--- 39,43 ----
  {
  	text-decoration: none;
! 	color: #000099;
  }
  

Index: tutorial.html
===================================================================
RCS file: /cvsroot/thyapi/thyapi/tutorial/tutorial.html,v
retrieving revision 1.1
retrieving revision 1.2
diff -C2 -d -r1.1 -r1.2
*** tutorial.html	15 Sep 2005 04:48:28 -0000	1.1
--- tutorial.html	15 Sep 2005 08:01:27 -0000	1.2
***************
*** 14,20 ****
  <br><br>ThyAPI Tutorial</a>
  	<div id="sidemenu_options">
! 	<a href="#">Option 1</a><br>
! 	<a href="#">Option 2</a><br>
! 	<a href="#">Option 3</a>
  	</div>
  </td>
--- 14,20 ----
  <br><br>ThyAPI Tutorial</a>
  	<div id="sidemenu_options">
! 	<a href="tutorial.html">Introduction</a><br>
! 	<a href="examples.html">Widget Examples</a><br>
! 	<a href="history.html">History</a>
  	</div>
  </td>
***************
*** 22,47 ****
  <!-- Begin Content -->
  <td id="contents">
! <h1> Test H1 Tag </h1>
! <h2> Test H2 Tag </h2>
! <h3> Test H3 Tag </h3>
! <h4> Test H4 Tag </h4>
! <h5> Test H5 Tag </h5>
! <h1> Test H1 Tag </h1>
! <h2> Test H2 Tag </h2>
! <h3> Test H3 Tag </h3>
! <h4> Test H4 Tag </h4>
! <h5> Test H5 Tag </h5>
  
! <h1> Test H1 Tag </h1>
! <h2> Test H2 Tag </h2>
! <h3> Test H3 Tag </h3>
! <h4> Test H4 Tag </h4>
! <h5> Test H5 Tag </h5>
  
- <h1> Test H1 Tag </h1>
- <h2> Test H2 Tag </h2>
- <h3> Test H3 Tag </h3>
- <h4> Test H4 Tag </h4>
- <h5> Test H5 Tag </h5>
  </td>
  <!-- End Content -->
--- 22,155 ----
  <!-- Begin Content -->
  <td id="contents">
! <h2>ThyAPI Tutorial</h2>
  
! Written by:<br>
! <address>
! Vinicius Cubas Brand<br>
! Raphael Derosso Pereira
! </address>
! <br>
! 
! Supported by <a href="http://www.thyamad.com">Thyamad Projects</a>
! 
! <h2> Description </h2>
! 
! <b>ThyAPI</b> is a DHTML (JavaScript + DOM + CSS) library that implements a set
! of components that allows the creation of rich web user interfaces.<br>
! <br>
! The purpose of this tutorial is to provide some means to the average developer
! to learn ThyAPI by focusing in small examples and codes to solve simple tasks.<br>
! <br>
! <h2> Requisites </h2>
! 
! To run ThyAPI, just what you need is a JavaScript-capable web browser.<br>
! <br>
! To develop using ThyAPI, some knowledge of <b>JavaScript</b> is very desirable.
! JavaScript is a very powerful language, and a bit of JavaScript skills are
! necessary to program the events and routines to run in the web browser. ThyAPI
! simplifies a lot of JavaScript development efforts because it encapsulates a
! lot of code inside its widgets. Mostly just high-level code is necessary to
! create a full-featured rich user interface in browser, because the low-level
! code is already implemented in ThyAPI.<br>
! <br>
! If you want to learn JavaScript, these are the places to go:<br>
! <ul>
! 	<li><a href="http://www.w3schools.com/js/default.asp">W3Schools JavaScript Tutorial</a></li>
! 	<li><a href="http://www.devguru.com">JavaScript Reference at DevGuru.com</a></li>
! </ul>
! To develop and debug your JavaScript codes, we recommend the use of <a
! href="http://www.mozilla.org">Mozilla Firefox</a>, together with development
! tools as the Mozilla DOM Inspector and the <a
! href="https://addons.mozilla.org/extensions/moreinfo.php?application=firefox&category=Developer%20Tools&numpg=10&id=216">Venkman JavaScript Debugger</a>. The first one comes with Firefox: you just need to
! select to install the "Development tools" in the installation of Firefox. The
! second is an extension of Firefox that can be found <a href="https://addons.mozilla.org/extensions/moreinfo.php?application=firefox&category=Developer%20Tools&numpg=10&id=216">here</a>.<br>
! <br>
! <br>
! Some knowledge of <b>CSS</b> is also desirable. CSS stands for <b>Cascade
! Style Sheets</b>, and are a very good way to customize a page look-and-feel.
! ThyAPI interfaces are completely dependent of a CSS file. Several widget
! properties, like position or size, are defined in CSS. This allows a complete
! customization of a interface, including support for different themes.<br>
! Experience showed us that one actually can learn a lot of CSS when developing
! some basic interfaces with ThyAPI, but some links for CSS tutorial and
! reference are provided:<br>
! <ul>
! 	<li><a href="http://www.w3schools.com/css/default.asp">W3Schools CSS Tutorial</a></li>
! 	<li><a href="http://www.w3.org/TR/CSS21/">W3 Consortium References for CSS 2.1</a></li>
! </ul>
! <br>
! At last, some knowledge of the <b>HTML Document Object Model (DOM)</b> is
! desirable. These three (DOM, JavaScript and CSS) are also known as <b>Dynamic
! HTML</b> or <b>DHTML</b>. The DOM is the way the browsers use to access and
! handle elements of any HTML web page, after it had been parsed and displayed.<br>
! Some references for <b>DOM</b> and <b>DHTML</b> are given:
! <ul>
! 	<li><a href="http://www.w3schools.com/dhtml/default.asp">W3Schools DHTML Tutorial</a></li>
! 	<li><a href="http://www.w3schools.com/htmldom/default.asp">W3Schools HTML DOM Tutorial</a></li>
! 	<li><a href="http://www.w3.org/TR/2004/REC-DOM-Level-3-Core-20040407/">W3 Consortium References for DOM Level 3 Core</a></li>
! </ul>
! <br>
! Also, these two books are a good reference for DHTML:<br>
! <ul>
! 	<li><a href="http://www.oreilly.com/catalog/jvdhtmlckbk/">JavaScript & DHTML Cookbook</a></li>
! 	<li><a href="http://www.oreilly.com/catalog/dhtmlref/">Dynamic HTML: The Definitive Reference</a></li>
! </ul>
! 
! <h2> History of ThyAPI</h2>
! ThyAPI development begun in the second half of 2004. In that time, the
! specifications of the DOM, JavaScript and CSS were already ready to allow the
! creation of rich web applications with DHTML. However, web browsers in this
! time were finishing to assimilate all funcionalities predicted in these
! specifications.<br>
! <br>
! In that time there were already a lot of cool DHTML components, that one could
! download from the internet and use. These components showed some cool
! behaviour, really dynamic, because of code running in the browser. However,
! mostly these components were very specific, and their integration were
! responsibility of the developer that was using them. Sometimes this integration
! was a very hard task, if not impossible, because oftenly a DHTML component did
! not work with another. Also, some other simple features (like for instance
! Drag and Drop) demmanded a high amount of code. In that time, the DHTML was in
! its beginning.<br>
! <br>
! In the first half of 2004, a developer of the <a
! href="http://www.thyamad.com">Thyamad</a> Crew was developing Contact Center,
! an application to make contact management in the groupware software <a
! href="http://www.egroupware.org">eGroupWare</a>. In that time, there came the
! idea to develop the forms and the visualization screens of this application
! using JavaScript and DHTML, so it would be very cool, and its speed of
! operation very fast. A javascript component called XMLHttpRequest was used to
! exchange data with the server without the need of a page reload. So, several
! windows and screens had their content "populated" by data that came from the
! server by this component. Later, the use of this component together with DHTML
! techniques was denominated <b><a
! href="http://www.adaptivepath.com/publications/essays/archives/000385.php">AJAX</a></b><br>
! <br>
! However, the development process of these DHTML screens and forms was very
! slow. So, these developers from <a href="http://www.thyamad.com">Thyamad</a>
! decided to create a library that would encapsulate very much of the code, so
! the next interfaces would be each time easier to do.<br>
! <br>
! To do not create everything from scratch, we searched a lot for ready code
! to start from, and we found <a
! href="http://www.sf.net/projects/dynapi">DynAPI</a>, a magnificient DHTML
! library that does some part of the work necessary to create ThyAPI Widgets. It
! haves some characteristics of interest, that are for instance giving support
! for several features in several browsers. ThyAPI is based and uses code from
! DynAPI.<br>
! <br>
! Basically, the widgets in ThyAPI are widgets that can connect, send and receive
! data from the server in a half automatic way through a DataSource component
! (thyDataSource). To make this communication, the data for the request to the
! server is encoded in a protocol in javascript, and the server answers with a
! the response data encoded with the same protocol. Also, these components are
! visually customizable, so, unlike usual HTML components, the ThyAPI widgets can
! be changed in their style in several ways.  Also, it is totally
! object-oriented, very extensible and customizable, so the creation of new
! components inherits most of the code of existing components.<br>
! <br>
! 
! <div style="float: right"><a href="examples.html">Next: Widget Examples&gt;&gt;</a></div>
  
  </td>
  <!-- End Content -->

--- NEW FILE: examples.html ---
<HTML>
<HEAD>
<TITLE>ThyAPI Tutorial</TITLE>
	<style type="text/css" title="currentStyle" media="screen">
		@import "tutorial.css";
	</style>
	<script type="text/javascript" src="../dynapi.js"></script>
</HEAD>
<BODY>
<script language="javascript">
<!--
	dynapi.library.setPath('../');
	dynapi.library.include('dynapi.library');
	dynapi.library.include('dynapi.api');

	dynapi.library.include('thyButton');
	dynapi.library.include('thyCheckBox');
	dynapi.library.include('thyDropDownBox');
	dynapi.library.include('thyEditBox');
	dynapi.library.include('thyTextEdit');
	dynapi.library.include('thyRichTextEdit');
	dynapi.library.include('thyPopupCalendar');
	dynapi.library.include('thyGrid');
	dynapi.library.include('thyWindow');
	dynapi.library.include('thyDialogWindow');
	dynapi.library.include('thyTabsManager');

	
	dynapi.onLoad(function() {
		//thyButton
        var button = new thyButton('button', 'This is a Button');
        var toggle = new thyButton('toggle', 'This is a toggle button');

        toggle.setToggle(true);

        button.addEventListener({onclick: function(){alert('Clicked!')}});
        toggle.addEventListener({
            onbuttondown: function(){alert('Toggled down!')},
            onbuttonup: function(){alert('Toggled up!')}
        });

		/*
		button.setDOMParent('thy_button');
		toggle.setDOMParent('thy_toggle');*/

	});
	
//-->
</script>

<table border="0px" cellspacing="0px" cellpadding="0px">
<tr>
<!-- Begin Main menu -->
<td id="sidemenu">
<a href="tutorial.html"><img src="../thybase/logothyapi.png" alt="ThyAPI Tutorial" TITLE="ThyAPI Tutorial" border="0">
<br><br>ThyAPI Tutorial</a>
	<div id="sidemenu_options">
	<a href="tutorial.html">Introduction</a><br>
	<a href="examples.html">Widget Examples</a><br>
	<a href="history.html">History</a>
	</div>
</td>
<!-- End Main menu -->
<!-- Begin Content -->
<td id="contents">

<h2>Widget Examples</h2>

This page shows some ThyAPI Widget Examples. The auto-generated documentation
for these widgets can be reached through <A href="../doc/index.html">this
link</a>.

<h2>Visual Widgets</h2>

Each visual widget have a CSS class that defines its look; can be connected to
a thyDataSource object to populate and sweepOut of data; and can have some
events, so when some event happen, a attributed function may be run.

<h3>thyButton</h3>

<div id="thy_button"></div>
<div id="thy_toggle"></div>

<h3>thyCheckBox</h3>

<div id="thy_checkbox"></div>

<h3>thyDropDownBox</h3>

<div id="thy_dropdownbox"></div>

<h3>thyEditBox</h3>

<div id="thy_editbox"></div>

<h3>thyTextEdit</h3>

<div id="thy_textedit"></div>

<h3>thyRichTextEdit</h3>

<div id="thy_richtextedit"></div>

<h3>thyPopupCalendar</h3>

<div id="thy_popupcalendar"></div>

<h3>thyGrid</h3>

<div id="thy_grid"></div>

<h3>thyWindow</h3>

<div id="thy_window"></div>

<h3>thyDialogWindow</h3>

<div id="thy_dialogwindow"></div>

<h3>thyTabsManager</h3>

<div id="thy_tabsmanager"></div>

<div style="float: left"><a href="tutorial.html">&lt;&lt;Previous: Introduction</a></div>
<div style="float: right"><a href="#">Next:&gt;&gt;</a></div>

</td>
<!-- End Content -->
</tr>
</table>
</BODY>
</HTML>