Permalink
Browse files

These changes contain a almost fully functional implementation of the…

… Book page for the books project that uses

the click framework.
  • Loading branch information...
1 parent 5104bd1 commit 8c5972a8ae3abb9aa91ef34634945a93471f828e @ccorsi committed Oct 1, 2010
@@ -3,9 +3,10 @@
<name>BooksClick</name>
<comment></comment>
<projects>
- <project>BooksXML</project>
- <project>BooksPersistenceBase</project>
<project>BooksCommonWeb</project>
+ <project>BooksJavaScripts</project>
+ <project>BooksPersistenceBase</project>
+ <project>BooksXML</project>
</projects>
<buildSpec>
<buildCommand>
@@ -7,7 +7,7 @@ using the Click web framework for the Books persistent layer.
Created a dynamic web project that will be using the Apache Click web framework.
-The Eclipse IDE plugin for Click 2.2.0 has as of this date not been released. There is a version for the
+The Eclipse IDE plug-in for Click 2.2.0 has as of this date not been released. There is a version for the
Click 2.1.0 release but that is not what I using. By forcing me to look at how to configure click.xml and
web.xml files. It provides will a unique advantage of understanding better how these configuration files are
setup and why that are setup this way.
@@ -62,10 +62,10 @@ and BooksClick projects.
===========
While trying to add logging statements within the different Click specific implementations. I noticed that the
-ServletContext associated to the ConfigService class was not initialized during the onInit callback but that it
-was initialized during the onDestroy callback. When I have time, I will try to determine why this is the case.
+ServletContext associated to the ConfigService class was not initialized during the onInit call-back but that it
+was initialized during the onDestroy call-back. When I have time, I will try to determine why this is the case.
It could be possible that this is a click or tomcat bug. The logging mechanism should already be enabled during
-this callback.
+this call-back.
2010-09-19:
===========
@@ -83,7 +83,7 @@ able to submit the select book to edit.
2010-09-20:
===========
-In the process of trying to create a simple table with a hypelink to the book that a user would
+In the process of trying to create a simple table with a hyper-link to the book that a user would
like to edit, I noticed a few things that required my changes. Some of these hacks can be
wrong but at this time that is what I was able to do to get my page up and running. I hope to
correct this hack and replace it with the correct approach to generate a table to contains page
@@ -119,9 +119,96 @@ been remove which is good.
I've completed the initial book page but currently it only displays information about the
type of book page we are displaying, a new or edit book page. The home page needs to updating
such that it will contain the ability to create a new book and edit a new book. The BookPage
-instane will then be used to populate both types of requests depending on the parameters passed
-to the BookPage. The parameter "action" will determine the type of page. The paramerer "bookId"
+instance will then be used to populate both types of requests depending on the parameters passed
+to the BookPage. The parameter "action" will determine the type of page. The parameter "bookId"
will be defined a request to edit a book. This will contain the identification of the book that
we are going to be updating.
-
+I've added some code to display a subset of the fields of the a selected book to be created or
+updated. I was initially having trouble getting the submit button to function properly and
+after several attempts to get the submit process to call the assigned callback. I decided to
+update the form action attribute depending on what I expect the form to do. Using the submit
+button names and the action attribute. I was able to process a new or update action correctly.
+
+My next step was to try and create a simple update the book subtitles. I figured that a simple
+add and remove submit buttons should do the trick. Alas, I was wrong, it is true that those
+buttons causes the form to process the request but the problem is that I'm unable to clear the
+field that contained the subtitle that was added. I've tried to set the value to an empty string
+but that did not work. Maybe this is a bug with Click. Maybe, I'll send this issue to the developer
+list. I just tried to clear the value during the onRender call-back and I was able to clear the
+value for the subtitle text field. I also had the issue that my title for the page was also clearer
+and I used the same technique by updating the title field in the onRender call-back and I was able
+to preserve the correct title setting. Why does the Click framework override these values? Is it
+possible that it is caching the values and it is reusing the cached values. This could be possible
+and I will need to determine if there is a parameter that allows me to disable caching for this
+page.
+
+2010-09-22:
+===========
+
+Making changes to the book page to add the remaining fields required to be able to create or update
+a book. Replacing the automatic generating of the table field to tag specific entries within the
+book page. This is being done to mimic the same interface that the was implemented with the ZK
+framework.
+
+Added most of the same interface as in the ZK example and also included some work on integer input
+validation javascript for the number of pages input field.
+
+ 2010-09-23:
+ ===========
+
+ Completed the remaining fields required for the new/edit book windows. Working on the ability to
+ create an embedded window for the author,editor,translator,illustrator and gender windows that are
+ used to create new instances of those fields. When the open window is closed, the updates will be
+ propagated to the server and the parent window.
+
+ 2010-09-27:
+ ===========
+
+ Created the javascript code that updates the web page create author action. This code works properly
+ with FireFox 3.6 but it fails miserably for IE7. After multiple days of determining what is wrong and
+ how to work around this issue. I noticed that the element setAttribute method does not work on IE7.
+ Searching the internet confirmed that this is the case. I decided to create the form without using
+ the element objects but by creating the html string and replacing the innerHTML. That approach did
+ not work. I can not believe the IE7 doesn't even implement some basic functions. This is something
+ that I can not understand. Oh well, I going to try and use the xmlhttprequest object and see if that
+ solution will work.
+
+ After using the xmlhttprequest object with IE7, I noticed something interested with how IE7 works with
+ respect to DOM objects. It looks like IE7 does not allow you to update an element innerHTML property
+ once this has been set! While firefox allows you to update this property. To workaround this issue,
+ you need to create a new element with the same tag name as the element innerHTML property you want
+ to replace and set the new element innerHTML property. You then replace the old element with the
+ new element. This process works for IE7 using the xmlhttprequest object.
+
+ 2010-09-28:
+ ===========
+
+ Here goes another wasteful day trying to figure out how to get the javascript code work for IE and
+ firefox. I now have it generating the form for the create author in IE but if I click on the
+ create or cancel button an exception is generated. I output the generated html and it is different
+ than the one that is sent over the wire! Now that IE is partially working, firefox implementation
+ is failing all together. I should of kept the firefox version since this was working.
+
+ Well after many days of figuring out how to produce the same effect on firefox and IE7, I've finally
+ succeeded in doing just that. I was able to get the create author/editor/translator/illustrator
+ buttons to replace the current column with a form that you enter its name and last name information
+ that will be sent to the server to update the current session author/editor/translator/illustrator
+ persons and the databases person information. I will then proceed to add the newly created person
+ to the selection list. This is my next step to try and complete this current work, wish me luck.
+
+ I was able to add the required javascript code to move selected person from one list to the other.
+ My next task will be to send those updates to the server and have the server update the book
+ instance while the client javascript updates the controls.
+
+2010-09-30:
+===========
+
+Before adding the required code to send the updates to the server, I am removing javascript code that is
+not going to be used any longer.
+
+Completed the removal of dead JavaScript code and tested that all of the current functionality is
+working correctly.
+
+Added the initial work of populating the controls with the editing books properties. The current
+updates have been tested successfully.
@@ -4,8 +4,190 @@
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>$title</title>
+<script src="http://ajax.googleapis.com/ajax/libs/dojo/1.5/dojo/dojo.xd.js" type="text/javascript">
+</script>
+<script type="text/javascript" src="scripts/books.js">
+
+</script>
+ <script type="text/javascript">
+
+ var value;
+
+ function storeValue(id) {
+ var element = document.getElementById(id);
+ if (element) {
+ if (/^\d+$/.test(element.value)) {
+ // alert('setting value to ' + element.value);
+ value = element.value;
+ } else {
+ isInteger(id);
+ }
+ }
+ }
+
+ function isInteger(id) {
+ var element = document.getElementById(id);
+ if (element) {
+ if (element.value) {
+ if (!/^\d+$/.test(element.value)) {
+ // alert('reseting value to ' + value);
+ element.value = value;
+ }
+ }
+ }
+ }
+
+ function displayEvent(event,id) {
+ var element = document.getElementById(id);
+ if (element) {
+ alert(event + ' value=' + element.value);
+ } else {
+ alert(event + ' no value for id=' + id);
+ }
+ }
+
+ </script>
+<style type="css">
+#button {
+ width: 150px;
+}
+</style>
</head>
<body>
- $title
+
+<!-- Create a Table that will contain all of the required
+ inputs or this would be better to create a form -->
+$title
+
+<p />
+
+<form action="book.htm?$action">
+
+<table summary="$summary" border="1">
+ <tr>
+ <td>Title:</td>
+ <td>
+ <input style="width: 150px" type="text" name="title" value="#if($book)${book.title}#end"/>
+ </td>
+ </tr>
+ <tr>
+ <td>SubTitles:</td>
+ <td><select name="subtitles" style="width: 150px" size="2"
+ id="subtitles">
+ #if ($book)
+ #foreach ($subtitle in $book.subTitles)
+ <option>$subtitle</option>
+ #end
+ #end
+ </select></td>
+ <td>SubTitle:</td>
+ <td><input style="width: 150px" type="text" name="subtitle"/></td>
+ <td><input type="button" style="width: 150px"
+ value="Add SubTitle" onclick="add();" /><br />
+ <input type="button" style="width: 150px" value="Remove SubTitle"
+ onclick="remove();" /></td>
+ </tr>
+ <tr>
+ <td>Series:</td>
+ <td><input style="width: 150px" type="text" name="series" value="#if($book)${book.series}#end"/></td>
+ </tr>
+ <tr>
+ <td>Pages:</td>
+ <td><input style="width: 150px" type="text" value="#if($book)${book.pages}#end"
+ onfocus="storeValue('pages'); " onblur="storeValue('pages');"
+ onkeypress="storeValue('pages');" id="pages" name="pages"/>
+ </td>
+ </tr>
+ <tr>
+ <td>Authors:</td>
+ <td><select style="width: 150px" size="3" id="authors">
+ #if ($book) #foreach ($author in $book.authors)
+ <option id="$author.id">$author.fullName</option>
+ #end #end
+ </select></td>
+ <td align="center"><input type="button" value="&lt;&lt;"
+ onclick="books.add_person('authors_list','authors','author');" /> <br />
+ <input type="button" value="&gt;&gt;"
+ onclick="books.remove_person('authors','authors_list','author');" />
+ </td>
+ <td><select style="width: 150px" size="3" id="authors_list">
+ #if ($book) #foreach ($author in $book.allAuthors)
+ <option id="$author.id">$author.fullName</option>
+ #end #end
+ </select></td>
+ <td id="create_author"><input type="button" value="Create Author" onclick="books.create_author_action('create_author','authors');" />
+ </td>
+ </tr>
+ <tr>
+ <td>Editors:</td>
+ <td><select style="width: 150px" size="3" id="editors">
+ #if ($book) #foreach ($editor in $book.editors)
+ <option id="$editor.id">$editor.fullName</option>
+ #end #end
+ </select></td>
+ <td align="center"><input type="button" value="&lt;&lt;"
+ onclick="books.add_person('editors_list','editors','editor');" /> <br />
+ <input type="button" value="&gt;&gt;"
+ onclick="books.remove_person('editors','editors_list','editor');" />
+ </td>
+ <td><select style="width: 150px" size="3" id="editors_list">
+ #if ($book) #foreach ($editor in $book.allEditors)
+ <option id="$editor.id">$editor.name</option>
+ #end #end
+ </select></td>
+ <td id="create_editor"><input type="button" value="Create Editor"
+ onclick="books.create_editor_action('create_editor','editors');" /></td>
+ </tr>
+ <tr>
+ <td>Illustrators:</td>
+ <td><select style="width: 150px" size="3" id="illustrators">
+ #if ($book) #foreach ($illustrator in $book.illustrators)
+ <option id="$illustrator.id">$illustrator.fullName</option>
+ #end #end
+ </select></td>
+ <td align="center"><input type="button" value="&lt;&lt;"
+ onclick="books.add_person('illustrators_list','illustrators','illustrator');" />
+ <br />
+ <input type="button" value="&gt;&gt;"
+ onclick="books.remove_person('illustrators','illustrators_list','illustrator');" />
+ </td>
+ <td><select style="width: 150px" size="3" id="illustrators_list">
+ #if ($book) #foreach ($illustrator in $book.allIllustrators)
+ <option id="$illustrator.id">$illustrator.name</option>
+ #end #end
+ </select></td>
+ <td id="create_illustrator"><input type="button"
+ value="Create Illustrator"
+ onclick="books.create_illustrator_action('create_illustrator','illustrators');" />
+ </td>
+ </tr>
+ <tr>
+ <td>Translators:</td>
+ <td><select style="width: 150px" size="3" id="translators">
+ #if ($book) #foreach ($translator in $book.translators)
+ <option id="$translator.id">$translator.fullName</option>
+ #end #end
+ </select></td>
+ <td align="center"><input type="button" value="&lt;&lt;"
+ onclick="books.add_person('translators_list','translators','translator');" />
+ <br />
+ <input type="button" value="&gt;&gt;"
+ onclick="books.remove_person('translators','translators_list','translator');" />
+ </td>
+ <td><select style="width: 150px" size="3" id="translators_list">
+ #if ($book) #foreach ($translator in $book.allTranslators)
+ <option id="$translator.id">$translator.name</option>
+ #end #end
+ </select></td>
+ <td id="create_translator"><input type="button"
+ value="Create Translator"
+ onclick="books.create_translator_action('create_translator','translators');" />
+ </td>
+ </tr>
+</table>
+</form>
+
+$form
+
</body>
</html>
@@ -0,0 +1,24 @@
+<form id="${name}_form">
+ <table>
+ <tr>
+ <td> Name: </td>
+ <td>
+ <input type="text" id="${name}_name"></input>"
+ </td>
+ </tr>
+ <tr>
+ <td> Last Name: </td>
+ <td>
+ <input type="text" id="${name}_lname"></input>
+ </td>
+ </tr>
+ <tr>
+ <td>
+ <input type="button" value="Create" onclick="books.actions[$idx].create();"></input>
+ </td>
+ <td>
+ <input type="button" value="Cancel" onclick="books.actions[$idx].cancel();"></input>
+ </td>
+ </tr>
+ </table>
+</form>
Oops, something went wrong.

0 comments on commit 8c5972a

Please sign in to comment.