Smalltalk › Frameworks & Tools › Seaside › Seaside General

new release of Seaside integration for JQueryMobile

‹ Previous Topic Next Topic ›
 
classic Classic list List threaded Threaded
♦
♦
 11 messages Options
Nick
Reply | Threaded
Open this post in threaded view
♦
♦
|

new release of Seaside integration for JQueryMobile

Nick
Hi,

I've released a new version of the Seaside integration for jQueryMobile - http://jquerymobile.seasidehosting.st/

The release is available for Pharo and VASt

The new release incorporates support for events and scripting as well as improves the documentation.

Now for the brave souls who tried out the initial release, thanks for the feedback, and I'm afraid to say I've made a few changes to the API.  Basically the work I've incorporated to enable scripting meant that I had to generate template markup for pages and I realised that it meant that there was really no need for decorators. Hopefully the end result is simpler code.

If I've done my work correctly. You should be able to take your Seaside components, register them with:

 JQMAdmin>>#register:asApplicationAt:

and your components should be JQueryMobile-ified - Of course you'll need to rework the UI and interaction - the point is you can use your existing knowledge to target a new platform (html generation, form submission, attaching event handlers etc)

Some useful links:
mobile specific events (e.g. touch events, rotation etc): http://jquerymobile.seasidehosting.st/seaside/javascript/jquery-mobile/Events

What's new
Updated from RC1 to RC2 JQueryMobile.
Scripting and Event support
Fixes to issues that have arisen since the initial release.
Improved documentation
RESTful functional test suite.
Reduced flicker between page transitions
Session based element id generation.

Cheers

Nick

_______________________________________________
seaside mailing list
[hidden email]
http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside
marten
Reply | Threaded
Open this post in threaded view
♦
♦
|

Re: new release of Seaside integration for JQueryMobile

marten
Is something possible like:


html heading
  level4;
  onSwipeLeft: [ .... ]


????

_______________________________________________
seaside mailing list
[hidden email]
http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside
marten
Reply | Threaded
Open this post in threaded view
♦
♦
|

Re: new release of Seaside integration for JQueryMobile

marten
Ok, I have found a way to do it - but actually how do I force a refresh
of my screen ...

| ajaxFunction |
       
ajaxFunction := (html jQuery ajax
   dataType: 'script';
   callback: [ :v | ... action in smalltalk ... ]
   value: (Array with: (JSStream on: 'arguments[0]'));
   async: false) asFunctionNamed: 'swipeLeft' arguments: #(e).
                                                                                                               
html
   script: ajaxFunction.

html image
   width: '100%' ;
   onSwipeLeft: 'swipeLeft("swipeLeft")';
   url: link].

I get Smalltalk called - but the screen content is NOT refreshed !

Marten

Am 27.10.2011 07:49, schrieb Marten Feldtmann:

> Is something possible like:
>
>
> html heading
> level4;
> onSwipeLeft: [ .... ]
>
>
> ????
>
> _______________________________________________
> seaside mailing list
> [hidden email]
> http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside
_______________________________________________
seaside mailing list
[hidden email]
http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside
marten
Reply | Threaded
Open this post in threaded view
♦
♦
|

Re: new release of Seaside integration for JQueryMobile

marten
And what can one do, if e.g. MobileFirefox uses the swipe events for
their own interface (GUI)

???????


Marten
_______________________________________________
seaside mailing list
[hidden email]
http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside
marten
Reply | Threaded
Open this post in threaded view
♦
♦
|

Re: new release of Seaside integration for JQueryMobile

marten
In reply to this post by marten
Hmm, the solution (posted earlier) is not working the way I
hope.Therefore my initial question remains:

Is something possible like:


html heading
  level4;
  onSwipeLeft: [ .... ]


_______________________________________________
seaside mailing list
[hidden email]
http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside
Nick
Reply | Threaded
Open this post in threaded view
♦
♦
|

Re: new release of Seaside integration for JQueryMobile

Nick
In reply to this post by marten
Hi Marten,

Ok, I have found a way to do it - but actually how do I force a refresh of my screen ...

| ajaxFunction |
       
ajaxFunction := (html jQuery ajax
 dataType: 'script';
 callback: [ :v | ... action in smalltalk ... ]
 value: (Array with: (JSStream on: 'arguments[0]'));
 async: false) asFunctionNamed: 'swipeLeft' arguments: #(e).
                                                                                                               
html
 script: ajaxFunction.

html image
 width: '100%' ;
 onSwipeLeft: 'swipeLeft("swipeLeft")';
 url: link].

I get Smalltalk called - but the screen content is NOT refreshed !

Marten

Am 27.10.2011 07:49, schrieb Marten Feldtmann:
Is something possible like:


html heading
level4;
onSwipeLeft: [ .... ]


I released another version last night (Pharo and VASt), which fixes some bugs we found associated with event handling, so it would be worthwhile downloading that version.

Have you seen the event handling samples: 

(click on: Element scoped events->Touch events)

I've also added some examples of using Ajax to update:
The example titled "check box version 2" most closely resembles your use-case.

In your specific example you could try something like:

html heading
   level4;
   onSwipeLeft: 
      (html jQuery ajax 
            callback: [ :val | "val will contain 'swipeLeft' ] 
            value: 'swipeLeft'; 
            script: [ :s | s << (s jQuery id: idOfElementToUpdate) text: 'updated text' ]).

IIUC you missed off a call to #script: which all actually perform the update.

Hope this helps

Nick



_______________________________________________
seaside mailing list
[hidden email]
http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside
Nick
Reply | Threaded
Open this post in threaded view
♦
♦
|

Re: new release of Seaside integration for JQueryMobile

Nick
I've just released a new version of jQueryMobile on Pharo and VASt

Some of the improvements include:

Improved "show code" - especially when trying to understand event handling.
Improved page transtions on the iPhone, the address bar on-longer drops-down during page navigation.
Added icons, splash screen and "bookmark bubble" to support saving the app to the home screen on an iPhone

See also:

_______________________________________________
seaside mailing list
[hidden email]
http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside
marten
Reply | Threaded
Open this post in threaded view
♦
♦
|

Re: new release of Seaside integration for JQueryMobile

marten
Hello Nick,

there seems to be problems when updating buttons (with theme styles)
during an ajax callback ...

renderBaseContentOn: html

| anID |
       
anID := html nextId.
html div
   class: 'ui-body';
   class: 'ui-body-',self themeName;
   with: [
     html div
       id: anID ;
       onTap:
         (html jQuery ajax
             callback: [ :val | ..... ];
             script: [ :s |
               s << ((s jQuery id: anID ) load
                    html: [ :ajax |
                       self renderForwardButtonOn: ajax])]
          );
        with: [ self renderForwardButtonOn: html ]
   ].
               

and:

renderForwardButtonOn: html
   html anchor jqmButton
     with: 'Next Stop'


When this code is executed for the first time, all looks pretty nice.

But when updating via ajax most of the styles are lost - and the stuff
is looking pretty ugly.

Any ideas if this bug is related to mobile ?

Marten
_______________________________________________
seaside mailing list
[hidden email]
http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside
Nick
Reply | Threaded
Open this post in threaded view
♦
♦
|

Re: new release of Seaside integration for JQueryMobile

Nick
Hi Marten,

there seems to be problems when updating buttons (with theme styles) during an ajax callback ...

I think the issue is that jQueryMobile only interprets styles during page load. Your post reminded me that I hadn't integrated jQueryMobile widgets which allow dynamically added elements to be styled.

I've completed that work now:


The code is in the Pharo repository, and I'll port to VASt later this morning.

Hope this helps

Nick


_______________________________________________
seaside mailing list
[hidden email]
http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside
Nick
Reply | Threaded
Open this post in threaded view
♦
♦
|

Re: new release of Seaside integration for JQueryMobile

Nick

The code is in the Pharo repository, and I'll port to VASt later this morning.

Well it's still morning here and the code is the VASt Goodies. 

_______________________________________________
seaside mailing list
[hidden email]
http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside
Nick
Reply | Threaded
Open this post in threaded view
♦
♦
|

Re: new release of Seaside integration for JQueryMobile

Nick
In reply to this post by Nick

there seems to be problems when updating buttons (with theme styles) during an ajax callback ...

I think the issue is that jQueryMobile only interprets styles during page load. Your post reminded me that I hadn't integrated jQueryMobile widgets which allow dynamically added elements to be styled.


For future reference - we've just learnt that you can make jQueryMobile style multiple elements at once, by triggering a "create" event on the element's container. I've added an example:


_______________________________________________
seaside mailing list
[hidden email]
http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside
Free forum by Nabble Edit this page