Star Rating Display Component

created by Fareez Ahamed on Jun 1, 2012 7:44 AM, last modified by 2012 7:24 AM
Version 3
inShare

Fareez Ahamed

on Jun 6,

Most of the time ratings are expressed in terms of stars, which is more appealing and easy to interpret. I came across a similar situation and I developed a reusable component to show star rating. Now in this tutorial we are going to create a component which displays star rating and test it in another component. We are going to implement it with images. First, create component ZRATING_DISP and in the component controller add the following context nodes.

RATE_NODE should be made as interface node so that the rating can be set from outside the component. RATINGattribute should be of type F and all other attributes (STAR1 to STAR5) should be of type STRING. Now we need images of stars. A gold star, a white star and a half star. I downloaded some icons and edited them. Im sharing them below. Upload them to the server through Create MIME Object and make sure their names are gstar.png, hstar.png and wstar.png respectively. Now in the MAIN view of the component create five elements of type Image with names IMG1 to IMG5 underROOTUIELEMENT.

And also make context mapping of the nodes RATE_NODE and IMG to the MAIN view.

Bind the attributes STAR1 to STAR5 to image UI elements IMG1 to IMG5 respectively. Now we have to add the logic for updating the stars at each refresh at WDDOMODIFY. (I could have coded a better algorithm, but the matter of interest here is not algorithms. This seemed to be simple to understand than any)

method WDDOMODIFYVIEW .
data:

rate_node type ref to if_wd_context_node, img_node type ref to if_wd_context_node, gstar type string value 'gstar.png', hstar type string value 'hstar.png', wstar type string value 'wstar.png', rating type f. img_node = wd_context->get_child_node( 'IMG' ). rate_node = wd_context->get_child_node( 'RATE_NODE' ). rate_node->get_attribute( exporting name = 'RATING' importing value = rating).
if rating > '0.0' and rating <= '0.5'. img_node->set_attribute( exporting name img_node->set_attribute( exporting name img_node->set_attribute( exporting name img_node->set_attribute( exporting name img_node->set_attribute( exporting name elseif rating > '0.5' and rating <= '1.0'. img_node->set_attribute( exporting name img_node->set_attribute( exporting name img_node->set_attribute( exporting name img_node->set_attribute( exporting name img_node->set_attribute( exporting name = = = = = = = = = = 'STAR1' 'STAR2' 'STAR3' 'STAR4' 'STAR5' 'STAR1' 'STAR2' 'STAR3' 'STAR4' 'STAR5' value value value value value value value value value value = = = = = = = = = =

hstar wstar wstar wstar wstar gstar wstar wstar wstar wstar

). ). ). ). ). ). ). ). ). ).

elseif rating > '1.0' and rating <= '1.5'. img_node->set_attribute( exporting name img_node->set_attribute( exporting name img_node->set_attribute( exporting name img_node->set_attribute( exporting name img_node->set_attribute( exporting name elseif rating > '1.5' and rating <= '2.0'. img_node->set_attribute( exporting name img_node->set_attribute( exporting name img_node->set_attribute( exporting name img_node->set_attribute( exporting name img_node->set_attribute( exporting name elseif rating > '2.0' and rating <= '2.5'. img_node->set_attribute( exporting name img_node->set_attribute( exporting name img_node->set_attribute( exporting name img_node->set_attribute( exporting name img_node->set_attribute( exporting name elseif rating > '2.5' and rating <= '3.0'. img_node->set_attribute( exporting name img_node->set_attribute( exporting name img_node->set_attribute( exporting name img_node->set_attribute( exporting name img_node->set_attribute( exporting name elseif rating > '3.0' and rating <= '3.5'. img_node->set_attribute( exporting name img_node->set_attribute( exporting name img_node->set_attribute( exporting name img_node->set_attribute( exporting name img_node->set_attribute( exporting name elseif rating > '3.5' and rating <= '4.0'. img_node->set_attribute( exporting name img_node->set_attribute( exporting name img_node->set_attribute( exporting name img_node->set_attribute( exporting name img_node->set_attribute( exporting name elseif rating > '4.0' and rating <= '4.5'. img_node->set_attribute( exporting name img_node->set_attribute( exporting name img_node->set_attribute( exporting name img_node->set_attribute( exporting name img_node->set_attribute( exporting name elseif rating > '4.5' and rating <= '5.0'. img_node->set_attribute( exporting name img_node->set_attribute( exporting name img_node->set_attribute( exporting name img_node->set_attribute( exporting name img_node->set_attribute( exporting name else. img_node->set_attribute( exporting name img_node->set_attribute( exporting name img_node->set_attribute( exporting name img_node->set_attribute( exporting name img_node->set_attribute( exporting name endif.

= = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = =

'STAR1' 'STAR2' 'STAR3' 'STAR4' 'STAR5' 'STAR1' 'STAR2' 'STAR3' 'STAR4' 'STAR5' 'STAR1' 'STAR2' 'STAR3' 'STAR4' 'STAR5' 'STAR1' 'STAR2' 'STAR3' 'STAR4' 'STAR5' 'STAR1' 'STAR2' 'STAR3' 'STAR4' 'STAR5' 'STAR1' 'STAR2' 'STAR3' 'STAR4' 'STAR5' 'STAR1' 'STAR2' 'STAR3' 'STAR4' 'STAR5' 'STAR1' 'STAR2' 'STAR3' 'STAR4' 'STAR5' 'STAR1' 'STAR2' 'STAR3' 'STAR4' 'STAR5'

value value value value value value value value value value value value value value value value value value value value value value value value value value value value value value value value value value value value value value value value value value value value value

= = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = =

gstar hstar wstar wstar wstar gstar gstar wstar wstar wstar gstar gstar hstar wstar wstar gstar gstar gstar wstar wstar gstar gstar gstar hstar wstar gstar gstar gstar gstar wstar gstar gstar gstar gstar hstar gstar gstar gstar gstar gstar wstar wstar wstar wstar wstar

). ). ). ). ). ). ). ). ). ). ). ). ). ). ). ). ). ). ). ). ). ). ). ). ). ). ). ). ). ). ). ). ). ). ). ). ). ). ). ). ). ). ). ). ).

endmethod.
Now the work on the component is completed. Activate the component and we have to test it on another component. Create the component ZRATING_DISP_TEST and add the component ZRATING_DISP in component usage.

And also add the component usage on the MAIN view.

Now map the RATE_NODE of the interface controller to the MAIN view of ZRATING_DISP_TEST.

Create a ViewUIElementContainer named VIEW on the MAIN view. And go to the windows and embed the MAINview of the ZRATING_DISP to the ViewUIElementContainer.

Now we have to add the code to set the rating value on the component at the WDDOINIT of MAIN view ofZRATING_DISP_TEST.

method WDDOINIT .
data:

node type ref to if_wd_context_node. node = wd_context->get_child_node( 'RATE_NODE' ). node->set_attribute( exporting name = 'RATING' value = '3.5' ).
endmethod.
Now activate and run the component and verify the output.

I conclude here hoping this would be helpful to many. Even when you give the rating for this article it will remind you of star rating in Web Dynpro ABAP

Star Rating Input Component

created by Fareez Ahamed on Jun 6, 2012 7:35 AM, last modified by 2012 8:38 AM
Version 3
inShare

Fareez Ahamed

on Jun 7,

Few days back I wrote the document Star Rating Display Component which can be used to show the average rating of an item. Now in this document I wish to share you how to create a reusable star rating input component through which we can give rating to items by just clicking on stars. Create a new component ZRATING_INPUT and in the component controller create the following context nodes and attributes.

RATE_NODE should be made as interface node so that the rating can be obtained from the component from outside the component. RATING attribute should be of type I (only whole stars can be selected, so no floating type) and all other attributes (STAR1 to STAR5) should be of type STRING. Now we need images of stars. A gold star and a white star (half stars are not need). I downloaded some icons edited them, Im sharing them below. Upload them to the server through Create MIME Object and make sure their names are gstar.png and wstar.png. Now in the MAIN view of the component create five elements of type LinkToAction with names BUT1 to BUT5 underROOTUIELEMENT.

context mapping of the nodes RATE_NODE and IMG to the MAIN view.

And also make

Bind the attributes STAR1 to STAR5 to LinkToAction UI elements BUT1 to BUT5s imageSource property respectively. On the action of each button, we have to write the corresponding code to set the rating. BUT1

method ONACTIONBUT1 .
data:

rate_node type ref to if_wd_context_node. rate_node = wd_context->get_child_node( 'RATE_NODE' ). rate_node->set_attribute( exporting name = 'RATING' value = 1 ).
endmethod.
BUT2

method ONACTIONBUT2 .
data:

rate_node type ref to if_wd_context_node. rate_node = wd_context->get_child_node( 'RATE_NODE' ). rate_node->set_attribute( exporting name = 'RATING' value = 2 ).
endmethod.
BUT3

method ONACTIONBUT3 .
data:

rate_node type ref to if_wd_context_node. rate_node = wd_context->get_child_node( 'RATE_NODE' ). rate_node->set_attribute( exporting name = 'RATING' value = 3 ).
endmethod.
BUT4

method ONACTIONBUT4 .
data:

rate_node type ref to if_wd_context_node. rate_node = wd_context->get_child_node( 'RATE_NODE' ). rate_node->set_attribute( exporting name = 'RATING' value = 4 ).

endmethod.
BUT5

method ONACTIONBUT5 .
data:

rate_node type ref to if_wd_context_node. rate_node = wd_context->get_child_node( 'RATE_NODE' ). rate_node->set_attribute( exporting name = 'RATING' value = 5 ).
endmethod.
Once the rating is set on the context, we have to update the color of stars. The following coding on theWDDOMODIFYVIEW can do it. WDDOMODIFYVIEW

method WDDOMODIFYVIEW .
data:

rate_node type ref to if_wd_context_node, img type ref to if_wd_context_node, rating type i, gstar type string value 'gstar.png', wstar type string value 'wstar.png'. img = wd_context->get_child_node( 'IMG' ). rate_node = wd_context->get_child_node( 'RATE_NODE' ). rate_node->get_attribute( exporting name = 'RATING' importing value = rating).
if rating = 1. img->set_attribute( img->set_attribute( img->set_attribute( img->set_attribute( img->set_attribute( elseif rating = 2. img->set_attribute( img->set_attribute( img->set_attribute( img->set_attribute( img->set_attribute( elseif rating = 3. img->set_attribute( img->set_attribute( img->set_attribute( img->set_attribute( img->set_attribute( elseif rating = 4. img->set_attribute( img->set_attribute( img->set_attribute( img->set_attribute( img->set_attribute( elseif rating = 5. img->set_attribute( img->set_attribute( exporting exporting exporting exporting exporting exporting exporting exporting exporting exporting exporting exporting exporting exporting exporting exporting exporting exporting exporting exporting

name name name name name name name name name name name name name name name name name name name name

= = = = = = = = = = = = = = = = = = = =

'STAR1' 'STAR2' 'STAR3' 'STAR4' 'STAR5' 'STAR1' 'STAR2' 'STAR3' 'STAR4' 'STAR5' 'STAR1' 'STAR2' 'STAR3' 'STAR4' 'STAR5' 'STAR1' 'STAR2' 'STAR3' 'STAR4' 'STAR5'

value value value value value value value value value value value value value value value value value value value value

= = = = = = = = = = = = = = = = = = = =

gstar wstar wstar wstar wstar gstar gstar wstar wstar wstar gstar gstar gstar wstar wstar gstar gstar gstar gstar wstar

). ). ). ). ). ). ). ). ). ). ). ). ). ). ). ). ). ). ). ).

exporting name = 'STAR1' value = gstar ). exporting name = 'STAR2' value = gstar ).

img->set_attribute( exporting name = 'STAR3' value = gstar ). img->set_attribute( exporting name = 'STAR4' value = gstar ). img->set_attribute( exporting name = 'STAR5' value = gstar ).
else. img->set_attribute( img->set_attribute( img->set_attribute( img->set_attribute( img->set_attribute( endif. endmethod. exporting exporting exporting exporting exporting

name name name name name

= = = = =

'STAR1' 'STAR2' 'STAR3' 'STAR4' 'STAR5'

value value value value value

= = = = =

wstar wstar wstar wstar wstar

). ). ). ). ).

We need not create a separate component to test this one as this is an input component and not a display component. On running it we get the desired output.

Before and after clicking a star

Hope you enjoyed it.