Category: "Dojo"

Rounded Rectangles Notes

Creating rounded rectangles has become a bit of a quest.

This blog links to a utility that lets you create a rounded rectangle image that can be used in a page to help organize the content (http://wirehopper.com/design/rounded.php). It has a link to an approach that allows you to create nine images and use them to display a rounded rectangle using CSS and XHTML. Unfortunately, it doesn’t work (http://www.wirehopper.com/design/rr/). So far, the nicest implementation of rounded corner rectangles I’ve found for page layout is eZ publish’s ezwebin (http://now.ezpublish.no/).

Another approach I tried was to use dojox/gfx, which uses javascript to draw on a page.(http://docs.dojocampus.org/dojox/gfx#rectangle). This works really nicely, however, if you want to place text in the rectangle, you must be creative. The approach I tried was to use divs to position the rectangles, then use absolute positioning of additional divs to put text in the boxes. To be dynamic, the dimensions of the rectangles must be adjusted to work well with the content they’ll surround. This can be done fairly easily with javascript, by getting the dimensions of the text div using screen.clientWidth and screen.clientHeight.

After investing a significant amount of time in this fundamental layout issue, I have come to the conclusion that if you have a framework or library that has themes (http://docs.dojocampus.org/dijit-themes), you should choose one and use it, and if not, unless you’ve already found a great way to do rounded rectangles, or you really have to have them, it’s probably not worth the effort.

Rounded rectangles are excellent learning tools for web designers and developers, because they include several skill areas.

  • Proper image format. .gifs are probably the best for simple rounded rectangles, including those with transparency, .jpgs or .pngs would be good if there are gradients. It’s worth checking the file sizes and checking how they look on the page.
  • CSS layout and dimension control. Depending on the implementation, you may have a three by three block. Each ‘row’ will float, and between the rows, there must be a break. Browser compatibility must be tested.
  • Page construction. Computing the bandwidth required for each rounded rectangle is another good exercise. The bandwidth required includes the XHTML, CSS, and all images. Reusing CSS and images can reduce both bandwidth and the number of requests.
  • Server-side support. I looked into using PHP to help set up the dojox/gfx rounded rectangles, but abandoned it due to time constraints. Using a server-side technology, or template engine / taglib may be helpful.
  • Appreciation of complexity. Many people mistake the simplicity of the XHTML language as an indicator that web work is “easy”. It’s not.
  • Cost of labor. As above, it is good to understand that if a task takes longer, one must consider the cost. Spending many hours on rounded rectangles will undoubtedly reduce the time available for other, more important, tasks. In the business world, time is money.

This ends the quest for rounded rectangles. I learned:

  • Rounded rectangles are not simple.
  • Even if you invest a lot of time, sometimes, there isn’t a ‘graceful’ solution. Bear in mind this is a subjective definition - others may feel that some of the offered ideas are perfect.
  • A lot about ImageMagick (http://imagemagick.org). Including …

    • How to draw a rounded rectangle
    • How to crop pieces out of an image
    • How to tint an image
    • How to apply a gradient to an image
  • The CSS border attributes and how to apply them
  • Rounded corners on images look really nice with ezwebin
  • Many other people have posted cool ideas about rounded corners and rectangles - it’s a popular pursuit, or a necessary one. :)
  • Rounded rectangles just aren’t that important to me anymore

Additional posts in this blog:

http://web-notes.wirehopper.com/2009/07/05/imagemagick-rounded-rectangles
http://web-notes.wirehopper.com/2009/06/07/smoother-imagemagick-rounded-rectangles
http://web-notes.wirehopper.com/2009/05/11/imagemagick-rounded-corners
http://web-notes.wirehopper.com/2009/11/19/ez-publish-rounded-image-corners
http://web-notes.wirehopper.com/2009/11/06/tint-with-imagemagick
http://web-notes.wirehopper.com/2009/06/27/round-image-corners-imagemagick
http://web-notes.wirehopper.com/2009/05/17/imagemagick-rounded-corners-images

dojox Gallery / SlideShow Demo

Link is a demo of the dojox Gallery / SlideShow widget.

Implementation considerations:

  • Table of contents (left column) provides links for SEO, as well as navigation by site visitor/organization of content.

  • A detail page could be developed for each page that would include additional text, both for SEO and to provide more information for site visitors.

  • Images are just color gradients - easy to see them change.

Free .PNG and .JPG Banner Builder

Allows you to upload up to 10 images.

Assembles them into a banner 100px high. Adjusts height, retains aspect ratio.

Produces both a .PNG and .JPG.

Gradient Generator Notes

Value

The value of this utility is in its simplicity. Image, photo, and graphical editors are very action-intensive. This tool allows a selection of a single color, the width/height, and then it creates all four gradients. This is a very fast way to create custom gradients, and it is easy to use.

UI

  • Page should not require scrolling to operate, read instructions, and access gradients and text.
  • Interface should allow both mouse and keyboard control. Gradients can be generated by mouse only, or keyboard.
  • Interface should allow entry of hex color code and width/height directly.
  • It is assumed the gradient will have enough color that a white title will be visible.

LAMP Stack

  • CSS/divs are used to layout the page.
  • ColorPicker is a dojox widget. Additional widgets are the width/height input and the slider. Client-side validation is run off the widgets.
  • Two buttons are offered, one that creates the gradients and one that resets the inputs to the default values.
  • When the create button is clicked, the form is validated and submitted to the server.
  • PHP5 is used for the back-end script because it supports json_encode.
  • HTML is returned from the back-end script and placed in the dojo ContentPane.
  • The background image for the page is set to one of the gradients. This is a good preview method and it makes the page more interesting.
  • ImageMagick is used to create the gradients. It creates one gradient and rotates it to create the remaining three.
  • Directory index should not be accessible. This is accomplished by another file.
  • File system - image files must be writeable by Apache.

dojox Grid Select Indicator Demo

Demonstration of a selection indicator for a dojox grid.

Notes:

  • Grey checkmark serves as select all/deselect all, if no rows are selected, clicking on the checkmark will select them all, if any rows are selected, all will be deselected.
  • Row selector uses a green checkmark to indicate selection. Additional styling can be applied.
  • Add and remove rows work, but no save is performed.
  • Icons from Crystal Project (http://everaldo.com/crystal)

* Demonstration is for the design, not operation of grid.