Smalltalk › Frameworks & Tools › Seaside › Seaside General

html & css basics and tutorial

_‹ Previous Topic Next Topic _›

Classic

List

Threaded

8 messages Options

r00t uk

html & css basics and tutorial

Hi

I am hoping to get some advice on how to proceed with HTML & CSS in Squeak/Seaside as I am finding it a bit of a struggle to do the simple stuff. I do not have any prior experience with web programming, but I have been going through the w3schools.com tutorials for guidance on creating the #style method. Its the rendering side of things which are a bit of a struggle as all of the html is generated by Seaside.

Are there any tutorials on web programming with Seaside? I have been spending time getting to know Smalltalk and a bit of Seaside, but up until now I have not been concentrating on learning html presentation, or using css to manage its presentation. I am somewhat surprised that there appears to be no information, documentation or tutorials on rendering except for some information in the "HPI - An Introduction to Seaside" book. I am spending a lot of time looking at methods in the example and test classes, which I don't mind, but I somehow doubt this is the best use of time. Where do I need to look for information about html rendering methods and message values?

Thanks and sorry if I have completely missed some site that has relevent documentation.

_______________________________________________
seaside mailing list
[hidden email]
http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside

John McKeon

Re: html & css basics and tutorial

FWIW I was/am still in the same boat and the w3schools site was a valuable refernce on what attributes are valid for what tags etc. Its really not Seaside's purpose to teach html, only to give a great tool for creating it in a highly reusable fashion.

Firebug for Firefox is an extremely useful tool for letting you see your html as rendered and showing you where your div sections end up laying out etc. I could not get a handle on CSS until i started using it. (Firebug has some other really useful features that you may need when you get to working with javascript for example).

Hope this helps

John

On Mon, Nov 24, 2008 at 6:04 PM, r00t uk <[hidden email]> wrote:

Hi

I am hoping to get some advice on how to proceed with HTML & CSS in Squeak/Seaside as I am finding it a bit of a struggle to do the simple stuff. I do not have any prior experience with web programming, but I have been going through the w3schools.com tutorials for guidance on creating the #style method. Its the rendering side of things which are a bit of a struggle as all of the html is generated by Seaside.

Are there any tutorials on web programming with Seaside? I have been spending time getting to know Smalltalk and a bit of Seaside, but up until now I have not been concentrating on learning html presentation, or using css to manage its presentation. I am somewhat surprised that there appears to be no information, documentation or tutorials on rendering except for some information in the "HPI - An Introduction to Seaside" book. I am spending a lot of time looking at methods in the example and test classes, which I don't mind, but I somehow doubt this is the best use of time. Where do I need to look for information about html rendering methods and message values?

Thanks and sorry if I have completely missed some site that has relevent documentation.

_______________________________________________
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

David Mitchell-10

Re: html & css basics and tutorial

I'm definitely not a CSS expert. But I've worked with frameworks that
generate HTML before.

I didn't have any trouble using our companies CSS into the apps I was
generating with Seaside. Just looked at the HTML and where they wanted
the div tags and then made sure that I generated to match.

On Tue, Nov 25, 2008 at 1:30 PM, John M <[hidden email]> wrote:

> FWIW I was/am still in the same boat and the w3schools site was a valuable
> refernce on what attributes are valid for what tags etc. Its really not
> Seaside's purpose to teach html, only to give a great tool for creating it
> in a highly reusable fashion.
>
> Firebug for Firefox is an extremely useful tool for letting you see your
> html as rendered and showing you where your div sections end up laying out
> etc. I could not get a handle on CSS until i started using it. (Firebug has
> some other really useful features that you may need when you get to
> working with javascript for example).
>
> Hope this helps
> John
>
> On Mon, Nov 24, 2008 at 6:04 PM, r00t uk <[hidden email]> wrote:
>>
>> Hi
>>
>> I am hoping to get some advice on how to proceed with HTML & CSS in
>> Squeak/Seaside as I am finding it a bit of a struggle to do the simple
>> stuff. I do not have any prior experience with web programming, but I have
>> been going through the w3schools.com tutorials for guidance on creating the
>> #style method. Its the rendering side of things which are a bit of a
>> struggle as all of the html is generated by Seaside.
>>
>> Are there any tutorials on web programming with Seaside? I have been
>> spending time getting to know Smalltalk and a bit of Seaside, but up until
>> now I have not been concentrating on learning html presentation, or using
>> css to manage its presentation. I am somewhat surprised that there appears
>> to be no information, documentation or tutorials on rendering except for
>> some information in the "HPI - An Introduction to Seaside" book. I am
>> spending a lot of time looking at methods in the example and test classes,
>> which I don't mind, but I somehow doubt this is the best use of time. Where
>> do I need to look for information about html rendering methods and message
>> values?
>>
>> Thanks and sorry if I have completely missed some site that has relevent
>> documentation.
>>
>>
>>
>> _______________________________________________
>> 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
>
>

_______________________________________________
seaside mailing list
[hidden email]
http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside

r00t uk

Re: html & css basics and tutorial

Thanks for the response and I completely agree with you that it is not Seaside's place to teach HTML. What I am looking for is the Smalltalk expressions used to create the HTML, i.e. the "receiver, message selector and arguments". For example, to display a url in HTML you would type:

<a href="http://www.w3schools.com/">Visit W3Schools!</a>


but in Smalltalk you would type the following in a "rendering" method:

html anchor url: 'www.3schools.com'; with: 'Visit W3Schools!'.


Now, without using CSS, you are able to change font, font-size, style etc. of the link above, but how is it done using Smalltalk expressions?
How, or where can I find information that will give me valid "receiver, message selector and arguments"?  I assume that the "receiver" will always

be "html".

I hope that clarifies my question(s)?  If it is a matter of just working your way through class libraries and comments (which ones?) then that
is what I will do.  Just feels like there must be an easier way for finding the information.

Thanks again in advance

2008/11/25 David Mitchell <[hidden email]>

I'm definitely not a CSS expert. But I've worked with frameworks that
generate HTML before.

I didn't have any trouble using our companies CSS into the apps I was
generating with Seaside. Just looked at the HTML and where they wanted
the div tags and then made sure that I generated to match.

On Tue, Nov 25, 2008 at 1:30 PM, John M <[hidden email]> wrote:
> FWIW I was/am still in the same boat and the w3schools site was a valuable
> refernce on what attributes are valid for what tags etc. Its really not
> Seaside's purpose to teach html, only to give a great tool for creating it
> in a highly reusable fashion.
>
> Firebug for Firefox is an extremely useful tool for letting you see your
> html as rendered and showing you where your div sections end up laying out
> etc. I could not get a handle on CSS until i started using it. (Firebug has
> some other really useful features that you may need when you get to
> working with javascript for example).
>
> Hope this helps
> John
>
> On Mon, Nov 24, 2008 at 6:04 PM, r00t uk <[hidden email]> wrote:
>>
>> Hi
>>
>> I am hoping to get some advice on how to proceed with HTML & CSS in
>> Squeak/Seaside as I am finding it a bit of a struggle to do the simple
>> stuff. I do not have any prior experience with web programming, but I have
>> been going through the w3schools.com tutorials for guidance on creating the
>> #style method. Its the rendering side of things which are a bit of a
>> struggle as all of the html is generated by Seaside.
>>
>> Are there any tutorials on web programming with Seaside? I have been
>> spending time getting to know Smalltalk and a bit of Seaside, but up until
>> now I have not been concentrating on learning html presentation, or using
>> css to manage its presentation. I am somewhat surprised that there appears
>> to be no information, documentation or tutorials on rendering except for
>> some information in the "HPI - An Introduction to Seaside" book. I am
>> spending a lot of time looking at methods in the example and test classes,
>> which I don't mind, but I somehow doubt this is the best use of time. Where
>> do I need to look for information about html rendering methods and message
>> values?
>>
>> Thanks and sorry if I have completely missed some site that has relevent
>> documentation.
>>
>>
>>
>> _______________________________________________
>> 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
>
>
_______________________________________________
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

Steve Aldred-3

Re: html & css basics and tutorial

r00t uk wrote:

> Thanks for the response and I completely agree with you that it is not
> Seaside's place to teach HTML. What I am looking for is the Smalltalk
> expressions used to create the HTML, i.e. the "receiver, message
> selector and arguments". For example, to display a url in HTML you
> would type:
> <a href="http://www.w3schools.com/">Visit W3Schools!</a>
>
>
> but in Smalltalk you would type the following in a "rendering" method:
>
> html anchor url: 'www.3schools.com <http://www.3schools.com>'; with: 'Visit W3Schools!'.
>
>
> Now, without using CSS, you are able to change font, font-size, style etc. of the link above, but how is it done using Smalltalk expressions?
> How, or where can I find information that will give me valid "receiver, message selector and arguments"? I assume that the "receiver" will always
>
> be "html".
>
> I hope that clarifies my question(s)? If it is a matter of just working your way through class libraries and comments (which ones?) then that
> is what I will do. Just feels like there must be an easier way for finding the information.
>

Sorry but I'm still not sure what you are asking. Do you mean what
methods do you send to generate the various HTML tags? If so look for
the implementor of #anchor (I think its WACanvas but haven't an image in
front of me). That will give you all of the messages for
components/tags. The implementor will site the tag brush class.

To find what you can send to a tag it is pretty much examine the tag
brush class and its hierarchy. As always in Smalltalk the code is the
most up to date documentation. Luckily it doesn't take long to learn the
common methods you need.

As for CSS, there mostly won't be methods for controlling style on a
component/tag. The code is for the structure and behaviour, CSS is for
the look/style. You can implement a #style method on your components to
define the CSS. If the tag or tag path is not sufficient, set id and
class on your components. Just make sure if you use ids they are unique,
we only tend to use those for singletons on a page. In our development
we tend to have few style methods, mostly its defined on a Look&Feel
class we use as a container for everything else.

cheers
Steve A
_______________________________________________
seaside mailing list
[hidden email]
http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside

r00t uk

Re: html & css basics and tutorial

Thanks

That is helpful and the class is WAHtmlCanvas.

2008/11/26 Steve Aldred <[hidden email]>

r00t uk wrote:

Thanks for the response and I completely agree with you that it is not Seaside's place to teach HTML. What I am looking for is the Smalltalk expressions used to create the HTML, i.e. the "receiver, message selector and arguments". For example, to display a url in HTML you would type:
<a href="http://www.w3schools.com/">Visit W3Schools!</a>

but in Smalltalk you would type the following in a "rendering" method:

html anchor url: 'www.3schools.com <http://www.3schools.com>'; with: 'Visit W3Schools!'.

Now, without using CSS, you are able to change font, font-size, style etc. of the link above, but how is it done using Smalltalk expressions?
How, or where can I find information that will give me valid "receiver, message selector and arguments"? I assume that the "receiver" will always

be "html".

I hope that clarifies my question(s)? If it is a matter of just working your way through class libraries and comments (which ones?) then that
is what I will do. Just feels like there must be an easier way for finding the information.

Sorry but I'm still not sure what you are asking. Do you mean what methods do you send to generate the various HTML tags? If so look for the implementor of #anchor (I think its WACanvas but haven't an image in front of me). That will give you all of the messages for components/tags. The implementor will site the tag brush class.

To find what you can send to a tag it is pretty much examine the tag brush class and its hierarchy. As always in Smalltalk the code is the most up to date documentation. Luckily it doesn't take long to learn the common methods you need.

As for CSS, there mostly won't be methods for controlling style on a component/tag. The code is for the structure and behaviour, CSS is for the look/style. You can implement a #style method on your components to define the CSS. If the tag or tag path is not sufficient, set id and class on your components. Just make sure if you use ids they are unique, we only tend to use those for singletons on a page. In our development we tend to have few style methods, mostly its defined on a Look&Feel class we use as a container for everything else.

cheers
Steve A

_______________________________________________
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

David Mitchell-10

Re: html & css basics and tutorial

I think a more complete example of what you want to achieve would help as well.

What is the HTML (with or without CSS) that you need to generate?

>>> <a href="http://www.w3schools.com/">Visit W3Schools!</a>
>>>
>>>
>>> but in Smalltalk you would type the following in a "rendering" method:
>>>
>>> html anchor url: 'www.3schools.com <http://www.3schools.com>'; with:
>>> 'Visit W3Schools!'.
>>>
>>>
>>> Now, without using CSS, you are able to change font, font-size, style
>>> etc. of the link above, but how is it done using Smalltalk expressions?
>>> How, or where can I find information that will give me valid "receiver,
>>> message selector and arguments"? I assume that the "receiver" will always
>>>

_______________________________________________
seaside mailing list
[hidden email]
http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside

John McKeon

Re: html & css basics and tutorial

In reply to this post by r00t uk

Well, all the descendents of WATagBrush have methods for adding the usual attributes, i,e:

html div class: 'adiv'; id: 'anId'; with [ etc ].

If there are any that do not have an explicit message you can always use attibutesAt: put: and for CSS in particular you can use the style: selector although its use is discouraged.

Take a look at WATagBrush, a descendent of WAGenericTag not a canvas (but in the Seaside-Canvas category).

Happy Holidays

John

On Wed, Nov 26, 2008 at 2:41 AM, r00t uk <[hidden email]> wrote:

Thanks for the response and I completely agree with you that it is not Seaside's place to teach HTML. What I am looking for is the Smalltalk expressions used to create the HTML, i.e. the "receiver, message selector and arguments". For example, to display a url in HTML you would type:
<a href="http://www.w3schools.com/">Visit W3Schools!</a>



but in Smalltalk you would type the following in a "rendering" method:

html anchor url: 'www.3schools.com'; with: 'Visit W3Schools!'.



Now, without using CSS, you are able to change font, font-size, style etc. of the link above, but how is it done using Smalltalk expressions?
How, or where can I find information that will give me valid "receiver, message selector and arguments"?  I assume that the "receiver" will always


be "html".

I hope that clarifies my question(s)?  If it is a matter of just working your way through class libraries and comments (which ones?) then that
is what I will do.  Just feels like there must be an easier way for finding the information. 
Thanks again in advance

2008/11/25 David Mitchell <[hidden email]>

I'm definitely not a CSS expert. But I've worked with frameworks that
generate HTML before.

I didn't have any trouble using our companies CSS into the apps I was
generating with Seaside. Just looked at the HTML and where they wanted
the div tags and then made sure that I generated to match.

On Tue, Nov 25, 2008 at 1:30 PM, John M <[hidden email]> wrote:
> FWIW I was/am still in the same boat and the w3schools site was a valuable
> refernce on what attributes are valid for what tags etc. Its really not
> Seaside's purpose to teach html, only to give a great tool for creating it
> in a highly reusable fashion.
>
> Firebug for Firefox is an extremely useful tool for letting you see your
> html as rendered and showing you where your div sections end up laying out
> etc. I could not get a handle on CSS until i started using it. (Firebug has
> some other really useful features that you may need when you get to
> working with javascript for example).
>
> Hope this helps
> John
>
> On Mon, Nov 24, 2008 at 6:04 PM, r00t uk <[hidden email]> wrote:
>>
>> Hi
>>
>> I am hoping to get some advice on how to proceed with HTML & CSS in
>> Squeak/Seaside as I am finding it a bit of a struggle to do the simple
>> stuff. I do not have any prior experience with web programming, but I have
>> been going through the w3schools.com tutorials for guidance on creating the
>> #style method. Its the rendering side of things which are a bit of a
>> struggle as all of the html is generated by Seaside.
>>
>> Are there any tutorials on web programming with Seaside? I have been
>> spending time getting to know Smalltalk and a bit of Seaside, but up until
>> now I have not been concentrating on learning html presentation, or using
>> css to manage its presentation. I am somewhat surprised that there appears
>> to be no information, documentation or tutorials on rendering except for
>> some information in the "HPI - An Introduction to Seaside" book. I am
>> spending a lot of time looking at methods in the example and test classes,
>> which I don't mind, but I somehow doubt this is the best use of time. Where
>> do I need to look for information about html rendering methods and message
>> values?
>>
>> Thanks and sorry if I have completely missed some site that has relevent
>> documentation.
>>
>>
>>
>> _______________________________________________
>> 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
>
>
_______________________________________________
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

_______________________________________________
seaside mailing list
[hidden email]
http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside