UI « Intelligrape Groovy & Grails Blogs

Posts Tagged ‘ UI ’

Grails:Domain Design Via Intellij Idea’s Diagrams

Posted by Hitesh Bhatia on November 23rd, 2011

Here is an example of how to design Grails domain class with Intellij Idea.For this we need to have blank domain classes. So lets say we created  three Domain Classes Company,Book,Author

  1. To see relationship diagram, Selected Domain Class, and selected tab Domain Class Dependencies.It should look like this
    image
  2. Lets assume the relation that publication has many books. So I drag mouse from Company to Books. Which invokes a popup asking about relationship between the domains and type and name of the field.
    image
  3. On Selecting ok from previous popup. Their relation is defined in domain and in diagram. Similarly, lets define
    1. Book hasMany Authors,
    2. Authors hasMany Books,
    3. Book belongsTo Author
    4. And Diagram looked like this.

    image

  4. Next Step – Lets add fields to Domain Class all by Intellij Idea’s UI. Select package of domain class and pressshft+ctrl+alt+u. It’ll open package diagram of app.
    image
  5. Now lets add field name to domain Author. For that we’ll need to select domain author,right click and select fields. It’ll invoke a popup asking details about field.
    image
    Similarly we add field name to Author and published on to Book.
  6. Now lets add a method to named “publishedBefore” to Book which takes a date and return list of books published before that date.For this we need to right click on domain and select method.And it’ll invoke popup asking details.Select create and its done.
    image

This was a simple and easy way to create structure of grails app in Intellij Idea.

_________________________________
Hitesh Bhatia
Mail,LinkedIn,Facebook,Twitter
_________________________________
  • Share/Bookmark
Tags: , , , , , , ,
Posted in GORM, Grails
No Comments »

canvas

Posted by umar on September 7th, 2010

The HTML <canvas> tag is used for creating graphics on the fly. It can be used for rendering graphs, game graphics, or other visual images.

 

To draw on the canvas, the <canvas> tag is used in conjunction with the getContext(contextId) method.

 

Any content between the <canvas></canvas> tags is “fallback content”- meaning, it will be displayed only if the canvas cannot be displayed.

 

As a script:

function displayCanvas()
	{
      var canvas = document.getElementById("myCanvas");
      if (canvas.getContext) {
        var ctx = canvas.getContext("2d");

        ctx.fillStyle = "rgb(200,0,0)";
        ctx.fillRect (0, 0, 150, 75);

        ctx.fillStyle = "rgba(0, 0, 200, 0.5)";
        ctx.fillRect (40, 30, 125, 75);

        ctx.fillStyle = "rgb(0,0,150)";
        ctx.strokeRect (20, 20, 50, 100);
      }
    }

 

and this is html

<canvas id="myCanvas" width="300" height="200">Your browser does not support the canvas tag. At the time of writing, Firefox, Opera, and Chrome support this tag.

Here's an image of what it's supposed to look like image.
</canvas>

Attributes
width: {Specifies the canvas width in pixels. The default value is 300.Possible values:[Non-negative integer] (for example, 300)}
Height: {Specifies the canvas height in pixels. The default value is 150.Possible values:[Non-negative integer] (for example, 150)}

  • Share/Bookmark
Tags: , , , ,
Posted in HTML-UI-CSS
No Comments »