ADF Mobile : Taming amx-outputText css

Now Oracle has to do something with this , styleClass on amx-outputText does not really work as it supposed to do.

Basically to apply custom css to any object

<amx:outputText value="#{row.firstName}" id="ot2" styleClass="row-title"/>

we can simple put styleClass, but this time it does not really work on outputText. To access it you have to do like this

.amx-outputText.row-title {

 font-size: 14px;
}

iOS Simulator Screen shot May 2, 2013 3.03.23 PM

ADF Mobile iPhone : Taming the ADF Table

Have you seen G+ app on iPhone ..

Screen Shot 2013-04-29 at 10.44.31 AM

You can use your own css skin file, if you want

<?xml version="1.0" encoding="UTF-8" ?>
<amx:view xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:amx="http://xmlns.oracle.com/adf/mf/amx"
 xmlns:dvtm="http://xmlns.oracle.com/adf/mf/amx/dvt">
 <amx:panelPage id="pp1" inlineStyle="background-color:rgb(245,245,245)">
 <amx:tableLayout id="tl1" width="100%" >
 <amx:rowLayout id="rl1">
 <amx:cellFormat id="cf1" inlineStyle="padding:10px;">
 <amx:tableLayout id="tl2" inlineStyle="border:1px solid rgb(211,211,211);background-color:white">
 <amx:rowLayout id="rl2">
 <amx:cellFormat id="cf2" inlineStyle="padding:10px">
 <amx:outputText value="Free iphone toolbar icons" id="ot1" inlineStyle="font-size:20px;color:rgb(138,138,138)"/>
 </amx:cellFormat>
 </amx:rowLayout>
 <amx:rowLayout id="rl4">
 <amx:cellFormat id="cf4" inlineStyle="padding:10px">
 <amx:outputText value="353 Responses" id="ot3" inlineStyle="font-size:10px;color:rgb(138,138,138)"/>
 </amx:cellFormat>
 </amx:rowLayout>
 <amx:rowLayout id="rl3">
 <amx:cellFormat id="cf3" inlineStyle="padding:10px">
 <amx:outputText value="Lately we’ve been getting more involved in developing iPhone apps for our clients. iPhone apps have their own size and UI standards, so we decided to speed things up for you by sharing some clean and simple iPhone toolbar icons. Feel free to download this 160-piece set, and use it in on your own projects. If you decide to download or use them, please drop a link to this blog post. Thanks!" id="ot2" inlineStyle="font-size:12px;color:rgb(138,138,138)"/>
 </amx:cellFormat>
 </amx:rowLayout>
 <amx:rowLayout id="rl5">
 <amx:cellFormat id="cf5" inlineStyle="padding:10px">
 <amx:tableLayout id="tl3">
 <amx:rowLayout id="rl6">
 <amx:cellFormat id="cf6" inlineStyle="padding:5px;">
 <amx:image id="i1" source="/images/lookalike/01-refresh.png" inlineStyle="width:12px"/>
 </amx:cellFormat>
 <amx:cellFormat id="cf7" inlineStyle="padding:5px;">
 <amx:image id="i2" source="/images/lookalike/05-shuffle.png" inlineStyle="width:12px"/>
 </amx:cellFormat>
 <amx:cellFormat id="cf8" inlineStyle="padding:5px;">
 <!--
 <amx:commandButton text="Invite People" id="cb1" inlineStyle="background-color:white;font-size:11px"/>

 <amx:tableLayout id="tl4" inlineStyle="border:1px solid rgb(211,211,211);border-radius:4px" >
 <amx:rowLayout id="rl7">
 <amx:cellFormat id="cf9" inlineStyle="padding:2px;padding-left:5px;padding-right:5px">

 </amx:cellFormat>
 </amx:rowLayout>
 </amx:tableLayout>
 -->
 </amx:cellFormat>
 </amx:rowLayout>
 </amx:tableLayout>
 </amx:cellFormat>
 </amx:rowLayout>
 </amx:tableLayout>
 </amx:cellFormat>
 </amx:rowLayout>
 </amx:tableLayout>
 </amx:panelPage>
</amx:view>