Styling a Pharo UI application

Previous Topic Next Topic
 
classic Classic list List threaded Threaded
24 messages Options
12
Reply | Threaded
Open this post in threaded view
|

Styling a Pharo UI application

Tommaso DS
Hello everybody,

I have a question about the UI toolkits available for Pharo. I already
asked something about this on Slack, but since I saw that there was a
recent discussion about UI in the mailing list, I think this is a better
place to discuss the matter.

I am writing an application for Pharo where I am displaying some
structured text. The structure is similar to the one of a web page: A
main title with a list of paragraphs, where each paragraph has a title
and a description.

What I would like to do is to format the text to present the contents in
a meaningful way: For example, I would like a bigger font for the title,
and change the background of the text, to give a better separation
between the paragraphs. Basically I would like to manipulate and display
my contents as I would do in a web page.

To write UI widgets I usually use Spec, but I found that going beyond
easy formatting (e.g. bold text and emphasis) is harder than I thought.
I saw there were discussion about the styling text and the role of the
theme class, using TextStyle but that part is not really documented.

So far, the easiest way to solve my problem seems to be to use Morphic
to display the contents as I want it, and then include my widget in my
spec application.

Do you have any suggestions about how to do that? I think that styling
the UI widgets is an important part of the application development, but
it is really hard to find documentation about this.

Thanks, have a nice day!
Tommaso


Reply | Threaded
Open this post in threaded view
|

Re: Styling a Pharo UI application

kilon.alios
Documentation is always a problem.

I dont use Spec because I dont like it , but I use Morphic for my project ChronosManager. I do some "styling" for example use different fonts for different labels , different sizes , I format strings to time stamps and even offer easy ways for user to change them without modifying the whole string.

You can do a lot with Morphic, though I have not played with layout stuff since this GUI is static and image (PNGs) based but yeah Morphic can do that as well. My project is on Catalog browser and it has class comments , dont know if this exactly what you want but it may be a good start.

Obviously there are a ton of things you can do with a web page that Morphic will not offer you out of the box.

You can use Html as the front end / GUI and keep Pharo as the backend, thats how most web apps made with Pharo work. This you get the full power of Html/JS and Pharo. Seaside has classes that map html to pharo methods so you dont have to write html and js, and also I remember a pharo library dealing with CSS.

Another option is to use a GUI API like QT , I have tried this with my python bridge and it works at least on a very basic level, again similar recipe to the above solution.

But yeah if you are not too demanding I think Morphic will serve you well. Personally I only like Morphic , its the only GUI API that does not kill my inner child.

On Wed, Jun 22, 2016 at 5:44 PM Tommaso Dal Sasso <[hidden email]> wrote:
Hello everybody,

I have a question about the UI toolkits available for Pharo. I already
asked something about this on Slack, but since I saw that there was a
recent discussion about UI in the mailing list, I think this is a better
place to discuss the matter.

I am writing an application for Pharo where I am displaying some
structured text. The structure is similar to the one of a web page: A
main title with a list of paragraphs, where each paragraph has a title
and a description.

What I would like to do is to format the text to present the contents in
a meaningful way: For example, I would like a bigger font for the title,
and change the background of the text, to give a better separation
between the paragraphs. Basically I would like to manipulate and display
my contents as I would do in a web page.

To write UI widgets I usually use Spec, but I found that going beyond
easy formatting (e.g. bold text and emphasis) is harder than I thought.
I saw there were discussion about the styling text and the role of the
theme class, using TextStyle but that part is not really documented.

So far, the easiest way to solve my problem seems to be to use Morphic
to display the contents as I want it, and then include my widget in my
spec application.

Do you have any suggestions about how to do that? I think that styling
the UI widgets is an important part of the application development, but
it is really hard to find documentation about this.

Thanks, have a nice day!
Tommaso


Reply | Threaded
Open this post in threaded view
|

Re: Styling a Pharo UI application

stepharo
In reply to this post by Tommaso DS
For your information Glenn has a complete CSS support for widgets.

But this is not yet ready.


Stef


Le 22/6/16 à 16:43, Tommaso Dal Sasso a écrit :

> Hello everybody,
>
> I have a question about the UI toolkits available for Pharo. I already
> asked something about this on Slack, but since I saw that there was a
> recent discussion about UI in the mailing list, I think this is a
> better place to discuss the matter.
>
> I am writing an application for Pharo where I am displaying some
> structured text. The structure is similar to the one of a web page: A
> main title with a list of paragraphs, where each paragraph has a title
> and a description.
>
> What I would like to do is to format the text to present the contents
> in a meaningful way: For example, I would like a bigger font for the
> title, and change the background of the text, to give a better
> separation between the paragraphs. Basically I would like to
> manipulate and display my contents as I would do in a web page.
>
> To write UI widgets I usually use Spec, but I found that going beyond
> easy formatting (e.g. bold text and emphasis) is harder than I
> thought. I saw there were discussion about the styling text and the
> role of the theme class, using TextStyle but that part is not really
> documented.
>
> So far, the easiest way to solve my problem seems to be to use Morphic
> to display the contents as I want it, and then include my widget in my
> spec application.
>
> Do you have any suggestions about how to do that? I think that styling
> the UI widgets is an important part of the application development,
> but it is really hard to find documentation about this.
>
> Thanks, have a nice day!
> Tommaso
>
>
>


Reply | Threaded
Open this post in threaded view
|

Re: Styling a Pharo UI application

Tommaso DS
In reply to this post by kilon.alios

Personally I don't dislike the Spec approach, but the API still looks not expressive enough for doing things beyond the standard.

I am deepening my knowledge of Morphic now, thanks for your answer!

Tommaso


On 22/06/16 17:11, Dimitris Chloupis wrote:
Documentation is always a problem.

I dont use Spec because I dont like it , but I use Morphic for my project ChronosManager. I do some "styling" for example use different fonts for different labels , different sizes , I format strings to time stamps and even offer easy ways for user to change them without modifying the whole string.

You can do a lot with Morphic, though I have not played with layout stuff since this GUI is static and image (PNGs) based but yeah Morphic can do that as well. My project is on Catalog browser and it has class comments , dont know if this exactly what you want but it may be a good start.

Obviously there are a ton of things you can do with a web page that Morphic will not offer you out of the box.

You can use Html as the front end / GUI and keep Pharo as the backend, thats how most web apps made with Pharo work. This you get the full power of Html/JS and Pharo. Seaside has classes that map html to pharo methods so you dont have to write html and js, and also I remember a pharo library dealing with CSS.

Another option is to use a GUI API like QT , I have tried this with my python bridge and it works at least on a very basic level, again similar recipe to the above solution.

But yeah if you are not too demanding I think Morphic will serve you well. Personally I only like Morphic , its the only GUI API that does not kill my inner child.

On Wed, Jun 22, 2016 at 5:44 PM Tommaso Dal Sasso <[hidden email]> wrote:
Hello everybody,

I have a question about the UI toolkits available for Pharo. I already
asked something about this on Slack, but since I saw that there was a
recent discussion about UI in the mailing list, I think this is a better
place to discuss the matter.

I am writing an application for Pharo where I am displaying some
structured text. The structure is similar to the one of a web page: A
main title with a list of paragraphs, where each paragraph has a title
and a description.

What I would like to do is to format the text to present the contents in
a meaningful way: For example, I would like a bigger font for the title,
and change the background of the text, to give a better separation
between the paragraphs. Basically I would like to manipulate and display
my contents as I would do in a web page.

To write UI widgets I usually use Spec, but I found that going beyond
easy formatting (e.g. bold text and emphasis) is harder than I thought.
I saw there were discussion about the styling text and the role of the
theme class, using TextStyle but that part is not really documented.

So far, the easiest way to solve my problem seems to be to use Morphic
to display the contents as I want it, and then include my widget in my
spec application.

Do you have any suggestions about how to do that? I think that styling
the UI widgets is an important part of the application development, but
it is really hard to find documentation about this.

Thanks, have a nice day!
Tommaso



Reply | Threaded
Open this post in threaded view
|

Re: Styling a Pharo UI application

kilon.alios
In my case is just personal preference none the less Spec has ways to wrap morphs to Spec widgets so you should be able to build Spec widgets using Morphic for more flexibility. You dont have to decide to use Spec or Morphic, you can use both. Last time I checked Spec came with examples on how to do this and I think Spec docs also mention this.

Also I think Athens is very good at rendering text (because its wraps around the Cairo library)  , so maybe you can take advantage of that though I suspect Bloc may be even better choice in this case because it is based on Athens and it is fully compatible with Morphic.

There is also a text widget that is being build that is much more flexible with handling text

https://vimeo.com/67752734

Be advised though that both Bloc and TxText are far from finished

On Fri, Jun 24, 2016 at 1:28 AM Tommaso Dal Sasso <[hidden email]> wrote:

Personally I don't dislike the Spec approach, but the API still looks not expressive enough for doing things beyond the standard.

I am deepening my knowledge of Morphic now, thanks for your answer!

Tommaso



On 22/06/16 17:11, Dimitris Chloupis wrote:
Documentation is always a problem.

I dont use Spec because I dont like it , but I use Morphic for my project ChronosManager. I do some "styling" for example use different fonts for different labels , different sizes , I format strings to time stamps and even offer easy ways for user to change them without modifying the whole string.

You can do a lot with Morphic, though I have not played with layout stuff since this GUI is static and image (PNGs) based but yeah Morphic can do that as well. My project is on Catalog browser and it has class comments , dont know if this exactly what you want but it may be a good start.

Obviously there are a ton of things you can do with a web page that Morphic will not offer you out of the box.

You can use Html as the front end / GUI and keep Pharo as the backend, thats how most web apps made with Pharo work. This you get the full power of Html/JS and Pharo. Seaside has classes that map html to pharo methods so you dont have to write html and js, and also I remember a pharo library dealing with CSS.

Another option is to use a GUI API like QT , I have tried this with my python bridge and it works at least on a very basic level, again similar recipe to the above solution.

But yeah if you are not too demanding I think Morphic will serve you well. Personally I only like Morphic , its the only GUI API that does not kill my inner child.

On Wed, Jun 22, 2016 at 5:44 PM Tommaso Dal Sasso <[hidden email]> wrote:
Hello everybody,

I have a question about the UI toolkits available for Pharo. I already
asked something about this on Slack, but since I saw that there was a
recent discussion about UI in the mailing list, I think this is a better
place to discuss the matter.

I am writing an application for Pharo where I am displaying some
structured text. The structure is similar to the one of a web page: A
main title with a list of paragraphs, where each paragraph has a title
and a description.

What I would like to do is to format the text to present the contents in
a meaningful way: For example, I would like a bigger font for the title,
and change the background of the text, to give a better separation
between the paragraphs. Basically I would like to manipulate and display
my contents as I would do in a web page.

To write UI widgets I usually use Spec, but I found that going beyond
easy formatting (e.g. bold text and emphasis) is harder than I thought.
I saw there were discussion about the styling text and the role of the
theme class, using TextStyle but that part is not really documented.

So far, the easiest way to solve my problem seems to be to use Morphic
to display the contents as I want it, and then include my widget in my
spec application.

Do you have any suggestions about how to do that? I think that styling
the UI widgets is an important part of the application development, but
it is really hard to find documentation about this.

Thanks, have a nice day!
Tommaso



Reply | Threaded
Open this post in threaded view
|

Re: Styling a Pharo UI application

Uko2
It’s kind of a pity that to make something sexy we still have to use Morphic… Hopefully this will change with Bloc & Bric 

On 24 Jun 2016, at 10:25, Dimitris Chloupis <[hidden email]> wrote:

In my case is just personal preference none the less Spec has ways to wrap morphs to Spec widgets so you should be able to build Spec widgets using Morphic for more flexibility. You dont have to decide to use Spec or Morphic, you can use both. Last time I checked Spec came with examples on how to do this and I think Spec docs also mention this.

Also I think Athens is very good at rendering text (because its wraps around the Cairo library)  , so maybe you can take advantage of that though I suspect Bloc may be even better choice in this case because it is based on Athens and it is fully compatible with Morphic.

There is also a text widget that is being build that is much more flexible with handling text

https://vimeo.com/67752734

Be advised though that both Bloc and TxText are far from finished

On Fri, Jun 24, 2016 at 1:28 AM Tommaso Dal Sasso <[hidden email]> wrote:

Personally I don't dislike the Spec approach, but the API still looks not expressive enough for doing things beyond the standard.

I am deepening my knowledge of Morphic now, thanks for your answer!

Tommaso



On 22/06/16 17:11, Dimitris Chloupis wrote:
Documentation is always a problem.

I dont use Spec because I dont like it , but I use Morphic for my project ChronosManager. I do some "styling" for example use different fonts for different labels , different sizes , I format strings to time stamps and even offer easy ways for user to change them without modifying the whole string.

You can do a lot with Morphic, though I have not played with layout stuff since this GUI is static and image (PNGs) based but yeah Morphic can do that as well. My project is on Catalog browser and it has class comments , dont know if this exactly what you want but it may be a good start.

Obviously there are a ton of things you can do with a web page that Morphic will not offer you out of the box.

You can use Html as the front end / GUI and keep Pharo as the backend, thats how most web apps made with Pharo work. This you get the full power of Html/JS and Pharo. Seaside has classes that map html to pharo methods so you dont have to write html and js, and also I remember a pharo library dealing with CSS.

Another option is to use a GUI API like QT , I have tried this with my python bridge and it works at least on a very basic level, again similar recipe to the above solution.

But yeah if you are not too demanding I think Morphic will serve you well. Personally I only like Morphic , its the only GUI API that does not kill my inner child.

On Wed, Jun 22, 2016 at 5:44 PM Tommaso Dal Sasso <[hidden email]> wrote:
Hello everybody,

I have a question about the UI toolkits available for Pharo. I already
asked something about this on Slack, but since I saw that there was a
recent discussion about UI in the mailing list, I think this is a better
place to discuss the matter.

I am writing an application for Pharo where I am displaying some
structured text. The structure is similar to the one of a web page: A
main title with a list of paragraphs, where each paragraph has a title
and a description.

What I would like to do is to format the text to present the contents in
a meaningful way: For example, I would like a bigger font for the title,
and change the background of the text, to give a better separation
between the paragraphs. Basically I would like to manipulate and display
my contents as I would do in a web page.

To write UI widgets I usually use Spec, but I found that going beyond
easy formatting (e.g. bold text and emphasis) is harder than I thought.
I saw there were discussion about the styling text and the role of the
theme class, using TextStyle but that part is not really documented.

So far, the easiest way to solve my problem seems to be to use Morphic
to display the contents as I want it, and then include my widget in my
spec application.

Do you have any suggestions about how to do that? I think that styling
the UI widgets is an important part of the application development, but
it is really hard to find documentation about this.

Thanks, have a nice day!
Tommaso




Reply | Threaded
Open this post in threaded view
|

Re: Styling a Pharo UI application

kilon.alios
I dont see what Bloc and Bric have to do with sexiness. The only thing I see is Athens which Morphic already has access to. To be truly custom GUI friendly the API needs to at least offer some GPU acceleration and access to a myriad of graphical effects. I have not seen anything in Bloc and Bric that would make me abandon Morphic.

Actually the one thing that I am waiting for with some excitement is SDL support which would make things easier for someone like that loves to create custom GUIs.



On Fri, Jun 24, 2016 at 11:51 AM Yuriy Tymchuk <[hidden email]> wrote:
It’s kind of a pity that to make something sexy we still have to use Morphic… Hopefully this will change with Bloc & Bric 

On 24 Jun 2016, at 10:25, Dimitris Chloupis <[hidden email]> wrote:

In my case is just personal preference none the less Spec has ways to wrap morphs to Spec widgets so you should be able to build Spec widgets using Morphic for more flexibility. You dont have to decide to use Spec or Morphic, you can use both. Last time I checked Spec came with examples on how to do this and I think Spec docs also mention this.

Also I think Athens is very good at rendering text (because its wraps around the Cairo library)  , so maybe you can take advantage of that though I suspect Bloc may be even better choice in this case because it is based on Athens and it is fully compatible with Morphic.

There is also a text widget that is being build that is much more flexible with handling text

https://vimeo.com/67752734

Be advised though that both Bloc and TxText are far from finished

On Fri, Jun 24, 2016 at 1:28 AM Tommaso Dal Sasso <[hidden email]> wrote:

Personally I don't dislike the Spec approach, but the API still looks not expressive enough for doing things beyond the standard.

I am deepening my knowledge of Morphic now, thanks for your answer!

Tommaso



On 22/06/16 17:11, Dimitris Chloupis wrote:
Documentation is always a problem.

I dont use Spec because I dont like it , but I use Morphic for my project ChronosManager. I do some "styling" for example use different fonts for different labels , different sizes , I format strings to time stamps and even offer easy ways for user to change them without modifying the whole string.

You can do a lot with Morphic, though I have not played with layout stuff since this GUI is static and image (PNGs) based but yeah Morphic can do that as well. My project is on Catalog browser and it has class comments , dont know if this exactly what you want but it may be a good start.

Obviously there are a ton of things you can do with a web page that Morphic will not offer you out of the box.

You can use Html as the front end / GUI and keep Pharo as the backend, thats how most web apps made with Pharo work. This you get the full power of Html/JS and Pharo. Seaside has classes that map html to pharo methods so you dont have to write html and js, and also I remember a pharo library dealing with CSS.

Another option is to use a GUI API like QT , I have tried this with my python bridge and it works at least on a very basic level, again similar recipe to the above solution.

But yeah if you are not too demanding I think Morphic will serve you well. Personally I only like Morphic , its the only GUI API that does not kill my inner child.

On Wed, Jun 22, 2016 at 5:44 PM Tommaso Dal Sasso <[hidden email]> wrote:
Hello everybody,

I have a question about the UI toolkits available for Pharo. I already
asked something about this on Slack, but since I saw that there was a
recent discussion about UI in the mailing list, I think this is a better
place to discuss the matter.

I am writing an application for Pharo where I am displaying some
structured text. The structure is similar to the one of a web page: A
main title with a list of paragraphs, where each paragraph has a title
and a description.

What I would like to do is to format the text to present the contents in
a meaningful way: For example, I would like a bigger font for the title,
and change the background of the text, to give a better separation
between the paragraphs. Basically I would like to manipulate and display
my contents as I would do in a web page.

To write UI widgets I usually use Spec, but I found that going beyond
easy formatting (e.g. bold text and emphasis) is harder than I thought.
I saw there were discussion about the styling text and the role of the
theme class, using TextStyle but that part is not really documented.

So far, the easiest way to solve my problem seems to be to use Morphic
to display the contents as I want it, and then include my widget in my
spec application.

Do you have any suggestions about how to do that? I think that styling
the UI widgets is an important part of the application development, but
it is really hard to find documentation about this.

Thanks, have a nice day!
Tommaso




Reply | Threaded
Open this post in threaded view
|

Re: Styling a Pharo UI application

Uko2

On 24 Jun 2016, at 16:38, Dimitris Chloupis <[hidden email]> wrote:

I dont see what Bloc and Bric have to do with sexiness.

It has. You see, I can take twitter bootstrap and my webpage will not be ugly. It will not be special, but if I want I can make my own changes. Still, it will not be ugly. But when you take Spec and build a UI it is ugly. And it is very painful to change it. You cannot say `model title size: model title size * 1.5`, you have to do some magic. And then you can use morphic, and athens, and as we have ffi you can use OpenGL. But I don’t have time for that, I just want a simple UI which is not ugly and I want to create it fast.

Uko

The only thing I see is Athens which Morphic already has access to. To be truly custom GUI friendly the API needs to at least offer some GPU acceleration and access to a myriad of graphical effects. I have not seen anything in Bloc and Bric that would make me abandon Morphic.

Actually the one thing that I am waiting for with some excitement is SDL support which would make things easier for someone like that loves to create custom GUIs.



On Fri, Jun 24, 2016 at 11:51 AM Yuriy Tymchuk <[hidden email]> wrote:
It’s kind of a pity that to make something sexy we still have to use Morphic… Hopefully this will change with Bloc & Bric 

On 24 Jun 2016, at 10:25, Dimitris Chloupis <[hidden email]> wrote:

In my case is just personal preference none the less Spec has ways to wrap morphs to Spec widgets so you should be able to build Spec widgets using Morphic for more flexibility. You dont have to decide to use Spec or Morphic, you can use both. Last time I checked Spec came with examples on how to do this and I think Spec docs also mention this.

Also I think Athens is very good at rendering text (because its wraps around the Cairo library)  , so maybe you can take advantage of that though I suspect Bloc may be even better choice in this case because it is based on Athens and it is fully compatible with Morphic.

There is also a text widget that is being build that is much more flexible with handling text

https://vimeo.com/67752734

Be advised though that both Bloc and TxText are far from finished

On Fri, Jun 24, 2016 at 1:28 AM Tommaso Dal Sasso <[hidden email]> wrote:

Personally I don't dislike the Spec approach, but the API still looks not expressive enough for doing things beyond the standard.

I am deepening my knowledge of Morphic now, thanks for your answer!

Tommaso



On 22/06/16 17:11, Dimitris Chloupis wrote:
Documentation is always a problem.

I dont use Spec because I dont like it , but I use Morphic for my project ChronosManager. I do some "styling" for example use different fonts for different labels , different sizes , I format strings to time stamps and even offer easy ways for user to change them without modifying the whole string.

You can do a lot with Morphic, though I have not played with layout stuff since this GUI is static and image (PNGs) based but yeah Morphic can do that as well. My project is on Catalog browser and it has class comments , dont know if this exactly what you want but it may be a good start.

Obviously there are a ton of things you can do with a web page that Morphic will not offer you out of the box.

You can use Html as the front end / GUI and keep Pharo as the backend, thats how most web apps made with Pharo work. This you get the full power of Html/JS and Pharo. Seaside has classes that map html to pharo methods so you dont have to write html and js, and also I remember a pharo library dealing with CSS.

Another option is to use a GUI API like QT , I have tried this with my python bridge and it works at least on a very basic level, again similar recipe to the above solution.

But yeah if you are not too demanding I think Morphic will serve you well. Personally I only like Morphic , its the only GUI API that does not kill my inner child.

On Wed, Jun 22, 2016 at 5:44 PM Tommaso Dal Sasso <[hidden email]> wrote:
Hello everybody,

I have a question about the UI toolkits available for Pharo. I already
asked something about this on Slack, but since I saw that there was a
recent discussion about UI in the mailing list, I think this is a better
place to discuss the matter.

I am writing an application for Pharo where I am displaying some
structured text. The structure is similar to the one of a web page: A
main title with a list of paragraphs, where each paragraph has a title
and a description.

What I would like to do is to format the text to present the contents in
a meaningful way: For example, I would like a bigger font for the title,
and change the background of the text, to give a better separation
between the paragraphs. Basically I would like to manipulate and display
my contents as I would do in a web page.

To write UI widgets I usually use Spec, but I found that going beyond
easy formatting (e.g. bold text and emphasis) is harder than I thought.
I saw there were discussion about the styling text and the role of the
theme class, using TextStyle but that part is not really documented.

So far, the easiest way to solve my problem seems to be to use Morphic
to display the contents as I want it, and then include my widget in my
spec application.

Do you have any suggestions about how to do that? I think that styling
the UI widgets is an important part of the application development, but
it is really hard to find documentation about this.

Thanks, have a nice day!
Tommaso





Reply | Threaded
Open this post in threaded view
|

Re: Styling a Pharo UI application

jfabry
Hi Uko,

just wondering: for you, what makes Spec UI’s ugly? And also, what are the features that are missing that require magic? I don’t understand your example either, sorry :-(

--
Does this mail seem too brief? Sorry for that, I don’t mean to be rude! Please see http://emailcharter.org .

Johan Fabry   -   http://pleiad.cl/~jfabry
PLEIAD and RyCh labs  -  Computer Science Department (DCC)  -  University of Chile

On Jun 24, 2016, at 17:50, Yuriy Tymchuk <[hidden email]> wrote:

But when you take Spec and build a UI it is ugly. And it is very painful to change it. You cannot say `model title size: model title size * 1.5`, you have to do some magic. 

Reply | Threaded
Open this post in threaded view
|

Re: Styling a Pharo UI application

Uko2
Look at spotter. It is not super fancy, but it has all the margins done right, it does not have extra borders and all this little details. If you have seen Brick widgets they have all the nice proportions, they are not over encumbered by details, they have nice animations, they have nice gamma. There are small details everywhere.

Ok, maybe I’ve exaggerated with “ugly”, but when I was deciding between Pharo and Squeak (I had to choose what will I use for my programming class), I opened Squeak, saw the strange greenish background, some mouse face, and windows with the style of 90s. Then I opened Pharo and it had this OS X-ish look so definitely I choose Pharo. Now style guides have changed. We have dropped watery look of OS-X but now we have turned into OS9 with all the rectangular gray widgets.

I know that we don’t have designers to inverted something cool, but what GT teem did is they took Google material design guidelines and implemented widgets in Pharo, so if I use them it will be pleasant to the user’s eye. Otherwise we are saying how cool Pharo is and how good we are, but a random Android developer can build nicer interface because they have this sexy widgets.

And yes, in the end for me the big turn off with Spec is the direct example with Tommaso. You know that something is wrong, so you want to change the size of a font. And then you ask on the mailing list and it turns out that it’s not that easy and you have to either hack something, or submit patch to Spec… In the end I’ve decided to use plain morphic because at least there I can change whatever I want.

Uko

On 25 Jun 2016, at 00:00, Johan Fabry <[hidden email]> wrote:

Hi Uko,

just wondering: for you, what makes Spec UI’s ugly? And also, what are the features that are missing that require magic? I don’t understand your example either, sorry :-(

--
Does this mail seem too brief? Sorry for that, I don’t mean to be rude! Please see http://emailcharter.org .

Johan Fabry   -   http://pleiad.cl/~jfabry
PLEIAD and RyCh labs  -  Computer Science Department (DCC)  -  University of Chile

On Jun 24, 2016, at 17:50, Yuriy Tymchuk <[hidden email]> wrote:

But when you take Spec and build a UI it is ugly. And it is very painful to change it. You cannot say `model title size: model title size * 1.5`, you have to do some magic. 


Reply | Threaded
Open this post in threaded view
|

Re: Styling a Pharo UI application

jfabry


On Jun 24, 2016, at 19:00, Yuriy Tymchuk <[hidden email]> wrote:

[…]

I know that we don’t have designers to inverted something cool, but what GT teem did is they took Google material design guidelines and implemented widgets in Pharo, so if I use them it will be pleasant to the user’s eye. Otherwise we are saying how cool Pharo is and how good we are, but a random Android developer can build nicer interface because they have this sexy widgets.

Just to understand: are you saying that a better set of underlying widgets for Spec would solve the ‘ugliness’ issue for you? Because, fundamentally this should be doable. (Now we would need somebody to actually do it, that’s another question :-/ )


And yes, in the end for me the big turn off with Spec is the direct example with Tommaso. You know that something is wrong, so you want to change the size of a font. And then you ask on the mailing list and it turns out that it’s not that easy and you have to either hack something, or submit patch to Spec… In the end I’ve decided to use plain morphic because at least there I can change whatever I want.

So, again to understand: you want to be able to change the font size of any widget from within the application, ignoring the System preference settings?

--
Does this mail seem too brief? Sorry for that, I don’t mean to be rude! Please see http://emailcharter.org .

Johan Fabry   -   http://pleiad.cl/~jfabry
PLEIAD and RyCh labs  -  Computer Science Department (DCC)  -  University of Chile

Reply | Threaded
Open this post in threaded view
|

Re: Styling a Pharo UI application

Peter Uhnak


On Sat, Jun 25, 2016 at 2:12 PM, Johan Fabry <[hidden email]> wrote:


On Jun 24, 2016, at 19:00, Yuriy Tymchuk <[hidden email]> wrote:

[…]

I know that we don’t have designers to inverted something cool, but what GT teem did is they took Google material design guidelines and implemented widgets in Pharo, so if I use them it will be pleasant to the user’s eye. Otherwise we are saying how cool Pharo is and how good we are, but a random Android developer can build nicer interface because they have this sexy widgets.

Just to understand: are you saying that a better set of underlying widgets for Spec would solve the ‘ugliness’ issue for you?

Then this would not a Spec issue, but Morphic/Bloc one.
 

And yes, in the end for me the big turn off with Spec is the direct example with Tommaso. You know that something is wrong, so you want to change the size of a font. And then you ask on the mailing list and it turns out that it’s not that easy and you have to either hack something, or submit patch to Spec… In the end I’ve decided to use plain morphic because at least there I can change whatever I want.

So, again to understand: you want to be able to change the font size of any widget from within the application, ignoring the System preference settings?

You should be able to do that even now with #whenBuiltDo:

But it's true that Spec doesn't really have any API for styling, and if something is customizable (some colors for some widgets, some other options), it is quite haphazard, similarly for drag and drop (there was a brief discussion about this about a month ago, but we don't have a solution)
kmo
Reply | Threaded
Open this post in threaded view
|

Re: Styling a Pharo UI application

kmo
In reply to this post by jfabry
Why would anyone think that a developer would not want to be able to change the font size?
Reply | Threaded
Open this post in threaded view
|

Re: Styling a Pharo UI application

kilon.alios
because that is how styling works, you define how the GUI should look instead of opting for a generic look and because if you dont decide for the font size , user is unlikely that will bother with setting and options

he probably end up saying

"No thanks, next please"

Of course that does not mean you should not give users some freedom of choice.

Yuriy I see now your point and I agree, an API that makes it easy to style your GUI is more than welcomed indeed. Of course that have made me wonder that maybe is better to take my GUI to something like bootstrap or QT and leave Pharo for the logic stuff.

On Sat, Jun 25, 2016 at 5:53 PM kmo <[hidden email]> wrote:
Why would anyone think that a developer would/ not /want to be able to change
the font size?



--
View this message in context: http://forum.world.st/Styling-a-Pharo-UI-application-tp4902498p4903255.html
Sent from the Pharo Smalltalk Users mailing list archive at Nabble.com.

Reply | Threaded
Open this post in threaded view
|

Re: Styling a Pharo UI application

kilon.alios
Forgot to add that I am slowly building my own API that will make it easier for me to create specific custom elements, for example I have created glow buttons (glow when you hover the mouse over it and when activated). 

On Sat, Jun 25, 2016 at 7:50 PM Dimitris Chloupis <[hidden email]> wrote:
because that is how styling works, you define how the GUI should look instead of opting for a generic look and because if you dont decide for the font size , user is unlikely that will bother with setting and options

he probably end up saying

"No thanks, next please"

Of course that does not mean you should not give users some freedom of choice.

Yuriy I see now your point and I agree, an API that makes it easy to style your GUI is more than welcomed indeed. Of course that have made me wonder that maybe is better to take my GUI to something like bootstrap or QT and leave Pharo for the logic stuff.

On Sat, Jun 25, 2016 at 5:53 PM kmo <[hidden email]> wrote:
Why would anyone think that a developer would/ not /want to be able to change
the font size?



--
View this message in context: http://forum.world.st/Styling-a-Pharo-UI-application-tp4902498p4903255.html
Sent from the Pharo Smalltalk Users mailing list archive at Nabble.com.

Reply | Threaded
Open this post in threaded view
|

Re: Styling a Pharo UI application

Tommaso DS
In reply to this post by Peter Uhnak

Just a couple of thoughts from the last days coding GUI in Pharo:

I don't think that the Spec vs. Morphic vs. Bric has really to do with "ugliness".
True, the Glamour team is doing an amazing work with providing an interface that is more pleasing and friendly, but the point for me is not how Spec or Morphic look. I don't use a library because its widgets look cool, I use it because the tools I build with it fit in the system i.e., they look like the rest of the system and respect its settings (provided that borders, spacing and alignment of the labels are aligned). How the system and your application look like, is responsibility of a theme manager.

The beauty that I am looking for as a developer for has to do with the code and the API. I consider important how fast I am able to prototype a working example --in this Spec is excellent-- and how much I can extend the code to refine my application --in this Spec is really hard to use--.

These last days I spent a lot of time with Morphic and later with Bric. What I noticed is that Morphic is *really* powerful, but to define a minimal working example you have to write a lot of code to take care of the details. On the other hand, Bric abstracts many of these details, allowing for a more pleasant looking result in less time.

I now understand why I hear saying a lot that Morphic got out of hand: you have so many options that one is not not able anymore to discern the essential ones from the once-in-a-lifetime settings. Since our main source of documentation comes from inspecting the code, and iterate over a list of methods requires a human at least linear time (who knows if we can improve this), a class like Morph becomes a nightmare.

Tommaso


On 25/06/16 16:45, Peter Uhnák wrote:


On Sat, Jun 25, 2016 at 2:12 PM, Johan Fabry <[hidden email]> wrote:


On Jun 24, 2016, at 19:00, Yuriy Tymchuk <[hidden email]> wrote:

[…]

I know that we don’t have designers to inverted something cool, but what GT teem did is they took Google material design guidelines and implemented widgets in Pharo, so if I use them it will be pleasant to the user’s eye. Otherwise we are saying how cool Pharo is and how good we are, but a random Android developer can build nicer interface because they have this sexy widgets.

Just to understand: are you saying that a better set of underlying widgets for Spec would solve the ‘ugliness’ issue for you?

Then this would not a Spec issue, but Morphic/Bloc one.
 

And yes, in the end for me the big turn off with Spec is the direct example with Tommaso. You know that something is wrong, so you want to change the size of a font. And then you ask on the mailing list and it turns out that it’s not that easy and you have to either hack something, or submit patch to Spec… In the end I’ve decided to use plain morphic because at least there I can change whatever I want.

So, again to understand: you want to be able to change the font size of any widget from within the application, ignoring the System preference settings?

You should be able to do that even now with #whenBuiltDo:

But it's true that Spec doesn't really have any API for styling, and if something is customizable (some colors for some widgets, some other options), it is quite haphazard, similarly for drag and drop (there was a brief discussion about this about a month ago, but we don't have a solution)

Reply | Threaded
Open this post in threaded view
|

Re: Styling a Pharo UI application

Nicolas Passerini
In the last couple of years I have participated in building quite a few web applications and we always have put a lot of emphasis in the user experience, navigation, in having pretty styled widgets, visual effects, smoth transitions, drag & drop, etc. Sometimes we used some out of the box styling or guidelines such as twitter bootstrap or google's material UI, others just bare javascript and css.

I think it makes a lot of sense to be careful about this stuff if you want that your users feel comfortable and want to use your application. Many times a user buys your software because of it looking modern and often it is better to have less features that are comfortable to use instead of lots of features but that are difficult to find or understand. I have learnt the importance of having a good web designer (or even better a UX expert). 

That said, and even when Pharo has evolved a lot in the last few years, I think that there is still room to improve and much to gain both in Morphic as in Spec or Glamour (I do not have experience with Bric widgets). I think it would be wonderful to be able to combine the power and simplicity of Smalltalk with a UI that allows the flexibility that I can achieve in web applications. 

It is not enough to say "it is possible", it has to be easy, understandable, robust, well documented. A little example: drag & drop has been possible in javascript + css since a lot of time ago, but 10 o 15 years ago, when someone asked me for dnd, I always tried to avoid it. "Yes I can do it, but it will take a lot of time, and it will never feel like the dnd you are used to in your host OS." Now tools evolved and my perspective changed a lot about this kind of goodies, I even empower my designers to include that kind of stuff, we can do it fast, it is easy, think about the best UX and we will figure out how to build it. I think that it would be great to achieve the same level of confidence in Pharo.

On Sat, Jun 25, 2016 at 9:54 PM, Tommaso Dal Sasso <[hidden email]> wrote:

Just a couple of thoughts from the last days coding GUI in Pharo:

I don't think that the Spec vs. Morphic vs. Bric has really to do with "ugliness".
True, the Glamour team is doing an amazing work with providing an interface that is more pleasing and friendly, but the point for me is not how Spec or Morphic look. I don't use a library because its widgets look cool, I use it because the tools I build with it fit in the system i.e., they look like the rest of the system and respect its settings (provided that borders, spacing and alignment of the labels are aligned). How the system and your application look like, is responsibility of a theme manager.

The beauty that I am looking for as a developer for has to do with the code and the API. I consider important how fast I am able to prototype a working example --in this Spec is excellent-- and how much I can extend the code to refine my application --in this Spec is really hard to use--.

These last days I spent a lot of time with Morphic and later with Bric. What I noticed is that Morphic is *really* powerful, but to define a minimal working example you have to write a lot of code to take care of the details. On the other hand, Bric abstracts many of these details, allowing for a more pleasant looking result in less time.

I now understand why I hear saying a lot that Morphic got out of hand: you have so many options that one is not not able anymore to discern the essential ones from the once-in-a-lifetime settings. Since our main source of documentation comes from inspecting the code, and iterate over a list of methods requires a human at least linear time (who knows if we can improve this), a class like Morph becomes a nightmare.

Tommaso



On 25/06/16 16:45, Peter Uhnák wrote:


On Sat, Jun 25, 2016 at 2:12 PM, Johan Fabry <[hidden email]> wrote:


On Jun 24, 2016, at 19:00, Yuriy Tymchuk <[hidden email][hidden email]> wrote:

[…]

I know that we don’t have designers to inverted something cool, but what GT teem did is they took Google material design guidelines and implemented widgets in Pharo, so if I use them it will be pleasant to the user’s eye. Otherwise we are saying how cool Pharo is and how good we are, but a random Android developer can build nicer interface because they have this sexy widgets.

Just to understand: are you saying that a better set of underlying widgets for Spec would solve the ‘ugliness’ issue for you?

Then this would not a Spec issue, but Morphic/Bloc one.
 

And yes, in the end for me the big turn off with Spec is the direct example with Tommaso. You know that something is wrong, so you want to change the size of a font. And then you ask on the mailing list and it turns out that it’s not that easy and you have to either hack something, or submit patch to Spec… In the end I’ve decided to use plain morphic because at least there I can change whatever I want.

So, again to understand: you want to be able to change the font size of any widget from within the application, ignoring the System preference settings?

You should be able to do that even now with #whenBuiltDo:

But it's true that Spec doesn't really have any API for styling, and if something is customizable (some colors for some widgets, some other options), it is quite haphazard, similarly for drag and drop (there was a brief discussion about this about a month ago, but we don't have a solution)


Reply | Threaded
Open this post in threaded view
|

Re: Styling a Pharo UI application

kilon.alios
In reply to this post by Tommaso DS
The problem is that coders don't understand beauty and design. Usually they disregard it partly or completely.

You need an artist for a good GUI , there is no way around this.

An Artist will brake every rule of a coder, like backward compatibility, KISS, don't reinvent the wheel , DRY etc

Design wise the API must not impose a specific design and deal mainly with graphical side which why usually OpenGL is used.

Design is a very lengthy , hard and painful process if high quality is the goal. Generally there is a ton of DIY involved.

It's crucial to appeal to the emotional side of the user, since GUI can play pivotal role to keeping the user excited about the app.


On Sat, 25 Jun 2016 at 22:56, Tommaso Dal Sasso <[hidden email]> wrote:

Just a couple of thoughts from the last days coding GUI in Pharo:

I don't think that the Spec vs. Morphic vs. Bric has really to do with "ugliness".
True, the Glamour team is doing an amazing work with providing an interface that is more pleasing and friendly, but the point for me is not how Spec or Morphic look. I don't use a library because its widgets look cool, I use it because the tools I build with it fit in the system i.e., they look like the rest of the system and respect its settings (provided that borders, spacing and alignment of the labels are aligned). How the system and your application look like, is responsibility of a theme manager.

The beauty that I am looking for as a developer for has to do with the code and the API. I consider important how fast I am able to prototype a working example --in this Spec is excellent-- and how much I can extend the code to refine my application --in this Spec is really hard to use--.

These last days I spent a lot of time with Morphic and later with Bric. What I noticed is that Morphic is *really* powerful, but to define a minimal working example you have to write a lot of code to take care of the details. On the other hand, Bric abstracts many of these details, allowing for a more pleasant looking result in less time.

I now understand why I hear saying a lot that Morphic got out of hand: you have so many options that one is not not able anymore to discern the essential ones from the once-in-a-lifetime settings. Since our main source of documentation comes from inspecting the code, and iterate over a list of methods requires a human at least linear time (who knows if we can improve this), a class like Morph becomes a nightmare.

Tommaso



On 25/06/16 16:45, Peter Uhnák wrote:


On Sat, Jun 25, 2016 at 2:12 PM, Johan Fabry <[hidden email]> wrote:


On Jun 24, 2016, at 19:00, Yuriy Tymchuk <[hidden email]> wrote:

[…]

I know that we don’t have designers to inverted something cool, but what GT teem did is they took Google material design guidelines and implemented widgets in Pharo, so if I use them it will be pleasant to the user’s eye. Otherwise we are saying how cool Pharo is and how good we are, but a random Android developer can build nicer interface because they have this sexy widgets.

Just to understand: are you saying that a better set of underlying widgets for Spec would solve the ‘ugliness’ issue for you?

Then this would not a Spec issue, but Morphic/Bloc one.
 

And yes, in the end for me the big turn off with Spec is the direct example with Tommaso. You know that something is wrong, so you want to change the size of a font. And then you ask on the mailing list and it turns out that it’s not that easy and you have to either hack something, or submit patch to Spec… In the end I’ve decided to use plain morphic because at least there I can change whatever I want.

So, again to understand: you want to be able to change the font size of any widget from within the application, ignoring the System preference settings?

You should be able to do that even now with #whenBuiltDo:

But it's true that Spec doesn't really have any API for styling, and if something is customizable (some colors for some widgets, some other options), it is quite haphazard, similarly for drag and drop (there was a brief discussion about this about a month ago, but we don't have a solution)

Reply | Threaded
Open this post in threaded view
|

Re: Styling a Pharo UI application

jfabry
In reply to this post by Tommaso DS
Tommaso,

can you give some concrete examples of what it is that you wanted to do to refine your application and that was really hard (or impossible) to do with Spec?

As long as we do not know what is wrong, we cannot fix it.

As long as we do not know what important things are wrong, we cannot prioritize.

--
Does this mail seem too brief? Sorry for that, I don’t mean to be rude! Please see http://emailcharter.org .

Johan Fabry   -   http://pleiad.cl/~jfabry
PLEIAD and RyCh labs  -  Computer Science Department (DCC)  -  University of Chile

On Jun 25, 2016, at 15:54, Tommaso Dal Sasso <[hidden email]> wrote:

The beauty that I am looking for as a developer for has to do with the code and the API. I consider important how fast I am able to prototype a working example --in this Spec is excellent-- and how much I can extend the code to refine my application --in this Spec is really hard to use--.

Reply | Threaded
Open this post in threaded view
|

Re: Styling a Pharo UI application

stepharo

+ 1

Stef

Tommaso,

can you give some concrete examples of what it is that you wanted to do to refine your application and that was really hard (or impossible) to do with Spec?

As long as we do not know what is wrong, we cannot fix it.

As long as we do not know what important things are wrong, we cannot prioritize.

--
Does this mail seem too brief? Sorry for that, I don’t mean to be rude! Please see http://emailcharter.org .

Johan Fabry   -   http://pleiad.cl/~jfabry
PLEIAD and RyCh labs  -  Computer Science Department (DCC)  -  University of Chile

On Jun 25, 2016, at 15:54, Tommaso Dal Sasso <[hidden email]> wrote:

The beauty that I am looking for as a developer for has to do with the code and the API. I consider important how fast I am able to prototype a working example --in this Spec is excellent-- and how much I can extend the code to refine my application --in this Spec is really hard to use--.


12