- Pharo-users - lists.pharo.org

Re: [Pharo-users] Writing a Login Dialog using Spec in 3 methods

by Ben Coman

On Fri, Feb 13, 2015 at 4:18 PM, Sven Van Caekenberghe <sven(a)stfx.eu> wrote: > > > Spec is not perfect, its main 'issue' is that the UI elements are called > models, which confuses the hell out of people (me too in the beginning). > But it does make sense, you model the UI (haha). > > I find the same. So should we really rename ComposableModel to ComposableUIModel ? (And before Spec becomes more widely used?) cheers -ben

Feb. 13, 2015

Re: [Pharo-users] Learning Spec

by Sven Van Caekenberghe

Two more: 'Building a Simple Calculator with Spec' https://ci.inria.fr/pharo-contribution/view/Books/job/PharoReadyForReviews/… 'Dynamic Spec: Parties, a dynamic example' https://ci.inria.fr/pharo-contribution/view/Books/job/PharoBookWorkInProgre… And I am sure there are more. > On 13 Feb 2015, at 10:12, Sven Van Caekenberghe <sven(a)stfx.eu> wrote: > > Hi, > > > From now on it is forbidden to complain about Spec in general, unspecific terms unless you have taken the time to learn about it. Here is a guide to documentation about Spec, most recent first. > > > There is an excellent presentation by Johan Fabry did during the last Pharo Days, 'Using Spec to Build a UI'. *MUST WATCH* (the video is not yet fully public, but soon will be, the link should work though): > > http://youtu.be/OL23s9ZUIR0?list=PL4actYd6bfnz98ngrKALwwStl3C3odEKG > > The slides are also not yet available, but soon will be (the talk is much better that the slides on their own). > > > This draft chapter 'Spec: a framework for describing user interfaces' for an upcoming book: > > https://ci.inria.fr/pharo-contribution/view/Books/job/PharoBookWorkInProgre… > > > Look in the image. > > Browse the hierarchy below AbstractWidgetModel in the category Spec-Core-Widgets in Pharo 4, look at the protocols called 'protocol' & 'protocol-events' mainly. Look for references to each class. Trace senders of methods until you arrive at examples. Study the examples, play with them, change them. > > The UI of most tools in Pharo is also implemented using Spec. Browse the hierarchy below ComposableModel to find them. (Komitter, Versionner, Critics, Metacello, the old Eye Inspectors, ..). Watch and learn. > > > The cool Spec website: > > http://spec.st > > > Read some cool articles like: > > https://medium.com/concerning-pharo/rediscovering-the-ux-of-the-legendary-h… > > See the section 'HP35CalculatorModel' for the Spec part. > > > The following papers (some older ones refer to API that has changed): > > 'Seamless Composition and Reuse of Customizable User Interfaces with Spec' > > http://rmod.lille.inria.fr/archives/papers/Ryse13a-SCICO-Spec.pdf > > 'Spec - A Framework for the Specification and Reuse of UIs and their Models' > > http://rmod.lille.inria.fr/archives/papers/Ryse12b-Spec-IWST12-Final.pdf > > 'Spec â Technical Report' > > http://rmod.lille.inria.fr/archives/reports/Ryse12a-SpecTechReport.pdf > > > Use the image to build a couple of simple UIs using Spec. You will be surprised to learn that it is not that difficult. Just go with the flow, don't try to enforce your world view on it, wait until you are further along. > > > Have fun ! > > > Sven > > > PS: Once you have done all the above, you are most welcome to help improve Spec by discussing specific, concrete issues. > > > -- > Sven Van Caekenberghe > Proudly supporting Pharo > http://pharo.org > http://association.pharo.org > http://consortium.pharo.org >

Feb. 13, 2015

Re: [Pharo-users] Seaside jQuery - Sorting a list with drag and drop and sending it back via Ajax causes OrderedCollection to turn into an Array?

by Stephan Eggermont

To see a working example of this, take a look at StoryBoard Download the 30 image from https://ci.inria.fr/pharo-contribution/job/StoryBoard/ Start it, open the seaside control panel and start a ZnZincServerAdaptor on port 8080. Open a web browser on http://localhost:8080/story, register yourself, add a project and start adding stories. They can be dragged and dropped. The actual code is in the rendering methods of SBProjectStoryColumn Stephan

Feb. 13, 2015

Re: [Pharo-users] Writing a Login Dialog using Spec in 3 methods

by Sven Van Caekenberghe

Hi Stephan, You are 100% right: I had similar code in there during my hacking but I decided to take it out to simplify things. A couple of important semantic constants are indeed missing. But it is not just that, IMHO, the LoginModel should say 'I am 2 fields heigh', the wrapping in the Dialog should add what is needed around that, because the dialog is adding stuff that the wrapped component does not know about. Also, given Spec's (unfulfilled) ambition to have different backends, the whole idea of careful layout and measuring becomes quite hard, because that should be totally abstract. Sven > On 13 Feb 2015, at 10:48, Stephan Eggermont <stephan(a)stack.nl> wrote: > > In order to not get results like > <PastedGraphic-1.png> > > the extent and width should be calculated values. > > That would change the example code to something like > > LoginModel class>>defaultSpec > <spec: #default> > ^SpecLayout composed > newColumn: [ :col | > col > newRow: [ :row | > row > add: #usernameLabel width: self labelWidth; > add: #usernameField ] > height: self inputTextHeight; > newRow: [ :row | > row > add: #passwordLabel width: self labelWidth; > add: #passwordField ] > height: self inputTextHeight ]; > yourself > > LoginModel class>>labelWidth > ^((StandardFonts defaultFont widthOfString: 'Password') max: > (StandardFonts defaultFont widthOfString: 'Username'))+12 > > Please note that there are still several places in Spec where > hardcoded values like 12 are used instead of semantic values. > This value should actually be dependent on font size. > Having the label texts twice in the code should also be avoided. > > LoginModel class>>textFieldWidth > ^(StandardFonts defaultFont widthOfString: 'longest.email(a)addressThatShould.fit')+12 > > LoginModel>>initialExtent > ^(3*12+self class labelWidth+ self class textFieldWidth) @ (5*self class buttonHeight) > > There are several calculated values missing: > width = outside border + labelWidth + label field separator+fieldWidth+outside border > height = dialog title + textInput height + separator + textInput height+ separator+button height + outside border > > Stephan

Feb. 13, 2015

Re: [Pharo-users] Seaside jQuery - Sorting a list with drag and drop and sending it back via Ajax causes OrderedCollection to turn into an Array?

by Carlo

Hi I assume that your _itemList variable is set via self model items: items. If so then it looks like it will become an array due to the callback:passengers: sent to JQAjax: (html jQuery ajax callback: [:items | self model items: items] passengers: (html jQuery this find: 'li') The implementation: callback: aBlock passengers: aQuery "Trigger the callback aBlock with the passengers of aQuery. Nodes that have no passenger are ignored." self callback: [ :value | aBlock value: (((value subStrings: ',') collect: [ :each | self renderContext callbacks passengerAt: each ]) reject: [ :each | each isNil ]) ] value: (JSStream on: JQuery functionName , '.map(' , aQuery greaseString , '.get(),function(each){return each.id}).join(",")') uses (value subStrings: ',') which will return an array. You could modify your setter accessor items: to modify the collection using asOrderedCollection if you need this...? Kind Regards Carlo On 13 Feb 2015, at 11:26 AM, Mircea S. <mircea(a)unom.ro> wrote: The code below is form the Seaside book at: http://book.seaside.st/book/web-20/jquery/enhanced-todo-application/drag-an… <http://book.seaside.st/book/web-20/jquery/enhanced-todo-application/drag-an…> ToDoListView>>renderContentOn: html self renderHeadingOn: html. html form: [(html unorderedList) id: (listId := html nextId); script: ((html jQuery new sortable) onStop: (html jQuery ajax callback: [:items | self model items: items] passengers: (html jQuery this find: 'li')); axis: 'y'); with: [self renderItemsOn: html]. (html submitButton) callback: [self add]; text: 'Add']. html render: editor My instance variable _itemList is initially OrderedCollection. As soon as I move the rows around in the page then entire list is sent back in it's new order. However, this time setItemList: receives an Array. Does this make any sense? Am I missing something?

Feb. 13, 2015

session three: a static webapplication on moose (is: smalltalk workshops (building a webserver) after code-in)

by Martin BÃ¤hr

(it probably helps to include a link :-) Excerpts from Martin BÃ¤hr's message of 2015-02-03 06:48:19 +0100: > > you can read more about the workshop and find the screencast here: > > http://societyserver.org/mbaehr/training/Using-the-FileSystem-class-in-Phar… > part two is here: > http://societyserver.org/mbaehr/training/Serving-files-through-FileSystem-i… session 3 starts from scratch, using what was learned in the first two sessions. http://societyserver.org/mbaehr/training/a-static-webapplication-hosted-on-… this session also features moose 5.0 instead of plain pharo just to see what is different. this is not really intended to explore all moose features, but just use it as i normally would use pharo to find out how it would affect the development. this series is intended to show how developing in pharo is like, i show and use features as i discover them myself. i'd appreciate some feedback on how i could take more advantage of pharo and moose features, so that i can show them off in the next session. (next time i plan to use moose 5.1 and i'll finally look at zinc-REST) greetings, martin. -- eKita - the online platform for your entire academic life -- chief engineer eKita.co pike programmer pike.lysator.liu.se caudium.net societyserver.org secretary beijinglug.org mentor fossasia.org foresight developer foresightlinux.org realss.com unix sysadmin Martin BÃ¤hr working in china http://societyserver.org/mbaehr/

Feb. 13, 2015

session three: a static webapplication on moose (is: smalltalk workshops (building a webserver) after code-in)

by Martin BÃ¤hr

Excerpts from Martin BÃ¤hr's message of 2015-02-03 06:48:19 +0100: > > you can read more about the workshop and find the screencast here: > > http://societyserver.org/mbaehr/training/Using-the-FileSystem-class-in-Phar… > part two is here: > http://societyserver.org/mbaehr/training/Serving-files-through-FileSystem-i… session 3 starts from scratch, using what was learned in the first two sessions. this session also features moose 5.0 instead of plain pharo just to see what is different. this is not really intended to explore all moose features, but just use it as i normally would use pharo to find out how it would affect the development. this series is intended to show how developing in pharo is like, i show and use features as i discover them myself. i'd appreciate some feedback on how i could take more advantage of pharo and moose features, so that i can show them off in the next session. (next time i plan to use moose 5.1 and i'll finally look at zinc-REST) greetings, martin. -- eKita - the online platform for your entire academic life -- chief engineer eKita.co pike programmer pike.lysator.liu.se caudium.net societyserver.org secretary beijinglug.org mentor fossasia.org foresight developer foresightlinux.org realss.com unix sysadmin Martin BÃ¤hr working in china http://societyserver.org/mbaehr/

Feb. 13, 2015

Re: [Pharo-users] Writing a Login Dialog using Spec in 3 methods

by Stephan Eggermont

In order to not get results like the extent and width should be calculated values. That would change the example code to something like LoginModel class>>defaultSpec <spec: #default> ^SpecLayout composed newColumn: [ :col | col newRow: [ :row | row add: #usernameLabel width: self labelWidth; add: #usernameField ] height: self inputTextHeight; newRow: [ :row | row add: #passwordLabel width: self labelWidth; add: #passwordField ] height: self inputTextHeight ]; yourself LoginModel class>>labelWidth ^((StandardFonts defaultFont widthOfString: 'Password') max: (StandardFonts defaultFont widthOfString: 'Username'))+12 Please note that there are still several places in Spec where hardcoded values like 12 are used instead of semantic values. This value should actually be dependent on font size. Having the label texts twice in the code should also be avoided. LoginModel class>>textFieldWidth ^(StandardFonts defaultFont widthOfString: 'longest.email(a)addressThatShould.fit')+12 LoginModel>>initialExtent ^(3*12+self class labelWidth+ self class textFieldWidth) @ (5*self class buttonHeight) There are several calculated values missing: width = outside border + labelWidth + label field separator+fieldWidth+outside border height = dialog title + textInput height + separator + textInput height+ separator+button height + outside border Stephan

Feb. 13, 2015

Seaside jQuery - Sorting a list with drag and drop and sending it back via Ajax causes OrderedCollection to turn into an Array?

by Mircea S.

The code below is form the Seaside book at: http://book.seaside.st/book/web-20/jquery/enhanced-todo-application/drag-an… ToDoListView>>renderContentOn: html self renderHeadingOn: html. html form: [(html unorderedList) id: (listId := html nextId); script: ((html jQuery new sortable) onStop: (html jQuery ajax callback: [:items | self model items: items] passengers: (html jQuery this find: 'li')); axis: 'y'); with: [self renderItemsOn: html]. (html submitButton) callback: [self add]; text: 'Add']. html render: editor My instance variable _itemList is initially OrderedCollection. As soon as I move the rows around in the page then entire list is sent back in it's new order. However, this time setItemList: receives an Array. Does this make any sense? Am I missing something?

Feb. 13, 2015

Re: [Pharo-users] Changes file size

by Guillermo Polito

El Wed Feb 11 2015 at 4:08:36 PM, Esteban A. Maringolo <emaringolo(a)gmail.com> escribiÃ³: > 2015-02-11 10:02 GMT-03:00 Sven Van Caekenberghe <sven(a)stfx.eu>: > >> ps: As said in another thread, Torsten's version (descendant of mine) > >> didn't seem to have this issue. > > > Yes, we are making (some) progress. > > Maybe we should promote the latest version to #stable ? > > I think we should, but there is something with that too. There is only > one version in the MetaRepo whilst the rest of Metacello configs are > in the DBXTalk/Configurations repo. > > Well, the configurations should inhabit close to their projects. MetaRepo is only to publish the configurations. So the usual way to release should be: - commit the configuration to the repo of its project - then copy this configuration to metarepo Guille

Feb. 13, 2015