Hi,<div>I've made a wrapper for the jQuery plug-in epiClock, but I get an error when I try to upload the code. Do I need to get access rights to the repo?</div><div><br><br><div class="gmail_quote">On Mon, Nov 2, 2009 at 13:44, Torsten Bergmann <span dir="ltr"><<a href="mailto:astares@gmx.de">astares@gmx.de</a>></span> wrote:<br>
<blockquote class="gmail_quote" style="margin:0 0 0 .8ex;border-left:1px #ccc solid;padding-left:1ex;">>Do I wait to see how you structured the whole, before committing any<br>
>changes?<br>
<br>
Hi John,<br>
<br>
the repository now has some wrappers extracted. So you can<br>
take them as examples.<br>
<br>
Here is also a short guide on the loading/coding rules:<br>
<br>
<br>
-------------------------------------------------------------------------<br>
JQuery Widgetbox seperates production code ("CORE") from developer code "DEV".<br>
To use a widget you only need the core packages, if you want to extend a widget wrapper<br>
you should also load the developer packages.<br>
<br>
<br>
Point your monticello browser to:<br>
<br>
<a href="http://www.squeaksource.com/JQueryWidgetBox" target="_blank">http://www.squeaksource.com/JQueryWidgetBox</a><br>
<br>
<br>
1. Load JQWidgetBox-Core<br>
========================<br>
This is a core package currently only providing the "JQWidgetBoxLibrary". This class is<br>
a subclass of WAFileLibrary and is extended by wrapper packages with the appropriate<br>
resources like the javascript code, stylesheets, images and other resources (see below).<br>
<br>
2. Load the widget you need<br>
===========================<br>
You can load one of the provided packages "JQWidgetBox-XXX-Core" widget packages,<br>
where XXX is the name of the widget.<br>
<br>
<br>
3. Optional - Load "JQWidgetBox-Dev" for test and example support<br>
=================================================================<br>
This package provides basic support for tests and examples common to all widget<br>
dev packages.<br>
<br>
<br>
4. Optional - Load the widgets example and test code<br>
====================================================<br>
After loading the support package (3) you will be able to load all the<br>
"JQWidgetBox-XXX-Dev" packages. If you load one of these manually you should evaluate<br>
<br>
JQWidgetExample initialize<br>
<br>
in a workspace to register all loaded examples dynamically before pointing your<br>
browser to <a href="http://localhost:8080/browse/jquery-widgets" target="_blank">http://localhost:8080/browse/jquery-widgets</a><br>
<br>
Check out each widget and implementation in Smalltalk to find out how it is done.<br>
<br>
<br>
<br>
<br>
5. Short Guide on how to create an own wrapper<br>
==============================================<br>
Lets assume you have found a jquery widget on the internet called "MyWidget" and<br>
it is implemented in a script "jq-mywidget-min.js" together with a "jq-mywidget.js".<br>
<br>
The first one is the minimal version which is typically used in production since it<br>
is reduced in size while the second JavaScript - the standard script includes comments and<br>
preserves formatting. This one is typically only used for debugging and development<br>
purposes on the client side.<br>
<br>
Since we just want to wrap a working jquery plugin in Smalltalk we will first concentrate<br>
on the stripped down version "jq-mywidget-min.js":<br>
<br>
<br>
The steps:<br>
<br>
THE CORE PACKAGE<br>
----------------<br>
a) Add a new package (class category) called "JQWidgetBox-MyWidget-Core" to your Smalltalk<br>
system<br>
<br>
b) within this package/category create a new subclass of the class "JQWidget"<br>
which is provided with Seaside:<br>
<br>
JQWidget subclass: #JQMyWidget<br>
instanceVariableNames: ''<br>
classVariableNames: ''<br>
poolDictionaries: ''<br>
category: 'JQWidgetBox-MyWidget-Core'<br>
<br>
Add a class comment to this new class including the URL where you've found<br>
the widget. This helps other to find it easily later or extend the wrapper if there is<br>
a new version.<br>
<br>
c) Point your browser to "<a href="http://localhost:8080/config" target="_blank">http://localhost:8080/config</a>", click on<br>
"files" and select "JQWidgetBoxDeploymentLibrary". Now click on configure.<br>
<br>
Here you can add files to the prefefined library class via upload.<br>
Now upload the script "jq-mywidget-min.js" to the class.<br>
<br>
By default Seaside will now create a method #jqmywidgetminJs on<br>
the class JQWidgetBoxDeploymentLibrary in the "uploaded" method category.<br>
<br>
To have it packaged with our widget package we have to recategorize<br>
this method into "*jqwidgetbox-mywidget-core"<br>
<br>
d) Now implement an extension method on the instance side of the class<br>
"JQueryInstance" returning your widget wrapper class.<br>
<br>
mywidget<br>
"A jquery widget ..."<br>
<br>
^self create: JQMyWidget<br>
<br>
<br>
Since "JQueryInstance" is an existing class and we want to provide<br>
this method as an extension we have to put it into a method category<br>
"*jqwidgetbox-mywidget-core"<br>
<br>
<br>
e) Now implement the method #method on the instance side of JQMyWidget returning the<br>
jquery javascript selector that is used by the plugin:<br>
<br>
method<br>
^'mywidget'<br>
<br>
The preferred protocol for this method is "accessing".<br>
<br>
f) You can now implement specific methods to wrap the widgets options and events.<br>
Have a look at the other examples to get started.<br>
<br>
g) Open the Monticello browser and add a package "JQWidgetBox-MyWidget-Core".<br>
<br>
<br>
NOTE:<br>
Before releasing the new package "JQWidgetBox-MyWidget-Core" make sure it includes<br>
anything that is required: the implementation class (here JQMyWidget) and the<br>
two extensions methods on JQueryInstance and JQWidgetBoxDeploymentLibrary.<br>
<br>
You can verify this by clicking on "Browse" in the Monticello Browser when the new<br>
package is selected.<br>
<br>
<br>
<br>
THE DEV PACKAGE<br>
----------------<br>
Why an own package? The answer is simple: to seperate the production<br>
code from the tests and examples.<br>
To provide tests and examples we now have to load the package<br>
"JQWidgetBox-Dev" (see step 3 above) with special support code.<br>
<br>
h) Provide a test<br>
<br>
Lets create a package/class category "JQWidgetBox-MyWidget-Dev".<br>
<br>
Within that create a subcategory "JQWidgetBox-MyWidget-Dev-Tests"<br>
with an own subclass of "JQWidgetBoxWidgetTest". Here we implement the<br>
SUnit test for the widget:<br>
<br>
JQWidgetBoxWidgetTest subclass: #JQMyWidgetTest<br>
instanceVariableNames: ''<br>
classVariableNames: ''<br>
poolDictionaries: ''<br>
category: 'JQWidgetBox-MyWidget-Dev-Tests'<br>
<br>
Have a look how other packages implement to test to get started.<br>
Note that these kind of tests are for the smalltalk wrapper only,<br>
and is not a replacement for a functional test within the webbrowser.<br>
<br>
<br>
i) Provide an example<br>
<br>
To provide an example for the widget We also create a subcategory<br>
"JQWidgetBox-MyWidget-Dev-Example" with an own subclass of "JQWidgetExample":<br>
<br>
<br>
JQWidgetExample subclass: #JQMyWidgetExample<br>
instanceVariableNames: ''<br>
classVariableNames: ''<br>
poolDictionaries: ''<br>
category: 'JQWidgetBox-MyWidget-Dev-Example'<br>
<br>
We then implement #description and #shortName on the class side.<br>
The last one is used to register the example in the widget box example<br>
gallery. Just evaluate<br>
<br>
"JQWidgetExample initialize"<br>
<br>
to reregister and point your browser to <a href="http://localhost:8080/browse/jquery-widgets" target="_blank">http://localhost:8080/browse/jquery-widgets</a><br>
<br>
To include the script into your example just implement:<br>
<br>
updateRoot: anHtmlRoot<br>
super updateRoot: anHtmlRoot.<br>
anHtmlRoot javascript url: self library / #jqmywidgetminJs<br>
<br>
Now you are ready to implement the usual #renderContentOn: method to<br>
implement the example.<br>
<br>
j) Note that it is also good style to also upload the "jq-mywidget.js" (the one<br>
that is not stripped/packed) and package it with the tests and examples.<br>
<br>
This allows for easy client side javascript debugging later if the jquery<br>
widget does not work in a specifc browser/environment.<br>
<br>
You can put it as extension method on the class "JQWidgetBoxDevelopmentLibrary"<br>
(which is similar to JQWidgetBoxDeploymentLibrary, but intended for development)<br>
by using the "*jqwidgetbox-mywidget-dev" category.<br>
<br>
<br>
j) Make sure your tests are green and the example is working and all methods are<br>
correctly packaged. Now you are ready to upload your new packages<br>
<br>
"JQWidgetBox-MyWidget-Core" (the production code)<br>
"JQWidgetBox-MyWidget-Dev" (the example and tests)<br>
<br>
to <a href="http://www.squeaksource.com/JQueryWidgetBox" target="_blank">http://www.squeaksource.com/JQueryWidgetBox</a><br>
<font color="#888888">--<br>
GRATIS für alle GMX-Mitglieder: Die maxdome Movie-FLAT!<br>
Jetzt freischalten unter <a href="http://portal.gmx.net/de/go/maxdome01" target="_blank">http://portal.gmx.net/de/go/maxdome01</a><br>
_______________________________________________<br>
seaside mailing list<br>
<a href="mailto:seaside@lists.squeakfoundation.org">seaside@lists.squeakfoundation.org</a><br>
<a href="http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside" target="_blank">http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside</a><br>
</font></blockquote></div><br><br clear="all"><br>-- <br>-JT<br><br><br>
</div>