Pages

Monday, 23 March 2015

Configuring parameters in REST Data Control wizard

REST Data Control is a cool feature introduced recently in JDeveloper which enables you to consume JAX-RS RESTful services in ADF apps. By configuring the various operations in the data control wizard, a tree like structure gets created for you, which can then be dragged and dropped to the page.

Usecase:
This blogpost talks about configuring parameters - Query/Path parameters in the REST Data Control wizard.

Pre-requisites:
JDeveloper 12.1.3.0.0

Steps:
Let us assume that we have a REST service exposed at root URL:
http://<hostname>:<port>/REST-Service-Project1-context-root/resources/empInfo
with a structure as below:

@Path("empInfo)
public class EmployeeService
{
    :
    :
    @GET
    @Produces("application/xml")
    public Employees getEmpList() {
        :
    }

    @GET
    @Produces("application/xml")
    @Path("byID/{id}")
    public Employees getEmployeesByID(@PathParam("id") int id) {
        :
    }
   
    @GET
    @Produces("application/xml")
    @Path("managerList")
    public Employees getOnlyManagers(@QueryParam("isManager") String isManager) {
        :
    }
}

Invoke the REST Data control wizard, and create a connection(I prefer creating a connection till http://<host>:<port>, and configuring the rest of the URI in the next step, although that is purely a matter of choice). After this, you will come to the pane where you define resource URLs. The below snapshot tells you how you provide path param and query param URLs. In case of path param, you need to provide the path parameter with ##. For query params, provide the URL until the query param (excluding the parameter).




In the next step, select the resource method which requires a query param and add the query parameter by clicking the plus icon and providing a valid default value for it. Similarly, select the resource method which requires path param. The URL paramaters section will show up the parameter. Provide a valid default value.




Now, your URL connection should go through and data control must get created successfully.
The same steps can be used when using REST Data Controls with ADF Mobile.

Saturday, 14 March 2015

Angular Tab Slider Directive Part 2

This is continuation to the Slider Directive (Angularjs Directive for an Animated Highlight Slider).

Refer this git for full source code.

See the Pen Angular Js Based slider Tab by Ganaraj (@gtejasvi) on CodePen.

Usage : 

Directive : animated-tabs

Directive attributes :

duration : duration for sliding (should match with the transition period).

selected-class : The class defined in this will be applied to active class. A custom defined class can be defined as required

selected : Model that will be used for triggering the animation. On changing this either using ngClick or through other means one can trigger the animation. The value given here should match the id of the immediate child of the directive defined in the html

tab-active : used to activate the tab active.

The directive works in the following manner.

  1. All tabs are assumed to be inline elements
  2. On linking (load) a child is added as the first node to the directive, which is hidden and positioned absolute to the rest of the tabs.
  3. On click the value of the selected scope variable is changed which triggers the watch callback
  4. the position of the previous active block and the current active block is calculated.
  5. The hidden child element is first positioned over the block previous tab position and then animated from that position to the current position.
  6. After the animation the element is hidden and the current tab is activated.
This ensures that this animation can apply to tabs of uneven width and does not break on screen resize as the absolutely positioned sliding element is active only for the period of the transition after which the actual element with width defined in percentage takes over.



Wednesday, 4 March 2015

Stretching image icon within af:link in ADF using CSS


Usecase:

Consider a scenario where you are using an af:link component and would like to display an image for the icon. You would also like to stretch the image icon to fit the parent pane. As per the doc,
  • A Link in a toolbar behaves as a toolbar child.
  • A Link placed elsewhere on the page cannot be stretched by a parent layout component that stretches its children. e.g. panelStretchLayout, panelSplitter.
  • A Link can have children via a context facet, but these children appear in a popup that has its own fixed size and is not effected by layout.
In this blogpost, I will show you a small workaround which will enable you to stretch the icon image to the size of the parent.

Pre-requisites:
JDeveloper 12.1.3.0.0

Steps:
  • In this post, I am considering the link icon to be a part of a table's column. For this, I have taken an employee view and dropped it to the page. I have added an additional column as a link. This link may take you to another page/taskflow, but let us ignore that for now. The link is designed as an image with the help of icon property.


  • In my sample, I have placed an image under a newly created folder called 'images' under resources. For demo purposes, I have used the same image for all rows of data.

  • In the jspx page, select the link and from the properties inspector, select the image for the icon property.

  • Now, on running the page, you will see that the table occupies some part of the screen and the remaining part is blank. Also, the images have not been rendered completely.

  • Let us first stretch the table to display the complete image. To stretch the table to the full width of the screen, set the 'columnStretching' property to a column value. If you set it to 'last', the last column will be stretched to occupy till end of the screen. Set the property by selecting the table, and adding the property columnStretching="last".
  • This will ensure that the image is fully visible. However, now on hovering over the column, you will notice that the link is available only for a part of the column where the image is present, and the rest is not clickable (rather not navigable). 

  • To fix this, we need to change the size of the icon image to occupy the full column. However, the icon image cannot be changed using size or width properties from the properties inspector.
  • To workaround this issue, add a new css file, with the below entry. This will ensure that the width setting is applied only to images with <a> tag as parent. 
@charset "UTF-8";
a > img{
    width:100%;
}
  • To point to this css file, go to the jspx page and from the component palette, select CSS. The added css file should be present there. Drag and drop the css file to the page.

  • Run the page. 

  • Voila! The link now stretches over the entire column and is clickable throughout. My sample doesn't look that neat, but I guess you get the idea!